chore: Improve layout of resource tables and asset view (#3186)

apache · Aug 28, 2024 · d9ff358 · d9ff358
1 parent 787c6fb
commit d9ff358
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 303 deletions.
diff --git a/ui/src/app/assets/assets.module.ts b/ui/src/app/assets/assets.module.ts
@@ -34,7 +34,6 @@ import { PlatformServicesModule } from '@streampipes/platform-services';
 import { RouterModule } from '@angular/router';
 import { SharedUiModule } from '@streampipes/shared-ui';
 import { SpAssetOverviewComponent } from './components/asset-overview/asset-overview.component';
-import { AssetUploadDialogComponent } from './dialog/asset-upload/asset-upload-dialog.component';
 import { SpAssetDetailsComponent } from './components/asset-details/edit-asset/asset-details.component';
 import { SpAssetSelectionPanelComponent } from './components/asset-details/edit-asset/asset-selection-panel/asset-selection-panel.component';
 import { MatTreeModule } from '@angular/material/tree';
@@ -125,7 +124,6 @@ import { AssetLinkCardComponent } from './components/asset-details/view-asset/vi
         AssetDetailsSiteComponent,
         AssetLinkSectionComponent,
         AssetLocationComponent,
-        AssetUploadDialogComponent,
         EditAssetLinkDialogComponent,
         SpAssetDetailsComponent,
         SpAssetLinkItemComponent,

diff --git a/...nents/asset-details/edit-asset/asset-selection-panel/asset-selection-panel.component.html b/...nents/asset-details/edit-asset/asset-selection-panel/asset-selection-panel.component.html
@@ -49,7 +49,7 @@ <h4 class="ml-5">Asset Hierarchy</h4>
                                 fxFlex="100"
                                 (click)="selectNode(node, false)"
                             >
-                                <span fxLayoutAlign="end center">{{
+                                <span fxLayoutAlign="end center" class="ml-5">{{
                                     node.assetName
                                 }}</span>
                                 <div

diff --git a/ui/src/app/assets/components/asset-overview/asset-overview.component.html b/ui/src/app/assets/components/asset-overview/asset-overview.component.html
@@ -42,15 +42,6 @@
             >
                 <i class="material-icons"> refresh </i>
             </button>
-            <button
-                mat-icon-button
-                matTooltip="Upload assets"
-                matTooltipPosition="below"
-                color="accent"
-                (click)="uploadAsset()"
-            >
-                <i class="material-icons"> cloud_upload </i>
-            </button>
         </div>
     </div>
     <div fxFlex="100" fxLayout="column">
@@ -75,26 +66,18 @@
                             data-cy="assets-table"
                         >
                             <div fxLayout="row" fxLayoutAlign="start center">
-                                <div fxLayoutAlign="start center">
-                                    <i class="material-icons"
-                                        >precision_manufacturing</i
-                                    >
-                                </div>
                                 <div
                                     fxLayoutAlign="center start"
                                     fxLayout="column"
-                                    class="ml-10"
                                 >
-                                    <h4 style="margin-bottom: 0">
-                                        {{ asset.assetName }}
-                                    </h4>
-                                    <h5>
-                                        {{
-                                            asset.assetDescription !== ''
-                                                ? asset.assetDescription
-                                                : '-'
-                                        }}
-                                    </h5>
+                                    <div>
+                                        <b>{{ asset.assetName }}</b>
+                                    </div>
+                                    <div>
+                                        <small>
+                                            {{ asset.assetDescription }}</small
+                                        >
+                                    </div>
                                 </div>
                             </div>
                         </td>
@@ -127,16 +110,6 @@ <h5>
                                     <i class="material-icons">edit</i>
                                 </button>
 
-                                <button
-                                    color="accent"
-                                    mat-icon-button
-                                    matTooltip="Download asset"
-                                    data-cy="download"
-                                    matTooltipPosition="above"
-                                    (click)="downloadAsset(asset)"
-                                >
-                                    <i class="material-icons">download</i>
-                                </button>
                                 <button
                                     color="accent"
                                     mat-icon-button

diff --git a/ui/src/app/assets/components/asset-overview/asset-overview.component.ts b/ui/src/app/assets/components/asset-overview/asset-overview.component.ts
@@ -30,12 +30,8 @@ import {
     SpBreadcrumbService,
 } from '@streampipes/shared-ui';
 import { SpAssetRoutes } from '../../assets.routes';
-import { AssetUploadDialogComponent } from '../../dialog/asset-upload/asset-upload-dialog.component';
 import { Router } from '@angular/router';
 import { SpCreateAssetDialogComponent } from '../../dialog/create-asset/create-asset-dialog.component';
-import { DataExportService } from '../../../configuration/export/data-export.service';
-import { mergeMap } from 'rxjs/operators';
-import { saveAs } from 'file-saver';
 import { IdGeneratorService } from '../../../core-services/id-generator/id-generator.service';
 
 @Component({
@@ -56,7 +52,6 @@ export class SpAssetOverviewComponent implements OnInit {
         private breadcrumbService: SpBreadcrumbService,
         private dialogService: DialogService,
         private router: Router,
-        private dataExportService: DataExportService,
         private idGeneratorService: IdGeneratorService,
         private assetBrowserService: SpAssetBrowserService,
     ) {}
@@ -95,9 +90,9 @@ export class SpAssetOverviewComponent implements OnInit {
         const dialogRef = this.dialogService.open(
             SpCreateAssetDialogComponent,
             {
-                panelType: PanelType.STANDARD_PANEL,
+                panelType: PanelType.SLIDE_IN_PANEL,
                 title: 'Create asset',
-                width: '40vw',
+                width: '50vw',
                 data: {
                     createMode: true,
                     assetModel: assetModel,
@@ -106,23 +101,7 @@ export class SpAssetOverviewComponent implements OnInit {
         );
 
         dialogRef.afterClosed().subscribe(() => {
-            this.loadAssets();
-            this.assetBrowserService.loadAssetData();
-        });
-    }
-
-    uploadAsset() {
-        const dialogRef = this.dialogService.open(AssetUploadDialogComponent, {
-            panelType: PanelType.SLIDE_IN_PANEL,
-            title: 'Upload asset model',
-            width: '40vw',
-        });
-
-        dialogRef.afterClosed().subscribe(reload => {
-            if (reload) {
-                this.loadAssets();
-                this.assetBrowserService.loadAssetData();
-            }
+            this.goToDetailsView(assetModel, true);
         });
     }
 
@@ -143,18 +122,4 @@ export class SpAssetOverviewComponent implements OnInit {
                 this.assetBrowserService.loadAssetData();
             });
     }
-
-    downloadAsset(asset: SpAssetModel) {
-        this.dataExportService
-            .getExportPreview([asset._id])
-            .pipe(
-                mergeMap(preview =>
-                    this.dataExportService.triggerExport(preview),
-                ),
-            )
-            .subscribe((data: Blob) => {
-                const blob = new Blob([data], { type: 'application/zip' });
-                saveAs(blob, 'assetExport');
-            });
-    }
 }
diff --git a/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.html b/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.html
diff --git a/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.scss b/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.scss
diff --git a/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.ts b/ui/src/app/assets/dialog/asset-upload/asset-upload-dialog.component.ts