spiderly 0.0.8 → 19.0.1

package/src/lib/components/spiderly-form-control/spiderly-form-control.ts

@@ -0,0 +1,60 @@
+import { FormArray, FormControl, FormControlOptions, FormControlState, FormGroup, ValidatorFn } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { BaseEntity } from '../../entities/base-entity';
+
+export interface SpiderlyValidatorFn extends ValidatorFn {
+    hasNotEmptyRule?: boolean;
+}
+
+// It's made like generic type because of <number>, <string> etc. not to put class like User.
+export class SpiderlyFormControl<T = any> extends FormControl<T> {
+    public label: string;
+    public labelForDisplay: string;
+    public required: boolean;
+    private _spiderlyValidator: SpiderlyValidatorFn | null;
+
+    constructor(value: any, opts: FormControlOptions=null, required:boolean=false) {
+        opts = opts ?? {updateOn: 'blur'};
+        super(value, opts);
+        this.required = required;
+     }
+
+    override getRawValue(): T { // Doing this because .value gets only not disabled values
+        return super.getRawValue() as T;
+    }
+
+    public override get validator(): SpiderlyValidatorFn | null {
+        return this._spiderlyValidator;
+    }
+
+    public override set validator(validator: SpiderlyValidatorFn | null) {
+        this._spiderlyValidator = validator;
+        this.setValidators(validator); 
+    }
+}
+
+export class SpiderlyFormGroup<TValue = any> extends FormGroup {
+    declare controls: { [P in keyof TValue]: SpiderlyFormControl<TValue[P]> };
+
+    constructor(controls: { [P in keyof TValue]: SpiderlyFormControl<TValue[P]> }) {
+        super(controls);
+    }
+
+    override getRawValue(): TValue { // Doing this because .value gets only not disabled values
+        return super.getRawValue() as TValue;
+    }
+
+    public name?: string; // Using for nested form groups
+    public mainDTOName?: string;
+    public saveObservableMethod?: (saveBody: any) => Observable<any>;
+    public initSaveBody?: () => BaseEntity = () => null;
+    public controlNamesFromHtml?: string[] = [];
+}
+
+export class SpiderlyFormArray<TValue = any> extends FormArray {
+    override value: TValue[]; // There is no getRawValue in FormArray
+    public required: boolean;
+    public modelConstructor: TValue;
+    public translationKey: string;
+    public controlNamesFromHtml?: string[] = [];
+}

package/src/lib/components/spiderly-panels/panel-body/panel-body.component.html

@@ -0,0 +1,8 @@
+<!-- FT: this is selector, not the class -->
+<div class="panel-body"
+    [ngClass]="{
+        'non-grid-panel-bottom-padding': normalBottomPadding, 
+    }">
+    <!-- 'card': true, -->
+    <ng-content></ng-content>
+</div>

package/src/lib/components/spiderly-panels/panel-body/panel-body.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'panel-body',
+    templateUrl: './panel-body.component.html',
+    styles: [],
+    standalone: false
+})
+export class PanelBodyComponent implements OnInit {
+  @Input() normalBottomPadding: boolean = false; // FT: By default we set to false, when the grid is inside the body.
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+}

package/src/lib/components/spiderly-panels/panel-footer/panel-footer.component.html

@@ -0,0 +1,8 @@
+<div class="spiderly-panel-footer">
+    <div class="buttons-wrapper">
+        <ng-content></ng-content>
+    </div>
+    <span class="p-text-secondary">
+        <ng-content select="[footerRight]"></ng-content>
+    </span>
+</div>

package/{styles → src/lib}/components/spiderly-panels/panel-footer/panel-footer.component.scss

@@ -4,7 +4,7 @@
     justify-content: space-between; 
     gap: 10px; 
     border-top: 1px solid #dee2e6;
