@fewangsit/wangsvue-fats 1.0.0-alpha.0

package/components/dialogconfirm/DialogConfirm.vue.d.ts

@@ -0,0 +1,165 @@
+import { Slot } from 'vue';
+
+import { WangsIcons } from '../icon/Icon.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+type ConfirmDialogSeverity = 'success' | 'danger' | 'primary';
+
+export interface DialogConfirmLocaleConfig {
+  actionableCloseButtonLabel?: string;
+  nonActionableCloseButtonLabel?: string;
+  /**
+   * @example Are you sure?
+   */
+  defaultConfirmMessage?: string;
+
+  /**
+   * @example Yakin
+   */
+  defaultConfirmLabel?: string;
+}
+
+/**
+ * Props for DialogConfirm component
+ */
+export interface DialogConfirmProps {
+  /**
+   * The header of the dialog.
+   */
+  header: string;
+  /**
+   * The severity of the dialog.
+   * The severity will determine the dialog icons and color scheme.
+   */
+  severity: ConfirmDialogSeverity;
+  /**
+   * The severity of the confirm button.
+   * The severity will determine the confirm button color scheme in case button severity is different from header/dialog severity.
+   *
+   * @default undefined - to fallback to props.severity
+   */
+  confirmButtonSeverity?: ConfirmDialogSeverity | 'primary';
+  /**
+   * The boolean modelValue to show dialog.
+   */
+  visible: boolean;
+
+  /**
+   * Determines if the dialog should close after confirm.
+   * @default true
+   */
+  closeAfterConfirm?: boolean;
+  /**
+   * The label of the close/cancel button.
+   */
+  closeLabel?: string;
+  /**
+   * To hide/show the confirm button.
+   *
+   * Set to 'false' Make the confirm dialog cannot be confirmed.
+   *
+   * @default true;
+   */
+  actionable?: boolean;
+  /**
+   * The label of the confirm button.
+   */
+  confirmLabel?: string;
+  /**
+   * Props to disable confirm button.
+   */
+  disableConfirmButton?: boolean;
+  /**
+   * Custom header icon. Default is 'error' icon for danger severity, and 'checkbox-circle' for success severity.
+   */
+  headerIcon?: WangsIcons;
+  /**
+   * The lists to be displayed in the dialog.
+   */
+  list?: (string | object)[] | Set<string | object>;
+  /**
+   * The label of the list if your list item is an object.
+   * Choose a property from the item to be displayed on the list.
+   */
+  listLabel?: string;
+  /**
+   * The confirmation message.
+   */
+  message?: string;
+  /**
+   * Whether show icon header or not.
+   * @default true;
+   */
+  showIcon?: boolean;
+  /**
+   * Whether show close button or not (footer button that has label, not close button with icon 'X').
+   * @default true;
+   */
+  showCloseButton?: boolean;
+
+  /**
+   * Set class for content element.
+   */
+  contentClass?: any;
+}
+
+/**
+ * Slots for DialogConfirm component
+ */
+export interface DialogConfirmSlots {
+  /**
+   * The body slot for the dialog. Here is where you can put your dialog body.
+   */
+  body?: Slot | string;
+  /**
+   * The footer slot for the dialog. Here is where you can put your dialog footer.
+   * Use this slot if you need to custom the dialog buttons.
+   */
+  footer?: Slot | string;
+}
+
+/**
+ * Emits for DialogConfirm component
+ */
+export type DialogConfirmEmits = {
+  /**
+   * Emits when close button clicked.
+   */
+  'close': [];
+  /**
+   * Emits when Confirm button clicked.
+   */
+  'confirm': [];
+  /**
+   * Emits when dialog closed.
+   */
+  'hide': [];
+  /**
+   * Emits when the dialog is closed. Wether from cancel button, close button, or ESC button pressed.
+   */
+  'update:visible': [state: boolean];
+};
+
+/**
+ * **WangsVue - DialogConfirm**
+ *
+ * _DialogConfirm is a component for creating confirmation dialogs._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group components
+ */
+declare class DialogConfirm extends ClassComponent<
+  DialogConfirmProps,
+  DialogConfirmSlots,
+  DialogConfirmEmits
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    DialogConfirm: GlobalComponentConstructor<DialogConfirm>;
+  }
+}
+
+export default DialogConfirm;

package/components/dialogform/DialogForm.vue.d.ts

