@digital-realty/ix-notifications 1.2.3 → 1.3.0-alpha.1

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.
@@ -2,8 +2,7 @@ import { __decorate } from "tslib";
2
2
  import { html } from 'lit';
3
3
  import { property, query, state } from 'lit/decorators.js';
4
4
  import { MobxLitElement } from '@adobe/lit-mobx';
5
- import { differenceInDays } from 'date-fns/differenceInDays.js';
6
- import { differenceInHours } from 'date-fns/differenceInHours.js';
5
+ import { differenceInDays, differenceInHours } from 'date-fns';
7
6
  import { plannedMaintenance, viewList, dcim, sortCheck, } from './assets/iconset.js';
8
7
  import { TWStyles } from './tw.js';
9
8
  import '@digital-realty/ix-button/ix-button.js';
@@ -1 +1 @@
1
- {"version":3,"file":"IxNotifications.js","sourceRoot":"","sources":["../../src/IxNotifications.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { differenceInDays } from 'date-fns/differenceInDays.js';\nimport { differenceInHours } from 'date-fns/differenceInHours.js';\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(\n 'ix-notifications-toggle-drawer',\n this.toggleDrawer\n );\n window.addEventListener('beforeunload', this.handleOnbeforeunload);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.handleOnbeforeunload();\n window.removeEventListener(\n 'account-switched',\n NotificationsState.NewApiClient\n );\n window.removeEventListener(\n 'ix-notifications-toggle-drawer',\n this.toggleDrawer\n );\n window.removeEventListener('beforeunload', this.handleOnbeforeunload);\n }\n\n // Handle browser refresh event\n // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars\n handleOnbeforeunload() {\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 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 notifications 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.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 data-testid=\"notification-read-all-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 class=\"-mx-4 -mt-2\">\n <grouped-item\n data-testid=\"planned-maintenance-group\"\n groupTitle=\"Planned 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 data-testid=\"emergency-repairs-group\"\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 data-testid=\"service-ticket-updates-group\"\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 data-testid=\"dcim-alerts-group\"\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 =>\n differenceInDays(new Date(notification.createdAt), new Date()) === 0\n );\n\n const filterEarlierItems = filterNotification.filter(\n notification =>\n differenceInDays(new Date(notification.createdAt), new Date()) !== 0\n );\n\n if (filterNotification?.length! > 0) {\n return html`\n <h3>Today</h3>\n ${filterTodayItems.length > 0\n ? html`<div class=\"-mx-4\">\n ${filterTodayItems?.map(\n item => html`<notification-item\n ?read=${item.status !== NotificationStatus.UNREAD}\n data-testclass=\"today-notification\"\n .notification=${item}\n ?disabled=${item.resourceType ===\n NotificationGroups.INCIDENTS}\n >\n </notification-item> `\n )}\n </div>`\n : this.renderNoResult()}\n <h3>Earlier</h3>\n ${filterEarlierItems.length > 0\n ? html`<div class=\"-mx-4\">\n ${filterEarlierItems?.map(\n item => html`<notification-item\n ?read=${item.status !== NotificationStatus.UNREAD}\n data-testclass=\"earlier-notification\"\n .notification=${item}\n ?disabled=${item.resourceType ===\n NotificationGroups.INCIDENTS}\n >\n </notification-item> `\n )}\n </div>`\n : this.renderNoResult()}\n `;\n }\n\n return html`<h3>Today</h3>\n ${this.renderNoResult()}`;\n }\n\n /* eslint-disable-next-line */\n renderNoResult() {\n return html`<p class=\"dlr-text-caption my-4\">\n <strong>No notifications yet.</strong>\n </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 - 2\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 data-testid=\"notifications-tooltip\">\n </notification-tooltip>\n <confirmation-dialog\n data-testid=\"notifications-confirm-read-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 data-testid=\"notifications-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 compact\n >\n <div slot=\"content\" class=\"m-4\">\n <div\n class=\"flex flex-row justify-between grow items-center notification-header-container mb-4\"\n >\n <h2\n data-testid=\"notifications-heading\"\n class=\"grow items-center dlr-text-heading\"\n >\n Notifications\n </h2>\n <div\n class=\"flex flex-row justify-end grow items-center options\"\n style=\"--md-icon-button-icon-size: 24px;\"\n >\n <ix-icon-button\n data-testid=\"notifications-cta-all-read\"\n data-testclass=\"notifications-cta\"\n @click=${this.markAllread}\n @mouseover=${(e: any) => {\n // only show the tooltip if the button is active\n if (NotificationsState.unreadNotificationCount > 0) {\n window.dispatchEvent(\n new CustomEvent('show-notification-tooltip', {\n detail: { label: 'Mark All Read', target: e.target },\n })\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 data-testid=\"notifications-cta-sort-type\"\n data-testclass=\"notifications-cta\"\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 data-testid=\"notifications-cta-filter-type\"\n data-testclass=\"notifications-cta\"\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 data-testid=\"notifications-filter-dropdown\"\n class=\"filter-dropdown-content ${this.showFilters\n ? 'active z-50'\n : 'hidden'}\"\n >\n <group-filters></group-filters>\n </div>\n <ix-icon-button\n data-testid=\"notifications-cta-filter-date\"\n data-testclass=\"notifications-cta\"\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 data-testid=\"notifications-date-filter-dropdown\"\n class=\"datefilter-dropdown-content ${this.showDateFilters\n ? 'active z-50'\n : 'hidden'}\"\n @on-selection=${this.handleCloseClick}\n >\n <date-filters></date-filters>\n </div>\n </div>\n </div>\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 } 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(\n 'ix-notifications-toggle-drawer',\n this.toggleDrawer\n );\n window.addEventListener('beforeunload', this.handleOnbeforeunload);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.handleOnbeforeunload();\n window.removeEventListener(\n 'account-switched',\n NotificationsState.NewApiClient\n );\n window.removeEventListener(\n 'ix-notifications-toggle-drawer',\n this.toggleDrawer\n );\n window.removeEventListener('beforeunload', this.handleOnbeforeunload);\n }\n\n // Handle browser refresh event\n // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars\n handleOnbeforeunload() {\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 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 notifications 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.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 data-testid=\"notification-read-all-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 class=\"-mx-4 -mt-2\">\n <grouped-item\n data-testid=\"planned-maintenance-group\"\n groupTitle=\"Planned 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 data-testid=\"emergency-repairs-group\"\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 data-testid=\"service-ticket-updates-group\"\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 data-testid=\"dcim-alerts-group\"\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 =>\n differenceInDays(new Date(notification.createdAt), new Date()) === 0\n );\n\n const filterEarlierItems = filterNotification.filter(\n notification =>\n differenceInDays(new Date(notification.createdAt), new Date()) !== 0\n );\n\n if (filterNotification?.length! > 0) {\n return html`\n <h3>Today</h3>\n ${filterTodayItems.length > 0\n ? html`<div class=\"-mx-4\">\n ${filterTodayItems?.map(\n item => html`<notification-item\n ?read=${item.status !== NotificationStatus.UNREAD}\n data-testclass=\"today-notification\"\n .notification=${item}\n ?disabled=${item.resourceType ===\n NotificationGroups.INCIDENTS}\n >\n </notification-item> `\n )}\n </div>`\n : this.renderNoResult()}\n <h3>Earlier</h3>\n ${filterEarlierItems.length > 0\n ? html`<div class=\"-mx-4\">\n ${filterEarlierItems?.map(\n item => html`<notification-item\n ?read=${item.status !== NotificationStatus.UNREAD}\n data-testclass=\"earlier-notification\"\n .notification=${item}\n ?disabled=${item.resourceType ===\n NotificationGroups.INCIDENTS}\n >\n </notification-item> `\n )}\n </div>`\n : this.renderNoResult()}\n `;\n }\n\n return html`<h3>Today</h3>\n ${this.renderNoResult()}`;\n }\n\n /* eslint-disable-next-line */\n renderNoResult() {\n return html`<p class=\"dlr-text-caption my-4\">\n <strong>No notifications yet.</strong>\n </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 - 2\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 data-testid=\"notifications-tooltip\">\n </notification-tooltip>\n <confirmation-dialog\n data-testid=\"notifications-confirm-read-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 data-testid=\"notifications-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 compact\n >\n <div slot=\"content\" class=\"m-4\">\n <div\n class=\"flex flex-row justify-between grow items-center notification-header-container mb-4\"\n >\n <h2\n data-testid=\"notifications-heading\"\n class=\"grow items-center dlr-text-heading\"\n >\n Notifications\n </h2>\n <div\n class=\"flex flex-row justify-end grow items-center options\"\n style=\"--md-icon-button-icon-size: 24px;\"\n >\n <ix-icon-button\n data-testid=\"notifications-cta-all-read\"\n data-testclass=\"notifications-cta\"\n @click=${this.markAllread}\n @mouseover=${(e: any) => {\n // only show the tooltip if the button is active\n if (NotificationsState.unreadNotificationCount > 0) {\n window.dispatchEvent(\n new CustomEvent('show-notification-tooltip', {\n detail: { label: 'Mark All Read', target: e.target },\n })\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 data-testid=\"notifications-cta-sort-type\"\n data-testclass=\"notifications-cta\"\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 data-testid=\"notifications-cta-filter-type\"\n data-testclass=\"notifications-cta\"\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 data-testid=\"notifications-filter-dropdown\"\n class=\"filter-dropdown-content ${this.showFilters\n ? 'active z-50'\n : 'hidden'}\"\n >\n <group-filters></group-filters>\n </div>\n <ix-icon-button\n data-testid=\"notifications-cta-filter-date\"\n data-testclass=\"notifications-cta\"\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 data-testid=\"notifications-date-filter-dropdown\"\n class=\"datefilter-dropdown-content ${this.showDateFilters\n ? 'active z-50'\n : 'hidden'}\"\n @on-selection=${this.handleCloseClick}\n >\n <date-filters></date-filters>\n </div>\n </div>\n </div>\n ${this.showGroupedView\n ? this.renderGroupedView()\n : this.renderDefaultView()}\n </div>\n </ix-drawer>\n `;\n }\n}\n"]}
@@ -7,7 +7,7 @@ import '@digital-realty/ix-date/ix-date.js';
7
7
  import '@digital-realty/ix-divider/ix-divider.js';
