sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

#2108 - Notifications Glocke

Browse Source
This commit is contained in:
Lorenz Hilpert
2021-09-27 13:36:55 +02:00
parent df19fc5ace
commit 5041be7831
9 changed files with 44 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/hub/notifications/src/lib/notifications.hub.ts
View File

@@ -9,5 +9,5 @@ export class NotificationsHub extends SignalrHub {
super(options);
}
notifications$ = this.listen('messageBoard');
notifications$ = this.listen<{ data: any[] }>('messageBoard');
}

2
apps/sales/src/app/app.module.ts
View File

@@ -62,6 +62,7 @@ import { DomainAvailabilityModule } from '@domain/availability';
import { CoreCommandModule } from '@core/command';
import { NotificationsHubModule, NOTIFICATIONS_HUB_OPTIONS } from '@hub/notifications';
import { SignalRHubOptions } from '@core/signalr';
import { UiIconModule } from '@ui/icon';
registerLocaleData(localeDe, localeDeExtra);
registerLocaleData(localeDe, 'de', localeDeExtra);
@@ -148,6 +149,7 @@ export function _notificationsHubOptionsFactory(config: AppConfiguration, sso: S
* @ui Modules
*/
UiModalModule.forRoot(),
UiIconModule,
/**
* @hub Modules

5
apps/sales/src/app/components/header/header.component.html
View File

@@ -19,7 +19,10 @@
<lib-icon width="25px" height="26px" name="Infoboard-branch"></lib-icon>
</a>
<div class="align-center" *ngIf="module === 0">
<lib-icon width="26px" height="26px" name="Notifictation"></lib-icon>
<button class="header-icon notification" type="button">
<span class="notification-counter" *ngIf="notificationCount$ | async; let count">{{ count }}</span>
<ui-icon icon="notification" size="26px"></ui-icon>
</button>
</div>
<div class="align-center" *ngIf="module === 1" (click)="notificationAction()">
<lib-icon width="26px" height="26px" name="Notifictation-branch"></lib-icon>

21
apps/sales/src/app/components/header/header.component.scss
View File

@@ -1,5 +1,26 @@
@import 'variables';
ui-icon {
@apply text-inactive-customer;
}
ui-icon.active {
@apply text-active-customer;
}
button.header-icon {
@apply border-none outline-none bg-transparent;
}
button.notification {
@apply relative;
}
.notification-counter {
@apply absolute -top-2 -right-1 bg-brand text-white block rounded-full w-5 h-5;
z-index: 10;
}
.header-wrapper {
background-color: white;
position: fixed;

8
apps/sales/src/app/components/header/header.component.ts
View File

@@ -3,8 +3,8 @@ import { LogOutComponent } from '../log-out/log-out.component';
import { DoubleChoiceSwitch, DoubleChoiceSwitchColor } from '@libs/ui';
import { ModuleSwitcher } from '../../core/models/app-switcher.enum';
import { ModuleSwitcherService } from '../../core/services/module-switcher.service';
import { Subject } from 'rxjs';
import { distinctUntilChanged, first, takeUntil } from 'rxjs/operators';
import { Observable, Subject } from 'rxjs';
import { distinctUntilChanged, first, map, takeUntil } from 'rxjs/operators';
import { Store } from '@ngxs/store';
import { ChangeCurrentRoute } from '../../core/store/actions/process.actions';
import { Router } from '@angular/router';
@@ -23,6 +23,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
module: ModuleSwitcher = ModuleSwitcher.Customer;
destroy$ = new Subject();
notifications$ = this._notificationsHub.notifications$;
notificationCount$ = this.notifications$.pipe(map((message) => message?.data?.length));
constructor(
private store: Store,
private router: Router,

2
apps/sales/src/app/modules/components.module.ts
View File

@@ -33,6 +33,7 @@ import { RemissionLeaveDialogComponent } from './remission/components/remission-
import { RemissionReminderDialogComponent } from './remission/components/remission-reminder-dialog/remission-reminder-dialog.component';
import { FilterButtonModule } from '@libs/ui/lib/filter-button';
import { RemissionStartedLeaveDialogComponent } from './remission/components/remission-started-leave-dialog';
import { UiIconModule } from '@ui/icon';
@NgModule({
declarations: [
@@ -70,6 +71,7 @@ import { RemissionStartedLeaveDialogComponent } from './remission/components/rem
ErrorModule,
DoubleChoiceSwitchModule,
FilterButtonModule,
UiIconModule,
],
exports: [
HeaderComponent,

5
apps/sales/src/assets/icons.svg
View File

@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
<g id="arrow" transform="matrix(2.41955,-4.81878e-16,4.81878e-16,2.41955,-195.984,-1652.27)">
<path d="M93.734,690.417C93.809,690.367 93.88,690.307 93.944,690.236C94.028,690.142 94.094,690.037 94.14,689.927C94.198,689.788 94.227,689.641 94.226,689.494C94.228,689.229 94.134,688.964 93.944,688.752C93.88,688.681 93.809,688.621 93.734,688.57L88.971,684.282C88.52,683.876 87.827,683.913 87.422,684.363C87.016,684.813 87.052,685.507 87.503,685.912L90.253,688.389L82.097,688.389C81.491,688.389 81,688.88 81,689.486C81,690.092 81.491,690.583 82.097,690.583L90.27,690.583L87.503,693.075C87.052,693.481 87.016,694.174 87.422,694.625C87.827,695.075 88.52,695.111 88.971,694.706L93.734,690.417Z"/>
</g>
@@ -199,4 +199,7 @@
<g id="logout1" serif:id="logout" transform="matrix(1.24954,0,0,1.24954,-1.13595,2)">
<path d="M17.906,6.091L15.724,6.091L15.724,3.818C15.724,2.914 14.991,2.182 14.088,2.182L4.727,2.182C3.824,2.182 3.091,2.914 3.091,3.818L3.091,18.364C3.091,19.267 3.824,20 4.727,20L14.088,20C14.991,20 15.724,19.267 15.724,18.364L15.724,16.091L17.906,16.091L17.906,18.364C17.906,20.472 16.196,22.182 14.088,22.182L4.727,22.182C2.619,22.182 0.909,20.472 0.909,18.364L0.909,3.818C0.909,1.709 2.619,0 4.727,0L14.088,0C16.196,-0 17.906,1.709 17.906,3.818L17.906,6.091ZM22.273,9.894C22.216,9.839 22.159,9.783 22.101,9.727C21.705,9.343 21.311,8.96 20.915,8.576C20.682,8.347 20.571,8.049 20.556,7.737C20.542,7.417 20.702,7.12 20.915,6.893C21.124,6.674 21.482,6.545 21.784,6.545C22.101,6.545 22.429,6.676 22.653,6.893L25.918,10.062C26.008,10.116 26.093,10.183 26.172,10.26C26.319,10.403 26.413,10.591 26.465,10.791C26.503,10.913 26.521,11.04 26.518,11.167C26.525,11.475 26.373,11.819 26.172,12.031C26.096,12.111 26.007,12.18 25.911,12.235L22.653,15.397C22.417,15.624 22.11,15.73 21.784,15.745C21.455,15.759 21.149,15.604 20.915,15.397C20.689,15.194 20.556,14.847 20.556,14.553C20.556,14.246 20.691,13.927 20.915,13.71L22.269,12.396L10.591,12.396C10.269,12.396 9.985,12.254 9.754,12.031C9.522,11.804 9.423,11.468 9.408,11.145C9.394,10.832 9.548,10.477 9.754,10.26C9.968,10.035 10.288,9.894 10.591,9.894L10.615,9.894C11.174,9.886 11.734,9.894 12.292,9.894L22.273,9.894Z" style="fill-rule:nonzero;"/>
</g>
<g id="notification1" serif:id="notification" transform="matrix(1.25425,0,0,1.25425,0.515909,-0.877993)">
<path d="M9.066,3.885C5.77,5.204 3.528,8.417 3.528,12.072C3.528,12.072 3.527,15.824 3.528,16.899C2.093,17.049 0.973,18.264 0.973,19.738C0.973,21.316 2.253,22.593 3.832,22.593L8.244,22.593C8.497,24.634 10.236,26.213 12.345,26.213C14.454,26.213 16.194,24.634 16.447,22.593L20.858,22.593C22.437,22.593 23.718,21.314 23.718,19.738C23.718,18.264 22.596,17.049 21.163,16.898C21.163,16.898 21.163,12.072 21.163,12.072C21.163,8.418 18.92,5.204 15.625,3.885C15.575,2.117 14.126,0.7 12.345,0.7C10.567,0.7 9.115,2.118 9.066,3.885ZM14.102,22.593C13.88,23.354 13.178,23.91 12.345,23.91C11.513,23.91 10.81,23.354 10.589,22.593L14.102,22.593ZM10.535,5.813L11.368,5.573L11.368,3.979C11.368,3.441 11.806,3.003 12.345,3.003C12.885,3.003 13.323,3.44 13.323,3.979L13.323,5.573L14.155,5.813C16.92,6.61 18.859,9.151 18.859,12.072C18.859,12.072 18.859,17.182 18.859,17.182C18.859,18.292 19.755,19.186 20.862,19.186C21.166,19.186 21.414,19.434 21.414,19.738C21.414,20.042 21.165,20.29 20.858,20.29L3.832,20.29C3.525,20.29 3.276,20.043 3.276,19.738C3.276,19.434 3.524,19.186 3.829,19.186C4.934,19.186 5.831,18.288 5.831,17.182C5.831,17.182 5.831,12.072 5.831,12.072C5.831,9.15 7.771,6.61 10.535,5.813Z" style="fill-rule:nonzero;stroke:black;stroke-width:1px;"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 101 KiB

BIN
assets/icons.afdesign
View File

Binary file not shown.

5
assets/icons.svg
View File

@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
<g id="arrow" transform="matrix(2.41955,-4.81878e-16,4.81878e-16,2.41955,-195.984,-1652.27)">
<path d="M93.734,690.417C93.809,690.367 93.88,690.307 93.944,690.236C94.028,690.142 94.094,690.037 94.14,689.927C94.198,689.788 94.227,689.641 94.226,689.494C94.228,689.229 94.134,688.964 93.944,688.752C93.88,688.681 93.809,688.621 93.734,688.57L88.971,684.282C88.52,683.876 87.827,683.913 87.422,684.363C87.016,684.813 87.052,685.507 87.503,685.912L90.253,688.389L82.097,688.389C81.491,688.389 81,688.88 81,689.486C81,690.092 81.491,690.583 82.097,690.583L90.27,690.583L87.503,693.075C87.052,693.481 87.016,694.174 87.422,694.625C87.827,695.075 88.52,695.111 88.971,694.706L93.734,690.417Z"/>
</g>
@@ -199,4 +199,7 @@
<g id="logout1" serif:id="logout" transform="matrix(1.24954,0,0,1.24954,-1.13595,2)">
<path d="M17.906,6.091L15.724,6.091L15.724,3.818C15.724,2.914 14.991,2.182 14.088,2.182L4.727,2.182C3.824,2.182 3.091,2.914 3.091,3.818L3.091,18.364C3.091,19.267 3.824,20 4.727,20L14.088,20C14.991,20 15.724,19.267 15.724,18.364L15.724,16.091L17.906,16.091L17.906,18.364C17.906,20.472 16.196,22.182 14.088,22.182L4.727,22.182C2.619,22.182 0.909,20.472 0.909,18.364L0.909,3.818C0.909,1.709 2.619,0 4.727,0L14.088,0C16.196,-0 17.906,1.709 17.906,3.818L17.906,6.091ZM22.273,9.894C22.216,9.839 22.159,9.783 22.101,9.727C21.705,9.343 21.311,8.96 20.915,8.576C20.682,8.347 20.571,8.049 20.556,7.737C20.542,7.417 20.702,7.12 20.915,6.893C21.124,6.674 21.482,6.545 21.784,6.545C22.101,6.545 22.429,6.676 22.653,6.893L25.918,10.062C26.008,10.116 26.093,10.183 26.172,10.26C26.319,10.403 26.413,10.591 26.465,10.791C26.503,10.913 26.521,11.04 26.518,11.167C26.525,11.475 26.373,11.819 26.172,12.031C26.096,12.111 26.007,12.18 25.911,12.235L22.653,15.397C22.417,15.624 22.11,15.73 21.784,15.745C21.455,15.759 21.149,15.604 20.915,15.397C20.689,15.194 20.556,14.847 20.556,14.553C20.556,14.246 20.691,13.927 20.915,13.71L22.269,12.396L10.591,12.396C10.269,12.396 9.985,12.254 9.754,12.031C9.522,11.804 9.423,11.468 9.408,11.145C9.394,10.832 9.548,10.477 9.754,10.26C9.968,10.035 10.288,9.894 10.591,9.894L10.615,9.894C11.174,9.886 11.734,9.894 12.292,9.894L22.273,9.894Z" style="fill-rule:nonzero;"/>
</g>
<g id="notification1" serif:id="notification" transform="matrix(1.25425,0,0,1.25425,0.515909,-0.877993)">
<path d="M9.066,3.885C5.77,5.204 3.528,8.417 3.528,12.072C3.528,12.072 3.527,15.824 3.528,16.899C2.093,17.049 0.973,18.264 0.973,19.738C0.973,21.316 2.253,22.593 3.832,22.593L8.244,22.593C8.497,24.634 10.236,26.213 12.345,26.213C14.454,26.213 16.194,24.634 16.447,22.593L20.858,22.593C22.437,22.593 23.718,21.314 23.718,19.738C23.718,18.264 22.596,17.049 21.163,16.898C21.163,16.898 21.163,12.072 21.163,12.072C21.163,8.418 18.92,5.204 15.625,3.885C15.575,2.117 14.126,0.7 12.345,0.7C10.567,0.7 9.115,2.118 9.066,3.885ZM14.102,22.593C13.88,23.354 13.178,23.91 12.345,23.91C11.513,23.91 10.81,23.354 10.589,22.593L14.102,22.593ZM10.535,5.813L11.368,5.573L11.368,3.979C11.368,3.441 11.806,3.003 12.345,3.003C12.885,3.003 13.323,3.44 13.323,3.979L13.323,5.573L14.155,5.813C16.92,6.61 18.859,9.151 18.859,12.072C18.859,12.072 18.859,17.182 18.859,17.182C18.859,18.292 19.755,19.186 20.862,19.186C21.166,19.186 21.414,19.434 21.414,19.738C21.414,20.042 21.165,20.29 20.858,20.29L3.832,20.29C3.525,20.29 3.276,20.043 3.276,19.738C3.276,19.434 3.524,19.186 3.829,19.186C4.934,19.186 5.831,18.288 5.831,17.182C5.831,17.182 5.831,12.072 5.831,12.072C5.831,9.15 7.771,6.61 10.535,5.813Z" style="fill-rule:nonzero;stroke:black;stroke-width:1px;"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 101 KiB