@unipin/angular-applet 18.9.5 → 18.9.7

package/projects/unipin-angular/src/lib/components/filter/filter.component.ts

@@ -1,329 +0,0 @@
-import { Attribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { formatDate } from '@angular/common';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { IonicModule, PopoverController } from '@ionic/angular';
-import { FilterConfig } from './interfaces/filter-config.interface';
-import { FilterField } from './interfaces/filter-field.interface';
-import { FilterSearchEvent } from './interfaces/filter-search-event.interface';
-import { FormInputComponent, FormSelectComponent, FormDateComponent, FormSearchableSelectComponent } from '../forms';
-
-@Component({
-  standalone: true,
-  selector: 'up-filter',
-  styleUrl:  './filter.component.scss',
-  templateUrl: './filter.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { 
-    class: 'd-block position-relative' 
-  },
-  imports: [  
-    IonicModule,
-    FormDateComponent,
-    FormInputComponent,
-    ReactiveFormsModule,
-    FormSelectComponent,
-    FormSearchableSelectComponent
-  ]
-})
-export class FilterComponent implements OnInit {
-
-  /**
-   * Input variable for the unique identifier of the filter.
-   * @type {string}
-   * @required
-   */
-  @Input({ required: true }) public id!: string;
-
-  /**
-   * Input variable for the configuration object specifying filter fields and mode.
-   * @type {FilterConfig}
-   * @required
-   */
-  @Input({ required: true }) public config!: FilterConfig;
-
-  /**
-   * Output event emitter triggered when the user performs a search.
-   * Emits a `FilterSearchEvent` object with search mode and criteria data.
-   * @type {EventEmitter<FilterSearchEvent>}
-   */
-  @Output() public readonly onSearch: EventEmitter<FilterSearchEvent> = new EventEmitter();
-
-  /**
-   * ViewChild decorator to reference the searchBox element in the template.
-   * @type {ElementRef}
-   */
-  @ViewChild('searchBox') protected readonly searchBox!: ElementRef;
-
-  /**
-   * Form group for managing form controls.
-   * @type {FormGroup<any>}
-   */
-  public readonly form: FormGroup<any> = new FormGroup({});
-
-  /**
-   * Array to store active filter criteria.
-   * @type {{ label: string, key: string, value: string }[]}
-   */
-  public activeFilter: { label: string, key: string, value: string }[] = [];
-
-  /**
-   * Map to store initial items for each filter key.
-   * @type {Map<string, { label: string, value: string }[]>}
-   */
-  public initialItems: Map<string, { label: string, value: string }[]> = new Map();
-
-  constructor(
-    @Attribute('placeholder') public placeholder: string,
-    protected readonly ch: ChangeDetectorRef,
-    protected readonly popoverCtrl: PopoverController
-  ) { } 
-
-  /**
-   * Lifecycle hook to initialize the component.
-   * Creates form controls based on the provided configuration and restores saved filter state.
-   */
-  public ngOnInit(): void{
-    const irresoluteKeys = new Set<string>();
-    const irresoluteValue = new Map<string, any>();
-
-    this.config.fields.forEach(({ key, initialValue, initialItems, isIrresolute }: FilterField) => {
-      if (typeof key !== 'string') {
-        key.forEach((k: string, i: number) => {
-          this.createFormControl(k, initialValue?.at(i), isIrresolute);
-
-          if (isIrresolute) {
-            irresoluteKeys.add(k);
-            if (initialValue) irresoluteValue.set(k, initialValue?.at(i));
-          }
-        });
-      } else {
-        if (initialItems) {
-          this.initialItems.set(key, initialItems);
-        }
-
-        this.createFormControl(key, initialValue, isIrresolute);
-        if (isIrresolute) {
-          irresoluteKeys.add(key);
-          if (initialValue) irresoluteValue.set(key, initialValue);
-        }
-      }
-    });
-
-    const savedState = localStorage.getItem(`${ this.id }`);
-    if (!savedState) {
-      this.emitValue();
-      return;
-    }
-
-    const state = JSON.parse(savedState);
-    if (state.initialItems) {
-      this.initialItems = new Map(Object.entries(state.initialItems));
-    }
-
-    const formValues = state.formValues || {};
-    const combValues: { [key: string]: any } = {};
-    Object.keys(formValues).forEach(key => {
-      if (!irresoluteKeys.has(key)) combValues[key] = formValues[key];
-      else {
-        combValues[key] = irresoluteValue.get(key);
-      }
-    });
-
-    this.form.patchValue(combValues);
-    
-    this.activeFilter = [];
-    const currentValues = this.form.getRawValue();
-    Object.keys(currentValues).forEach(key => {
-      if (currentValues[key]) this.processFilter(key, currentValues[key]);
-    });
-
-    this.emitValue();
-  }
-
-  /**
-   * Closes the filter popover.
-   */
-  public close(): void{ 
-    this.popoverCtrl.dismiss(); 
-  }
-
-  /**
-   * Clears all filter criteria, localStorage, and triggers a search event with null data.
-   */
-  public clear(): void{
-    this.resetValue();
-    this.form.reset();
-
-    localStorage.removeItem(`${ this.id }`);
-    this.initialItems.clear();
-    this.onSearch.emit({ mode: this.config.mode, data: null });
-  }
-
-  /**
-   * Removes a specific filter criteria based on its index.
-   * @param {number} i - Index of the filter criteria to be removed.
-   */
-  public removeFilter(i: number): void{
-    this.form.controls[this.activeFilter[i].key].setValue('');
-    this.activeFilter.splice(i, 1);
-   
-    if (this.activeFilter.length === 0) {
-      this.clear();
-      return;
-    }
-    this.emitValue();
-  }
-  /**
-   * Initiates a search based on the active filter criteria and clears the saved filter state if there are no active filters.
-   */
-  public search(): void{
-    this.resetValue();
-    this.emitValue((k: string, v: any) => {
-      this.processFilter(k, v);
-    });
-  
-    if (this.activeFilter.length === 0) {
-      this.initialItems.clear();
-      localStorage.removeItem(`${this.id}`);
-    }
-    this.close();
-  }
-
-  protected processFilter(key: string, value: any): void{
-    let values: string[];
-    if (Array.isArray(value)) {
-      values = value;
-    } else {
-      values = [value];
-    }
-  
-    values = values.filter(v => v !== undefined && v !== null && v !== '');
-  
-    if (values.length === 0) {
-      this.activeFilter = this.activeFilter.filter(item => item.key !== key);
-      return;
-    }
-  
-    const labels = values.map(v => {
-      const initialItem = this.initialItems.get(key)?.find(item => item.value === v);
-      return initialItem
-        ? initialItem.label
-        : key.toLowerCase().includes('date')? formatDate(v, 'dd MMM yyyy', 'en-US') : v;
-    });
-  
-    const label = `${ key }: ${ labels.join(', ') }`;
-    const valueString = values.join(',');
-
-    this.activeFilter = this.activeFilter.filter(item => item.key !== key);
-    this.activeFilter.push({ key, value: valueString, label });
-  }
-
-  /**
-   * Adds a new filter criteria based on the user input.
-   */
-  public add(): void{
-    const { key, value } = this.getValue(this.searchBox.nativeElement.value);
-    if (this.config.fields.findIndex(({ key: k }) => k === key) === -1) {
-      this.searchBox.nativeElement.value = '';
-      return;
-    }
-
-    const i = this.activeFilter.findIndex(({ key: k }) => k === key);
-    if (i === -1) this.activeFilter.unshift({ label: `${ key }:${ value }`, key, value });
-    else {
-      this.activeFilter[i].key = key;
-      this.activeFilter[i].value = value;
-      this.activeFilter[i].label = `${ key }:${ value }`;
-    }
-
-    this.form.patchValue({ [key]: value });
-    this.searchBox.nativeElement.value = '';
-    this.emitValue();
-  }
-
-  /**
-   * Receive the initialItems form searchable or select component and apply them to the initialItems map to be used again by searchable or select component
-   * when it initialized again.
-   * @param {any} item - The initial items received from the searcable or select component.
-   * @param {string} key - The key associated with the initial items.
-   */
-  public applyInitialItems(item: any, key: string): void{ 
-    if (!Array.isArray(item)) {
-      this.initialItems = this.initialItems.set(key, [ item ]);
-      return;
-    }
-
-    this.initialItems = this.initialItems.set(key, item);
-  }
-
-  /**
-   * Resets the active filter and clears the search box.
-   */
-  protected resetValue(): void{
-    this.activeFilter.length = 0;
-    this.searchBox.nativeElement.value = '';
-  }
-
-  /**
-   * Parses the input value and returns a key-value pair.
-   * @param {string} value - Input value to be parsed.
-   * @returns {{ key: string, value: string }} - Key-value pair extracted from the input value.
-   */
-  protected getValue(value: string): { key: string, value: string }{
-    const values: string[] = value.split(':');
-
-    if (values.length === 1) return { key: <string> (Array.isArray(this.config.fields[0].key)? this.config.fields[0].key[0] : this.config.fields[0].key), value: values[0] };
-    return { key: values[0], value: values[1] };
-  }
-
-  /**
-   * Emits the search event based on the form values.
-   * Invokes an extra action if provided and saves the state to localStorage.
-   * @param {(key: string, value: any) => void} [extraAction] - Optional extra action to be invoked.
-   */
-  protected emitValue(extraAction?: (key: string, value: any) => void): void{
-    let flag: boolean = false;
-    const f = this.form.getRawValue();
-    const data: { [k: string]: any } = {};
-    
-    Object.keys(f).forEach((k: any) => {
-      if (!f[k] || (Array.isArray(f[k]) && f[k].length === 0)) return;
-
-      flag = true;
-      data[k] = f[k];
-      extraAction?.(k, f[k]);
-    });
-    this.onSearch.emit({ mode: this.config.mode, data: flag? data : null });
-    
-    this.saveState();
-  }
-
-  /**
-   * Creates a form control for a given key and sets its initial value.
-   * @param {string} key - Key for the form control.
-   * @param {*} [val] - Initial value for the form control.
-   */
-  protected createFormControl(key: string, val?: any, isIrresolute?: boolean): void{
-    this.form.addControl(key, new FormControl(''));
-
-    if (val) {
-      this.form.controls[key].setValue(val);
-      this.processFilter(key, val);
-
-      if (!isIrresolute) {
-        this.saveState();
-      }
-    }
-  }
-
-  protected saveState(): void{
-    localStorage.setItem(
-      `${ this.id }`, 
-      JSON.stringify({
-        activeFilter: this.activeFilter,
-        initialItems: Object.fromEntries(this.initialItems),
-        formValues: this.form.getRawValue()
-      })
-    );
-  }
-}

