feat(): update project select

Author: develite98

.prettierignore

@@ -5,4 +5,6 @@
 
 .angular
 
-/.nx/cache
+/.nx/cache
+
+ *.html

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

@@ -36,7 +36,6 @@ import {
   Subject,
   debounceTime,
   distinctUntilChanged,
-  filter,
   forkJoin,
   map,
   take,
@@ -45,7 +44,6 @@ import {
 } from 'rxjs';
 import { CMS_ROUTES } from '../../../app.routes';
 
-import { SuccessFilter } from '@mixcore/share/base';
 import { ListPageKit } from '../../../shares/kits/list-page-kit.component';
 import { DatabaseDataStore } from '../../../stores/database-data.store';
 import { CustomActionCellComponent } from './components/custom-action-cell/custom-action-cell.component';
@@ -149,7 +147,6 @@ export class DatabaseDataComponent
   public onGridReady(params: GridReadyEvent) {
     this.gridApi = params.api;
     this.rowData$ = this.store.vm$.pipe(
-      filter(SuccessFilter),
       tap((s) => {
         if (s.db) {
           this.allColumnDefs = s.db.columns.map(
@@ -162,7 +159,6 @@ export class DatabaseDataComponent
                   dataType: x.dataType,
                   columnType: 'value',
                 },
-                editable: true,
               }
           );
           this.columnNames = s.db.columns.map((x) => x.displayName);
@@ -175,7 +171,9 @@ export class DatabaseDataComponent
           ];
         }
       }),
-      map((s) => s.data),
+      map((s) => {
+        return s.data;
+      }),
       takeUntil(this.destroy$)
     );
 
@@ -383,10 +381,7 @@ export class DatabaseDataComponent
       });
 
       dialogRef.afterClosed$.subscribe((value) => {
-        if (value) {
-          this.store.updateData(dataIndex, value);
-          this.gridApi.refreshCells();
-        }
+        if (value) this.store.updateData(dataIndex, value);
       });
     });
   }

apps/mix-cms/src/app/pages/portal/database/components/database-migration/backup-table-btn.component.ts