-    border-bottom-right-radius: 12px;
-    border-bottom-left-radius: 12px;
-    padding: 1rem;
+    border-bottom-right-radius: var(--p-content-border-radius);
+    border-bottom-left-radius: var(--p-content-border-radius);
+    padding: 18px;
 }

package/src/lib/components/spiderly-panels/panel-footer/panel-footer.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'panel-footer',
+    templateUrl: './panel-footer.component.html',
+    styleUrl: './panel-footer.component.scss',
+    standalone: false
+})
+export class PanelFooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+}

package/src/lib/components/spiderly-panels/panel-header/panel-header.component.html

@@ -0,0 +1,25 @@
+<div style="display: flex; align-items: center; gap: 24px; flex-wrap: wrap;">
+    @if (tabs == null) {
+        <div style="display: flex; align-items: center; gap: 14px;">
+            <span *ngIf="index != null" class="number-circle">{{index + 1}}</span>
+            <i class="{{icon}} primary-color" [style]="showBigTitle ? 'font-size: 19px' : 'font-size: 16px;'"></i> 
+            <h2 [style]="(showBigTitle ? 'font-size: 16px;' : '')" class="remove-h-css">{{title}}</h2>
+        </div>
+    }
+    @else {
+        @for (tab of tabs; track $index) {
+            <div (click)="setTabIsSelected(tab)"
+                [style]="{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '14px',
+                    cursor: 'pointer',
+                    fontWeight: tab.isSelected ? '700' : 'normal'
+                }">
+                <span *ngIf="index != null" class="number-circle">{{index + 1}}</span>
+                <i class="{{tab.icon}} primary-color" [style]="showBigTitle ? 'font-size: 19px' : 'font-size: 16px;'"></i> 
+                <div [style]="showBigTitle ? 'font-size: 16px' : ''">{{tab.label}}</div>
+            </div>
+        }
+    }
+</div>

package/src/lib/components/spiderly-panels/panel-header/panel-header.component.ts

@@ -0,0 +1,69 @@
+import { TranslocoService } from '@jsverse/transloco';
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+    selector: 'panel-header',
+    templateUrl: './panel-header.component.html',
+    styles: [`
+    .p-panel-icons-end {
+      font-size: 50px;
+    }
+  `],
+    standalone: false
+})
+export class PanelHeaderComponent implements OnInit {
+  @Input() title: string;
+  @Input() showBigTitle: boolean;
+  @Input() showIcon: boolean = true;
+  @Input() icon: string;
+  @Input() index: number;
+  @Input() tabs: SpiderlyTab[];
+
+  constructor(
+    private translocoService: TranslocoService
+  ) { }
+
+  ngOnInit(): void {
+    if (this.title == null)
+      this.title = this.translocoService.translate('Details');
+
+    if (this.showIcon === true && this.icon == null)
+      this.icon = 'pi pi-file-edit';
+  }
+
+  setTabIsSelected(tab: SpiderlyTab){
+    this.tabs.forEach(t => {
+      t.isSelected = false;
+    });
+
+    tab.isSelected = true;
+  }
+}
+
+export class SpiderlyTab
+{
+    label?: string;
+    id?: number;
+    icon?: string;
+    isSelected?: boolean;
+  
+    constructor(
+    {
+        label,
+        id,
+        icon,
+        isSelected,
+    }:{
+        label?: string;
+        id?: number;
+        icon?: string;
+        isSelected?: boolean;
+    } = {}
+    ) {
+        this.label = label;
+        this.id = id;
+        this.icon = icon;
+        this.isSelected = isSelected;
+    }
+
+}

package/src/lib/components/spiderly-panels/spiderly-card/spiderly-card.component.html

@@ -0,0 +1,7 @@
+<div class="card responsive-card-padding">
+    <div style="display: flex; align-items: center; margin-bottom: 14px; gap: 12px;">
+        <i  style="font-size: 20px;" class="{{icon}} primary-color"></i>
+        <h5 style="margin: 0;">{{title}}</h5>
+    </div>
+    <ng-content></ng-content>
+</div>

