Design list active and banner, add sorting (#217)

* feat: exclude welcome product from banner

* feat: layout tuning

* feat: fix tests

src/app/remotes/announcement-banner/announcement-banner.component.ts

@@ -14,8 +14,8 @@ import {
   BASE_URL,
   RemoteComponentConfig,
   ocxRemoteComponent,
-  provideTranslateServiceForRoot,
-  ocxRemoteWebcomponent
+  ocxRemoteWebcomponent,
+  provideTranslateServiceForRoot
 } from '@onecx/angular-remote-components'
 import { AppConfigService, UserService, createRemoteComponentTranslateLoader } from '@onecx/portal-integration-angular'
 import {
@@ -78,23 +78,25 @@ export class OneCXAnnouncementBannerComponent implements ocxRemoteComponent, ocx
     ])
       .pipe(
         mergeMap(([_, currentWorkspace, currentMfe]) => {
-          return this.apiV1
-            .searchAnnouncementBanners({
-              announcementBannerSearchCriteria: {
-                workspaceName: currentWorkspace.workspaceName,
-                productName: currentMfe.productName,
-                currentDate: this.currentDate
-              }
-            })
-            .pipe(
-              map((results) => {
-                const ignoredAnnouncements = this.getIgnoredAnnouncementsIds()
-                return results.stream?.filter((result: Announcement) => !ignoredAnnouncements.includes(result.id!))
-              }),
-              catchError(() => {
-                return of([])
-              })
-            )
+          return currentMfe.productName === 'onecx-welcome'
+            ? of([]) // exclude onecx-welcome
+            : this.apiV1
+                .searchAnnouncementBanners({
+                  announcementBannerSearchCriteria: {
+                    workspaceName: currentWorkspace.workspaceName,
+                    productName: currentMfe.productName,
+                    currentDate: this.currentDate
+                  }
+                })
+                .pipe(
+                  map((results) => {
+                    const ignoredAnnouncements = this.getIgnoredAnnouncementsIds()
+                    return results.stream?.filter((result: Announcement) => !ignoredAnnouncements.includes(result.id!))
+                  }),
+                  catchError(() => {
+                    return of([])
+                  })
+                )
         })
       )
       .subscribe((announcements) => this.announcementsSubject.next(announcements))

src/app/remotes/announcement-list-active/announcement-list-active.component.html

@@ -1,43 +1,62 @@
 <ng-container *ngIf="announcements$ | async as announcements">
-  <div class="flex flex-column row-gap-3 px-1">
-    <a
-      *ngFor="let announcement of announcements"
-      class="block flex flex-row flex-nowrap justify-content-start align-items-center column-gap-4 hover:font-bold cursor-pointer"
-      (click)="announcementContent.toggle($event)"
-    >
-      <div
-        class="font-bold"
-        [ngClass]="
-          announcement.priority === 'IMPORTANT'
-            ? 'text-red-600'
-            : announcement.priority === 'NORMAL'
-              ? 'text-yellow-600'
-              : announcement.priority === 'LOW'
-                ? 'text-blue-600'
-                : 'text-green-600'
-        "
-        aria-hidden="true"
+  <div [ocxContent]="'Announcements'" class="surface-200 m-0 overflow-hidden">
+    <div class="flex flex-column row-gap-2 px-1">
+      <a
+        *ngFor="let announcement of announcements"
+        class="announcement-row block flex flex-row flex-nowrap justify-content-start align-items-center column-gap-3 hover:font-bold cursor-pointer border-none border-bottom-1 border-solid border-gray-400"
+        (click)="announcementContent.toggle($event)"
       >
