special-forms 1.0.0

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

@@ -0,0 +1,189 @@
+import { IInputSettings } from '@lib/components/special-input/special-input.interface';
+import { EControlTypes } from '@lib/core/aux-data/control-types.enum';
+import {
+  IFormStructure,
+  TSpecialFields,
+} from '@lib/core/interfaces/form.interfaces';
+import { Masks } from '@lib/core/masks/maks.enum';
+import { numberMask } from '@lib/core/masks/number.mask';
+import { EnumToArray } from '@lib/core/utils/enum-to-array.util';
+import { InputmaskOptions } from '@ngneat/input-mask';
+import { of } from 'rxjs';
+import { CommonFormClass } from './common.form';
+import { AllControlSettings, CommonFormCreator } from './common.form.interface';
+
+interface IFieldFormData {
+  type: any;
+  placeholder: string;
+  label: string;
+  name: string;
+  tooltip: string;
+  icon: { name: string };
+  length: number;
+  required: boolean;
+  readOnly: boolean;
+  hidden: boolean;
+  disabled: boolean;
+  errorMessages: { key: string; value: string }[];
+}
+
+export class FieldFormClass extends CommonFormClass {
+  public fields(): IFormStructure {
+    return {
+      type: {
+        placeholder: 'Selecciona el tipo de control',
+        label: 'Tipo de control',
+        styleClasses: 'px-2 box-border md:w-2/4',
+        required: true,
+        type: EControlTypes.dropdown,
+        settings: {
+          fieldId: 'value',
+          fieldName: 'value',
+          source: of(
+            EnumToArray(EControlTypes).filter(
+              (type) =>
+                ![
+                  EControlTypes.array,
+                  EControlTypes.form,
+                  EControlTypes.default,
+                  EControlTypes.pkey,
+                  EControlTypes.time,
+                ].includes(type.value)
+            )
+          ),
+        },
+      },
+      placeholder: {
+        placeholder: '',
+        label: 'Placeholder',
+        styleClasses: 'px-2 box-border md:w-2/4',
+        type: EControlTypes.input,
+        settings: {},
+      },
+      label: {
+        placeholder: '',
+        label: 'Etiqueta',
+        styleClasses: 'px-2 box-border md:w-2/4',
+        type: EControlTypes.input,
+        settings: {},
+      },
+      name: {
+        placeholder: '',
+        label: 'Nombre del campo',
+        styleClasses: 'px-2 box-border md:w-2/4',
+        required: true,
+        type: EControlTypes.input,
+        settings: {},
+      },
+      tooltip: {
+        placeholder: '',
+        label: 'Mensaje de ayuda',
+        styleClasses: 'px-2 box-border md:w-2/4',
+        type: EControlTypes.input,
+        settings: {},
+      },
+      length: {
+        placeholder: '',
+        label: 'Largo permitido',
+        styleClasses: 'px-2 box-border md:w-2/4',
+        type: EControlTypes.input,
+        settings: {
+          mask: numberMask(),
+        },
+      },
+      icon: this.iconField('Icono'),
+      required: {
+        label: 'Campo requerido',
+        styleClasses: 'px-2 box-border md:w-1/4',
+        type: EControlTypes.checkbox,
+        icon: 'task_alt',
+        defaultValue: false,
+        settings: {},
+      },
+      readOnly: {
+        label: 'Campo de solo lectura',
+        styleClasses: 'px-2 box-border md:w-1/4',
+        type: EControlTypes.checkbox,
+        icon: 'edit_off',
+        defaultValue: false,
+        settings: {},
+      },
+      hidden: {
+        label: 'Campo escondido',
+        icon: 'visibility_off',
+        styleClasses: 'px-2 box-border md:w-1/4',
+        type: EControlTypes.checkbox,
+        defaultValue: false,
+        settings: {},
+      },
+      disabled: {
+        label: 'Campo desactivado',
+        styleClasses: 'px-2 box-border md:w-1/4',
+        type: EControlTypes.checkbox,
+        icon: 'block',
+        defaultValue: false,
+        settings: {},
+      },
+      errorMessages: {
+        type: EControlTypes.array,
+        label: 'Mensajes de error',
+        settings: {
+          withFormHeader: true,
+          withActionButtons: true,
+          formFields: {
+            key: {
+              type: EControlTypes.input,
+              label: 'Key',
+              styleClasses: 'col-span-12 md:col-span-6',
+              required: true,
+            },
+            value: {
+              type: EControlTypes.input,
+              label: 'value',
+              styleClasses: 'col-span-12 md:col-span-6',
+              required: true,
+            },
+          },
+        },
+      },
+    };
+  }
+
+  public getField(
+    {
+      disabled,
+      errorMessages,
+      hidden,
+      icon,
+      label,
+      length,
+      name,
+      placeholder,
+      readOnly,
+      required,
+      tooltip,
+      type,
+    }: IFieldFormData,
+    settings: AllControlSettings
+  ): IFormStructure {
+    return {
+      [name || 'default']: {
+        type,
+        settings,
+        disabled,
+        hidden,
+        icon: icon?.name,
+        label,
+        length,
+        placeholder,
+        readOnly,
+        required,
+        tooltip,
+        errorMessages: errorMessages.reduce(
+          (prev, curr) => ({ ...prev, [curr.key]: curr.value }),
+          {}
+        ),
+      },
+    };
+  }
+}

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

