@cityway/bo-ui 1.0.0 → 1.0.1

package/src/lib/components/layout/title-breadcrumb/title-breadcrumb.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { TitleBreadcrumbComponent } from './title-breadcrumb.component';
+
+describe('TitleBreadcrumbComponent', () => {
+  let component: TitleBreadcrumbComponent;
+  let fixture: ComponentFixture<TitleBreadcrumbComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TitleBreadcrumbComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TitleBreadcrumbComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/layout/title-breadcrumb/title-breadcrumb.component.ts

@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-title-breadcrumb',
+  templateUrl: './title-breadcrumb.component.html',
+  standalone: true,
+  imports: [
+    TranslateModule,
+    CommonModule
+  ]
+})
+export class TitleBreadcrumbComponent {
+  @Input() heading: string;
+}

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

@@ -0,0 +1,23 @@
+<div *ngIf="legend.title" class="legend-title">
+  {{ '_COMMON._TABLE.LEGEND' | translate }}
+</div>
+<ul class="list-inline legend-items">
+  @for (item of legend.data; track $index) {
+    <li class="list-inline-item legend-item">
+        @switch (item.type) {
+          @case (legendTypeEnum.icon) {
+            <app-icon [icon]="item.icon" [label]="item.label" [iconCssClass]="'text-' + item.colorUi" [iconColorCustom]="item.colorCustom">
+            </app-icon>
+          }
+          @case (legendTypeEnum.badge) {
+            <app-badge [type]="item.colorUi" [label]="item.labelBadge"></app-badge>
+            {{item.label}}
+          }
+          @case (legendTypeEnum.color) {
+            <span class="legend-item-color" [ngClass]="item.colorUi ?'legend-' + item.colorUi : ''" [style.background-color]="item.colorCustom"></span>
+            {{item.label}}
+          }
+        }
+    </li>
+  }
+</ul>

package/src/lib/components/legend/legend.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LegendComponent } from './legend.component';
+
+describe('LegendComponen', () => {
+  let component: LegendComponent;
+  let fixture: ComponentFixture<LegendComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LegendComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LegendComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { LegendTypeEnum } from '../../enum/legend-type.enum';
+import { Legend } from '../../models/ui/legend.model';
+import { BadgeComponent } from '../badge/badge.component';
+import { IconComponent } from '../icon/icon.component';
+
+@Component({
+  selector: 'app-legend',
+  templateUrl: './legend.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IconComponent,
+    BadgeComponent,
+    TranslateModule
+  ]
+})
+export class LegendComponent {
+
+  @Input() legend: Legend;
+
+  public legendTypeEnum = LegendTypeEnum;
+
+  constructor() { }
+
+}

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

@@ -0,0 +1,4 @@
+<div class="animated-loader-container animated-loader-medium animated-loader-container-top">
+  <div class="animated-loader mb-1" aria-live="assertive"></div>
+  <div class="animated-loader-text">{{ '_COMMON._HTTP.TXT_LOADING' | translate }}</div>
+</div>

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

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-loader',
+  templateUrl: './loader.component.html',
+  standalone: true,
+  imports: [
+    TranslateModule
+  ]
+})
+export class LoaderComponent {
+
+  constructor() { }
+
+}

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

