Skip to content

Commit 96e2527

Browse files
develite98develite98
committed
feat(): update ui & function database
1 parent 33ee95a commit 96e2527

File tree

19 files changed

+342
-90
lines changed

19 files changed

+342
-90
lines changed

‎apps/mix-cms/src/app/components/entity-form/entity-form.component.html‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
<div class="card-01-wrap" [class.--new]="entity.new">
1+
<div
2+
class="card-01-wrap"
3+
[class.--new]="entity.new"
4+
[style.--color]="getColor(form.value)"
5+
>
26
<div class="card-01" [formGroup]="form">
37
<div class="row">
48
<div class="col-4 d-flex align-items-center gap-2">
@@ -31,19 +35,15 @@
3135

3236
<div class="col-2">
3337
<mix-button
34-
class="w-100 data-type-select"
3538
type="outline"
3639
(click)="showDataTypeDialog($event, dataTypePicker)"
3740
size="m"
3841
>
39-
<div *ngIf="form.controls.dataType.value">
40-
{{
41-
$any(dataTypeDisplay)[form.controls.dataType.value]?.name ??
42-
form.controls.dataType.value
43-
}}
42+
<div *ngIf="getDisplay(form.value) as title">
43+
{{ title }}
4444
</div>
4545

46-
<span class="mix-icon">chevron_right</span>
46+
<span class="ms-1 mix-icon">edit</span>
4747
</mix-button>
4848
</div>
4949
</div>
@@ -89,12 +89,13 @@
8989

9090
<ng-template #dataTypePicker let-ref>
9191
<div class="mix-dialog__header">Choose data type</div>
92-
<div class="data-type-picker-dialog-container">
92+
<div class="data-type-picker-dialog-container" [formGroup]="form">
9393
<ng-container *ngFor="let group of dataTypeGroups">
94-
<div class="row mb-3" [formGroup]="form">
94+
<div class="row mb-3">
9595
<div class="col-12">
9696
<div class="text-l mb-2 text-500">{{ group.label }}</div>
9797
</div>
98+
9899
<div *ngFor="let dataType of group.types" class="col-12 col-md-6">
99100
<tui-radio-block
100101
class="mb-2 data-type-card"

‎apps/mix-cms/src/app/components/entity-form/entity-form.component.ts‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,19 @@ import {
1818
ReactiveFormsModule,
1919
Validators,
2020
} from '@angular/forms';
21-
import { DataTypeDisplay, MixColumn } from '@mixcore/lib/model';
21+
import {
22+
DataType,
23+
DataTypeColors,
24+
DataTypeDisplay,
25+
MixColumn,
26+
} from '@mixcore/lib/model';
2227
import { FormHelper } from '@mixcore/share/form';
2328
import { MixButtonComponent } from '@mixcore/ui/button';
2429
import { MixInputComponent } from '@mixcore/ui/input';
2530
import { MixSelectComponent } from '@mixcore/ui/select';
2631
import { MixToggleComponent } from '@mixcore/ui/toggle';
2732
import { DialogService } from '@ngneat/dialog';
33+
import { tuiPure } from '@taiga-ui/cdk';
2834
import { TuiRadioBlockModule, TuiTabsModule } from '@taiga-ui/kit';
2935
import { debounceTime } from 'rxjs';
3036