@@ -0,0 +1,350 @@
+import { GenericObject } from 'vee-validate';
+import { Slot } from 'vue';
+
+import FormInstance, { FormPayload, FormProps } from '../form/Form.vue.d';
+import { WangsIcons } from '../icon/Icon.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export type DialogFormValue =
+  | string
+  | string[]
+  | number
+  | number[]
+  | boolean
+  | boolean[]
+  | Record<string, unknown>
+  | Record<string, unknown>[];
+
+/**
+ * Generic form payload, able to receive types from outside
+ */
+export type DialogFormPayload<
+  FormValuesType = Record<string, DialogFormValue>,
+> = {
+  stayAfterSubmit: boolean;
+  formValues: FormValuesType;
+};
+
+export interface DialogFormLocaleConfig {
+  /**
+   * @example 'Cancel'
+   */
+  cancelBtnLabel?: string;
+
+  /**
+   * @example 'Clear Field'
+   */
+  clearBtnLabel?: string;
+
+  /**
+   * @example 'Stay after submit'
+   */
+  stayCheckboxLabel?: string;
+
+  /**
+   * @example 'Submit'
+   */
+  submitBtnLabel?: string;
+
+  /**
+   * Set the label for button expand sidebar right when it is expanded.
+   *
+   * @example 'Tutup <'
+   */
+  asideRightExpandedButtonLabel?: string;
+
+  /**
+   * Set the label for button expand sidebar right when it is collapsed.
+   *
+   * @example 'Lihat data yang ada >'
+   */
+  asideRightCollapsedButtonLabel?: string;
+}
+
+/**
+ * Props for DialogForm component
+ */
+export interface DialogFormProps extends FormProps {
+  /**
+   * The template for form buttons.
+   */
+  buttonsTemplate: ('clear' | 'submit' | 'cancel')[];
+
+  /**
+   * The dialog header.
+   */
+  header: string;
+
+  /**
+   * Value binding to show/hide the dialog.
+   */
+  visible: boolean;
+
+  /**
+   * With in pixel
+   *
+   * @default 260
+   */
+  asideRightWidth?: number;
+  class?: string | string[] | object[];
+
+  /**
+   * Custom button cancel label.
+   *
+   * @default - The default value from locale configuration {@link DialogFormLocaleConfig.cancelBtnLabel}
+   *
+   */
+  cancelBtnLabel?: string;
+
+  /**
+   * Custom button clear label.
+   *
+   * @default - The default value from locale configuration {@link DialogFormLocaleConfig.clearBtnLabel}
+   */
+  clearBtnLabel?: string;
+
+  /**
+   * Wether show the Close icon or not.
+   */
+  closable?: boolean;
+
+  /**
+   * Close dialog after form validated and submitted.
+   *
+   * @default true
+   */
+  closeOnSubmit?: boolean;
+
+  /**
+   * @deprecated
+   */
+  contentClass?: string | string[] | object[];
+
+  /**
+   * Show Date time on header.
+   */
+  dateHeader?: string;
+
+  /**
+   * Set the header icon left beside of the title.
+   */
+  headerIcon?: WangsIcons;
+
+  /**
+   * Sets the invalid state.
+   *
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * Prevent form resets after submitted. Default is resetted.
+   *
+   * @default true
+   */
+  resetAfterSubmit?: boolean;
+
+  /**
+   * The severity of the dialog.
+   * The severity will determine the dialog icons and color scheme.
+   */
+  severity?: 'success' | 'danger' | 'primary';
+
+  /**
+   * Show or hide the checkbox 'Stay after submit.'
+   *
+   * @default true - if the action is submit.
+   * @default false - if the action is save.
+   */
+  showStayCheckbox?: boolean;
+
+  /**
+   * Custom label for stay checkbox.
+   *
+   * @default - The default value from locale configuration {@link DialogFormLocaleConfig.stayCheckboxLabel}
+   */
+  stayCheckboxLabel?: string;
+
+  /**
+   * Custom button submit label.
+   * @default - The default value from locale configuration {@link DialogFormLocaleConfig.submitBtnLabel}
+   */
+  submitBtnLabel?: string;
+
+  /**
+   * Define the invalid message to be shown on invalid state above the Form submit button.
+   *
+   * @default undefined
+   */
+  validatorMessage?: string;
+
+  /**
+   * Additional validation function.
+   * Within this this function, you need to set the invalid props value.
+   *
+   * If after executing this function the props invalid is true, the form will not be submitted.
+   * Otherwise, 'submit' event will be emitted.
+   *
+   * @param values - the Form values
+   */
+  validationFunction?: (values: GenericObject) => void | Promise<void>;
+
+  /**
+   * Set the dialog size.
+   *
+   * - small: 400px
+   * - medium: 500px
+   * - large: 572px
+   * - semi-xlarge: 600px
+   * - xlarge: 800px
+   *
+   * @default 'small';
+   */
+  width?: 'small' | 'medium' | 'large' | 'semi-xlarge' | 'xlarge';
+}
+
+export interface ConfirmSlots {
+  /**
+   * The Visible state.
+   */
+  visible: boolean;
+
+  /**
+   * Hide the confirm dialog.
+   */
+  hide: () => void;
+
+  /**
+   * The submit function to be called after confirmation.
+   */
+  submit: (submitFn: (value: FormPayload) => Promise<void> | void) => void;
+}
+
+export interface ActionSlots {
+  /**
+   * The submit function to be called after confirmation.
+   */
+  submit: (submitFn: () => Promise<void> | void) => void;
+}
+
+/**
+ * Slots for DialogForm component
+ */
+export interface DialogFormSlots {
+  /**
+   * Slot for action buttons.
+   */
+  'actionButtons': Slot<ActionSlots>;
+
+  /**
+   * Slot for aside right expansion.
+   */
+  'aside-right': Slot;
+
+  /**
+   * Slot for dialog confirm.
+   */
+  'confirm': Slot<ConfirmSlots>;
+
+  /**
+   * The fields slot for the Dialogform. Here is where you can put your Dialogform fields.
+   */
+  'fields': Slot<{ formValues: GenericObject; key?: number }>;
+
+  /**
+   * Slot for dialog header.
+   */
+  'header': Slot;
+}
+
+/**
+ * Emits for DialogForm component
+ */
+export type DialogFormEmits = {
+  /**
+   * Emits when 'Clear Field' button clicked.
+   */
+  'clear': [];
+
+  /**
+   * When dialog is closed by close button.
+   */
+  'close': [];
+
+  /**
+   * Callback to invoke when dialog is hidden.
+   */
+  'hide': [];
+
+  /**
+   * Callback to invoke when dialog is shown.
+   */
+  'show': [];
+
+  /**
+   * Emits when the form validation succes and props.invalid is 'false'.
+   */
+  'submit': [values: DialogFormPayload];
+
+  /**
+   * When dialog is closed.
+   */
+  'update:visible': [state: boolean];
+};
+
+/**
+ * **WangsVue - DialogForm**
+ *
+ * _DialogForm is combination of Form and Dialog. Handles validation on submit using vee-validate.
+ * You need to install vee-validate while using this component._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group components
+ */
+declare class DialogForm extends ClassComponent<
+  DialogFormProps,
+  DialogFormSlots,
+  DialogFormEmits
+> {
+  /**
+   * Exposed function to clears the form fields.
+   */
+  clearField: () => void;
+
+  /**
+   * The ref of form element.
+   */
+  form: FormInstance;
+
+  /**
+   * Set initial values for all fields.
+   */
+  setValues: (values: GenericObject) => void;
+
+  /**
+   * Set value for specific field.
+   */
+  setFieldValue: <T extends string>(
+    field: T,
+    value: GenericObject[T],
+    shouldValidate?: boolean,
+  ) => void;
+
+  /**
+   * Set errors fields
+   * @param fields - {
+   *   name: 'This name already exists'
+   * }
+   */
+  setErrors(fields: GenericObject): void;
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    DialogForm: GlobalComponentConstructor<DialogForm>;
+  }
+}
+
+export default DialogForm;

