From 366ad6da92b302a8eccec9dae5cae6d96365a2e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Fri, 3 Feb 2023 17:42:59 +0300 Subject: [PATCH 1/4] add visible$ property to nav items --- .../components/nav-items/nav-items.component.html | 12 ++++-------- .../packages/theme-shared/src/lib/models/nav-item.ts | 8 +++++++- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html index 2b1949a0eb..4e73007ad2 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html @@ -1,17 +1,13 @@ + \ No newline at end of file diff --git a/npm/ng-packs/packages/theme-shared/src/lib/models/nav-item.ts b/npm/ng-packs/packages/theme-shared/src/lib/models/nav-item.ts index 62ccf32ff3..ce1bf31518 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/models/nav-item.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/models/nav-item.ts @@ -1,4 +1,5 @@ import { Type } from '@angular/core'; +import { Observable, of } from 'rxjs'; export class NavItem { id?: string | number; @@ -8,8 +9,13 @@ export class NavItem { order?: number; requiredPolicy?: string; visible?: () => boolean; + visible$?: Observable; constructor(props: Partial) { - props = { ...props, visible: props.visible || (() => true) }; + props = { + ...props, + visible: props.visible || (() => true), + visible$: props.visible$ || of(true), + }; Object.assign(this, props); } } From 5d3625f452effecf8133b2fa074abb85222bb710 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Mon, 6 Feb 2023 09:08:25 +0300 Subject: [PATCH 2/4] fix formatting --- .../lib/components/nav-items/nav-items.component.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html index 4e73007ad2..1cc5a4370f 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html @@ -2,8 +2,13 @@
  • - + +
    From 5dd2c534f2c51f17623031564bd8aaa7638cc10d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Tue, 7 Feb 2023 11:25:19 +0300 Subject: [PATCH 3/4] create visible directive --- .../theme-shared/src/lib/directives/index.ts | 1 + .../src/lib/directives/visible.directive.ts | 59 +++++++++++++++++++ .../src/lib/theme-shared.module.ts | 2 + 3 files changed, 62 insertions(+) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts index b0a79877fe..3f22a36f1b 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts @@ -2,3 +2,4 @@ export * from './ellipsis.directive'; export * from './loading.directive'; export * from './ngx-datatable-default.directive'; export * from './ngx-datatable-list.directive'; +export * from './visible.directive'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts new file mode 100644 index 0000000000..9c2c408d0e --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts @@ -0,0 +1,59 @@ +import { OnInit, Directive, OnDestroy, Input, ViewContainerRef, TemplateRef } from '@angular/core'; +import { EMPTY, from, Observable, of, Subscription } from 'rxjs'; + +@Directive({ + selector: '[abpVisible]', +}) +export class AbpVisibleDirective implements OnDestroy, OnInit { + conditionSubscription: Subscription | undefined; + isVisible: boolean | undefined; + + @Input('abpVisible') set abpVisible( + value: boolean | Promise | Observable | undefined | null, + ) { + this.condition$ = checkType(value); + this.subscribeToCondition(); + } + + private condition$: Observable = of(false); + + constructor( + private viewContainerRef: ViewContainerRef, + private templateRef: TemplateRef, + ) {} + ngOnInit(): void { + this.updateVisibility(); + } + ngOnDestroy(): void { + this.conditionSubscription?.unsubscribe(); + } + + private subscribeToCondition() { + this.conditionSubscription = this.condition$.subscribe(value => { + this.isVisible = value; + this.updateVisibility(); + }); + } + private updateVisibility() { + this.viewContainerRef.clear(); + // it should be false not falsy + if (this.isVisible === false) { + return; + } + this.viewContainerRef.createEmbeddedView(this.templateRef); + } +} + +function checkType(value: boolean | Promise | Observable | undefined | null) { + if (value instanceof Promise) { + return from(value); + } else if (value instanceof Observable) { + return value; + } else if (typeof value === 'boolean') { + return of(value); + } else if (value === undefined || value === null) { + return of(true); + } else { + return EMPTY; + } +} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts index fd9a0cd236..20c7de13d4 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts @@ -36,6 +36,7 @@ import { HTTP_ERROR_CONFIG, httpErrorConfigFactory } from './tokens/http-error.t import { DateParserFormatter } from './utils/date-parser-formatter'; import { CONFIRMATION_ICONS, DEFAULT_CONFIRMATION_ICONS } from './tokens/confirmation-icons.token'; import { PasswordComponent } from './components/password/password.component'; +import { AbpVisibleDirective } from './directives'; const declarationsWithExports = [ BreadcrumbComponent, @@ -52,6 +53,7 @@ const declarationsWithExports = [ NgxDatatableListDirective, LoadingDirective, ModalCloseDirective, + AbpVisibleDirective, ]; @NgModule({ From 76ccfca4ae0ef4deba65fdc3c0593e5070ab57bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Tue, 7 Feb 2023 11:26:06 +0300 Subject: [PATCH 4/4] use visible directive for checking visibility --- .../nav-items/current-user.component.html | 2 +- .../components/nav-items/nav-items.component.html | 4 ++-- .../theme-shared/src/lib/models/nav-item.ts | 15 +++++++-------- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html index 3484c452a0..8dab9ea8fd 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html @@ -32,7 +32,7 @@ [class.d-block]="smallScreen && currentUserDropdown.isOpen()" > - +
  • - +
  • void; order?: number; requiredPolicy?: string; - visible?: () => boolean; - visible$?: Observable; + visible?: NavBarPropPredicate; constructor(props: Partial) { - props = { - ...props, - visible: props.visible || (() => true), - visible$: props.visible$ || of(true), - }; Object.assign(this, props); } } + +export type NavBarPropPredicate = ( + prop?: T, + injector?: Injector, +) => boolean | Promise | Observable;