8
8
  import '@digital-realty/ix-icon';
9
9
  import '@material/web/icon/icon.js';
10
- import { format } from 'date-fns/format.js';
10
+ import { format } from 'date-fns';
11
11
  import { TWStyles } from '../../tw.js';
12
12
  import { NotificationsState } from '../../state/NotificationState.js';
13
13
  import { NotificationsStyle } from '../../styles/notifications-style.js';
@@ -1 +1 @@
1
- {"version":3,"file":"date-filters.js","sourceRoot":"","sources":["../../../../src/components/notifications/date-filters.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-date/ix-date.js';\nimport '@digital-realty/ix-divider/ix-divider.js';\nimport '@digital-realty/ix-icon';\nimport '@material/web/icon/icon.js';\nimport { format } from 'date-fns/format.js';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport { DefaultDateFormat } from '../../constants/notifications.js';\nimport { FilterDialogEventDetail } from '../../constants/notification-types.js';\nimport { isNullOrUndefinedOrEmpty } from '../../helper/common.js';\n\n@customElement('date-filters')\nexport class DateFilters extends MobxLitElement {\n static get styles() {\n return [TWStyles, NotificationsStyle];\n }\n\n @state() private fromDate? = !isNullOrUndefinedOrEmpty(\n NotificationsState.dateFilters.FROM_DATE\n )\n ? format(NotificationsState.dateFilters.FROM_DATE!, DefaultDateFormat)\n : undefined;\n\n @state() private toDate? = !isNullOrUndefinedOrEmpty(\n NotificationsState.dateFilters.TO_DATE\n )\n ? format(NotificationsState.dateFilters.TO_DATE!, DefaultDateFormat)\n : undefined;\n\n @state() private maxDate = format(new Date(), DefaultDateFormat);\n\n @state() private fromDateErrorText? = '';\n\n @state() private toDateErrorText? = '';\n\n onFromDateChange(fromDate: string) {\n // handling of clear date event of calendar\n if (fromDate === null || fromDate === '') this.fromDate = undefined;\n else {\n this.fromDate = fromDate;\n // clear error message\n if (this.fromDate !== undefined) this.fromDateErrorText = undefined;\n }\n }\n\n onToDateChange(toDate: string) {\n // handling of clear date event of calendar\n if (toDate === null || toDate === '') this.toDate = undefined;\n else {\n this.toDate = toDate;\n // clear error message\n if (this.toDate !== undefined) this.toDateErrorText = undefined;\n }\n }\n\n onApplyDateFilter(selectedvalue: Boolean) {\n if (selectedvalue) {\n if (this.toDate === undefined && this.fromDate !== undefined) {\n this.toDateErrorText = 'Please select to date';\n return;\n }\n\n if (this.fromDate === undefined && this.toDate !== undefined) {\n this.fromDateErrorText = 'Please select from date';\n return;\n }\n\n if (this.fromDate! > this.toDate!) {\n this.fromDateErrorText = 'From date cannot be later than To date.';\n this.fromDate = undefined;\n return;\n }\n\n this.fromDateErrorText = undefined;\n\n if (this.toDate! < this.fromDate!) {\n this.toDateErrorText = 'To date cannot be earlier than From date.';\n this.toDate = undefined;\n return;\n }\n\n this.toDateErrorText = undefined;\n }\n\n const datesChanged =\n selectedvalue &&\n this.toDateErrorText === undefined &&\n this.fromDateErrorText === undefined;\n\n if (datesChanged) {\n NotificationsState.setNotificationDateFilter(this.fromDate, this.toDate);\n this.requestUpdate();\n }\n\n const event = new CustomEvent<FilterDialogEventDetail>('on-selection', {\n detail: { returnValue: datesChanged },\n bubbles: true,\n composed: true,\n });\n\n this.dispatchEvent(event);\n }\n\n clearDateFilters() {\n this.fromDate = undefined;\n this.toDate = undefined;\n this.fromDateErrorText = undefined;\n this.toDateErrorText = undefined;\n }\n\n /* eslint-disable lit-a11y/click-events-have-key-events */\n render() {\n return html` <div class=\"flex flex-col p-4\">\n <div class=\"flex flex-row items-center\">\n <div class=\"grow items-center text-xl font-bold\">Filter by Date</div>\n <div class=\"flex flex-row items-center\" @click=${this.clearDateFilters}>\n <label class=\"grow text-sm text-right pr-1 cursor-pointer\"\n >Clear Filter</label\n >\n <ix-icon-button\n data-testid=\"notifications-clear-date-filter\"\n small\n appearance=\"default\"\n icon=\"domain_verification_off\"\n class=\"active-icon\"\n ></ix-icon-button>\n </div>\n </div>\n <ix-divider class=\"my-2\"></ix-divider>\n <div\n class=\"flex xl:flex-row lg:flex-col md:flex-col sm:flex-col justify-between item-center my-4\"\n >\n <div class=\"flex gap-2\">\n <ix-date\n data-testid=\"notifications-from-date\"\n .value=${this.fromDate}\n max=${this.maxDate}\n label=\"From\"\n name=\"FromDate\"\n .errorText=${this.fromDateErrorText}\n .onChanged=${(e: any) => this.onFromDateChange(e)}\n >\n </ix-date>\n <ix-date\n data-testid=\"notifications-to-date\"\n .value=${this.toDate}\n max=${this.maxDate}\n label=\"To\"\n name=\"ToDate\"\n .errorText=${this.toDateErrorText}\n .onChanged=${(e: any) => this.onToDateChange(e)}\n ></ix-date>\n </div>\n </div>\n <div class=\"flex flex-row justify-between\">\n <ix-button\n data-testid=\"notifications-cancel-date-filter\"\n type=\"\"\n target=\"\"\n appearance=\"text\"\n @click=\"${() => this.onApplyDateFilter(false)}\"\n >Cancel</ix-button\n >\n <ix-button\n data-testid=\"notifications-activate-date-filter\"\n type=\"\"\n target=\"\"\n appearance=\"text\"\n @click=\"${() => this.onApplyDateFilter(true)}\"\n >Filter List</ix-button\n >\n </div>\n </div>`;\n }\n}\n"]}
1
+ {"version":3,"file":"date-filters.js","sourceRoot":"","sources":["../../../../src/components/notifications/date-filters.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,0CAA0C,CAAC;AAClD,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAErE,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAG3D,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,cAAc;IAAxC;;QAKY,aAAQ,GAAI,CAAC,wBAAwB,CACpD,kBAAkB,CAAC,WAAW,CAAC,SAAS,CACzC;YACC,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,WAAW,CAAC,SAAU,EAAE,iBAAiB,CAAC;YACtE,CAAC,CAAC,SAAS,CAAC;QAEG,WAAM,GAAI,CAAC,wBAAwB,CAClD,kBAAkB,CAAC,WAAW,CAAC,OAAO,CACvC;YACC,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,WAAW,CAAC,OAAQ,EAAE,iBAAiB,CAAC;YACpE,CAAC,CAAC,SAAS,CAAC;QAEG,YAAO,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,EAAE,iBAAiB,CAAC,CAAC;QAEhD,sBAAiB,GAAI,EAAE,CAAC;QAExB,oBAAe,GAAI,EAAE,CAAC;IA6IzC,CAAC;IAjKC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAoBD,gBAAgB,CAAC,QAAgB;QAC/B,2CAA2C;QAC3C,IAAI,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,EAAE;YAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;aAC/D,CAAC;YACJ,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACzB,sBAAsB;YACtB,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS;gBAAE,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;QACtE,CAAC;IACH,CAAC;IAED,cAAc,CAAC,MAAc;QAC3B,2CAA2C;QAC3C,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,EAAE;YAAE,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;aACzD,CAAC;YACJ,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;YACrB,sBAAsB;YACtB,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS;gBAAE,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;QAClE,CAAC;IACH,CAAC;IAED,iBAAiB,CAAC,aAAsB;QACtC,IAAI,aAAa,EAAE,CAAC;YAClB,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;gBAC7D,IAAI,CAAC,eAAe,GAAG,uBAAuB,CAAC;gBAC/C,OAAO;YACT,CAAC;YAED,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;gBAC7D,IAAI,CAAC,iBAAiB,GAAG,yBAAyB,CAAC;gBACnD,OAAO;YACT,CAAC;YAED,IAAI,IAAI,CAAC,QAAS,GAAG,IAAI,CAAC,MAAO,EAAE,CAAC;gBAClC,IAAI,CAAC,iBAAiB,GAAG,yCAAyC,CAAC;gBACnE,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;gBAC1B,OAAO;YACT,CAAC;YAED,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;YAEnC,IAAI,IAAI,CAAC,MAAO,GAAG,IAAI,CAAC,QAAS,EAAE,CAAC;gBAClC,IAAI,CAAC,eAAe,GAAG,2CAA2C,CAAC;gBACnE,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;gBACxB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;QACnC,CAAC;QAED,MAAM,YAAY,GAChB,aAAa;YACb,IAAI,CAAC,eAAe,KAAK,SAAS;YAClC,IAAI,CAAC,iBAAiB,KAAK,SAAS,CAAC;QAEvC,IAAI,YAAY,EAAE,CAAC;YACjB,kBAAkB,CAAC,yBAAyB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YACzE,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,WAAW,CAA0B,cAAc,EAAE;YACrE,MAAM,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE;YACrC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC1B,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;QACxB,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;QACnC,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;IACnC,CAAC;IAED,0DAA0D;IAC1D,MAAM;QACJ,OAAO,IAAI,CAAA;;;yDAG0C,IAAI,CAAC,gBAAgB;;;;;;;;;;;;;;;;;;;;qBAoBzD,IAAI,CAAC,QAAQ;kBAChB,IAAI,CAAC,OAAO;;;yBAGL,IAAI,CAAC,iBAAiB;yBACtB,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;;;;;qBAKxC,IAAI,CAAC,MAAM;kBACd,IAAI,CAAC,OAAO;;;yBAGL,IAAI,CAAC,eAAe;yBACpB,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;;;;;;;;;oBAUvC,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;;;;;;;;oBAQnC,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;;;;WAI3C,CAAC;IACV,CAAC;CACF,CAAA;AA7JkB;IAAhB,KAAK,EAAE;6CAIM;AAEG;IAAhB,KAAK,EAAE;2CAIM;AAEG;IAAhB,KAAK,EAAE;4CAAyD;AAEhD;IAAhB,KAAK,EAAE;sDAAiC;AAExB;IAAhB,KAAK,EAAE;oDAA+B;AArB5B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAkKvB","sourcesContent":["import { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-date/ix-date.js';\nimport '@digital-realty/ix-divider/ix-divider.js';\nimport '@digital-realty/ix-icon';\nimport '@material/web/icon/icon.js';\nimport { format } from 'date-fns';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport { DefaultDateFormat } from '../../constants/notifications.js';\nimport { FilterDialogEventDetail } from '../../constants/notification-types.js';\nimport { isNullOrUndefinedOrEmpty } from '../../helper/common.js';\n\n@customElement('date-filters')\nexport class DateFilters extends MobxLitElement {\n static get styles() {\n return [TWStyles, NotificationsStyle];\n }\n\n @state() private fromDate? = !isNullOrUndefinedOrEmpty(\n NotificationsState.dateFilters.FROM_DATE\n )\n ? format(NotificationsState.dateFilters.FROM_DATE!, DefaultDateFormat)\n : undefined;\n\n @state() private toDate? = !isNullOrUndefinedOrEmpty(\n NotificationsState.dateFilters.TO_DATE\n )\n ? format(NotificationsState.dateFilters.TO_DATE!, DefaultDateFormat)\n : undefined;\n\n @state() private maxDate = format(new Date(), DefaultDateFormat);\n\n @state() private fromDateErrorText? = '';\n\n @state() private toDateErrorText? = '';\n\n onFromDateChange(fromDate: string) {\n // handling of clear date event of calendar\n if (fromDate === null || fromDate === '') this.fromDate = undefined;\n else {\n this.fromDate = fromDate;\n // clear error message\n if (this.fromDate !== undefined) this.fromDateErrorText = undefined;\n }\n }\n\n onToDateChange(toDate: string) {\n // handling of clear date event of calendar\n if (toDate === null || toDate === '') this.toDate = undefined;\n else {\n this.toDate = toDate;\n // clear error message\n if (this.toDate !== undefined) this.toDateErrorText = undefined;\n }\n }\n\n onApplyDateFilter(selectedvalue: Boolean) {\n if (selectedvalue) {\n if (this.toDate === undefined && this.fromDate !== undefined) {\n this.toDateErrorText = 'Please select to date';\n return;\n }\n\n if (this.fromDate === undefined && this.toDate !== undefined) {\n this.fromDateErrorText = 'Please select from date';\n return;\n }\n\n if (this.fromDate! > this.toDate!) {\n this.fromDateErrorText = 'From date cannot be later than To date.';\n this.fromDate = undefined;\n return;\n }\n\n this.fromDateErrorText = undefined;\n\n if (this.toDate! < this.fromDate!) {\n this.toDateErrorText = 'To date cannot be earlier than From date.';\n this.toDate = undefined;\n return;\n }\n\n this.toDateErrorText = undefined;\n }\n\n const datesChanged =\n selectedvalue &&\n this.toDateErrorText === undefined &&\n this.fromDateErrorText === undefined;\n\n if (datesChanged) {\n NotificationsState.setNotificationDateFilter(this.fromDate, this.toDate);\n this.requestUpdate();\n }\n\n const event = new CustomEvent<FilterDialogEventDetail>('on-selection', {\n detail: { returnValue: datesChanged },\n bubbles: true,\n composed: true,\n });\n\n this.dispatchEvent(event);\n }\n\n clearDateFilters() {\n this.fromDate = undefined;\n this.toDate = undefined;\n this.fromDateErrorText = undefined;\n this.toDateErrorText = undefined;\n }\n\n /* eslint-disable lit-a11y/click-events-have-key-events */\n render() {\n return html` <div class=\"flex flex-col p-4\">\n <div class=\"flex flex-row items-center\">\n <div class=\"grow items-center text-xl font-bold\">Filter by Date</div>\n <div class=\"flex flex-row items-center\" @click=${this.clearDateFilters}>\n <label class=\"grow text-sm text-right pr-1 cursor-pointer\"\n >Clear Filter</label\n >\n <ix-icon-button\n data-testid=\"notifications-clear-date-filter\"\n small\n appearance=\"default\"\n icon=\"domain_verification_off\"\n class=\"active-icon\"\n ></ix-icon-button>\n </div>\n </div>\n <ix-divider class=\"my-2\"></ix-divider>\n <div\n class=\"flex xl:flex-row lg:flex-col md:flex-col sm:flex-col justify-between item-center my-4\"\n >\n <div class=\"flex gap-2\">\n <ix-date\n data-testid=\"notifications-from-date\"\n .value=${this.fromDate}\n max=${this.maxDate}\n label=\"From\"\n name=\"FromDate\"\n .errorText=${this.fromDateErrorText}\n .onChanged=${(e: any) => this.onFromDateChange(e)}\n >\n </ix-date>\n <ix-date\n data-testid=\"notifications-to-date\"\n .value=${this.toDate}\n max=${this.maxDate}\n label=\"To\"\n name=\"ToDate\"\n .errorText=${this.toDateErrorText}\n .onChanged=${(e: any) => this.onToDateChange(e)}\n ></ix-date>\n </div>\n </div>\n <div class=\"flex flex-row justify-between\">\n <ix-button\n data-testid=\"notifications-cancel-date-filter\"\n type=\"\"\n target=\"\"\n appearance=\"text\"\n @click=\"${() => this.onApplyDateFilter(false)}\"\n >Cancel</ix-button\n >\n <ix-button\n data-testid=\"notifications-activate-date-filter\"\n type=\"\"\n target=\"\"\n appearance=\"text\"\n @click=\"${() => this.onApplyDateFilter(true)}\"\n >Filter List</ix-button\n >\n </div>\n </div>`;\n }\n}\n"]}
@@ -4,8 +4,7 @@ import { MobxLitElement } from '@adobe/lit-mobx';
4
4
  import { customElement, property, state } from 'lit/decorators.js';
5
5
  import '@digital-realty/ix-icon-button/ix-icon-button.js';
6
6
  import '@digital-realty/ix-icon/ix-icon.js';
7
- import { formatDistance } from 'date-fns/formatDistance.js';
8
- import { differenceInHours } from 'date-fns/differenceInHours.js';
7
+ import { formatDistance, differenceInHours } from 'date-fns';
9
8
  import { TWStyles } from '../../tw.js';
10
9
  import { NotificationsState } from '../../state/NotificationState.js';
11
10
  import { NotificationStatus, NotificationGroups, SubGroups, } from '../../constants/notifications.js';
@@ -1 +1 @@
1
- {"version":3,"file":"notification-item.js","sourceRoot":"","sources":["../../../../src/components/notifications/notification-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,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,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,SAAS,GACV,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;QAEjB,SAAI,GAAG,KAAK,CAAC;QAEI,iBAAY,GACxD,EAAkB,CAAC;QAEJ,cAAS,GAAG,KAAK,CAAC;QAElB,2BAAsB,GAAG,KAAK,CAAC;IAuMlD,CAAC;IArMC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,kBAAkB,CAAC,MAAM,EAAE,CAAC;YAC3D,kBAAkB,CAAC,yBAAyB,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;YACnE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACnB,CAAC;QACD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;QACrC,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,CAA6C;QACnE,2BAA2B;QAC3B,IAAI,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;YACzB,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;QACJ,CAAC;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;;sBAED,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,CAAC;YAC9C,IACE,iBAAiB,CAAC,IAAI,IAAI,EAAE,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;gBACpE,EAAE;gBAEF,OAAO,cAAc,CACnB,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EACrC,IAAI,IAAI,EAAE,EACV;oBACE,SAAS,EAAE,IAAI;iBAChB,CACF,CAAC;YACJ,OAAO,IAAI,CAAA;;;iBAGA,IAAI,CAAC,YAAY,CAAC,SAAS;kBAC1B,CAAC;QACf,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,mBAAmB;QACjB,QAAQ,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;YACvC,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;QAChC,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,QAAQ,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;YACvC,KAAK,kBAAkB,CAAC,mBAAmB;gBACzC,OAAO,qBAAqB,CAAC;YAC/B,KAAK,kBAAkB,CAAC,eAAe;gBACrC,OAAO,GAAG,IAAI,CAAC,wBAAwB,EAAE,wBAAwB,CAAC;YACpE,KAAK,kBAAkB,CAAC,SAAS;gBAC/B,OAAO,kBAAkB,CAAC;YAC5B,KAAK,kBAAkB,CAAC,WAAW;gBACjC,OAAO,YAAY,CAAC;YACtB;gBACE,OAAO,oBAAoB,CAAC;QAChC,CAAC;IACH,CAAC;IAED,wBAAwB;;QACtB,QAAQ,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,EAAE,CAAC;YACpC,KAAK,SAAS,CAAC,2BAA2B,CAAC;YAC3C,KAAK,SAAS,CAAC,4BAA4B,CAAC;YAC5C,KAAK,SAAS,CAAC,uBAAuB,CAAC;YACvC,KAAK,SAAS,CAAC,0BAA0B;gBACvC,OAAO,iBAAiB,CAAC;YAC3B;gBACE,OAAO,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,CAAC;QACvC,CAAC;IACH,CAAC;IAED,0DAA0D;IAC1D,MAAM;QACJ,OAAO,IAAI,CAAA;;;oHAGqG,IAAI;aAC3G,IAAI;YACL,CAAC,CAAC,sDAAsD;YACxD,CAAC,CAAC,oDAAoD;;;;mBAI/C,IAAI,CAAC,mBAAmB,EAAE;oBACzB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa;qBAC1C,IAAI,CAAC,WAAW;eACtB,IAAI,CAAC,mBAAmB,EAAE;;mDAEU,IAAI,CAAC,WAAW;;6CAEtB,IAAI,CAAC,oBAAoB,EAAE;;;;kBAItD,IAAI,CAAC,iBAAiB,EAAE;;;;;;sBAMpB,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;;;;;;;;;qBASM,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;AAhN8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAAc;AAEI;IAA7C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;sDACxB;AAEJ;IAAhB,KAAK,EAAE;mDAA2B;AAElB;IAAhB,KAAK,EAAE;gEAAwC;AAVrC,gBAAgB;IAD5B,aAAa,CAAC,mBAAmB,CAAC;GACtB,gBAAgB,CAiN5B","sourcesContent":["import { html } 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 { formatDistance } from 'date-fns/formatDistance.js';\nimport { differenceInHours } from 'date-fns/differenceInHours.js';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { ApiCallResult, Notification } from '../../models/notification.js';\nimport {\n NotificationStatus,\n NotificationGroups,\n SubGroups,\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: Boolean }) read = 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 [TWStyles, NotificationsStyle];\n }\n\n displayItem() {\n if (this.notification.status === NotificationStatus.UNREAD) {\n NotificationsState.setNotificationReadStatus(this.notification.id);\n this.read = true;\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 data-testid=\"notification-delete-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 (\n differenceInHours(new Date(), new Date(this.notification.createdAt)) <\n 24\n )\n return formatDistance(\n new Date(this.notification.createdAt),\n new Date(),\n {\n addSuffix: true,\n }\n );\n return html`<ix-date\n type=\"static\"\n variant=\"date-time\"\n .value=${this.notification.createdAt}\n ></ix-date>`;\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 Maintenance';\n case NotificationGroups.SERVICE_TICKETS:\n return `${this.getServiceTicketSubGroup()} 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 getServiceTicketSubGroup() {\n switch (this.notification?.subGroup) {\n case SubGroups.FacilityAccessVisitorAccess:\n case SubGroups.FacilityAccessPermanentBadge:\n case SubGroups.FacilityAccessOspAccess:\n case SubGroups.FacilityAccessPopPoeAccess:\n return 'Facility Access';\n default:\n return this.notification?.subGroup;\n }\n }\n\n /* eslint-disable lit-a11y/click-events-have-key-events */\n render() {\n return html`\n <div data-testid=\"notification-item\" class=\"relative notification-item\">\n <div\n class=\"hover:bg-[rgba(0,0,0,0.04)] p-2 pl-3.5 flex gap-3 relative cursor-pointer items-center font-bold ${this\n .read\n ? 'notification-item-read border-l-3 border-transparent'\n : 'notification-item-unread border-l-3 border-success'}\"\n >\n <ix-icon\n style=\"--ix-icon-font-size: 24px;--ix-icon-line-height: 24px;\"\n icon=${this.getNotificationIcon()}\n class=${this.read ? 'inactive-icon' : 'active-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 class=\"dlr-text-caption\">${this.getNotificationTitle()}</h2>\n </div>\n <div class=\"grow text-xs\">\n <h3 class=\"dlr-text-caption text-on-surface-disabled\">\n ${this.calculateDuration()}\n </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 data-testclass=\"notification-delete-confirmation\"\n >\n </confirmation-dialog>\n </div>\n <ix-icon-button\n style=\"--md-icon-button-icon-size:24px;\"\n data-testclass=\"delete-notification\"\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"]}
1
+ {"version":3,"file":"notification-item.js","sourceRoot":"","sources":["../../../../src/components/notifications/notification-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } 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 { 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 NotificationGroups,\n SubGroups,\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: Boolean }) read = 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 [TWStyles, NotificationsStyle];\n }\n\n displayItem() {\n if (this.notification.status === NotificationStatus.UNREAD) {\n NotificationsState.setNotificationReadStatus(this.notification.id);\n this.read = true;\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 data-testid=\"notification-delete-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 (\n differenceInHours(new Date(), new Date(this.notification.createdAt)) <\n 24\n )\n return formatDistance(\n new Date(this.notification.createdAt),\n new Date(),\n {\n addSuffix: true,\n }\n );\n return html`<ix-date\n type=\"static\"\n variant=\"date-time\"\n .value=${this.notification.createdAt}\n ></ix-date>`;\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 Maintenance';\n case NotificationGroups.SERVICE_TICKETS:\n return `${this.getServiceTicketSubGroup()} 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 getServiceTicketSubGroup() {\n switch (this.notification?.subGroup) {\n case SubGroups.FacilityAccessVisitorAccess:\n case SubGroups.FacilityAccessPermanentBadge:\n case SubGroups.FacilityAccessOspAccess:\n case SubGroups.FacilityAccessPopPoeAccess:\n return 'Facility Access';\n default:\n return this.notification?.subGroup;\n }\n }\n\n /* eslint-disable lit-a11y/click-events-have-key-events */\n render() {\n return html`\n <div data-testid=\"notification-item\" class=\"relative notification-item\">\n <div\n class=\"hover:bg-[rgba(0,0,0,0.04)] p-2 pl-3.5 flex gap-3 relative cursor-pointer items-center font-bold ${this\n .read\n ? 'notification-item-read border-l-3 border-transparent'\n : 'notification-item-unread border-l-3 border-success'}\"\n >\n <ix-icon\n style=\"--ix-icon-font-size: 24px;--ix-icon-line-height: 24px;\"\n icon=${this.getNotificationIcon()}\n class=${this.read ? 'inactive-icon' : 'active-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 class=\"dlr-text-caption\">${this.getNotificationTitle()}</h2>\n </div>\n <div class=\"grow text-xs\">\n <h3 class=\"dlr-text-caption text-on-surface-disabled\">\n ${this.calculateDuration()}\n </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 data-testclass=\"notification-delete-confirmation\"\n >\n </confirmation-dialog>\n </div>\n <ix-icon-button\n style=\"--md-icon-button-icon-size:24px;\"\n data-testclass=\"delete-notification\"\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"]}
@@ -4,7 +4,7 @@ import { MobxLitElement } from '@adobe/lit-mobx';
4
4
  import { customElement, property } from 'lit/decorators.js';
5
5
  import '@digital-realty/ix-icon-button/ix-icon-button.js';
6
6
  import '@digital-realty/ix-button/ix-button.js';
7
- import { format } from 'date-fns/format.js';
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';
@@ -1 +1 @@
1
- {"version":3,"file":"view-item-dialog.js","sourceRoot":"","sources":["../../../../src/components/notifications/view-item-dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport { format } from 'date-fns/format.js';\nimport { TWStyles } from '../../tw.js';\nimport { Notification } from '../../models/notification.js';\nimport {\n NotificationGroups,\n SubGroups,\n} from '../../constants/notifications.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\n\n@customElement('view-item-dialog')\nexport class ViewItemDialog extends MobxLitElement {\n static get styles() {\n return [TWStyles, NotificationsStyle];\n }\n\n @property({ type: Object, attribute: false }) notification =\n {} as Notification;\n\n @property({ type: Boolean, attribute: true }) open = false;\n\n getUrl(): string {\n const ticketId = this.notification.resourceId;\n\n switch (this.notification.resourceType) {\n case NotificationGroups.PLANNED_MAINTENANCE:\n return `/service-management/reports?ticketId=${ticketId}`;\n case NotificationGroups.SERVICE_TICKETS:\n switch (this.notification.subGroup) {\n case SubGroups.Remote_Hands:\n return `/service-management/service-tickets/remote-hands/${ticketId}`;\n case SubGroups.Customer_Care:\n return `/service-management/service-tickets/customer-care/${ticketId}`;\n case SubGroups.Deliveries:\n return `/service-management/service-tickets/${SubGroups.Deliveries}/${ticketId}`;\n case SubGroups.Facility_Access:\n return `/service-management/service-tickets/facility-access/${ticketId}`;\n case SubGroups.Removals:\n return `/service-management/service-tickets/removals/${ticketId}`;\n case SubGroups.Trouble_Ticket:\n return `/service-management/service-tickets/trouble-tickets/${ticketId}`;\n case SubGroups.FacilityAccessVisitorAccess:\n return `/service-management/service-tickets/facility-access/visitor-access/${ticketId}`;\n case SubGroups.FacilityAccessPermanentBadge:\n return `/service-management/service-tickets/facility-access/permanent-badge/${ticketId}`;\n case SubGroups.FacilityAccessOspAccess:\n return `/service-management/service-tickets/facility-access/osp-access/${ticketId}`;\n case SubGroups.FacilityAccessPopPoeAccess:\n return `/service-management/service-tickets/facility-access/pop-poe-access/${ticketId}`;\n default:\n return '';\n }\n case NotificationGroups.INCIDENTS:\n return `/service-management/reports?ticketId=${ticketId}`;\n case NotificationGroups.DCIM_ALERTS:\n return `/dcim/${ticketId}`;\n default:\n return '';\n }\n }\n\n getLocation() {\n if (\n this.notification.locations === undefined ||\n this.notification.locations.length < 1\n ) {\n return '';\n }\n if (this.notification.locations.length > 1) {\n return 'Multiple Sites';\n }\n return this.notification.locations[0];\n }\n\n dialogClosed = () => {\n this.dispatchEvent(new CustomEvent('view-item-dialog-closed'));\n };\n\n viewRecord = () => {\n this.dialogClosed();\n NotificationsState.showDrawer = false;\n };\n\n getSubGroupDisplayName() {\n switch (this.notification.subGroup) {\n case SubGroups.FacilityAccessVisitorAccess:\n case SubGroups.FacilityAccessPermanentBadge:\n case SubGroups.FacilityAccessOspAccess:\n case SubGroups.FacilityAccessPopPoeAccess:\n return 'Facility Access';\n case 'Incidents (GSN)':\n return 'Incidents';\n case 'Emergency Repairs (InSite 1.0)':\n return 'Emergency Repairs';\n default:\n return this.notification.subGroup;\n }\n }\n\n render() {\n return html` <ix-dialog\n ?open=${this.open}\n @closed=${this.dialogClosed}\n class=\"notification-modal\"\n data-testclass=\"notification-modal\"\n >\n <div slot=\"headline\" class=\"w-[560px]\">\n <div class=\"flex flex-col flex-start\">\n <div class=\"notification-modal-title text-2xl font-bold text-balance\">\n ${this.notification.resourceType}\n </div>\n <div\n class=\"notification-modal-subtitle pt-4 pb-0 font-bold text-balance\"\n >\n ${this.getSubGroupDisplayName()}\n </div>\n </div>\n </div>\n <form\n class=\"notification-modal-content\"\n slot=\"content\"\n id=\"form-id\"\n method=\"dialog\"\n >\n <div\n class=\"notification-modal-content-title notification-modal-subject-title\"\n >\n Subject\n </div>\n <div class=\"notification-modal-subject-text font-normal text-wrap\">\n ${this.notification.subject}\n </div>\n <div\n class=\"notification-modal-content-title notification-modal-created-date-title\"\n >\n Create Date\n </div>\n <div class=\"notification-modal-created-date-text font-normal text-wrap\">\n ${format(\n new Date(this.notification.createdAt),\n 'dd/MM/yyyy HH:mm:ss'\n )}\n </div>\n <div\n class=\"notification-modal-content-title notification-modal-site-title\"\n >\n Site\n </div>\n <div class=\"notification-modal-site-text font-normal text-wrap\">\n ${this.getLocation()}\n </div>\n </form>\n <div slot=\"actions\" class=\"flex flex-row flex-end\">\n <ix-button\n data-testclass=\"close-item-modal\"\n form=\"form-id\"\n appearance=\"text\"\n >\n Close\n </ix-button>\n <ix-button\n data-testclass=\"view-record\"\n href=\"${this.getUrl()}\"\n @click=\"${this.viewRecord}\"\n appearance=\"text\"\n >View Record</ix-button\n >\n </div>\n </ix-dialog>`;\n }\n}\n"]}
1
+ {"version":3,"file":"view-item-dialog.js","sourceRoot":"","sources":["../../../../src/components/notifications/view-item-dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport { format } from 'date-fns';\nimport { TWStyles } from '../../tw.js';\nimport { Notification } from '../../models/notification.js';\nimport {\n NotificationGroups,\n SubGroups,\n} from '../../constants/notifications.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\n\n@customElement('view-item-dialog')\nexport class ViewItemDialog extends MobxLitElement {\n static get styles() {\n return [TWStyles, NotificationsStyle];\n }\n\n @property({ type: Object, attribute: false }) notification =\n {} as Notification;\n\n @property({ type: Boolean, attribute: true }) open = false;\n\n getUrl(): string {\n const ticketId = this.notification.resourceId;\n\n switch (this.notification.resourceType) {\n case NotificationGroups.PLANNED_MAINTENANCE:\n return `/service-management/reports?ticketId=${ticketId}`;\n case NotificationGroups.SERVICE_TICKETS:\n switch (this.notification.subGroup) {\n case SubGroups.Remote_Hands:\n return `/service-management/service-tickets/remote-hands/${ticketId}`;\n case SubGroups.Customer_Care:\n return `/service-management/service-tickets/customer-care/${ticketId}`;\n case SubGroups.Deliveries:\n return `/service-management/service-tickets/${SubGroups.Deliveries}/${ticketId}`;\n case SubGroups.Facility_Access:\n return `/service-management/service-tickets/facility-access/${ticketId}`;\n case SubGroups.Removals:\n return `/service-management/service-tickets/removals/${ticketId}`;\n case SubGroups.Trouble_Ticket:\n return `/service-management/service-tickets/trouble-tickets/${ticketId}`;\n case SubGroups.FacilityAccessVisitorAccess:\n return `/service-management/service-tickets/facility-access/visitor-access/${ticketId}`;\n case SubGroups.FacilityAccessPermanentBadge:\n return `/service-management/service-tickets/facility-access/permanent-badge/${ticketId}`;\n case SubGroups.FacilityAccessOspAccess:\n return `/service-management/service-tickets/facility-access/osp-access/${ticketId}`;\n case SubGroups.FacilityAccessPopPoeAccess:\n return `/service-management/service-tickets/facility-access/pop-poe-access/${ticketId}`;\n default:\n return '';\n }\n case NotificationGroups.INCIDENTS:\n return `/service-management/reports?ticketId=${ticketId}`;\n case NotificationGroups.DCIM_ALERTS:\n return `/dcim/${ticketId}`;\n default:\n return '';\n }\n }\n\n getLocation() {\n if (\n this.notification.locations === undefined ||\n this.notification.locations.length < 1\n ) {\n return '';\n }\n if (this.notification.locations.length > 1) {\n return 'Multiple Sites';\n }\n return this.notification.locations[0];\n }\n\n dialogClosed = () => {\n this.dispatchEvent(new CustomEvent('view-item-dialog-closed'));\n };\n\n viewRecord = () => {\n this.dialogClosed();\n NotificationsState.showDrawer = false;\n };\n\n getSubGroupDisplayName() {\n switch (this.notification.subGroup) {\n case SubGroups.FacilityAccessVisitorAccess:\n case SubGroups.FacilityAccessPermanentBadge:\n case SubGroups.FacilityAccessOspAccess:\n case SubGroups.FacilityAccessPopPoeAccess:\n return 'Facility Access';\n case 'Incidents (GSN)':\n return 'Incidents';\n case 'Emergency Repairs (InSite 1.0)':\n return 'Emergency Repairs';\n default:\n return this.notification.subGroup;\n }\n }\n\n render() {\n return html` <ix-dialog\n ?open=${this.open}\n @closed=${this.dialogClosed}\n class=\"notification-modal\"\n data-testclass=\"notification-modal\"\n >\n <div slot=\"headline\" class=\"w-[560px]\">\n <div class=\"flex flex-col flex-start\">\n <div class=\"notification-modal-title text-2xl font-bold text-balance\">\n ${this.notification.resourceType}\n </div>\n <div\n class=\"notification-modal-subtitle pt-4 pb-0 font-bold text-balance\"\n >\n ${this.getSubGroupDisplayName()}\n </div>\n </div>\n </div>\n <form\n class=\"notification-modal-content\"\n slot=\"content\"\n id=\"form-id\"\n method=\"dialog\"\n >\n <div\n class=\"notification-modal-content-title notification-modal-subject-title\"\n >\n Subject\n </div>\n <div class=\"notification-modal-subject-text font-normal text-wrap\">\n ${this.notification.subject}\n </div>\n <div\n class=\"notification-modal-content-title notification-modal-created-date-title\"\n >\n Create Date\n </div>\n <div class=\"notification-modal-created-date-text font-normal text-wrap\">\n ${format(\n new Date(this.notification.createdAt),\n 'dd/MM/yyyy HH:mm:ss'\n )}\n </div>\n <div\n class=\"notification-modal-content-title notification-modal-site-title\"\n >\n Site\n </div>\n <div class=\"notification-modal-site-text font-normal text-wrap\">\n ${this.getLocation()}\n </div>\n </form>\n <div slot=\"actions\" class=\"flex flex-row flex-end\">\n <ix-button\n data-testclass=\"close-item-modal\"\n form=\"form-id\"\n appearance=\"text\"\n >\n Close\n </ix-button>\n <ix-button\n data-testclass=\"view-record\"\n href=\"${this.getUrl()}\"\n @click=\"${this.viewRecord}\"\n appearance=\"text\"\n >View Record</ix-button\n >\n </div>\n </ix-dialog>`;\n }\n}\n"]}