@@ -0,0 +1,40 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  inject,
+} from '@angular/core';
+import { MixApiFacadeService } from '@mixcore/share/api';
+import { BaseComponent } from '@mixcore/share/base';
+import { MixButtonComponent } from '@mixcore/ui/button';
+
+@Component({
+  selector: 'mix-backup-table-btn',
+  standalone: true,
+  imports: [CommonModule, MixButtonComponent],
+  template: `
+    <mix-button
+      [loading]="loadingState() === 'Loading'"
+      (click)="backupSingleTable()"
+      >Backup table</mix-button
+    >
+
+    <div>
+      When you activate this button, the system will automatically backup your
+      data in case you need it in the future.
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BackupTableButtonComponent extends BaseComponent {
+  @Input() public dbSysName?: string;
+  public mixApi = inject(MixApiFacadeService);
+
+  public backupSingleTable() {
+    this.mixApi.databaseApi
+      .backupTable(this.dbSysName!)
+      .pipe(this.observerLoadingStateSignal())
+      .subscribe();
+  }
+}

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

@@ -1,51 +1,47 @@
 import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  inject,
-} from '@angular/core';
-import { MixApiFacadeService } from '@mixcore/share/api';
-import { BaseComponent } from '@mixcore/share/base';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { MixButtonComponent } from '@mixcore/ui/button';
+import { BackupTableButtonComponent } from './backup-table-btn.component';
+import { MigrateTableButtonComponent } from './migrate-table-btn.component';
+import { RestoreTableButtonComponent } from './restore-table-btn.component';
+import { UpdateTableButtonComponent } from './update-table-btn.component';
 
 @Component({
   selector: 'mix-database-migration',
   standalone: true,
-  imports: [CommonModule, MixButtonComponent],
-  templateUrl: './database-migration.component.html',
-  styleUrl: './database-migration.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DatabaseMigrationComponent extends BaseComponent {
-  @Input() public dbSysName?: string;
-  public mixApi = inject(MixApiFacadeService);
-
-  public migrateSingleTable() {
-    this.mixApi.databaseApi
-      .migrateToSingleTable(this.dbSysName!)
-      .pipe(this.observerLoadingStateSignal())
-      .subscribe();
-  }
+  imports: [
+    CommonModule,
+    MixButtonComponent,
+    UpdateTableButtonComponent,
+    MigrateTableButtonComponent,
+    BackupTableButtonComponent,
+    RestoreTableButtonComponent,
+  ],
+  template: `
+    @if (!dbSysName) {
+    <div class="mt-1 mb-2 notification --info">
+      Create your db first to run some migrations
+    </div>
+    } @else {
+    <div class="mb-3 mt-1">
+      <mix-migrate-table-btn [dbSysName]="dbSysName"></mix-migrate-table-btn>
+    </div>
 
-  public updateSingleTable() {
-    this.mixApi.databaseApi
-      .updateDataTable(this.dbSysName!)
-      .pipe(this.observerLoadingStateSignal())
-      .subscribe();
-  }
+    <div class="mb-3">
+      <mix-backup-table-btn [dbSysName]="dbSysName"></mix-backup-table-btn>
+    </div>
 
-  public backupSingleTable() {
-    this.mixApi.databaseApi
-      .backupTable(this.dbSysName!)
-      .pipe(this.observerLoadingStateSignal())
-      .subscribe();
-  }
+    <div class="mb-3">
+      <mix-restore-table-btn [dbSysName]="dbSysName"></mix-restore-table-btn>
+    </div>
 
-  public restoreSingleTable() {
-    this.mixApi.databaseApi
-      .restoreTable(this.dbSysName!)
-      .pipe(this.observerLoadingStateSignal())
-      .subscribe();
-  }
+    <div class="mb-3">
+      <mix-update-table-btn [dbSysName]="dbSysName"></mix-update-table-btn>
+    </div>
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DatabaseMigrationComponent {
+  @Input() public dbSysName?: string;
 }

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

@@ -0,0 +1,40 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  inject,
+} from '@angular/core';
+import { MixApiFacadeService } from '@mixcore/share/api';
+import { BaseComponent } from '@mixcore/share/base';
+import { MixButtonComponent } from '@mixcore/ui/button';
+
+@Component({
+  selector: 'mix-migrate-table-btn',
+  standalone: true,
+  imports: [CommonModule, MixButtonComponent],
+  template: `
+    <mix-button
+      [loading]="loadingState() === 'Loading'"
+      (click)="migrateSingleTable()"
+      >Migrate to single table</mix-button
+    >
+
+    <div>
+      Before using a database that you have created for the first time, it must
+      be migrated into a single table.
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MigrateTableButtonComponent extends BaseComponent {
+  @Input() public dbSysName?: string;
+  public mixApi = inject(MixApiFacadeService);
+
+  public migrateSingleTable() {
+    this.mixApi.databaseApi
+      .migrateToSingleTable(this.dbSysName!)
+      .pipe(this.observerLoadingStateSignal())
+      .subscribe();
+  }
+}

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

@@ -0,0 +1,40 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  inject,
+} from '@angular/core';
+import { MixApiFacadeService } from '@mixcore/share/api';
+import { BaseComponent } from '@mixcore/share/base';
+import { MixButtonComponent } from '@mixcore/ui/button';
+
+@Component({
+  selector: 'mix-restore-table-btn',
+  standalone: true,
+  imports: [CommonModule, MixButtonComponent],
+  template: `
+    <mix-button
+      [type]="'danger'"
+      [loading]="loadingState() === 'Loading'"
+      (click)="restoreSingleTable()"
+      >Restore table</mix-button
+    >
+
+    <div>
+      Depending on when you last backed up the data, the system will restore it.
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RestoreTableButtonComponent extends BaseComponent {
+  @Input() public dbSysName?: string;
+  public mixApi = inject(MixApiFacadeService);
+
+  public restoreSingleTable() {
+    this.mixApi.databaseApi
+      .restoreTable(this.dbSysName!)
+      .pipe(this.observerLoadingStateSignal())
+      .subscribe();
+  }
+}

apps/mix-cms/src/app/pages/portal/database/components/database-migration/migrate-table-btn.component.ts

@@ -0,0 +1,40 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  inject,
+} from '@angular/core';
+import { MixApiFacadeService } from '@mixcore/share/api';
+import { BaseComponent } from '@mixcore/share/base';
+import { MixButtonComponent } from '@mixcore/ui/button';
+
+@Component({
+  selector: 'mix-update-table-btn',
+  standalone: true,
+  imports: [CommonModule, MixButtonComponent],
+  template: `
+    <mix-button
+      [loading]="loadingState() === 'Loading'"
+      (click)="updateSingleTable()"
+      >Update data table</mix-button
+    >
+
+    <div>
+      When you wish to make changes to your database or add new columns, run
+      this migration.
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UpdateTableButtonComponent extends BaseComponent {
+  @Input() public dbSysName?: string;
+  public mixApi = inject(MixApiFacadeService);
+
+  public updateSingleTable() {
+    this.mixApi.databaseApi
+      .updateDataTable(this.dbSysName!)
+      .pipe(this.observerLoadingStateSignal())
+      .subscribe();
+  }
+}