ui improvements

coolsamson7 · Mar 8, 2024 · 8426cf7 · 8426cf7
1 parent 6eebf05
commit 8426cf7
Show file tree

Hide file tree

Showing 12 changed files with 301 additions and 58 deletions.
diff --git a/modulefederation/apps/web/src/app/portal/application-tree.component.html b/modulefederation/apps/web/src/app/portal/application-tree.component.html
@@ -11,28 +11,55 @@
       <mat-icon class="mat-icon-rtl-mirror">expand_more</mat-icon>
     </button>
 
+    <ng-container *ngIf="node.type === 'application'">
+      <mat-icon class="icon mat-icon-rtl-mirror">apps</mat-icon>
+
+      <span class="name">{{node.data.name}}</span>
+
+      <!-- menu -->
+
+      <button aria-label="Add" [matMenuTriggerFor]="applicationMenu" class="menu" mat-icon-button>
+        <mat-icon class="add" matSuffix>more_vert</mat-icon>
+
+        <mat-menu #applicationMenu="matMenu">
+          <button mat-menu-item  (click)="triggeredMenu(node, 'add-version')">Add Version</button>
+          <button mat-menu-item  (click)="triggeredMenu(node, 'delete')">Delete</button>
+        </mat-menu>
+      </button>
+    </ng-container>
+
     <!-- application version -->
 
     <ng-container *ngIf="node.type === 'application-version'">
-      {{node.data.version}}
+      <span class="name">{{node.data.version}}</span>
+
+       <!-- menu -->
+
+       <button aria-label="Add" [matMenuTriggerFor]="applicationMenu" class="menu" mat-icon-button>
+        <mat-icon class="add" matSuffix>more_vert</mat-icon>
+
+        <mat-menu #applicationMenu="matMenu">
+          <button mat-menu-item  (click)="triggeredMenu(node, 'delete')">Delete</button>
+        </mat-menu>
+      </button>
     </ng-container>
 
     <!-- microfrontend -->
 
     <ng-container *ngIf="node.type === 'microfrontend'">
-      {{node.data.name}}
+      <span class="name">{{node.data.name}}</span>
     </ng-container>
 
     <!-- microfrontend versio  -->
 
     <ng-container *ngIf="node.type === 'microfrontend-version'">
-      {{node.data.version}}
+      <span class="name">{{node.data.version}}</span>
     </ng-container>
 
     <!-- microfrontend instance -->
 
     <ng-container *ngIf="node.type === 'microfrontend-instance'">
-      {{node.data.uri}}
+      <span class="name">{{node.data.uri}}</span>
     </ng-container>
   </mat-tree-node>
 
@@ -55,15 +82,16 @@
 
         <span class="name">{{node.data.name}}</span>
 
-        <!-- add -->
+        <!-- menu -->
 
         <button aria-label="Add" [matMenuTriggerFor]="applicationMenu" class="menu" mat-icon-button>
           <mat-icon class="add" matSuffix>more_vert</mat-icon>
 
           <mat-menu #applicationMenu="matMenu">
-            <button mat-menu-item  (click)="triggeredMenu(node, 'add-version')">Version</button>
+            <button mat-menu-item  (click)="triggeredMenu(node, 'add-version')">Add Version</button>
+            <button mat-menu-item  (click)="triggeredMenu(node, 'delete')">Delete</button>
           </mat-menu>
-      </button>
+        </button>
       </ng-container>
 
       <!-- application version -->