@@ -0,0 +1,71 @@
+import { IInputSettings } from '@lib/components/special-input/special-input.interface';
+import { EControlTypes } from '@lib/core/aux-data/control-types.enum';
+import { InputTypes } from '@lib/core/aux-data/input-types';
+import { IFormStructure } from '@lib/core/interfaces/form.interfaces';
+import { Masks } from '@lib/core/masks/maks.enum';
+import { InputmaskOptions } from '@ngneat/input-mask';
+import { of } from 'rxjs';
+import { CommonFormClass } from './common.form';
+import { CommonFormCreator } from './common.form.interface';
+
+interface IInputSettingsFormData {
+  type: string;
+  mask: InputmaskOptions<any>;
+  icon: { name: string };
+}
+export class InputFormClass
+  extends CommonFormClass
+  implements CommonFormCreator
+{
+  public settingsFields(): IFormStructure {
+    return {
+      type: {
+        placeholder: 'Tipo de control',
+        label: 'Tipo de control',
+        styleClasses: 'px-2 box-border md:w-2/4',
+        type: EControlTypes.dropdown,
+        settings: {
+          fieldId: 'value',
+          fieldName: 'value',
+          source: of(InputTypes.map((type) => ({ value: type }))),
+        },
+      },
+      mask: {
+        placeholder: 'Máscara',
+        label: 'Tipo de máscara',
+        styleClasses: 'px-2 box-border md:w-2/4',
+        type: EControlTypes.dropdown,
+        settings: {
+          fieldId: 'value',
+          fieldName: 'key',
+          notSelectedText: 'Sin máscara',
+          source: of(
+            Object.entries(Masks).map(([key, value]) => ({ key, value }))
+          ),
+        },
+      },
+      icon: this.iconField('Icono derecho'),
+    };
+  }
+
+  public getSettings({
+    icon,
+    mask,
+    type,
+  }: IInputSettingsFormData): IInputSettings {
+    return {
+      mask,
+      onBlur: (value) => {
+        console.log('ON BLUR ' + value);
+      },
+      onEnter: (value) => {
+        console.log('ON ENTER ' + value);
+      },
+      icon: icon?.name,
+      iconAction: (value) => {
+        console.log('ICON ACTION ' + value);
+      },
+      type,
+    };
+  }
+}

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

@@ -0,0 +1,33 @@
+import { IDropdownSettings } from '@lib/components/special-dropdown/special-dropdown.interface';
+import { ILabelSettings } from '@lib/components/special-label/special-label.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';
+
+export class LabelFormClass
+  extends CommonFormClass
+  implements CommonFormCreator
+{
+  public settingsFields(): IFormStructure {
+    return {
+      isLink: {
+        label: 'Ideterminado',
+        type: EControlTypes.checkbox,
+      },
+    };
+  }
+
+  public getSettings({ isLink }: { isLink: boolean }): ILabelSettings {
+    return {
+      isLink,
+      onClickLink: () => {
+        console.log('LINK');
+      },
+      pipe: () => 'value',
+      stylesPipe: () => '',
+    };
+  }
+}

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

@@ -0,0 +1,17 @@
+import { ITextAreaSettings } from '@lib/components/special-text-area/special-text-area.interface';
+import { IFormStructure } from '@lib/core/interfaces/form.interfaces';
+import { CommonFormClass } from './common.form';
+import { CommonFormCreator } from './common.form.interface';
+
+export class TextAreaFormClass
+  extends CommonFormClass
+  implements CommonFormCreator
+{
+  public settingsFields(): IFormStructure {
+    return {};
+  }
+
+  public getSettings({}): ITextAreaSettings {
+    return {};
+  }
+}

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

