128 lines
3.6 KiB
TypeScript
128 lines
3.6 KiB
TypeScript
import {
|
|
ChangeDetectionStrategy,
|
|
Component,
|
|
model,
|
|
signal,
|
|
} from '@angular/core';
|
|
import { AccordionModule } from 'primeng/accordion';
|
|
import { Column } from '../duckdb.service';
|
|
import { Checkbox } from 'primeng/checkbox';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { Button } from 'primeng/button';
|
|
import { Tooltip } from 'primeng/tooltip';
|
|
import { Dialog } from 'primeng/dialog';
|
|
import { FloatLabel } from 'primeng/floatlabel';
|
|
import { InputText } from 'primeng/inputtext';
|
|
import { Select } from 'primeng/select';
|
|
import { Field, form } from '@angular/forms/signals';
|
|
|
|
@Component({
|
|
selector: 'app-column-editor',
|
|
standalone: true,
|
|
imports: [
|
|
AccordionModule,
|
|
Checkbox,
|
|
FormsModule,
|
|
Button,
|
|
Tooltip,
|
|
Dialog,
|
|
FloatLabel,
|
|
InputText,
|
|
Select,
|
|
Field,
|
|
],
|
|
template: `
|
|
<p-accordion [value]="0">
|
|
<p-accordion-panel [value]="0">
|
|
<p-accordion-header>Columns</p-accordion-header>
|
|
<p-accordion-content>
|
|
<ul>
|
|
@for (column of columns(); track $index) {
|
|
<li class="flex items-baseline">
|
|
<p-checkbox
|
|
(ngModelChange)="checkboxChanged($index)"
|
|
[binary]="true"
|
|
[inputId]="column.name"
|
|
name="group"
|
|
[ngModel]="column.enabled"
|
|
/>
|
|
<label
|
|
[for]="column.name"
|
|
[pTooltip]="column.name"
|
|
tooltipPosition="bottom"
|
|
class="ml-2 grow shrink basis-0 truncate cursor-pointer"
|
|
>
|
|
{{ column.name }}
|
|
</label>
|
|
<p-button
|
|
(onClick)="editColumn($index)"
|
|
icon="pi pi-pencil"
|
|
text
|
|
pTooltip="Edit Column"
|
|
></p-button>
|
|
</li>
|
|
}
|
|
</ul>
|
|
</p-accordion-content>
|
|
</p-accordion-panel>
|
|
</p-accordion>
|
|
<p-dialog [(visible)]="editDialogVisible" header="Edit Column">
|
|
<p-float-label variant="in">
|
|
<input pInputText id="column-edit-name" [field]="editingColumn.name" />
|
|
<label for="column-edit-name">Name</label>
|
|
</p-float-label>
|
|
<p-float-label variant="in">
|
|
<p-select
|
|
inputId="column-edit-type"
|
|
[field]="editingColumn.type"
|
|
></p-select>
|
|
<label for="column-edit-type">Type</label>
|
|
</p-float-label>
|
|
<div class="flex items-center gap-2">
|
|
<p-check-box
|
|
[field]="editingColumn.enabled"
|
|
[binary]="true"
|
|
inputId="column-edit-enabled"
|
|
></p-check-box>
|
|
<label for="column-edit-enabled">Enabled</label>
|
|
</div>
|
|
</p-dialog>
|
|
`,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class ColumnEditorComponent {
|
|
columns = model<Column[]>();
|
|
|
|
protected editDialogVisible = signal(false);
|
|
|
|
protected currentColumn = signal<Column>({
|
|
name: '',
|
|
enabled: true,
|
|
type: 'string',
|
|
});
|
|
|
|
protected editingColumn = form(this.currentColumn);
|
|
|
|
protected checkboxChanged(index: number) {
|
|
this.columns.update((columns) => {
|
|
if (columns) {
|
|
let enabledColumns = columns?.slice();
|
|
enabledColumns[index] = {
|
|
...enabledColumns[index],
|
|
enabled: !enabledColumns[index].enabled,
|
|
};
|
|
return enabledColumns;
|
|
}
|
|
return columns;
|
|
});
|
|
}
|
|
|
|
protected editColumn(index: number) {
|
|
const columns = this.columns();
|
|
if (columns) {
|
|
this.currentColumn.set(columns[index]);
|
|
this.editDialogVisible.set(true);
|
|
}
|
|
}
|
|
}
|