@ramathibodi/nuxt-commons 4.0.1 → 4.0.3

package/dist/runtime/composables/apiLookupList.js

@@ -0,0 +1,245 @@
+import { computed, ref, shallowRef, watch } from "vue";
+import { watchDebounced } from "@vueuse/core";
+import { union, isEmpty, isArray, sortBy, castArray } from "lodash-es";
+import { useFuzzy } from "./utils/fuzzy.js";
+import { useApi } from "./api.js";
+import { buildApiEndpoint } from "./apiModel.js";
+export function useApiLookupList(props, emit, selectedItems) {
+  const modelItems = shallowRef([]);
+  const items = shallowRef([]);
+  const selectedItemsObject = shallowRef([]);
+  const searchData = ref("");
+  const isLoading = ref(false);
+  const isErrorLoading = ref(false);
+  const statusField = computed(() => props.statusField ?? "statusCode");
+  const activeValue = computed(() => props.activeValue ?? "active");
+  const hideInactiveInList = computed(() => props.hideInactiveInList ?? false);
+  const queryFields = computed(() => {
+    let fieldsArray = [props.itemTitle, props.itemValue];
+    if (props.fields) fieldsArray = union(fieldsArray, props.fields);
+    if (hideInactiveInList.value && statusField.value) {
+      fieldsArray = union(fieldsArray, [statusField.value]);
+    }
+    return fieldsArray;
+  });
+  const computedFilterKeys = computed(() => {
+    if (props.filterKeys) return props.filterKeys;
+    return ["title", "raw." + props.itemValue];
+  });
+  const computedPlaceholder = computed(() => {
+    if (!props.serverSearch) return props.placeholder;
+    return isLoading.value ? props.serverSearchLoadingText : props.serverSearchText;
+  });
+  const computedNoDataText = computed(() => {
+    if (!props.serverSearch) return props.noDataText;
+    if (isLoading.value) return props.serverSearchLoadingText;
+    if (!searchData.value) return props.serverSearchText;
+    return props.noDataText;
+  });
+  let requestId = 0;
+  async function loadItems() {
+    if (!props.modelName) {
+      modelItems.value = [];
+      items.value = [];
+      return;
+    }
+    const id = ++requestId;
+    isLoading.value = true;
+    const variables = { ...props.modelBy || {} };
+    if (props.serverSearch && props.serverSearchKey) {
+      variables[props.serverSearchKey] = searchData.value;
+    }
+    try {
+      const result = await useApi().postPromise(
+        buildApiEndpoint(props.modelName),
+        { fields: queryFields.value, variables },
+        void 0,
+        void 0,
+        props.cache
+      );
+      if (id !== requestId) return;
+      if (isArray(result)) {
+        modelItems.value = result;
+        items.value = result;
+        isErrorLoading.value = false;
+      } else {
+        isErrorLoading.value = true;
+        modelItems.value = [];
+        items.value = [];
+      }
+    } catch {
+      if (id !== requestId) return;
+      isErrorLoading.value = true;
+      modelItems.value = [];
+      items.value = [];
+    } finally {
+      if (id === requestId) isLoading.value = false;
+    }
+  }
+  function applyFuzzy() {
+    if (!props.fuzzy) return;
+    if (isEmpty(searchData.value)) {
+      items.value = modelItems.value;
+      return;
+    }
+    const results = useFuzzy(searchData.value, modelItems.value, queryFields.value);
+    const output = [];
+    if (results.value?.length) {
+      for (let index = 0; index < results.value.length; index++) {
+        const result = results.value[index];
+        if (result?.item) output.push(result.item);
+      }
+    }
+    items.value = output;
+  }
+  const itemMap = computed(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const it of modelItems.value) {
+      m.set(it?.[props.itemValue], it);
+    }
+    return m;
+  });
+  async function syncSelectedFromModelValue() {
+    const modelValueData = selectedItems.value;
+    const values = castArray(modelValueData).filter(
+      (value) => value !== void 0 && value !== null && value !== ""
+    );
+    if (!values.length) {
+      emit("update:selectedObject", props.multiple ? [] : void 0);
+      selectedItemsObject.value = [];
+      return;
+    }
+    const alreadyInObject = selectedItemsObject.value?.filter((it) => values.includes(it?.[props.itemValue])) || [];
+    const haveSet = new Set(alreadyInObject.map((it) => it?.[props.itemValue]));
+    const missingValues = values.filter((v) => !haveSet.has(v));
+    const stillMissing = [];
+    for (const v of missingValues) {
+      const localHit = itemMap.value.get(v);
+      if (localHit) {
+        alreadyInObject.push(localHit);
+        haveSet.add(v);
+      } else {
+        stillMissing.push(v);
+      }
+    }
+    if (stillMissing.length && props.modelSelectedItem) {
+      try {
+        const key = props.modelSelectedItemKey || "id";
+        const variables = { ...props.modelSelectedItemBy || {} };
+        variables[key] = stillMissing;
+        const result = await useApi().postPromise(
+          buildApiEndpoint(props.modelSelectedItem),
+          { fields: queryFields.value, variables },
+          void 0,
+          void 0,
+          props.cache
+        );
+        const resolved = castArray(result);
+        for (const obj of resolved) {
+          const v = obj?.[props.itemValue];
+          if (!haveSet.has(v)) {
+            alreadyInObject.push(obj);
+            haveSet.add(v);
+          }
+        }
+      } catch {
+      }
+    }
+    selectedItemsObject.value = alreadyInObject;
+    emit("update:selectedObject", props.multiple ? alreadyInObject : alreadyInObject[0]);
+  }
+  watchDebounced(
+    () => [
+      props.modelName,
+      props.serverSearch,
+      props.serverSearchKey,
+      props.cache,
+      props.modelBy,
+      queryFields.value
+    ],
+    () => loadItems(),
+    { immediate: true, deep: true, debounce: 30, maxWait: 200 }
+  );
+  watchDebounced(
+    searchData,
+    () => {
+      if (props.serverSearch) loadItems();
+      else applyFuzzy();
+    },
+    { debounce: props.serverSearch ? props.serverSearchDebounce ?? 500 : 300, maxWait: 1500 }
+  );
+  watch(
+    () => modelItems.value,
+    () => {
+      if (!props.serverSearch) applyFuzzy();
+    }
+  );
+  watch(
+    () => selectedItems.value,
+    () => {
+      syncSelectedFromModelValue();
+    },
+    { immediate: true }
+  );
+  const computedItems = computed(() => {
+    const sortByField = !props.sortBy || typeof props.sortBy === "string" ? [props.sortBy || (props.showCode ? props.itemValue : props.itemTitle)] : props.sortBy;
+    const baseSource = (props.fuzzy || props.serverSearch && !props.searchSearchSort) && !isEmpty(searchData.value) ? items.value : sortBy(items.value, sortByField);
+    let baseItems = [...baseSource];
+    if (hideInactiveInList.value) {
+      baseItems = baseItems.filter((it) => it?.[statusField.value] === activeValue.value);
+    }
+    for (const selectedItem of selectedItemsObject.value || []) {
+      const v = selectedItem?.[props.itemValue];
+      if (!baseItems.find((x) => x?.[props.itemValue] === v)) {
+        baseItems.push(selectedItem);
+      }
+    }
+    return baseItems;
+  });
+  function isSelectableValue(value) {
+    if (!hideInactiveInList.value) return true;
+    const local = itemMap.value.get(value);
+    const obj = local ?? selectedItemsObject.value.find((it) => it?.[props.itemValue] === value) ?? modelItems.value.find((it) => it?.[props.itemValue] === value);
+    if (!obj) return true;
+    return obj?.[statusField.value] === activeValue.value;
+  }
+  function setModelValueGuarded(val) {
+    if (!(props.preventSelectingInactive ?? false)) {
+      selectedItems.value = val;
+      return;
+    }
+    if (!props.multiple) {
+      if (val != null && !isSelectableValue(val)) return;
+      selectedItems.value = val;
+      return;
+    }
+    const arr = Array.isArray(val) ? val : [];
+    selectedItems.value = arr.filter((v) => isSelectableValue(v));
+  }
+  const onUpdateModelValue = (val) => setModelValueGuarded(val);
+  return {
+    // state
+    modelItems,
+    items,
+    searchData,
+    isLoading,
+    isErrorLoading,
+    // derived
+    queryFields,
+    computedFilterKeys,
+    computedPlaceholder,
+    computedNoDataText,
+    computedItems,
+    // selection
+    selectedItemsObject,
+    syncSelectedFromModelValue,
+    // selection policy helper
+    isSelectableValue,
+    // guarded setter for v-model updates
+    setModelValueGuarded,
+    onUpdateModelValue,
+    // actions
+    loadItems,
+    applyFuzzy
+  };
+}

