feat: improve ui of environments page

liimaorg · Nov 18, 2024 · 1836a39 · 1836a39
1 parent 8279368
commit 1836a39
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 52 deletions.
diff --git a/AMW_angular/io/src/app/settings/environments/environments-page.component.html b/AMW_angular/io/src/app/settings/environments/environments-page.component.html
@@ -1,85 +1,103 @@
 <div class="container">
   <h1>Environments</h1>
   @if (permissions().canAdd) {
-    <app-button [variant]="'primary'" [additionalClasses]="'mb-5'" (click)="addDomain()">
+    <app-button [variant]="'primary'"
+                [size]="'sm'"
+                [additionalClasses]="'mt-3 mb-4'"
+                (click)="addDomain()">
       <app-icon icon="plus-circle"></app-icon>
       Add Domain
     </app-button
     >
   }
   @for (domain of environmentTree(); track domain.id) {
     <div class="row w-75">
-      <div class="col-1">
+      <div class="col">
         <h3>{{ domain.name }}</h3>
       </div>
-      <div class="col-2">
+      <div class="col">
         @if (permissions().canDelete) {
-          <app-button [variant]="'danger'" [size]="'sm'" [additionalClasses]="'float-end'"
+          <app-button [variant]="'danger'"
+                      [size]="'sm'"
+                      [isOutlined]="true"
+                      [additionalClasses]="'float-end'"
                       (click)="deleteContext(domain)">
             <app-icon icon="trash"></app-icon>
+            Delete domain
           </app-button>
         }
         @if (permissions().canEdit) {
-          <app-button [variant]="'primary'" [size]="'sm'" [additionalClasses]="'float-end'"
+          <app-button [variant]="'primary'"
+                      [size]="'sm'"
+                      [isOutlined]="true"
+                      [additionalClasses]="'float-end'"
                       (click)="editContext(domain)">
-            <app-icon icon="pencil"></app-icon
-            >
+            <app-icon icon="pencil"></app-icon>
+            Edit domain
           </app-button>
         }
       </div>
-      <hr class="mt-1 mb-4"/>
-      <div id="collapseExample">
-        @if (domain.children.length > 0) {
-          <table class="table table-borderless mb-0">
-            <thead>
+      @if (domain.children.length > 0) {
+        <table class="table table-sm table-group-divider mb-3">
+          <thead>
+          <tr>
+            <th scope="col">Environment name</th>
+            <th scope="col">Environment alias</th>
+            <th class="text-end" scope="col">Actions</th>
+          </tr>
+          </thead>
+          @for (env of domain.children; track env.id) {
+            <tbody>
             <tr>
-              <th scope="col">Environment name</th>
-              <th scope="col">Environment alias</th>
-              <th scope="col">Actions</th>
+              <th>{{ env.name }}</th>
+              <td>{{ env.nameAlias ? env.nameAlias : '-' }}</td>
+              <td class="text-end mb-5">
+                @if (permissions().canEdit) {
+                  <app-button [variant]="'link'"
+                              [size]="'sm'"
+                              (click)="editContext(env)">
+                    <app-icon icon="pencil"></app-icon>
+                  </app-button>
+                }
+                @if (permissions().canDelete) {
+                  <app-button [variant]="'link'"
+                              [size]="'sm'"
+                              [additionalClasses]="'link-danger'"
+                              (click)="deleteContext(env)">
+                    <app-icon icon="trash"></app-icon>
+                  </app-button>
+                }
+              </td>
             </tr>
-            </thead>
-            @for (env of domain.children; track env.id) {
-              <tbody>
-              <tr>
-                <th>{{ env.name }}</th>
-                <td>{{ env.nameAlias ? env.nameAlias : '-' }}</td>
-                <td>
-                  @if (permissions().canEdit) {
-                    <app-button [variant]="'primary'" [size]="'sm'" (click)="editContext(env)">
-                      <app-icon icon="pencil"></app-icon>
-                    </app-button>
-                  }
-                  @if (permissions().canDelete) {
-                    <app-button [variant]="'danger'" [size]="'sm'"
-                                (click)="deleteContext(env)">
-                      <app-icon icon="trash"></app-icon>
-                    </app-button>
-                  }
-                </td>
-              </tr>
-              </tbody>
-            }
-          </table>
-          <hr class="mt-0 mb-4"/>
-          @if (permissions().canAdd) {
-            <app-button [variant]="'primary'" [additionalClasses]="'mb-5'" (click)="addEnvironment(domain)">
-              <app-icon icon="plus-circle"></app-icon>
-              Add Environment
-            </app-button
-            >
+            </tbody>
           }
-        } @else {
-          <p>No environments added yet.</p>
+        </table>
+        @if (permissions().canAdd) {
+          <app-button style="padding: 0;"
+                      [variant]="'primary'"
+                      [size]="'sm'"
+                      [additionalClasses]="'mb-5'"
+                      (click)="addEnvironment(domain)">
+            <app-icon icon="plus-circle"></app-icon>
+            Add Environment
+          </app-button
+          >
+        }
+      } @else {
+        <div class="table-group-divider p-0">
+          <p class="p-2 mb-3">No environments added yet.</p>
           @if (permissions().canAdd) {
-            <app-button [variant]="'primary'" [additionalClasses]="'mb-5'" (click)="addEnvironment(domain)">
+            <app-button [variant]="'primary'"
+                        [size]="'sm'"
+                        [additionalClasses]="'mb-5'"
+                        (click)="addEnvironment(domain)">
               <app-icon icon="plus-circle"></app-icon>
               Add Environment
             </app-button
             >
           }
-        }
-      </div>
+        </div>
+      }
     </div>
-
   }
 </div>
diff --git a/AMW_angular/io/src/app/shared/button/button.component.ts b/AMW_angular/io/src/app/shared/button/button.component.ts
@@ -23,10 +23,11 @@ export class ButtonComponent {
   size = input<'sm' | 'lg'>();
   additionalClasses = input<string>('');
   disabled = input<boolean>(false);
+  isOutlined = input<boolean>(false);
   dataCy = input<string>('');
 
   variantClass(): string {
-    return this.variant() ? `btn-${this.variant()}` : '';
+    return this.variant() ? (this.isOutlined() ? `btn-outline-${this.variant()}` : `btn-${this.variant()}`) : '';
   }
 
   sizeClass(): string {