@unipin/angular-applet 18.9.2 → 18.9.4

package/projects/unipin-angular/src/lib/components/forms/country-input/form-country-input.component.ts

@@ -0,0 +1,210 @@
+import { Attribute, ChangeDetectorRef, ChangeDetectionStrategy, Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { Country } from '../../../../graphql/generated';
+import { CountryService } from '../../../services';
+import { getFormErrorMessage } from '../../../utils';
+
+@Component({
+  standalone: true,
+  selector: 'up-country-input',
+  styleUrl: './form-country-input.component.scss',
+  templateUrl: './form-country-input.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { 
+    class: 'd-block' 
+  },
+  imports: [
+    FormsModule,
+    NgSelectModule
+  ],
+  providers: [
+    {
+      multi: true,
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: FormCountryInputComponent
+    },
+    {
+      multi: true,
+      provide: NG_VALIDATORS,
+      useExisting: FormCountryInputComponent
+    }
+  ]
+})
+export class FormCountryInputComponent implements ControlValueAccessor, Validator, OnInit, OnDestroy {
+  
+  /**
+   * Input variable to determine whether the country input is clearable.
+   * @type {boolean}
+   * @default {true}
+   */
+  @Input() public clearable: boolean = true;
+
+  /**
+   * Input variable to determine whether the country input is required.
+   * @type {boolean}
+   * @default {false}
+   */
+  @Input() public required: boolean = false;
+
+  /**
+   * Input variable to determine whether the select input allows multiple selections.
+   * @type {boolean}
+   * @default false
+   */
+  @Input() public multiple: boolean = false;
+
+  /**
+   * Input variable to determine whether the country input is disabled.
+   * @type {boolean}
+   * @default {false}
+   */
+  @Input() public disabled: boolean = false;
+
+  /**
+   * Output variable to emit changes when the country input value changes.
+   * @type {EventEmitter<any>}
+   */
+  @Output() public onChange: EventEmitter<Country | undefined | null> = new EventEmitter();
+
+  /**
+   * Observable for displaying items in the country input.
+   * @type {Observable<any[]>}
+   */
+  public items: { label: string, value: string, data: Country }[] = [];
+
+  /**
+   * Boolean flag indicating whether the country input is loading.
+   * @type {boolean}
+   * @default {false}
+   */
+  public isLoading: boolean = true;
+
+  /**
+   * Boolean flag indicating whether the country input has been touched.
+   * @type {boolean}
+   * @default {false}
+   */
+  public isTouched: boolean = false;
+
+  /**
+   * The value of the country input.
+   * @type {any | null}
+   * @default {null}
+   */
+  public value: any | null = null;
+
+  /**
+   * Error message associated with the country input.
+   * @type {string}
+   * @default {undefined}
+   */
+  public errorMsg!: string;
+
+  /**
+   * The form control associated with the country input.
+   * @type {AbstractControl}
+   */
+  protected formControl!: AbstractControl;
+
+  /**
+   * Callback function to handle value changes in the country input.
+   * @type {(_val: any) => void}
+   */
+  protected changed: (_val: any) => void = (_val: any) => {};
+
+  /**
+   * Callback function to handle touch events in the country input.
+   * @type {() => void}
+   */
+  protected onTouched: () => void = () => {};
+
+  protected sub?: Subscription;
+
+  constructor(
+    @Attribute('placeholder') public placeholder: string,
+    protected readonly ch: ChangeDetectorRef,
+    protected readonly countryService: CountryService,
+  ) {}
+
+  public ngOnInit(): void{
+    this.sub = this.countryService.query().subscribe({
+      error: () => {
+        this.items = [];
+        this.setIsLoading(false);
+      },
+      next: ({ data: { webConfigMsCountry: { data }}}) => {
+        this.items = data.map((d) => ({ label: d.name!, value: d.code!, data: d }));
+        this.setIsLoading(false);
+      }
+    });
+  }
+
+  public ngOnDestroy(): void{
+    this.sub?.unsubscribe();
+  }
+  
+  /**
+   * Registers a callback function to be called when the select input value changes.
+   * @param {(_val: any) => void} fn - Callback function for value changes.
+   */
+  public registerOnChange(fn: any): void{ this.changed = fn; }
+  
+  /**
+   * Registers a callback function to be called when the select input is touched.
+   * @param {() => void} fn - Callback function for touch events.
+   */
+  public registerOnTouched(fn: any): void{ this.onTouched = fn; } 
+  
+  /**
+   * Writes a new value to the select input.
+   * @param {*} val - The new value to be set.
+   */
+  public writeValue(val: any): void{
+    this.value = val;
+    this.ch.markForCheck();
+  }
+  
+   /**
+   * Sets the disabled state of the select input.
+   * @param {boolean} d - The new disabled state.
+   */
+  public setDisabledState?(d: boolean): void{ 
+    this.disabled = d; 
+    this.ch.markForCheck();
+  }
+
+  /**
+   * Validates the select input.
+   * @param {AbstractControl} control - The abstract control representing the select input.
+   * @returns {(ValidationErrors | null)} - Validation errors if any, otherwise null.
+   */
+  public validate(control: AbstractControl): ValidationErrors | null{    
+    this.formControl = control;
+    return null;
+  }
+
+  public change(e?: any): void{
+    if (!this.isTouched) {
+      this.onTouched();
+      this.isTouched = true;
+    }
+    
+    if (!this.disabled) {
+      if (!e) this.value = null;
+      else {
+        this.value = !this.multiple? e.value : e.map((o: any) => o.value);
+      }
+
+      this.changed(this.value);
+      this.onChange.emit(e.data);
+      this.errorMsg = getFormErrorMessage(this.formControl.errors, 'Country');
+    }
+  }
+
+  protected setIsLoading(b: boolean): void{
+    this.isLoading = b;
+    this.ch.markForCheck();
+  }
+}