-        <div
-          id="am_announcement_list_active_icon"
-          class="pi text-xl"
-          [ngClass]="
-            announcement.type === 'EVENT'
-              ? 'pi-calendar'
-              : announcement.type === 'INFO'
-                ? 'pi-info-circle'
-                : announcement.type === 'SYSTEM_MAINTENANCE'
-                  ? 'pi-wrench'
-                  : 'pi-info-circle'
-          "
-        ></div>
-      </div>
-      <div [id]="'am_announcement_list_active_data_row_' + '_title'" class="text-base sm:text-md">
-        {{ limitText(announcement.title, 100) }}
-      </div>
-    </a>
+        <div class="font-bold" aria-hidden="true">
+          <div
+            id="am_announcement_list_active_icon"
+            class="pi text-xl"
+            [ngClass]="
+              announcement.type === 'EVENT'
+                ? 'pi-calendar'
+                : announcement.type === 'INFO'
+                  ? 'pi-info-circle'
+                  : announcement.type === 'SYSTEM_MAINTENANCE'
+                    ? 'pi-wrench'
+                    : 'pi-info-circle'
+            "
+          ></div>
+        </div>
+        <div class="mb-2 flex flex-column row-gap-1">
+          <div
+            [id]="'am_announcement_list_active_data_row_' + '_title'"
+            class="mb-1 text-base sm:text-md font-bold white-space-nowrap text-overflow-hidden text-overflow-ellipsis"
+          >
+            {{ announcement.title }}
+          </div>
+          <div
+            [id]="'am_announcement_list_active_data_row_' + '_content'"
+            class="sm:text-base white-space-nowrap text-overflow-hidden text-overflow-ellipsis"
+          >
+            {{ announcement.content }}
+          </div>
+        </div>
+
+        <!-- DETAIL -->
+        <p-overlayPanel #announcementContent>
+          <a class="" (click)="announcementContent.toggle($event)">
+            <div class="flex flex-column row-gap-2 px-1">
+              <div
+                id="am_announcement_list_active_panel_icon"
+                class="pi text-xl"
+                [ngClass]="
+                  announcement.type === 'EVENT'
+                    ? 'pi-calendar'
+                    : announcement.type === 'INFO'
+                      ? 'pi-info-circle'
+                      : announcement.type === 'SYSTEM_MAINTENANCE'
+                        ? 'pi-wrench'
+                        : 'pi-info-circle'
+                "
+              ></div>
+            </div>
+          </a>
+        </p-overlayPanel>
+      </a>
+    </div>
   </div>
-  <p-overlayPanel #announcementContent>
-    <div class="">Hallo Henry</div>
-  </p-overlayPanel>
 </ng-container>

src/app/remotes/announcement-list-active/announcement-list-active.component.scss

@@ -0,0 +1,7 @@
+@import 'src/_mixins.scss';
+
+@include displaying-text-responsive;
+
+.announcement-row:last-of-type {
+  border-bottom: none !important;
+}

src/app/remotes/announcement-list-active/announcement-list-active.component.spec.ts

