spiderly 0.0.8 → 19.0.1

package/src/lib/components/card-skeleton/card-skeleton.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input } from "@angular/core";
+import { SkeletonModule } from 'primeng/skeleton';
+
+@Component({
+    selector: 'card-skeleton',
+    templateUrl: './card-skeleton.component.html',
+    styles: [],
+    imports: [SkeletonModule]
+})
+export class CardSkeletonComponent {
+  @Input() height: number = 400;
+  titleHeight: number = 23;
+  dataHeight: number;
+  padding: number = 21;
+  titleMarginBottom: number = 14;
+  titleMarginTop: number = 4;
+
+  ngOnInit(){
+    this.dataHeight = this.height - (this.titleHeight + this.padding * 2 + this.titleMarginBottom + this.titleMarginTop)
+  }
+}

package/src/lib/components/footer/app.footer.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { ConfigBaseService } from '../../services/config-base.service'
+
+@Component({
+    selector: 'footer',
+    templateUrl: './app.footer.component.html',
+    standalone: true
+})
+export class FooterComponent {
+    companyName: string = this.config.companyName;
+
+    constructor(
+        private config: ConfigBaseService
+    ) { 
+
+    }
+}

package/src/lib/components/footer/footer.component.html

@@ -0,0 +1,3 @@
+<div class="layout-footer">
+    <span class="font-medium ml-2">{{companyName}}</span>
+</div>

package/src/lib/components/footer/footer.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { ConfigBaseService } from '../../services/config-base.service'
+
+@Component({
+    selector: 'footer',
+    templateUrl: './footer.component.html',
+    standalone: true
+})
+export class FooterComponent {
+    companyName: string = this.config.companyName;
+
+    constructor(
+        private config: ConfigBaseService
+    ) { 
+
+    }
+}

package/src/lib/components/index-card/index-card.component.html

@@ -0,0 +1,15 @@
+<div [ngClass]="{
+	'last-child-zero-margin': last,
+    'card-margin-bottom': true,
+	}">
+	<spiderly-panel [crudMenu]="crudMenu" [showCrudMenu]="showCrudMenu" (onMenuIconClick)="menuIconClick($event)" [showRemoveIcon]="showRemoveIcon" (onRemoveIconClick)="removeIconClick()" [index]="index">
+		<panel-header [title]="header" [index]="index" [showIcon]="false"></panel-header>
+		
+		<panel-body>
+			<ng-content>
+				<!-- Custom things below description -->
+			</ng-content>
+		</panel-body>
+		
+	</spiderly-panel>
+</div>

package/src/lib/components/index-card/index-card.component.ts

@@ -0,0 +1,48 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { MenuItem } from 'primeng/api';
+import { SpiderlyPanelsModule } from "../spiderly-panels/spiderly-panels.module";
+import { PrimengModule } from '../../modules/primeng.module';
+
+@Component({
+    selector: 'index-card',
+    templateUrl: './index-card.component.html',
+    imports: [
+        CommonModule,
+        PrimengModule,
+        SpiderlyPanelsModule
+    ]
+})
+export class IndexCardComponent {
+    @Input() last: boolean;
+    @Input() index: number;
+    @Input() header: string = '';
+    @Input() description: string;
+    @Input() showRemoveIcon: boolean;
+    @Input() showCrudMenu: boolean = true;
+
+    @Input() crudMenu: MenuItem[];
+
+    @Output() onMenuIconClick = new EventEmitter<number>();
+    @Output() onRemoveIconClick = new EventEmitter<null>();
+    
+    constructor(
+        protected formBuilder: FormBuilder,
+    ) {
+
+    }
+
+    ngOnInit(){
+        // console.log(this.last);
+    }
+
+    menuIconClick(index: number){
+        this.onMenuIconClick.next(index);
+    }
+
+    removeIconClick(){
+        this.onRemoveIconClick.next(null);
+    }
+
+}

package/src/lib/components/info-card/info-card.component.html

