wip expanding row for more details for attributes.

see https://stackblitz.com/angular/eaajjobynjkl?file=src%2Fapp%2Ftable-expandable-rows-example.html see https://material.angular.io/components/table/examples#table-expandable-rows
AnalogJ · Jun 10, 2022 · cbd230a · cbd230a
1 parent 892e968
commit cbd230a
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 2 deletions.
diff --git a/webapp/frontend/src/app/modules/detail/detail.component.html b/webapp/frontend/src/app/modules/detail/detail.component.html
@@ -143,6 +143,7 @@ <h2 class="m-0">Drive Details - {{device | deviceTitle:config.dashboardDisplay}}
                     <table class="w-full bg-transparent"
                            mat-table
                            matSort
+                           multiTemplateDataRows
                            [dataSource]="smartAttributeDataSource"
                            [trackBy]="trackByFn"
                            #smartAttributeTable>
@@ -324,6 +325,27 @@ <h2 class="m-0">Drive Details - {{device | deviceTitle:config.dashboardDisplay}}
                             </td>
                         </ng-container>
 
+
+                        <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
+                        <ng-container matColumnDef="expandedDetail">
+                            <td mat-cell *matCellDef="let attribute" [attr.colspan]="smartAttributeTableColumns.length">
+                                <div class="attribute-detail"
+                                     [@detailExpand]="attribute == expandedAttribute ? 'expanded' : 'collapsed'">
+                                    <div class="attribute-position-diagram">
+                                        <div class="attribute-position"> {{getAttributeName(attribute)}} </div>
+                                        <div class="attribute-symbol"> {{getAttributeName(attribute)}} </div>
+                                        <div class="attribute-name"> {{getAttributeName(attribute)}} </div>
+                                        <div class="attribute-weight"> {{getAttributeName(attribute)}} </div>
+                                    </div>
+                                    <div class="attribute-detail-description">
+                                        {{getAttributeDescription(attribute)}}
+                                        <span class="attribute-detail-description-attribution"> -- Wikipedia </span>
+                                    </div>
+                                </div>
+                            </td>
+                        </ng-container>
+
+
                         <!-- Footer -->
                         <ng-container matColumnDef="recentOrdersTableFooter">
                             <td class="px-3 border-none"
@@ -344,7 +366,10 @@ <h2 class="m-0">Drive Details - {{device | deviceTitle:config.dashboardDisplay}}
                         <tr class="attribute-row h-16"
                             mat-row
                             [ngClass]="{'yellow-50': getAttributeCritical(row)}"
+                            [class.attribute-expanded-row]="expandedAttribute === row"
+                            (click)="expandedAttribute = expandedAttribute === row ? null : row"
                             *matRowDef="let row; columns: smartAttributeTableColumns;"></tr>
+                        <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="attribute-detail-row"></tr>
                         <tr class="h-16"
                             mat-footer-row
                             *matFooterRowDef="['recentOrdersTableFooter']"></tr>

diff --git a/webapp/frontend/src/app/modules/detail/detail.component.scss b/webapp/frontend/src/app/modules/detail/detail.component.scss
@@ -1,7 +1,6 @@
 @import 'treo';
 
 detail {
-
 }
 
 // -----------------------------------------------------------------------------------------------------
@@ -20,5 +19,35 @@ detail {
     }
 
 
+}
+
+//table {
+//    width: 100%;
+//}
+
+$primary: map-get($theme, primary);
+$is-dark: map-get($theme, is-dark);
+tr.attribute-detail-row {
+    height: 0;
+}
+
+tr.attribute-row:not(.attribute-expanded-row):hover {
+    @if ($is-dark) {
+        background: rgba(0, 0, 0, 0.05);
+    } @else {
+        background: map-get($primary, 50);
+    }
+}
+
+tr.attribute-row:not(.attribute-expanded-row):active {
+    background: #efefef;
+}
+
+.attribute-row td {
+    border-bottom-width: 0;
+}
 
+.attribute-detail {
+    overflow: hidden;
+    display: flex;
 }
diff --git a/webapp/frontend/src/app/modules/detail/detail.component.ts b/webapp/frontend/src/app/modules/detail/detail.component.ts
@@ -11,11 +11,19 @@ import {MatDialog} from "@angular/material/dialog";
 import humanizeDuration from 'humanize-duration';
 import {TreoConfigService} from "../../../@treo/services/config";
 import {AppConfig} from "../../core/config/app.config";
+import {animate, state, style, transition, trigger} from '@angular/animations';
 
 @Component({
   selector: 'detail',
   templateUrl: './detail.component.html',
-  styleUrls: ['./detail.component.scss']
+  styleUrls: ['./detail.component.scss'],
+    animations: [
+        trigger('detailExpand', [
+            state('collapsed', style({height: '0px', minHeight: '0'})),
+            state('expanded', style({height: '*'})),
+            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+        ]),
+    ],
 })
 
 export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
@@ -24,6 +32,7 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
 
     onlyCritical: boolean = true;
     // data: any;
+    expandedAttribute: any | null;
 
     metadata: any;
     device: any;