@dasidev/dasi-ui 1.0.0

package/src/vueform/config/types.ts

@@ -0,0 +1,768 @@
+import type { DasiV2FormSchema } from "@/types/form.types";
+
+export interface PageConfigNextOptions {
+  nextFormSchema?: any;
+  nextFormOpen?: boolean;
+}
+
+export interface IIcon {
+  name: string;
+  class?: string;
+  strokeWidth?: number;
+  size?: number;
+  fill?: boolean;
+}
+
+export interface CustomBtnConfig {
+  type?: "separator" | "action";
+  show?: boolean;
+  id?: string;
+  label?: string;
+  class?: string;
+  displayAsOption?: boolean;
+  negative?: boolean;
+
+  // Icon config
+  icon?: string;
+  iconSize?: number;
+  iconFill?: boolean;
+  iconClass?: string;
+  iconStrokeWidth?: number;
+
+  // Action
+  onClick?: (i: number, row: any, btnId?: string) => void;
+}
+
+export interface ColumnAction {
+  id?: string; // Identifier when the item are clicked
+  label?: string;
+  icon?: string;
+  iconSize?: number;
+  action?: (i: number, row: any) => void;
+  negative?: boolean;
+  type?: "separator" | "item";
+}
+
+export interface ColumnRef {
+  /**
+   * row's field to be displayed,
+   * example:
+   * key: 'yellow'
+   * then it will render content of row.yellow
+   *
+   */
+  key: string;
+
+  visible?: boolean;
+  headerClass?: string;
+  header?: string;
+  size?: number;
+  bold?: boolean;
+  type?: "cell" | "action" | "notifIcon";
+  showInDetail?: boolean;
+
+  /**
+   * Text, dasi_v2_date, dasi_v2_organization so more
+   *
+   */
+  cellType?: string;
+
+  /**
+   * Key from the row to be displayed
+   * as description
+   *
+   * example:
+   * descriptonKey: code
+   * then it will render row.code ?? ''
+   *
+   */
+  descriptonKey?: string;
+
+  /**
+   * String description to be rendered after
+   * row title
+   *
+   */
+  description?: (i: number, row: any) => string;
+
+  /**
+   * Data source to be rendered
+   * default to row[key]
+   *
+   */
+  dataSource?: (i: number, row: any) => any;
+
+  /**
+   * New for displaying custom button
+   * the custom button next to action button
+   *
+   */
+  customBtnConfig?: CustomBtnConfig | ((i: number, row: any) => CustomBtnConfig);
+  onCustomBtnClick?: (i: number, row: any, btnId?: string) => void;
+
+  /**
+   * Display action tree dots or not
+   *
+   */
+  showAction?: boolean | ((i: number, row: any) => boolean);
+  cellRender?: (i: number, row: any) => void;
+  actions?: (i: number, row: any) => ColumnAction[] | ColumnAction[];
+
+  /**
+   * DIsplay loading on row
+   *
+   */
+  itemLoading?: boolean | string | ((i: number, row: any) => boolean | string);
+
+  /**
+   * Display custom actions
+   * such as direct delete or edit button
+   *
+   */
+  rowActions?: RowAction[];
+
+  /**
+   * Display order by on table header
+   *
+   */
+  sortKey?: string;
+
+  /**
+   * Used for rendering array value
+   *
+   */
+  items?: any[];
+
+  /**
+   * For displaying cellType: dasi_v2_selector_single
+   *
+   */
+  nameField?: string;
+  nameFieldFunc?: (row: any) => string;
+  descriptionField?: string;
+  descriptionFieldFunc?: (row: any) => string;
+
+  /**
+   * For selector multiple
+   *
+   * if in dasi_v2_organizations default to organization
+   *
+   */
+  objectKey?: string;
+
+  /**
+   * Header and cell align
+   *
+   */
+  textAlign?: "right" | "left";
+  headAlign?: "right" | "left" | "center";
+
+  mask?: any;
+  addons?: any;
+
+  /**
+   * Date Selector props
+   */
+  pickerType?: "date" | "datetime" | "month" | "year";
+  range?: boolean;
+  displayFormat?: string;
+  yearRange?: [number, number];
+  locale?: string;
+  autoApply?: boolean;
+  textInput?: boolean;
+  startDate?: Date;
+  minDate?: Date;
+  maxDate?: Date;
+  isStokReal?: boolean;
+
+  /**
+   * Selector props
+   */
+  multiple?: boolean;
+  showAvatar?: boolean;
+  returnObject?: boolean;
+  autoFillOrg?: boolean;
+  accessLevel?: string;
+  params?: Record<string, any>;
+  condition?: Record<string, any>;
+  orderBy?: string;
+  sort?: "asc" | "desc";
+}
+
+export interface RowAction {
+  label: string;
+  class?: string;
+  icon?: string;
+  iconStrokeWidth?: number;
+  iconClass?: string;
+  iconSize?: number;
+  iconFill?: boolean;
+  onClick: (i: number, row: any) => void;
+}
+
+export interface ActionItem {
+  label: string;
+  class?: string;
+  icon?: IIcon;
+  onClick: (i: number, row: any) => void;
+}
+
+export interface PageConfigInitReturn {
+  pageConfig: PageConfig;
+
+  /**
+   * Query param string
+   * extracted from endpooint
+   *
+   */
+  queryParams: string;
+}
+
+export type FilterForm = DasiV2FormSchema & {
+  [key: string]: FilterFormSchema;
+};
+
+export interface FilterFormSchema {
+  filterType: "eq" | "custom" | "condition" | "month|year" | "id" | "asCondition" | "bool";
+  mapFilterValue?: (val: string) => any;
+
+  /**
+   * Filter dislayed on pageActionMenu
+   * or on filter form dialog
+   *
+   */
+  showOnPageActionMenu?: boolean;
+
+  /**
+   * If this set to true
+   * the data will be saved to local / session storage
+   *
+   */
+  saveSate?: boolean;
+  stateKey?: string;
+
+  /**
+   * session: Session sotrage, only available on current tab
+   * local: Local storage, available on all tab
+   * default: session
+   *
+   */
+  stateStorage?: "session" | "local";
+}
+
+export interface SortBy {
+  key: string;
+  by: "asc" | "desc";
+}
+
+interface StringMap {
+  [key: string]: string;
+}
+
+interface TableGroupConfig {
+  by?: string;
+  labels?: StringMap;
+  setGroupLabel?: (row: any, allData?: any[]) => string;
+}
+
+export interface PageDetailHooks {
+  /**
+   * Run right after the detail dialog
+   * opened, before get detail data from api
+   *
+   */
+  onDetailOpen?: (schema: DasiV2FormSchema, row?: any) => Promise<boolean>;
+
+  /**
+   * Set endpoint to get detail
+   * data from api
+   *
+   * expected full get data detail api
+   * example: /jadwal-pengiriman/f061af0b-3f08-44dc-a710-8a8d6aef6729?extras=abc&condition=def
+   *
+   */
+  setEndpoint?: (schema: DasiV2FormSchema, row?: any) => Promise<string>;
+
+  /**
+   * Run after get data from api
+   * but the detail content not rendered yet,
+   * still displaying loading
+   *
+   */
+  onBeforeMount?: (schema: DasiV2FormSchema, detailData?: any) => Promise<boolean>;
+}
+
+/**
+ * Coming soon
+ *
+ */
+export interface PageHooks {}
+
+export interface ToggleConfig {
+  /**
+   * Show toggle on the page
+   */
+  show: boolean;
+
+  /**
+   * Toggle options for checked and unchecked states
+   */
+  options: {
+    checked: string;
+    unchecked: string;
+  };
+
+  /**
+   * URL suffixes to append when toggle state changes
+   * These will be appended to the current endpoint
+   */
+  urlSuffixes?: {
+    checked: string;
+    unchecked: string;
+  };
+
+  /**
+   * Custom hook that runs when toggle state changes
+   * Receives the new checked state and should return the new endpoint URL
+   */
+  onChange?: (checked: boolean, currentEndpoint?: string) => string;
+
+  /**
+   * Default toggle state
+   */
+  defaultChecked?: boolean;
+}
+
+export interface PageConfig {
+  /**
+   * Unique id,
+   * if not set will use endpoint as unique id
+   *
+   */
+  id?: string;
+
+  /**
+   * Get data endpoint
+   *
+   */
+  endpoint?: string;
+
+  /**
+   * Where url api to hit when form was saved from add and edit action
+   * add action will hit POST /save-path
+   * and edit will hit POST /save-path/:id/edit
+   *
+   */
+  savePath?: string;
+
+  /**
+   * Where form schema to be loaded
+   *
+   */
+  schema?: string;
+
+  /**
+   * If page use custom component,
+   * set path here, fallback to schema
+   *
+   */
+  customComponentPath?: string;
+
+  /**
+   * Where tab page deleted show or not
+   *
+   */
+  showDeleted?: boolean;
+
+  /**
+   * Hide approval status on table
+   *
+   */
+  hideApprovalStatus?: boolean;
+
+  /**
+   * Tmp
+   *
+   */
+  role?: string;
+
+  /**
+   * Transform data get from api before
+   * displaying it
+   *
+   */
+  dataTransformer?: (data: any[]) => any[];
+  dataDetailTransformer?: (data: any) => any;
+  pageHooks?: PageHooks;
+
+  /**
+   * Hook that run when user click
+   * view detail button
+   *
+   */
+  pageDetailHooks?: PageDetailHooks;
+
+  /**
+   * Table displayed columns
+   *
+   */
+  columns?: ColumnRef[] | DasiV2FormSchema;
+
+  /**
+   * Table displayed columns key for search
+   * TODO:
+   * Not imlemented yet
+   *
+   */
+  searchColumns?: any;
+
+  /**
+   * Vueform schema for filtering data
+   * You can specific filter by setting key of the object
+   * as allowed field to be filtered from API, and set vueform object
+   * for the filter form, with additional filterType:
+   * in, eq, gte, lte, month|year, like, ilike
+   *
+   * for more available filter please ready docs for each
+   * api endpoint
+   *
+   */
+  filter?: FilterForm;
+  width?: number | 360;
+
+  /**
+   * @deprecated Use toggleConfig instead
+   */
+  toggle?: boolean;
+  /**
+   * @deprecated Use toggleConfig instead
+   */
+  toggleOptions?: { checked: string; unchecked: string };
+
+  /**
+   * Toggle configuration for dynamic toggle functionality
+   * Similar to filter system but for binary toggle states
+   */
+  toggleConfig?: ToggleConfig;
+
+  /**
+   * @deprecated
+   */
+  periodeFilter?: boolean;
+  periodeFilterName?: string; // Using for filter name
+  periodeFilterField?: string; // Using for filter key field
+  periodeFilterDefault?: { month: any; year: any } | null;
+
+  /**
+   * Add conditional filtering data
+   * some endpoint may has conditional filtering data
+   * with string format 'key:value'
+   *
+   * for more conditional filtering please read docs for
+   * each api endpoint
+   *
+   */
+  conditions?: any[];
+
+  /**
+   * @deprecated
+   * see nextPath
+   *
+   */
+  nextFunc?: (i: number, row: any) => any;
+
+  /**
+   * @deprecated
+   * see nextPath
+   *
+   */
+  next?: string;
+
+  /**
+   * Next front-end path to hit when row button clicked
+   * can be string or function that return string
+   *
+   */
+  nextPath?: string[] | ((i: number, row: any) => string[]);
+
+  /**
+   * Field from data item that are required to display
+   * open next button in row table
+   * this field of a row item is not empty
+   * the row button will show go to next and will go to
+   * nextPath, else it will show button that open add form
+   *
+   * Example:
+   * nextDataField = 'loadingInfo'
+   * if row.loadingInfo is empty -> show row button to open form to add new data
+   * else if row.loadingInfo.dibutuhkanPersetujuan -> show ro button to open form edit data
+   * else -> display button that go to
+   *
+   * Notes:
+   * Used in pageActivityFlow
+   *
+   */
+  nextDataField?: string;
+
+  /**
+   * Sort key for the "Proses Selanjutnya" action column header
+   * When set, the action column header will be sortable just like other columns
+   * This allows sorting by the data that determines the next action state
+   *
+   * Example:
+   * nextDataSortkey = 'nextDataField.createdAt'
+   * The action column header will be sortable by the creation date of the next data
+   *
+   */
+  nextDataSortkey?: string;
+
+  /**
+   * Used on pageActivityFlow
+   * when displaying parent child instead of original data
+   *
+   */
+  parentField?: string;
+
+  /**
+   * Extras data or child included from base data
+   * when get all data
+   *
+   */
+  extras?: string[];
+
+  /**
+   * Display add button that open
+   * form on front-end
+   *
+   */
+  showAddBtn?: boolean;
+
+  /**
+   * @deprecated
+   * now add button label always show
+   *
+   */
+  showAddBtnLabel?: boolean;
+
+  /**
+   * @deprecated
+   * see rowActions
+   *
+   */
+  showCustomButtonFunc?: (i: number, row: any) => boolean;
+  customButtonLabelFunc?: (i: number, row: any) => any;
+  customButtonIconFunc?: (i: number, row: any) => any;
+  customButtonClassFunc?: (i: number, row: any) => any;
+
+  /**
+   * @deprecated
+   * now use moreRowActions
+   *
+   */
+  rowActions?: RowAction[];
+
+  /**
+   * Not implemented yet
+   */
+  morePageActions?: any[];
+
+  /**
+   * Display search bar or not
+   * if search is hidden,
+   * plase add page title, so the header not blank
+   *
+   */
+  showSearch?: boolean;
+  
+  /**
+   * To save space, page title only displayed 
+   * if showSearch set to false
+   *
+   */
+  pageTitle?: string;
+
+  /**
+   * Hide delete option from action dropdown
+   *
+   */
+  hideDeleteAction?: boolean;
+
+  /**
+   * Hide edit action from dropdown
+   *
+   */
+  hideEditAction?: boolean;
+
+  /**
+   * Display button on page, next to pagination
+   * and columns display config
+   *
+   */
+  pageActions?: ActionItem[];
+
+  /**
+   * Default data sort by
+   *
+   */
+  sortBy?: SortBy;
+
+  /**
+   * Set custom css class for add/edit dialog
+   * to set sizing, color etc
+   *
+   */
+  formDialogClass?: string;
+
+  /**
+   * If approval page is true
+   * This will make row button behave different than basic CRUD page, the conditions are:
+   * if row[nextvDataField] is empty (mean not approved yet) or
+   * row[prevDataField].submitUlang (mean already approved but required re-submission and have the re-submission data)
+   * then it will show row button "Mulai Persetujuan" that will show approval dialog
+   * else if row[nextDataField].disetujui is false it will not display row button
+   * else it will show next
+   *
+   * Approval page required this option to be available
+   * - nextDataField,
+   * - prevDataField
+   *
+   * and optional
+   * - nextPath
+   *
+   */
+  approvalPage?: boolean;
+  prevDataField?: string;
+
+  /**
+   * Show view document button when row item selected
+   *
+   */
+  showViewDocButton?: boolean;
+
+  /**
+   * Show action export button
+   *
+   */
+  showExportButton?: boolean;
+
+  /**
+   * View document endpoint to get the document data
+   * to display for DocViewer dialog
+   * Example:
+   * viewDocsEndpoint = 'no-loading'
+   * The DocViewer will hit /nor-loading/:id/documents
+   * and the api of that url should be returned document list array to be displayed
+   *
+   */
+  viewDocsEndpoint?: string;
+
+  /**
+   * Checkbox on each row
+   *
+   */
+  showCheckboxItem?: boolean;
+  checkDisabled?: (item: any, data: any[]) => boolean;
+  checkboxActionBtn?: CustomBtnConfig[];
+
+  /**
+   * Table displayed as group dropdown
+   * when set this to true, you also need to set
+   * tableGroupConfig
+   *
+   */
+  tableGrouped?: boolean;
+  tableGroupConfig?: TableGroupConfig;
+  tableGroupActionBtn?: (groupId: any, items: any[]) => CustomBtnConfig[];
+  groupApproval?: boolean;
+  groupStatus?: (groupId: any, items: any[]) => string;
+
+  /**
+   * Row action
+   *
+   */
+  showActionRow?: boolean;
+  showActionRowOptions?: boolean | ((i: number, row: any) => boolean);
+  actionRowConfig?: ColumnRef;
+
+  /**
+   * Add additional action on row when
+   * user click 3 dots action row
+   *
+   * will be displayed after edit button
+   *
+   */
+  moreRowActions?: ColumnAction[] | ((i: number, row: any) => ColumnAction[]);
+
+  /**
+   * Show view detail button or not
+   *
+   */
+  showViewDetail?: boolean | ((i: number, row: any) => boolean);
+
+  /**
+   * Display pagination or not
+   *
+   */
+  showPagination?: boolean;
+
+  /**
+   * API endpoint for view data detail,
+   * if not set will use endpoint? value fallback
+   * to endpoint get from router.path
+   *
+   */
+  viewDetailEndpoint?: string;
+
+  /**
+   * If this set to true,
+   * you must add view detail component
+   * at @/components/page-activity/${schemaPath}/Detail.vue
+   * and expose open function that will be called when user
+   * clicked view detail button
+   *
+   * open(item: any) => Promise<boolean> // return true will reload the data
+   *
+   */
+  useCustomViewDetail?: boolean;
+
+  /**
+   * Show action button on table row
+   * next to view detail button
+   *
+   * If actionRowConfig are set, this config
+   * will be overriden
+   *
+   */
+  showActionRowButton?: boolean | ((i: number, row: any) => boolean);
+  actionRowBtnConfig?: CustomBtnConfig | ((i: number, row: any) => CustomBtnConfig);
+
+  /**
+   * By default all action on row will be hidden of
+   * data status is approval_reuired, draft, or waiting_approval
+   * You can force to display the action button even and ignore data status
+   *
+   */
+  forceDisplayActionRow?: boolean;
+
+  /**
+   * If this set to true,
+   * you must add view ActionRow component
+   * at @/components/page-activity/${schemaPath}/ActionRow.vue
+   * and expose open function that will be called when user
+   * clicked view the action row button
+   *
+   * open(i: number, item: any) => Promise<boolean> // return true will reload the data
+   *
+   */
+  useActionRowBtnComponent?: boolean;
+
+  /**
+   * Function to generate display name for data items
+   * Used throughout the application to determine how to display item names
+   * in dialogs, headers, and other UI components
+   * 
+   * @param item - The data item/row
+   * @returns The display name for the item
+   */
+  dataName?: (item: any) => string;
+}