@digital-realty/ix-notifications 1.0.22 → 1.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/IxNotifications.d.ts +1 -1
  2. package/dist/IxNotifications.js +29 -17
  3. package/dist/IxNotifications.js.map +1 -1
  4. package/dist/components/notifications/group-filters.js +5 -3
  5. package/dist/components/notifications/group-filters.js.map +1 -1
  6. package/dist/components/notifications/notification-item.js +11 -5
  7. package/dist/components/notifications/notification-item.js.map +1 -1
  8. package/dist/components/notifications/notification-tooltip.d.ts +9 -3
  9. package/dist/components/notifications/notification-tooltip.js +63 -32
  10. package/dist/components/notifications/notification-tooltip.js.map +1 -1
  11. package/dist/components/notifications/view-item-dialog.d.ts +1 -0
  12. package/dist/components/notifications/view-item-dialog.js +11 -1
  13. package/dist/components/notifications/view-item-dialog.js.map +1 -1
  14. package/dist/ix-notifications.min.js +1 -1
  15. package/dist/services/notifications-service.js.map +1 -1
  16. package/dist/state/NotificationState.d.ts +1 -0
  17. package/dist/state/NotificationState.js +1 -0
  18. package/dist/state/NotificationState.js.map +1 -1
  19. package/dist/styles/notifications-style.js +2 -3
  20. package/dist/styles/notifications-style.js.map +1 -1
  21. package/dist/tw.js +775 -755
  22. package/dist/tw.js.map +1 -1
  23. package/package.json +3 -3
package/dist/IxNotifications.d.ts CHANGED
@@ -10,13 +10,13 @@ import './components/notifications/grouped-item.js';
10
10
  import './components/notifications/group-filters.js';
11
11
  import './components/notifications/date-filters.js';
12
12
  import './components/notifications/confirmation-dialog.js';