package/components/dialoglinkedasset/DialogLinkedAsset.vue.d.ts

@@ -0,0 +1,106 @@
+import { DefineComponent } from 'vue';
+import { AssetName } from '@tagsamurai/fats-api-services/src/types/oldAssetService.type';
+
+import { DialogConfirmProps } from '../../../../library/components/dialogconfirm/DialogConfirm.vue.d';
+import { WangsIcons } from '../../../../library/components/icon/Icon.vue.d';
+
+/**
+ * Type of the asset data, it refers to data response from Asset API, but since this component only using asset's name and _id then only those field are required for type.
+ */
+export type LinkedAsset = {
+  _id: string;
+  name: AssetName;
+};
+
+/**
+ * Type of linked asset, it contains parent and its child(s).
+ */
+export type LinkedAssetFamily = {
+  parent: LinkedAsset;
+  children: LinkedAsset[];
+};
+
+export type ChildAsset = {
+  parent: LinkedAsset;
+  children: LinkedAsset[]; // Empty children
+  family: LinkedAsset[];
+};
+
+export type ParentAsset = {
+  parent: undefined; // If the asset is parent, the parent will undefined
+  children: LinkedAsset[];
+  family: LinkedAsset[]; // Family is combination of parent, children and asset itself.
+  // If it only contains one asset in family, it means the asset has not linked yet.
+};
+
+export type FamilyData = (ParentAsset | ChildAsset) & {
+  _id: string;
+};
+
+/**
+ * Props for DialogSelectAsset component
+ */
+export interface DialogLinkedAssetProps extends DialogConfirmProps {
+  /**
+   * The header of the dialog.
+   */
+  header: string;
+  /**
+   * The list of selected asset to be transacted.
+   */
+  list?: LinkedAsset[];
+  /**
+   * The list of selected asset to be transacted.
+   *
+   * @deprecated - no longer supported, use `list` instead
+   */
+  lists?: LinkedAsset[];
+  /**
+   * The label of the dialog button.
+   */
+  label?: string;
+  /**
+   * The body text of the dialog.
+   */
+  confirmBody?: string;
+  /**
+   * Specify the custom header icon.
+   * If not, the default rules by it severity.
+   *
+   * @default 'success' > hidden;
+   * @default 'danger' > 'error';
+   */
+  headerIcon?: WangsIcons;
+  /**
+   * @default - 'confirmation'
+   */
+  type?: 'detail' | 'confirmation';
+}
+
+/**
+ * Emits for DialogSelectAsset component
+ */
+export type DialogLinkedAssetEmit = {
+  /**
+   * Emits when button confirm clicked.
+   */
+  'confirm': [families: LinkedAssetFamily[]];
+  /**
+   * Emits when the dialog is closed. Wether from cancel button, close button, or ESC button pressed.
+   */
+  'update:visible': [state: boolean];
+};
+
+/**
+ * Wangsvue - DialogLinkedAsset
+ *
+ * DialogLinkedAsset is a component for creating dialog confirmation of linked assets.
+ *
+ * @group components
+ */
+declare const DialogLinkedAsset: DefineComponent<
+  DialogLinkedAssetProps,
+  DialogLinkedAssetEmit
+>;
+
+export default DialogLinkedAsset;