package/src/lib/components/spiderly-panels/spiderly-card/spiderly-card.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'spiderly-card',
+    templateUrl: './spiderly-card.component.html',
+    styles: [],
+    standalone: false
+})
+export class SpiderlyCardComponent implements OnInit {
+  @Input() icon: string = 'pi pi-file-edit';
+  @Input() title: string;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+}

package/src/lib/components/spiderly-panels/spiderly-panel/spiderly-panel.component.html

@@ -0,0 +1,40 @@
+<p-panel 
+[showHeader]="showPanelHeader"
+[ngClass]="{
+    'multiple-panel-first-without-header': isFirstMultiplePanel && !showPanelHeader,
+    'multiple-panel-first': isFirstMultiplePanel,
+    'multiple-panel-middle-without-header': isMiddleMultiplePanel && !showPanelHeader,
+    'multiple-panel-middle': isMiddleMultiplePanel,
+    'multiple-panel-last-without-header': isLastMultiplePanel && !showPanelHeader,
+    'multiple-panel-last': isLastMultiplePanel,
+    'panel-border': !isFirstMultiplePanel,
+    'spiderly-panel': true,
+}"
+[toggleable]="toggleable"
+[collapsed]="toggleable && collapsed"
+expandIcon="pi pi-chevron-up"
+collapseIcon="pi pi-chevron-down"
+>
+    <ng-template pTemplate="header">
+        <div>
+            <ng-content select="panel-header"></ng-content>
+        </div>
+    </ng-template>
+
+    <ng-template pTemplate="icons">
+        <div *ngIf="showCrudMenu && crudMenu" class="mr-2">
+            <i class="pi pi-ellipsis-h icon-hover" (click)="menuItemClick(index, $event)"></i>
+            <p-menu #menu [model]="crudMenu" [popup]="true" appendTo="body"></p-menu>
+        </div>
+        <div *ngIf="showRemoveIcon" class="mr-2">
+            <i class="pi pi-minus icon-hover error-color-light" (click)="removeItemClick()"></i>
+        </div>
+    </ng-template>
+
+    <div class="panel-body-wrapper">
+        <ng-content select="panel-body"></ng-content>
+    </div>
+
+    <ng-content select="panel-footer"></ng-content>
+
+</p-panel>

package/src/lib/components/spiderly-panels/spiderly-panel/spiderly-panel.component.scss

@@ -0,0 +1,11 @@
+    :host {
+      ::ng-deep {
+        .p-panel{
+          overflow: hidden;
+        }
+        .p-panel-icons{
+          display: flex;
+          align-items: center;
+        }
+      }
+    }

package/src/lib/components/spiderly-panels/spiderly-panel/spiderly-panel.component.ts

@@ -0,0 +1,42 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { Menu } from 'primeng/menu';
+
+@Component({
+    selector: 'spiderly-panel',
+    templateUrl: './spiderly-panel.component.html',
+    styleUrl: './spiderly-panel.component.scss',
+    standalone: false
+})
+export class SpiderlyPanelComponent implements OnInit {
+  @Input() isFirstMultiplePanel: boolean = false;
+  @Input() isMiddleMultiplePanel: boolean = false;
+  @Input() isLastMultiplePanel: boolean = false;
+  @Input() toggleable: boolean = false;
+  @Input() collapsed: boolean = false;
+  @Input() crudMenu: MenuItem[];
+  @Input() showCrudMenu: boolean = true;
+  @Input() showRemoveIcon: boolean = false;
+  @Input() index: number;
+  @Input() showPanelHeader: boolean = true;
+
+  @Output() onMenuIconClick: EventEmitter<number> = new EventEmitter();
+  @Output() onRemoveIconClick: EventEmitter<null> = new EventEmitter();
+
+  @ViewChild('menu') menu: Menu;
+  
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  menuItemClick(index: number, event){
+    this.menu.toggle(event);
+    this.onMenuIconClick.next(index);
+  }
+
+  removeItemClick(){
+    this.onRemoveIconClick.next(null);
+  }
+
+}

