Skip to content

Commit

Permalink
Change Schema Form
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexcibotari
alexcibotari committed Sep 27, 2024
1 parent 9885a91 commit c75544f
Show file tree
Hide file tree
Showing 13 changed files with 396 additions and 411 deletions.
20 changes: 11 additions & 9 deletions src/app/features/spaces/contents/edit-document-schema/edit-document-schema.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,7 @@
</mat-card-header>
<mat-divider></mat-divider>
<mat-card-content>
<mat-list class="ll-mat-list-gap">
<mat-nav-list>
@if (data[field.name]; as item) {
<mat-list-item (click)="navigationTo(item._id, field.name, item.schema)">
@if (schemaCompNodeById().get(item.schema); as sch) {
Expand All @@ -333,11 +333,10 @@
<button mat-icon-button (click)="removeSchemaOne(field)">
<mat-icon>delete</mat-icon>
</button>
<mat-icon>navigate_next</mat-icon>
</mat-action-list>
</mat-list-item>
}
</mat-list>
</mat-nav-list>
</mat-card-content>
</mat-card>
}
Expand All @@ -364,10 +363,9 @@
</mat-card-header>
<mat-divider></mat-divider>
<mat-card-content>
<mat-list cdkDropList class="ll-mat-list-gap" (cdkDropListDropped)="schemaDropDrop($event, data[field.name])">
@for (item of data[field.name]; track item; let idx = $index) {
<mat-nav-list cdkDropList (cdkDropListDropped)="schemaDropDrop($event, data[field.name])">
@for (item of data[field.name]; track item; let index = $index; let last = $last) {
<mat-list-item cdkDrag cdkDragPreviewContainer="parent" (click)="navigationTo(item._id, field.name, item.schema)">
<mat-icon matListItemIcon cdkDragHandle>drag_indicator</mat-icon>
@if (schemaCompNodeById().get(item.schema); as sch) {
<div matListItemTitle>
{{ sch.displayName }} <span class="schema-id">#{{ sch.id }}</span>
Expand All @@ -385,17 +383,21 @@
</div>
}
<mat-action-list matListItemMeta>
<button mat-icon-button (click)="duplicateSchemaMany($event, data[field.name], item, idx)">
<button mat-icon-button (click)="duplicateSchemaMany($event, data[field.name], item, index)">
<mat-icon>content_copy</mat-icon>
</button>
<button mat-icon-button (click)="removeSchemaMany(field, item._id)">
<mat-icon>delete</mat-icon>
</button>
<mat-icon>navigate_next</mat-icon>
&nbsp;&nbsp;
<mat-icon cdkDragHandle>drag_indicator</mat-icon>
</mat-action-list>
</mat-list-item>
@if (!last) {
<mat-divider />
}
}
</mat-list>
</mat-nav-list>
</mat-card-content>
</mat-card>
}
Expand Down
4 changes: 2 additions & 2 deletions src/app/features/spaces/contents/edit-document/edit-document.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@

