@verisoft/ui-govcz 20.0.0 → 20.1.0

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

@@ -0,0 +1,286 @@
+import { AsyncPipe } from '@angular/common';
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  forwardRef,
+  inject,
+  Input,
+  OnChanges,
+  OnInit,
+  QueryList,
+  SimpleChanges,
+} from '@angular/core';
+import {
+  FormControl,
+  FormGroup,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { BaseHttpService } from '@verisoft/core';
+import {
+  ButtonShortCutDirective,
+  DEFAULT_DEBOUNCE_TIME,
+  DialogService,
+  FieldSize,
+  FILTER_COMPONENT_TOKEN,
+  FilterCore,
+  GenericFieldDefinition,
+  GovButtonType,
+  GovButtonTypeType,
+  isFilterEmpty,
+  ScreenSizeService,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import {
+  BehaviorSubject,
+  combineLatestWith,
+  debounceTime,
+  distinctUntilChanged,
+  map,
+  Observable,
+  startWith,
+  takeUntil,
+} from 'rxjs';
+import { Icons } from '../../icons';
+import { ButtonComponent } from '../button';
+import { TextfieldComponent } from '../textfield';
+import { generateFormGroup, GenericFormComponent } from '../shared-components/generic-form';
+import { FilterFieldDirective } from './directives/filter-field.directive';
+import { getFilledControlCount } from './filter.model';
+
+type FilterValueType = { [key: string]: unknown };
+
+@Component({
+    selector: 'v-filter',
+    imports: [
+        AsyncPipe,
+        ReactiveFormsModule,
+        TranslateModule,
+        TextfieldComponent,
+        GenericFormComponent,
+        ButtonComponent,
+        ButtonShortCutDirective,
+    ],
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => FilterComponent),
+            multi: true,
+        },
+        {
+            provide: FILTER_COMPONENT_TOKEN,
+            useExisting: FilterComponent,
+        },
+    ],
+    templateUrl: './filter.component.html',
+    styleUrl: './filter.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FilterComponent<T extends object>
+  extends UnsubscribeComponent
+  implements OnChanges, OnInit, AfterContentInit, FilterCore
+{
+  @ContentChildren(FilterFieldDirective)
+  fieldDeclarations!: QueryList<FilterFieldDirective>;
+
+  @Input() fields: GenericFieldDefinition[] = [];
+
+  @Input() filters: GenericFieldDefinition[] = [];
+
+  @Input() title?: string;
+
+  @Input() total?: number;
+
+  @Input() recordsText = 'FILTER.RECORDS';
+
+  @Input() showRecords = true;
+
+  @Input() fulltextFieldName = 'searchField';
+
+  @Input() showFulltext = true;
+
+  @Input() showFilters = true;
+
+  @Input() autoBind = true;
+
+  @Input() applyLabel = 'Apply';
+
+  @Input() clearLabel = 'Clear';
+
+  @Input() buttonType: GovButtonTypeType = GovButtonType.solid;
+
+  @Input() buttonOutlined = false;
+
+  @Input() debounceTime?: number = DEFAULT_DEBOUNCE_TIME;
+
+  @Input() defaultExpanded = false;
+
+  icons = Icons;
+
+  protected isExpanded = false;
+
+  fieldDefinitios$?: Observable<GenericFieldDefinition[]>;
+
+  formGroup$?: Observable<FormGroup>;
+
+  simpleFormFieldDefinitions$?: Observable<GenericFieldDefinition[]>;
+
+  private get searchField(): GenericFieldDefinition {
+    return {
+      name: this.fulltextFieldName,
+    };
+  }
+
+  private onTouch?: () => void;
+
+  private onChange?: (value: FilterValueType | undefined) => void;
+
+  private inputFields$ = new BehaviorSubject<
+    GenericFieldDefinition[] | undefined
+  >([...this.fields ?? [], ...this.filters ?? []]);
+
+  FieldSize = FieldSize;
+
+  protected screenSizeService = inject(ScreenSizeService);
+  protected changeDetectorRef = inject(ChangeDetectorRef);
+  protected dialogService = inject(DialogService);
+
+  service!: BaseHttpService<T>;
+
+  formGroup = new FormGroup({});
+
+  filledFiltersCount$: Observable<string> = this.formGroup.valueChanges.pipe(
+    startWith(this.formGroup),
+    map(() => getFilledControlCount(this.formGroup).toString())
+  );
+
+  private lastFormFields: GenericFieldDefinition[] = [];
+
+  ngOnInit(): void {
+    this.isExpanded = this.defaultExpanded;
+    this.formGroup.valueChanges
+      .pipe(
+        takeUntil(this.destroyed$),
+        debounceTime(this.debounceTime ?? DEFAULT_DEBOUNCE_TIME),
+        map((x) => this.convertFilter(x)),
+        distinctUntilChanged()
+      )
+      .subscribe((value) => {
+        this.onChange?.(value);
+      });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['total']) {
+      this.changeDetectorRef.markForCheck();
+    }
+    if (changes['fields'] || changes['filters']) {
+      this.inputFields$.next([...this.fields ?? [], ...this.filters ?? []]);
+    }
+  }
+
+  ngAfterContentInit(): void {
+    const fieldDeclaratios$: Observable<GenericFieldDefinition[]> =
+      this.fieldDeclarations.changes.pipe(
+        startWith({}),
+        map(() => this.fieldDeclarations.toArray())
+      );
+
+    this.fieldDefinitios$ = this.inputFields$.pipe(
+      combineLatestWith(fieldDeclaratios$),
+      map(([inputs, views]) => {
+        this.lastFormFields = [this.searchField, ...(inputs ?? []), ...views];
+        return this.lastFormFields;
+      })
+    );
+
+    this.simpleFormFieldDefinitions$ = this.fieldDefinitios$.pipe(
+      map((fields) => {
+        return fields
+          .filter((x) => x.name !== this.fulltextFieldName)
+          .map((x) => ({ ...x, floatLabel: false, size: x.size ?? FieldSize.medium }));
+      })
+    );
+
+    this.formGroup$ = this.fieldDefinitios$.pipe(
+      map((fields) => {
+        const group = generateFormGroup(fields, this.formGroup, undefined, false);
+        if (!group.get(this.fulltextFieldName) && this.showFulltext) {
+          group.addControl(this.fulltextFieldName, new FormControl(''));
+        }
+        return group;
+      })
+    );
+
+    this.changeDetectorRef.detectChanges();
+  }
+
+  protected toggleFilters() {
+    this.isExpanded = !this.isExpanded;
+  }
+
+  protected openSearch() {
+    this.dialogService.showDialog({
+      headerIcon: 'pi pi-search',
+      severity: 'primary',
+      innerHTML: '<p>Search</p>',
+      confirmButtonFn: () => this.submitValue(),
+      confirmButtonText: 'Apply',
+      cancelButtonFn: () => this.clear(),
+      cancelButtonText: 'Clear all',
+      showCancelButton: true,
+      closable: false,
+    });
+  }
+
+  writeValue(data: FilterValueType): void {
+    this.formGroup.patchValue(data);
+  }
+
+  registerOnChange(fn: (value: FilterValueType | undefined) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouch = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    isDisabled ? this.formGroup.disable() : this.formGroup.enable();
+  }
+
+  submitValue() {
+    if (!this.autoBind) {
+      this.onChange?.(this.formGroup.value);
+    }
+  }
+
+  setFilterValues(dialogFormGroup: FormGroup) {
+    this.formGroup.setValue(dialogFormGroup.value);
+    this.submitValue();
+  }
+
+  clear() {
+    this.formGroup.reset();
+    this.submitValue();
+  }
+
+  private convertFilter(
+    value: FilterValueType | undefined
+  ): FilterValueType | undefined {
+    if (value == undefined) {
+      return undefined;
+    }
+
+    const isEmpty = isFilterEmpty(value);
+    if (isEmpty) {
+      return undefined;
+    }
+
+    return value;
+  }
+}