package/src/lib/components/spiderly-panels/spiderly-panels.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PanelBodyComponent } from './panel-body/panel-body.component';
+import { PanelFooterComponent } from './panel-footer/panel-footer.component';
+import { PanelHeaderComponent } from './panel-header/panel-header.component';
+import { SpiderlyPanelComponent } from './spiderly-panel/spiderly-panel.component';
+import { SpiderlyCardComponent } from './spiderly-card/spiderly-card.component';
+import { PrimengModule } from '../../modules/primeng.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    PrimengModule,
+  ],
+  exports: [
+    PanelHeaderComponent,
+    PanelBodyComponent,
+    PanelFooterComponent,
+    SpiderlyPanelComponent,
+    SpiderlyCardComponent
+  ],
+  declarations: [
+    PanelHeaderComponent,
+    PanelBodyComponent,
+    PanelFooterComponent,
+    SpiderlyPanelComponent,
+    SpiderlyCardComponent
+  ],
+  providers: [
+  ]
+})
+export class SpiderlyPanelsModule {}

package/src/lib/controls/base-autocomplete-control.ts

@@ -0,0 +1,17 @@
+import {
+    Component,
+    EventEmitter,
+    Output,
+  } from '@angular/core';
+import { AutoCompleteCompleteEvent } from 'primeng/autocomplete';
+import { BaseDropdownControl } from './base-dropdown-control';
+
+  @Component({
+    selector: 'base-autocomplete-control',
+    template: '',
+    styles: [],
+    standalone: false
+})
+  export class BaseAutocompleteControl extends BaseDropdownControl {
+    @Output() onTextInput: EventEmitter<AutoCompleteCompleteEvent> = new EventEmitter();
+  }

package/src/lib/controls/base-control.ts

@@ -0,0 +1,60 @@
+import {
+    Component, Input,
+  } from '@angular/core';
+import { SpiderlyFormControl } from '../components/spiderly-form-control/spiderly-form-control';
+import { TranslocoService } from '@jsverse/transloco';
+  
+  @Component({
+    selector: 'base-control',
+    template: '',
+    styles: [],
+    standalone: false
+})
+  export class BaseControl {
+    @Input() control: SpiderlyFormControl; // FT: if you name it formControl: https://stackoverflow.com/a/54755671/21209982
+    @Input() disabled: boolean = false;
+    @Input() showLabel: boolean = true;
+    @Input() label: string = null; // NgModel/Want custom translation
+    @Input() controlValid: boolean = true; // NgModel
+    @Input() placeholder: string = '';
+    @Input() showTooltip: boolean = false;
+    @Input() tooltipText: string = null;
+    @Input() tooltipIcon: string = 'pi pi-info-circle';
+    errorMessageTooltipEvent: 'hover' | 'focus';
+    
+    constructor(
+      protected translocoService: TranslocoService,
+    ) {
+
+    }
+
+    ngOnInit(){
+      if(this.control != null && this.disabled == true)
+        this.control.disable();
+
+      // TODO FT: Delete if you don't need
+      // if(this.control?.validator?.hasNotEmptyRule == true) // FT HACK: Be carefull with this name, if you change it in generator you need to change it here also
+      //   this.control.required = true;
+
+       this.errorMessageTooltipEvent = window.innerWidth > 1000 ? 'hover' : 'focus'
+    }
+
+    ngAfterViewInit(){
+
+    }
+
+    getTranslatedLabel(): string{
+      return this.label ?? this.control.labelForDisplay;
+    }
+
+    getValidationErrrorMessages(){
+      if(this.control?.errors && this.control?.dirty){
+          // FT: it should always be one error message for single form control, 
+          // also i don't need to reassign it to null because it will be shown only when control.valid == false
+          return this.control.errors['_'];
+      }
+
+      return null;
+    }
+
+  }