<mat-sidenav-container>
<mat-sidenav-content>
<div class="container-full-screen container-fluid">
<div class="full-screen container-fluid">
<mat-drawer-container autosize="true">
<mat-drawer mode="side" [opened]="settingsStore.editorEnabled()">
@if (selectedEnvironment) {
Expand Down Expand Up @@ -173,7 +173,7 @@
</mat-drawer>
<mat-drawer-content>
@if (rootSchema) {
<div class="container-full-screen">
<div class="flex flex-col mx-auto max-w-screen-md p-4">
<ll-breadcrumb>
@for (schemaPathItem of schemaPath; track schemaPathItem.contentId; let isFirst = $first) {
<ll-breadcrumb-item (click)="navigateToSchemaBackwards(schemaPathItem)" [home]="isFirst">
Expand Down
3 changes: 1 addition & 2 deletions src/app/features/spaces/contents/edit-document/edit-document.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,7 @@ mat-drawer {
}

.container-fluid {
height: calc(100vh - 140px);
padding: 0;
height: calc(100vh - 128px);
}

mat-card.browser {
Expand Down
6 changes: 3 additions & 3 deletions src/app/features/spaces/contents/shared/asset-select/asset-select.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,13 @@
<mat-divider></mat-divider>
<mat-card-content>
@if (asset && asset.kind === 'FILE') {
<mat-list class="assets">
<mat-list>
<mat-list-item>
@if (asset.type.startsWith('image/')) {
<img
matListItemAvatar
class="border object-contain bg-stripes-gray"
width="290"
class="border object-contain bg-stripes-gray !rounded"
width="200"
height="200"
alt="thumbnail"
loading="lazy"
Expand Down
7 changes: 7 additions & 0 deletions src/app/features/spaces/contents/shared/asset-select/asset-select.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,10 @@ mat-form-field {
mat-grid-tile {
//background: $grey-color;
}

//img:hover {
// position: relative;
// overflow: hidden;
// transform: scale(1.5); /* Adjust the scale as needed */
// transition: transform 0.3s ease-in-out;
//}
9 changes: 5 additions & 4 deletions src/app/features/spaces/contents/shared/assets-select/assets-select.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,14 @@
</mat-card-header>
<mat-divider></mat-divider>
<mat-card-content>
<mat-list cdkDropList class="assets" (cdkDropListDropped)="assetDropDrop($event)">
<mat-list cdkDropList (cdkDropListDropped)="assetDropDrop($event)">
@for (asset of assets; track asset.id; let idx = $index) {
<mat-list-item cdkDrag cdkDragPreviewContainer="parent">
<mat-icon matListItemIcon cdkDragHandle>drag_indicator</mat-icon>
@if (asset.type.startsWith('image/')) {
<img
matListItemAvatar
class="border object-contain rounded bg-stripes-gray"
width="290"
class="border object-contain bg-stripes-gray !rounded"
width="200"
height="200"
alt="thumbnail"
loading="lazy"
Expand All @@ -44,6 +43,8 @@
<button mat-icon-button (click)="deleteAsset(idx)">
<mat-icon>delete</mat-icon>
</button>
&nbsp;&nbsp;
<mat-icon cdkDragHandle>drag_indicator</mat-icon>
</mat-action-list>
</mat-list-item>
}
Expand Down
210 changes: 113 additions & 97 deletions src/app/features/spaces/schemas/edit-comp/edit-comp.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,113 +20,129 @@
@if (isLoading) {
<mat-progress-bar mode="query" />
} @else {
<div class="px-2 mx-auto mt-3">
<div class="full-screen">
<form [formGroup]="form">
<div class="flex flex-row gap-4">
<div class="basis-1/3">
<mat-form-field>
<mat-label>Display Name</mat-label>
<input matInput type="text" formControlName="displayName" minlength="3" maxlength="50" autocomplete="off" />
<mat-hint align="end">{{ form.controls['displayName'].value?.length || 0 }}/50</mat-hint>
@if (form.controls['displayName'].errors; as errors) {
<mat-error>{{ fe.errors(errors) }}</mat-error>
}
</mat-form-field>
<mat-form-field>
<mat-label>Description</mat-label>
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2" cdkAutosizeMaxRows="6"></textarea>
<mat-hint align="end">{{ form.controls['description'].value?.length || 0 }}/250</mat-hint>
@if (form.controls['description']?.errors; as errors) {
<mat-error>{{ fe.errors(errors) }}</mat-error>
}
</mat-form-field>
<mat-form-field>
<mat-label>Preview Field</mat-label>
<mat-select formControlName="previewField">
@for (field of fields.controls; track field.value.name) {
@if (
['TEXT', 'TEXTAREA', 'NUMBER', 'COLOR', 'DATE', 'DATETIME', 'BOOLEAN', 'OPTION', 'OPTIONS'].includes(field.value.kind)
) {
<mat-option [value]="field.value.name">
{{ field.value.displayName }} <span>#{{ field.value.name }}</span>
</mat-option>
}
<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="center" animationDuration="0ms">
<mat-tab label="Fields">
<mat-drawer-container (backdropClick)="selectedFieldIdx = undefined">
<mat-drawer-content>
<div class="flex flex-col mx-auto max-w-screen-md gap-6 p-8" style="height: calc(100vh - 177px)">
<mat-nav-list cdkDropList (cdkDropListDropped)="fieldDropDrop($event)">
<mat-form-field>
<mat-label>Name</mat-label>
<input matInput type="text" [formControl]="newFieldName" autocomplete="off" />
<button mat-stroked-button matTextSuffix color="accent" (click)="addField()" [disabled]="!newFieldName.valid">
Add
</button>
@if (newFieldName.errors; as errors) {
<mat-error>{{ fe.errors(errors) }}</mat-error>
}
</mat-form-field>
@for (field of fields.controls; track field.value.name; let index = $index; let last = $last) {
<mat-list-item
cdkDrag
cdkDragPreviewContainer="parent"
(click)="selectComponent(index)"
[activated]="index === selectedFieldIdx"
[class.invalid]="field.invalid">
<mat-icon matListItemIcon class="type">{{ schemaFieldKindDescriptions[field.value.kind].icon }}</mat-icon>
<span matListItemTitle>
{{ field.value.displayName }} <span class="field-id">#{{ field.value.name }}</span>
</span>
<span matListItemLine>
<span class="badge">{{ field.value.kind }}</span>
@if (field.value.translatable) {
&nbsp;<span class="badge">Translatable</span>
}
@if (field.value.required) {
&nbsp;<span class="badge">Required</span>
}
</span>
<mat-action-list matListItemMeta>
<button mat-icon-button (click)="removeComponent($event, index)">
<mat-icon>delete</mat-icon>
</button>
&nbsp;&nbsp;
<mat-icon cdkDragHandle>drag_indicator</mat-icon>
</mat-action-list>
</mat-list-item>
@if (!last) {
<mat-divider />
}
}
</mat-nav-list>
</div>
</mat-drawer-content>
<mat-drawer position="end" [opened]="selectedFieldIdx !== undefined">
@if (fields.at(selectedFieldIdx === undefined ? -100 : selectedFieldIdx); as selectedComponent) {
<div formArrayName="fields">
<ll-schema-field-edit [form]="selectedComponent" [reservedNames]="fieldReservedNames" [schemas]="schemas" />
</div>
}
</mat-select>
<mat-hint align="end">{{ form.controls['previewField'].value?.length || 0 }}/50</mat-hint>
@if (form.controls['previewField'].errors; as errors) {
<mat-error>{{ fe.errors(errors) }}</mat-error>
}
</mat-form-field>
<mat-form-field>
<mat-label>Labels</mat-label>
<mat-chip-grid #chipGrid aria-label="Enter Labels">
@for (label of form.controls['labels'].value; track label) {
<mat-chip-row (removed)="removeLabel(label)">
{{ label }}
<button matChipRemove [attr.aria-label]="'Remove ' + label">
<mat-icon>cancel</mat-icon>
</button>
</mat-chip-row>
</mat-drawer>
</mat-drawer-container>
</mat-tab>
<mat-tab label="Settings">
<div class="flex flex-col mx-auto max-w-screen-md gap-6 p-8">
<mat-form-field>
<mat-label>Display Name</mat-label>
<input matInput type="text" formControlName="displayName" minlength="3" maxlength="50" autocomplete="off" />
<mat-hint align="end">{{ form.controls['displayName'].value?.length || 0 }}/50</mat-hint>
@if (form.controls['displayName'].errors; as errors) {
<mat-error>{{ fe.errors(errors) }}</mat-error>
}
</mat-chip-grid>
<input
placeholder="New Label..."
[matChipInputFor]="chipGrid"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addLabel($event)" />
@if (form.controls['labels'].errors; as errors) {
<mat-error>{{ fe.errors(errors) }}</mat-error>
}
</mat-form-field>
<mat-list cdkDropList class="ll-mat-list-gap" (cdkDropListDropped)="fieldDropDrop($event)">
<mat-divider></mat-divider>
<div mat-subheader>Fields</div>
</mat-form-field>
<mat-form-field>
<mat-label>Name</mat-label>
<input matInput type="text" [formControl]="newFieldName" autocomplete="off" />
<button mat-stroked-button matTextSuffix color="accent" (click)="addField()" [disabled]="!newFieldName.valid">Add</button>
@if (newFieldName.errors; as errors) {
<mat-label>Description</mat-label>
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2" cdkAutosizeMaxRows="6"></textarea>
<mat-hint align="end">{{ form.controls['description'].value?.length || 0 }}/250</mat-hint>
@if (form.controls['description']?.errors; as errors) {
<mat-error>{{ fe.errors(errors) }}</mat-error>
}
</mat-form-field>
<mat-list-item
cdkDrag
cdkDragPreviewContainer="parent"
*ngFor="let field of fields.controls; let index = index"
(click)="selectComponent(index)"
[class.active]="index === selectedFieldIdx"
[class.invalid]="field.invalid">
<mat-icon matListItemIcon cdkDragHandle>drag_indicator</mat-icon>
<mat-icon matListItemIcon class="type">{{ schemaFieldKindDescriptions[field.value.kind].icon }}</mat-icon>
<span matListItemTitle>
{{ field.value.displayName }} <span class="field-id">#{{ field.value.name }}</span>
</span>
<span matListItemLine>
<span class="badge">{{ field.value.kind }}</span>
@if (field.value.translatable) {
&nbsp;<span class="badge">Translatable</span>
<mat-form-field>
<mat-label>Preview Field</mat-label>
<mat-select formControlName="previewField">
@for (field of fields.controls; track field.value.name) {
@if (
['TEXT', 'TEXTAREA', 'NUMBER', 'COLOR', 'DATE', 'DATETIME', 'BOOLEAN', 'OPTION', 'OPTIONS'].includes(field.value.kind)
) {
<mat-option [value]="field.value.name">
{{ field.value.displayName }} <span>#{{ field.value.name }}</span>
</mat-option>
}
}
@if (field.value.required) {
&nbsp;<span class="badge">Required</span>
</mat-select>
<mat-hint align="end">{{ form.controls['previewField'].value?.length || 0 }}/50</mat-hint>
@if (form.controls['previewField'].errors; as errors) {
<mat-error>{{ fe.errors(errors) }}</mat-error>
}
</mat-form-field>
<mat-form-field>
<mat-label>Labels</mat-label>
<mat-chip-grid #chipGrid aria-label="Enter Labels">
@for (label of form.controls['labels'].value; track label) {
<mat-chip-row (removed)="removeLabel(label)">
{{ label }}
<button matChipRemove [attr.aria-label]="'Remove ' + label">
<mat-icon>cancel</mat-icon>
</button>
</mat-chip-row>
}
</span>
<mat-action-list matListItemMeta>
<button mat-icon-button (click)="removeComponent($event, index)">
<mat-icon>delete</mat-icon>
</button>
<mat-icon>arrow_right</mat-icon>
</mat-action-list>
</mat-list-item>
</mat-list>
</div>
@if (fields.at(selectedFieldIdx === undefined ? -100 : selectedFieldIdx); as selectedComponent) {
<div class="basis-2/3" formArrayName="fields">
<ll-schema-field-edit [form]="selectedComponent" [reservedNames]="fieldReservedNames" [schemas]="schemas" />
</mat-chip-grid>
<input
placeholder="New Label..."
[matChipInputFor]="chipGrid"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addLabel($event)" />
@if (form.controls['labels'].errors; as errors) {
<mat-error>{{ fe.errors(errors) }}</mat-error>
}
</mat-form-field>
</div>
}
</div>
</mat-tab>
</mat-tab-group>
</form>
</div>
}
Expand Down
6 changes: 3 additions & 3 deletions src/app/features/spaces/schemas/edit-comp/edit-comp.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,9 @@ export class EditCompComponent implements OnInit {
if (schema.type === SchemaType.NODE || schema.type === SchemaType.ROOT) {
this.fields.clear();
schema.fields?.forEach(it => this.addField(it));
if (this.selectedFieldIdx === undefined) {
this.selectComponent(this.fields.length - 1);
}
// if (this.selectedFieldIdx === undefined) {
// this.selectComponent(this.fields.length - 1);
// }
}

this.isLoading = false;
Expand Down
Loading

0 comments on commit c75544f

Please sign in to comment.