special-forms 1.0.0

package/projects/special-forms/src/lib/aux-storybook-components/form-control-viewer/form-control-viewer.component.ts

@@ -0,0 +1,66 @@
+import {
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { EControlTypes } from '../../core/aux-data/control-types.enum';
+import { SpecialFormControl } from '../../core/forms/special-forms';
+import {
+  TSpecialAutocomplete,
+  TSpecialDropdown,
+} from '../../core/interfaces/form.interfaces';
+import { Masks } from '../../core/masks/maks.enum';
+import { SpecialFormBuilderService } from '../../core/services';
+import { OverlayContainer } from '@angular/cdk/overlay';
+
+@Component({
+  selector: 'spf-form-control-viewer',
+  templateUrl: './form-control-viewer.component.html',
+  styleUrls: ['./form-control-viewer.component.scss'],
+})
+export class FormControlViewerComponent implements OnInit {
+  @Input('field') set fieldSetter(field: any) {
+    this.control = this.specialFormBuilderService.control(field);
+  }
+
+  @Input('input') set inputSetter(field: any) {
+    field.settings.mask = Masks[field.settings.mask];
+    this.control = this.specialFormBuilderService.control(field);
+  }
+
+  @Input('dropdown') set dropdownSetter(field: Partial<TSpecialDropdown>) {
+    this.control = this.specialFormBuilderService.control(field);
+  }
+
+  @Input('autocomplete') set autocompleteSetter(
+    field: Partial<TSpecialAutocomplete>
+  ) {
+    field.settings.getData = () => this.getData.emit();
+    this.control = this.specialFormBuilderService.control(field);
+  }
+
+  @Input('theme') set themeSetter(theme: string) {
+    this.overlayContainer.getContainerElement().classList.add(theme);
+    this.theme = theme;
+  }
+
+  @Output() getData: EventEmitter<string> = new EventEmitter();
+
+  control: SpecialFormControl<any>;
+
+  theme
+
+  constructor(
+    private overlayContainer: OverlayContainer,
+    private specialFormBuilderService: SpecialFormBuilderService
+  ) {}
+
+  get controlTypes(): typeof EControlTypes {
+    return EControlTypes;
+  }
+
+  ngOnInit(): void {}
+}

package/projects/special-forms/src/lib/aux-storybook-components/form-control-viewer/form-control-viewer.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormControlViewerComponent } from './form-control-viewer.component';
+import { SpecialFormBuilderService } from '../../core/services';
+import { FormControlSelectorModule } from '../form-control-selector/form-control-selector.module';
+
+@NgModule({
+  declarations: [FormControlViewerComponent],
+  imports: [
+    CommonModule,
+    FormControlSelectorModule
+  ],
+  exports: [FormControlViewerComponent],
+  providers: [SpecialFormBuilderService],
+})
+export class FormControlViewerModule {}

package/projects/special-forms/src/lib/aux-storybook-components/form-group-viewer/components/control-dialog.component.html

@@ -0,0 +1,31 @@
+<div class="container divide-y divide-solid">
+  <h1 class="p-5 font-bold">Crear nuevo control</h1>
+  <div class="p-5 overflow-y-auto">
+    <sp-form *ngIf="reloadCheck" [control]="formGroup"></sp-form>
+  </div>
+  <!-- <div class="p-5 overflow-y-auto">
+    <h1 class="p-5 font-bold">Configuraciones del campo</h1>
+    <sp-form *ngIf="settingsForm" [control]="settingsForm"></sp-form>
+  </div> -->
+  <h1 class="p-5 font-bold">Campo generado</h1>
+  <div class="flex justifify-center p-5">
+    <sp-form *ngIf="control" [control]="control"></sp-form>
+  </div>
+  <div class="flex justify-end p-5">
+    <div class="mx-1">
+      <button mat-stroked-button color="warn" (click)="cancel()">
+        Cancelar
+      </button>
+    </div>
+    <div class="mx-1">
+      <button
+        mat-stroked-button
+        color="primary"
+        [disabled]="formGroup.invalid"
+        (click)="addControl()"
+      >
+        Aceptar
+      </button>
+    </div>
+  </div>
+</div>