package/src/lib/controls/base-dropdown-control.ts

@@ -0,0 +1,37 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+  } from '@angular/core';
+import { BaseControl } from './base-control';
+import { PrimengOption } from '../entities/primeng-option';
+import { TranslocoService } from '@jsverse/transloco';
+
+  @Component({
+    selector: 'base-dropdown-control',
+    template: '',
+    styles: [],
+    standalone: false
+})
+  export class BaseDropdownControl extends BaseControl {
+    @Input() options: PrimengOption[];
+    @Input() showAddon: boolean = false;
+    @Input() addonIcon: string = 'pi pi-ellipsis-h';
+    @Input() override placeholder: string = this.translocoService.translate('SelectFromTheList');
+    @Output() onButtonClick: EventEmitter<null> = new EventEmitter();
+    
+    constructor(
+      protected override translocoService: TranslocoService,
+    ) {
+      super(translocoService);
+    }
+
+    dropdownMarkAsDirty(){
+      this.control.markAsDirty();
+    }
+
+    addonClick(){
+      this.onButtonClick.next(null);
+    }
+  }

package/src/lib/controls/spiderly-autocomplete/spiderly-autocomplete.component.html

@@ -0,0 +1,36 @@
+<ng-container *transloco="let t">
+  <div class="flex flex-column gap-2">
+    <div *ngIf="getTranslatedLabel() != '' && getTranslatedLabel() != null">
+      <label>{{getTranslatedLabel()}}</label>
+      <required *ngIf="control?.required"></required>
+    </div>
+  
+    <p-inputgroup>
+      <p-autocomplete
+      *ngIf="control"
+      [pTooltip]="getValidationErrrorMessages()" [tooltipEvent]="errorMessageTooltipEvent" tooltipPosition="bottom" [tooltipDisabled]="control.valid" tooltipStyleClass="spiderly-tooltip-invalid"
+      [id]="label"
+      [formControl]="control"
+      [placeholder]="placeholder"
+      [suggestions]="options"
+      optionLabel="label"
+      optionValue="code"
+      (completeMethod)="search($event)"
+      [forceSelection]="true"
+      [dropdown]="false"
+      [showClear]="showClear"
+      (onHide)="dropdownMarkAsDirty()"
+      (onSelect)="select($event)"
+      [completeOnFocus]="true"
+      [style]="{'width': '100%'}"
+      [fluid]="true"
+      [appendTo]="appendTo"
+      [emptyMessage]="emptyMessage"
+      [lazy]="true"
+      />
+      <p-inputgroup-addon *ngIf="showAddon" (click)="addonClick()" [style]="{'cursor': 'pointer', 'background-color': 'var(--p-primary-color)', 'border-color': 'var(--p-primary-color)'}">
+        <i class="{{addonIcon}}" style="color: #fff;"></i>
+      </p-inputgroup-addon>
+    </p-inputgroup>
+  </div>
+</ng-container>

package/src/lib/controls/spiderly-autocomplete/spiderly-autocomplete.component.ts

@@ -0,0 +1,56 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { AutoCompleteCompleteEvent } from 'primeng/autocomplete';
+import { BaseAutocompleteControl } from '../base-autocomplete-control';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { RequiredComponent } from '../../components/required/required.component';
+import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
+import { PrimengModule } from '../../modules/primeng.module';
+
+@Component({
+    selector: 'spiderly-autocomplete',
+    templateUrl: './spiderly-autocomplete.component.html',
+    styles: [],
+    imports: [
+        ReactiveFormsModule,
+        FormsModule,
+        PrimengModule,
+        CommonModule,
+        RequiredComponent,
+        TranslocoDirective,
+    ]
+})
+export class SpiderlyAutocompleteComponent extends BaseAutocompleteControl implements OnInit {
+    @Input() appendTo: any = 'body';
+    @Input() showClear: boolean = true;
+    @Input() emptyMessage: string;
+    @Input() displayName: string; // Added because when we initialize the object options are null
+
+    constructor(
+        protected override translocoService: TranslocoService,
+    ) { 
+        super(translocoService);
+    }
+
+    override ngOnInit(){
+        super.ngOnInit();
+
+        if (this.options == null && this.control.value != null) {
+            this.options = [
+                { label: this.displayName, code: this.control.value }
+            ];
+        }
+
+        if (this.emptyMessage == null) {
+            this.emptyMessage = this.translocoService.translate('EmptyMessage');
+        }
+    }
+
+    search(event: AutoCompleteCompleteEvent){
+        this.onTextInput.next(event);
+    }
+
+    select(event){
+    }
+
+}