@@ -0,0 +1,18 @@
+<div class="card responsive-card-padding" style="background-color: var(--p-primary-100); position: relative; overflow: hidden;">
+    <!-- TODO FT: Translate -->
+    <div style="display: flex; align-items: center; gap: 21px; position: relative; z-index: 2;">
+      <i class="pi pi-info-circle" style="font-size: 26px; color: var(--p-primary-color);"></i>
+      <div>
+          <div class="header" style="color:var(--p-primary-color); font-weight: 600; text-align: left;">
+              {{header}}
+          </div>
+          <div style="text-align: left; margin-top: 8px;">
+            <ng-content></ng-content>
+          </div>
+      </div>
+    </div>
+
+    <div class="card-overflow-icon" style="position: absolute; overflow: hidden; right: 8px; top: -25px; z-index: 1;">
+      <i class="pi pi-info-circle" style="font-size: 270px;"></i>
+    </div>
+  </div>

package/src/lib/components/info-card/info-card.component.ts

@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { SpiderlyPanelsModule } from "../spiderly-panels/spiderly-panels.module";
+import { PrimengModule } from '../../modules/primeng.module';
+
+@Component({
+    selector: 'info-card',
+    templateUrl: './info-card.component.html',
+    imports: [
+        CommonModule,
+        PrimengModule,
+        SpiderlyPanelsModule
+    ]
+})
+export class InfoCardComponent {
+    @Input() public header: string = '';
+    @Input() public description: string;
+    
+    constructor(
+        protected formBuilder: FormBuilder,
+        ) {
+
+        }
+
+    ngOnInit(){
+    }
+
+}

package/src/lib/components/layout/layout-base.component.ts