package/src/lib/components/filter/filter.model.ts

@@ -0,0 +1,18 @@
+import { FormGroup } from '@angular/forms';
+
+export function getFilledControlCount(formGroup: FormGroup): number {
+  let count = 0;
+  Object.keys(formGroup.controls).forEach((key) => {
+    const control = formGroup.get(key);
+    if (control?.value) {
+      if (typeof control.value === 'boolean') {
+        count++;
+      }
+      if (typeof control.value === 'string' && control.value.trim() !== '') {
+        count++;
+      }
+    }
+  });
+
+  return count;
+}

package/src/lib/components/filter/index.ts

@@ -0,0 +1,2 @@
+export * from './filter.component';
+export * from './directives/filter-field.directive';

package/src/lib/components/form-field/form-field.component.html

@@ -0,0 +1,14 @@
+<gov-form-control>
+  @if (label) {
+  <gov-form-label 
+    [slot]="labelSlot"
+    [size]="size | govSize"
+  >
+    {{ label }}
+  </gov-form-label>
+  }
+  <gov-form-group>
+    <ng-content />
+  </gov-form-group>
+  <v-validation-message [ngControl]="ngControl"></v-validation-message>
+</gov-form-control>

package/src/lib/components/form-field/form-field.component.spec.ts

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

package/src/lib/components/form-field/form-field.component.ts

