@goweekdays/layer-common 1.6.9 → 1.6.10

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @goweekdays/layer-common
 
+## 1.6.10
+
+### Patch Changes
+
+- 19f032f: Add UI components for category and tag management (CategoryForm.vue, CategoryMain.vue, TagForm.vue) including dialogs, pagination, and debounced searches. Update useCategory composable to accept an optional org parameter and route requests to /api/asset/item/categories/org/:org when provided (add and getAll). Update useTag composable and TTag type: expand tag shape with normalizedName, type, orgId, categoryPath, status, usageCount; adjust add, getAll and updateById signatures to support the new fields and filters; remove unused parent/children helpers. These changes enable org-scoped category operations and a richer tag model used by the new components.
+
 ## 1.6.9
 
 ### Patch Changes

package/components/CategoryForm.vue

@@ -0,0 +1,336 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <v-row no-gutters class="fill-height px-6" align="center">
+        <span class="font-weight-bold text-h5">{{ localProps.title }}</span>
+      </v-row>
+    </v-toolbar>
+
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-2">
+      <v-form v-model="valid">
+        <v-row no-gutters>
+          <v-col v-if="isCategory || isSubcategory" cols="12" class="mb-2">
+            <v-row no-gutters>
+              <InputLabel title="Department" :required="isMutable" />
+              <v-col cols="12">
+                <v-autocomplete
+                  v-model="department"
+                  v-model:search="searchDepartment"
+                  :items="departments"
+                  item-title="displayName"
+                  item-value="_id"
+                  :return-object="false"
+                  :readonly="!isMutable"
+                  :loading="loadingDepartments"
+                  :rules="isMutable ? [requiredRule] : []"
+                  :clearable="isMutable"
+                ></v-autocomplete>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col v-if="isSubcategory" cols="12" class="mb-2">
+            <v-row no-gutters>
+              <InputLabel title="Category" :required="isMutable" />
+              <v-col cols="12">
+                <v-autocomplete
+                  v-model="categoryParent"
+                  v-model:search="searchCategory"
+                  :items="categoryParents"
+                  item-title="displayName"
+                  item-value="_id"
+                  :return-object="false"
+                  :readonly="!isMutable"
+                  :loading="loadingCategoryParents"
+                  :rules="isMutable ? [requiredRule] : []"
+                  :disabled="!department"
+                  :clearable="isMutable"
+                ></v-autocomplete>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mb-2">
+            <v-row no-gutters>
+              <InputLabel title="Name" :required="isMutable" />
+              <v-col cols="12">
+                <v-text-field
+                  v-model="category.displayName"
+                  :rules="isMutable ? [requiredRule] : []"
+                  :readonly="!isMutable"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-form>
+
+      <v-alert
+        v-if="message"
+        type="error"
+        variant="flat"
+        closable
+        position="absolute"
+        location="bottom"
+        style="bottom: 48px"
+        @click:close="message = ''"
+        width="100%"
+        tile
+        class="text-caption"
+      >
+        {{ message }}
+      </v-alert>
+    </v-card-text>
+
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="emits('close')"
+            :disabled="localProps.loading"
+          >
+            {{ isMutable ? "Cancel" : "Close" }}
+          </v-btn>
+        </v-col>
+
+        <v-col v-if="localProps.mode === 'view'" cols="6">
+          <v-menu>
+            <template #activator="{ props }">
+              <v-btn
+                block
+                variant="flat"
+                color="black"
+                class="text-none"
+                height="48"
+                v-bind="props"
+                tile
+              >
+                More actions
+              </v-btn>
+            </template>
+
+            <v-list class="pa-0">
+              <v-list-item @click="emits('edit')">
+                <v-list-item-title class="text-subtitle-2">
+                  Edit
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item @click="emits('delete')" class="text-red">
+                <v-list-item-title class="text-subtitle-2">
+                  Delete
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-col>
+
+        <v-col v-if="isMutable" cols="6">
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            @click="emits('submit')"
+            :loading="localProps.loading"
+            :disabled="!valid"
+          >
+            {{ submitTitle }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const localProps = defineProps({
+  org: {
+    type: String,
+    default: "",
+  },
+  title: {
+    type: String,
+    default: "Category Form",
+  },
+  mode: {
+    type: String,
+    default: "add",
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  level: {
+    type: String,
+    default: "department",
+  },
+});
+
+const isMutable = computed(() => ["add", "edit"].includes(localProps.mode));
+
+const isDepartment = computed(() => localProps.level === "department");
+const isCategory = computed(() => localProps.level === "category");
+const isSubcategory = computed(() => localProps.level === "subcategory");
+
+const submitTitle = computed(() => {
+  switch (localProps.mode) {
+    case "add":
+      return "Submit";
+    case "edit":
+      return "Save changes";
+    default:
+      return "";
+  }
+});
+
+const emits = defineEmits(["edit", "delete", "submit", "cancel", "close"]);
+
+const category = defineModel({
+  type: Object as PropType<TCategory>,
+  default: () => useCategory().category.value,
+});
+
+const valid = ref(false);
+
+const { getAll: getAllCategories, getById } = useCategory();
+
+const department = ref("");
+
+if (isCategory.value) {
+  department.value = category.value.parentId || "";
+}
+
+const departments = ref<TCategory[]>([]);
+const categoryParent = ref("");
+
+watchEffect(() => {
+  if (!department.value) {
+    categoryParent.value = "";
+  }
+
+  if (department.value) {
+    category.value.parentId = department.value;
+  } else if (isSubcategory.value) {
+    category.value.parentId = "";
+  }
+});
+
+watchEffect(() => {
+  if (categoryParent.value) {
+    category.value.parentId = categoryParent.value;
+  } else {
+    category.value.parentId = "";
+  }
+});
+
+if (isSubcategory.value) {
+  categoryParent.value = category.value.parentId || "";
+
+  try {
+    const parentCategory = await getById(category.value.parentId ?? "");
+    if (parentCategory) {
+      department.value = parentCategory.parentId || "";
+    }
+  } catch (error: any) {
+    console.log(
+      error.response._data.message || "Error fetching parent category details."
+    );
+  }
+}
+
+const categoryParents = ref<TCategory[]>([]);
+
+const message = defineModel("message", { type: String, default: "" });
+
+const { requiredRule, debounce } = useUtils();
+
+const searchDepartment = ref("");
+
+const {
+  data: dataDepartments,
+  status: statusDepartments,
+  refresh: refreshDepartments,
+} = await useLazyAsyncData(
+  `get-departments-for-category-form-${localProps.org}`,
+  () =>
+    getAllCategories({
+      page: 1,
+      limit: 100,
+      level: "department",
+      search: searchDepartment.value,
+      org: localProps.org,
+    })
+);
+
+const debouncedSearchDepartment = debounce(() => {
+  refreshDepartments();
+}, 500);
+
+watch(searchDepartment, (val) => {
+  if (val !== searchDepartment.value) {
+    debouncedSearchDepartment();
+  }
+});
+
+const loadingDepartments = computed(
+  () => statusDepartments.value === "pending"
+);
+
+watchEffect(() => {
+  if (dataDepartments.value) {
+    departments.value = dataDepartments.value.items;
+  }
+});
+
+const searchCategory = ref("");
+
+const {
+  data: dataCategories,
+  status: statusCategories,
+  refresh: refreshCategories,
+} = await useLazyAsyncData(
+  `get-categories-for-category-form-${department.value}-${localProps.org}`,
+  () =>
+    getAllCategories({
+      page: 1,
+      limit: 100,
+      level: "category",
+      parent: department.value,
+      search: searchCategory.value,
+      org: localProps.org,
+    })
+);
+
+const debouncedSearchCategory = debounce(() => {
+  refreshCategories();
+}, 500);
+
+watch(searchCategory, (val) => {
+  if (val !== searchCategory.value) {
+    debouncedSearchCategory();
+  }
+});
+
+watch(department, () => {
+  categoryParent.value = "";
+  refreshCategories();
+});
+
+const loadingCategoryParents = computed(
+  () => statusCategories.value === "pending"
+);
+
+watchEffect(() => {
+  if (dataCategories.value) {
+    categoryParents.value = dataCategories.value.items;
+  }
+});
+</script>

package/components/CategoryMain.vue

@@ -0,0 +1,292 @@
+<template>
+  <v-col cols="12">
+    <v-row no-gutters>
+      <v-col cols="12" class="mb-2">
+        <v-row no-gutters align="center">
+          <v-btn
+            class="text-none mr-2"
+            rounded="pill"
+            variant="tonal"
+            @click="setDepartment({ mode: 'add' })"
+            size="large"
+          >
+            Add {{ formTitle }}
+          </v-btn>
+        </v-row>
+      </v-col>
+
+      <v-col cols="12">
+        <v-card
+          width="100%"
+          variant="outlined"
+          border="thin"
+          rounded="lg"
+          :loading="loadingDepartments"
+        >
+          <v-toolbar density="compact" color="grey-lighten-4">
+            <template #prepend>
+              <v-btn
+                fab
+                icon
+                density="comfortable"
+                @click="refreshDepartments()"
+              >
+                <v-icon>mdi-refresh</v-icon>
+              </v-btn>
+            </template>
+
+            <template #append>
+              <v-row no-gutters justify="end" align="center">
+                <span class="mr-2 text-caption text-fontgray">
+                  {{ pageRange }}
+                </span>
+                <local-pagination v-model="page" :length="pages" />
+              </v-row>
+            </template>
+          </v-toolbar>
+
+          <v-data-table
+            :headers="headers"
+            :items="items"
+            item-value="_id"
+            items-per-page="20"
+            fixed-header
+            hide-default-footer
+            hide-default-header
+            @click:row="tableRowClickHandler"
+            style="max-height: calc(100vh - (158px))"
+          >
+            <template #item.name="{ item }">
+              <span
+                :class="{
+                  'pl-6': item.parent && item.path.split('.').length === 2,
+                  'pl-10': item.parent && item.path.split('.').length === 3,
+                  'pl-16': item.parent && item.path.split('.').length >= 4,
+                }"
+              >
+                {{ item.name }}
+              </span>
+            </template>
+          </v-data-table>
+        </v-card>
+      </v-col>
+
+      <!-- dialogs -->
+      <v-dialog v-model="dialogAdd" width="450" persistent>
+        <CategoryForm
+          v-model="category"
+          mode="add"
+          :title="`Add ${formTitle}`"
+          :level="localProps.level"
+          :org="localProps.org"
+          @close="setDepartment({ mode: 'add', dialog: false })"
+          @submit="submitAdd()"
+          v-model:message="messageCategory"
+        />
+      </v-dialog>
+
+      <v-dialog v-model="dialogView" width="450" persistent>
+        <CategoryForm
+          v-model="category"
+          mode="view"
+          :title="`View ${formTitle} Details`"
+          :level="localProps.level"
+          :org="localProps.org"
+          @close="setDepartment({ mode: 'view', dialog: false })"
+          @edit="handleEdit()"
+          @delete="handleDelete()"
+        />
+      </v-dialog>
+
+      <v-dialog v-model="dialogEdit" width="450" persistent>
+        <CategoryForm
+          v-model="category"
+          mode="edit"
+          :title="`Edit ${formTitle} Details`"
+          :level="localProps.level"
+          :org="localProps.org"
+          @close="setDepartment({ mode: 'edit', dialog: false })"
+          @submit="submitEdit()"
+          v-model:message="messageCategory"
+        />
+      </v-dialog>
+
+      <v-dialog v-model="dialogDelete" width="450" persistent>
+        <ConfirmationPrompt
+          :title="`Delete ${formTitle}`"
+          action="Delete Category"
+          :content="`Are you sure you want to delete this ${formTitle.toLowerCase()}? This action cannot be undone.`"
+          @cancel="dialogDelete = false"
+          @confirm="submitDelete()"
+          :message="messageCategory"
+          :loading="loadingSubmit"
+          :disabled="loadingSubmit"
+        />
+      </v-dialog>
+    </v-row>
+  </v-col>
+</template>
+
+<script setup lang="ts">
+const localProps = defineProps({
+  org: {
+    type: String,
+    default: "",
+  },
+  level: {
+    type: String,
+    default: "department",
+  },
+});
+
+const formTitle = computed(() => {
+  switch (localProps.level) {
+    case "department":
+      return "Department";
+    case "category":
+      return "Category";
+    case "subcategory":
+      return "Subcategory";
+    default:
+      return "Category";
+  }
+});
+
+const headers = [{ title: "Name", value: "displayName" }];
+
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const items = ref<Array<Record<string, any>>>([]);
+
+const { getAll, category, add, updateById, deleteById } = useCategory();
+
+const {
+  data: dataDepartments,
+  refresh: refreshDepartments,
+  status: statusDepartments,
+} = await useLazyAsyncData(
+  `get-all-from-category-registry-${localProps.org}-${localProps.level}-${page.value}`,
+  () =>
+    getAll({
+      page: page.value,
+      limit: 20,
+      org: localProps.org,
+      level: localProps.level,
+    })
+);
+
+const loadingDepartments = computed(
+  () => statusDepartments.value === "pending"
+);
+
+watchEffect(() => {
+  if (dataDepartments.value) {
+    items.value = dataDepartments.value.items;
+    pages.value = dataDepartments.value.pages;
+    pageRange.value = dataDepartments.value.pageRange;
+  }
+});
+
+watch(page, () => {
+  refreshDepartments();
+});
+
+// Dialogs
+const dialogAdd = ref(false);
+const dialogView = ref(false);
+const dialogEdit = ref(false);
+const dialogDelete = ref(false);
+
+function setDepartment({
+  data = category.value,
+  mode = "",
+  dialog = true,
+} = {}) {
+  Object.assign(category.value, JSON.parse(JSON.stringify(data)));
+
+  switch (mode) {
+    case "add":
+      dialogAdd.value = dialog;
+      break;
+    case "view":
+      dialogView.value = dialog;
+      break;
+    case "edit":
+      dialogEdit.value = dialog;
+      break;
+  }
+}
+
+const loadingSubmit = ref(false);
+const messageCategory = ref("");
+
+async function submitAdd() {
+  loadingSubmit.value = true;
+  try {
+    const payload: Pick<TCategory, "displayName" | "parentId"> = {
+      displayName: category.value.displayName,
+    };
+    if (category.value.parentId) {
+      payload.parentId = category.value.parentId;
+    }
+    await add(payload, localProps.org);
+    await refreshDepartments();
+    setDepartment({ mode: "add", dialog: false });
+  } catch (error: any) {
+    messageCategory.value =
+      error.response?._data?.message ||
+      `An error occurred while adding the ${formTitle.value.toLowerCase()}.`;
+  } finally {
+    loadingSubmit.value = false;
+  }
+}
+
+function tableRowClickHandler(_: any, data: any) {
+  setDepartment({ mode: "view", data: data.item });
+}
+
+function handleEdit() {
+  dialogView.value = false;
+  dialogEdit.value = true;
+}
+
+async function submitEdit() {
+  loadingSubmit.value = true;
+  try {
+    await updateById(category.value._id ?? "", {
+      displayName: category.value.displayName,
+    });
+    await refreshDepartments();
+    setDepartment({ mode: "edit", dialog: false });
+  } catch (error: any) {
+    messageCategory.value =
+      error.response?._data?.message ||
+      "An error occurred while editing the category.";
+  } finally {
+    loadingSubmit.value = false;
+  }
+}
+
+function handleDelete() {
+  dialogView.value = false;
+  dialogDelete.value = true;
+}
+
+async function submitDelete() {
+  loadingSubmit.value = true;
+  try {
+    await deleteById(category.value._id ?? "");
+    await refreshDepartments();
+    setDepartment({ mode: "view", dialog: false });
+    dialogDelete.value = false;
+  } catch (error: any) {
+    messageCategory.value =
+      error.response?._data?.message ||
+      "An error occurred while deleting the category.";
+  } finally {
+    loadingSubmit.value = false;
+  }
+}
+</script>

package/components/Input/SnakeCase.vue

@@ -12,11 +12,18 @@
 </template>
 
 <script setup lang="ts">
-const model = defineModel<string>({ default: "" });
+const props = defineProps({
+  case: {
+    type: String as PropType<"uppercase" | "lowercase">,
+    default: "uppercase",
+  },
+});
 
-const { toSnakeUpperCase } = useUtils();
+const model = defineModel<string>({ default: "" });
 
 function onInput(val: string) {
-  model.value = toSnakeUpperCase(val);
+  const snake = val.replace(/\s+/g, "_");
+  model.value =
+    props.case === "lowercase" ? snake.toLowerCase() : snake.toUpperCase();
 }
 </script>

package/components/TagForm.vue

@@ -0,0 +1,186 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <v-row no-gutters class="fill-height px-6" align="center">
+        <span class="font-weight-bold text-h5">{{ localProps.title }}</span>
+      </v-row>
+    </v-toolbar>
+
+    <v-card-text style="max-height: 100vh; overflow-y: auto">
+      <v-row no-gutters>
+        <v-col cols="12" class="mb-2">
+          <v-row no-gutters>
+            <InputLabel title="Name" :required="isMutable" />
+            <v-col cols="12">
+              <v-text-field
+                v-model="tag.name"
+                :rules="isMutable ? [requiredRule] : []"
+                :readonly="!isMutable"
+              ></v-text-field>
+            </v-col>
+          </v-row>
+        </v-col>
+
+        <v-col cols="12" class="mb-2">
+          <v-row no-gutters>
+            <InputLabel title="Type" :required="isMutable" />
+            <v-col cols="12">
+              <v-select
+                v-model="tag.type"
+                :items="['public', 'private']"
+                :readonly="!isMutable"
+              ></v-select>
+            </v-col>
+          </v-row>
+        </v-col>
+
+        <v-col cols="12" class="mb-2">
+          <v-row no-gutters>
+            <InputLabel title="Category Path" />
+            <v-col cols="12">
+              <v-text-field
+                v-model="tag.categoryPath"
+                :readonly="!isMutable"
+              ></v-text-field>
+            </v-col>
+          </v-row>
+        </v-col>
+
+        <v-col v-if="localProps.mode !== 'add'" cols="12" class="mb-2">
+          <v-row no-gutters>
+            <InputLabel title="Status" />
+            <v-col cols="12">
+              <v-select
+                v-model="tag.status"
+                :items="['active', 'pending']"
+                :readonly="!isMutable"
+              ></v-select>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
+
+      <v-alert
+        v-if="message"
+        type="error"
+        variant="flat"
+        closable
+        position="absolute"
+        location="bottom"
+        style="bottom: 48px"
+        @click:close="message = ''"
+        width="100%"
+        tile
+        class="text-caption"
+      >
+        {{ message }}
+      </v-alert>
+    </v-card-text>
+
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="emits('close')"
+            :disabled="localProps.loading"
+          >
+            {{ isMutable ? "Cancel" : "Close" }}
+          </v-btn>
+        </v-col>
+
+        <v-col v-if="localProps.mode === 'view'" cols="6">
+          <v-menu>
+            <template #activator="{ props }">
+              <v-btn
+                block
+                variant="flat"
+                color="black"
+                class="text-none"
+                height="48"
+                v-bind="props"
+                tile
+              >
+                More actions
+              </v-btn>
+            </template>
+
+            <v-list class="pa-0">
+              <v-list-item @click="emits('edit')">
+                <v-list-item-title class="text-subtitle-2">
+                  Edit
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item @click="emits('delete')" class="text-red">
+                <v-list-item-title class="text-subtitle-2">
+                  Delete
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-col>
+
+        <v-col v-if="isMutable" cols="6">
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            @click="emits('submit')"
+            :loading="localProps.loading"
+          >
+            {{ submitTitle }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const localProps = defineProps({
+  title: {
+    type: String,
+    default: "Tag Form",
+  },
+  mode: {
+    type: String,
+    default: "add",
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const isMutable = computed(() => ["add", "edit"].includes(localProps.mode));
+
+const submitTitle = computed(() => {
+  switch (localProps.mode) {
+    case "add":
+      return "Submit";
+    case "edit":
+      return "Save changes";
+    default:
+      return "";
+  }
+});
+
+const emits = defineEmits(["edit", "delete", "submit", "cancel", "close"]);
+
+const tag = defineModel({
+  type: Object as PropType<TTag>,
+  default: () => useTag().tag.value,
+});
+
+const message = defineModel("message", { type: String, default: "" });
+
+const { requiredRule } = useUtils();
+</script>

package/composables/useCategory.ts

@@ -0,0 +1,88 @@
+export default function useCategory() {
+  const category = ref<TCategory>({
+    _id: "",
+    level: "department",
+    name: "",
+    displayName: "",
+    parentId: "",
+    path: "",
+    isActive: true,
+  });
+
+  function add(
+    value: Pick<TCategory, "displayName" | "parentId">,
+    org?: string
+  ) {
+    return useNuxtApp().$api<Record<string, any>>(
+      org
+        ? `/api/asset/item/categories/org/${org}`
+        : `/api/asset/item/categories`,
+      {
+        method: "POST",
+        body: value,
+      }
+    );
+  }
+
+  function getAll({
+    org = "",
+    parent = "",
+    level = "",
+    search = "",
+    limit = 20,
+    page = 1,
+  } = {}) {
+    return useNuxtApp().$api<Record<string, any>>(
+      org
+        ? `/api/asset/item/categories/org/${org}`
+        : `/api/asset/item/categories`,
+      {
+        method: "GET",
+        query: {
+          parent,
+          level,
+          search,
+          limit,
+          page,
+        },
+      }
+    );
+  }
+
+  function getById(id: string) {
+    return useNuxtApp().$api<TCategory>(`/api/asset/item/categories/id/${id}`, {
+      method: "GET",
+    });
+  }
+
+  function updateById(
+    id: string,
+    options: Pick<TCategory, "displayName"> & { isActive?: boolean }
+  ) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/asset/item/categories/id/${id}`,
+      {
+        method: "PATCH",
+        body: options,
+      }
+    );
+  }
+
+  function deleteById(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/asset/item/categories/id/${id}`,
+      {
+        method: "DELETE",
+      }
+    );
+  }
+
+  return {
+    category,
+    add,
+    getAll,
+    getById,
+    updateById,
+    deleteById,
+  };
+}

package/composables/useTag.ts

@@ -0,0 +1,78 @@
+export default function useTag() {
+  const tag = ref<TTag>({
+    _id: "",
+    name: "",
+    normalizedName: "",
+    type: "public",
+    orgId: "",
+    categoryPath: "",
+    status: "pending",
+    usageCount: 0,
+  });
+
+  function add(
+    value: Pick<TTag, "name" | "type"> &
+      Partial<Pick<TTag, "orgId" | "categoryPath">>
+  ) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/tags`, {
+      method: "POST",
+      body: value,
+    });
+  }
+
+  function getAll(options?: {
+    search?: string;
+    page?: number;
+    limit?: number;
+    type?: string;
+    orgId?: string;
+    status?: string;
+    categoryPath?: string;
+  }) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/tags`, {
+      method: "GET",
+      query: {
+        search: options?.search ?? "",
+        page: options?.page ?? 1,
+        limit: options?.limit ?? 10,
+        type: options?.type ?? "",
+        orgId: options?.orgId ?? "",
+        status: options?.status ?? "",
+        categoryPath: options?.categoryPath ?? "",
+      },
+    });
+  }
+
+  function getById(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/tags/id/${id}`, {
+      method: "GET",
+    });
+  }
+
+  function updateById(
+    id: string,
+    options: Partial<
+      Pick<TTag, "name" | "type" | "orgId" | "categoryPath" | "status">
+    >
+  ) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/tags/id/${id}`, {
+      method: "PATCH",
+      body: options,
+    });
+  }
+
+  function deleteById(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/tags/id/${id}`, {
+      method: "DELETE",
+    });
+  }
+
+  return {
+    tag,
+    add,
+    getAll,
+    getById,
+    updateById,
+    deleteById,
+  };
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@goweekdays/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.6.9",
+  "version": "1.6.10",
   "main": "./nuxt.config.ts",
   "publishConfig": {
     "access": "public"

package/types/asset.d.ts

@@ -0,0 +1,33 @@
+declare type TAssetItemCategory =
+  | "facility"
+  | "equipment"
+  | "vehicle"
+  | "tool"
+  | "supply";
+
+declare type TAssetItemPurpose = "internal" | "for-sale" | "for-rent";
+
+declare type TAssetItemTrackMode = "individual" | "quantity";
+
+declare type TAssetItemStatus = "active" | "archived";
+
+declare type TAssetItem = {
+  _id?: ObjectId;
+  name: string;
+  itemRef?: string;
+  category: TAssetItemCategory;
+  tags: string[];
+  purpose: TAssetItemPurpose;
+  trackMode: TAssetItemTrackMode;
+  sku?: string;
+  price?: number;
+  unit: string;
+  quantityOnHand: number;
+  reserved: number;
+  locationId?: string;
+  assignedTo?: string;
+  status?: TAssetItemStatus;
+  createdAt?: string;
+  updatedAt?: string;
+  deletedAt?: string;
+};

package/types/category.d.ts

@@ -0,0 +1,13 @@
+declare type TCategoryLevel = "department" | "category" | "subcategory";
+
+declare type TCategory = {
+  _id?: string;
+  level: TCategoryLevel;
+  name: string;
+  displayName: string;
+  parentId?: string;
+  path: string;
+  isActive: boolean;
+  createdAt?: Date | string;
+  updatedAt?: Date | string;
+};

package/types/tag.d.ts

@@ -0,0 +1,12 @@
+declare type TTag = {
+  _id?: string;
+  name: string;
+  normalizedName: string;
+  type: "public" | "private";
+  orgId?: string;
+  categoryPath?: string;
+  status?: "active" | "pending";
+  usageCount?: number;
+  createdAt?: Date | string;
+  updatedAt?: Date | string;
+};