Fix delete dialog title, footer correction (#194)

* fix: delete dialog title, footer correction * fix: update dep. versions * fix: tuning detail dialog layout * fix: tuning banner layout * fix: tuning banner layout
onecx · Aug 14, 2024 · 6920caf · 6920caf
1 parent 94eef3b
commit 6920caf
Show file tree

Hide file tree

Showing 9 changed files with 145 additions and 1,252 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -78,11 +78,11 @@
     "@angular-devkit/build-angular": "^18.1.2",
     "@angular-devkit/core": "^18.1.2",
     "@angular-devkit/schematics": "^18.1.2",
-    "@angular-eslint/builder": "^18.1.0",
-    "@angular-eslint/eslint-plugin": "^18.1.0",
-    "@angular-eslint/eslint-plugin-template": "^18.2.0",
-    "@angular-eslint/schematics": "^18.1.0",
-    "@angular-eslint/template-parser": "^18.2.0",
+    "@angular-eslint/builder": "^18.3.0",
+    "@angular-eslint/eslint-plugin": "^18.3.0",
+    "@angular-eslint/eslint-plugin-template": "^18.3.0",
+    "@angular-eslint/schematics": "^18.3.0",
+    "@angular-eslint/template-parser": "^18.3.0",
     "@angular/cli": "~18.1.2",
     "@angular/compiler-cli": "^18.1.2",
     "@angular/language-service": "^18.1.2",

diff --git a/src/app/announcement/announcement-detail/announcement-detail.component.html b/src/app/announcement/announcement-detail/announcement-detail.component.html
@@ -18,28 +18,26 @@
 >
   <form [formGroup]="formGroup" errorTailor>
     <div class="flex flex-wrap flex-column justify-content-between row-gap-3 sm:row-gap-4 mt-1">
-      <div class="flex flex-wrap align-items-center justify-content-between">
-        <div class="w-12">
-          <span class="p-float-label" controlErrorAnchor>
-            <textarea
-              pInputTextarea
-              id="am_announcement_detail_form_title"
-              type="text"
-              style="min-height: 2.5rem"
-              class="w-full textarea-sm"
-              formControlName="title"
-              rows="1"
-              [autoResize]="true"
-              appendTo="body"
-              [pTooltip]="'ANNOUNCEMENT.TOOLTIPS.TITLE' | translate"
-              tooltipPosition="top"
-              tooltipEvent="hover"
-            ></textarea>
-            <label class="ocx-required-label" for="announcement_detail_form_title">
-              {{ 'ANNOUNCEMENT.TITLE' | translate }}
-            </label>
-          </span>
-        </div>
+      <div class="w-full">
+        <span class="p-float-label" controlErrorAnchor>
+          <textarea
+            pInputTextarea
+            id="am_announcement_detail_form_title"
+            type="text"
+            style="min-height: 2.5rem"
+            class="w-full textarea-sm"
+            formControlName="title"
+            rows="1"
+            [autoResize]="true"
+            appendTo="body"
+            [pTooltip]="'ANNOUNCEMENT.TOOLTIPS.TITLE' | translate"
+            tooltipPosition="top"
+            tooltipEvent="hover"
+          ></textarea>
+          <label class="ocx-required-label" for="announcement_detail_form_title">
+            {{ 'ANNOUNCEMENT.TITLE' | translate }}
+          </label>
+        </span>
       </div>
       <div class="w-full">
         <span class="p-float-label" controlErrorAnchor>
@@ -59,7 +57,7 @@
         </span>
       </div>
 
-      <div class="w-full">
+      <div class="w-full mb-1">
         <span class="p-float-label">
           <p-dropdown
             id="am_announcement_detail_form_workspace_name"
@@ -79,7 +77,7 @@
         </span>
       </div>
 
-      <div class="w-full">
+      <div class="w-full mb-1">
         <span class="p-float-label">
           <p-dropdown
             id="am_announcement_detail_form_application_name"
@@ -99,8 +97,8 @@
         </span>
       </div>
 
-      <div class="grid grid-nogutter col-12 row-gap-3 sm:row-gap-1 pb-0">
-        <div class="col-12 sm:col-5 py-0 px-0 sm:pr-3 md:text-right flex sm:justify-content-end">
+      <div class="w-full flex flex-column sm:flex-row row-gap-3 sm:row-gap-1">
+        <div class="w-12 sm:w-5 py-0 px-0 sm:pr-3 md:text-right flex sm:justify-content-end">
           <div>
             <span class="p-float-label" controlErrorAnchor>
               <p-calendar
@@ -127,7 +125,7 @@
             </span>
           </div>
         </div>
-        <div class="col-12 sm:col-5 p-0 sm:pl-3">
+        <div class="w-12 sm:w-5 p-0 sm:pl-3">
           <div>
             <span class="p-float-label" controlErrorAnchor>
               <p-calendar
@@ -152,22 +150,20 @@
             </span>
           </div>
         </div>
-        <div class="col-6 sm:col-2 py-0 sm:pl-4">
-          <div class="w-1 flex flex-column row-gap-2 mr-2">
-            <p-inputSwitch
-              inputId="announcement_detail_form_status"
-              class="input-switch-xl"
-              formControlName="status"
-              trueValue="ACTIVE"
-              falseValue="INACTIVE"
-              [pTooltip]="'ANNOUNCEMENT.TOOLTIPS.STATUS' | translate"
-              tooltipPosition="top"
-              tooltipEvent="hover"
-            ></p-inputSwitch>
-            <label class="text-xs text-center float-label mr-2" for="announcement_detail_form_status">
-              {{ 'ENUMS.ANNOUNCEMENT_STATUS.' + formGroup.controls['status'].value | translate }}
-            </label>
-          </div>
+        <div class="w-12 sm:w-2 flex flex-column justify-content-center sm:align-items-center row-gap-1">
+          <p-inputSwitch
+            inputId="announcement_detail_form_status"
+            class="input-switch-xl"
+            formControlName="status"
+            trueValue="ACTIVE"
+            falseValue="INACTIVE"
+            [pTooltip]="'ANNOUNCEMENT.TOOLTIPS.STATUS' | translate"
+            tooltipPosition="top"
+            tooltipEvent="hover"
+          ></p-inputSwitch>
+          <label class="text-xs float-label" for="announcement_detail_form_status">
+            {{ 'ENUMS.ANNOUNCEMENT_STATUS.' + formGroup.controls['status'].value | translate }}
+          </label>
         </div>
         <label
           *ngIf="
@@ -181,9 +177,9 @@
         </label>
       </div>
 
-      <div class="grid grid-nogutter col-12 row-gap-2 pt-0">
-        <div class="col-12 md:col-5 py-0 px-0 md:pr-3 md:text-right flex flex-column md:justify-content-end">
-          <label class="float-label my-1 text-sm font-medium" for="announcement_detail_form_priority"
+      <div class="w-full flex flex-column sm:flex-row row-gap-3 sm:row-gap-1">
+        <div class="w-12 md:w-5 py-0 px-0 md:pr-3 md:text-right flex flex-column md:justify-content-end">
+          <label class="float-label mb-1 text-sm font-medium" for="announcement_detail_form_priority"
             >{{ 'ANNOUNCEMENT.PRIORITY' | translate }}
           </label>
           <p-selectButton
@@ -195,8 +191,8 @@
             tooltipEvent="hover"
           ></p-selectButton>
         </div>
-        <div class="col-12 md:col-7 flex flex-column p-0 md:pl-3">
-          <label class="float-label my-1 text-sm font-medium" for="announcement_detail_form_type">
+        <div class="w-12 md:w-7 flex flex-column p-0 md:pl-3">
+          <label class="float-label mb-1 text-sm font-medium" for="announcement_detail_form_type">
             {{ 'ANNOUNCEMENT.TYPE' | translate }}
           </label>
           <p-selectButton

diff --git a/src/app/announcement/announcement-search/announcement-search.component.html b/src/app/announcement/announcement-search/announcement-search.component.html
@@ -164,7 +164,7 @@
 
 <p-dialog
   [(visible)]="displayDeleteDialog"
-  [header]="'ACTIONS.DELETE.ANNOUNCEMENT.TOOLTIP' | translate"
+  [header]="'ACTIONS.DELETE.ANNOUNCEMENT' | translate"
   [modal]="true"
   [resizable]="false"
   [dismissableMask]="true"

diff --git a/src/app/announcement/announcement-search/announcement-search.component.scss b/src/app/announcement/announcement-search/announcement-search.component.scss
@@ -3,3 +3,4 @@
 @include danger-action;
 @include table-inline-buttons;
 @include table-responsive-columns;
+@include dialog-footer-buttons;
diff --git a/src/app/remotes/announcement-banner/announcement-banner.component.html b/src/app/remotes/announcement-banner/announcement-banner.component.html
@@ -11,16 +11,42 @@
     <ng-template let-announcement pTemplate="item">
       <div
         class="p-2 border-round flex flex-row justify-content-between align-items-center"
-        [ngClass]="getPriorityClasses(announcement)"
+        [ngClass]="
+          announcement.priority === 'IMPORTANT'
+            ? 'bg-red-100 text-red-800 border-red-600'
+            : announcement.priority === 'NORMAL'
+              ? 'bg-yellow-200 text-yellow-800 border-yellow-600'
+              : announcement.priority === 'LOW'
+                ? 'bg-blue-100 text-blue-800 border-blue-600'
+                : 'bg-green-200 text-green-800 border-green-600'
+        "
       >
         <!-- content -->
         <div class="px-3 flex flex-row align-items-center column-gap-4">
           <span
             id="am_announcement_banner_icon"
             class="pi text-xl"
-            [ngClass]="announcement.type === 'INFO' ? 'pi-info-circle' : 'pi-exclamation-circle'"
+            [ngClass]="
+              announcement.type === 'EVENT'
+                ? 'pi-calendar'
+                : announcement.type === 'INFO'
+                  ? 'pi-info-circle'
+                  : announcement.type === 'SYSTEM_MAINTENANCE'
+                    ? 'pi-wrench'
+                    : 'pi-info-circle'
+            "
             aria-label="'ANNOUNCEMENT.PRIORITY' | translate + ': ' + announcement.priority"
-            [pTooltip]="('ANNOUNCEMENT.PRIORITY' | translate) + ': ' + announcement.priority"
+            [pTooltip]="
+              ('ANNOUNCEMENT.PRIORITY' | translate) +
+              ': ' +
+              announcement.priority +
+              (announcement.workspaceName
+                ? ', ' + ('ANNOUNCEMENT.WORKSPACE' | translate) + ': ' + announcement.workspaceName
+                : '') +
+              (announcement.productName
+                ? ', ' + ('ANNOUNCEMENT.PRODUCT' | translate) + ': ' + announcement.productName
+                : '')
+            "
             tooltipPosition="top"
             tooltipEvent="hover"
           ></span>
@@ -29,31 +55,18 @@
             <div id="am_announcement_banner_content">{{ announcement.content }}</div>
           </div>
         </div>
-        <!-- context and clear -->
-        <div class="flex flex-row column-gap-2 align-items-center">
-          <p-tag
-            *ngIf="announcement.workspaceName"
-            id="am_announcement_banner_workspace"
-            [value]="announcement.workspaceName"
-            [styleClass]="getPriorityClasses(announcement, true) + ' px-2'"
-            [rounded]="true"
-            aria-label="'ANNOUNCEMENT.BANNER.WORKSPACE' | translate"
-            [pTooltip]="'ANNOUNCEMENT.BANNER.WORKSPACE' | translate"
-            tooltipPosition="top"
-            tooltipEvent="hover"
-          ></p-tag>
-          <button
-            id="am_announcement_banner_close"
-            pButton
-            icon="pi pi-times"
-            class="p-button-rounded p-button-text text-orange-800"
-            (click)="hide(announcement.id!)"
-            aria-label="'ANNOUNCEMENT.BANNER.CLOSE' | translate"
-            [pTooltip]="'ANNOUNCEMENT.BANNER.CLOSE' | translate"
-            tooltipPosition="top"
-            tooltipEvent="hover"
-          ></button>
-        </div>
+        <!-- clear -->
+        <button
+          id="am_announcement_banner_close"
+          pButton
+          icon="pi pi-times"
+          class="p-button-rounded p-button-text"
+          (click)="hide(announcement.id!)"
+          aria-label="'ANNOUNCEMENT.BANNER.CLOSE' | translate"
+          [pTooltip]="'ANNOUNCEMENT.BANNER.CLOSE' | translate"
+          tooltipPosition="top"
+          tooltipEvent="hover"
+        ></button>
       </div>
     </ng-template>
   </p-carousel>

diff --git a/src/app/remotes/announcement-banner/announcement-banner.component.scss b/src/app/remotes/announcement-banner/announcement-banner.component.scss
@@ -1,3 +1,4 @@
+// correct item dimension: each item has its own height
 :host ::ng-deep {
   .p-carousel-item:not(.p-carousel-item-active) {
     max-height: 0;

diff --git a/src/app/remotes/announcement-banner/announcement-banner.component.spec.ts b/src/app/remotes/announcement-banner/announcement-banner.component.spec.ts
@@ -107,13 +107,15 @@ describe('AnnouncementBannerComponent', () => {
   })
 
   it('should load announcements when the component starts', () => {
-    apiServiceSpy.searchAnnouncementBanners.and.returnValue(of({ stream: [normalAnnouncement] }))
+    apiServiceSpy.searchAnnouncementBanners.and.returnValue(
+      of({ stream: [normalAnnouncement, importantAnnouncement, lowPrioAnnouncement] })
+    )
 
     initializeComponent()
 
     expect(component).toBeTruthy()
     component['announcementsSubject'].subscribe((anncmts) => {
-      expect(anncmts).toEqual([normalAnnouncement])
+      expect(anncmts).toEqual([normalAnnouncement, importantAnnouncement, lowPrioAnnouncement])
     })
   })
 
@@ -204,30 +206,4 @@ describe('AnnouncementBannerComponent', () => {
       })
     })
   })
