#26044 add icons to status (#26177)

dotCMS · Sep 21, 2023 · 3f7f5ce · 3f7f5ce
1 parent 431df5f
commit 3f7f5ce
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 21 deletions.
diff --git a/core-web/libs/dotcms-models/src/lib/dot-experiments-constants.ts b/core-web/libs/dotcms-models/src/lib/dot-experiments-constants.ts
@@ -40,6 +40,14 @@ export enum DotExperimentStatus {
     ARCHIVED = 'ARCHIVED'
 }
 
+export const ExperimentsStatusIcons: Record<DotExperimentStatus, string> = {
+    [DotExperimentStatus.DRAFT]: 'pi pi-pencil',
+    [DotExperimentStatus.SCHEDULED]: 'pi pi-calendar',
+    [DotExperimentStatus.RUNNING]: 'pi pi-play',
+    [DotExperimentStatus.ENDED]: 'pi pi-check',
+    [DotExperimentStatus.ARCHIVED]: 'pi pi-briefcase'
+};
+
 export const ExperimentsStatusList: Array<DotDropdownSelectOption<string>> = [
     {
         label: 'draft',

diff --git a/...portlet/src/lib/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.html b/...portlet/src/lib/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.html
@@ -12,8 +12,9 @@
 
     <ng-container *ngIf="!!experiment?.status">
         <div class="flex flex-grow-1 align-items-center justify-content-end">
-            <p-tag
-                [value]="
+            <p-chip
+                [icon]="this.statusIcon"
+                [label]="
                     (experiment?.status | titlecase | dm) +
                     (experiment?.status === experimentStatus.RUNNING
                         ? ' ' +
@@ -23,8 +24,7 @@
                         : '')
                 "
                 data-testId="status-tag"
-                styleClass="{{ experiment?.status | lowercase }}">
-            </p-tag>
+                styleClass="{{ experiment?.status | lowercase }}"></p-chip>
         </div>
     </ng-container>
 

diff --git a/...portlet/src/lib/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.scss b/...portlet/src/lib/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.scss
@@ -20,12 +20,7 @@
 }
 
 ::ng-deep {
-    p-tag .p-tag {
-        &.p-tag-danger {
-            background-color: $color-alert-red-light;
-            color: $color-alert-red;
-        }
-
+    p-chip .p-chip {
         &.running {
             color: $color-accessible-text-green;
             background-color: $color-accessible-text-green-bg;

diff --git a/...tlet/src/lib/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.spec.ts b/...tlet/src/lib/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.spec.ts
@@ -2,8 +2,8 @@ import { byTestId, createComponentFactory, Spectator } from '@ngneat/spectator/j
 
 import { DatePipe } from '@angular/common';
 
+import { Chip } from 'primeng/chip';
 import { Skeleton } from 'primeng/skeleton';
-import { Tag, TagModule } from 'primeng/tag';
 
 import { DotMessageService } from '@dotcms/data-access';
 import { DotExperimentStatus, RUNNING_UNTIL_DATE_FORMAT } from '@dotcms/dotcms-models';
@@ -23,7 +23,6 @@ describe('ExperimentsHeaderComponent', () => {
 
     const createComponent = createComponentFactory({
         component: DotExperimentsUiHeaderComponent,
-        imports: [TagModule],
         providers: [
             {
                 provide: DotMessageService,
@@ -58,12 +57,12 @@ describe('ExperimentsHeaderComponent', () => {
         expect(spectator.query(Skeleton)).toExist();
     });
 
-    it('should rendered the status tag', () => {
+    it('should rendered the status p-chip', () => {
         spectator.setInput({
             experiment: { ...EXPERIMENT_MOCK, status: DotExperimentStatus.SCHEDULED }
         });
 
-        expect(spectator.query(Tag)).toExist();
+        expect(spectator.query(Chip)).toExist();
         expect(spectator.query(byTestId('status-tag'))).toContainText('Scheduled');
     });
 
@@ -79,7 +78,7 @@ describe('ExperimentsHeaderComponent', () => {
             experiment: { ...EXPERIMENT_MOCK, status: DotExperimentStatus.RUNNING }
         });
 
-        expect(spectator.query(Tag)).toExist();
+        expect(spectator.query(Chip)).toExist();
         expect(spectator.query(byTestId('status-tag'))).toContainText(expectedStatus);
     });
 });
diff --git a/...s/portlet/src/lib/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.ts b/...s/portlet/src/lib/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.ts
@@ -1,14 +1,23 @@
 import { DatePipe, LowerCasePipe, NgIf, TitleCasePipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    Input,
+    OnChanges,
+    Output,
+    SimpleChanges
+} from '@angular/core';
 import { RouterLink } from '@angular/router';
 
 import { ButtonModule } from 'primeng/button';
+import { ChipModule } from 'primeng/chip';
 import { SkeletonModule } from 'primeng/skeleton';
-import { TagModule } from 'primeng/tag';
 
 import {
     DotExperiment,
     DotExperimentStatus,
+    ExperimentsStatusIcons,
     RUNNING_UNTIL_DATE_FORMAT
 } from '@dotcms/dotcms-models';
 import { DotIconModule, DotMessagePipe } from '@dotcms/ui';
@@ -29,12 +38,12 @@ import { DotPipesModule } from '@pipes/dot-pipes.module';
         DotPipesModule,
         DotMessagePipe,
         SkeletonModule,
-        TagModule,
-        ButtonModule
+        ButtonModule,
+        ChipModule
     ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DotExperimentsUiHeaderComponent {
+export class DotExperimentsUiHeaderComponent implements OnChanges {
     @Input()
     title = '';
 
@@ -47,6 +56,15 @@ export class DotExperimentsUiHeaderComponent {
     @Output()
     goBack = new EventEmitter<boolean>();
 
-    experimentStatus = DotExperimentStatus;
     runningUntilDateFormat = RUNNING_UNTIL_DATE_FORMAT;
+    statusIcon: string;
+    protected readonly experimentStatus = DotExperimentStatus;
+
+    ngOnChanges(changes: SimpleChanges): void {
+        const { experiment } = changes;
+        if (experiment && experiment.currentValue) {
+            const { status } = experiment.currentValue;
+            this.statusIcon = ExperimentsStatusIcons[status];
+        }
+    }
 }