package/dist/runtime/composables/apiModel.d.ts

@@ -0,0 +1,40 @@
+import type { FormDialogCallback } from '../types/formDialog.js';
+import { type GraphqlModelConfigProps } from './graphqlModelOperation.js';
+interface ApiHeaderProps {
+    headers?: any[];
+}
+interface ApiInitialDataProps {
+    initialData?: Record<string, any>;
+}
+export interface ApiModelProps {
+    api?: boolean;
+}
+export type ApiModelComposableProps = GraphqlModelConfigProps & Partial<ApiHeaderProps> & Partial<ApiInitialDataProps>;
+/**
+ * Build a REST API endpoint URL for a model.
+ * @param modelName - The model name (e.g., 'Patient')
+ * @param action - Optional action (e.g., 'create', 'pageable')
+ * @returns The endpoint path (e.g., '/model/patient/create')
+ */
+export declare function buildApiEndpoint(modelName: string, action?: string): string;
+export declare function useApiModel<T extends ApiModelComposableProps>(props: T): {
+    items: import("vue").Ref<Record<string, any>[], Record<string, any>[]>;
+    itemsLength: import("vue").Ref<number, number>;
+    search: import("vue").Ref<string | undefined, string | undefined>;
+    setSearch: (keyword: string) => void;
+    currentOptions: import("vue").Ref<any, any>;
+    fields: import("vue").ComputedRef<(string | object)[]>;
+    canServerPageable: import("vue").ComputedRef<boolean>;
+    canServerSearch: import("vue").ComputedRef<boolean>;
+    canCreate: import("vue").ComputedRef<boolean>;
+    canUpdate: import("vue").ComputedRef<boolean>;
+    canDelete: import("vue").ComputedRef<boolean>;
+    createItem: (item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>;
+    importItems: (importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void;
+    updateItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
+    deleteItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<unknown>;
+    loadItems: (options: any) => void;
+    reload: () => void;
+    isLoading: import("vue").Ref<boolean, boolean>;
+};
+export {};

package/dist/runtime/composables/apiModel.js

@@ -0,0 +1,191 @@
+import { computed, onMounted, ref } from "vue";
+import { watchDebounced } from "@vueuse/core";
+import { useAlert } from "./alert.js";
+import { useApi } from "./api.js";
+import { arrayWrap } from "../utils/array.js";
+import pLimit from "p-limit";
+export function buildApiEndpoint(modelName, action) {
+  const lowercasedName = modelName.charAt(0).toLowerCase() + modelName.slice(1);
+  const base = `/model/${lowercasedName}`;
+  return action ? `${base}/${action}` : base;
+}
+export function useApiModel(props) {
+  const alert = useAlert();
+  const api = useApi();
+  const items = ref([]);
+  const itemsLength = ref(0);
+  const search = ref();
+  const currentOptions = ref();
+  const isLoading = ref(false);
+  function setSearch(keyword) {
+    search.value = keyword;
+  }
+  const canServerPageable = computed(() => true);
+  const canServerSearch = computed(() => true);
+  const canCreate = computed(() => true);
+  const canUpdate = computed(() => true);
+  const canDelete = computed(() => true);
+  function keyToField(key) {
+    const parts = key.split(".");
+    if (parts.length <= 1) return key;
+    let lastValue = parts.pop();
+    let result = {};
+    for (let i = parts.length - 1; i >= 0; i--) {
+      if (i == parts.length - 1) result = { [parts[i]]: [lastValue] };
+      else result = { [parts[i]]: result };
+    }
+    return result;
+  }
+  const fields = computed(() => {
+    const tmpFields = [];
+    const fieldsProps = props.fields || [];
+    if (props.headers && props.headers.length > 0) {
+      props.headers.forEach((header) => {
+        if (!fieldsProps.includes(header.key)) tmpFields.push(keyToField(header.key));
+      });
+    }
+    return [.../* @__PURE__ */ new Set([...fieldsProps, ...tmpFields])];
+  });
+  function getModelName() {
+    return props.modelName.split("By")[0].trim();
+  }
+  function createItem(item, callback, importing = false) {
+    isLoading.value = true;
+    const endpoint = buildApiEndpoint(getModelName(), "create");
+    return api.postPromise(endpoint, { input: item, fields: fields.value }).then((result) => {
+      if (canServerPageable.value) {
+        if (!importing) loadItems(currentOptions.value);
+      } else {
+        items.value.push(result);
+      }
+      if (callback && callback.setData) callback.setData(result);
+      return result;
+    }).catch((error) => {
+      alert?.addAlert({ alertType: "error", message: error?.message || String(error) });
+    }).finally(() => {
+      if (!importing) isLoading.value = false;
+      if (callback) callback.done();
+    });
+  }
+  function importItems(importItemsList, callback) {
+    isLoading.value = true;
+    const limit = pLimit(50);
+    const importPromises = importItemsList.map(
+      (item) => limit(
+        () => (item[props.modelKey || "id"] ? updateItem(item, void 0).then((result) => {
+          if (!result) {
+            return createItem(Object.assign({}, props.initialData, item), void 0, true);
+          }
+        }) : createItem(Object.assign({}, props.initialData, item), void 0, true)).catch((error) => {
+          alert?.addAlert({ alertType: "error", message: error?.message || String(error) });
+        })
+      )
+    );
+    Promise.all(importPromises).finally(() => {
+      isLoading.value = false;
+      reload();
+      if (callback) callback.done();
+    });
+  }
+  function updateItem(item, callback) {
+    isLoading.value = true;
+    const endpoint = buildApiEndpoint(getModelName(), "update");
+    return api.postPromise(endpoint, { input: item, fields: fields.value }).then((result) => {
+      if (canServerPageable.value) {
+        loadItems(currentOptions.value);
+      } else {
+        const index = items.value.findIndex((i) => i[props.modelKey || "id"] === result[props.modelKey || "id"]);
+        if (index !== -1) {
+          items.value[index] = result;
+        }
+      }
+      if (callback && callback.setData) callback.setData(result);
+      return result;
+    }).catch((error) => {
+      alert?.addAlert({ alertType: "error", message: error?.message || String(error) });
+    }).finally(() => {
+      isLoading.value = false;
+      if (callback) callback.done();
+    });
+  }
+  function deleteItem(item, callback) {
+    isLoading.value = true;
+    const endpoint = buildApiEndpoint(getModelName(), "delete");
+    return api.postPromise(endpoint, { input: item, fields: fields.value }).catch((error) => {
+      alert?.addAlert({ alertType: "error", message: error?.message || String(error) });
+    }).finally(() => {
+      isLoading.value = false;
+      reload();
+      if (callback) callback.done();
+    });
+  }
+  function loadItems(options) {
+    currentOptions.value = options;
+    const endpoint = buildApiEndpoint(getModelName(), "pageable");
+    isLoading.value = true;
+    api.postPromise(
+      endpoint,
+      Object.assign({}, props.modelBy, {
+        variables: props.modelBy,
+        fields: fields.value,
+        page: options?.page,
+        perPage: options?.itemsPerPage,
+        sortBy: options?.sortBy
+      })
+    ).then((result) => {
+      items.value = result.data;
+      itemsLength.value = result.meta.totalItems;
+    }).catch((error) => {
+      items.value = [];
+      itemsLength.value = 0;
+      alert?.addAlert({ alertType: "error", message: error?.message || String(error) });
+    }).finally(() => {
+      isLoading.value = false;
+    });
+  }
+  function reload() {
+    if (currentOptions.value) {
+      loadItems(currentOptions.value);
+    } else {
+      isLoading.value = true;
+      const endpoint = buildApiEndpoint(getModelName());
+      api.postPromise(
+        endpoint,
+        { variables: props.modelBy, fields: fields.value }
+      ).then((result) => {
+        items.value = arrayWrap(result);
+      }).catch((error) => {
+        items.value = [];
+        alert?.addAlert({ alertType: "error", message: error?.message || String(error) });
+      }).finally(() => {
+        isLoading.value = false;
+      });
+    }
+  }
+  watchDebounced([() => props.modelName, () => props.modelBy, () => props.modelKey], () => {
+    reload();
+  }, { deep: true, debounce: 500, maxWait: 500 });
+  onMounted(() => {
+    reload();
+  });
+  return {
+    items,
+    itemsLength,
+    search,
+    setSearch,
+    currentOptions,
+    fields,
+    canServerPageable,
+    canServerSearch,
+    canCreate,
+    canUpdate,
+    canDelete,
+    createItem,
+    importItems,
+    updateItem,
+    deleteItem,
+    loadItems,
+    reload,
+    isLoading
+  };
+}

package/dist/runtime/composables/apiModelItem.d.ts

@@ -0,0 +1,16 @@
+import type { FormDialogCallback } from '../types/formDialog.js';
+import type { GraphqlModelConfigProps } from './graphqlModelOperation.js';
+export type ApiModelItemProps = Omit<GraphqlModelConfigProps, 'operationSearch' | 'operationReadPageable'>;
+export declare function useApiModelItem<T extends ApiModelItemProps>(props: T): {
+    modelBy: import("vue").Ref<object | undefined, object | undefined>;
+    item: import("vue").Ref<Record<string, any> | undefined, Record<string, any> | undefined>;
+    isLoading: import("vue").Ref<boolean, boolean>;
+    fields: import("vue").ComputedRef<(string | object)[]>;
+    canCreate: import("vue").ComputedRef<boolean>;
+    canUpdate: import("vue").ComputedRef<boolean>;
+    canDelete: import("vue").ComputedRef<boolean>;
+    createItem: (createItem: Record<string, any>, callback?: FormDialogCallback) => Promise<void>;
+    updateItem: (updateItem: Record<string, any>, callback?: FormDialogCallback) => Promise<void>;
+    deleteItem: (deleteItem: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
+    reload: () => Promise<void>;
+};

package/dist/runtime/composables/apiModelItem.js

@@ -0,0 +1,101 @@
+import { computed, ref, watch } from "vue";
+import { useAlert } from "./alert.js";
+import { useApi } from "./api.js";
+import { buildApiEndpoint } from "./apiModel.js";
+export function useApiModelItem(props) {
+  const alert = useAlert();
+  const api = useApi();
+  const modelBy = ref();
+  const item = ref();
+  const isLoading = ref(false);
+  const fields = computed(() => {
+    return props.fields || [];
+  });
+  const canCreate = computed(() => true);
+  const canUpdate = computed(() => true);
+  const canDelete = computed(() => true);
+  const computedModelBy = computed(() => {
+    return Object.assign({}, props.modelBy, modelBy.value);
+  });
+  function reload() {
+    isLoading.value = true;
+    item.value = void 0;
+    const endpoint = buildApiEndpoint(props.modelName);
+    return api.postPromise(endpoint, {
+      variables: computedModelBy.value,
+      fields: fields.value
+    }).then((result) => {
+      if (Array.isArray(result)) {
+        alert?.addAlert({ alertType: "error", message: "Return result is not single item" });
+      } else {
+        item.value = result;
+      }
+    }).catch((error) => {
+      alert?.addAlert({ alertType: "error", message: error?.message ?? error });
+    }).finally(() => {
+      isLoading.value = false;
+    });
+  }
+  function createItem(createItem2, callback) {
+    isLoading.value = true;
+    const endpoint = buildApiEndpoint(props.modelName, "create");
+    return api.postPromise(endpoint, {
+      input: createItem2,
+      fields: fields.value
+    }).then((result) => {
+      item.value = result;
+    }).catch((error) => {
+      alert?.addAlert({ alertType: "error", message: error?.message ?? error });
+      reload();
+    }).finally(() => {
+      isLoading.value = false;
+      if (callback) callback.done();
+    });
+  }
+  function updateItem(updateItem2, callback) {
+    isLoading.value = true;
+    const endpoint = buildApiEndpoint(props.modelName, "update");
+    return api.postPromise(endpoint, {
+      input: updateItem2,
+      fields: fields.value
+    }).then((result) => {
+      item.value = result;
+    }).catch((error) => {
+      alert?.addAlert({ alertType: "error", message: error?.message ?? error });
+      reload();
+    }).finally(() => {
+      isLoading.value = false;
+      if (callback) callback.done();
+    });
+  }
+  function deleteItem(deleteItem2, callback) {
+    isLoading.value = true;
+    const endpoint = buildApiEndpoint(props.modelName, "delete");
+    return api.postPromise(endpoint, {
+      input: deleteItem2,
+      fields: fields.value
+    }).catch((error) => {
+      alert?.addAlert({ alertType: "error", message: error?.message ?? error });
+    }).finally(() => {
+      isLoading.value = false;
+      reload();
+      if (callback) callback.done();
+    });
+  }
+  watch([() => props.modelName, () => props.modelKey, computedModelBy], () => {
+    reload();
+  }, { immediate: true, deep: true });
+  return {
+    modelBy,
+    item,
+    isLoading,
+    fields,
+    canCreate,
+    canUpdate,
+    canDelete,
+    createItem,
+    updateItem,
+    deleteItem,
+    reload
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",
@@ -43,9 +43,6 @@
     "scripts",
     "templates"
   ],
-  "workspaces": [
-    "playground"
-  ],
   "scripts": {
     "prepack": "nuxt-module-build build",
     "dev": "npm run dev:prepare && nuxt dev playground",
@@ -128,10 +125,12 @@
     "@types/lodash-es": "^4.17.12",
     "@types/luxon": "^3.7.1",
     "@types/node": "latest",
+    "@vue/test-utils": "^2.4.6",
     "@vueuse/core": "^14.2.1",
     "@vueuse/nuxt": "^14.2.1",
     "changelogen": "^0.6.2",
     "eslint": "^10.0.3",
+    "happy-dom": "^20.8.9",
     "nuxt": "^4.3.1",
     "sass": "^1.97.3",
     "typedoc": "^0.28.17",

package/templates/.codegen/codegen.ts

@@ -1,10 +1,12 @@
 import type {CodegenConfig} from '@graphql-codegen/cli'
 
+declare const process: { env: Record<string, string | undefined> }
+
 const config: CodegenConfig = {
   overwrite: true,
   schema: process.env.NUXT_PUBLIC_WS_GRAPHQL,
   generates: {
-    './types/graphql.ts': {
+    './app/types/graphql.ts': {
       plugins: [{
         add: {
           content: '//Auto-generated file, do not make any change. Content could be overwritten.',
@@ -18,12 +20,12 @@ const config: CodegenConfig = {
         skipTypename: true,
       },
     },
-    './composables/graphqlObject.ts': {
+    './app/composables/graphqlObject.ts': {
       plugins: [{
         add: {
           content: '//Auto-generated file, do not make any change. Content could be overwritten.',
         },
-      }, './.codegen/plugin-schema-object.js'],
+      }, './.codegen/plugin-schema-object.cjs'],
     },
   },
   hooks: { afterAllFileWrite: ['prettier --parser typescript --tab-width 4 --write'] },