@@ -0,0 +1,71 @@
+@if (type !== modalsType.loader) {
+  <div class="modal-header">
+    @if (type === modalsType.delete) {
+      <h1 class="modal-title" id="modal-basic-title">
+        {{ '_COMMON._MODAL_DELETE.TITLE' | translate: { number: itemsToDelete.length, name: itemsToDeleteTitle } }}
+      </h1>
+    }
+    @else {
+      <h1 class="modal-title" id="modal-basic-title">
+        {{ modalTitle | translate }}
+      </h1>
+    }
+
+    <button type="button" class="btn-close" [attr.aria-label]="'_COMMON._ACTION.CLOSE' | translate"
+      (click)="activeModal.dismiss()" data-test-ctw="btn-close-modal">
+    </button>
+  </div>
+
+  <div class="modal-body">
+    @if (type === modalsType.delete) {
+      @if (itemsToDelete.length === 1) {
+        <div [innerHTML]="'_COMMON._MODAL_DELETE.SIMPLE_TEXT' | translate"></div>
+      }
+      @if (itemsToDelete.length > 1) {
+        <div [innerHTML]="'_COMMON._MODAL_DELETE.MULTIPLE_TEXT' | translate"></div>
+      }
+      @if (itemsToDelete.length > 0) {
+        <ul class="mb-0">
+          @for (item of itemsToDelete; track item) {
+            <li>{{ item }}</li>
+          }
+        </ul>
+      }
+    }
+    @else if (type === modalsType.custom || type === modalsType.quickSideView) {
+      @if (customBodyTemplate) {
+        <ng-container [ngTemplateOutlet]="customBodyTemplate" [ngTemplateOutletContext]="customBodyContext">
+        </ng-container>
+      }
+    }
+  </div>
+
+  <div class="modal-footer">
+    @if (type === modalsType.delete) {
+      <app-button label="_COMMON._ACTION.DELETE" [type]="buttonTypeEnum.danger" [isMinWidth]="true"
+        (btnAction)="actionClick()" dataTest="btn-action-modal">
+      </app-button>
+
+      <app-button label="_COMMON._ACTION.CANCEL" [type]="buttonTypeEnum.secondary" [isMinWidth]="true"
+        (btnAction)="activeModal.dismiss()" dataTest="btn-close-modal">
+      </app-button>
+    }
+    @else {
+      @if(labelBtnAction) {
+        <app-button [label]="labelBtnAction | translate" [type]="buttonTypeEnum.primary" [isMinWidth]="true"
+          (btnAction)="actionClick()" dataTest="btn-close-modal">
+        </app-button>
+      }
+
+      <app-button label="_COMMON._ACTION.CLOSE" [type]="buttonTypeEnum.secondary" [isMinWidth]="true"
+        (btnAction)="activeModal.dismiss()" dataTest="btn-close-modal">
+      </app-button>
+    }
+  </div>
+}
+
+@if (type === modalsType.loader) {
+  <div class="modal-body">
+    <app-loader></app-loader>
+  </div>
+}

package/src/lib/components/modals/modals.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalsComponent } from './modals.component';
+
+describe('ModalsComponent', () => {
+  let component: ModalsComponent;
+  let fixture: ComponentFixture<ModalsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ModalsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModalsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,49 @@
+import { Component, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ModalsType } from '../../enum/modals.enum';
+import { UiTypeEnum } from '../../enum/ui-type.enum';
+import { TranslateService } from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { CommonModule } from '@angular/common';
+import { ButtonComponent } from '../button/button.component';
+import { LoaderComponent } from '../loader/loader.component';
+
+@Component({
+  selector: 'app-modals',
+  templateUrl: './modals.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule,
+    ButtonComponent,
+    LoaderComponent
+  ]
+})
+export class ModalsComponent implements OnInit {
+  @Input() type: ModalsType;
+  @Input() modalTitle: string;
+  @Input() itemsToDelete: any[] = [];
+  @Input() itemsToDeleteTitle = this.translateService.instant('_COMMON._MODAL_DELETE.DEFAULT_TYPE');
+  @Input() labelBtnAction: string;
+  @Input() customBodyTemplate?: TemplateRef<any>;
+  @Input() customBodyContext?: any;
+
+  @Output() btnAction = new EventEmitter<string>();
+
+  public modalsType = ModalsType;
+  public buttonTypeEnum = UiTypeEnum;
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    private translateService: TranslateService
+  ) { }
+
+  ngOnInit(): void {
+    this.labelBtnAction = this.type === this.modalsType.quickSideView
+    ? this.translateService.instant('_COMMON._ACTION.EDIT') : this.labelBtnAction;
+  }
+
+  public actionClick() {
+    this.activeModal.close();
+  }
+}

package/src/lib/components/tab/components/tab-content.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TabContentComponent } from './tab-content.component';
+
+describe('TabContentComponent', () => {
+  let component: TabContentComponent;
+  let fixture: ComponentFixture<TabContentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TabContentComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TabContentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/tab/components/tab-content.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-tab-content',
+  template: '<ng-template #content><ng-content></ng-content></ng-template>',
+  standalone: true
+})
+export class TabContentComponent {
+  @Input() title!: string;
+  @Input() disabled = false;
+
+  @ViewChild('content', { static: true }) templateRef!: TemplateRef<any>;
+
+  get fragment(): string {
+    return this.slugify(this.title);
+  }
+
+  private slugify(text: string): string {
+    return text
+      .toLowerCase()
+      .trim()
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '');
+  }
+}

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

