@unipin/angular-applet 18.9.2 → 18.9.4

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

@@ -0,0 +1,119 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { Observable, of } from 'rxjs';
+import { FormCurrencyInputComponent } from './form-currency-input.component';
+import { CurrencyService } from '../../../services';
+
+describe('FormCurrencyInputComponent', () => {
+  let component: FormCurrencyInputComponent;
+  let fixture: ComponentFixture<FormCurrencyInputComponent>;
+  let currencyServiceStub: Partial<CurrencyService>;
+
+  currencyServiceStub = {
+    query: (): Observable<any> => {
+      return of({
+        data: {
+          webConfigMsCurrency: {
+            data: [
+              { code: 'IDR', name: 'Indonesia Rupiah', magnifyValue: 0 },
+              { code: 'MYR', name: 'Malaysia Ringgit', magnifyValue: 100 }
+            ]
+          }
+        }
+      });
+    }
+  };
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [FormCurrencyInputComponent],
+      imports: [FormsModule, NgSelectModule],
+      providers: [{ provide: CurrencyService, useValue: currencyServiceStub }]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormCurrencyInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have correct initial values', () => {
+    expect(component.clearable).toBe(true);
+    expect(component.isInputNumber).toBe(false);
+  });
+
+  // it('ngOnInit should set bindLabel to value when isInputNumber is true', () => {
+  //   component.isInputNumber = true;
+  //   expect(component.bindLabel).toBe('value');
+  // });
+
+  // it('ngOnChanges should update items$ and decimalLimiter when initialItems change', () => {
+  //   const mockInitialItems = [{ label: 'Indonesia Rupiah', value: 'IDR', magnifyValue: 0 }];
+  //   component.initialItems = mockInitialItems;
+  //   component.ngOnChanges({ initialItems: {
+  //     currentValue: mockInitialItems,
+  //     previousValue: undefined,
+  //     firstChange: false,
+  //     isFirstChange: function (): boolean {
+  //       throw new Error('Function not implemented.');
+  //     }
+  //   } });
+  //   expect(component.items$).toBeDefined();
+  // });
+
+  it('writeValue should set the value correctly', () => {
+    const mockValue = { label: 'Indonesia Rupiah', value: 'IDR', magnifyValue: 0 };
+    component.writeValue(mockValue);
+    expect(component.value).toEqual(mockValue);
+  });
+
+  it('validate should return null', () => {
+    const mockFormControl: any = {};
+    const validation = component.validate(mockFormControl);
+    expect(validation).toBeNull();
+  });
+
+  // it('change should emit correct values and update internal state', () => {
+  //   const mockValue = { label: 'IDR', value: 'Indonesia Rupiah', magnifyValue: 0 };
+  //   spyOn(component.onChange, 'emit');
+  //   component.change(mockValue);
+  //   expect(component.onChange.emit).toHaveBeenCalledWith({ ccy: mockValue, number: null });
+  //   expect(component.initialItems).toEqual([mockValue]);
+  //   expect(component.isTouched).toBe(true);
+  // });
+
+  // it('numberInput should update numberValue and emit correct event', () => {
+  //   const mockValue = 100;
+  //   spyOn(component.onChange, 'emit');
+  //   component.numberInput({ value: mockValue });
+  //   expect(component.numberValue).toBe(mockValue);
+  //   expect(component.onChange.emit).toHaveBeenCalledWith({ ccy: component.initialItems, number: mockValue });
+  // });
+
+  it('limitDecimal should limit the number of decimal places allowed', () => {
+    const mockEvent: any = { charCode: 46, preventDefault: () => {}, target: { value: '10.00' }};
+    spyOn(mockEvent, 'preventDefault');
+    component.limitDecimal(mockEvent);
+    expect(mockEvent.preventDefault).toHaveBeenCalled();
+  });
+
+  // it('queryFunc should return correct data based on the provided keyword', () => {
+  //   component.items$.subscribe((data) => {
+  //     expect(data).toEqual([{ label: 'Indonesia Rupiah', value: 'IDR', magnifyValue: 0 }]);
+  //   });
+  // });
+
+  // it('typeahead should emit correct values and trigger queryFunc', () => {
+  //   const mockKeyword = 'IDR';
+  //   component.typeahead.next(mockKeyword);
+  //   component.items$.subscribe((data) => {
+  //     expect(data).toEqual([{ label: 'Indonesia Rupiah', value: 'IDR', magnifyValue: 0 }]);
+  //   });
+  // });
+});

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

