Update Reference View

Lessify · Sep 27, 2024 · a4c5f95 · a4c5f95
1 parent c75544f
commit a4c5f95
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 10 deletions.
diff --git a/src/app/features/spaces/contents/shared/reference-select/reference-select.component.html b/src/app/features/spaces/contents/shared/reference-select/reference-select.component.html
@@ -16,8 +16,17 @@
     <mat-divider></mat-divider>
     <mat-card-content>
       @if (content && content.kind === 'DOCUMENT') {
-        <mat-list class="assets">
+        <mat-list>
           <mat-list-item>
+            <div matListItemIcon class="!self-center">
+              @if (content?.publishedAt === undefined) {
+                <ll-status mode="offline" matTooltip="Not published" />
+              } @else if (content?.publishedAt?.seconds > content?.updatedAt?.seconds) {
+                <ll-status mode="online" matTooltip="Published" />
+              } @else if (content?.publishedAt && content?.publishedAt?.seconds < content?.updatedAt?.seconds) {
+                <ll-status mode="away" matTooltip="Draft" />
+              }
+            </div>
             <div matListItemTitle>{{ content.name }} #{{ content.slug }}</div>
             <div matListItemLine>{{ content.fullSlug }}</div>
             <mat-action-list matListItemMeta>

diff --git a/src/app/features/spaces/contents/shared/references-select/references-select.component.html b/src/app/features/spaces/contents/shared/references-select/references-select.component.html
@@ -14,16 +14,26 @@
   </mat-card-header>
   <mat-divider></mat-divider>
   <mat-card-content>
-    <mat-list cdkDropList class="assets" (cdkDropListDropped)="referenceDropDrop($event)">
-      @for (item of contents; track item.id; let idx = $index) {
+    <mat-list cdkDropList (cdkDropListDropped)="referenceDropDrop($event)">
+      @for (content of contents; track content.id; let index = $index) {
         <mat-list-item cdkDrag cdkDragPreviewContainer="parent">
-          <mat-icon matListItemIcon cdkDragHandle>drag_indicator</mat-icon>
-          <div matListItemTitle>{{ item.name }} #{{ item.slug }}</div>
-          <div matListItemLine>{{ item.fullSlug }}</div>
+          <div matListItemIcon class="!self-center">
+            @if (content?.publishedAt === undefined) {
+              <ll-status mode="offline" matTooltip="Not published" />
+            } @else if (content?.publishedAt?.seconds > content?.updatedAt?.seconds) {
+              <ll-status mode="online" matTooltip="Published" />
+            } @else if (content?.publishedAt && content?.publishedAt?.seconds < content?.updatedAt?.seconds) {
+              <ll-status mode="away" matTooltip="Draft" />
+            }
+          </div>
+          <div matListItemTitle>{{ content.name }} #{{ content.slug }}</div>
+          <div matListItemLine>{{ content.fullSlug }}</div>
           <mat-action-list matListItemMeta>
-            <button mat-icon-button (click)="deleteReference(idx)">
+            <button mat-icon-button (click)="deleteReference(index)">
               <mat-icon>delete</mat-icon>
             </button>
+            &nbsp;&nbsp;
+            <mat-icon cdkDragHandle>drag_indicator</mat-icon>
           </mat-action-list>
         </mat-list-item>
       }

diff --git a/src/styles/_mat-list.scss b/src/styles/_mat-list.scss
@@ -44,20 +44,31 @@ mat-list.assets {
   }
 }
 
-mat-list,mat-nav-list[cdkDropList] {
+//.invalid {
+//  border: solid 2px mat.m2-get-color-from-palette($error-colors);
+//}
+// Drag And Drop
+mat-list,mat-nav-list.cdk-drop-list {
+  // This is the element that will be rendered next to the user's cursor as they're dragging an item in a sortable list.
+  // By default the element looks exactly like the element that is being dragged.
   .cdk-drag-preview {
     box-sizing: border-box;
     border-radius: 4px;
     box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
     0 8px 10px 1px rgba(0, 0, 0, 0.14),
     0 3px 14px 2px rgba(0, 0, 0, 0.12);
   }
-
+  // This is element that will be shown instead of the real element as it's being dragged inside a cdkDropList.
+  // By default this will look exactly like the element that is being sorted.
   .cdk-drag-placeholder {
     opacity: 0;
   }
-
+  // Animate an item that has been dropped.
   .cdk-drag-animating {
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
   }
+  // Class that is added to the host element of the cdkDragHandle directive.
+  .cdk-drag-handle {
+    cursor: grab;
+  }
 }