@@ -0,0 +1,76 @@
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  Optional,
+  Self,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import {
+  BaseFormInputComponent,
+  FieldSize,
+  FieldSizeType,
+  FieldType,
+  IconPositionType,
+  IconPosition,
+  FormFieldCore,
+  FORM_FIELD_COMPONENT_TOKEN,
+  FieldTypeType,
+  SlotPosition,
+  SlotPositionType,
+} from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { GovSizePipe } from '../../pipes';
+import { ErrorComponent } from '../errors';
+
+@Component({
+    selector: 'v-form-field',
+    imports: [
+    ReactiveFormsModule,
+    GovDesignSystemModule,
+    GovSizePipe,
+    ErrorComponent
+],
+    templateUrl: './form-field.component.html',
+    styleUrl: './form-field.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: FORM_FIELD_COMPONENT_TOKEN,
+            useExisting: FormFieldComponent,
+        },
+    ]
+})
+export class FormFieldComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, FormFieldCore
+{
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+
+  @Input() floatLabel!: boolean;
+  @Input() type: FieldTypeType = FieldType.text;
+  @Input() minlength = 0;
+  @Input() maxlength = 524288;
+  @Input() prefix!: string;
+  @Input() sufix!: string;
+  @Input() message!: string;
+  @Input() name! : string;
+  @Input() role! : string;
+  @Input() autocorrect: 'on' | 'off' = 'on';
+  @Input() size: FieldSizeType | undefined = FieldSize.medium;
+  @Input() icon!: string;
+  @Input() iconPos: IconPositionType = IconPosition.right;
+  @Input() display!: 'flex' | 'block';
+  @Input() labelSlot: SlotPositionType = SlotPosition.top;
+  @Input() messageSlot: SlotPositionType = SlotPosition.bottom;
+
+  icons = Icons;
+}

package/src/lib/components/form-field/index.ts

@@ -0,0 +1 @@
+export * from './form-field.component';

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

@@ -0,0 +1,122 @@
+<header class="gov-header">
+    <div class="gov-header__divider">
+        <div class="gov-header__content">
+            <gov-flex
+                justify-content="space-between"
+                align-items="center"
+                responsive="false"
+            >
+                <a
+                    href="/"
+                    class="gov-header__logo"
+                    aria-label="Zpět na úvodní stránku"
+                >
+                    <gov-flex
+                        align-items="center"
+                        gap="s"
+                        responsive="false"
+                    >
+                        @if (logoUrl) {
+                        <img
+                            class="gov-header__logo-img"
+                            src="{{ logoUrl }}"
+                            width="125px"
+                            height="43px"
+                            alt="GAČR Logo"
+                        >
+                        }
+                    </gov-flex>
+                </a>
+            </gov-flex>
+            <gov-flex
+                class="gov-header__action"
+                justify-content="space-between"
+                align-items="center"
+                gap="s"
+            >
+                <gov-button
+                    color="primary"
+                    size="m"
+                    type="base"
+                >{{ userName }}</gov-button>
+                <ng-content></ng-content>
+                <ng-container *ngTemplateOutlet="
+                    this.actionTemplate;
+                "></ng-container>
+            </gov-flex>
+        </div>
+    </div>
+    <div class="gov-header__navigation">
+        <nav
+            class="gov-navigation"
+            aria-label="Main navigation"
+            id="main-navigation"
+        >
+            <ul>
+                @for (tab of tabsService.menuItems$ | async; track tab; let index = $index) {
+                <li
+                    *hasPermission="tab.data?.permissions ?? []"
+                    class="gov-navigation--has-megamenu"
+                >
+                    <gov-button
+                        type="base"
+                        color="primary"
+                        size="l"
+                        [attr.aria-label]="tab.label"
+                        (gov-click)="
+                            showOrHide(index, tab.children?.length ?? 0);
+                            canRedirect(tab.url, !tab.children?.length)
+                        "
+                    >
+                        {{ tab.label }}
+                        @if (tab.children?.length) {
+                        <gov-icon
+                            slot="icon-end"
+                            size="s"
+                            [name]="canBeShown(index) ? 'chevron-up' : 'chevron-down'"
+                        ></gov-icon>
+                        }
+                    </gov-button>
+                    @if (canBeShown(index)) {
+                    <ul
+                        id="megamenu{{index}}"
+                        class="gov-mega-menu gov-header__submenu"
+                        [attr.aria-hidden]="canBeShown(index)"
+                    >
+                        @for (child of tab.children; track child) {
+                        <li
+                            *hasPermission="child.data?.permissions ?? []"
+                            class="gov-mega-menu__heading"
+                        >
+                            <a
+                                [routerLink]="child.url"
+                                (click)="showOrHide(index)"
+                            >
+                                @if (child.icon) {
+                                <gov-icon
+                                    [name]="child.icon"
+                                    size="m"
+                                ></gov-icon>
+                                }
+                                <span>{{ child.label }}</span>
+                            </a>
+                            @if (child.children) { @for(miniChild of child.children; track miniChild) {
+                            <ul>
+                                <li *hasPermission="miniChild.data?.permissions ?? []">
+                                    <a
+                                        [routerLink]="miniChild.url"
+                                        (click)="showOrHide(index)"
+                                    >{{ miniChild.label }}</a>
+                                </li>
+                            </ul>
+                            } }
+                        </li>
+                        }
+                    </ul>
+                    }
+                </li>
+                }
+            </ul>
+        </nav>
+    </div>
+</header>

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

