From 534efa70e756b0bdc6af756b3acd9a4818bc75da Mon Sep 17 00:00:00 2001
From: meta-d <meta.digital.cloud@gmail.com>
Date: Thu, 1 Feb 2024 19:57:37 +0800
Subject: [PATCH] feat: drop list

---
 .../src/app/features/features.component.html  | 15 ++++++----
 .../src/app/features/features.component.ts    | 30 ++++++++++++++-----
 .../semantic-model/model/model.component.html |  2 +-
 .../semantic-model/model/model.component.scss |  6 ++--
 4 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/apps/cloud/src/app/features/features.component.html b/apps/cloud/src/app/features/features.component.html
index f6c3c24ac..2f91db985 100644
--- a/apps/cloud/src/app/features/features.component.html
+++ b/apps/cloud/src/app/features/features.component.html
@@ -25,7 +25,7 @@
     </pac-menu>
   </mat-sidenav>
 
-  <mat-sidenav-content class="pac_sidenav-content max-h-full overflow-hidden" >
+  <mat-sidenav-content class="pac_sidenav-content max-h-full overflow-hidden" cdkDropListGroup>
     <mat-toolbar class="pac__shell-bar mat-elevation-z2 flex justify-between items-center md:gap-2">
       <div class="flex justify-start items-center overflow-hidden">
         <button *ngIf="!(sidenav.opened && sidenavMode==='side')" class="w-12 outline-none hover:text-yellow-600 transition-colors"
@@ -104,7 +104,10 @@
       </button>
     </mat-toolbar>
 
-    <mat-drawer-container class="flex-1 h-full" [ngClass]="{'pac-fullscreen': fullscreenIndex$() > 1}" [hasBackdrop]="false" autosize>
+    <mat-drawer-container class="flex-1 h-full" [ngClass]="{'pac-fullscreen': fullscreenIndex$() > 1}"
+      [hasBackdrop]="false"
+      autosize
+    >
       <mat-drawer #copilotDrawer class="mat-elevation-z" position="end" mode="side" ngmResizer [resizerWidth]="380"
         [(opened)]="copilotDrawerOpened"
       >
@@ -113,6 +116,7 @@
           assistantAvatar="assets/images/copilot_sparkle_resting.gif"
           [user]="user$()"
           cdkDropList
+          (cdkDropListDropped)="dropCopilot($event)"
           (enableCopilot)="toEnableCopilot()"
         ></ngm-copilot-chat>
         }
@@ -123,12 +127,11 @@
         ></div>
       </mat-drawer>
       <mat-drawer-content class="pac-app__page-outlet relative z-0" 