@@ -0,0 +1,35 @@
+import { IUploadSettings } from '@lib/components/special-upload/special-upload.interface';
+import { EControlTypes } from '@lib/core/aux-data/control-types.enum';
+import { IFormStructure } from '@lib/core/interfaces/form.interfaces';
+import { CommonFormClass } from './common.form';
+import { CommonFormCreator } from './common.form.interface';
+
+export class UploadFormClass
+  extends CommonFormClass
+  implements CommonFormCreator
+{
+  public settingsFields(): IFormStructure {
+    return {
+      accept: {
+        label: 'Documentos aceptados',
+        styleClasses: 'px-2 box-border md:w-2/4',
+        type: EControlTypes.input,
+        settings: {},
+      },
+      multiple: {
+        label: 'Multiple',
+        type: EControlTypes.checkbox,
+      },
+    };
+  }
+
+  public getSettings({
+    accept,
+    multiple,
+  }: IUploadSettings): IUploadSettings {
+    return {
+      accept,
+      multiple
+    };
+  }
+}

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

@@ -0,0 +1,37 @@
+<div class="{{ theme }}">
+  <div class="p-5">
+    <button mat-stroked-button color="primary" (click)="addControl()">
+      Agregar control
+    </button>
+  </div>
+  <div>
+    <div
+      *ngIf="formGroup$ | async as formGroup"
+      cdkDropList
+      (cdkDropListDropped)="drop($event)"
+      class="w-full flex flex-wrap"
+    >
+      <div
+        cdkDrag
+        class="control-wrapper {{ control.styleClasses }}"
+        *ngFor="
+          let control of formGroup.controls | controlsList;
+          trackBy: trackByFn;
+        "
+      >
+        <button mat-button (click)="close(control.name)" class="close" color="warn">
+          Delete
+        </button>
+        <div class="control">
+          <ng-template controlRender [control]="control"></ng-template>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="p-5">
+    <button mat-stroked-button color="primary" (click)="generate()">
+      Generar
+    </button>
+  </div>
+</div>

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

@@ -0,0 +1,41 @@
+@import "../../assets/styles.scss";
+
+.dark-theme {
+  background: linear-gradient(
+    93deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(29, 43, 69, 1) 0%,
+    rgba(27, 15, 46, 1) 100%
+  );
+  .text {
+    color: rgb(200, 200, 200);
+  }
+}
+
+.light-theme {
+  background-color: white;
+}
+
+.control-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: auto 1rem auto;
+  padding: 1rem 1rem 0;
+  border: 2px solid rgb(20 83 45);
+  color: rgb(200, 200, 200);
+
+  .close {
+    grid-column: 3 / span 1;
+    grid-row: 1 / span 1;
+    justify-self: end;
+  }
+
+  .control {
+    grid-column: 1 / span 3;
+    grid-row: 3 / span 1;
+  }
+
+  &:hover {
+    cursor: move;
+  }
+}

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

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

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