@@ -0,0 +1,90 @@
+import { AsyncPipe, CommonModule } from "@angular/common";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  inject,
+  Input,
+  TemplateRef,
+} from "@angular/core";
+import { Router, RouterModule } from "@angular/router";
+import { GovDesignSystemModule } from "@gov-design-system-ce/angular";
+import { HasPermissionDirective } from "@verisoft/security-core";
+import {
+  HEADER_COMPONENT_TOKEN,
+  HeaderCore,
+  MenuItem,
+  SideMenuService,
+} from "@verisoft/ui-core";
+import { Icons } from "../../icons";
+
+@Component({
+    selector: "v-header",
+    styleUrl: "./header.component.scss",
+    templateUrl: './header.component.html',
+    imports: [
+        CommonModule,
+        GovDesignSystemModule,
+        AsyncPipe,
+        RouterModule,
+        HasPermissionDirective,
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: HEADER_COMPONENT_TOKEN,
+            useExisting: HeaderComponent
+        }
+    ]
+})
+export class HeaderComponent
+  implements HeaderCore {
+
+  @Input() title!: string;
+
+  @Input() userName!: string;
+
+  @Input() logoUrl!: string;
+
+  @Input() userRole!: any;
+
+  @Input() menuRef!: HTMLDivElement;
+
+  @Input() items: MenuItem[] = [];
+
+  @ContentChild('action', { static: false })
+  actionTemplate!: TemplateRef<{ $implicit: any }>;
+
+  protected icons = Icons;
+  protected menuVisible = false;
+  private openedIndexes: number[] = [];
+
+  protected readonly tabsService = inject(SideMenuService);
+  private readonly router = inject(Router);
+
+  toggleMenu() {
+    this.menuVisible = !this.menuVisible;
+  }
+
+  protected canRedirect(url?: string, canRedirect?: boolean) {
+    if (url && canRedirect) {
+      this.router.navigateByUrl(url);
+    }
+  }
+
+  protected showOrHide(index: number, children?: number): void {
+    if (children === 0) {
+      return;
+    }
+
+    if (!this.openedIndexes.includes(index)) {
+      this.openedIndexes = [...[], index];
+    } else if (this.openedIndexes.includes(index)) {
+      this.openedIndexes = this.openedIndexes.filter(x => x !== index);
+    }
+  }
+
+  protected canBeShown(index: number) {
+    return this.openedIndexes.includes(index);
+  }
+}

package/src/lib/components/header/index.ts

@@ -0,0 +1 @@
+export * from './header.component'

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

@@ -0,0 +1,11 @@
+@if (library() === 'native') {
+    <gov-icon 
+        [name]="name()" 
+        [size]="govSize"
+        [class]="govClasses"
+    />
+} @else if (library() === 'bootstrap') {
+    <i [class]="bootstrapClasses"></i>
+}
+
+

package/src/lib/components/icon/icon.component.scss

@@ -0,0 +1,20 @@
+:host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+// Bootstrap icon sizes
+.icon-small {
+    font-size: 0.875rem;
+}
+
+.icon-medium {
+    font-size: 1rem;
+}
+
+.icon-large {
+    font-size: 1.5rem;
+}
+
+