-        [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.data && o.activatedRoute.routeConfig.data.title">
-        <router-outlet #o="outlet"></router-outlet>
-
+        [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig?.data?.title">
         @if(copilotEnabled$()) {
-        <ngm-drawer-trigger class="absolute -right-2 top-1/2 -translate-y-1/2 z-40" [(opened)]="copilotDrawerOpened" side="right"></ngm-drawer-trigger>
+          <ngm-drawer-trigger class="absolute -right-2 top-1/2 -translate-y-1/2 z-40" [(opened)]="copilotDrawerOpened" side="right"></ngm-drawer-trigger>
         }
+        <router-outlet #o="outlet"></router-outlet>
       </mat-drawer-content>
     </mat-drawer-container>
 
diff --git a/apps/cloud/src/app/features/features.component.ts b/apps/cloud/src/app/features/features.component.ts
index 3e52b09f9..fbe12919a 100644
--- a/apps/cloud/src/app/features/features.component.ts
+++ b/apps/cloud/src/app/features/features.component.ts
@@ -1,5 +1,5 @@
 import { Location } from '@angular/common'
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, Renderer2, ViewChild } from '@angular/core'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, OnInit, Renderer2, ViewChild, inject } from '@angular/core'
 import { MatDialog } from '@angular/material/dialog'
 import {
   Event,
@@ -10,7 +10,6 @@ import {
   Router,
   RouterEvent
 } from '@angular/router'
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
 import { TranslateService } from '@ngx-translate/core'
 import { PacMenuItem } from '@metad/cloud/auth'
 import { UsersService } from '@metad/cloud/state'
@@ -42,10 +41,11 @@ import { QueryCreationDialogComponent } from './semantic-model/query-creation.co
 import { ModelCreationComponent } from './semantic-model/creation/creation.component'
 import { StoryCreationComponent } from '../@shared'
 import { MatDrawerMode, MatSidenav } from '@angular/material/sidenav'
-import { toSignal } from '@angular/core/rxjs-interop'
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop'
+import { CdkDragDrop } from '@angular/cdk/drag-drop'
+import { NgmCopilotChatComponent } from '@metad/ocap-angular/copilot'
 
 
-@UntilDestroy({ checkProperties: true })
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'pac-features',
@@ -58,8 +58,11 @@ export class FeaturesComponent implements OnInit {
   NgxPopperjsTriggers = NgxPopperjsTriggers
   NgxPopperjsPlacements = NgxPopperjsPlacements
   AbilityActions = AbilityActions
+
+  readonly #destroyRef = inject(DestroyRef)
   
   @ViewChild('sidenav') sidenav: MatSidenav
+  @ViewChild('copilotChat') copilotChat!: NgmCopilotChatComponent
 
   sidenavMode = 'over' as MatDrawerMode
   isEmployee: boolean
@@ -137,13 +140,12 @@ export class FeaturesComponent implements OnInit {
   loading = false
   isDark$ = this.appService.isDark$
 
-  // public readonly copilotEnabled$ = this.appService.copilotEnabled$
   readonly copilotEnabled$ = toSignal(this.appService.copilotEnabled$)
 
   copilotDrawerOpened = false
 
   // Is mobile event listener
-  private _isMobileSub = this.appService.isMobile$.subscribe((isMobile) => {
+  private _isMobileSub = this.appService.isMobile$.pipe(takeUntilDestroyed()).subscribe((isMobile) => {
     this.isMobile = isMobile
     if (isMobile) {
       this.isCollapsedHidden = isMobile
@@ -152,6 +154,7 @@ export class FeaturesComponent implements OnInit {
   private _userSub = this.store.user$
     .pipe(
       filter((user: IUser) => !!user),
+      takeUntilDestroyed()
     )
     .subscribe((value) => {
       this.checkForEmployee()
@@ -196,7 +199,7 @@ export class FeaturesComponent implements OnInit {
         map((permissions) => permissions.map(({ permission }) => permission)),
         tap((permissions) => this.ngxPermissionsService.loadPermissions(permissions)),
         combineLatestWith(this.translateService.onLangChange.pipe(startWith(null))),
-        untilDestroyed(this)
+        takeUntilDestroyed(this.#destroyRef)
       )
       .subscribe(([permissions]) => {
         this.menu = this.getMenuItems()
@@ -733,4 +736,17 @@ export class FeaturesComponent implements OnInit {
   toEnableCopilot() {
     this.router.navigate(['settings', 'copilot'])
   }
+
+  /**
+   * Drop data on copilot chat:
+   * 1. table schema
+   * 2. table data
+   * 3. name of data
+   *
+   * @param event
+   */
+  async dropCopilot(event: CdkDragDrop<any[], any[], any>) {
+    const data = event.item.data
+    console.log(event)
+  }
 }
diff --git a/apps/cloud/src/app/features/semantic-model/model/model.component.html b/apps/cloud/src/app/features/semantic-model/model/model.component.html
index 818ea6696..6aaaff83c 100644
--- a/apps/cloud/src/app/features/semantic-model/model/model.component.html
+++ b/apps/cloud/src/app/features/semantic-model/model/model.component.html
@@ -59,7 +59,7 @@
 
 </mat-toolbar>
 
-<mat-drawer-container class="flex-1" [hasBackdrop]="false" autosize cdkDropListGroup>
+<mat-drawer-container class="flex-1" [hasBackdrop]="false" autosize>
     <mat-drawer #drawer class="ngm-story__designer-drawer mat-elevation-z"
         [(opened)]="sideMenuOpened"
         [mode]="(isMobile$ | async) ? 'over' : 'side'"
diff --git a/apps/cloud/src/app/features/semantic-model/model/model.component.scss b/apps/cloud/src/app/features/semantic-model/model/model.component.scss
index e719acb70..40db5b88c 100644
--- a/apps/cloud/src/app/features/semantic-model/model/model.component.scss
+++ b/apps/cloud/src/app/features/semantic-model/model/model.component.scss
@@ -2,9 +2,9 @@
   display: flex;
   flex-direction: column;
   flex: 1;
-  position: absolute;
-  top: 0;
-  left: 0;
+  // position: absolute;
+  // top: 0;
+  // left: 0;
   width: 100%;
   max-width: 100%;
   height: 100%;