13
+ import './components/notifications/notification-tooltip.js';
13
14
  export declare class IxNotifications extends MobxLitElement {
14
15
  static styles: import("lit").CSSResult[];
15
16
  groupFilters: HTMLElement;
16
17
  groupFiltersButton: HTMLElement;
17
18
  dateFilters: HTMLElement;
18
19
  dateFiltersButton: HTMLElement;
19
- private showDrawer;
20
20
  private showGroupedView;
21
21
  private showFilters;
22
22
  private showDateFilters;
package/dist/IxNotifications.js CHANGED
@@ -17,11 +17,10 @@ import './components/notifications/group-filters.js';
17
17
  import './components/notifications/date-filters.js';
18
18
  import './components/notifications/confirmation-dialog.js';
19
19
  import { NotificationsStyle } from './styles/notifications-style.js';
20
- import { handleMouseOver, handleMouseOut, } from './components/notifications/notification-tooltip.js';
20
+ import './components/notifications/notification-tooltip.js';
21
21
  export class IxNotifications extends MobxLitElement {
22
22
  constructor() {
23
23
  super(...arguments);
24
- this.showDrawer = false;
25
24
  this.showGroupedView = false;
26
25
  this.showFilters = false;
27
26
  this.showDateFilters = false;
@@ -51,8 +50,8 @@ export class IxNotifications extends MobxLitElement {
51
50
  NotificationsState.clearStoredNotificationsData();
52
51
  }
53
52
  toggleDrawer() {
54
- this.showDrawer = !this.showDrawer;
55
- if (!this.showDrawer) {
53
+ NotificationsState.showDrawer = !NotificationsState.showDrawer;
54
+ if (!NotificationsState.showDrawer) {
56
55
  this.showFilters = false;
57
56
  this.showDateFilters = false;
58
57
  }
@@ -252,7 +251,7 @@ export class IxNotifications extends MobxLitElement {
252
251
  }
253
252
  render() {
254
253
  return html `
255
- <notification-tooltip></notification-tooltip>
254
+ <notification-tooltip> </notification-tooltip>
256
255
  <div class="relative">
257
256
  <ix-icon-button class="active-icon" @click=${() => this.toggleDrawer()}>
258
257
  <slot name="icon" slot="default"></slot>
@@ -269,7 +268,7 @@ export class IxNotifications extends MobxLitElement {
269
268
  >
270
269
  </confirmation-dialog>
271
270
  <ix-drawer
272
- ?isVisible=${this.showDrawer}
271
+ ?isVisible=${NotificationsState.showDrawer}
273
272
  .onClosed=${() => this.toggleDrawer()}
274
273
  animate-vertical
275
274
  hide-close
@@ -281,8 +280,12 @@ export class IxNotifications extends MobxLitElement {
281
280
  <div class="flex flex-row justify-end grow items-center options">
282
281
  <ix-icon-button
283
282
  @click=${this.markAllread}
284
- @mouseover=${(e) => handleMouseOver(e, 'Mark All Read')}
285
- @mouseout=${handleMouseOut}
283
+ @mouseover=${(e) => {
284
+ window.dispatchEvent(new CustomEvent('show-notification-tooltip', {
285
+ detail: { label: 'Mark All Read', target: e.target },
286
+ }));
287
+ }}
288
+ @mouseout=${() => window.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}
286
289
  icon="markunread_mailbox"
287
290
  class="${NotificationsState.unreadNotificationCount <= 0
288
291
  ? 'inactive-icon'
@@ -292,8 +295,12 @@ export class IxNotifications extends MobxLitElement {
292
295
  ></ix-icon-button>
293
296
  <ix-icon-button
294
297
  @click=${this.toggleGroupView}
295
- @mouseover=${(e) => handleMouseOver(e, 'Sort by Type')}
296
- @mouseout=${handleMouseOut}
298
+ @mouseover=${(e) => {
299
+ window.dispatchEvent(new CustomEvent('show-notification-tooltip', {
300
+ detail: { label: 'Sort by Type', target: e.target },
301
+ }));
302
+ }}
303
+ @mouseout=${() => window.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}
297
304
  class="active-icon"
298
305
  label="Sort by Type"
299
306
  >
@@ -303,8 +310,12 @@ export class IxNotifications extends MobxLitElement {
303
310
  </ix-icon-button>
304
311
  <ix-icon-button
305
312
  @click=${this.displayFilters}
306
- @mouseover=${(e) => handleMouseOver(e, 'Filter by Type')}
307
- @mouseout=${handleMouseOut}
313
+ @mouseover=${(e) => {
314
+ window.dispatchEvent(new CustomEvent('show-notification-tooltip', {
315
+ detail: { label: 'Filter by Type', target: e.target },
316
+ }));
317
+ }}
318
+ @mouseout=${() => window.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}
308
319
  class="active-icon"
309
320
  id="group-filter-button"
310
321
  label="Filter by Type"
@@ -320,8 +331,12 @@ export class IxNotifications extends MobxLitElement {
320
331
  </div>
321
332
  <ix-icon-button
322
333
  @click=${this.displayDateFilters}
323
- @mouseover=${(e) => handleMouseOver(e, 'Filter by Date')}
324
- @mouseout=${handleMouseOut}
334
+ @mouseover=${(e) => {
335
+ window.dispatchEvent(new CustomEvent('show-notification-tooltip', {
336
+ detail: { label: 'Filter by Date', target: e.target },
337
+ }));
338
+ }}
339
+ @mouseout=${() => window.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}
325
340
  icon="date_range"
326
341
  class="active-icon"
327
342
  filledIcon="true"
@@ -360,9 +375,6 @@ __decorate([
360
375
  __decorate([
361
376
  query('ix-icon-button#date-filters-button')
362
377
  ], IxNotifications.prototype, "dateFiltersButton", void 0);
363
- __decorate([
364
- state()
365
- ], IxNotifications.prototype, "showDrawer", void 0);
366
378
  __decorate([
367
379
  state()
368
380
  ], IxNotifications.prototype, "showGroupedView", void 0);
package/dist/IxNotifications.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IxNotifications.js","sourceRoot":"","sources":["../src/IxNotifications.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { differenceInDays, differenceInHours } from 'date-fns';\nimport {\n plannedMaintenance,\n viewList,\n dcim,\n sortCheck,\n} from './assets/iconset.js';\nimport { TWStyles } from './tw.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport '@digital-realty/ix-drawer/ix-drawer.js';\nimport '@digital-realty/ix-icon';\nimport '@material/web/icon/icon.js';\nimport { NotificationsState } from './state/NotificationState.js';\nimport { ApiCallResult, Notification } from './models/notification.js';\nimport {\n ConfirmationDialogEventDetail,\n FilterDialogEventDetail,\n} from './constants/notification-types.js';\nimport {\n ApiCallState,\n NotificationGroups,\n NotificationStatus,\n} from './constants/notifications.js';\nimport './components/notifications/notification-item.js';\nimport './components/notifications/grouped-item.js';\nimport './components/notifications/group-filters.js';\nimport './components/notifications/date-filters.js';\nimport './components/notifications/confirmation-dialog.js';\nimport { NotificationsStyle } from './styles/notifications-style.js';\nimport {\n handleMouseOver,\n handleMouseOut,\n} from './components/notifications/notification-tooltip.js';\n\nexport class IxNotifications extends MobxLitElement {\n static styles = [TWStyles, NotificationsStyle];\n\n @query('group-filters') groupFilters!: HTMLElement;\n\n @query('ix-icon-button#group-filter-button') groupFiltersButton!: HTMLElement;\n\n @query('date-filters') dateFilters!: HTMLElement;\n\n @query('ix-icon-button#date-filters-button') dateFiltersButton!: HTMLElement;\n\n @state() private showDrawer = false;\n\n @state() private showGroupedView = false;\n\n @state() private showFilters = false;\n\n @state() private showDateFilters = false;\n\n @state() private showMarkAllReadConfirmation = false;\n\n @property({ type: String }) baseApiUrl = '';\n\n @property({ type: String }) localStorageKey = '';\n\n async firstUpdated() {\n // Construct ApiClient form baseApiUrl and localStorageKey\n NotificationsState.baseApiUrl = this.baseApiUrl;\n NotificationsState.localStorageKey = this.localStorageKey;\n NotificationsState.ConstructApiClient();\n }\n\n connectedCallback() {\n super.connectedCallback();\n window.addEventListener(\n 'account-switched',\n NotificationsState.NewApiClient\n );\n window.addEventListener('beforeunload', this.handleOnbeforeunload);\n }\n\n disconnectedCallback() {\n window.removeEventListener(\n 'account-switched',\n NotificationsState.NewApiClient\n );\n window.removeEventListener('beforeunload', this.handleOnbeforeunload);\n super.disconnectedCallback();\n }\n\n // Handle browser refresh event\n // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars\n handleOnbeforeunload(event: any) {\n NotificationsState.clearStoredNotificationsData();\n }\n\n toggleDrawer() {\n this.showDrawer = !this.showDrawer;\n if (!this.showDrawer) {\n this.showFilters = false;\n this.showDateFilters = false;\n }\n }\n\n /* eslint-disable-next-line */\n renderUnReadCountText() {\n if (NotificationsState.unreadNotificationCount <= 0) {\n return html`${nothing}`;\n }\n\n let unreadCountText = '';\n if (NotificationsState.unreadNotificationCount > 99) {\n unreadCountText = '99+';\n } else {\n unreadCountText = NotificationsState.unreadNotificationCount.toString();\n }\n\n return html` <div\n class=\"unread rounded-full text-center text-white text-sm absolute icon-position -start-0\"\n >\n ${unreadCountText}\n </div>`;\n }\n\n markAllread() {\n if (NotificationsState.unreadNotificationCount > 0) {\n this.showMarkAllReadConfirmation = true;\n }\n }\n\n private confirmedMarkAllRead(e: CustomEvent<ConfirmationDialogEventDetail>) {\n // Mark All read if Confirmed True\n if (e.detail.returnValue) {\n const filterNotification = this.applyNotificationFilters();\n const unreadItems = filterNotification?.filter(\n item => item.status === NotificationStatus.UNREAD\n );\n\n if (unreadItems.length > 0) {\n let allResultSuccesful = true;\n\n filterNotification?.forEach(item => {\n NotificationsState.setNotificationReadStatus(item.id).then(\n (result: any) => {\n if (allResultSuccesful) allResultSuccesful = result;\n }\n );\n });\n\n const apiResult = {\n State:\n allResultSuccesful === true\n ? ApiCallState.SUCCESS\n : ApiCallState.ERROR,\n Message:\n allResultSuccesful === true\n ? 'Successfully marked all the notificaions as read'\n : 'Error while marking the notifications read, Please try again',\n } as ApiCallResult;\n\n this.showResultMessage(apiResult, unreadItems[0].id);\n\n this.renderUnReadCountText();\n\n this.requestUpdate();\n }\n }\n\n this.showMarkAllReadConfirmation = false;\n }\n\n // eslint-disable-next-line class-methods-use-this\n private showResultMessage(result: ApiCallResult, id: string) {\n window.dispatchEvent(\n new CustomEvent('add-toast', {\n detail: {\n id,\n content: html` <ix-message-toast\n toastId=${id}\n .TMessageToast=${result.State.toLowerCase()}\n forceClose\n >\n ${result.Message}\n </ix-message-toast>`,\n autoClose: 3000,\n durationOut: 3000,\n vertical: 'bottom',\n horizontal: 'center',\n animated: true,\n above: false,\n },\n })\n );\n }\n\n toggleGroupView() {\n this.showGroupedView = !this.showGroupedView;\n }\n\n displayFilters() {\n this.showFilters = !this.showFilters;\n }\n\n /* eslint-disable-next-line */\n applyNotificationFilters() {\n const filteredNotifications = NotificationsState.notifications?.filter(\n (notification: Notification) =>\n (notification.resourceType === NotificationGroups.PLANNED_MAINTENANCE &&\n NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE ===\n true) ||\n (notification.resourceType === NotificationGroups.SERVICE_TICKETS &&\n NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS ===\n true) ||\n (notification.resourceType === NotificationGroups.DCIM_ALERTS &&\n NotificationsState.notificationFilters.SHOW_DCIM_ALERTS === true) ||\n notification.resourceType === NotificationGroups.INCIDENTS\n ); // Always display incidents\n\n // both dates are defined, search within the window\n if (\n NotificationsState.dateFilters.FROM_DATE !== undefined &&\n NotificationsState.dateFilters.TO_DATE !== undefined\n )\n return filteredNotifications.filter(\n notification =>\n differenceInHours(\n new Date(notification.createdAt),\n NotificationsState.dateFilters.FROM_DATE!\n ) >= 0 &&\n differenceInDays(\n new Date(notification.createdAt),\n NotificationsState.dateFilters.TO_DATE!\n ) <= 0\n );\n\n // FROM_DATE is defined, TO_DATE is undefined, return notifications after FROM_DATE\n if (\n NotificationsState.dateFilters.FROM_DATE !== undefined &&\n NotificationsState.dateFilters.TO_DATE === undefined\n )\n return filteredNotifications.filter(\n notification =>\n differenceInHours(\n new Date(notification.createdAt),\n NotificationsState.dateFilters.FROM_DATE!\n ) >= 0\n );\n\n // TO_DATE is defined, FROM_DATE is undefined, return notifications before TO_DATE\n if (\n NotificationsState.dateFilters.FROM_DATE === undefined &&\n NotificationsState.dateFilters.TO_DATE !== undefined\n )\n return filteredNotifications.filter(\n notification =>\n differenceInDays(\n new Date(notification.createdAt),\n NotificationsState.dateFilters.TO_DATE!\n ) <= 0\n );\n\n return filteredNotifications;\n }\n\n displayDateFilters() {\n this.showDateFilters = !this.showDateFilters;\n }\n\n renderGroupedView() {\n const filteredNotifications = this.applyNotificationFilters();\n return html`<div style=\"margin:0px\">\n <grouped-item\n groupTitle=\"Planned Site Maintenance\"\n groupIcon=\"${plannedMaintenance.strings[0]}\"\n .childItems=${filteredNotifications?.filter(\n item => item.resourceType === NotificationGroups.PLANNED_MAINTENANCE\n )}\n ></grouped-item>\n <grouped-item\n groupTitle=\"Emergency Repairs\"\n groupIcon=\"report\"\n .childItems=${filteredNotifications?.filter(\n item => item.resourceType === NotificationGroups.INCIDENTS\n )}\n ></grouped-item>\n <grouped-item\n groupTitle=\"Service Ticket Updates\"\n groupIcon=\"sync_saved_locally\"\n .childItems=${filteredNotifications?.filter(\n item => item.resourceType === NotificationGroups.SERVICE_TICKETS\n )}\n ></grouped-item>\n <grouped-item\n groupTitle=${NotificationGroups.DCIM_ALERTS}\n groupIcon=\"${dcim.strings[0]}\"\n .childItems=${filteredNotifications?.filter(\n item => item.resourceType === NotificationGroups.DCIM_ALERTS\n )}\n ></grouped-item>\n </div>`;\n }\n\n renderDefaultView() {\n const filterNotification = this.applyNotificationFilters();\n\n const filterTodayItems = filterNotification.filter(\n notification => differenceInDays(notification.createdAt, new Date()) === 0\n );\n\n const filterEarlierItems = filterNotification.filter(\n notification => differenceInDays(notification.createdAt, new Date()) !== 0\n );\n\n if (filterNotification?.length! > 0) {\n return html` <h3 class=\"grow\">Today</h3>\n <div class=\"m-0 p-0\">\n ${filterTodayItems.length > 0\n ? filterTodayItems?.map(\n item => html`<notification-item\n .notification=${item}\n ?disabled=${item.resourceType ===\n NotificationGroups.INCIDENTS}\n >\n </notification-item> `\n )\n : this.renderNoResult()}\n </div>\n <h3 class=\"grow\">Earlier</h3>\n <div>\n ${filterEarlierItems.length > 0\n ? filterEarlierItems?.map(\n item => html`<notification-item\n .notification=${item}\n ?disabled=${item.resourceType ===\n NotificationGroups.INCIDENTS}\n >\n </notification-item> `\n )\n : this.renderNoResult()}\n </div>`;\n }\n\n return html`<p class=\"empty\"><strong>No notifications yet.</strong></p>`;\n }\n\n /* eslint-disable-next-line */\n renderNoResult() {\n return html`<p class=\"empty\"><strong>No notifications yet.</strong></p>`;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n handleCloseClick(_e: CustomEvent<FilterDialogEventDetail>) {\n this.showDateFilters = false;\n this.showFilters = false;\n }\n\n // eslint-disable-next-line\n handleContentScroll(e: CustomEvent) {\n // when scrollbar at the end, retrieve next page\n if (\n e !== null &&\n e.detail.scrollTop + e.detail.clientHeight >= e.detail.scrollHeight\n ) {\n NotificationsState.getNotifications();\n }\n }\n\n manageFilterVisibility(e: Event) {\n const path = e.composedPath();\n if (\n this.showFilters &&\n !path.includes(this.groupFilters) &&\n !path.includes(this.groupFiltersButton)\n ) {\n this.showFilters = false;\n }\n if (\n this.showDateFilters &&\n !path.includes(this.dateFilters) &&\n !path.includes(this.dateFiltersButton)\n ) {\n this.showDateFilters = false;\n }\n }\n\n render() {\n return html`\n <notification-tooltip></notification-tooltip>\n <div class=\"relative\">\n <ix-icon-button class=\"active-icon\" @click=${() => this.toggleDrawer()}>\n <slot name=\"icon\" slot=\"default\"></slot>\n </ix-icon-button>\n ${this.renderUnReadCountText()}\n </div>\n <confirmation-dialog\n ?open=${this.showMarkAllReadConfirmation}\n @confirm-dialog-closed=${() => {\n this.showMarkAllReadConfirmation = false;\n }}\n @on-confirm-selection=${this.confirmedMarkAllRead}\n textMessage=\"Are you sure you want to mark all notifications as read?\"\n >\n </confirmation-dialog>\n <ix-drawer\n ?isVisible=${this.showDrawer}\n .onClosed=${() => this.toggleDrawer()}\n animate-vertical\n hide-close\n @on-content-scroll=${this.handleContentScroll}\n @click=${this.manageFilterVisibility}\n >\n <div class=\"flex flex-row justify-between grow py-2\" slot=\"header\">\n <h2 class=\"grow items-center notification-header\">Notifications</h2>\n <div class=\"flex flex-row justify-end grow items-center options\">\n <ix-icon-button\n @click=${this.markAllread}\n @mouseover=${(e: any) => handleMouseOver(e, 'Mark All Read')}\n @mouseout=${handleMouseOut}\n icon=\"markunread_mailbox\"\n class=\"${NotificationsState.unreadNotificationCount <= 0\n ? 'inactive-icon'\n : 'active-icon'}\"\n .disabled=\"${NotificationsState.unreadNotificationCount <= 0}\"\n filledIcon=\"true\"\n ></ix-icon-button>\n <ix-icon-button\n @click=${this.toggleGroupView}\n @mouseover=${(e: any) => handleMouseOver(e, 'Sort by Type')}\n @mouseout=${handleMouseOut}\n class=\"active-icon\"\n label=\"Sort by Type\"\n >\n <ix-icon slot=\"default\"\n >${this.showGroupedView ? sortCheck : 'sort'}</ix-icon\n >\n </ix-icon-button>\n <ix-icon-button\n @click=${this.displayFilters}\n @mouseover=${(e: any) => handleMouseOver(e, 'Filter by Type')}\n @mouseout=${handleMouseOut}\n class=\"active-icon\"\n id=\"group-filter-button\"\n label=\"Filter by Type\"\n >\n <ix-icon slot=\"default\"> ${viewList} </ix-icon>\n </ix-icon-button>\n <div\n class=\"filter-dropdown-content ${this.showFilters\n ? 'active z-50'\n : ''}\"\n >\n <group-filters></group-filters>\n </div>\n <ix-icon-button\n @click=${this.displayDateFilters}\n @mouseover=${(e: any) => handleMouseOver(e, 'Filter by Date')}\n @mouseout=${handleMouseOut}\n icon=\"date_range\"\n class=\"active-icon\"\n filledIcon=\"true\"\n id=\"date-filters-button\"\n label=\"Filter by Date\"\n ></ix-icon-button>\n <div\n class=\"datefilter-dropdown-content ${this.showDateFilters\n ? 'active z-50'\n : ''}\"\n @on-selection=${this.handleCloseClick}\n >\n <date-filters></date-filters>\n </div>\n </div>\n </div>\n <div slot=\"content\">\n ${this.showGroupedView\n ? this.renderGroupedView()\n : this.renderDefaultView()}\n </div>\n </ix-drawer>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"IxNotifications.js","sourceRoot":"","sources":["../src/IxNotifications.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { differenceInDays, differenceInHours } from 'date-fns';\nimport {\n plannedMaintenance,\n viewList,\n dcim,\n sortCheck,\n} from './assets/iconset.js';\nimport { TWStyles } from './tw.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport '@digital-realty/ix-drawer/ix-drawer.js';\nimport '@digital-realty/ix-icon';\nimport '@material/web/icon/icon.js';\nimport { NotificationsState } from './state/NotificationState.js';\nimport { ApiCallResult, Notification } from './models/notification.js';\nimport {\n ConfirmationDialogEventDetail,\n FilterDialogEventDetail,\n} from './constants/notification-types.js';\nimport {\n ApiCallState,\n NotificationGroups,\n NotificationStatus,\n} from './constants/notifications.js';\nimport './components/notifications/notification-item.js';\nimport './components/notifications/grouped-item.js';\nimport './components/notifications/group-filters.js';\nimport './components/notifications/date-filters.js';\nimport './components/notifications/confirmation-dialog.js';\nimport { NotificationsStyle } from './styles/notifications-style.js';\nimport './components/notifications/notification-tooltip.js';\n\nexport class IxNotifications extends MobxLitElement {\n static styles = [TWStyles, NotificationsStyle];\n\n @query('group-filters') groupFilters!: HTMLElement;\n\n @query('ix-icon-button#group-filter-button') groupFiltersButton!: HTMLElement;\n\n @query('date-filters') dateFilters!: HTMLElement;\n\n @query('ix-icon-button#date-filters-button') dateFiltersButton!: HTMLElement;\n\n @state() private showGroupedView = false;\n\n @state() private showFilters = false;\n\n @state() private showDateFilters = false;\n\n @state() private showMarkAllReadConfirmation = false;\n\n @property({ type: String }) baseApiUrl = '';\n\n @property({ type: String }) localStorageKey = '';\n\n async firstUpdated() {\n // Construct ApiClient form baseApiUrl and localStorageKey\n NotificationsState.baseApiUrl = this.baseApiUrl;\n NotificationsState.localStorageKey = this.localStorageKey;\n NotificationsState.ConstructApiClient();\n }\n\n connectedCallback() {\n super.connectedCallback();\n window.addEventListener(\n 'account-switched',\n NotificationsState.NewApiClient\n );\n window.addEventListener('beforeunload', this.handleOnbeforeunload);\n }\n\n disconnectedCallback() {\n window.removeEventListener(\n 'account-switched',\n NotificationsState.NewApiClient\n );\n window.removeEventListener('beforeunload', this.handleOnbeforeunload);\n super.disconnectedCallback();\n }\n\n // Handle browser refresh event\n // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars\n handleOnbeforeunload(event: any) {\n NotificationsState.clearStoredNotificationsData();\n }\n\n toggleDrawer() {\n NotificationsState.showDrawer = !NotificationsState.showDrawer;\n if (!NotificationsState.showDrawer) {\n this.showFilters = false;\n this.showDateFilters = false;\n }\n }\n\n /* eslint-disable-next-line */\n renderUnReadCountText() {\n if (NotificationsState.unreadNotificationCount <= 0) {\n return html`${nothing}`;\n }\n\n let unreadCountText = '';\n if (NotificationsState.unreadNotificationCount > 99) {\n unreadCountText = '99+';\n } else {\n unreadCountText = NotificationsState.unreadNotificationCount.toString();\n }\n\n return html` <div\n class=\"unread rounded-full text-center text-white text-sm absolute icon-position -start-0\"\n >\n ${unreadCountText}\n </div>`;\n }\n\n markAllread() {\n if (NotificationsState.unreadNotificationCount > 0) {\n this.showMarkAllReadConfirmation = true;\n }\n }\n\n private confirmedMarkAllRead(e: CustomEvent<ConfirmationDialogEventDetail>) {\n // Mark All read if Confirmed True\n if (e.detail.returnValue) {\n const filterNotification = this.applyNotificationFilters();\n const unreadItems = filterNotification?.filter(\n item => item.status === NotificationStatus.UNREAD\n );\n\n if (unreadItems.length > 0) {\n let allResultSuccesful = true;\n\n filterNotification?.forEach(item => {\n NotificationsState.setNotificationReadStatus(item.id).then(\n (result: any) => {\n if (allResultSuccesful) allResultSuccesful = result;\n }\n );\n });\n\n const apiResult = {\n State:\n allResultSuccesful === true\n ? ApiCallState.SUCCESS\n : ApiCallState.ERROR,\n Message:\n allResultSuccesful === true\n ? 'Successfully marked all the notificaions as read'\n : 'Error while marking the notifications read, Please try again',\n } as ApiCallResult;\n\n this.showResultMessage(apiResult, unreadItems[0].id);\n\n this.renderUnReadCountText();\n\n this.requestUpdate();\n }\n }\n\n this.showMarkAllReadConfirmation = false;\n }\n\n // eslint-disable-next-line class-methods-use-this\n private showResultMessage(result: ApiCallResult, id: string) {\n window.dispatchEvent(\n new CustomEvent('add-toast', {\n detail: {\n id,\n content: html` <ix-message-toast\n toastId=${id}\n .TMessageToast=${result.State.toLowerCase()}\n forceClose\n >\n ${result.Message}\n </ix-message-toast>`,\n autoClose: 3000,\n durationOut: 3000,\n vertical: 'bottom',\n horizontal: 'center',\n animated: true,\n above: false,\n },\n })\n );\n }\n\n toggleGroupView() {\n this.showGroupedView = !this.showGroupedView;\n }\n\n displayFilters() {\n this.showFilters = !this.showFilters;\n }\n\n /* eslint-disable-next-line */\n applyNotificationFilters() {\n const filteredNotifications = NotificationsState.notifications?.filter(\n (notification: Notification) =>\n (notification.resourceType === NotificationGroups.PLANNED_MAINTENANCE &&\n NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE ===\n true) ||\n (notification.resourceType === NotificationGroups.SERVICE_TICKETS &&\n NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS ===\n true) ||\n (notification.resourceType === NotificationGroups.DCIM_ALERTS &&\n NotificationsState.notificationFilters.SHOW_DCIM_ALERTS === true) ||\n notification.resourceType === NotificationGroups.INCIDENTS\n ); // Always display incidents\n\n // both dates are defined, search within the window\n if (\n NotificationsState.dateFilters.FROM_DATE !== undefined &&\n NotificationsState.dateFilters.TO_DATE !== undefined\n )\n return filteredNotifications.filter(\n notification =>\n differenceInHours(\n new Date(notification.createdAt),\n NotificationsState.dateFilters.FROM_DATE!\n ) >= 0 &&\n differenceInDays(\n new Date(notification.createdAt),\n NotificationsState.dateFilters.TO_DATE!\n ) <= 0\n );\n\n // FROM_DATE is defined, TO_DATE is undefined, return notifications after FROM_DATE\n if (\n NotificationsState.dateFilters.FROM_DATE !== undefined &&\n NotificationsState.dateFilters.TO_DATE === undefined\n )\n return filteredNotifications.filter(\n notification =>\n differenceInHours(\n new Date(notification.createdAt),\n NotificationsState.dateFilters.FROM_DATE!\n ) >= 0\n );\n\n // TO_DATE is defined, FROM_DATE is undefined, return notifications before TO_DATE\n if (\n NotificationsState.dateFilters.FROM_DATE === undefined &&\n NotificationsState.dateFilters.TO_DATE !== undefined\n )\n return filteredNotifications.filter(\n notification =>\n differenceInDays(\n new Date(notification.createdAt),\n NotificationsState.dateFilters.TO_DATE!\n ) <= 0\n );\n\n return filteredNotifications;\n }\n\n displayDateFilters() {\n this.showDateFilters = !this.showDateFilters;\n }\n\n renderGroupedView() {\n const filteredNotifications = this.applyNotificationFilters();\n return html`<div style=\"margin:0px\">\n <grouped-item\n groupTitle=\"Planned Site Maintenance\"\n groupIcon=\"${plannedMaintenance.strings[0]}\"\n .childItems=${filteredNotifications?.filter(\n item => item.resourceType === NotificationGroups.PLANNED_MAINTENANCE\n )}\n ></grouped-item>\n <grouped-item\n groupTitle=\"Emergency Repairs\"\n groupIcon=\"report\"\n .childItems=${filteredNotifications?.filter(\n item => item.resourceType === NotificationGroups.INCIDENTS\n )}\n ></grouped-item>\n <grouped-item\n groupTitle=\"Service Ticket Updates\"\n groupIcon=\"sync_saved_locally\"\n .childItems=${filteredNotifications?.filter(\n item => item.resourceType === NotificationGroups.SERVICE_TICKETS\n )}\n ></grouped-item>\n <grouped-item\n groupTitle=${NotificationGroups.DCIM_ALERTS}\n groupIcon=\"${dcim.strings[0]}\"\n .childItems=${filteredNotifications?.filter(\n item => item.resourceType === NotificationGroups.DCIM_ALERTS\n )}\n ></grouped-item>\n </div>`;\n }\n\n renderDefaultView() {\n const filterNotification = this.applyNotificationFilters();\n\n const filterTodayItems = filterNotification.filter(\n notification => differenceInDays(notification.createdAt, new Date()) === 0\n );\n\n const filterEarlierItems = filterNotification.filter(\n notification => differenceInDays(notification.createdAt, new Date()) !== 0\n );\n\n if (filterNotification?.length! > 0) {\n return html` <h3 class=\"grow\">Today</h3>\n <div class=\"m-0 p-0\">\n ${filterTodayItems.length > 0\n ? filterTodayItems?.map(\n item => html`<notification-item\n .notification=${item}\n ?disabled=${item.resourceType ===\n NotificationGroups.INCIDENTS}\n >\n </notification-item> `\n )\n : this.renderNoResult()}\n </div>\n <h3 class=\"grow\">Earlier</h3>\n <div>\n ${filterEarlierItems.length > 0\n ? filterEarlierItems?.map(\n item => html`<notification-item\n .notification=${item}\n ?disabled=${item.resourceType ===\n NotificationGroups.INCIDENTS}\n >\n </notification-item> `\n )\n : this.renderNoResult()}\n </div>`;\n }\n\n return html`<p class=\"empty\"><strong>No notifications yet.</strong></p>`;\n }\n\n /* eslint-disable-next-line */\n renderNoResult() {\n return html`<p class=\"empty\"><strong>No notifications yet.</strong></p>`;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n handleCloseClick(_e: CustomEvent<FilterDialogEventDetail>) {\n this.showDateFilters = false;\n this.showFilters = false;\n }\n\n // eslint-disable-next-line\n handleContentScroll(e: CustomEvent) {\n // when scrollbar at the end, retrieve next page\n if (\n e !== null &&\n e.detail.scrollTop + e.detail.clientHeight >= e.detail.scrollHeight\n ) {\n NotificationsState.getNotifications();\n }\n }\n\n manageFilterVisibility(e: Event) {\n const path = e.composedPath();\n if (\n this.showFilters &&\n !path.includes(this.groupFilters) &&\n !path.includes(this.groupFiltersButton)\n ) {\n this.showFilters = false;\n }\n if (\n this.showDateFilters &&\n !path.includes(this.dateFilters) &&\n !path.includes(this.dateFiltersButton)\n ) {\n this.showDateFilters = false;\n }\n }\n\n render() {\n return html`\n <notification-tooltip> </notification-tooltip>\n <div class=\"relative\">\n <ix-icon-button class=\"active-icon\" @click=${() => this.toggleDrawer()}>\n <slot name=\"icon\" slot=\"default\"></slot>\n </ix-icon-button>\n ${this.renderUnReadCountText()}\n </div>\n <confirmation-dialog\n ?open=${this.showMarkAllReadConfirmation}\n @confirm-dialog-closed=${() => {\n this.showMarkAllReadConfirmation = false;\n }}\n @on-confirm-selection=${this.confirmedMarkAllRead}\n textMessage=\"Are you sure you want to mark all notifications as read?\"\n >\n </confirmation-dialog>\n <ix-drawer\n ?isVisible=${NotificationsState.showDrawer}\n .onClosed=${() => this.toggleDrawer()}\n animate-vertical\n hide-close\n @on-content-scroll=${this.handleContentScroll}\n @click=${this.manageFilterVisibility}\n >\n <div class=\"flex flex-row justify-between grow py-2\" slot=\"header\">\n <h2 class=\"grow items-center notification-header\">Notifications</h2>\n <div class=\"flex flex-row justify-end grow items-center options\">\n <ix-icon-button\n @click=${this.markAllread}\n @mouseover=${(e: any) => {\n window.dispatchEvent(\n new CustomEvent('show-notification-tooltip', {\n detail: { label: 'Mark All Read', target: e.target },\n })\n );\n }}\n @mouseout=${() =>\n window.dispatchEvent(\n new CustomEvent('hide-notification-tooltip')\n )}\n icon=\"markunread_mailbox\"\n class=\"${NotificationsState.unreadNotificationCount <= 0\n ? 'inactive-icon'\n : 'active-icon'}\"\n .disabled=\"${NotificationsState.unreadNotificationCount <= 0}\"\n filledIcon=\"true\"\n ></ix-icon-button>\n <ix-icon-button\n @click=${this.toggleGroupView}\n @mouseover=${(e: any) => {\n window.dispatchEvent(\n new CustomEvent('show-notification-tooltip', {\n detail: { label: 'Sort by Type', target: e.target },\n })\n );\n }}\n @mouseout=${() =>\n window.dispatchEvent(\n new CustomEvent('hide-notification-tooltip')\n )}\n class=\"active-icon\"\n label=\"Sort by Type\"\n >\n <ix-icon slot=\"default\"\n >${this.showGroupedView ? sortCheck : 'sort'}</ix-icon\n >\n </ix-icon-button>\n <ix-icon-button\n @click=${this.displayFilters}\n @mouseover=${(e: any) => {\n window.dispatchEvent(\n new CustomEvent('show-notification-tooltip', {\n detail: { label: 'Filter by Type', target: e.target },\n })\n );\n }}\n @mouseout=${() =>\n window.dispatchEvent(\n new CustomEvent('hide-notification-tooltip')\n )}\n class=\"active-icon\"\n id=\"group-filter-button\"\n label=\"Filter by Type\"\n >\n <ix-icon slot=\"default\"> ${viewList} </ix-icon>\n </ix-icon-button>\n <div\n class=\"filter-dropdown-content ${this.showFilters\n ? 'active z-50'\n : ''}\"\n >\n <group-filters></group-filters>\n </div>\n <ix-icon-button\n @click=${this.displayDateFilters}\n @mouseover=${(e: any) => {\n window.dispatchEvent(\n new CustomEvent('show-notification-tooltip', {\n detail: { label: 'Filter by Date', target: e.target },\n })\n );\n }}\n @mouseout=${() =>\n window.dispatchEvent(\n new CustomEvent('hide-notification-tooltip')\n )}\n icon=\"date_range\"\n class=\"active-icon\"\n filledIcon=\"true\"\n id=\"date-filters-button\"\n label=\"Filter by Date\"\n ></ix-icon-button>\n <div\n class=\"datefilter-dropdown-content ${this.showDateFilters\n ? 'active z-50'\n : ''}\"\n @on-selection=${this.handleCloseClick}\n >\n <date-filters></date-filters>\n </div>\n </div>\n </div>\n <div slot=\"content\">\n ${this.showGroupedView\n ? this.renderGroupedView()\n : this.renderDefaultView()}\n </div>\n </ix-drawer>\n `;\n }\n}\n"]}
package/dist/components/notifications/group-filters.js CHANGED
@@ -47,7 +47,7 @@ let GroupFilters = class GroupFilters extends MobxLitElement {
47
47
  .SHOW_PLANNED_MAINTENANCE}
48
48
  @change=${this.onSwitchChange}
49
49
  ></ix-switch>
50
- <label class="pl-1">${NotificationGroups.PLANNED_MAINTENANCE}</label>
50
+ <label class="pl-1 whitespace-nowrap">Planned Site Maintenance</label>
51
51
  </div>
52
52
  </div>
53
53
  <div class="ix-switch-hover">
@@ -58,7 +58,7 @@ let GroupFilters = class GroupFilters extends MobxLitElement {
58
58
  .SHOW_SERVICE_TICKETS}
59
59
  @change=${this.onSwitchChange}
60
60
  ></ix-switch>
61
- <label class="pl-1">${NotificationGroups.SERVICE_TICKETS}</label>
61
+ <label class="pl-1 whitespace-nowrap">Service Ticket Updates</label>
62
62
  </div>
63
63
  </div>
64
64
  <div class="ix-switch-hover">
@@ -68,7 +68,9 @@ let GroupFilters = class GroupFilters extends MobxLitElement {
68
68
  selected=${NotificationsState.notificationFilters.SHOW_DCIM_ALERTS}
69
69
  @change=${this.onSwitchChange}
70
70
  ></ix-switch>
71
- <label class="pl-1">${NotificationGroups.DCIM_ALERTS}</label>
71
+ <label class="pl-1 whitespace-nowrap"
72
+ >${NotificationGroups.DCIM_ALERTS}</label
73
+ >
72
74
  </div>
73
75
  </div>
74
76
  </div>`;
package/dist/components/notifications/group-filters.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"group-filters.js","sourceRoot":"","sources":["../../../src/components/notifications/group-filters.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,wCAAwC,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAGlE,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,cAAc;IAC9C,MAAM,KAAK,MAAM;QACf,OAAO;YACL,kBAAkB;YAClB,QAAQ;YACR,GAAG,CAAA;;;;;;;;;;;;;;OAcF;SACF,CAAC;IACJ,CAAC;IAED,cAAc,CAAC,CAAQ;;QACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAa,CAAC;QAC/B,MAAM,SAAS,GAAG,MAAA,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,0CAAE,KAAK,CAAC;QAEhE,kBAAkB,CAAC,qBAAqB,CAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;QACrE,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;mBAII,kBAAkB,CAAC,mBAAmB;uBAClC,kBAAkB,CAAC,mBAAmB;aAC9C,wBAAwB;sBACjB,IAAI,CAAC,cAAc;;gCAET,kBAAkB,CAAC,mBAAmB;;;;;;mBAMnD,kBAAkB,CAAC,eAAe;uBAC9B,kBAAkB,CAAC,mBAAmB;aAC9C,oBAAoB;sBACb,IAAI,CAAC,cAAc;;gCAET,kBAAkB,CAAC,eAAe;;;;;;mBAM/C,kBAAkB,CAAC,WAAW;uBAC1B,kBAAkB,CAAC,mBAAmB,CAAC,gBAAgB;sBACxD,IAAI,CAAC,cAAc;;gCAET,kBAAkB,CAAC,WAAW;;;WAGnD,CAAC;IACV,CAAC;CACF,CAAA;AAnEY,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAmExB;SAnEY,YAAY","sourcesContent":["import { html, css } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-switch/ix-switch.js';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { NotificationGroups } from '../../constants/notifications.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\n\n@customElement('group-filters')\nexport class GroupFilters extends MobxLitElement {\n static get styles() {\n return [\n NotificationsStyle,\n TWStyles,\n css`\n :host {\n --md-switch-state-layer-size: 1rem;\n --md-switch-hover-handle-width: 1rem;\n --md-switch-hover-handle-height: 1rem;\n --md-switch-pressed-handle-width: 1rem;\n --md-switch-pressed-handle-height: 1rem;\n --md-switch-selected-handle-width: 1.3rem;\n --md-switch-selected-handle-height: 1.3rem;\n --md-switch-handle-width: 0.5rem;\n --md-switch-handle-height: 0.5rem;\n --md-switch-track-width: 2.5rem;\n --md-switch-track-height: 1rem;\n }\n `,\n ];\n }\n\n onSwitchChange(e: Event) {\n const target = e.target as any;\n const groupName = target.attributes.getNamedItem('name')?.value;\n\n NotificationsState.setNotificationFilter(groupName, target.selected);\n this.requestUpdate();\n }\n\n render() {\n return html` <div class=\"flex flex-col items-start py-2\">\n <div class=\"ix-switch-hover\">\n <div class=\"ix-switch-wrapper p-2\">\n <ix-switch\n name=${NotificationGroups.PLANNED_MAINTENANCE}\n selected=${NotificationsState.notificationFilters\n .SHOW_PLANNED_MAINTENANCE}\n @change=${this.onSwitchChange}\n ></ix-switch>\n <label class=\"pl-1\">${NotificationGroups.PLANNED_MAINTENANCE}</label>\n </div>\n </div>\n <div class=\"ix-switch-hover\">\n <div class=\"ix-switch-wrapper p-2\">\n <ix-switch\n name=${NotificationGroups.SERVICE_TICKETS}\n selected=${NotificationsState.notificationFilters\n .SHOW_SERVICE_TICKETS}\n @change=${this.onSwitchChange}\n ></ix-switch>\n <label class=\"pl-1\">${NotificationGroups.SERVICE_TICKETS}</label>\n </div>\n </div>\n <div class=\"ix-switch-hover\">\n <div class=\"ix-switch-wrapper p-2\">\n <ix-switch\n name=${NotificationGroups.DCIM_ALERTS}\n selected=${NotificationsState.notificationFilters.SHOW_DCIM_ALERTS}\n @change=${this.onSwitchChange}\n ></ix-switch>\n <label class=\"pl-1\">${NotificationGroups.DCIM_ALERTS}</label>\n </div>\n </div>\n </div>`;\n }\n}\n"]}
1
+ {"version":3,"file":"group-filters.js","sourceRoot":"","sources":["../../../src/components/notifications/group-filters.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,wCAAwC,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAGlE,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,cAAc;IAC9C,MAAM,KAAK,MAAM;QACf,OAAO;YACL,kBAAkB;YAClB,QAAQ;YACR,GAAG,CAAA;;;;;;;;;;;;;;OAcF;SACF,CAAC;IACJ,CAAC;IAED,cAAc,CAAC,CAAQ;;QACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAa,CAAC;QAC/B,MAAM,SAAS,GAAG,MAAA,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,0CAAE,KAAK,CAAC;QAEhE,kBAAkB,CAAC,qBAAqB,CAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;QACrE,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;mBAII,kBAAkB,CAAC,mBAAmB;uBAClC,kBAAkB,CAAC,mBAAmB;aAC9C,wBAAwB;sBACjB,IAAI,CAAC,cAAc;;;;;;;;mBAQtB,kBAAkB,CAAC,eAAe;uBAC9B,kBAAkB,CAAC,mBAAmB;aAC9C,oBAAoB;sBACb,IAAI,CAAC,cAAc;;;;;;;;mBAQtB,kBAAkB,CAAC,WAAW;uBAC1B,kBAAkB,CAAC,mBAAmB,CAAC,gBAAgB;sBACxD,IAAI,CAAC,cAAc;;;eAG1B,kBAAkB,CAAC,WAAW;;;;WAIlC,CAAC;IACV,CAAC;CACF,CAAA;AArEY,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAqExB;SArEY,YAAY","sourcesContent":["import { html, css } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-switch/ix-switch.js';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { NotificationGroups } from '../../constants/notifications.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\n\n@customElement('group-filters')\nexport class GroupFilters extends MobxLitElement {\n static get styles() {\n return [\n NotificationsStyle,\n TWStyles,\n css`\n :host {\n --md-switch-state-layer-size: 1rem;\n --md-switch-hover-handle-width: 1rem;\n --md-switch-hover-handle-height: 1rem;\n --md-switch-pressed-handle-width: 1rem;\n --md-switch-pressed-handle-height: 1rem;\n --md-switch-selected-handle-width: 1.3rem;\n --md-switch-selected-handle-height: 1.3rem;\n --md-switch-handle-width: 0.5rem;\n --md-switch-handle-height: 0.5rem;\n --md-switch-track-width: 2.5rem;\n --md-switch-track-height: 1rem;\n }\n `,\n ];\n }\n\n onSwitchChange(e: Event) {\n const target = e.target as any;\n const groupName = target.attributes.getNamedItem('name')?.value;\n\n NotificationsState.setNotificationFilter(groupName, target.selected);\n this.requestUpdate();\n }\n\n render() {\n return html` <div class=\"flex flex-col items-start py-2\">\n <div class=\"ix-switch-hover\">\n <div class=\"ix-switch-wrapper p-2\">\n <ix-switch\n name=${NotificationGroups.PLANNED_MAINTENANCE}\n selected=${NotificationsState.notificationFilters\n .SHOW_PLANNED_MAINTENANCE}\n @change=${this.onSwitchChange}\n ></ix-switch>\n <label class=\"pl-1 whitespace-nowrap\">Planned Site Maintenance</label>\n </div>\n </div>\n <div class=\"ix-switch-hover\">\n <div class=\"ix-switch-wrapper p-2\">\n <ix-switch\n name=${NotificationGroups.SERVICE_TICKETS}\n selected=${NotificationsState.notificationFilters\n .SHOW_SERVICE_TICKETS}\n @change=${this.onSwitchChange}\n ></ix-switch>\n <label class=\"pl-1 whitespace-nowrap\">Service Ticket Updates</label>\n </div>\n </div>\n <div class=\"ix-switch-hover\">\n <div class=\"ix-switch-wrapper p-2\">\n <ix-switch\n name=${NotificationGroups.DCIM_ALERTS}\n selected=${NotificationsState.notificationFilters.SHOW_DCIM_ALERTS}\n @change=${this.onSwitchChange}\n ></ix-switch>\n <label class=\"pl-1 whitespace-nowrap\"\n >${NotificationGroups.DCIM_ALERTS}</label\n >\n </div>\n </div>\n </div>`;\n }\n}\n"]}
package/dist/components/notifications/notification-item.js CHANGED
@@ -14,7 +14,6 @@ import './confirmation-dialog.js';
14
14
  import './view-item-dialog.js';
15
15
  import '@digital-realty/ix-toast/ix-message-toast.js';
16
16
  import { dcim, plannedMaintenance, trash } from '../../assets/iconset.js';
17
- import { handleMouseOver, handleMouseOut } from './notification-tooltip.js';
18
17
  let NotificationItem = class NotificationItem extends MobxLitElement {
19
18
  constructor() {
20
19
  super(...arguments);
@@ -198,10 +197,17 @@ let NotificationItem = class NotificationItem extends MobxLitElement {
198
197
  </div>
199
198
  <ix-icon-button
200
199
  @click=${this.deleteItem}
201
- @mouseover=${(e) => handleMouseOver(e, this.disabled
202
- ? 'Emergency Repair Notification cannot be removed'
203
- : 'Remove Notification')}
204
- @mouseout=${handleMouseOut}
200
+ @mouseover=${(e) => {
201
+ this.dispatchEvent(new CustomEvent('show-notification-tooltip', {
202
+ detail: {
203
+ label: this.disabled
204
+ ? 'Emergency Repair Notification cannot be removed'
205
+ : 'Remove Notification',
206
+ target: e.target,
207
+ },
208
+ }));
209
+ }}
210
+ @mouseout=${() => this.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}
205
211
  ?disabled=${this.disabled}
206
212
  >
207
213
  <ix-icon
package/dist/components/notifications/notification-item.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"notification-item.js","sourceRoot":"","sources":["../../../src/components/notifications/notification-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport { elementTheme } from '@digital-realty/theme';\nimport { format, formatDistance, differenceInHours } from 'date-fns';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { ApiCallResult, Notification } from '../../models/notification.js';\nimport {\n NotificationStatus,\n DefaultDateTimeFormat,\n NotificationGroups,\n} from '../../constants/notifications.js';\nimport { ConfirmationDialogEventDetail } from '../../constants/notification-types.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport './confirmation-dialog.js';\nimport './view-item-dialog.js';\nimport '@digital-realty/ix-toast/ix-message-toast.js';\nimport { dcim, plannedMaintenance, trash } from '../../assets/iconset.js';\nimport { handleMouseOver, handleMouseOut } from './notification-tooltip.js';\n\n@customElement('notification-item')\nexport class NotificationItem extends MobxLitElement {\n @property({ type: Boolean }) disabled = false;\n\n @property({ type: Object, attribute: false }) notification =\n {} as Notification;\n\n @state() private showModal = false;\n\n @state() private showDeleteConfirmation = false;\n\n static get styles() {\n return [\n NotificationsStyle,\n elementTheme,\n TWStyles,\n css`\n .notification-item-read h2 {\n font-family: 'Open Sans', sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.4px;\n text-align: left;\n }\n\n .notification-item-unread h2 {\n font-family: 'Open Sans', sans-serif;\n font-size: 12px;\n font-weight: 700;\n line-height: 16px;\n letter-spacing: 0.4px;\n text-align: left;\n }\n\n h3 {\n font-family: 'Open Sans', sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.4px;\n text-align: left;\n color: rgba(9, 34, 65, 0.6);\n padding: 0;\n }\n\n ix-icon {\n --ix-icon-font-size: 24px;\n --ix-icon-line-height: 24px;\n color: var(--md-sys-text-color-primary);\n }\n\n .notification-item-read > ix-icon:first-child,\n .notification-item-unread > ix-icon:first-child {\n margin-right: 12px;\n }\n `,\n ];\n }\n\n displayItem() {\n if (this.notification.status === NotificationStatus.UNREAD) {\n NotificationsState.setNotificationReadStatus(this.notification.id);\n }\n this.showModal = true;\n }\n\n deleteItem() {\n if (!this.disabled) {\n this.showDeleteConfirmation = true;\n }\n }\n\n private confirmedDelete(e: CustomEvent<ConfirmationDialogEventDetail>) {\n // DELETE IF CONFIRMED TRUE\n if (e.detail.returnValue) {\n NotificationsState.setNotificationDeleted(this.notification.id).then(\n (result: ApiCallResult) => {\n this.showDeleteResultMessage(result, this.notification.id);\n }\n );\n }\n this.showDeleteConfirmation = false;\n }\n\n // eslint-disable-next-line class-methods-use-this\n private showDeleteResultMessage(result: ApiCallResult, id: string) {\n window.dispatchEvent(\n new CustomEvent('add-toast', {\n detail: {\n id,\n content: html` <ix-message-toast\n toastId=${id}\n .TMessageToast=${result.State.toLowerCase()}\n forceClose\n >\n ${result.Message}\n </ix-message-toast>`,\n autoClose: 2000,\n durationOut: 2000,\n vertical: 'bottom',\n horizontal: 'center',\n animated: true,\n above: false,\n },\n })\n );\n }\n\n calculateDuration() {\n if (this.notification.createdAt !== undefined) {\n if (differenceInHours(new Date(), this.notification.createdAt) < 24)\n return formatDistance(this.notification.createdAt, new Date(), {\n addSuffix: true,\n });\n return format(this.notification.createdAt, DefaultDateTimeFormat);\n }\n return 'N/A';\n }\n\n getNotificationIcon() {\n switch (this.notification.resourceType) {\n case NotificationGroups.PLANNED_MAINTENANCE:\n return plannedMaintenance;\n case NotificationGroups.SERVICE_TICKETS:\n return 'sync_saved_locally';\n case NotificationGroups.INCIDENTS:\n return 'report';\n case NotificationGroups.DCIM_ALERTS:\n return dcim;\n default:\n return 'sync_saved_locally';\n }\n }\n\n getNotificationTitle() {\n switch (this.notification.resourceType) {\n case NotificationGroups.PLANNED_MAINTENANCE:\n return 'Planned Site Maintenance';\n case NotificationGroups.SERVICE_TICKETS:\n return `${this.notification?.subGroup} Service Ticket Update`;\n case NotificationGroups.INCIDENTS:\n return 'Emergency Repair';\n case NotificationGroups.DCIM_ALERTS:\n return 'DCIM Alert';\n default:\n return 'sync_saved_locally';\n }\n }\n\n /* eslint-disable lit-a11y/click-events-have-key-events */\n render() {\n return html`\n <div class=\"relative bg-white-gp notification-item\">\n <div\n class=${this.notification?.status === 'unread'\n ? 'notification-item-unread'\n : 'notification-item-read'}\n >\n <ix-icon\n icon=${this.getNotificationIcon()}\n class=${this.notification?.status === 'unread'\n ? 'active-icon'\n : 'inactive-icon'}\n @click=${this.displayItem}\n >${this.getNotificationIcon()}\n </ix-icon>\n <div class=\"flex flex-col grow\" @click=${this.displayItem}>\n <div class=\"grow text-base\">\n <h2>${this.getNotificationTitle()}</h2>\n </div>\n <div class=\"grow text-xs\">\n <h3>${this.calculateDuration()}</h3>\n </div>\n </div>\n <div>\n <view-item-dialog\n ?open=${this.showModal}\n .notification=${this.notification}\n @view-item-dialog-closed=${() => {\n this.showModal = false;\n }}\n >\n </view-item-dialog>\n <confirmation-dialog\n ?open=${this.showDeleteConfirmation}\n @on-confirm-selection=${this.confirmedDelete}\n @confirm-dialog-closed=${() => {\n this.showModal = false;\n }}\n textMessage=\"Are you sure you want to delete this notification?\"\n >\n </confirmation-dialog>\n </div>\n <ix-icon-button\n @click=${this.deleteItem}\n @mouseover=${(e: any) =>\n handleMouseOver(\n e,\n this.disabled\n ? 'Emergency Repair Notification cannot be removed'\n : 'Remove Notification'\n )}\n @mouseout=${handleMouseOut}\n ?disabled=${this.disabled}\n >\n <ix-icon\n slot=\"default\"\n class=\"${this.disabled ? 'inactive-icon' : 'destructive-icon'}\"\n >\n ${trash}\n </ix-icon>\n </ix-icon-button>\n </div>\n </div>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"notification-item.js","sourceRoot":"","sources":["../../../src/components/notifications/notification-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,kDAAkD,CAAC;AAC1D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,0BAA0B,CAAC;AAClC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,8CAA8C,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGnE,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;IAA7C;;QACwB,aAAQ,GAAG,KAAK,CAAC;QAEA,iBAAY,GACxD,EAAkB,CAAC;QAEJ,cAAS,GAAG,KAAK,CAAC;QAElB,2BAAsB,GAAG,KAAK,CAAC;IAsNlD,CAAC;IApNC,MAAM,KAAK,MAAM;QACf,OAAO;YACL,kBAAkB;YAClB,YAAY;YACZ,QAAQ;YACR,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAwCF;SACF,CAAC;IACJ,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,kBAAkB,CAAC,MAAM,EAAE;YAC1D,kBAAkB,CAAC,yBAAyB,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;SACpE;QACD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;SACpC;IACH,CAAC;IAEO,eAAe,CAAC,CAA6C;QACnE,2BAA2B;QAC3B,IAAI,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE;YACxB,kBAAkB,CAAC,sBAAsB,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,CAClE,CAAC,MAAqB,EAAE,EAAE;gBACxB,IAAI,CAAC,uBAAuB,CAAC,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;YAC7D,CAAC,CACF,CAAC;SACH;QACD,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;IACtC,CAAC;IAED,kDAAkD;IAC1C,uBAAuB,CAAC,MAAqB,EAAE,EAAU;QAC/D,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,WAAW,EAAE;YAC3B,MAAM,EAAE;gBACN,EAAE;gBACF,OAAO,EAAE,IAAI,CAAA;sBACD,EAAE;6BACK,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE;;;cAGzC,MAAM,CAAC,OAAO;8BACE;gBACpB,SAAS,EAAE,IAAI;gBACf,WAAW,EAAE,IAAI;gBACjB,QAAQ,EAAE,QAAQ;gBAClB,UAAU,EAAE,QAAQ;gBACpB,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,KAAK;aACb;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,KAAK,SAAS,EAAE;YAC7C,IAAI,iBAAiB,CAAC,IAAI,IAAI,EAAE,EAAE,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,EAAE;gBACjE,OAAO,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,IAAI,EAAE,EAAE;oBAC7D,SAAS,EAAE,IAAI;iBAChB,CAAC,CAAC;YACL,OAAO,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,qBAAqB,CAAC,CAAC;SACnE;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,mBAAmB;QACjB,QAAQ,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE;YACtC,KAAK,kBAAkB,CAAC,mBAAmB;gBACzC,OAAO,kBAAkB,CAAC;YAC5B,KAAK,kBAAkB,CAAC,eAAe;gBACrC,OAAO,oBAAoB,CAAC;YAC9B,KAAK,kBAAkB,CAAC,SAAS;gBAC/B,OAAO,QAAQ,CAAC;YAClB,KAAK,kBAAkB,CAAC,WAAW;gBACjC,OAAO,IAAI,CAAC;YACd;gBACE,OAAO,oBAAoB,CAAC;SAC/B;IACH,CAAC;IAED,oBAAoB;;QAClB,QAAQ,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE;YACtC,KAAK,kBAAkB,CAAC,mBAAmB;gBACzC,OAAO,0BAA0B,CAAC;YACpC,KAAK,kBAAkB,CAAC,eAAe;gBACrC,OAAO,GAAG,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,wBAAwB,CAAC;YAChE,KAAK,kBAAkB,CAAC,SAAS;gBAC/B,OAAO,kBAAkB,CAAC;YAC5B,KAAK,kBAAkB,CAAC,WAAW;gBACjC,OAAO,YAAY,CAAC;YACtB;gBACE,OAAO,oBAAoB,CAAC;SAC/B;IACH,CAAC;IAED,0DAA0D;IAC1D,MAAM;;QACJ,OAAO,IAAI,CAAA;;;kBAGG,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,MAAK,QAAQ;YAC5C,CAAC,CAAC,0BAA0B;YAC5B,CAAC,CAAC,wBAAwB;;;mBAGnB,IAAI,CAAC,mBAAmB,EAAE;oBACzB,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,MAAK,QAAQ;YAC5C,CAAC,CAAC,aAAa;YACf,CAAC,CAAC,eAAe;qBACV,IAAI,CAAC,WAAW;eACtB,IAAI,CAAC,mBAAmB,EAAE;;mDAEU,IAAI,CAAC,WAAW;;oBAE/C,IAAI,CAAC,oBAAoB,EAAE;;;oBAG3B,IAAI,CAAC,iBAAiB,EAAE;;;;;sBAKtB,IAAI,CAAC,SAAS;8BACN,IAAI,CAAC,YAAY;yCACN,GAAG,EAAE;YAC9B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;;;;sBAIO,IAAI,CAAC,sBAAsB;sCACX,IAAI,CAAC,eAAe;uCACnB,GAAG,EAAE;YAC5B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;;;;;;qBAMM,IAAI,CAAC,UAAU;yBACX,CAAC,CAAM,EAAE,EAAE;YACtB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,2BAA2B,EAAE;gBAC3C,MAAM,EAAE;oBACN,KAAK,EAAE,IAAI,CAAC,QAAQ;wBAClB,CAAC,CAAC,iDAAiD;wBACnD,CAAC,CAAC,qBAAqB;oBACzB,MAAM,EAAE,CAAC,CAAC,MAAM;iBACjB;aACF,CAAC,CACH,CAAC;QACJ,CAAC;wBACW,GAAG,EAAE,CACf,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,2BAA2B,CAAC,CAAC;wBACtD,IAAI,CAAC,QAAQ;;;;uBAId,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB;;gBAE3D,KAAK;;;;;KAKhB,CAAC;IACJ,CAAC;CACF,CAAA;AA7N8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAkB;AAEA;IAA7C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;sDACxB;AAEZ;IAAR,KAAK,EAAE;mDAA2B;AAE1B;IAAR,KAAK,EAAE;gEAAwC;AARrC,gBAAgB;IAD5B,aAAa,CAAC,mBAAmB,CAAC;GACtB,gBAAgB,CA8N5B;SA9NY,gBAAgB","sourcesContent":["import { html, css } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport { elementTheme } from '@digital-realty/theme';\nimport { format, formatDistance, differenceInHours } from 'date-fns';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { ApiCallResult, Notification } from '../../models/notification.js';\nimport {\n NotificationStatus,\n DefaultDateTimeFormat,\n NotificationGroups,\n} from '../../constants/notifications.js';\nimport { ConfirmationDialogEventDetail } from '../../constants/notification-types.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport './confirmation-dialog.js';\nimport './view-item-dialog.js';\nimport '@digital-realty/ix-toast/ix-message-toast.js';\nimport { dcim, plannedMaintenance, trash } from '../../assets/iconset.js';\n\n@customElement('notification-item')\nexport class NotificationItem extends MobxLitElement {\n @property({ type: Boolean }) disabled = false;\n\n @property({ type: Object, attribute: false }) notification =\n {} as Notification;\n\n @state() private showModal = false;\n\n @state() private showDeleteConfirmation = false;\n\n static get styles() {\n return [\n NotificationsStyle,\n elementTheme,\n TWStyles,\n css`\n .notification-item-read h2 {\n font-family: 'Open Sans', sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.4px;\n text-align: left;\n }\n\n .notification-item-unread h2 {\n font-family: 'Open Sans', sans-serif;\n font-size: 12px;\n font-weight: 700;\n line-height: 16px;\n letter-spacing: 0.4px;\n text-align: left;\n }\n\n h3 {\n font-family: 'Open Sans', sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.4px;\n text-align: left;\n color: rgba(9, 34, 65, 0.6);\n padding: 0;\n }\n\n ix-icon {\n --ix-icon-font-size: 24px;\n --ix-icon-line-height: 24px;\n color: var(--md-sys-text-color-primary);\n }\n\n .notification-item-read > ix-icon:first-child,\n .notification-item-unread > ix-icon:first-child {\n margin-right: 12px;\n }\n `,\n ];\n }\n\n displayItem() {\n if (this.notification.status === NotificationStatus.UNREAD) {\n NotificationsState.setNotificationReadStatus(this.notification.id);\n }\n this.showModal = true;\n }\n\n deleteItem() {\n if (!this.disabled) {\n this.showDeleteConfirmation = true;\n }\n }\n\n private confirmedDelete(e: CustomEvent<ConfirmationDialogEventDetail>) {\n // DELETE IF CONFIRMED TRUE\n if (e.detail.returnValue) {\n NotificationsState.setNotificationDeleted(this.notification.id).then(\n (result: ApiCallResult) => {\n this.showDeleteResultMessage(result, this.notification.id);\n }\n );\n }\n this.showDeleteConfirmation = false;\n }\n\n // eslint-disable-next-line class-methods-use-this\n private showDeleteResultMessage(result: ApiCallResult, id: string) {\n window.dispatchEvent(\n new CustomEvent('add-toast', {\n detail: {\n id,\n content: html` <ix-message-toast\n toastId=${id}\n .TMessageToast=${result.State.toLowerCase()}\n forceClose\n >\n ${result.Message}\n </ix-message-toast>`,\n autoClose: 2000,\n durationOut: 2000,\n vertical: 'bottom',\n horizontal: 'center',\n animated: true,\n above: false,\n },\n })\n );\n }\n\n calculateDuration() {\n if (this.notification.createdAt !== undefined) {\n if (differenceInHours(new Date(), this.notification.createdAt) < 24)\n return formatDistance(this.notification.createdAt, new Date(), {\n addSuffix: true,\n });\n return format(this.notification.createdAt, DefaultDateTimeFormat);\n }\n return 'N/A';\n }\n\n getNotificationIcon() {\n switch (this.notification.resourceType) {\n case NotificationGroups.PLANNED_MAINTENANCE:\n return plannedMaintenance;\n case NotificationGroups.SERVICE_TICKETS:\n return 'sync_saved_locally';\n case NotificationGroups.INCIDENTS:\n return 'report';\n case NotificationGroups.DCIM_ALERTS:\n return dcim;\n default:\n return 'sync_saved_locally';\n }\n }\n\n getNotificationTitle() {\n switch (this.notification.resourceType) {\n case NotificationGroups.PLANNED_MAINTENANCE:\n return 'Planned Site Maintenance';\n case NotificationGroups.SERVICE_TICKETS:\n return `${this.notification?.subGroup} Service Ticket Update`;\n case NotificationGroups.INCIDENTS:\n return 'Emergency Repair';\n case NotificationGroups.DCIM_ALERTS:\n return 'DCIM Alert';\n default:\n return 'sync_saved_locally';\n }\n }\n\n /* eslint-disable lit-a11y/click-events-have-key-events */\n render() {\n return html`\n <div class=\"relative bg-white-gp notification-item\">\n <div\n class=${this.notification?.status === 'unread'\n ? 'notification-item-unread'\n : 'notification-item-read'}\n >\n <ix-icon\n icon=${this.getNotificationIcon()}\n class=${this.notification?.status === 'unread'\n ? 'active-icon'\n : 'inactive-icon'}\n @click=${this.displayItem}\n >${this.getNotificationIcon()}\n </ix-icon>\n <div class=\"flex flex-col grow\" @click=${this.displayItem}>\n <div class=\"grow text-base\">\n <h2>${this.getNotificationTitle()}</h2>\n </div>\n <div class=\"grow text-xs\">\n <h3>${this.calculateDuration()}</h3>\n </div>\n </div>\n <div>\n <view-item-dialog\n ?open=${this.showModal}\n .notification=${this.notification}\n @view-item-dialog-closed=${() => {\n this.showModal = false;\n }}\n >\n </view-item-dialog>\n <confirmation-dialog\n ?open=${this.showDeleteConfirmation}\n @on-confirm-selection=${this.confirmedDelete}\n @confirm-dialog-closed=${() => {\n this.showModal = false;\n }}\n textMessage=\"Are you sure you want to delete this notification?\"\n >\n </confirmation-dialog>\n </div>\n <ix-icon-button\n @click=${this.deleteItem}\n @mouseover=${(e: any) => {\n this.dispatchEvent(\n new CustomEvent('show-notification-tooltip', {\n detail: {\n label: this.disabled\n ? 'Emergency Repair Notification cannot be removed'\n : 'Remove Notification',\n target: e.target,\n },\n })\n );\n }}\n @mouseout=${() =>\n this.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}\n ?disabled=${this.disabled}\n >\n <ix-icon\n slot=\"default\"\n class=\"${this.disabled ? 'inactive-icon' : 'destructive-icon'}\"\n >\n ${trash}\n </ix-icon>\n </ix-icon-button>\n </div>\n </div>\n `;\n }\n}\n"]}
package/dist/components/notifications/notification-tooltip.d.ts CHANGED
@@ -2,8 +2,14 @@ import { MobxLitElement } from '@adobe/lit-mobx';
2
2
  import '@digital-realty/ix-icon-button/ix-icon-button.js';
3
3
  export declare class NotificationTooltip extends MobxLitElement {
4
4
  static get styles(): import("lit").CSSResult[];
5
+ notificationTooltip: HTMLDivElement;
6
+ isVisible: boolean;
7
+ label: string;
8
+ hoveredElement: HTMLElement | undefined;
9
+ connectedCallback(): void;
10
+ disconnectedCallback(): void;
11
+ configureNotificationTooltip: (e: any) => void;
12
+ hideNotificationTooltip: () => void;
13
+ updated(changedProperties: Map<string, any>): void;
5
14
  render(): import("lit").TemplateResult<1>;
6
15
  }
7
- declare function handleMouseOut(): void;
8
- declare function handleMouseOver(event: any, label: string): void;
9
- export { handleMouseOut, handleMouseOver };
package/dist/components/notifications/notification-tooltip.js CHANGED
@@ -1,53 +1,84 @@
1
1
  import { __decorate } from "tslib";
2
+ /* eslint-disable wc/guard-super-call */
2
3
  import { html } from 'lit';
3
4
  import { MobxLitElement } from '@adobe/lit-mobx';
4
- import { customElement } from 'lit/decorators.js';
5
+ import { query, customElement, property, state } from 'lit/decorators.js';
5
6
  import '@digital-realty/ix-icon-button/ix-icon-button.js';
6
7
  import { baseTheme } from '@digital-realty/theme';
7
8
  import { computePosition } from '@floating-ui/dom';
9
+ import { classMap } from 'lit/directives/class-map.js';
8
10
  import { TWStyles } from '../../tw.js';
9
11
  import { NotificationsStyle } from '../../styles/notifications-style.js';
10
12
  // Tooltip code, to be replaced with a generic component
11
13
  let NotificationTooltip = class NotificationTooltip extends MobxLitElement {
14
+ constructor() {
15
+ super(...arguments);
16
+ this.isVisible = false;
17
+ this.label = '';
18
+ this.hoveredElement = undefined;
19
+ this.configureNotificationTooltip = (e) => {
20
+ const { label, target } = e.detail;
21
+ this.hoveredElement = target;
22
+ this.label = label;
23
+ this.isVisible = true;
24
+ };
25
+ this.hideNotificationTooltip = () => {
26
+ this.isVisible = false;
27
+ this.hoveredElement = undefined;
28
+ this.label = '';
29
+ };
30
+ }
12
31
  static get styles() {
13
32
  return [NotificationsStyle, baseTheme, TWStyles];
14
33
  }
34
+ connectedCallback() {
35
+ super.connectedCallback();
36
+ window.addEventListener('show-notification-tooltip', this.configureNotificationTooltip);
37
+ window.addEventListener('hide-notification-tooltip', this.hideNotificationTooltip);
38
+ }
39
+ disconnectedCallback() {
40
+ super.disconnectedCallback();
41
+ window.removeEventListener('show-notification-tooltip', this.configureNotificationTooltip);
42
+ window.removeEventListener('hide-notification-tooltip', this.hideNotificationTooltip);
43
+ }
44
+ updated(changedProperties) {
45
+ if (changedProperties.has('hoveredElement') && this.isVisible) {
46
+ if (this.hoveredElement) {
47
+ computePosition(this.hoveredElement, this.notificationTooltip, {
48
+ placement: 'bottom-end',
49
+ }).then(({ x, y }) => {
50
+ this.notificationTooltip.style.left = `${x}px`;
51
+ this.notificationTooltip.style.top = `${y + 12}px`;
52
+ });
53
+ }
54
+ }
55
+ }
15
56
  render() {
16
- return html ` <div
17
- class="notification-tooltip z-[999] hidden rounded absolute p-2 white-text"
18
- ></div>`;
57
+ const classes = {
58
+ hidden: !this.isVisible,
59
+ };
60
+ return html `<div
61
+ class="notification-tooltip z-[999] rounded absolute p-2 white-text ${classMap(classes)}"
62
+ >
63
+ ${this.label}
64
+ </div>
65
+ <slot></slot>`;
19
66
  }
20
67
  };
68
+ __decorate([
69
+ query('.notification-tooltip')
70
+ ], NotificationTooltip.prototype, "notificationTooltip", void 0);
71
+ __decorate([
72
+ property({ type: Boolean, reflect: true })
73
+ ], NotificationTooltip.prototype, "isVisible", void 0);
74
+ __decorate([
75
+ property({ type: String, reflect: true })
76
+ ], NotificationTooltip.prototype, "label", void 0);
77
+ __decorate([
78
+ state()
79
+ ], NotificationTooltip.prototype, "hoveredElement", void 0);
21
80
  NotificationTooltip = __decorate([
22
81
  customElement('notification-tooltip')
23
82
  ], NotificationTooltip);
24
83
  export { NotificationTooltip };
25
- function getNotificationTooltip() {
26
- var _a, _b, _c, _d;
27
- return (_d = (_c = (_b = (_a = document
28
- .querySelector('ix-notifications')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('notification-tooltip')) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.notification-tooltip');
29
- }
30
- function handleMouseOut() {
31
- const notificationTooltip = getNotificationTooltip();
32
- if (notificationTooltip) {
33
- notificationTooltip.style.display = 'none';
34
- notificationTooltip.innerHTML = '';
35
- }
36
- }
37
- function handleMouseOver(event, label) {
38
- const notificationTooltip = getNotificationTooltip();
39
- if (notificationTooltip) {
40
- const element = event.currentTarget;
41
- // Compute the position of the tooltip
42
- computePosition(element, notificationTooltip, {
43
- placement: 'bottom-end',
44
- }).then(({ x, y }) => {
45
- notificationTooltip.innerHTML = label;
46
- notificationTooltip.style.display = 'block';
47
- notificationTooltip.style.left = `${x}px`;
48
- notificationTooltip.style.top = `${y + 12}px`;
49
- });
50
- }
51
- }
52
- export { handleMouseOut, handleMouseOver };
53
84
  //# sourceMappingURL=notification-tooltip.js.map
package/dist/components/notifications/notification-tooltip.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"notification-tooltip.js","sourceRoot":"","sources":["../../../src/components/notifications/notification-tooltip.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAEzE,wDAAwD;AAEjD,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,cAAc;IACrD,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;IACnD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;YAEH,CAAC;IACX,CAAC;CACF,CAAA;AAVY,mBAAmB;IAD/B,aAAa,CAAC,sBAAsB,CAAC;GACzB,mBAAmB,CAU/B;SAVY,mBAAmB;AAYhC,SAAS,sBAAsB;;IAC7B,OAAO,MAAA,MAAA,MAAA,MAAA,QAAQ;SACZ,aAAa,CAAC,kBAAkB,CAAC,0CAChC,UAAU,0CAAE,aAAa,CAAC,sBAAsB,CAAC,0CACjD,UAAU,0CAAE,aAAa,CAAC,uBAAuB,CAAgB,CAAC;AACxE,CAAC;AAED,SAAS,cAAc;IACrB,MAAM,mBAAmB,GAAG,sBAAsB,EAAE,CAAC;IACrD,IAAI,mBAAmB,EAAE;QACvB,mBAAmB,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC3C,mBAAmB,CAAC,SAAS,GAAG,EAAE,CAAC;KACpC;AACH,CAAC;AAED,SAAS,eAAe,CAAC,KAAU,EAAE,KAAa;IAChD,MAAM,mBAAmB,GAAG,sBAAsB,EAAE,CAAC;IACrD,IAAI,mBAAmB,EAAE;QACvB,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC;QACpC,sCAAsC;QACtC,eAAe,CAAC,OAAO,EAAE,mBAAmB,EAAE;YAC5C,SAAS,EAAE,YAAY;SACxB,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE;YACnB,mBAAmB,CAAC,SAAS,GAAG,KAAK,CAAC;YACtC,mBAAmB,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;YAC5C,mBAAmB,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;YAC1C,mBAAmB,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC;QAChD,CAAC,CAAC,CAAC;KACJ;AACH,CAAC;AAED,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { baseTheme } from '@digital-realty/theme';\nimport { computePosition } from '@floating-ui/dom';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\n\n// Tooltip code, to be replaced with a generic component\n@customElement('notification-tooltip')\nexport class NotificationTooltip extends MobxLitElement {\n static get styles() {\n return [NotificationsStyle, baseTheme, TWStyles];\n }\n\n render() {\n return html` <div\n class=\"notification-tooltip z-[999] hidden rounded absolute p-2 white-text\"\n ></div>`;\n }\n}\n\nfunction getNotificationTooltip() {\n return document\n .querySelector('ix-notifications')\n ?.shadowRoot?.querySelector('notification-tooltip')\n ?.shadowRoot?.querySelector('.notification-tooltip') as HTMLElement;\n}\n\nfunction handleMouseOut() {\n const notificationTooltip = getNotificationTooltip();\n if (notificationTooltip) {\n notificationTooltip.style.display = 'none';\n notificationTooltip.innerHTML = '';\n }\n}\n\nfunction handleMouseOver(event: any, label: string) {\n const notificationTooltip = getNotificationTooltip();\n if (notificationTooltip) {\n const element = event.currentTarget;\n // Compute the position of the tooltip\n computePosition(element, notificationTooltip, {\n placement: 'bottom-end',\n }).then(({ x, y }) => {\n notificationTooltip.innerHTML = label;\n notificationTooltip.style.display = 'block';\n notificationTooltip.style.left = `${x}px`;\n notificationTooltip.style.top = `${y + 12}px`;\n });\n }\n}\n\nexport { handleMouseOut, handleMouseOver };\n"]}
1
+ {"version":3,"file":"notification-tooltip.js","sourceRoot":"","sources":["../../../src/components/notifications/notification-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable wc/guard-super-call */\nimport { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { query, customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { baseTheme } from '@digital-realty/theme';\nimport { computePosition } from '@floating-ui/dom';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\n\n// Tooltip code, to be replaced with a generic component\n@customElement('notification-tooltip')\nexport class NotificationTooltip extends MobxLitElement {\n static get styles() {\n return [NotificationsStyle, baseTheme, TWStyles];\n }\n\n @query('.notification-tooltip') notificationTooltip!: HTMLDivElement;\n\n @property({ type: Boolean, reflect: true }) isVisible: boolean = false;\n\n @property({ type: String, reflect: true }) label: string = '';\n\n @state() hoveredElement: HTMLElement | undefined = undefined;\n\n connectedCallback() {\n super.connectedCallback();\n window.addEventListener(\n 'show-notification-tooltip',\n this.configureNotificationTooltip\n );\n window.addEventListener(\n 'hide-notification-tooltip',\n this.hideNotificationTooltip\n );\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener(\n 'show-notification-tooltip',\n this.configureNotificationTooltip\n );\n window.removeEventListener(\n 'hide-notification-tooltip',\n this.hideNotificationTooltip\n );\n }\n\n configureNotificationTooltip = (e: any) => {\n const { label, target } = e.detail;\n this.hoveredElement = target as HTMLElement;\n this.label = label;\n this.isVisible = true;\n };\n\n hideNotificationTooltip = () => {\n this.isVisible = false;\n this.hoveredElement = undefined;\n this.label = '';\n };\n\n updated(changedProperties: Map<string, any>) {\n if (changedProperties.has('hoveredElement') && this.isVisible) {\n if (this.hoveredElement) {\n computePosition(this.hoveredElement, this.notificationTooltip, {\n placement: 'bottom-end',\n }).then(({ x, y }) => {\n this.notificationTooltip.style.left = `${x}px`;\n this.notificationTooltip.style.top = `${y + 12}px`;\n });\n }\n }\n }\n\n render() {\n const classes = {\n hidden: !this.isVisible,\n };\n\n return html`<div\n class=\"notification-tooltip z-[999] rounded absolute p-2 white-text ${classMap(\n classes\n )}\"\n >\n ${this.label}\n </div>\n <slot></slot>`;\n }\n}\n"]}
package/dist/components/notifications/view-item-dialog.d.ts CHANGED
@@ -8,5 +8,6 @@ export declare class ViewItemDialog extends MobxLitElement {
8
8
  getUrl(): string;
9
9
  getLocation(): string;
10
10
  dialogClosed: () => void;
11
+ viewRecord: () => void;
11
12
  render(): import("lit").TemplateResult<1>;
12
13
  }
package/dist/components/notifications/view-item-dialog.js CHANGED
@@ -8,6 +8,7 @@ import { format } from 'date-fns';
8
8
  import { TWStyles } from '../../tw.js';
9
9
  import { NotificationGroups, SubGroups, } from '../../constants/notifications.js';
10
10
  import { NotificationsStyle } from '../../styles/notifications-style.js';
11
+ import { NotificationsState } from '../../state/NotificationState.js';
11
12
  let ViewItemDialog = class ViewItemDialog extends MobxLitElement {
12
13
  constructor() {
13
14
  super(...arguments);
@@ -16,6 +17,10 @@ let ViewItemDialog = class ViewItemDialog extends MobxLitElement {
16
17
  this.dialogClosed = () => {
17
18
  this.dispatchEvent(new CustomEvent('view-item-dialog-closed'));
18
19
  };
20
+ this.viewRecord = () => {
21
+ this.dialogClosed();
22
+ NotificationsState.showDrawer = false;
23
+ };
19
24
  }
20
25
  static get styles() {
21
26
  return [NotificationsStyle, elementTheme, TWStyles];
@@ -96,7 +101,12 @@ let ViewItemDialog = class ViewItemDialog extends MobxLitElement {
96
101
  </form>
97
102
  <div slot="actions" class="flex flex-row flex-end px-8 py-8">
98
103
  <button form="form-id" class="modal-text-blue">CLOSE</button>
99
- <a href=${this.getUrl()} class="modal-text-blue">VIEW RECORD</a>
104
+ <a
105
+ href="${this.getUrl()}"
106
+ @click="${this.viewRecord}"
107
+ class="modal-text-blue"
108
+ >VIEW RECORD</a
109
+ >
100
110
  </div>
101
111
  </ix-dialog>`;
102
112
  }