feat(4ps): update, fix bug

libs/mix-share/src/modules/database/components/db-context-form/db-context-form.component.html

@@ -29,7 +29,9 @@
 
   <div class="mix-dialog__footer">
     <mix-button type="secondary"
-                [disabled]="loadingState() === 'Loading'">Cancel</mix-button>
+                [disabled]="loadingState() === 'Loading'"
+                (click)="dialogRef.close(false)">Cancel</mix-button>
+
     <mix-button *ngIf="loadingState() as state"
                 [disabled]="state === 'Loading'"
                 [loading]="state === 'Loading'"

libs/mix-share/src/modules/database/database-context/database-context.component.html

@@ -41,6 +41,7 @@
           @for (item of combineFilter(vm.data, filterForm.value); track item.id)
           {
           <div class="context-card {{ ProviderIconMap[item.databaseProvider] }} shadow-md"
+               (click)="gotoDb(item)"
                tuiCard
                tuiSurface>
             <h4 tuiTitle>
@@ -67,14 +68,17 @@ <h4 tuiTitle>
 
 <ng-template #dbSelect
              let-hide>
-  <!-- <div class="mix-menu-item">
-    <div class="flex items-center gap-2">
-      <span class="mix-icon">edit</span> <span>Edit</span>
+  <div class="mix-menu-item"
+       (click)="hide();">
+    <div class="flex items-center gap-3 px-1">
+      <span class="mix-icon">settings</span>
+      <span>Update</span>
     </div>
-  </div> -->
+  </div>
+
   <div class="mix-menu-item"
        (click)="hide(); onDelete()">
-    <div class="flex items-center gap-2">
+    <div class="flex items-center gap-3 px-1">
       <span class="mix-icon">delete</span>
       <span class="text-danger">Remove</span>
     </div>

libs/mix-share/src/modules/database/database-context/database-context.component.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
 import {
   DatabaseProvider,
   DatabaseProviderDisplay,
@@ -11,7 +12,10 @@ import {
   MixStatusIndicatorComponent,
   MixSubToolbarComponent,
 } from '@mixcore/share/components';
-import { toastObserverProcessing } from '@mixcore/share/helper';
+import {
+  extractBaseSegment,
+  toastObserverProcessing,
+} from '@mixcore/share/helper';
 import { RelativeTimeSpanPipe } from '@mixcore/share/pipe';
 import { MixButtonComponent } from '@mixcore/ui/button';
 import { MixEmptyContentComponent } from '@mixcore/ui/empty-content';
@@ -28,6 +32,7 @@ import { TuiCardModule, TuiSurfaceModule } from '@taiga-ui/experimental';
 import { TuiFilterModule } from '@taiga-ui/kit';
 import { DbContextFormComponent } from '../components/db-context-form/db-context-form.component';
 import { DatabaseContextStore } from '../store/db-context.store';
+import { DbUiStore } from '../store/db-ui.store';
 
 @Component({
   selector: 'mix-database-context',
@@ -56,9 +61,12 @@ import { DatabaseContextStore } from '../store/db-context.store';
 export class DatabaseContextComponent {
   public dialog = inject(DialogService);
   public store = inject(DatabaseContextStore);
+  public uiStore = inject(DbUiStore);
   public modal = inject(ModalService);
   public mixApi = inject(MixApiFacadeService);
   public toast = inject(HotToastService);
+  public activatedRoute = inject(ActivatedRoute);
+  public router = inject(Router);
 
   public ProviderIconMap: Record<DatabaseProvider, string> = {
     [DatabaseProvider.SQLSERVER]: 'sqlserver',
@@ -71,6 +79,7 @@ export class DatabaseContextComponent {
   public filterItems = Object.values(DatabaseProvider);
   public ProviderLabel = DatabaseProviderDisplay as any;
   public selected?: MixDbContext;
+  public currentPath = 'contexts';
 
   @tuiPure
   public combineFilter(
@@ -91,6 +100,16 @@ export class DatabaseContextComponent {
     });
   }
 
+  public gotoDb(context: MixDbContext) {
+    const baseSegment = extractBaseSegment(
+      this.currentPath,
+      this.activatedRoute
+    );
+
+    this.uiStore.changeSelected(context);
+    this.router.navigate([...baseSegment]);
+  }
+
   public onDelete() {
     if (!this.selected) return;