@@ -0,0 +1,140 @@
+import { Component, OnDestroy, Renderer2, ViewChild } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter, Subscription } from 'rxjs';
+import { AppSidebarComponent } from './sidebar/sidebar.component';
+import { AppTopBarComponent } from './topbar/topbar.component';
+import { LayoutBaseService } from '../../services/app-layout-base.service';
+
+@Component({
+    selector: 'layout-base',
+    template: '',
+    standalone: true
+})
+export class LayoutBaseComponent implements OnDestroy {
+
+    overlayMenuOpenSubscription: Subscription;
+
+    menuOutsideClickListener: any;
+
+    profileMenuOutsideClickListener: any;
+
+    @ViewChild(AppSidebarComponent) appSidebar!: AppSidebarComponent;
+
+    @ViewChild(AppTopBarComponent) appTopbar!: AppTopBarComponent;
+
+    constructor(
+        protected layoutService: LayoutBaseService, 
+        protected renderer: Renderer2, 
+        protected router: Router,
+    ) {
+        this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
+            if (!this.menuOutsideClickListener) {
+                this.menuOutsideClickListener = this.renderer.listen('document', 'click', event => {
+                    const isOutsideClicked = !(
+                        this.appSidebar.el.nativeElement.isSameNode(event.target) || 
+                        this.appSidebar.el.nativeElement.contains(event.target) ||
+                        this.appTopbar.menuButton.nativeElement.isSameNode(event.target) || 
+                        this.appTopbar.menuButton.nativeElement.contains(event.target) ||
+                        (event.target.closest('.p-autocomplete-items')) ||
+                        (event.target.closest('.p-autocomplete-clear-icon'))
+                    );
+                    
+                    if (isOutsideClicked) {
+                        this.hideMenu();
+                    }
+                });
+            }
+
+            if (!this.profileMenuOutsideClickListener) {
+                this.profileMenuOutsideClickListener = this.renderer.listen('document', 'click', event => {
+                    const isOutsideClicked = !(
+                        this.appTopbar.menu.nativeElement.isSameNode(event.target) || 
+                        this.appTopbar.menu.nativeElement.contains(event.target)
+                    );
+
+                    if (isOutsideClicked) {
+                        this.hideProfileMenu();
+                    }
+                });
+            }
+
+            if (this.layoutService.state.staticMenuMobileActive) {
+                this.blockBodyScroll();
+            }
+        });
+
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe(() => {
+                this.hideMenu();
+                this.hideProfileMenu();
+            });
+    }
+
+    hideMenu() {
+        this.layoutService.state.overlayMenuActive = false;
+        this.layoutService.state.staticMenuMobileActive = false;
+        this.layoutService.state.menuHoverActive = false;
+        if (this.menuOutsideClickListener) {
+            this.menuOutsideClickListener();
+            this.menuOutsideClickListener = null;
+        }
+        this.unblockBodyScroll();
+    }
+
+    hideProfileMenu() {
+        this.layoutService.state.profileSidebarVisible = false;
+        if (this.profileMenuOutsideClickListener) {
+            this.profileMenuOutsideClickListener();
+            this.profileMenuOutsideClickListener = null;
+        }
+    }
+
+    blockBodyScroll(): void {
+        if (document.body.classList) {
+            document.body.classList.add('blocked-scroll');
+        }
+        else {
+            document.body.className += ' blocked-scroll';
+        }
+    }
+
+    unblockBodyScroll(): void {
+        if (document.body.classList) {
+            document.body.classList.remove('blocked-scroll');
+        }
+        else {
+            document.body.className = document.body.className.replace(new RegExp('(^|\\b)' +
+                'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+        }
+    }
+
+    get containerClass() {
+        return {
+            'layout-theme-light': this.layoutService.layoutConfig.colorScheme === 'light',
+            'layout-theme-dark': this.layoutService.layoutConfig.colorScheme === 'dark',
+            'layout-overlay': this.layoutService.layoutConfig.menuMode === 'overlay',
+            'layout-static': this.layoutService.layoutConfig.menuMode === 'static',
+            'layout-static-inactive': this.layoutService.state.staticMenuDesktopInactive && this.layoutService.layoutConfig.menuMode === 'static',
+            'layout-overlay-active': this.layoutService.state.overlayMenuActive,
+            'layout-mobile-active': this.layoutService.state.staticMenuMobileActive,
+            'p-input-filled': this.layoutService.layoutConfig.inputStyle === 'filled',
+            'p-ripple-disabled': !this.layoutService.layoutConfig.ripple
+        }
+    }
+
+    ngOnDestroy() {
+        if (this.overlayMenuOpenSubscription) {
+            this.overlayMenuOpenSubscription.unsubscribe();
+        }
+
+        if (this.menuOutsideClickListener) {
+            this.menuOutsideClickListener();
+        }
+
+        this.onAfterNgDestroy();
+    }
+
+    onAfterNgDestroy = () => {}
+    
+}
+

package/src/lib/components/layout/sidebar/menuitem.component.html

@@ -0,0 +1,40 @@
+<ng-container *transloco="let t">
+    <div *ngIf="root && item.visible === true" class="layout-menuitem-root-text">{{item.label}}</div>
+    <a *ngIf="(!item.routerLink || item.items) && item.visible === true" [attr.href]="item.url" (click)="itemClick($event)"
+       [ngClass]="item.styleClass" [attr.target]="item.target" tabindex="0" pRipple>
+        <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+        <span class="layout-menuitem-text">{{item.label}}</span>
+        <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
+    </a>
+    <a *ngIf="(item.routerLink && !item.items) && item.visible === true" (click)="itemClick($event)" [ngClass]="item.styleClass"
+    [routerLink]="item.routerLink" routerLinkActive="active-route" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }"
+    [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment"
+    [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state" [queryParams]="item.queryParams"
+    [attr.target]="item.target" tabindex="0" pRipple>
+        <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+        <span class="layout-menuitem-text">{{item.label}}</span>
+        <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
+    </a>
+
+    <ul *ngIf="item.items && item.visible === true" [@children]="submenuAnimation">
+        <ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
+            <li menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child.badgeStyleClass"></li>
+        </ng-template>
+    </ul>
+
+    <!-- Delete this in the future iterations, make link to partner in /partners page -->
+    <spiderly-autocomplete
+    *ngIf="item.showPartnerDialog"
+    [control]="selectedPartner"
+    [options]="partnerOptions"
+    (onTextInput)="searchPartners($event)"
+    label=""
+    [placeholder]="t('SelectThePartner')"
+    [showAddon]="true"
+    (onButtonClick)="partnersAutocompleteButtonClick()"
+    addonIcon="pi pi-check"
+    [emptyMessage]="t('LeftCornerPartnersEmptyMessage')"
+    class="mobile-stay-open"
+    ></spiderly-autocomplete>
+     
+</ng-container>

package/src/lib/components/layout/sidebar/menuitem.component.ts

@@ -0,0 +1,179 @@
+import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { SidebarMenuService } from './sidebar-menu.service';
+import { SpiderlyMenuItem } from './sidebar-menu.component';
+import { AutoCompleteCompleteEvent } from 'primeng/autocomplete';
+import { SpiderlyFormControl } from '../../spiderly-form-control/spiderly-form-control';
+import { PrimengOption } from '../../../entities/primeng-option';
+import { LayoutBaseService } from '../../../services/app-layout-base.service';
+import { AuthBaseService } from '../../../services/auth-base.service';
+import { ApiSecurityService } from '../../../services/api.service.security';
+import { ConfigBaseService } from '../../../services/config-base.service';
+import { CommonModule } from '@angular/common';
+import { PrimengModule } from '../../../modules/primeng.module';
+import { SpiderlyControlsModule } from '../../../controls/spiderly-controls.module';
+import { TranslocoDirective } from '@jsverse/transloco';
+
+@Component({
+    // eslint-disable-next-line @angular-eslint/component-selector
+    selector: '[menuitem]',
+    templateUrl: './menuitem.component.html',
+    animations: [
+        trigger('children', [
+            state('collapsed', style({
+                height: '0'
+            })),
+            state('expanded', style({
+                height: '*'
+            })),
+            transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+        ])
+    ],
+    imports: [
+        CommonModule,
+        RouterModule,
+        PrimengModule,
+        TranslocoDirective,
+        SpiderlyControlsModule,
+    ]
+})
+export class MenuitemComponent implements OnInit, OnDestroy {
+
+    @Input() item: SpiderlyMenuItem;
+
+    @Input() index!: number;
+
+    @Input() @HostBinding('class.layout-root-menuitem') root!: boolean;
+
+    @Input() parentKey!: string;
+
+    active = false;
+
+    private menuSourceSubscription: Subscription;
+
+    private menuResetSubscription: Subscription;
+
+    private permissionSubscription: Subscription | null = null;
+
+    key: string = "";
+
+    selectedPartner: SpiderlyFormControl = new SpiderlyFormControl<string>(null, { updateOn: 'change' });
+
+    partnerOptions: PrimengOption[];
+
+    constructor(
+        public layoutService: LayoutBaseService, 
+        private cd: ChangeDetectorRef, 
+        public router: Router, 
+        private menuService: SidebarMenuService, 
+        private authService: AuthBaseService,
+        private apiService: ApiSecurityService,
+        private config: ConfigBaseService
+    ) {
+        this.menuSourceSubscription = this.menuService.menuSource$.subscribe(value => {
+            Promise.resolve(null).then(() => {
+                if (value.routeEvent) {
+                    this.active = (value.key === this.key || value.key.startsWith(this.key + '-')) ? true : false;
+                }
+                else {
+                    if (value.key !== this.key && !value.key.startsWith(this.key + '-')) {
+                        this.active = false;
+                    }
+                }
+            });
+        });
+
+        this.menuResetSubscription = this.menuService.resetSource$.subscribe(() => {
+            this.active = false;
+        });
+
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe(params => {
+                if (this.item.routerLink) {
+                    this.updateActiveStateFromRoute();
+                }
+            });
+    }
+
+    ngOnInit() {
+        this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
+        
+        if (this.item.routerLink) {
+            this.updateActiveStateFromRoute();
+        }
+
+        this.permissionSubscription = this.authService.currentUserPermissionCodes$.subscribe((currentUserPermissionCodes: string[]) => {
+            if (this.item && typeof this.item.hasPermission === 'function') {
+                this.item.visible = this.item.hasPermission(currentUserPermissionCodes);
+            }
+        });
+    }
+
+    updateActiveStateFromRoute() {
+        let activeRoute = this.router.isActive(this.item.routerLink[0], { paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' });
+
+        if (activeRoute) {
+            this.menuService.onMenuStateChange({ key: this.key, routeEvent: true });
+        }
+    }
+
+    itemClick(event: Event) {
+        // avoid processing disabled items
+        if (this.item.disabled || event === null) {
+            event.preventDefault();
+            return;
+        }
+
+        // execute command
+        if (this.item.command) {
+            this.item.command({ originalEvent: event, item: this.item });
+        }
+
+        // toggle active state
+        if (this.item.items) {
+            this.active = !this.active;
+        }
+        
+        this.menuService.onMenuStateChange({ key: this.key });
+    }
+
+    get submenuAnimation() {
+        return this.root ? 'expanded' : (this.active ? 'expanded' : 'collapsed');
+    }
+
+    @HostBinding('class.active-menuitem') 
+    get activeClass() {
+        return this.active && !this.root;
+    }
+
+    //#region FT HACK: Partner
+
+    searchPartners(event: AutoCompleteCompleteEvent) {
+        this.layoutService.searchPartners(event).subscribe(po => {
+            this.partnerOptions = po;    
+        })
+    }
+
+    partnersAutocompleteButtonClick = async () => {
+        this.layoutService.partnersAutocompleteButtonClick(this.selectedPartner);
+    }
+
+    //#endregion
+
+    ngOnDestroy() {
+        if (this.menuSourceSubscription) {
+            this.menuSourceSubscription.unsubscribe();
+        }
+
+        if (this.menuResetSubscription) {
+            this.menuResetSubscription.unsubscribe();
+        }
+
+        if (this.permissionSubscription) {
+            this.permissionSubscription.unsubscribe();
+        }
+    }
+}

package/src/lib/components/layout/sidebar/sidebar-menu.component.html

@@ -0,0 +1,6 @@
+<ul class="layout-menu">
+    <ng-container *ngFor="let item of menu; let i = index;">
+        <li menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
+        <li *ngIf="item.separator" class="gray-separator" style="margin-top: 11px;"></li>
+    </ng-container>
+</ul>

package/src/lib/components/layout/sidebar/sidebar-menu.component.ts

@@ -0,0 +1,44 @@
+import { TranslocoService } from '@jsverse/transloco';
+import { Input, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { LayoutBaseService } from '../../../services/app-layout-base.service';
+import { AuthBaseService } from '../../../services/auth-base.service';
+import { ConfigBaseService } from '../../../services/config-base.service';
+import { MenuitemComponent } from './menuitem.component';
+import { CommonModule } from '@angular/common';
+
+export interface SpiderlyMenuItem extends MenuItem{
+    hasPermission?: (permissionCodes: string[]) => boolean;
+    showPartnerDialog?: boolean; 
+}
+
+@Component({
+    selector: 'sidebar-menu', // FT: Don't chane selector to 'menu', because other style will apply to it
+    templateUrl: './sidebar-menu.component.html',
+    imports: [
+        CommonModule,
+        MenuitemComponent
+    ]
+})
+export class SidebarMenuComponent implements OnInit {
+    @Input() menu: SpiderlyMenuItem[];
+
+    constructor(
+        public layoutService: LayoutBaseService, 
+        private authService: AuthBaseService,
+        private translocoService: TranslocoService,
+        private config: ConfigBaseService
+    ) {
+        
+    }
+
+    ngOnInit() {
+    }
+
+
+    ngOnDestroy(): void {
+
+    }
+
+}

package/src/lib/components/layout/sidebar/sidebar-menu.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { MenuChangeEvent } from '../../../entities/menuchangeevent';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class SidebarMenuService {
+    private menuSource = new Subject<MenuChangeEvent>();
+    private resetSource = new Subject();
+
+    menuSource$ = this.menuSource.asObservable();
+    resetSource$ = this.resetSource.asObservable();
+
+    onMenuStateChange(event: MenuChangeEvent) {
+        this.menuSource.next(event);
+    }
+
+    reset() {
+        this.resetSource.next(true);
+    }
+}

package/src/lib/components/layout/sidebar/sidebar.component.html

@@ -0,0 +1 @@
+ <sidebar-menu [menu]="menu"></sidebar-menu>

package/src/lib/components/layout/sidebar/sidebar.component.ts

@@ -0,0 +1,20 @@
+import { Component, ElementRef, Input } from '@angular/core';
+import { SidebarMenuComponent, SpiderlyMenuItem } from './sidebar-menu.component';
+
+@Component({
+    selector: 'sidebar',
+    templateUrl: './sidebar.component.html',
+    imports: [
+        SidebarMenuComponent
+    ]
+})
+export class AppSidebarComponent {
+    @Input() menu: SpiderlyMenuItem[];
+
+    constructor(public el: ElementRef) { 
+    }
+
+    ngOnInit(){
+    }
+}
+