diff --git a/modulefederation/apps/web/src/app/portal/application-tree.component.ts b/modulefederation/apps/web/src/app/portal/application-tree.component.ts
@@ -55,6 +55,58 @@ export class ApplicationTreeComponent implements OnInit, OnChanges {
 
     // public
 
+    addVersion(applicationVersion: ApplicationVersion, applicationNode: Node) : Node {
+        const node : Node =  {
+            type: "application-version",
+            data: applicationVersion
+        }
+
+        if (!applicationNode.children)
+            applicationNode.children = []
+
+        applicationNode.children!.push(node)
+
+        this.refreshData()
+        this.select(node)
+
+        return node
+    }
+
+    deletedApplication(node: Node) {
+        this.dataSource.data.splice(this.dataSource.data.indexOf(node), 1)
+        this.refreshData()
+    }
+
+    deletedApplicationVersion(node: Node) {
+        node.parent?.children?.splice(node.parent?.children.indexOf(node), 1)
+        this.refreshData()
+    }
+
+    addApplication(application: Application) : Node{
+        const node : Node =  {
+            type: "application",
+            data: application
+        }
+
+        let after = -1
+        for ( let i = 0; i < this.dataSource.data.length; i++)
+           if (this.dataSource.data[i].type == "application")
+              after = i
+            else
+               break
+
+        if ( after == -1)
+            this.dataSource.data.push(node)
+        else
+            this.dataSource.data.splice(after + 1, 0, node)
+
+        this.refreshData()
+
+        this.select(node)
+
+        return node
+    }
+
     select(node: Node) {
         this.selection = node
 

diff --git a/modulefederation/apps/web/src/app/portal/application.feature.html b/modulefederation/apps/web/src/app/portal/application.feature.html
@@ -20,12 +20,27 @@
     <!-- content area. -->
 
     <div class="content">
+       <!-- microfrontend -->
+
+       <div class="microfrontend" *ngIf="selectedMicrofrontend">
+        <div class="general">
+          <mat-label>Name</mat-label>
+          <div>{{selectedMicrofrontend.name}}</div>
+        </div>
+
+        <mat-divider></mat-divider>
+
+        <configuration-tree [configuration]="configurationData" [inherits]="inheritedConfigurationData" (onAdd)="addItem($event)"(onAddFolder)="addFolder($event)"  (onDelete)="deleteItem($event)" (onChanged)="changed($event)"></configuration-tree>
+      </div>
+
       <!-- microfrontend version -->
 
       <div class="microfrontend-version" *ngIf="selectedMicrofrontendVersion">
         <div class="general">
           <mat-label>Name</mat-label>
-          <div>{{selectedMicrofrontendVersion.id}}</div>
+          <div>{{microfrontendName(selectedMicrofrontendVersion.id)}}</div>
+          <mat-label>Version</mat-label>
+          <div>{{microfrontendVersion(selectedMicrofrontendVersion.id)}}</div>
         </div>
 
         <mat-divider></mat-divider>
@@ -43,6 +58,13 @@
 
         <mat-divider></mat-divider>
 
+        <div class="general">
+          <mat-label>Stage</mat-label>
+          <div>{{selectedMicrofrontendInstance.stage}}</div>
+      </div>
+
+        <mat-divider></mat-divider>
+
         <configuration-tree [configuration]="configurationData" [inherits]="inheritedConfigurationData" (onAdd)="addItem($event)"(onAddFolder)="addFolder($event)"  (onDelete)="deleteItem($event)" (onChanged)="changed($event)"></configuration-tree>
       </div>
 
@@ -59,7 +81,7 @@
         <configuration-tree [configuration]="configurationData" [inherits]="inheritedConfigurationData" (onAdd)="addItem($event)"(onAddFolder)="addFolder($event)"  (onDelete)="deleteItem($event)" (onChanged)="changed($event)"></configuration-tree>
       </div>
 
-      <!-- version -->
+      <!-- application version -->
 
       <div class="version" *ngIf="selectedVersion">
         <!-- general -->
@@ -121,10 +143,6 @@
                       </button>
                     </div>
 
-                    <!--span *ngSwitchCase="'date'">
-                      {{ element[col.key] | date: 'mediumDate' }}
-                    </span-->
-
                     <span *ngSwitchDefault>
                       {{ element.data[col.key] }}
                     </span>
@@ -133,7 +151,10 @@
                   <!-- edit mode -->
 
                   <form [ngSwitch]="col.type" *ngIf="element.isEdit">
+                    <!-- selection -->
+
                     <div *ngSwitchCase="'isSelected'"></div>
+
                     <!-- done -->
 
                     <div class="btn-edit" *ngSwitchCase="'isEdit'">
@@ -144,6 +165,7 @@
 
                     <mat-form-field class="form-input" *ngSwitchCase="'mfe'">
                       <input
+                        [disabled]="element.data.id !== undefined"
                         [name]="col.key"
                         [id]="col.key"
                         matInput

diff --git a/modulefederation/apps/web/src/app/portal/application.feature.scss b/modulefederation/apps/web/src/app/portal/application.feature.scss
@@ -12,6 +12,25 @@
         }
 
         .content {
+            .microfrontend {
+                padding: 10px 10px 10px 10px;
+
+                .general {
+                    display: grid;
+                    grid-column-gap: 10px;
+                    grid-row-gap: 10px;
+                    grid-template-columns: min-content 1fr;
+
+                    mat-label {
+                    font-weight: bold;
+                    }
+                }
+
+                .mat-divider {
+                    margin-top: 10px;
+                    margin-bottom: 10px;
+                }
+            }
 
             .microfrontend-instance {
                 padding: 10px 10px 10px 10px;
@@ -90,7 +109,7 @@
                     grid-template-columns: min-content 1fr;
                 }
 
-                .mat-divider {
+                 .mat-divider {
                     margin-top: 10px;
                     margin-bottom: 10px;
                 }