78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import { Component, computed, inject, model, signal, Signal, WritableSignal } from '@angular/core';
|
|
import { BlockType } from '@models/flow';
|
|
import { BlocksService } from '@services/blocks/blocks';
|
|
import { ListStateViewHolder, OrderViewState } from '@utilities/list-state-holder';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { MatCardModule } from '@angular/material/card';
|
|
import { MatChipsModule } from '@angular/material/chips';
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import { MatInputModule } from '@angular/material/input';
|
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
import { BLOCK_TYPE_DRAG_MIME } from './block-drag';
|
|
|
|
@Component({
|
|
selector: 'app-blocks-list',
|
|
imports: [FormsModule, MatCardModule, MatChipsModule, MatFormFieldModule, MatIconModule, MatInputModule, MatProgressSpinnerModule, MatTooltipModule],
|
|
templateUrl: './blocks-list.html',
|
|
styleUrl: './blocks-list.css',
|
|
})
|
|
export class BlocksList extends ListStateViewHolder<BlockType> {
|
|
|
|
searchTerm = model<string>('');
|
|
|
|
private blocksService = inject(BlocksService);
|
|
|
|
loading: WritableSignal<boolean> = signal(true);
|
|
|
|
/*
|
|
get orderView() {
|
|
const existingState = this.view;
|
|
return existingState.order;
|
|
}*/
|
|
|
|
blockTypes?: Signal<BlockType[]>;
|
|
|
|
constructor() {
|
|
super('blocksList', {
|
|
defaultOrder: { orderBy: 'name', orderDir: 'asc' } as OrderViewState
|
|
});
|
|
}
|
|
|
|
ngOnInit() {
|
|
const existingState = this.view;
|
|
if (existingState.list) {
|
|
this.blockTypes = existingState.list;
|
|
this.loading.set(false);
|
|
return;
|
|
}
|
|
|
|
this.blocksService.getAllBlocksTypes().then((blockTypesSignal) => {
|
|
this.blockTypes = blockTypesSignal;
|
|
this.view.list = this.blockTypes;
|
|
}).catch((err) => {
|
|
console.error('Error loading block types', err);
|
|
}).finally(() => {
|
|
this.loading.set(false);
|
|
});
|
|
}
|
|
|
|
filteredBlocks = computed(() => {
|
|
const blocks = this.blockTypes ? this.blockTypes() : [];
|
|
if (!blocks) return [];
|
|
|
|
const term = this.searchTerm().toLowerCase();
|
|
return blocks.filter((b) =>
|
|
b.type.toLowerCase().includes(term) || b.description.toLowerCase().includes(term)
|
|
);
|
|
});
|
|
|
|
onDragStart(event: DragEvent, block: BlockType) {
|
|
if (!event.dataTransfer) return;
|
|
event.dataTransfer.effectAllowed = 'copy';
|
|
event.dataTransfer.setData(BLOCK_TYPE_DRAG_MIME, JSON.stringify(block));
|
|
event.dataTransfer.setData('text/plain', block.type);
|
|
}
|
|
}
|