feat: add basic accordion implementation

liimaorg · Dec 20, 2024 · f93f412 · f93f412
1 parent 5fc3aba
commit f93f412
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 17 deletions.
diff --git a/AMW_angular/io/src/app/resources/resource-edit-page/resource-edit-page.component.html b/AMW_angular/io/src/app/resources/resource-edit-page/resource-edit-page.component.html
@@ -17,20 +17,22 @@
       Loaded resource:
       {{ this.resource()?.name || this.resourceType()?.name }}
     </div>
+    <div id="accordion-view">
+      <app-tile-component
+        [title]="'Templates'"
+        [actionName]="'New Template'"
+        [canAction]="true"
+        [isVisible]="false"
+        [lists]="templatesData()"
+        (tileAction)="add()"
+        (listAction)="doListAction($event)"
+      ></app-tile-component>
 
-    <app-tile-component
-      [title]="'Templates'"
-      [actionName]="'New Template'"
-      [canAction]="true"
-      [lists]="templatesData()"
-      (tileAction)="add()"
-      (listAction)="doListAction($event)"
-    ></app-tile-component>
-
-    <app-resources-edit-functions
-      [resourceId]="resource()?.id"
-      [contextId]="contextId()"
-    ></app-resources-edit-functions>
+      <app-resources-edit-functions
+        [resourceId]="resource()?.id"
+        [contextId]="contextId()"
+      ></app-resources-edit-functions>
+    </div>
     }
   </div>
 </app-page>
diff --git a/AMW_angular/io/src/app/shared/tile/tile.component.scss b/AMW_angular/io/src/app/shared/tile/tile.component.scss
@@ -1,12 +1,20 @@
 .tile {
   border: 1px solid #ddd;
   padding: 1em;
-  margin: 0.5em;
+  margin: 0.5em 0.5em 1.5em;
 
   .tile-header {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    line-height: 18px;
+  }
+
+  .opened {
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 0.5em;
   }
 
   .tile-title {

diff --git a/AMW_angular/io/src/app/shared/tile/tile.component.ts b/AMW_angular/io/src/app/shared/tile/tile.component.ts
@@ -10,8 +10,14 @@ import { TileListComponent, TileListEntry, TileListEntryOutput } from './tile-li
   selector: 'app-tile-component',
   template: `
     <div class="tile">
-      <div class="tile-header">
-        <div class="tile-title">{{ title() }}</div>
+      <div class="tile-header" (click)="toggleBody()" [ngClass]="showBody() ? 'opened' : 'closed'">
+        <div class="tile-title">
+          @if (showBody()) {
+          <app-icon icon="caret-down"></app-icon>} @else {
+          <app-icon icon="caret-right"></app-icon>
+          }
+          {{ title() }}
+        </div>
         @if (canAction()) {
         <div class="tile-action-bar">
           <app-button [variant]="'primary'" [size]="'sm'" (click)="tileAction.emit()">
@@ -21,7 +27,7 @@ import { TileListComponent, TileListEntry, TileListEntryOutput } from './tile-li
         </div>
         }
       </div>
-
+      @if (showBody()) {
       <div class="tile-body">
         @if (!lists()) {
         <div class="no-content">
@@ -46,6 +52,7 @@ import { TileListComponent, TileListEntry, TileListEntryOutput } from './tile-li
         ></app-tile-list>
         }
       </div>
+      }
     </div>
   `,
   styleUrls: ['./tile.component.scss'],
@@ -67,6 +74,7 @@ export class TileComponent {
   title = input.required<string>();
   actionName = input.required<string>();
   canAction = input<boolean>(false);
+  isVisible = input<boolean>(false);
   lists = input.required<
     {
       title: string;
@@ -78,4 +86,9 @@ export class TileComponent {
   >();
   tileAction = output<void>();
   listAction = output<TileListEntryOutput>();
+
+  showBody = signal(this.isVisible());
+  toggleBody() {
+    this.showBody.set(!this.showBody());
+  }
 }