@@ -0,0 +1,95 @@
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { BehaviorSubject, filter, map, Subject } from 'rxjs';
+import { EControlTypes } from '../../core/aux-data/control-types.enum';
+import { SpecialFormGroup } from '../../core/forms/special-forms';
+import { IFormStructure } from '../../core/interfaces/form.interfaces';
+import { SpecialFormBuilderService } from '../../core/services';
+import { ControlDialogComponent } from './components/control-dialog.component';
+
+@Component({
+  selector: 'spf-form-group-viewer',
+  templateUrl: './form-group-viewer.component.html',
+  styleUrls: ['./form-group-viewer.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class FormGroupViewerComponent implements OnInit {
+  private fieldsSub: BehaviorSubject<IFormStructure> = new BehaviorSubject({});
+  formGroup$ = this.fieldsSub
+    .asObservable()
+    .pipe(map((fields) => this.specialFormBuilderService.group(fields)));
+
+  @Input('fields') set fieldSetter(fields: IFormStructure) {}
+
+  @Input() theme;
+
+  @Output() getData: EventEmitter<string> = new EventEmitter();
+
+  formGroup: SpecialFormGroup;
+
+  constructor(
+    private specialFormBuilderService: SpecialFormBuilderService,
+    public dialog: MatDialog
+  ) {}
+
+  get controlTypes(): typeof EControlTypes {
+    return EControlTypes;
+  }
+
+  ngOnInit(): void {}
+
+  addControl() {
+    const dialogRef = this.dialog.open(ControlDialogComponent, {
+      width: '80%',
+      maxWidth: '1440px',
+      maxHeight: '90vh',
+      panelClass: 'dialog-panel-no-padding',
+    });
+
+    dialogRef.afterClosed().subscribe((field: IFormStructure) => {
+      if (field) {
+        this.fieldsSub.next({
+          ...this.fieldsSub.value,
+          ...field,
+        });
+      }
+    });
+  }
+
+  trackByFn(
+    _index: number,
+    { name }: { name: string; control: AbstractControl }
+  ) {
+    return name;
+  }
+
+  drop(event: CdkDragDrop<string[]>) {
+    const currentFields = Object.entries(this.fieldsSub.value).map(
+      ([key, value]) => ({ [key]: value })
+    );
+    moveItemInArray(currentFields, event.previousIndex, event.currentIndex);
+    const fields = currentFields.reduce((prev, curr) => {
+      return { ...prev, ...curr };
+    }, {});
+    this.fieldsSub.next(fields);
+  }
+
+  close(name: string) {
+    const nextFields = { ...this.fieldsSub.value };
+    delete nextFields[name];
+    this.fieldsSub.next(nextFields);
+  }
+
+  generate() {
+    console.log(JSON.stringify(this.fieldsSub.value));
+  }
+}

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

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroupViewerComponent } from './form-group-viewer.component';
+import { SpecialFormBuilderService } from '../../core/services';
+import { SpecialFormModule } from '../../components/special-form/special-form.module';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { ControlDialogComponent } from './components/control-dialog.component';
+import { MatIconModule } from '@angular/material/icon';
+import { FormControlSelectorModule } from '../form-control-selector/form-control-selector.module';
+import { FormControlsListPipeModule } from '@lib/pipes/controls-list-pipe/controls-list.pipe.module';
+import { ControlsRenderDirectiveModule } from '@lib/core/directives/control-render.module';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+
+@NgModule({
+  declarations: [FormGroupViewerComponent, ControlDialogComponent],
+  imports: [
+    ControlsRenderDirectiveModule,
+    FormControlsListPipeModule,
+    DragDropModule,
+    CommonModule,
+    SpecialFormModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatIconModule,
+    FormControlSelectorModule,
+  ],
+  exports: [FormGroupViewerComponent],
+  providers: [SpecialFormBuilderService],
+})
+export class FormGroupViewerModule {}

package/projects/special-forms/src/lib/components/index.ts

@@ -0,0 +1,61 @@
+import { EControlTypes } from '@lib/core/aux-data/control-types.enum';
+
+import { SpecialInputModule } from './special-input/special-input.module';
+import { SpecialInputComponent } from './special-input/special-input.component';
+
+import { SpecialDropdownModule } from './special-dropdown/special-dropdown.module';
+import { SpecialDropdownComponent } from './special-dropdown/special-dropdown.component';
+
+import { SpecialAutocompleteModule } from './special-autocomplete/special-autocomplete.module';
+import { SpecialAutocompleteComponent } from './special-autocomplete/special-autocomplete.component';
+
+import { SpecialDatepickerModule } from './special-datepicker/special-datepicker.module';
+import { SpecialDatepickerComponent } from './special-datepicker/special-datepicker.component';
+
+import { SpecialMultipleAutocompleteModule } from './special-multiple-autocomplete/special-multiple-autocomplete.module';
+import { SpecialMultipleAutocompleteComponent } from './special-multiple-autocomplete/special-multiple-autocomplete.component';
+
+import { SpecialCheckboxModule } from './special-checkbox/special-checkbox.module';
+import { SpecialCheckboxComponent } from './special-checkbox/special-checkbox.component';
+
+import { SpecialTextAreaModule } from './special-text-area/special-text-area.module';
+import { SpecialTextAreaComponent } from './special-text-area/special-text-area.component';
+
+import { SpecialUploadModule } from './special-upload/special-upload.module';
+import { SpecialUploadComponent } from './special-upload/special-upload.component';
+
+import { SpecialArrayModule } from './special-form/special-form-array.module';
+
+import { SpecialLabelModule } from './special-label/special-label.module';
+import { SpecialLabelComponent } from './special-label/special-label.component';
+
+import { SpecialFormModule } from './special-form/special-form.module';
+import {
+  SpecialFormComponent,
+  SpecialArrayComponent,
+} from './special-form/special-form.component';
+
+export {
+  SpecialDatepickerComponent,
+  SpecialDatepickerModule,
+  SpecialAutocompleteComponent,
+  SpecialAutocompleteModule,
+  SpecialDropdownModule,
+  SpecialDropdownComponent,
+  SpecialMultipleAutocompleteModule,
+  SpecialMultipleAutocompleteComponent,
+  SpecialCheckboxModule,
+  SpecialCheckboxComponent,
+  SpecialTextAreaModule,
+  SpecialTextAreaComponent,
+  SpecialUploadModule,
+  SpecialUploadComponent,
+  SpecialArrayModule,
+  SpecialArrayComponent,
+  SpecialLabelComponent,
+  SpecialLabelModule,
+  SpecialFormComponent,
+  SpecialInputModule,
+  SpecialFormModule,
+  SpecialInputComponent,
+};