fix(volumes): fix volumes sorting (#1065)

Closes #949

src/app/reducers/volumes/redux/volumes.reducers.ts

@@ -1,7 +1,7 @@
 import { createFeatureSelector, createSelector } from '@ngrx/store';
 import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
 import { Snapshot } from '../../../shared/models';
-import { Volume } from '../../../shared/models/volume.model';
+import { Volume, VolumeType } from '../../../shared/models/volume.model';
 import { Utils } from '../../../shared/services/utils/utils.service';
 import { getDescription } from '../../../shared/models';
 
@@ -44,6 +44,24 @@ export const volumeReducers = {
   form: formReducer
 };
 
+const sortByGroups = (a: Volume, b: Volume) => {
+  const aIsRoot = a.type === VolumeType.ROOT;
+  const bIsRoot = b.type === VolumeType.ROOT;
+  if (aIsRoot && bIsRoot) {
+    return a.name.localeCompare(b.name);
+  }
+  if (!aIsRoot && !bIsRoot) {
+    return a.name.localeCompare(b.name);
+  }
+  if (aIsRoot && !bIsRoot) {
+    return -1;
+  }
+  if (!aIsRoot && bIsRoot) {
+    return 1;
+  }
+  return 0;
+};
+
 /**
  * createEntityAdapter creates many an object of helper
  * functions for single or multiple operations
@@ -54,7 +72,7 @@ export const volumeReducers = {
  */
 export const adapter: EntityAdapter<Volume> = createEntityAdapter<Volume>({
   selectId: (item: Volume) => item.id,
-  sortComparer: Utils.sortByName
+  sortComparer: sortByGroups
 });
 
 /** getInitialState returns the default initial state

src/app/shared/components/grouped-list/grouped-list.component.ts

@@ -1,7 +1,6 @@
 import { Component, Input, OnChanges, Type } from '@angular/core';
-import { Grouping } from '../../models/grouping.model';
 import { BaseModelInterface } from '../../models/base.model';
-
+import { Grouping } from '../../models/grouping.model';
 import * as groupBy from 'lodash/groupBy';
 
 @Component({
@@ -19,7 +18,7 @@ export class GroupedListComponent implements OnChanges {
 
   public tree: Array<{ items?, name? }>;
 
-  ngOnChanges(changes): void {
+  public ngOnChanges(changes): void {
     this.updateTree();
   }
 

src/app/volume/volume-list/volume-grouped-list.component.ts

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import { GroupedListComponent } from '../../shared/components/grouped-list/grouped-list.component';
+import { volumeTypeNames } from '../../shared/models';
+
+@Component({
+  selector: 'cs-volume-grouped-list',
+  template: `
+    <ng-container *ngFor="let child of tree">
+      <div class="grouped-section" *ngIf="child.name; else leaf">
+        <h4>{{ child.name | translate }}</h4>
+        <cs-volume-grouped-list
+          [component]="component"
+          [groupings]="groupings"
+          [level]="level + 1"
+          [list]="child.items"
+          [dynamicInputs]="dynamicInputs"
+          [dynamicOutputs]="dynamicOutputs"
+        ></cs-volume-grouped-list>
+      </div>
+      <ng-template #leaf>
+        <mat-list>
+          <ndc-dynamic
+            *ngFor="let item of child.items"
+            [ndcDynamicComponent]="component"
+            [ndcDynamicInputs]="leafInputs(item)"
+            [ndcDynamicOutputs]="dynamicOutputs"
+          ></ndc-dynamic>
+        </mat-list>
+      </ng-template>
+    </ng-container>
+  `,
+  styleUrls: ['../../shared/components/grouped-list/grouped-list.component.scss']
+})
+export class VolumeGroupedListComponent extends GroupedListComponent {
+  protected sortGroups(group1, group2) {
+    return group1.name === volumeTypeNames['ROOT']
+      ? -1
+      : group1.name === volumeTypeNames['DATADISK']
+        ? 1
+        : group1.name.localeCompare(group2.name);
+  }
+}

src/app/volume/volume-list/volume-list.component.html

@@ -1,10 +1,10 @@
-<cs-grouped-list
+<cs-volume-grouped-list
   class="padding"
   [list]="volumes"
   [groupings]="groupings"
   [component]="itemComponent"
   [dynamicInputs]="inputs"
   [dynamicOutputs]="outputs"
 >
-</cs-grouped-list>
+</cs-volume-grouped-list>
 <cs-no-results *ngIf="!volumes?.length"></cs-no-results>

src/app/volume/volume.module.ts

@@ -60,6 +60,7 @@ import { userAccountReducers } from '../reducers/auth/redux/auth.reducers';
 import { UserAccountEffects } from '../reducers/auth/redux/auth.effects';
 import { VolumeSnapshotDetailsContainerComponent } from './container/volume-snapshot-details.container';
 import { virtualMachineReducers } from '../reducers/vm/redux/vm.reducers';
+import { VolumeGroupedListComponent } from './volume-list/volume-grouped-list.component';
 
 
 @NgModule({
@@ -116,7 +117,8 @@ import { virtualMachineReducers } from '../reducers/vm/redux/vm.reducers';
     VolumeCreationDialogComponent,
     VolumeCardItemComponent,
     VolumeRowItemComponent,
-    VolumeListComponent
+    VolumeListComponent,
+    VolumeGroupedListComponent
   ],
   exports: [
     VolumePageComponent