package/projects/unipin-angular/src/lib/components/filter/filter.stories.ts

@@ -1,176 +0,0 @@
-import { importProvidersFrom } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { of } from 'rxjs';
-import { IonicModule } from '@ionic/angular';
-import { applicationConfig, argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-import { FormDateComponent, FormInputComponent, FormSelectComponent, FormSearchableSelectComponent } from '../forms';
-import { FilterComponent } from './filter.component';
-
-const meta: Meta<FilterComponent> = {
-  title: 'Filters/Filter',
-  tags: [ 'autodocs' ],
-  component: FilterComponent,
-  decorators: [
-    applicationConfig({
-      providers: [ 
-        importProvidersFrom([ IonicModule.forRoot() ])
-      ],
-    }),
-    moduleMetadata({
-      imports: [ 
-        IonicModule, 
-        CommonModule,
-        FilterComponent, 
-        FormDateComponent,
-        FormInputComponent,
-        FormSelectComponent,
-        FormSearchableSelectComponent 
-      ],
-    })
-  ],
-  argTypes: {
-    config: {
-      defaultValue: undefined,
-      description: 'Configuration object for the filter, specifying the fields and mode. The mode has two options: `simple` and `advanced`. The first index of fields will be applied as the default filter. Each field can have a type of `text`, `number`, `date-range`, `select`, `searchable-select`, or `checkbox`.',
-      control: {
-        type: 'object'
-      },
-      table: {
-        category: 'Input'
-      },
-      type: {
-        required: true,
-        name: 'string'
-      }
-    },
-    id: {
-      defaultValue: undefined,
-      description: 'Unique identifier for the component. Used as the `id` attribute in the HTML and will be used as the `id` for the associated `ion-popup`.',
-      table: {
-        category: 'Input'
-      },
-      type: {
-        required: true,
-        name: 'string'
-      },
-    },
-    placeholder: {
-      defaultValue: undefined,
-      description: 'Instructional text that shows before the filter has a value.',
-      table: {
-        category: 'Input',
-        subcategory: 'Attribute'
-      },
-      type: {
-        required: false,
-        name: 'string'
-      },
-    },
-    add: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    clear: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    close: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    form: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    ngOnInit: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    onSearch: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    removeFilter: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    activeFilter: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    search: {
-      control: { disable: true },
-      table: { disable: true }
-    }
-  }
-};
-
-export default meta;
-type Story = StoryObj<FilterComponent>;
-
-export const Simple: Story = {
-  render: (props) => ({
-    props,
-    template: `
-      <div style="width: 600px">
-        <up-filter ${ argsToTemplate(props) } />
-      </div>
-    `
-  }),
-  args: {
-    placeholder: 'Type To Search',
-    id: 'simple-list',
-    config: {
-      mode: 'simple',
-      fields: [{ key: 'description', label: 'Description', type: 'text' }]
-    }
-  }
-};
-
-export const Advanced: Story = {
-  name: 'Advanced Search',
-  render: (props) => ({
-    props,
-    template: `
-      <div style="width: 600px">
-        <up-filter ${ argsToTemplate(props) } />
-      </div>
-    `
-  }),
-  args: {
-    ...Simple.args,
-    id: 'advanced-list',
-    onSearch: (value) => console.log(value),
-    config: {
-      mode: 'advanced',
-      fields: [
-        { key: 'description', label: 'Description', type: 'text' },
-        { key: 'name', label: 'Name', type: 'text' },
-        { 
-          key: 'status', 
-          type: 'select', 
-          multiple: true,
-          label: 'Status',
-          options: [
-            { label: 'Active', value: 'active' }, 
-            { label: 'Inactive', value: 'inactive' }
-          ] 
-        },
-        { 
-          type: 'select',
-          key: 'country', 
-          label: 'Country', 
-          options: [
-            { label: 'Indonesia', value: 'ID' },
-            { label: 'Malaysia', value: 'MY' },
-            { label: 'Thailand', value: 'TH' },
-            { label: 'Philipine', value: 'PH' },
-          ]
-        },
-        { key: 'country', label: 'Country', type: 'searchable-select', getOptions: (keyword: string) => of([ {label: keyword, value: keyword }]) },
-        { key: 'level', label: 'Level', type: 'number' },
-        { key: ['startDate', 'endDate'], label: ['Start Date', 'End Date'], type: 'date-range' }
-      ]
-    }
-  },
-};

package/projects/unipin-angular/src/lib/components/filter/interfaces/filter-config.interface.ts

@@ -1,17 +0,0 @@
-import { FilterField } from './filter-field.interface';
-
-export interface FilterConfig {
-
-  /**
-   * Mode of the filter, either 'simple' or 'advanced'.
-   * @type {('simple' | 'advanced')}
-   */
-  mode: 'simple' | 'advanced';
-
-  /**
-   * Array of filter field configurations.
-   * Each element of the array is a `FilterField` object defining the key and initial value of a filter field.
-   * @type {FilterField[]}
-   */
-  fields: FilterField[];
-}

package/projects/unipin-angular/src/lib/components/filter/interfaces/filter-field.interface.ts

@@ -1,80 +0,0 @@
-import { Observable } from 'rxjs';
-
-export interface FilterField {
-
-  /**
-   * Function to retrieve options asynchronously based on a keyword.
-   * It returns an Observable of an array of { label, value } objects.
-   * @type {(keyword: string) => Observable<{ label: string, value: string }[]>}
-   */
-  getOptions?: (keyword: string) => Observable<{ label: string, value: string }[]>;
-
-  /**
-   * Initial value for the filter field. It can be a single string or an array of strings.
-   * @type {(string | string[])}
-   */
-  initialValue?: string | string[];
-
-  /**
-   * Initial value for the filter field. Used as intial items for select form filter.
-   * @type {{ label: string, value: string }[]}
-   */
-  initialItems?: { label: string, value: string }[];
-
-  /**
-   * Key or array of keys representing the field in the data model.
-   * @type {(string | string[])}
-   */
-  key: string | string[];
-
-  /**
-   * Label or array of labels for displaying the field in the UI.
-   * @type {(string | string[])}
-   */
-  label: string | string[];
-
-  /**
-   * Options for select-like fields (select, searchable-select, checkbox).
-   * An array of { label, value } objects.
-   * @type {{ label: string, value: string }[]}
-   */
-  options?: { label: string, value: string }[];
-
-  /**
-   * Type of the filter field. It can be 'text', 'number', 'date-range', 'select', 'searchable-select', 'checkbox', or 'number-range'.
-   * @type {('text' | 'number' | 'date-range' | 'select' | 'searchable-select' | 'checkbox' | 'number-range')}
-   */
-  type: 'text' | 'number' | 'date-range' | 'select' | 'searchable-select' | 'checkbox' | 'number-range';
-
-  /**
-   * To determine whether the select typed field can has multiple values or not.
-   * @type boolean
-   */
-  multiple?: boolean;
-
-  /**
-   * Determines whether the filter field should skip saving its value to localStorage.
-   * If set to true, the field will always use the defined initialValue instead of any saved value.
-   * @type {boolean}
-   */
-  isIrresolute?: boolean;
-
-  /**
-   * Minimum value for number fields (number, number-range). 
-   * @type {string}
-   */
-  min?: string;
-
-  /**
-   * Maximum value for number fields (number, number-range). 
-   * @type {string}
-   */
-  max?: string;
-
-  /**
-   * Property to group options for select-like fields (select, searchable-select, checkbox).
-   * It allows to group options by a specified field.
-   * @type {string}
-   */
-  groupBy?: string;
-}

package/projects/unipin-angular/src/lib/components/filter/interfaces/filter-search-event.interface.ts

@@ -1,15 +0,0 @@
-export interface FilterSearchEvent { 
-
-  /**
-   * Data representing the search criteria. It can be of any type.
-   * @type {any}
-   */
-  data: any;
-
-  /**
-   * Mode of the filter at the time of the search event.
-   * It can be 'simple' or 'advanced'.
-   * @type {('simple' | 'advanced')}
-   */
-  mode: 'simple' | 'advanced'; 
-}

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

@@ -1,19 +0,0 @@
-<label class="form-label" [class.required]="required">Country</label>
-<ng-select 
-    class="flex-shrink-0"
-    appendTo="body"
-    bindValue="value"
-    placeholder="{{ placeholder }}"
-    [virtualScroll]="true"
-    [items]="items"
-    [ngModel]="value"
-    [multiple]="multiple"
-    [readonly]="disabled" 
-    [loading]="isLoading"
-    [clearable]="clearable"
-    (change)="change($event);"
-/>
-@if (errorMsg) {
-    <label class="is-invalid">{{ errorMsg }}</label>
-}
-