@@ -0,0 +1,243 @@
+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 { FormCurrencyInputComponent } from './form-currency-input.component';
+
+const ctrl = new FormControl();
+ctrl.markAsTouched();
+
+const meta: Meta<FormCurrencyInputComponent> = {
+  title: 'Form/Currency Input',
+  tags: ['autodocs'],
+  component: FormCurrencyInputComponent,
+  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, FormCurrencyInputComponent ],
+    })
+  ],
+  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'
+      },
+    },
+    isInputNumber: {
+      defaultValue: false,
+      description: 'If true the input number form will shown.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        name: 'boolean',
+        required: false
+      }
+    },
+    isNumberDisabled: {
+      defaultValue: false,
+      description: 'If `true`, the user cannot interact with the input number.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'boolean'
+      },
+    },
+    numberValue: {
+      defaultValue: null,
+      description: 'To set the input number form value.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'number'
+      }
+    },
+    numberPlaceholder: {
+      defaultValue: undefined,
+      description: 'Instructional text that shows before the input number has a value.',
+      table: {
+        category: 'Input',
+        subcategory: 'Attribute'
+      },
+      type: {
+        required: false,
+        name: 'string'
+      },
+    },
+    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 }
+    },
+    limitDecimal: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    numberInput: {
+      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<FormCurrencyInputComponent>;
+
+export const Default: Story = {
+  render: (props) => ({
+    props,
+    template: `
+      <div style="width: 400px">
+        <up-currency-input ${ argsToTemplate(props) } />
+      </div>
+    `,
+  }),
+};
+
+export const Required: Story = {
+  args: {
+    ...Default.args,
+    required: true
+  },
+  render: (props) => ({
+    props,
+    template: `
+      <div style="width: 400px">
+        <up-currency-input ${ argsToTemplate(props) } />
+      </div>
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+  render: (props) => ({
+    props,
+    template: `
+      <div style="width: 400px">
+        <up-currency-input ${ argsToTemplate(props) } />
+      </div>
+    `,
+  }),
+};
+
+export const Error: Story = {
+  args: {
+    ...Required.args,
+    errorMsg: 'Field is required',
+  },
+  render: (props) => ({
+    props,
+    template: `
+      <div style="width: 400px">
+        <up-currency-input ${ argsToTemplate(props) } />
+      </div>
+    `,
+  }),
+};
+
+export const ShowInputNumber: Story = {
+  args: {
+    ...Required.args,
+    isInputNumber: true,
+    numberPlaceholder: 'Amount'
+  },
+  render: (props) => ({
+    props,
+    template: `
+      <div style="width: 400px">
+        <up-currency-input ${ argsToTemplate(props) } />
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,27 @@
+<label class="form-label d-flex align-items-center">
+    <ng-content select="[icon]" />
+    <span>{{ label }}</span>
+</label>
+
+<input readonly type="text" id="{{ name }}-date" placeholder="{{ placeholder }}" class="form-control cursor-pointer" [disabled]="disabled" [required]="required" [value]="value | date:dateFormat ">
+<ion-icon name="calendar" class="position-absolute fs-4 cursor-pointer" />
+
+<ion-modal trigger="{{ name }}-date">
+    <ng-template>
+        <ion-datetime 
+            mode="md" 
+            hourCycle="h23" 
+            value="{{ localValue }}"
+            [min]="minDate"
+            [max]="maxDate"
+            [showDefaultButtons]="true" 
+            [presentation]="presentation"
+            [showClearButton]="clearButton"
+            (ionChange)="changeDate($event)" 
+        />
+    </ng-template>
+</ion-modal>
+
+@if (errorMsg) {
+    <label class="is-invalid">{{ errorMsg }}</label>
+}

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

@@ -0,0 +1,7 @@
+ion-datetime { --background: white; }
+ion-modal { --width: 290px; --height: auto; }
+ion-icon {
+    top: 32px;
+    right: 16px;
+    color: #616161;
+}

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

@@ -0,0 +1,225 @@
+import { Attribute, ChangeDetectorRef, ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { AbstractControl, ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { getFormErrorMessage } from '../../../utils';
+
+@Component({
+  standalone: true,
+  selector: 'up-date',
+  styleUrl: './form-date.component.scss',
+  templateUrl: './form-date.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'd-block position-relative'
+  },
+  imports: [
+    DatePipe,
+    IonicModule
+  ],
+  providers: [
+    {
+      multi: true,
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: FormDateComponent
+    },
+    {
+      multi: true,
+      provide: NG_VALIDATORS,
+      useExisting: FormDateComponent
+    }
+  ]
+})
+export class FormDateComponent implements ControlValueAccessor, Validator, OnInit {
+
+  /**
+   * Input variable for the name associated with the date input.
+   * @type {string}
+   * @required
+   */
+  @Input({ required: true }) public name!: string;
+
+  /**
+   * Input variable for the label associated with the date input.
+   * @type {string | undefined}
+   */
+  @Input() public label?: string;
+
+  /**
+   * Input variable to determine whether the date input is required.
+   * @type {boolean}
+   * @default false
+   */
+  @Input() public required: boolean = false;
+
+  /**
+   * Input variable to determine whether the date input is disabled.
+   * @type {boolean}
+   * @default false
+   */
+  @Input() public disabled: boolean = false;
+
+  /**
+   * Input variable to determine whether the date picker is date only or date and time.
+   * @type {string}
+   * @default 'date'
+   */
+  @Input() public presentation: 'date' | 'date-time' | 'month-year' = 'date';
+
+  /**
+   * Input variable to determine what is the minimum date allowed.
+   * @type {string}
+   */
+  @Input() public minDate?: string;
+
+  /**
+   * Input variable to determine what is the maximum date allowed.
+   * @type {string}
+   */
+  @Input() public maxDate?: string;
+
+  /**
+   * Input variable to determine if the date picker should show a clear button
+   * @type {boolean}
+   */
+  @Input() public clearButton: boolean = false;
+
+  /**
+   * The format of date.
+   * @type {string}
+   * @default 'dd LLL yyyy'
+   */
+  @Input() public dateFormat: string = 'dd LLL yyyy';
+
+  /**
+   * Boolean flag indicating whether the date input has been touched.
+   * @type {boolean}
+   * @default false
+   */
+  public isTouched: boolean = false;
+
+  /**
+   * The value of the date input.
+   * @type {string}
+   * @default ''
+   */
+  public value: string = '';
+
+  /**
+   * The value of the localization date.
+   * @type {string}
+   * @default ''
+   */
+  public localValue: string= '';
+
+  /**
+   * Error message associated with the date input.
+   * @type {string}
+   * @default undefined
+   */
+  public errorMsg!: string;
+
+  /**
+   * The form control associated with the date input.
+   * @type {AbstractControl}
+   */
+  protected formControl!: AbstractControl;
+
+  /**
+   * Callback function to handle value changes in the date input.
+   * @type {(_val: any) => void}
+   */
+  protected onChange: (_val: any) => void = (_val: any) => {};
+
+  /**
+   * Callback function to handle touch events in the date input.
+   * @type {() => void}
+   */
+  protected onTouched: () => void = () => {};
+
+  constructor(
+    @Attribute('placeholder') public placeholder: string,
+    protected readonly ch: ChangeDetectorRef
+  ) {}
+
+  /**
+   * Lifecycle hook called a moment before the component is created.
+   * Check if the presentation is 'date-time' then the date format should be changed to dd LLL yyyy HH:mm.
+   */
+  public ngOnInit(): void{
+    if (this.presentation === 'date-time') this.dateFormat = `${ this.dateFormat } HH:mm`;
+  }
+
+  /**
+   * Registers a callback function to be called when the date input value changes.
+   * @param {(_val: any) => void} fn - Callback function for value changes.
+   */
+  public registerOnChange(fn: any): void{ this.onChange = fn; }
+
+  /**
+   * Registers a callback function to be called when the date 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 date input.
+   * Calculate and writes the local value for ionic datetime picker.
+   * @param {*} val - The new value to be set.
+   */
+  public writeValue(val: any): void{ 
+    this.value = val;
+    if (!val) {
+      this.ch.markForCheck();
+      return;
+    };
+
+    let localTime = new Date(val);
+
+    localTime = new Date(localTime.getTime() - (localTime.getTimezoneOffset() * 60000));
+    this.localValue = localTime.toISOString();
+
+    this.ch.markForCheck();
+  }
+
+  /**
+   * Sets the disabled state of the date input.
+   * @param {boolean} d - Whether the date input should be disabled or not.
+   */
+  public setDisabledState?(d: boolean): void{ 
+    this.disabled = d; 
+    this.ch.markForCheck();
+  }
+
+  /**
+   * Validates the date input.
+   * @param {AbstractControl} control - The abstract control representing the date input.
+   * @returns {(ValidationErrors | null)} - Validation errors if any, otherwise null.
+   */
+  public validate(control: AbstractControl): ValidationErrors | null{
+    this.formControl = control;
+    return null;
+  }
+
+  /**
+   * Event handler for date changes in the date input.
+   * If not touched, marks the input as touched.
+   * If not disabled, updates the value, triggers change detection, and emits the change event.
+   * Updates the error message based on form control errors and label.
+   * @param {any} param0 - Event detail containing the new date value.
+   */
+  public changeDate({ detail: { value }}: any): void{
+    if (!this.isTouched) {
+      this.onTouched();
+      this.isTouched = true;
+    }
+
+    if (!this.disabled) {
+      this.value = this.localValue = value;
+      this.ch.markForCheck();
+
+      this.onChange(this.value);
+      this.errorMsg = getFormErrorMessage(this.formControl.errors, this.label);
+    }
+  }
+}