@@ -55,9 +61,7 @@ export class EntityFormComponent implements OnInit {
5561
public activeTabIndex = 0;
5662
public destroyRef = inject(DestroyRef);
5763
public dialogSrv = inject(DialogService);
58-
59-
public dataTypeDisplay = DataTypeDisplay;
60-
public dataTypeGroups = [
64+
public readonly dataTypeGroups = [
6165
{
6266
label: 'Text',
6367
id: 'text',
@@ -111,6 +115,20 @@ export class EntityFormComponent implements OnInit {
111115
},
112116
];
113117

118+
@tuiPure
119+
public getColor(form: Partial<{ dataType: string | null }>) {
120+
if (!form.dataType) return '#fff';
121+
122+
return DataTypeColors[form.dataType as DataType];
123+
}
124+
125+
@tuiPure
126+
public getDisplay(form: Partial<{ dataType: string | null }>) {
127+
if (!form.dataType) return 'Choose data type';
128+
129+
return DataTypeDisplay[form.dataType as DataType].name;
130+
}
131+
114132
public form = new FormGroup({
115133
systemName: new FormControl('', Validators.required),
116134
displayName: new FormControl('', Validators.required),

‎apps/mix-cms/src/app/pages/portal/database-data/database-data.component.scss‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,10 @@
33
flex-direction: column;
44
flex-grow: 1;
55

6-
&__table {
7-
border-spacing: 0 !important;
8-
// table-layout: auto;
9-
10-
tr:hover td {
11-
background: var(--highlight-background-color) !important;
12-
}
13-
}
14-
156
&__toolbar {
16-
padding: 8px;
7+
padding: var(--container-padding);
8+
padding-top: 8px;
9+
padding-bottom: 8px;
1710
border-bottom: 1px solid var(--border-color-default);
1811
display: flex;
1912
gap: 4px;

‎apps/mix-cms/src/app/pages/portal/database-data/database-data.component.ts‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -213,12 +213,19 @@ export class DatabaseDataComponent
213213
icon: 'system_update_alt',
214214
place: 'left',
215215
},
216+
{
217+
label: 'Setup Db',
218+
key: 'setup',
219+
icon: 'settings',
220+
place: 'right',
221+
},
216222
];
217223

218224
public actionMaps = {
219225
create: () => this.onInsertData(),
220226
delete: () => this.onDeleteData(),
221227
export: () => this.onExportData(),
228+
setup: () => this.onSetupDb(),
222229
};
223230

224231
constructor() {
@@ -243,6 +250,16 @@ export class DatabaseDataComponent
243250
});
244251
}
245252

253+
public onSetupDb() {
254+
this.store.vm$
255+
.pipe(take(1))
256+
.subscribe((vm) =>
257+
this.router.navigateByUrl(
258+
`${CMS_ROUTES.portal.database.fullPath}/${vm.db?.id || 'create'}`
259+
)
260+
);
261+
}
262+
246263
public onDeleteData(): void {
247264
const selectedData = this.selectedItems;
248265
if (!selectedData?.length) {
@@ -284,18 +301,6 @@ export class DatabaseDataComponent
284301
.subscribe();
285302
}
286303

287-
public async onEditData(data: MixDynamicData) {
288-
await this.router.navigateByUrl(
289-
`${CMS_ROUTES.portal['database-data'].fullPath}/${this.dbSysName}/${data.id}`
290-
);
291-
}
292-
293-
public async onCreateData() {
294-
await this.router.navigateByUrl(
295-
`${CMS_ROUTES.portal['database-data'].fullPath}/${this.dbSysName}/create`
296-
);
297-
}
298-
299304
public onHideColumn(displayName: string) {
300305
this.displayColumns = this.displayColumns.filter((d) => d !== displayName);
301306
this.reUpdateColumnDef();

‎apps/mix-cms/src/app/pages/portal/database-data/database-data.routes.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,20 @@ export const routes: Routes = [
66
loadComponent: () =>
77
import('./database-data.component').then((m) => m.DatabaseDataComponent),
88
},
9-
{
10-
path: ':databaseSysName/:id',
11-
loadComponent: () =>
12-
import('./database-data-form/database-data-form.component').then(
13-
(m) => m.DatabaseDataFormComponent
14-
),
15-
},
16-
{
17-
path: ':databaseSysName/create',
18-
loadComponent: () =>
19-
import('./database-data-form/database-data-form.component').then(
20-
(m) => m.DatabaseDataFormComponent
21-
),
22-
},
9+
// {
10+
// path: ':databaseSysName/:id',
11+
// loadComponent: () =>
12+
// import('./database-data-form/database-data-form.component').then(
13+
// (m) => m.DatabaseDataFormComponent
14+
// ),
15+
// },
16+
// {
17+
// path: ':databaseSysName/create',
18+
// loadComponent: () =>
19+
// import('./database-data-form/database-data-form.component').then(
20+
// (m) => m.DatabaseDataFormComponent
21+
// ),
22+
// },
2323
{
2424
path: '',
2525
loadComponent: () =>

‎apps/mix-cms/src/app/pages/portal/database/components/database-migration/database-migration.component.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
@if (!dbSysName) {
2+
<div class="mt-1 mb-2 notification --info">
3+
Create your db first to run some migrations
4+
</div>
5+
} @else {
6+
<ng-container *ngIf="loadingState() as state">
7+
<div class="mb-3 mt-1">
8+
<mix-button [loading]="state === 'Loading'" (click)="migrateSingleTable()"
9+
>Migrate to single table</mix-button
10+
>
11+
12+
<div>
13+
Before using a database that you have created for the first time, it must
14+
be migrated into a single table.
15+
</div>
16+
</div>
17+
18+
<div class="mb-3">
19+
<mix-button [loading]="state === 'Loading'" (click)="backupSingleTable()"
20+
>Backup table</mix-button
21+
>
22+
23+
<div>
24+
When you activate this button, the system will automatically backup your
25+
data in case you need it in the future.
26+
</div>
27+
</div>
28+
29+
<div class="mb-3">
30+
<mix-button
31+
[type]="'danger'"
32+
[loading]="state === 'Loading'"
33+
(click)="restoreSingleTable()"
34+
>Restore table</mix-button
35+
>
36+
37+
<div>
38+
Depending on when you last backed up the data, the system will restore it.
39+
</div>
40+
</div>
41+
42+
<div class="mb-3">
43+
<mix-button [loading]="state === 'Loading'" (click)="updateSingleTable()"
44+
>Update data table</mix-button
45+
>
46+
47+
<div>
48+
When you wish to make changes to your database or add new columns, run
49+
this migration.
50+
</div>
51+
</div>
52+
</ng-container>
53+
}

‎apps/mix-cms/src/app/pages/portal/database/components/database-migration/database-migration.component.scss‎

Whitespace-only changes.

‎apps/mix-cms/src/app/pages/portal/database/components/database-migration/database-migration.component.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { CommonModule } from '@angular/common';
2+
import {
3+
ChangeDetectionStrategy,
4+
Component,
5+
Input,
6+
inject,
7+
} from '@angular/core';
8+
import { MixApiFacadeService } from '@mixcore/share/api';
9+
import { BaseComponent } from '@mixcore/share/base';
10+
import { MixButtonComponent } from '@mixcore/ui/button';
11+
12+
@Component({
13+
selector: 'mix-database-migration',
14+
standalone: true,
15+
imports: [CommonModule, MixButtonComponent],
16+
templateUrl: './database-migration.component.html',
17+
styleUrl: './database-migration.component.scss',
18+
changeDetection: ChangeDetectionStrategy.OnPush,
19+
})
20+
export class DatabaseMigrationComponent extends BaseComponent {
21+
@Input() public dbSysName?: string;
22+
public mixApi = inject(MixApiFacadeService);
23+
24+
public migrateSingleTable() {
25+
this.mixApi.databaseApi
26+
.migrateToSingleTable(this.dbSysName!)
27+
.pipe(this.observerLoadingStateSignal())
28+
.subscribe();
29+
}
30+
31+
public updateSingleTable() {
32+
this.mixApi.databaseApi
33+
.updateDataTable(this.dbSysName!)
34+
.pipe(this.observerLoadingStateSignal())
35+
.subscribe();
36+
}
37+
38+
public backupSingleTable() {
39+
this.mixApi.databaseApi
40+
.backupTable(this.dbSysName!)
41+
.pipe(this.observerLoadingStateSignal())
42+
.subscribe();
43+
}
44+
45+
public restoreSingleTable() {
46+
this.mixApi.databaseApi
47+
.restoreTable(this.dbSysName!)
48+
.pipe(this.observerLoadingStateSignal())
49+
.subscribe();
50+
}
51+
}

‎apps/mix-cms/src/app/pages/portal/database/components/database-permission/database-permission.component.html‎

Lines changed: 33 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,37 @@
1-
<div class="mt-1 mb-2 notification --info">
2-
Type and press enter to input permission key(s):
3-
</div>
1+
<form [formGroup]="form">
2+
<div class="mt-1 mb-2 notification --info">
3+
Type and press enter to input permission key(s):
4+
</div>
45

5-
<div class="mb-2">
6-
<div class="mb-1 text-500">Read Permission(s)</div>
7-
<mix-input-tag></mix-input-tag>
8-
</div>
6+
<div class="mb-2">
7+
<div class="mb-1 text-500">Read Permission(s)</div>
8+
<mix-input-tag
9+
[placeHolder]="'Type & Enter'"
10+
formControlName="readPermissions"
11+
></mix-input-tag>
12+
</div>
913

10-
<div class="mb-2">
11-
<div class="mb-1 text-500">Create Permission(s)</div>
12-
<mix-input-tag></mix-input-tag>
13-
</div>
14+
<div class="mb-2">
15+
<div class="mb-1 text-500">Create Permission(s)</div>
16+
<mix-input-tag
17+
[placeHolder]="'Type & Enter'"
18+
formControlName="createPermissions"
19+
></mix-input-tag>
20+
</div>
1421

15-
<div class="mb-2">
16-
<div class="mb-1 text-500">Update Permission(s)</div>
17-
<mix-input-tag></mix-input-tag>
18-
</div>
22+
<div class="mb-2">
23+
<div class="mb-1 text-500">Update Permission(s)</div>
24+
<mix-input-tag
25+
[placeHolder]="'Type & Enter'"
26+
formControlName="updatePermissions"
27+
></mix-input-tag>
28+
</div>
1929

20-
<div class="mb-2">
21-
<div class="mb-1 text-500">Delete Permission(s)</div>
22-
<mix-input-tag></mix-input-tag>
23-
</div>
30+
<div class="mb-2">
31+
<div class="mb-1 text-500">Delete Permission(s)</div>
32+
<mix-input-tag
33+
[placeHolder]="'Type & Enter'"
34+
formControlName="deletePermissions"
35+
></mix-input-tag>
36+
</div>
37+
</form>

‎apps/mix-cms/src/app/pages/portal/database/components/database-permission/database-permission.component.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import { CommonModule } from '@angular/common';
2-
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
3+
import { FormGroup, ReactiveFormsModule } from '@angular/forms';
34
import { MixInputTagComponent } from '@mixcore/ui/input-tag';
45

56
@Component({
67
selector: 'mix-database-permission',
78
standalone: true,
8-
imports: [CommonModule, MixInputTagComponent],
9+
imports: [CommonModule, MixInputTagComponent, ReactiveFormsModule],
910
templateUrl: './database-permission.component.html',
1011
styleUrl: './database-permission.component.scss',
1112
changeDetection: ChangeDetectionStrategy.OnPush,
1213
})
13-
export class DatabasePermissionComponent {}
14+
export class DatabasePermissionComponent {
15+
@Input() public form!: FormGroup;
16+
}

0 commit comments

Comments
 (0)