refactor(admin-ui): Move stringToColor into a pipe

admin-ui/src/app/shared/components/chip/chip.component.html

@@ -1,13 +1,19 @@
 <div
     class="wrapper"
-    [class.with-background]="colorFrom"
-    [vdrBackgroundColorFrom]="colorFrom"
+    [class.with-background]="!invert && colorFrom"
+    [style.backgroundColor]="!invert && (colorFrom | stringToColor)"
+    [style.color]="invert && (colorFrom | stringToColor)"
+    [style.borderColor]="invert && (colorFrom | stringToColor)"
     [ngClass]="colorType"
 >
     <div class="chip-label"><ng-content></ng-content></div>
     <div class="chip-icon" *ngIf="icon">
         <button (click)="iconClick.emit($event)">
-            <clr-icon [attr.shape]="icon" [class.is-inverse]="colorFrom"></clr-icon>
+            <clr-icon
+                [attr.shape]="icon"
+                [style.color]="invert && (colorFrom | stringToColor)"
+                [class.is-inverse]="!invert && colorFrom"
+            ></clr-icon>
         </button>
     </div>
 </div>

admin-ui/src/app/shared/components/chip/chip.component.ts

@@ -11,6 +11,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
 })
 export class ChipComponent {
     @Input() icon: string;
+    @Input() invert = false;
     /**
      * If set, the chip will have an auto-generated background
      * color based on the string value passed in.

admin-ui/src/app/shared/directives/background-color-from.directive.ts

@@ -1,22 +0,0 @@
-import { Directive, HostBinding, Input, OnChanges } from '@angular/core';
-
-import { stringToColor } from '../../common/utilities/string-to-color';
-
-/**
- * Sets the background color of the element based on the string argument
- * passed in.
- */
-@Directive({
-    selector: '[vdrBackgroundColorFrom]',
-})
-export class BackgroundColorFromDirective implements OnChanges {
-    @HostBinding('style.backgroundColor') private backgroundColor: string;
-
-    @Input() private vdrBackgroundColorFrom: string;
-
-    ngOnChanges(): void {
-        if (this.vdrBackgroundColorFrom !== '') {
-            this.backgroundColor = stringToColor(this.vdrBackgroundColorFrom);
-        }
-    }
-}

admin-ui/src/app/shared/pipes/sort.pipe.spec.ts

@@ -0,0 +1,21 @@
+import { SortPipe } from './sort.pipe';
+
+describe('SortPipe', () => {
+    const sortPipe = new SortPipe();
+
+    it('sorts a primitive array', () => {
+        const input = [5, 4, 2, 3, 2, 7, 1];
+        expect(sortPipe.transform(input)).toEqual([1, 2, 2, 3, 4, 5, 7]);
+    });
+
+    it('sorts an array of objects', () => {
+        const input = [{ id: 3 }, { id: 1 }, { id: 9 }, { id: 2 }, { id: 4 }];
+        expect(sortPipe.transform(input, 'id')).toEqual([
+            { id: 1 },
+            { id: 2 },
+            { id: 3 },
+            { id: 4 },
+            { id: 9 },
+        ]);
+    });
+});

admin-ui/src/app/shared/pipes/sort.pipe.ts

@@ -0,0 +1,28 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+/**
+ * A pipe for sorting elements of an array. Should be used with caution due to the
+ * potential for perf degredation. Ideally should only be used on small arrays (< 10s of items)
+ * and in components using OnPush change detection.
+ */
+@Pipe({
+    name: 'sort',
+})
+export class SortPipe implements PipeTransform {
+    transform<T>(value: T[], orderByProp?: keyof T) {
+        return value.sort((a, b) => {
+            const aProp = orderByProp ? a[orderByProp] : a;
+            const bProp = orderByProp ? b[orderByProp] : b;
+            if (aProp === bProp) {
+                return 0;
+            }
+            if (aProp == null) {
+                return 1;
+            }
+            if (bProp == null) {
+                return -1;
+            }
+            return aProp > bProp ? 1 : -1;
+        });
+    }
+}

admin-ui/src/app/shared/pipes/string-to-color.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+import { stringToColor } from '../../common/utilities/string-to-color';
+
+@Pipe({
+    name: 'stringToColor',
+    pure: true,
+})
+export class StringToColorPipe implements PipeTransform {
+    transform(value: any): string {
+        return stringToColor(value);
+    }
+}

admin-ui/src/app/shared/shared.module.ts

@@ -46,10 +46,11 @@ import { SelectToggleComponent } from './components/select-toggle/select-toggle.
 import { SimpleDialogComponent } from './components/simple-dialog/simple-dialog.component';
 import { TableRowActionComponent } from './components/table-row-action/table-row-action.component';
 import { TitleInputComponent } from './components/title-input/title-input.component';
-import { BackgroundColorFromDirective } from './directives/background-color-from.directive';
 import { CurrencyNamePipe } from './pipes/currency-name.pipe';
 import { FileSizePipe } from './pipes/file-size.pipe';
 import { SentenceCasePipe } from './pipes/sentence-case.pipe';
+import { SortPipe } from './pipes/sort.pipe';
+import { StringToColorPipe } from './pipes/string-to-color.pipe';
 import { ModalService } from './providers/modal/modal.service';
 import { CanDeactivateDetailGuard } from './providers/routing/can-deactivate-detail-guard';
 
@@ -71,7 +72,6 @@ const DECLARATIONS = [
     ActionBarRightComponent,
     ConfigurableInputComponent,
     AffixedInputComponent,
-    BackgroundColorFromDirective,
     ChipComponent,
     CurrencyInputComponent,
     CurrencyNamePipe,
@@ -101,11 +101,13 @@ const DECLARATIONS = [
     SentenceCasePipe,
     DropdownComponent,
     DropdownMenuComponent,
+    SortPipe,
     DropdownTriggerDirective,
     DropdownItemDirective,
     OrderStateLabelComponent,
     FormattedAddressComponent,
     LabeledDataComponent,
+    StringToColorPipe,
 ];
 
 @NgModule({