Improve domain group view

src/app/appmarket/domains/domain-group-view/domain-group-view.component.html

@@ -30,26 +30,40 @@
             </div>
         </div>
 
-        <div *ngIf="!this.addingMode" style="margin-top: 3rem">
-            <button type="button" class="btn btn-success" (click)="showModal()">{{'DOMAINS.LIST.ADD' | translate}}</button>
-            <table class="table table-hover table-condensed" aria-describedby="Domains in Group table" style="margin-top: 3rem">
-                <thead>
-                <tr>
-                    <th scope="col">{{'DOMAINS.LIST.DOMAIN_NAME' | translate}}</th>
-                    <th scope="col">{{'DOMAINS.LIST.DOMAIN_CODE_NAME' | translate}}</th>
-                    <th scope="col"></th>
-                </tr>
-                <ng-template ngFor let-domain [ngForOf]="domainGroup.domains" let-i="index">
-                    <tr class="table-row">
-                        <td>{{domain.name}}</td>
-                        <td>{{domain.codename}}</td>
-                        <td style="width: 20%">
-                            <button type="button" class="btn btn-danger" (click)="deleteDomainFromGroup(domain)">{{'DOMAINS.LIST.DELETE' | translate}}</button>
-                        </td>
+
+        <div *ngIf="!this.addingMode" class="panel panel-default" style="margin-top: 3rem">
+            <div class="panel-heading">
+
+                <div style="display: flex; justify-content: start; align-items: center">
+                    <div>
+                        {{ 'DOMAINS.LIST.LIST' | translate }}
+                    </div>
+                </div>
+            </div>
+            <div class="panel-body">
+                <div style="display: flex; justify-content: end">
+                    <button type="button" class="btn btn-success" (click)="showModal()">{{'DOMAINS.LIST.ADD' | translate}}</button>
+                </div>
+                <table class="table table-hover table-condensed" aria-describedby="Domains in Group table" style="margin-top: 2rem">
+                    <thead>
+                    <tr>
+                        <th scope="col">{{'DOMAINS.LIST.DOMAIN_NAME' | translate}}</th>
+                        <th scope="col">{{'DOMAINS.LIST.DOMAIN_CODE_NAME' | translate}}</th>
+                        <th scope="col"></th>
                     </tr>
-                </ng-template>
-                </thead>
-            </table>
+                    <ng-template ngFor let-domain [ngForOf]="domainGroup.domains" let-i="index">
+                        <tr class="table-row">
+                            <td>{{domain.name}}</td>
+                            <td>{{domain.codename}}</td>
+                            <td style="width: 20%">
+                                <button type="button" class="btn btn-danger" (click)="deleteDomainFromGroup(domain)">{{'DOMAINS.LIST.DELETE' | translate}}</button>
+                            </td>
+                        </tr>
+                    </ng-template>
+                    </thead>
+                </table>
+
+            </div>
         </div>
 
         <div *ngIf="!this.addingMode" class="panel panel-default" style="margin-top: 3rem">
@@ -66,8 +80,9 @@
                 <table class="table table-hover table-condensed" aria-describedby="Domain details table">
                     <thead>
                     <tr>
-                        <th scope="col">
-                            {{ 'DOMAIN_DETAILS.APP_NAME' | translate }}
+                        <th scope="col" style="display:flex; justify-content: space-between">
+                            <span>{{ 'DOMAIN_DETAILS.APP_NAME' | translate }}</span>
+                                <span style="margin-right: 5rem">{{ 'DOMAINS.LIST.ACTIVE' | translate}}</span>
                         </th>
                     </tr>
                     </thead>

src/app/appmarket/domains/domain-group-view/domain-group-view.component.ts

@@ -42,6 +42,7 @@ export class DomainGroupViewComponent extends BaseComponent implements OnInit {
         this.domainService.getDomainGroup(this.domainGroupId).subscribe(
             (domainGroup) => {
               this.domainGroup = domainGroup;
+              this.sortApplication();
             },
             err => {
               console.error(err);
@@ -133,7 +134,12 @@ export class DomainGroupViewComponent extends BaseComponent implements OnInit {
         }
       }
     }
+  }
 
+  public sortApplication(): void {
+    if(this.domainGroup.applicationStatePerDomain !== undefined && this.domainGroup.applicationStatePerDomain !== null) {
+      this.domainGroup.applicationStatePerDomain.sort((a, b) => a.applicationBaseName.localeCompare(b.applicationBaseName))
+    }
   }
 
 }