@@ -65,7 +65,7 @@ describe('AnnouncementListActiveComponent', () => {
       declarations: [],
       imports: [
         TranslateTestingModule.withTranslations({
-          en: require('../../../assets/i18n/en.json')
+          en: require('src/assets/i18n/en.json')
         }).withDefaultLanguage('en')
       ],
       providers: [
@@ -115,7 +115,7 @@ describe('AnnouncementListActiveComponent', () => {
 
     expect(component).toBeTruthy()
     component['announcementsSubject'].subscribe((anncmts) => {
-      expect(anncmts).toEqual([normalAnnouncement, importantAnnouncement, lowPrioAnnouncement])
+      expect(anncmts).toEqual([importantAnnouncement, normalAnnouncement, lowPrioAnnouncement])
     })
   })
 

src/app/remotes/announcement-list-active/announcement-list-active.component.ts

@@ -13,10 +13,15 @@ import {
   BASE_URL,
   RemoteComponentConfig,
   ocxRemoteComponent,
-  provideTranslateServiceForRoot,
-  ocxRemoteWebcomponent
+  ocxRemoteWebcomponent,
+  provideTranslateServiceForRoot
 } from '@onecx/angular-remote-components'
-import { AppConfigService, UserService, createRemoteComponentTranslateLoader } from '@onecx/portal-integration-angular'
+import {
+  AppConfigService,
+  UserService,
+  createRemoteComponentTranslateLoader,
+  PortalCoreModule
+} from '@onecx/portal-integration-angular'
 import { AnnouncementAbstract, AnnouncementInternalAPIService, Configuration } from 'src/app/shared/generated'
 import { SharedModule } from 'src/app/shared/shared.module'
 import { environment } from 'src/environments/environment'
@@ -25,7 +30,15 @@ import { limitText } from 'src/app/shared/utils'
 @Component({
   selector: 'app-announcement-list-active',
   standalone: true,
-  imports: [AngularRemoteComponentsModule, CommonModule, TranslateModule, SharedModule, TagModule, TooltipModule],
+  imports: [
+    AngularRemoteComponentsModule,
+    CommonModule,
+    TranslateModule,
+    SharedModule,
+    TagModule,
+    TooltipModule,
+    PortalCoreModule
+  ],
   providers: [
     {
       provide: BASE_URL,
@@ -52,8 +65,8 @@ export class OneCXAnnouncementListActiveComponent implements ocxRemoteComponent,
 
   constructor(
     @Inject(BASE_URL) private baseUrl: ReplaySubject<string>,
+    private announcementApi: AnnouncementInternalAPIService,
     private translateService: TranslateService,
-    private apiV1: AnnouncementInternalAPIService,
     private appStateService: AppStateService,
     private userService: UserService,
     private appConfigService: AppConfigService
@@ -62,7 +75,7 @@ export class OneCXAnnouncementListActiveComponent implements ocxRemoteComponent,
     combineLatest([this.baseUrl.asObservable(), this.appStateService.currentWorkspace$.asObservable()])
       .pipe(
         mergeMap(([_, currentWorkspace]) => {
-          return this.apiV1
+          return this.announcementApi
             .searchAnnouncementBanners({
               announcementBannerSearchCriteria: {
                 workspaceName: currentWorkspace.workspaceName,
@@ -71,7 +84,16 @@ export class OneCXAnnouncementListActiveComponent implements ocxRemoteComponent,
             })
             .pipe(
               map((results) => {
+                // exclude product specific announcements
                 return results.stream
+                  ?.filter((ann) => !ann.productName)
+                  .sort((a, b) =>
+                    this.prioValue(a.priority) < this.prioValue(b.priority)
+                      ? 1
+                      : this.prioValue(a.priority) > this.prioValue(b.priority)
+                        ? -1
+                        : 0
+                  )
               }),
               catchError(() => {
                 return of([])
@@ -86,8 +108,12 @@ export class OneCXAnnouncementListActiveComponent implements ocxRemoteComponent,
     this.ocxInitRemoteComponent(config)
   }
 
-  ocxInitRemoteComponent(config: RemoteComponentConfig): void {
-    this.apiV1.configuration = new Configuration({
+  private prioValue(prio: string | undefined): number {
+    return prio === 'IMPORTANT' ? 3 : prio === 'NORMAL' ? 2 : 1
+  }
+
+  public ocxInitRemoteComponent(config: RemoteComponentConfig): void {
+    this.announcementApi.configuration = new Configuration({
       basePath: Location.joinWithSlash(config.baseUrl, environment.apiPrefix)
     })
     this.appConfigService.init(config['baseUrl'])

src/assets/i18n/de.json

@@ -96,6 +96,9 @@
       "WORKSPACE": "Workspace",
       "PRODUCT": "Produktname"
     },
+    "LIST-ACTIVE": {
+      "TITLE": "Ankündigungen"
+    },
     "TOOLTIPS": {
       "TITLE": "Titel der Neuigkeit",
       "TITLE.CRITERIA": "Titel der Neuigkeit, Suche mit Wildcard: *",

src/assets/i18n/en.json

@@ -96,6 +96,9 @@
       "WORKSPACE": "Workspace",
       "PRODUCT": "Product"
     },
+    "LIST-ACTIVE": {
+      "TITLE": "Announcement"
+    },
     "TOOLTIPS": {
       "TITLE": "Title of the Announcement",
       "TITLE.CRITERIA": "Title of the Announcement, Wildcard supported: *",