@@ -0,0 +1,59 @@
+@if (!basicDisplay) {
+  <div class="card">
+    @if (title) {
+      <h2 class="card-header">{{ title | translate }}</h2>
+    }
+
+    <div class="card-body p-0">
+      <ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-tabs nav-tabs-card"
+        (activeIdChange)="onTabChange($event)" appRwdTabs>
+        @for (tab of tabs.toArray(); track tab; let i = $index) {
+          <li [ngbNavItem]="i" [disabled]="tab.disabled">
+            <a ngbNavLink [attr.data-test-ctw]="'link-tab-' + id + '-' + i">
+              {{ tab.title | translate }}
+            </a>
+            <ng-template ngbNavContent>
+              <ng-container *ngTemplateOutlet="tab.templateRef"></ng-container>
+            </ng-template>
+          </li>
+        }
+
+        <li ngbDropdown class="nav-item d-none" placement="bottom-right">
+          <button (click)="false" class="nav-link" ngbDropdownToggle>
+            {{ '_COMMON._ACTION.MORE' | translate }}
+          </button>
+          <ul ngbDropdownMenu placement="bottom right"></ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <div [ngbNavOutlet]="nav" class="tab-content-card"></div>
+}
+@else {
+  @if (title) {
+    <h2>{{ title | translate }}</h2>
+  }
+
+  <ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-tabs" (activeIdChange)="onTabChange($event)" appRwdTabs>
+    @for (tab of tabs.toArray(); track tab; let i = $index) {
+      <li [ngbNavItem]="i" [disabled]="tab.disabled">
+        <a ngbNavLink [attr.data-test-ctw]="'link-tab-' + i">
+          {{ tab.title | translate }}
+        </a>
+        <ng-template ngbNavContent>
+          <ng-container *ngTemplateOutlet="tab.templateRef"></ng-container>
+        </ng-template>
+      </li>
+    }
+
+    <li ngbDropdown class="nav-item d-none" placement="bottom-right">
+      <button (click)="false" class="nav-link" ngbDropdownToggle>
+        {{ '_COMMON._ACTION.MORE' | translate }}
+      </button>
+      <ul ngbDropdownMenu placement="bottom right"></ul>
+    </li>
+  </ul>
+
+  <div [ngbNavOutlet]="nav" class="tab-content"></div>
+}

package/src/lib/components/tab/tab.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TabComponent } from './tab.component';
+
+describe('TabComponent', () => {
+  let component: TabComponent;
+  let fixture: ComponentFixture<TabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TabComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,79 @@
+import { AfterContentInit, Component, ContentChildren, Input, QueryList } from '@angular/core';
+import { TabContentComponent } from './components/tab-content.component';
+import { ActivatedRoute, Router } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-tab',
+  templateUrl: './tab.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule,
+    NgbNavModule
+  ]
+})
+export class TabComponent implements AfterContentInit {
+
+  @Input() useFragment = true;
+  @Input() title?: string;
+  @Input() id: string;
+  @Input() basicDisplay? = false;
+  @ContentChildren(TabContentComponent) tabs!: QueryList<TabContentComponent>;
+
+  public activeId = 0;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute
+  ) { }
+
+  ngAfterContentInit(): void {
+  const tabsArray = this.tabs.toArray();
+  const firstEnabledIndex = tabsArray.findIndex(tab => !tab.disabled);
+  this.activeId = firstEnabledIndex !== -1 ? firstEnabledIndex : 0;
+
+  this.route.fragment.subscribe(fragment => {
+    if (this.useFragment) {
+      if (fragment) {
+        const foundIndex = tabsArray.findIndex(
+          tab => tab.fragment === fragment && !tab.disabled
+        );
+        if (foundIndex !== -1) {
+          this.activeId = foundIndex;
+        }
+      } else {
+        const currentTab = tabsArray[this.activeId];
+        this.router.navigate([], {
+          relativeTo: this.route,
+          fragment: currentTab.fragment,
+          queryParamsHandling: 'preserve',
+          replaceUrl: true
+        });
+      }
+    }
+  });
+}
+
+  public onTabChange(newIndex: number) {
+    this.activeId = newIndex;
+
+    if (!this.useFragment) {
+      return;
+    }
+
+    const tabsArray = this.tabs.toArray();
+    const selectedTab = tabsArray[newIndex];
+
+    if (selectedTab && !selectedTab.disabled) {
+      this.router.navigate([], {
+        relativeTo: this.route,
+        fragment: selectedTab.fragment,
+        queryParamsHandling: 'preserve',
+        replaceUrl: true
+      });
+    }
+  }
+}

package/src/lib/components/table/components/actions-on-table/actions-on-table.component.html

