tsv2-library 1.0.61-alpha.13 → 1.0.61-alpha.131

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tsv2-library",
   "author": "fixedassetv2-fe",
-  "version": "1.0.61-alpha.13",
+  "version": "1.0.61-alpha.131",
   "license": "ISC",
   "homepage": "https://github.com/fixedassetv2-fe/tsv2-library#readme",
   "repository": {
@@ -38,6 +38,9 @@
     "cy:test-all": "npm run tailwind && start-server-and-test dev  cy:run-e2e && npm run cy:run-ct"
   },
   "dependencies": {
+    "@googlemaps/js-api-loader": "^2.0.2",
+    "@googlemaps/markerclusterer": "^2.6.2",
+    "@types/google.maps": "^3.58.1",
     "@types/lodash": "^4.17.7",
     "@vueuse/core": "^10.7.2",
     "axios": "^1.3.4",
@@ -55,6 +58,7 @@
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.1.6",
     "vuex": "^4.0.2",
+    "write-excel-file": "^2.3.5",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
@@ -92,6 +96,7 @@
     "prettier": "^3.2.5",
     "rimraf": "^5.0.5",
     "rollup-plugin-typescript2": "0.34.1",
+    "rollup-plugin-visualizer": "^6.0.3",
     "sass": "^1.78.0",
     "start-server-and-test": "^2.0.3",
     "tailwindcss": "3.4.1",

package/src/components/v2/ButtonScan/ButtonScan.vue.d.ts

@@ -23,6 +23,12 @@ export type Device = {
   name: string;
 };
 
+export type BaseRegisteredDevice = {
+  _id: string;
+  serialNumber: string;
+  name: string;
+};
+
 export type RegisteredDevice = {
   _id: string;
   imageSmall: string;

package/src/components/v2/ButtonSelectTree/ButtonSelectTree.vue.d.ts

@@ -150,6 +150,10 @@ export interface ButtonSelectTreeProps {
    * @default false
    */
   fetchTreeOnButtonRender?: boolean;
+  /**
+   * Disable level 2 (All > Level 1 > Level 2)
+   */
+  disableSubChildren?: boolean;
 }
 
 export type ButtonSelectTreeEmits = {
@@ -171,7 +175,9 @@ export type ButtonSelectTreeEmits = {
  *
  * @group Component
  */
-declare class ButtonSelectTree extends ClassComponent<ButtonSelectTreeProps> {}
+declare class ButtonSelectTree extends ClassComponent<ButtonSelectTreeProps> {
+  dialogTreeKey: Ref<number>;
+}
 
 declare module '@vue/runtime-core' {
   interface GlobalComponents {

package/src/components/v2/CustomColumn/CustomColumn.vue.d.ts

@@ -1,7 +1,17 @@
 import { ClassComponent } from '../ts-helpers';
 
+export interface DataTableColumnConfig {
+  field: string;
+  pinned: boolean;
+  width: number | string;
+  visible: boolean;
+}
+
 export interface CustomColumnProps {
   tableId: string;
+  tableKey: string;
+  tableName: string;
+  tableData: Data[] | undefined;
   defaultColumns: TableColumn[];
   visibleColumns: TableColumn[];
   /**

package/src/components/v2/DataTable/DataTable.vue.d.ts

@@ -149,8 +149,14 @@ export type TableColumn = {
   reorderable?: boolean;
   /**
    * Make the column cannot reordered by disabled dragability.
+   * Unlike `reorderable`, the column will still appear in the column visibility
+   * overlay if this is set to false.
    */
   dragable?: boolean;
+  /**
+   * Whether the column is pinned to the left of the table.
+   */
+  pinned?: boolean;
   fixed?: boolean;
   visible?: boolean;
   /**
@@ -463,6 +469,15 @@ export interface TSDataTableProps {
    * Total disabled rows in table (used for synchronizing with bulk action button)
    */
   totalDisabledRows?: number;
+  /**
+   * A function that takes the row data as a parameter and returns a string to apply a particular class for the row.
+   * The return value is added to the row's :classes array (see Vue.js class bindings).
+   */
+  rowClass?: (data: any) => string | object | undefined;
+  /**
+   * An array of arrays to display in the exported excel file before the main data.
+   */
+  preContentData?: (string | number)[][];
 }
 
 export type TSDataTableEmits = {

package/src/components/v2/DialogAssetNameDetail/DialogAssetNameDetail.vue.d.ts

@@ -12,10 +12,12 @@ export interface DialogAssetNameDetailProps {
   header?: string;
 
   /**
-   * The ID of the asset.
+   * The ID of the asset name.
    */
   id: string;
 
+  currentTagType?: 'RFID' | 'QR' | 'RFID & QR' | 'Non TAG';
+
   /**
    * The query params for fetching assets.
    */

package/src/components/v2/DialogCoordinate/DialogCoordinate.vue.d.ts

@@ -0,0 +1,99 @@
+export type MapEngine = 'leaflet' | 'maplibre' | 'openlayers' | 'google';
+
+export interface RasterSource {
+  type: 'raster';
+  urlTemplate: string;
+  attribution?: string;
+  maxZoom?: number;
+}
+
+export interface MapLibreStyleSource {
+  type: 'maplibre-style';
+  styleUrl: string;
+}
+
+export interface OpenLayersOsmSource {
+  type: 'openlayers-osm';
+}
+
+export interface GoogleMapsSource {
+  type: 'google';
+  mapId?: string;
+}
+
+export type BaseMapSource =
+  | RasterSource
+  | MapLibreStyleSource
+  | OpenLayersOsmSource
+  | GoogleMapsSource;
+
+export interface BaseMapMarker {
+  id?: string | number;
+  lat: number;
+  lng: number;
+  popup?: string;
+}
+
+export interface LatLngValue {
+  lat: number | null;
+  lng: number | null;
+}
+
+export interface CoordinateValue extends LatLngValue {
+  address?: string;
+}
+
+export type InputMapMode = 'click' | 'drag' | 'center';
+
+export type MarkerConfig =
+  | {
+      kind: 'pin';
+      pinOptions?: google.maps.marker.PinElementOptions;
+      title?: string;
+    }
+  | {
+      kind: 'img';
+      src: string;
+      title?: string;
+    }
+  | {
+      kind: 'svgString';
+      svg: string;
+      title?: string;
+    }
+  | {
+      kind: 'customElement';
+      createElement: () => HTMLElement;
+      title?: string;
+    };
+
+export interface MapControl {
+  position?: google.maps.ControlPosition;
+  index?: number;
+  createElement: (ctx: { map: google.maps.Map }) => HTMLElement;
+}
+
+export interface MapFocusConfig {
+  name: string;
+  featureType: google.maps.FeatureType;
+  featureStyleOptions: google.maps.FeatureStyleOptions;
+}
+
+export interface DialogCoordinateProps {
+  value?: LatLngValue & { _id?: string };
+  center?: [number, number];
+  zoom?: number;
+  mode?: InputMapMode;
+  colorScheme?: 'LIGHT' | 'DARK';
+  mapOptions?: google.maps.MapOptions;
+  customMarkers?: CustomMarker[];
+  inputMarkerConfig?: MarkerConfig;
+  type: 'input' | 'detail';
+}
+
+export interface CustomMarker {
+  lat: number;
+  lng: number;
+  title?: string;
+  desc?: string;
+}

package/src/components/v2/DialogForm/DialogForm.vue.d.ts

@@ -122,6 +122,12 @@ export interface DialogFormProps extends FormProps {
    * The severity will determine the dialog icons and color scheme.
    */
   severity?: 'success' | 'danger' | 'primary';
+  maskClass?: string | string[];
+  /**
+   * Whether to automatically manage layering.
+   * @defaultValue true
+   */
+  autoZIndex?: boolean | undefined;
 }
 
 export interface ConfirmSlots {

package/src/components/v2/DialogSelectAsset/DialogSelectAsset.vue.d.ts

@@ -115,15 +115,9 @@ export interface Asset {
   auditStatus?: string | null;
   rfid?: boolean;
   qr?: boolean;
-  assetImageSmall?: null | 'string';
-  assetImageMedium?: null | 'string';
-  assetImageBig?: null | 'string';
-  imageSmall?: null | 'string';
-  imageMedium?: null | 'string';
-  imageBig?: null | 'string';
-  firstImageSmall?: string;
-  firstImageMedium?: string;
-  firstImageBig?: string;
+  assetImage?: 'string';
+  image?: 'string';
+  firstImage?: string;
 }
 
 export type QueryParams = {
@@ -171,6 +165,16 @@ export interface DialogSelectAssetProps {
    * The list of asset name key to be excluded in fetch list
    */
   excludedKey?: string[];
+  /**
+   *
+   * The list of asset name _id to be excluded in fetch list
+   */
+  excludeId?: string[];
+  /**
+   *
+   * The list of group _id of asset names to be excluded in fetch list
+   */
+  excludeInitialGroup?: string[];
   /**
    * The header of the dialog.
    *

package/src/components/v2/DialogSelectTree/DialogSelectTree.vue.d.ts

@@ -62,6 +62,10 @@ export interface SelectTreeDialogProps {
    * Render hidden dialog to trigger fetch tree
    */
   hidden?: boolean;
+  /**
+   * Disable level 2 (All > Level 1 > Level 2)
+   */
+  disableSubChildren?: boolean;
 }
 
 type TreeSelectPayload = {
@@ -76,6 +80,10 @@ export type SelectTreeDialogEmits = {
   'hide': [];
 };
 
+export interface SelectTreeDialogSlots {
+  description: VNode[];
+}
+
 /**
  * **TSVue v2 - SelectTreeDialog**
  *
@@ -86,7 +94,7 @@ export type SelectTreeDialogEmits = {
  */
 declare class SelectTreeDialog extends ClassComponent<
   SelectTreeDialogProps,
-  Record<string, unknown>,
+  SelectTreeDialogSlots,
   SelectTreeDialogEmits
 > {}
 

package/src/components/v2/FileUpload/FileUpload.vue.d.ts

@@ -106,6 +106,10 @@ export type FileUploadProps = {
    * Wether show validator message on invalid file input
    */
   showValidatorMessage?: boolean;
+  /**
+   * Wether show validator message on invalid file input
+   */
+  validatorMessage?: boolean;
 };
 
 export type FileUploadEmits = {

package/src/components/v2/Form/Form.vue.d.ts

@@ -105,6 +105,8 @@ export type FormEmits = {
  * @group components
  */
 declare class Form extends ClassComponent<FormProps, FormSlots, FormEmits> {
+  values: GenericObject;
+  errors: ComputedRef<Partial<Record<string, string | undefined>>>;
   /**
    * Wether to keep the dialog remains visible or not after submit.
    */

package/src/components/v2/Icon/Icon.vue.d.ts

@@ -20,10 +20,12 @@ export type TSVueIcons =
   | 'arrow-left-right'
   | 'arrow-right'
   | 'arrow-right-fill'
+  | 'asset'
   | 'asset-view'
   | 'asset-name-view'
   | 'assignment'
   | 'audit'
+  | 'award-fill'
   | 'bell'
   | 'bell-alert'
   | 'borrow'
@@ -68,6 +70,8 @@ export type TSVueIcons =
   | 'file-shield-2-line'
   | 'filter-fill'
   | 'filter-line'
+  | 'fullscreen-line'
+  | 'fullscreen-exit-line'
   | 'folder-line'
   | 'gate'
   | 'group'
@@ -77,8 +81,11 @@ export type TSVueIcons =
   | 'image-add'
   | 'indeterminate-circle-fill'
   | 'info'
+  | 'layout-grid-line'
   | 'link-unlink-m'
   | 'list-settings-line'
+  | 'list-check'
+  | 'list-check-2'
   | 'loader-4'
   | 'logout-box-r-line'
   | 'mail-open-line'
@@ -86,6 +93,7 @@ export type TSVueIcons =
   | 'map-2-line'
   | 'map-pin-line'
   | 'menu-line'
+  | 'menu-fold'
   | 'menu-unfold'
   | 'more'
   | 'move-to'
@@ -97,6 +105,8 @@ export type TSVueIcons =
   | 'phone-line'
   | 'printer'
   | 'price-tag-3-line'
+  | 'pushpin-2-line'
+  | 'pushpin-fill'
   | 'qr'
   | 'qr-scan-line'
   | 'recycle-bin'
@@ -125,6 +135,7 @@ export type TSVueIcons =
   | 'user'
   | 'user-add-line'
   | 'user-follow-line'
+  | 'user-unfollow-line'
   | 'user-search'
   | 'user-settings'
   | 'verification';

package/src/components/v2/InputCoordinate/InputCoordinate.vue.d.ts

@@ -0,0 +1,64 @@
+import { DefineComponent } from 'vue';
+import { Nullable } from '../ts-helpers';
+import { CoordinateValue } from '../DialogCoordinate/DialogCoordinate.vue.d';
+
+/**
+ * InputCoordinate component props
+ */
+export interface InputCoordinateProps {
+  modelValue?: Nullable<CoordinateValue>;
+  /**
+   * Disabled state for both input fields.
+   */
+  disabled?: boolean;
+  /**
+   * Wether the input should be validated with vee-validator or not.
+   * If you use this component within form input, you need to set this props as true.
+   */
+  useValidator?: boolean;
+  /**
+   * This prop is required if you use this component in a form input.
+   * Specify the unique field name, match with your needs for API request.
+   *
+   * @default 'coordinate'
+   */
+  fieldName?: string;
+  label?: string;
+  /**
+   * Wether this input field is required or not.
+   */
+  mandatory?: boolean;
+  /**
+   * Invalid input state.
+   */
+  invalid?: boolean;
+  /**
+   * Set custom validator message.
+   * It is rarely use, this component has handled the validator message.
+   */
+  validatorMessage?: string;
+}
+
+/**
+ * InputCoordinate component emits
+ */
+export type InputCoordinateEmits = {
+  'update:modelValue': [payload?: Nullable<CoordinateValue>];
+};
+
+/**
+ * **TSVue - InputCoordinate**
+ *
+ * _Handle coordinate input with latitude and longitude fields._
+ *
+ * --- ---
+ * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
+ *
+ * @group form
+ */
+declare const InputCoordinate: DefineComponent<
+  InputCoordinateProps,
+  InputCoordinateEmits
+>;
+
+export default InputCoordinate;

package/src/components/v2/InputCurrency/InputCurrency.vue.d.ts

@@ -90,6 +90,11 @@ export interface InputCurrencyProps {
    */
   fieldInfo?: string;
   inputnNumberId?: string;
+  /**
+   * Wether the currency dropdown should be selectable or not.
+   * @defaultValue false
+   */
+  selectable?: boolean;
 }
 
 /**

package/src/components/v2/InputCurrencyReference/InputCurrencyReference.vue.d.ts

@@ -0,0 +1,30 @@
+import { DefineComponent } from 'vue';
+import {
+  InputCurrencyEmits,
+  InputCurrencyProps,
+} from '../InputCurrency/InputCurrency.vue.d';
+
+export interface CurrencyValue {
+  currency: string; // Currency ISO Code
+  value?: number;
+}
+
+/**
+ * InputCurrencyReference component props
+ */
+export interface InputCurrencyReferenceProps extends InputCurrencyProps {
+  inputWrapperClass?: string;
+  inputClass?: string;
+}
+
+/**
+ * InputCurrencyReference component emits
+ */
+export type InputCurrencyReferenceEmits = InputCurrencyEmits;
+
+declare const InputCurrencyReference: DefineComponent<
+  InputCurrencyReferenceProps,
+  InputCurrencyReferenceEmits
+>;
+
+export default InputCurrencyReference;

package/src/components/v2/InputText/InputText.vue.d.ts

@@ -106,6 +106,12 @@ export interface InputTextProps {
    * @default true
    */
   allowSpecialCharacters?: boolean;
+  /**
+   * Wether the input should be trimmed or not.
+   *
+   * @default true
+   */
+  trimInput?: boolean;
 }
 
 /**

package/src/components/v2/TransactionRoles/TransactionRoles.vue.d.ts

@@ -8,6 +8,7 @@ export type TransactionRoles = Addon & {
 export type Addon = {
   repairTicketing: boolean;
   maintenance: boolean;
+  map: boolean;
   tracking: boolean;
   audit: boolean;
   assetControl: boolean;

package/src/components/v2/Tree/Tree.vue.d.ts

@@ -95,6 +95,10 @@ export interface TreeProps {
    * Disable node 'All' selection
    */
   disableNodeAll?: boolean;
+  /**
+   * Disable level 2 (All > Level 1 > Level 2)
+   */
+  disableSubChildren?: boolean;
   /**
    * Include node All key (-1) on Checkbox Selection
    *

package/src/presets/multiselect/index.js

@@ -137,6 +137,7 @@ export default {
       // Position
       'absolute top-0 left-0',
       'mt-2',
+      '!z-[2222]',
 
       'max-w-[30vw]',
 

package/src/presets/paginator/index.js

@@ -304,7 +304,7 @@ export default {
       class: [
         // Position
         'absolute top-0 left-0',
-        'mt-1',
+        'mt-1 !z-[1111]',
 
         // Shape
         'border-0',

package/src/services/assets.service.ts

@@ -2,25 +2,30 @@ import axios, { AxiosInstance, AxiosResponse } from 'axios';
 import {
   GetAllAssetsQueryParams,
   GetAssetDetailParams,
+  GetAssetMapParams,
+  GetAssetMapResponse,
   GetAvailableAssetsQueryParams,
   GetLinkedAssetFamiliesResponse,
 } from '@/dto/assets.dto';
 import { AssetOptionField } from '@/components/v2/DialogSelectAsset/DialogSelectAsset.vue.d';
+import { buildBodyParams } from '@/utils';
 
 export interface ServiceOptions {
   headers?: Record<string, unknown>;
   params?: Record<string, unknown>;
+  usePrefix?: boolean;
 }
 
 export const API = ({
   headers = {},
   params = {},
+  usePrefix = true,
 }: ServiceOptions = {}): AxiosInstance => {
   const user = JSON.parse(localStorage.getItem('user') ?? '{}');
   const BASE_URL = import.meta.env.VITE_APP_TAGSAMURAI_API;
 
   const instance = axios.create({
-    baseURL: `${BASE_URL}/assets/v2/assets`,
+    baseURL: `${BASE_URL}/assets/v2${usePrefix ? '/assets' : ''}`,
     headers: {
       'Content-type': 'application/json',
       'Authorization': `Bearer ${user.token}`,
@@ -32,6 +37,20 @@ export const API = ({
   return instance;
 };
 
+const postAssetList = (
+  params?: GetAllAssetsQueryParams,
+): Promise<AxiosResponse> => {
+  const body = buildBodyParams(params);
+  return API().post('/list', body);
+};
+
+const postAssetOption = (
+  params?: GetAllAssetsQueryParams,
+): Promise<AxiosResponse> => {
+  const body = buildBodyParams(params);
+  return API().post('/list/options', body);
+};
+
 const getAllAssets = (
   params: GetAllAssetsQueryParams,
 ): Promise<AxiosResponse> => {
@@ -44,6 +63,13 @@ const getAvailableAssets = (
   return API({ params }).get('/available');
 };
 
+const postAssetAvailableList = (
+  params?: GetAllAssetsQueryParams | GetAvailableAssetsQueryParams,
+): Promise<AxiosResponse> => {
+  const body = buildBodyParams(params);
+  return API().post('/available/list', body);
+};
+
 const scanAsset = (tag: string): Promise<AxiosResponse> => {
   return API({ params: { tag } }).get('');
 };
@@ -96,9 +122,30 @@ const matchAssetWithTag = (
   return API({ params }).get('/by-id');
 };
 
+const getAssetMaps = (
+  params?: GetAssetMapParams,
+): Promise<AxiosResponse<GetAssetMapResponse>> => {
+  let abortController: AbortController | null = null;
+
+  // Cancel previous request
+  if (abortController) {
+    (abortController as AbortController).abort();
+  }
+
+  abortController = new AbortController();
+
+  return API({
+    usePrefix: false,
+    params: params as Record<string, unknown>,
+  }).get('/asset-maps', { signal: abortController.signal });
+};
+
 export default {
   getAllAssets,
+  postAssetList,
+  postAssetOption,
   getAvailableAssets,
+  postAssetAvailableList,
   getAssetsById,
   getAssetDetail,
   matchAssetWithTag,
@@ -106,4 +153,5 @@ export default {
   getUnlinkedAssets,
   getOptions,
   scanAsset,
+  getAssetMaps,
 };