package/components/dialogprintqr/DialogPrintQR.vue.d.ts

@@ -0,0 +1,18 @@
+import { ClassComponent } from '../../components/ts-helpers.d';
+
+export interface DialogPrintQRProps {
+  visible?: boolean;
+}
+
+export type DialogPrintQREmits = {
+  'printed': [];
+  'update:visible': [state: boolean];
+};
+
+declare class DialogPrintQR extends ClassComponent<
+  DialogPrintQRProps,
+  unknown,
+  DialogPrintQREmits
+> {}
+
+export default DialogPrintQR;

package/components/dialogreportdamage/DialogReportDamage.vue.d.ts

@@ -0,0 +1,34 @@
+import { ClassComponent } from '../../components/ts-helpers.d';
+
+export type ReportSourceType =
+  | 'Available Asset'
+  | 'Audit Asset'
+  | 'Borrowed Asset'
+  | 'Assigned Asset'
+  | 'Tracking Asset'
+  | 'Maintenance Asset';
+
+export interface DialogReportDamageProps {
+  id: string;
+  reportSource: ReportSourceType;
+  visible?: boolean;
+  byUser?: boolean;
+  successMessage?: string;
+  submitFunction?: (body: {
+    notes: string;
+    image: File;
+  }) => Promise<{ status?: number; message?: string } | undefined>;
+}
+
+export type DialogReportDamageEmits = {
+  'update:visible': [value: boolean];
+  'reported': [];
+};
+
+declare class DialogReportDamage extends ClassComponent<
+  DialogReportDamageProps,
+  unknown,
+  DialogReportDamageEmits
+> {}
+
+export default DialogReportDamage;

package/components/dialogreportmissing/DialogReportMissing.vue.d.ts

@@ -0,0 +1,33 @@
+import { ClassComponent } from '../../components/ts-helpers.d';
+
+export type ReportSourceType =
+  | 'Available Asset'
+  | 'Borrowed Asset'
+  | 'Assigned Asset'
+  | 'Transfer Asset';
+
+export interface DialogReportMissingProps {
+  id: string; // The Asset id to get asset detail
+  reportSource: ReportSourceType;
+  trackingId?: string; // The tracking Id to submit permanently missing report
+  visible?: boolean;
+  permanentlyMissing?: boolean;
+  successMessage?: string;
+  submitWithoutApi?: boolean;
+  submitFunction?: (body: {
+    notes: string;
+  }) => Promise<{ status?: number; message?: string } | undefined>;
+}
+
+export type DialogReportMissingEmits = {
+  'update:visible': [value: boolean];
+  'reported': [payload?: { notes: string }];
+};
+
+declare class DialogReportMissing extends ClassComponent<
+  DialogReportMissingProps,
+  unknown,
+  DialogReportMissingEmits
+> {}
+
+export default DialogReportMissing;