@@ -0,0 +1,50 @@
+<div class="actions-on-table" *ngIf="actionOnTable?.length || customContent">
+  <div class="me-auto">
+    @if (customContent) {
+      <ng-container [ngTemplateOutlet]="customContent"></ng-container>
+    }
+  </div>
+  <div class="btn-group">
+    @for (action of actionOnTable; track action) {
+      @if (action.action === actionOnTableAction.add) {
+        <a (click)="onActionClick(actionOnTableAction.add)" href="javascript:void(0)" class="btn btn-primary btn-min-width">
+          {{ '_COMMON._ACTION.ADD' | translate }}
+        </a>
+      }
+
+      @if (action.action === actionOnTableAction.exportAll) {
+        <div class="btn-group" ngbDropdown placement="bottom-right">
+          <button class="btn btn-secondary btn-min-width" id="dd-export" ngbDropdownToggle>
+            {{ '_COMMON._ACTION.EXPORT' | translate }}
+          </button>
+          <ul ngbDropdownMenu aria-labelledby="dd-export">
+            <li>
+              <button class="dropdown-item" (click)="onActionClick(actionOnTableAction.exportPage)">
+                {{ '_COMMON._TABLE.EXPORT_CURRENT' | translate }}
+              </button>
+            </li>
+            <li>
+              <button class="dropdown-item" (click)="onActionClick(actionOnTableAction.exportAll)">
+                {{ '_COMMON._TABLE.EXPORT_ALL' | translate }}
+              </button>
+            </li>
+          </ul>
+        </div>
+      }
+
+      @if (action.action === actionOnTableAction.custom1) {
+        <a (click)="onActionClick(actionOnTableAction.custom1)" href="javascript:void(0)" class="btn btn-min-width"
+          [ngClass]="'btn-' + action.type">
+          {{ action.label }}
+        </a>
+      }
+
+      @if (action.action === actionOnTableAction.custom2) {
+        <a (click)="onActionClick(actionOnTableAction.custom2)" href="javascript:void(0)" class="btn btn-min-width"
+          [ngClass]="'btn-' + action.type">
+          {{ action.label }}
+        </a>
+      }
+    }
+  </div>
+</div>

package/src/lib/components/table/components/actions-on-table/actions-on-table.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActionsOnTableComponent } from './actions-on-table.component';
+
+describe('ActionsOnTableComponent', () => {
+  let component: ActionsOnTableComponent;
+  let fixture: ComponentFixture<ActionsOnTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ActionsOnTableComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActionsOnTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/table/components/actions-on-table/actions-on-table.component.ts

@@ -0,0 +1,33 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+import { ActionOnTable, ActionOnTableType } from '../../../../models/ui/table.model';
+
+@Component({
+  selector: 'app-actions-on-table',
+  templateUrl: './actions-on-table.component.html',
+  standalone: true,
+  imports: [
+    TranslateModule,
+    CommonModule,
+    NgbDropdownModule
+  ]
+})
+
+export class ActionsOnTableComponent {
+
+  @Input() actionOnTable: ActionOnTable[] = [];
+  @Input() customContent?: TemplateRef<any>;
+
+  @Output() actionClick = new EventEmitter<ActionOnTableType>();
+
+  public actionOnTableAction = ActionOnTableType;
+
+  constructor() { }
+
+  public onActionClick(action: ActionOnTableType): void {
+    this.actionClick.emit(action);
+  }
+
+}

package/src/lib/components/table/components/filter/filter.component.html

@@ -0,0 +1,21 @@
+@if (
+[typeField.select, typeField.ngSelect, typeField.ngSelectMultiple, typeField.dateToDate,typeField.timeToTime,
+typeField.dateTimeToDateTime].includes(column.filter?.type)
+) {
+  <ng-container [ngTemplateOutlet]="field"></ng-container>
+}
+@else {
+  <div class="input-group">
+    <ng-container [ngTemplateOutlet]="field"></ng-container>
+    <button *ngIf="cssClass" class="btn btn-secondary" type="button" (click)="onClearFilter()">&times;</button>
+  </div>
+}
+
+<ng-template #field>
+  <label class="form-label" [for]="column.key" class="visually-hidden">
+    {{'_COMMON._FORM.FILTER_LABEL' | translate: { col: column.label } }}
+  </label>
+  <app-form-field [type]="column.filter?.type" [name]="column.key" [control]="control"
+    [options]="column.filter?.options" [inTableFilter]="true" [cssClass]="cssClass"
+    [placeholder]="'_COMMON._ACTION.FILTER_BY' | translate"></app-form-field>
+</ng-template>

package/src/lib/components/table/components/filter/filter.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FilterComponent } from './filter.component';
+
+describe('FilterComponent', () => {
+  let component: FilterComponent;
+  let fixture: ComponentFixture<FilterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FilterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});