-
-  describe('getPriorityClasses - use correct colors for different priorities', () => {
-    it('should set priority class color for important anncmt', () => {
-      const resultBgOnly = component.getPriorityClasses(importantAnnouncement, true)
-      expect(resultBgOnly).toBe('bg-red-800')
-
-      const resultNotBgOnly = component.getPriorityClasses(importantAnnouncement, false)
-      expect(resultNotBgOnly).toBe('bg-red-200 text-red-800')
-    })
-
-    it('should set priority class color for normal anncmt', () => {
-      const resultBgOnly = component.getPriorityClasses(normalAnnouncement, true)
-      expect(resultBgOnly).toBe('bg-orange-800')
-
-      const resultNotBgOnly = component.getPriorityClasses(normalAnnouncement, false)
-      expect(resultNotBgOnly).toBe('bg-orange-200 text-orange-800')
-    })
-
-    it('should set priority class color for low prio anncmt', () => {
-      const resultBgOnly = component.getPriorityClasses(lowPrioAnnouncement, true)
-      expect(resultBgOnly).toBe('bg-green-800')
-
-      const resultNotBgOnly = component.getPriorityClasses(lowPrioAnnouncement)
-      expect(resultNotBgOnly).toBe('bg-green-200 text-green-800')
-    })
-  })
 })
diff --git a/src/app/remotes/announcement-banner/announcement-banner.component.ts b/src/app/remotes/announcement-banner/announcement-banner.component.ts
@@ -134,15 +134,4 @@ export class OneCXAnnouncementBannerComponent implements ocxRemoteComponent, ocx
       return []
     }
   }
-
-  getPriorityClasses(announcement: Announcement, bgOnly = false) {
-    switch (announcement.priority) {
-      case 'IMPORTANT':
-        return bgOnly ? 'bg-red-800' : 'bg-red-200 text-red-800'
-      case 'NORMAL':
-        return bgOnly ? 'bg-orange-800' : 'bg-orange-200 text-orange-800'
-      default:
-        return bgOnly ? 'bg-green-800' : 'bg-green-200 text-green-800'
-    }
-  }
 }