package/projects/unipin-angular/src/lib/components/forms/country-input/form-country-input.stories.ts

@@ -0,0 +1,175 @@
+import { importProvidersFrom } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { FormControl } from '@angular/forms';
+import { InMemoryCache } from '@apollo/client';
+import { APOLLO_OPTIONS, ApolloModule } from 'apollo-angular';
+import { HttpLink } from 'apollo-angular/http';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { moduleMetadata, type Meta, type StoryObj, applicationConfig, argsToTemplate } from '@storybook/angular';
+import { FormCountryInputComponent } from './form-country-input.component';
+
+const ctrl = new FormControl();
+ctrl.markAsTouched();
+
+const meta: Meta<FormCountryInputComponent> = {
+  title: 'Form/Country Input',
+  tags: ['autodocs'],
+  component: FormCountryInputComponent,
+  decorators: [
+    applicationConfig({
+      providers: [
+        provideHttpClient(),
+        importProvidersFrom([
+          ApolloModule
+        ]),
+        {
+          provide: APOLLO_OPTIONS,
+          deps: [ HttpLink ],
+          useFactory: (httpLink: HttpLink) => ({ cache: new InMemoryCache(), link: httpLink.create({ uri: 'https://ms-gateway.up.unipin.dev/graphql' }) }),
+        },
+      ],
+    }),
+    moduleMetadata({
+      imports: [ NgSelectModule, FormCountryInputComponent ],
+    })
+  ],
+  argTypes: {
+    clearable: {
+      defaultValue: true,
+      description: 'Allow to clear selected value. Default `true`',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'boolean'
+      }
+    },
+    disabled: {
+      defaultValue: false,
+      description: 'If `true`, the user cannot interact with the select.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'boolean'
+      },
+    },
+    required: {
+      defaultValue: false,
+      description: 'If `true`, the user must fill in a value before submitting a form.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'boolean'
+      },
+    },
+    change: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    errorMsg: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    isLoading: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    isTouched: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    onChange: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    registerOnChange: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    registerOnTouched: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    setDisabledState: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    validate: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    value: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    writeValue: {
+      table: { disable: true },
+      control: { disable: true }
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<FormCountryInputComponent>;
+
+export const Default: Story = {
+  render: (props) => ({
+    props,
+    template: `
+      <div style="width: 400px">
+        <up-country-input ${ argsToTemplate(props) } />
+      </div>
+    `,
+  }),
+};
+
+export const Required: Story = {
+  args: {
+    ...Default.args,
+    required: true
+  },
+  render: (props) => ({
+    props,
+    template: `
+      <div style="width: 400px">
+        <up-country-input ${ argsToTemplate(props) } />
+      </div>
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+  render: (props) => ({
+    props,
+    template: `
+      <div style="width: 400px">
+        <up-country-input ${ argsToTemplate(props) } />
+      </div>
+    `,
+  }),
+};
+
+export const Error: Story = {
+  args: {
+    ...Required.args,
+    errorMsg: 'Field is required',
+  },
+  render: (props) => ({
+    props,
+    template: `
+      <div style="width: 400px">
+        <up-country-input ${ argsToTemplate(props) } />
+      </div>
+    `,
+  }),
+};
+

package/projects/unipin-angular/src/lib/components/forms/currency-input/form-currency-input.component.html

@@ -0,0 +1,42 @@
+<label class="form-label" [class.required]="required">{{ label }}</label>
+
+<ng-template #selectForm>
+    <ng-select 
+        class="flex-shrink-0"
+        [class.number]="isInputNumber"
+        appendTo="body"
+        bindValue="value"
+        placeholder="{{ placeholder }}"
+        [virtualScroll]="true"
+        [items]="items"
+        [ngModel]="value"
+        [readonly]="disabled" 
+        [loading]="isLoading"
+        [clearable]="clearable"
+        (change)="change($event);"
+    >
+        <ng-template ng-option-tmp let-i="item">
+            <span>{{ isInputNumber? i.value : i.label }}</span>
+        </ng-template>
+
+        <ng-template ng-label-tmp let-i="item">
+            <span>{{ isInputNumber? i.value : i.label }}</span>
+        </ng-template>
+    </ng-select>
+</ng-template>
+
+@if (!isInputNumber) {
+    <ng-container *ngTemplateOutlet="selectForm" />
+} 
+@else {
+    <div class="d-flex justify-content-between gap-1 align-items-center">
+        <ng-container *ngTemplateOutlet="selectForm" />
+
+        <input type="number" [placeholder]="numberPlaceholder" class="form-control flex-grow-1" [disabled]="isNumberDisabled" [value]="numberValue" (keypress)="limitDecimal($event)" (input)="numberInput($event.target)">
+    </div>
+}
+
+@if (errorMsg) {
+    <label class="is-invalid">{{ errorMsg }}</label>
+}
+

package/projects/unipin-angular/src/lib/components/forms/currency-input/form-currency-input.component.scss

@@ -0,0 +1,4 @@
+ng-select.number {
+    min-width: 105px;
+    max-width: 105px;
+}

package/projects/unipin-angular/src/lib/components/forms/currency-input/form-currency-input.component.ts

@@ -0,0 +1,285 @@
+import { Attribute, ChangeDetectorRef, ChangeDetectionStrategy, Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { AbstractControl, ControlValueAccessor, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { Currency } from '../../../../graphql/generated';
+import { getFormErrorMessage } from '../../../utils';
+import { CurrencyService } from '../../../services';
+
+@Component({
+  standalone: true,
+  selector: 'up-currency-input',
+  styleUrl: './form-currency-input.component.scss',
+  templateUrl: './form-currency-input.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { 
+    class: 'd-block' 
+  },
+  imports: [
+    FormsModule,
+    NgSelectModule,
+    NgTemplateOutlet,
+  ],
+  providers: [
+    {
+      multi: true,
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: FormCurrencyInputComponent
+    },
+    {
+      multi: true,
+      provide: NG_VALIDATORS,
+      useExisting: FormCurrencyInputComponent
+    }
+  ]
+})
+export class FormCurrencyInputComponent implements ControlValueAccessor, Validator, OnInit, OnDestroy {
+  
+  /**
+   * Input variable for the label associated with the input.
+   * @type {string}
+   * @default ''
+   */
+  @Input() public label: string = 'Currency';
+
+  /**
+   * Input variable to determine whether the select input is clearable.
+   * @type {boolean}
+   * @default {true}
+   */
+  @Input() public clearable: boolean = true;
+
+  /**
+   * Input variable to determine whether the number input form is hide or show.
+   * @type {boolean}
+   * @default {false}
+   */
+  @Input() public isInputNumber: boolean = false;
+
+  /**
+   * Input variable to set the value of input number field.
+   * @type {number | null}
+   * @default {null}
+   */
+  @Input() public numberValue: number | null = null;
+
+  /**
+   * Input variable to determine whether the number input is disabled.
+   * @type {boolean}
+   * @default {false}
+   */
+  @Input() public isNumberDisabled: boolean = false;
+
+  /**
+   * Input variable to determine whether the select input is required.
+   * @type {boolean}
+   * @default {false}
+   */
+  @Input() public required: boolean = false;
+
+  /**
+   * Input variable to determine whether the select input is disabled.
+   * @type {boolean}
+   * @default {false}
+   */
+  @Input() public disabled: boolean = false;
+
+  /**
+   * Output variable to emit changes when the select input value changes.
+   * @type {EventEmitter<any>}
+   */
+  @Output() public onChange: EventEmitter<{ selectedItem?: Currency, number: number | null }> = new EventEmitter();
+
+  /**
+   * Observable for displaying items in the select input.
+   * @type {Observable<any[]>}
+   */
+  public items: { label: string, value: string, data: Currency }[] = [];
+
+  /**
+   * Boolean flag indicating whether the select input is loading.
+   * @type {boolean}
+   * @default {false}
+   */
+  public isLoading: boolean = true;
+
+  /**
+   * Boolean flag indicating whether the select input has been touched.
+   * @type {boolean}
+   * @default {false}
+   */
+  public isTouched: boolean = false;
+
+  /**
+   * The value of the select input.
+   * @type {any | null}
+   * @default {null}
+   */
+  public value: any | null = null;
+
+  /**
+   * Error message associated with the select input.
+   * @type {string}
+   * @default {undefined}
+   */
+  public errorMsg!: string;
+
+  /**
+   * The form control associated with the select input.
+   * @type {AbstractControl}
+   */
+  protected formControl!: AbstractControl;
+
+  /**
+   * The number of maximum digits allowed behind the comma.
+   * @type {number}
+   * @default {0}
+   */
+  protected decimalLimiter: number = 0;
+
+  /**
+   * Callback function to handle value changes in the select input.
+   * @type {(_val: any) => void}
+   */
+  protected changed: (_val: any) => void = (_val: any) => {};
+
+  /**
+   * Callback function to handle touch events in the select input.
+   * @type {() => void}
+   */
+  protected onTouched: () => void = () => {};
+
+  protected sub?: Subscription;
+  protected selectedItem?: Currency;
+
+  constructor(
+    @Attribute('placeholder') public placeholder: string,
+    @Attribute('numberPlaceholder') public numberPlaceholder: string,
+    protected readonly ch: ChangeDetectorRef,
+    protected readonly currencyService: CurrencyService,
+  ) {}
+
+  public ngOnInit(): void{
+    this.sub = this.currencyService.query().subscribe({
+      error: () => {
+        this.items = [];
+        this.setIsLoading(false);
+      },
+      next: ({ data: { webConfigMsCurrency: { data }}}) => {
+        this.items = data.map((d) => ({ label: `[${ d.code }] ${ d.name }`, value: d.code!, data: d }));
+        this.setIsLoading(false);
+      }
+    });
+  }
+
+  public ngOnDestroy(): void{
+    this.sub?.unsubscribe();
+  }
+  
+  /**
+   * Registers a callback function to be called when the select input value changes.
+   * @param {(_val: any) => void} fn - Callback function for value changes.
+   */
+  public registerOnChange(fn: any): void{ this.changed = fn; }
+  
+  /**
+   * Registers a callback function to be called when the select input is touched.
+   * @param {() => void} fn - Callback function for touch events.
+   */
+  public registerOnTouched(fn: any): void{ this.onTouched = fn; } 
+  
+  /**
+   * Writes a new value to the select input.
+   * @param {*} val - The new value to be set.
+   */
+  public writeValue(val: any): void{
+    this.value = val;
+
+    if (!val) this.change(null);
+    else {
+      const d = this.items.find(({ value }) => value === val);
+      
+      if (d) {
+        this.change({ value: val, data: d.data });
+      }
+    }
+    this.ch.markForCheck();
+  }
+  
+   /**
+   * Sets the disabled state of the select input.
+   * @param {boolean} d - The new disabled state.
+   */
+  public setDisabledState?(d: boolean): void{ 
+    this.disabled = d; 
+    this.ch.markForCheck();
+  }
+
+  /**
+   * Validates the select input.
+   * @param {AbstractControl} control - The abstract control representing the select input.
+   * @returns {(ValidationErrors | null)} - Validation errors if any, otherwise null.
+   */
+  public validate(control: AbstractControl): ValidationErrors | null{    
+    this.formControl = control;
+    return null;
+  }
+  
+  /**
+   * Event handler for changes in the select input.
+   * Set the number as null if currency changed to prevent mismatch between selected currency and the number comma allowed limit.
+   * Emits the onChange event, updates the initialItems, and handles validation based on form control errors and label.
+   * Set the decimalLimiter based on selected magnifyValue
+   * @param {any} e - The event containing the new select input value.
+   */
+  public change(e?: any): void{
+    if (!this.isTouched) {
+      this.onTouched();
+      this.isTouched = true;
+    }
+    
+    if (!this.disabled) {
+      this.value = e?.value;
+      this.selectedItem = e?.data;
+
+      this.changed(this.value);
+      this.onChange.emit({ selectedItem: e, number: this.numberValue });
+      this.errorMsg = getFormErrorMessage(this.formControl?.errors, this.label);
+    }
+    
+    if (e?.magnifyValue === 1) this.decimalLimiter = 0;
+    else {
+      this.decimalLimiter = Math.floor(Math.log10(e?.data.magnifyValue));
+    }
+  }
+
+  /**
+   * Triggered on form number input.
+   * Set the numberValue with current value.
+   * Emit the selected currency and the number value to the parent component.
+   * @param {any} - Contain `value` the value of inputed number.
+   */
+  public numberInput({ value }: any): void{
+    this.numberValue = value;
+    this.onChange.emit({ selectedItem: this.selectedItem, number: value });
+  }
+
+  /**
+   * Triggered on form number keypress.
+   * Controlling input in a number field, restricting the number of decimal places allowed.
+   * @param {any} - Contain
+   * charCode - the character code of the key pressed.
+   * preventDefault - the function to prevent the default behaviour of the event.
+   * target.value - the current value of the input field.
+   */
+  public limitDecimal({ charCode, preventDefault, target: { value }}: any): void{
+    const reg = this.decimalLimiter > 0? new RegExp(`^\\d*(\\.\\d{0,${ this.decimalLimiter }})?$`) : /^\d+$/;
+    if (!reg.test(value + String.fromCharCode(charCode))) preventDefault();
+  }
+
+  protected setIsLoading(b: boolean): void{
+    this.isLoading = b;
+    this.ch.markForCheck();
+  }
+}