package/src/lib/controls/spiderly-calendar/spiderly-calendar.component.html

@@ -0,0 +1,21 @@
+<div class="flex flex-column gap-2">
+    <div *ngIf="getTranslatedLabel() != '' && getTranslatedLabel() != null">
+        <label>{{getTranslatedLabel()}}</label>
+        <required *ngIf="control?.required"></required>
+        <!-- tabindex="-1": Makes the element focusable, but removes it from the tab order. -->
+        <i *ngIf="showTooltip" class="{{tooltipIcon}}" style="margin-left: 5px; cursor: pointer;" [pTooltip]="tooltipText" tabindex="-1" tooltipEvent="focus"></i>
+    </div>
+    <p-datepicker
+    *ngIf="control"
+    [pTooltip]="getValidationErrrorMessages()" [tooltipEvent]="errorMessageTooltipEvent" tooltipPosition="bottom" [tooltipDisabled]="control.valid" tooltipStyleClass="spiderly-tooltip-invalid"
+    [formControl]="control"
+    (onBlur)="control.markAsDirty()"
+    dateFormat="dd.mm.yy."
+    iconDisplay="input" 
+    [showIcon]="true" 
+    [showTime]="showTime"
+    (onSelect)="setDate($event)"
+    appendTo="body"
+    [fluid]="true"
+    />
+</div>

package/src/lib/controls/spiderly-calendar/spiderly-calendar.component.ts

@@ -0,0 +1,37 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { BaseControl } from '../base-control';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { RequiredComponent } from '../../components/required/required.component';
+import { TranslocoService } from '@jsverse/transloco';
+import { PrimengModule } from '../../modules/primeng.module';
+
+@Component({
+    selector: 'spiderly-calendar',
+    templateUrl: './spiderly-calendar.component.html',
+    styles: [],
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        PrimengModule,
+        RequiredComponent
+    ]
+})
+export class SpiderlyCalendarComponent extends BaseControl implements OnInit {
+    @Input() showTime: boolean = false;
+
+    constructor(
+        protected override translocoService: TranslocoService,
+    ) { 
+        super(translocoService);
+    }
+
+    override ngOnInit(){
+        super.ngOnInit();
+    }
+
+    setDate(event:Date) { 
+        
+    }
+}

package/src/lib/controls/spiderly-checkbox/spiderly-checkbox.component.html

@@ -0,0 +1,16 @@
+<div class="flex flex-column gap-2">
+    <div *ngIf="inlineLabel === false && getTranslatedLabel() != '' && getTranslatedLabel() != null">
+      <label>{{getTranslatedLabel()}}</label>
+      <required *ngIf="control?.required"></required>
+    </div>
+    <div class="p-inputgroup p-fluid" style="margin-top: 0.5rem;">
+        <p-checkbox
+        *ngIf="control"
+        [pTooltip]="getValidationErrrorMessages()" [tooltipEvent]="errorMessageTooltipEvent" tooltipPosition="bottom" [tooltipDisabled]="control.valid" tooltipStyleClass="spiderly-tooltip-invalid" 
+        [formControl]="control"
+        [value]="inlineLabel ? label : null"
+        [id]="label"
+        [binary]="true"
+        />
+    </div>
+</div>