package/projects/special-forms/src/lib/aux-storybook-components/form-group-viewer/components/control-dialog.component.spec.ts

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

package/projects/special-forms/src/lib/aux-storybook-components/form-group-viewer/components/control-dialog.component.ts

@@ -0,0 +1,102 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { debounceTime, filter, map, Subscription, switchMap, tap } from 'rxjs';
+import { EControlTypes } from '../../../core/aux-data/control-types.enum';
+import { SpecialFormGroup } from '../../../core/forms/special-forms';
+import { SpecialFormBuilderService } from '../../../core/services';
+import { FieldFormClass } from './settings-strategy/field.form';
+import { CommonFormCreator } from './settings-strategy/common.form.interface';
+import { InputFormClass } from './settings-strategy/input.form';
+import { DropDownFormClass } from './settings-strategy/dropdown.form';
+import { AutocompleteFormClass } from './settings-strategy/autocomplete.form';
+import { DatePickerFormClass } from './settings-strategy/datepicker.form';
+import { CheckboxFormClass } from './settings-strategy/checkbox.form';
+import { UploadFormClass } from './settings-strategy/upload.form';
+import { TextAreaFormClass } from './settings-strategy/text-area.form';
+import { IFormStructure } from '@lib/core/interfaces/form.interfaces';
+
+@Component({
+  selector: 'spf-control-dialog',
+  templateUrl: './control-dialog.component.html',
+  styleUrls: ['./control-dialog.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class ControlDialogComponent implements OnInit {
+  private formField = new FieldFormClass();
+  private formGroup: SpecialFormGroup = this.formBuilder.group(
+    this.formField.fields()
+  );
+  reloadCheck = true;
+  sub = new Subscription();
+  settingsForm: SpecialFormGroup;
+  control: SpecialFormGroup;
+  field: IFormStructure;
+
+  constructor(
+    private formBuilder: SpecialFormBuilderService,
+    public dialogRef: MatDialogRef<ControlDialogComponent>
+  ) {}
+
+  ngOnInit(): void {
+    let settingsCreator: CommonFormCreator;
+    this.formGroup
+      .get('type')
+      .valueChanges.pipe(
+        filter((type) => !!type),
+        tap((type) => (settingsCreator = this.settingsCreation(type))),
+        map(
+          () =>
+            this.formBuilder.group(settingsCreator.settingsFields(), {
+              label: 'Configuración',
+            }) as SpecialFormGroup
+        ),
+        tap(() => (this.reloadCheck = false)),
+        debounceTime(20),
+        tap(() => (this.reloadCheck = true)),
+        switchMap((settingsForm) => {
+          this.formGroup.setControl('settings', settingsForm);
+          return this.formGroup.valueChanges;
+        }),
+        debounceTime(20)
+      )
+      .subscribe((rawField) => {
+        this.field = this.formField.getField(
+          rawField,
+          settingsCreator.getSettings(rawField.settings)
+        );
+        this.control = this.formBuilder.group(this.field);
+      });
+  }
+
+  settingsCreation(type: EControlTypes): CommonFormCreator {
+    switch (type) {
+      case EControlTypes.input:
+        return new InputFormClass();
+      case EControlTypes.dropdown:
+        return new DropDownFormClass();
+      case EControlTypes.autocomplete:
+      case EControlTypes.multiple:
+        return new AutocompleteFormClass();
+      case EControlTypes.date:
+        return new DatePickerFormClass();
+      case EControlTypes.checkbox:
+        return new CheckboxFormClass();
+      case EControlTypes.upload:
+        return new UploadFormClass();
+      default:
+        return new TextAreaFormClass();
+    }
+  }
+
+  addControl() {
+    this.dialogRef.close(this.field);
+  }
+
+  cancel() {
+    this.dialogRef.close();
+  }
+
+  ngOnDestroy() {
+    this.sub.unsubscribe();
+  }
+}

package/projects/special-forms/src/lib/aux-storybook-components/form-group-viewer/components/settings-strategy/autocomplete.form.ts

@@ -0,0 +1,87 @@
+import { IAutocompleteSettings } from '@lib/components/special-autocomplete/special-autocomplete.interface';
+import { EControlTypes } from '@lib/core/aux-data/control-types.enum';
+import { IFormStructure } from '@lib/core/interfaces/form.interfaces';
+import { Subject } from 'rxjs';
+import { CommonFormClass } from './common.form';
+import { CommonFormCreator } from './common.form.interface';
+
+interface IAutocompleteSettingsFormData {
+  source: { id: string; name: string; image?: string }[];
+  icon: { name: string };
+}
+export class AutocompleteFormClass
+  extends CommonFormClass
+  implements CommonFormCreator
+{
+  public settingsFields(): IFormStructure {
+    return {
+      source: {
+        label: 'Data del campo',
+        styleClasses: 'px-2 box-border md:w-2/4',
+        type: EControlTypes.array,
+        settings: {
+          withActionButtons: true,
+          withFormHeader: true,
+          formFields: {
+            id: {
+              type: EControlTypes.input,
+              label: 'id',
+              styleClasses: 'col-span-12 md:col-span-4',
+              required: true,
+            },
+            name: {
+              type: EControlTypes.input,
+              label: 'Nombre',
+              styleClasses: 'col-span-12 md:col-span-4',
+              required: true,
+            },
+            image: {
+              type: EControlTypes.input,
+              label: 'Imagen',
+              styleClasses: 'col-span-12 md:col-span-4',
+            },
+          },
+        },
+      },
+      fieldId: {
+        type: EControlTypes.default,
+        defaultValue: 'id',
+      },
+      fieldName: {
+        type: EControlTypes.default,
+        defaultValue: 'name',
+      },
+      fieldImage: {
+        type: EControlTypes.default,
+        defaultValue: 'image',
+      },
+      icon: this.iconField('Icono derecho'),
+    };
+  }
+  public getSettings({
+    icon,
+    source,
+  }: IAutocompleteSettingsFormData): IAutocompleteSettings {
+    const source$ = new Subject<any[]>();
+
+    return {
+      source: source$.asObservable(),
+      getData: (query) => {
+        const filteredData = source
+          .filter((item) => item.name.includes(query))
+          .slice(0, 10);
+
+        source$.next(filteredData);
+      },
+      fieldId: 'id',
+      fieldName: 'name',
+      icon: icon?.name,
+      iconAction: (value) => {
+        console.log('ICON ACTION ' + value);
+      },
+      onSelect: (value) => {
+        console.log('ICON ACTION ' + value);
+      },
+    };
+  }
+}

package/projects/special-forms/src/lib/aux-storybook-components/form-group-viewer/components/settings-strategy/checkbox.form.ts

@@ -0,0 +1,51 @@
+import { ICheckboxSettings } from "@lib/components/special-checkbox/special-checkbox.interface";
+import { EControlTypes } from "@lib/core/aux-data/control-types.enum";
+import { IFormStructure } from "@lib/core/interfaces/form.interfaces";
+import { of } from "rxjs";
+import { CommonFormClass } from "./common.form";
+import { CommonFormCreator } from "./common.form.interface";
+
+interface ICheckboxSettingsFormData {
+  labelPosition?: 'before' | 'after';
+  indeterminate?: boolean;
+}
+export class CheckboxFormClass
+  extends CommonFormClass
+  implements CommonFormCreator
+{
+  public settingsFields(): IFormStructure {
+    return {
+      labelPosition: {
+        label: 'Data del campo',
+        styleClasses: 'px-2 box-border md:w-2/4',
+        type: EControlTypes.dropdown,
+        settings: {
+          source: of([
+            {
+              name: 'before',
+            },
+            {
+              name: 'after',
+            },
+          ]),
+          fieldId: 'name',
+          fieldName: 'name',
+        },
+      },
+      indeterminate: {
+        label: 'Ideterminado',
+        type: EControlTypes.checkbox,
+      },
+    };
+  }
+
+  public getSettings({
+    indeterminate,
+    labelPosition,
+  }: ICheckboxSettingsFormData): ICheckboxSettings {
+    return {
+      indeterminate,
+      labelPosition,
+    };
+  }
+}

package/projects/special-forms/src/lib/aux-storybook-components/form-group-viewer/components/settings-strategy/common.form.interface.ts

@@ -0,0 +1,24 @@
+import { IAutocompleteSettings } from '@lib/components/special-autocomplete/special-autocomplete.interface';
+import { ICheckboxSettings } from '@lib/components/special-checkbox/special-checkbox.interface';
+import { IDatePickerSettings } from '@lib/components/special-datepicker/special-datepicker.interface';
+import { IDropdownSettings } from '@lib/components/special-dropdown/special-dropdown.interface';
+import { IInputSettings } from '@lib/components/special-input/special-input.interface';
+import { ILabelSettings } from '@lib/components/special-label/special-label.interface';
+import { ITextAreaSettings } from '@lib/components/special-text-area/special-text-area.interface';
+import { IUploadSettings } from '@lib/components/special-upload/special-upload.interface';
+import { IFormStructure } from '@lib/core/interfaces/form.interfaces';
+
+export type AllControlSettings =
+  | ICheckboxSettings
+  | IDropdownSettings
+  | IInputSettings
+  | IDatePickerSettings
+  | ILabelSettings
+  | IUploadSettings
+  | ITextAreaSettings
+  | IAutocompleteSettings;
+
+export interface CommonFormCreator {
+  settingsFields?(): IFormStructure;
+  getSettings(data: any): AllControlSettings;
+}

package/projects/special-forms/src/lib/aux-storybook-components/form-group-viewer/components/settings-strategy/common.form.ts

@@ -0,0 +1,31 @@
+import { ICON_NAMES } from '@lib/core/aux-data/all-icons';
+import { EControlTypes } from '@lib/core/aux-data/control-types.enum';
+import { TRawFields } from '@lib/core/interfaces/form.interfaces';
+import { Subject } from 'rxjs';
+
+export class CommonFormClass {
+  protected iconField(label:string): Partial<TRawFields> {
+    const iconSUb = new Subject<any[]>();
+    return {
+      placeholder: 'Buscar',
+      label,
+      tooltip: 'Selecciona una opción',
+      styleClasses: 'px-2 box-border md:w-2/4',
+      icon: 'format_italic',
+      type: EControlTypes.autocomplete,
+      settings: {
+        fieldId: 'name',
+        fieldName: 'name',
+        source: iconSUb.asObservable(),
+        getData: (query) => {
+          const filteredIcons = ICON_NAMES.filter((icon) =>
+            icon.includes(query)
+          )
+            .slice(0, 10)
+            .map((icon) => ({ name: icon }));
+          iconSUb.next(filteredIcons);
+        },
+      },
+    };
+  }
+}

package/projects/special-forms/src/lib/aux-storybook-components/form-group-viewer/components/settings-strategy/datepicker.form.ts

@@ -0,0 +1,56 @@
+
+import { IDatePickerSettings } from '@lib/components/special-datepicker/special-datepicker.interface';
+import { EControlTypes } from '@lib/core/aux-data/control-types.enum';
+import { IFormStructure } from '@lib/core/interfaces/form.interfaces';
+import { numberMask } from '@lib/core/masks/number.mask';
+import { CommonFormClass } from './common.form';
+import { CommonFormCreator } from './common.form.interface';
+
+interface IDatePickerSettingsFormData {
+  lowerLimit: number;
+  upperLimit: number;
+  startAt: Date;
+}
+export class DatePickerFormClass
+  extends CommonFormClass
+  implements CommonFormCreator
+{
+  public settingsFields(): IFormStructure {
+    return {
+      lowerLimit: {
+        label: 'Límite inferior',
+        styleClasses: 'px-2 box-border md:w-2/4',
+        type: EControlTypes.input,
+        settings: {
+          mask: numberMask(10000000000000),
+        },
+      },
+      upperLimit: {
+        label: 'Límite superior',
+        styleClasses: 'px-2 box-border md:w-2/4',
+        type: EControlTypes.input,
+        settings: {
+          mask: numberMask(10000000000000),
+        },
+      },
+      startAt: {
+        label: 'Empezar en',
+        styleClasses: 'px-2 box-border md:w-2/4',
+        type: EControlTypes.dropdown,
+      },
+      icon: this.iconField('Icono derecho'),
+    };
+  }
+
+  public getSettings({
+    lowerLimit,
+    startAt,
+    upperLimit,
+  }: IDatePickerSettingsFormData): IDatePickerSettings {
+    return {
+      lowerLimit,
+      startAt,
+      upperLimit,
+    };
+  }
+}

package/projects/special-forms/src/lib/aux-storybook-components/form-group-viewer/components/settings-strategy/dropdown.form.ts

@@ -0,0 +1,80 @@
+import { IDropdownSettings } from '@lib/components/special-dropdown/special-dropdown.interface';
+import { EControlTypes } from '@lib/core/aux-data/control-types.enum';
+import { IFormStructure } from '@lib/core/interfaces/form.interfaces';
+import { of } from 'rxjs';
+
+import { CommonFormClass } from './common.form';
+import { CommonFormCreator } from './common.form.interface';
+
+interface IDropdownSettingsFormData {
+  source: { id: string; name: string }[];
+  notSelectedText: string;
+  icon: { name: string };
+}
+export class DropDownFormClass
+  extends CommonFormClass
+  implements CommonFormCreator
+{
+  public settingsFields(): IFormStructure {
+    return {
+      source: {
+        label: 'Data del campo',
+        styleClasses: 'px-2 box-border md:w-2/4',
+        type: EControlTypes.array,
+        settings: {
+          withActionButtons: true,
+          withFormHeader: true,
+          formFields: {
+            id: {
+              type: EControlTypes.input,
+              label: 'Id',
+              styleClasses: 'col-span-12 md:col-span-6',
+              required: true,
+            },
+            name: {
+              type: EControlTypes.input,
+              label: 'Nombre',
+              styleClasses: 'col-span-12 md:col-span-6',
+              required: true,
+            },
+          },
+        },
+      },
+      fieldId: {
+        type: EControlTypes.default,
+        defaultValue: 'id',
+      },
+      fieldName: {
+        type: EControlTypes.default,
+        defaultValue: 'name',
+      },
+      notSelectedText: {
+        placeholder: '',
+        label: 'Label de no seleccion',
+        styleClasses: 'px-2 box-border md:w-2/4',
+        type: EControlTypes.input,
+      },
+      icon: this.iconField('Icono derecho'),
+    };
+  }
+
+  public getSettings({
+    icon,
+    notSelectedText,
+    source,
+  }: IDropdownSettingsFormData): IDropdownSettings {
+    return {
+      source: of(source),
+      fieldId: 'id',
+      fieldName: 'name',
+      notSelectedText,
+      icon: icon?.name,
+      iconAction: (value) => {
+        console.log('ICON ACTION ' + value);
+      },
+      onSelect: (value) => {
+        console.log('ICON ACTION ' + value);
+      },
+    };
+  }
+}