@dasidev/dasi-ui 1.0.0

package/src/components/pages/PageActivityContent.vue

@@ -0,0 +1,597 @@
+<script setup lang="ts">
+import { ref, watch, computed, defineAsyncComponent, nextTick } from "vue";
+import api from "@/api/api";
+import { type CustomTab } from "@/components/pages/PageTab.vue";
+import PageContentTable from "@/components/pages/PageContentTable.vue";
+import { type Submenu } from "@/menu";
+import type { ColumnRef, FilterForm, PageConfig, SortBy } from "@/vueform/config/types";
+import { clearFormSchema, isValidValue } from "@/lib/utils";
+import { editFormData, deleteFormData, restoreFormData, addFormData } from "@/lib/form.utils";
+import type { DasiV2FormSchema, FormSchemaHooks } from "@/types/form.types";
+import { genFilterQuery, type FilterItem, initPageActivity, getPageData, getFilterSeparated, applyToggleChange } from "@/lib/page.utils";
+import { useRoute, useRouter } from "vue-router";
+import PageActivityHeader from "@/components/layout/PageActivityHeader.vue";
+import DataTableAccordion from "@/components/tables/DataTableAccordion.vue";
+import { InternalServerError } from "@/lib/constants";
+
+// Fix: Import Vueform to resolve "Failed to resolve component: Vueform" error
+import Vueform from "@vueform/vueform";
+
+export interface PageActivityInitOptions {
+  title: string;
+  pageConfig: PageConfig;
+  endpoint: string;
+  query: string;
+  menuItem?: Submenu;
+  columns?: ColumnRef[];
+  formSchema?: DasiV2FormSchema;
+}
+
+const route = useRoute();
+const router = useRouter();
+const emits = defineEmits<{
+  (e: "pageInitialized", options: PageActivityInitOptions): void;
+  (e: "rowActionClick", i: number, item: any, btnId?: string): void;
+  (e: "checkActionClick", checkedItems: any[], btnId?: string): void;
+  (e: "groupActionClick", groupId: string, groupItems: any[], btnId?: string): void;
+}>();
+const props = defineProps(["pageCode", "endpoint"]);
+
+/**
+ * Search
+ *
+ */
+const searchQuery = ref("");
+const searchTimer: any = ref(null);
+
+/**
+ * Pagination
+ *
+ */
+const itemsPerPage = ref(25);
+const currentPage = ref(1);
+const totalData = ref(0);
+const totalFilteredData = ref(0);
+
+/**
+ * Base config
+ *
+ */
+const title = ref("");
+const endpoint = ref("");
+
+/**
+ * Form by Vueform
+ *
+ */
+const formSchema = defineModel<DasiV2FormSchema>("schema");
+const formHooks = defineModel<FormSchemaHooks>("hooks");
+
+/**
+ * Display data
+ *
+ */
+const menuItem = ref<Submenu>();
+const pageConfig = ref<PageConfig>({ showAddBtn: false, showDeleted: false });
+const pageContentTable = ref<InstanceType<typeof PageContentTable>>();
+
+/**
+ * Dynamic component per endpoint
+ *
+ */
+const formComponent = computed(() => {
+  if (!pageConfig.value.useCustomViewDetail) return null;
+  const schemaPath = (pageConfig.value.customComponentPath ?? pageConfig.value.schema ?? endpoint.value ?? "").replace(/^\/+/, "");
+  if (!schemaPath) return;
+  return defineAsyncComponent(() => import(`@/components/page-activity/${schemaPath}/Detail.vue`));
+});
+const $detail = ref();
+const detailComponent = computed(() => {
+  if (!pageConfig.value.useCustomViewDetail) return null;
+  const schemaPath = (pageConfig.value.customComponentPath ?? pageConfig.value.schema ?? endpoint.value ?? "").replace(/^\/+/, "");
+  if (!schemaPath) return;
+  return defineAsyncComponent(() => import(`@/components/page-activity/${schemaPath}/Detail.vue`));
+});
+const $actionRow = ref();
+const actionRowComponent = computed(() => {
+  if (!pageConfig.value.useActionRowBtnComponent) return null;
+  const schemaPath = (pageConfig.value.customComponentPath ?? pageConfig.value.schema ?? endpoint.value ?? "").replace(/^\/+/, "");
+  if (!schemaPath) return;
+  return defineAsyncComponent(() => import(`@/components/page-activity/${schemaPath}/ActionRow.vue`));
+});
+const $actionCheck = ref();
+const actionCheckComponent = computed(() => {
+  if (!isValidValue(pageConfig.value.checkboxActionBtn)) return null;
+  const schemaPath = (pageConfig.value.customComponentPath ?? pageConfig.value.schema ?? endpoint.value ?? "").replace(/^\/+/, "");
+  if (!schemaPath) return;
+  return defineAsyncComponent(() => import(`@/components/page-activity/${schemaPath}/ActionCheck.vue`));
+});
+const $actionGroup = ref();
+const actionGroupComponent = computed(() => {
+  if (!pageConfig.value.tableGroupActionBtn) return null;
+  const schemaPath = (pageConfig.value.customComponentPath ?? pageConfig.value.schema ?? endpoint.value ?? "").replace(/^\/+/, "");
+  if (!schemaPath) return;
+  return defineAsyncComponent(() => import(`@/components/page-activity/${schemaPath}/ActionGroup.vue`));
+});
+
+/**
+ * Model
+ *
+ */
+const data = defineModel<any[]>("data", { default: [] });
+const customTabs = defineModel<CustomTab[]>("customTabs", { default: [] });
+
+const columns = defineModel<ColumnRef[]>("columns", { default: [] });
+const tab = defineModel<string>("tab", { default: "all" });
+const loading = defineModel<boolean>("loading", { default: true });
+const dataError = defineModel<string | null>("dataError", { default: null });
+
+/**
+ * Filter, sort, and query string
+ *
+ */
+const filterQueryForm = ref<FilterItem>({});
+const filterQueryPageMenu = ref<FilterItem>({});
+const filterOnForm = ref<FilterForm>({});
+const filterOnPageMenu = ref<FilterForm>({});
+const queryParams = ref("");
+const sortBy = ref<SortBy>();
+
+async function addData() {
+  console.log("pc", pageConfig.value);
+  await addFormData({
+    title: title.value,
+    endpoint: pageConfig.value?.savePath ?? endpoint.value,
+    formSchema: formSchema as any,
+    formHooks: formHooks.value,
+    formDialogClass: pageConfig.value.formDialogClass
+  });
+  getData();
+}
+
+/**
+ * Edit item data based on
+ * schema and data get by id from API
+ *
+ */
+async function editItem(i: number, item: any) {
+  await editFormData({
+    title: title.value,
+    endpoint: pageConfig.value?.savePath ?? endpoint.value,
+    formSchema: formSchema as any,
+    formHooks: formHooks.value,
+    formDialogClass: pageConfig.value.formDialogClass,
+    pageConfig: pageConfig.value,
+    item
+  });
+  getData();
+}
+
+/**
+ * Edit from router ?edit={id}
+ *
+ */
+function editFromRoute() {
+  if (!route.query.edit) return;
+
+  /**
+   * Call the edit function
+   *
+   */
+  editItem(0, { id: route.query.edit });
+
+  /**
+   * Remove the edit parameter from the URL to prevent re-triggering on refresh
+   *
+   */
+  router.replace({
+    path: route.path,
+    query: { ...route.query, edit: undefined }
+  });
+}
+
+/**
+ * Soft delete item
+ *
+ */
+async function deleteItem(i: number, item: any) {
+  await deleteFormData({
+    title: title.value,
+    endpoint: pageConfig.value?.savePath ?? endpoint.value,
+    formSchema: formSchema as any,
+    formHooks: formHooks.value,
+    allData: data.value,
+    index: i,
+    item
+  });
+}
+
+/**
+ * Restore item from deleted to all data
+ *
+ */
+async function restoreItem(i: number, item: any) {
+  await restoreFormData({
+    title: title.value,
+    endpoint: pageConfig.value?.savePath ?? endpoint.value,
+    formSchema: formSchema as any,
+    formHooks: formHooks.value,
+    allData: data.value,
+    index: i,
+    item
+  });
+}
+
+function rowCustomBtnAction(i: number, item: any, btnId?: string) {
+  if ($actionRow.value) {
+    $actionRow.value.open(i, item).then((b: boolean) => {
+      if (b) reloadDataByIds([item.id]);
+    });
+  }
+  emits("rowActionClick", i, item, btnId);
+}
+
+function checkActionClicked(checkedItems: any[], btnId?: string) {
+  if ($actionCheck.value) {
+    $actionCheck.value.open(checkedItems, btnId).then((b: boolean) => {
+      if (b) reloadDataByIds(checkedItems.map(r => r.id));
+    });
+  }
+  emits("checkActionClick", checkedItems, btnId);
+}
+
+function groupActionClicked(groupId: string, groupItems: any[], btnId?: string) {
+  if ($actionGroup.value) {
+    $actionGroup.value.open(groupId, groupItems, btnId).then((b: boolean) => {
+      if (b) reloadDataByIds(groupItems.map(r => r.id));
+    });
+  }
+  emits("groupActionClick", groupId, groupItems, btnId);
+}
+
+/**
+ * Get data with delayed search
+ *
+ */
+function search() {
+  if (searchTimer.value) clearTimeout(searchTimer.value);
+  searchTimer.value = setTimeout(() => {
+    getData();
+  }, 300);
+}
+
+function reloadDataByIds(ids: string[]) {
+  getPageData({
+    endpoint: endpoint.value,
+    tabActive: tab.value,
+    queryParams: queryParams.value,
+    searchQuery: searchQuery.value,
+    columns: columns.value,
+    sortBy: sortBy.value,
+    filterQueryForm: filterQueryForm.value,
+    filterQueryPageMenu: filterQueryPageMenu.value,
+    pageConfig: pageConfig.value,
+    pagination: { limit: itemsPerPage.value, page: currentPage.value }
+  })
+    .then(r => {
+      for (const item of r.data.data) {
+        if (ids.includes(item.id)) {
+          const idx = data.value.findIndex(r => r.id === item.id);
+          if (idx >= 0) data.value[idx] = item;
+        }
+      }
+    })
+    .catch((err: any) => {
+      dataError.value = err.message || "Internal server error. Please try again later.";
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function getData() {
+  /**
+   * Reset state and display loading
+   *
+   */
+  loading.value = true;
+  dataError.value = null;
+  totalData.value = 0;
+  totalFilteredData.value = 0;
+  data.value = [];
+
+  getPageData({
+    endpoint: endpoint.value,
+    tabActive: tab.value,
+    queryParams: queryParams.value,
+    searchQuery: searchQuery.value,
+    columns: columns.value,
+    sortBy: sortBy.value,
+    filterQueryForm: filterQueryForm.value,
+    filterQueryPageMenu: filterQueryPageMenu.value,
+    pageConfig: pageConfig.value,
+    pagination: { limit: itemsPerPage.value, page: currentPage.value }
+  })
+    .then(r => {
+      data.value = r.data.data;
+      totalData.value = r.data.totalData;
+      totalFilteredData.value = r.data.data?.length || 0;
+    })
+    .catch((err: any) => {
+      dataError.value = err.message || "Internal server error. Please try again later.";
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+async function tabChanged() {
+  currentPage.value = 1;
+  await nextTick();
+  getData();
+}
+
+/**
+ * Filter
+ *
+ */
+function initFilter() {
+  filterQueryForm.value = {};
+  filterQueryPageMenu.value = {};
+  filterOnForm.value = {};
+  filterOnPageMenu.value = {};
+  if (!pageConfig.value?.filter) return;
+
+  /**
+   * Separate filter displayed on form dialog
+   * and on page action menu
+   *
+   */
+  [filterOnPageMenu.value, filterOnForm.value] = getFilterSeparated(pageConfig.value.filter);
+  clearFormSchema(Object.entries(filterOnPageMenu.value));
+  clearFormSchema(Object.entries(filterOnForm.value));
+  filterQueryForm.value = genFilterQuery(filterOnForm.value);
+  filterQueryPageMenu.value = genFilterQuery(filterOnPageMenu.value);
+}
+
+function onFilterChanged(formData: any) {
+  if (!formData || !filterOnForm.value) return;
+  clearFormSchema(Object.entries(filterOnForm.value));
+  filterQueryForm.value = genFilterQuery(filterOnForm.value, formData);
+  getData();
+}
+
+function onFilterPageMenuChanged(formData: any) {
+  if (!formData || !filterOnPageMenu.value) return;
+  clearFormSchema(Object.entries(filterOnPageMenu.value));
+  filterQueryPageMenu.value = genFilterQuery(filterOnPageMenu.value, formData);
+  getData();
+}
+
+function resetFilter() {
+  clearFormSchema(Object.entries(filterOnForm.value));
+  filterQueryForm.value = genFilterQuery(filterOnForm.value);
+  getData();
+}
+
+/**
+ * Toggle handling - simple like filter pattern
+ */
+function onToggleChanged(toggleData: any) {
+  const { checked, config } = toggleData;
+
+  // Use utility function to get new endpoint (just like filter pattern)
+  endpoint.value = applyToggleChange(config, checked, endpoint.value);
+
+  // Reset to first page and refetch data
+  currentPage.value = 1;
+  getData();
+}
+
+/**
+ * Page initialization
+ * this will set initialization for page that govern
+ * - API Endpoint
+ * - Page config
+ * - Filter
+ * - Tab
+ * - Search
+ * - Sort
+ * - Form schema
+ * - Form hooks
+ * - Page title
+ * - Table columns
+ *
+ */
+async function initPage() {
+  loading.value = true;
+
+  /**
+   * Make sure the endpoint and pageCode
+   * from parent already set
+   *
+   */
+  await nextTick();
+
+  /**
+   * Reset state before
+   * initializing with new page data
+   *
+   */
+  customTabs.value = [];
+  tab.value = "all"; // Reset tab to default when changing pages
+  searchQuery.value = route.query?.search ? String(route.query?.search) : "";
+
+  /**
+   * Init page
+   * Get config from @/vueform/config/${props.pageCode}/${props.endpoint}
+   *
+   */
+  try {
+    const pageInit = await initPageActivity({
+      pageCode: props.pageCode,
+      endpoint: props.endpoint,
+      fullPath: route.fullPath,
+      tabReactive: tab,
+      onRestore: restoreItem,
+      onDelete: deleteItem,
+      onEdit: editItem,
+      onCustomBtnClick: rowCustomBtnAction
+    });
+    title.value = pageInit.title;
+    pageConfig.value = pageInit.pageConfig;
+    endpoint.value = pageInit.endpoint;
+    queryParams.value = pageInit.queryString;
+    formSchema.value = pageInit.formSchema;
+    formHooks.value = pageInit.formHooks;
+    menuItem.value = pageInit.menuItem;
+    columns.value = pageInit.columns;
+    sortBy.value = pageInit.pageConfig.sortBy;
+
+    /**
+     * Await for vue update so
+     * other using this variables can
+     * safe to access it
+     *
+     */
+    await nextTick();
+
+    /**
+     * Notify parent that page has been initilized
+     *
+     */
+    emits("pageInitialized", {
+      title: pageInit.title,
+      pageConfig: pageInit.pageConfig,
+      columns: pageInit.columns,
+      endpoint: pageInit.endpoint,
+      query: pageInit.queryString,
+      menuItem: pageInit.menuItem,
+      formSchema: pageInit.formSchema
+    });
+
+    /**
+     * Notify page content table
+     * that page are initialized and pageConfig
+     * is now available
+     *
+     */
+    pageContentTable.value?.pageInitialized();
+
+    /**
+     * Init filter set with default value
+     *
+     */
+    initFilter();
+
+    /**
+     * Add handler for query params
+     *
+     */
+    editFromRoute();
+
+    /**
+     * Fetch data
+     *
+     */
+    // getTotalWaitingApproval();
+    getData();
+  } catch (err: any) {
+    loading.value = false;
+    dataError.value = err.message ?? InternalServerError;
+  }
+}
+
+/**
+ * Reload data when sort are changed
+ *
+ */
+watch(sortBy, () => {
+  if (!sortBy.value) return;
+  setTimeout(() => {
+    getData();
+  });
+});
+
+defineExpose({ getData, reloadDataByIds, initPage });
+</script>
+
+<template>
+  <main>
+    <PageActivityHeader
+      v-model:tab="tab"
+      v-on:tab-changed="tabChanged"
+      :show-deleted-tab="pageConfig.showDeleted"
+      :custom-tabs="customTabs"
+      :title="title"
+      v-on:reload="getData"
+      v-on:add-data="addData"
+      :show-add-btn="pageConfig.showAddBtn" />
+    <PageContentTable
+      ref="pageContentTable"
+      :title="title"
+      :endpoint="endpoint"
+      v-model:data="data"
+      :error="dataError"
+      :loading="loading"
+      :page-config="pageConfig"
+      :show-copyright="true"
+      v-on:get-data="getData"
+      v-model:sort-by="sortBy"
+      v-model:columns="columns"
+      @check-action-click="checkActionClicked"
+      @get-data="getData"
+      @reload-data-by-ids="reloadDataByIds"
+      @edit-item="editItem"
+      :total-data="totalData"
+      :total-filtered-data="totalFilteredData"
+      v-model:items-per-page="itemsPerPage"
+      v-model:current-page="currentPage"
+      :display-search="pageConfig.showSearch"
+      :search-placeholder="`Cari ${title}...`"
+      v-model:search="searchQuery"
+      v-on:search-input="search"
+      v-on:add-click="addData"
+      :form-schema="formSchema"
+      :form-hooks="formHooks"
+      :filter="filterOnForm"
+      v-on:filter-change="onFilterChanged"
+      v-on:reset-filter="resetFilter"
+      v-on:toggle-change="onToggleChanged"
+      :show-checkbox-item="false"
+      :show-view-document-btn="pageConfig?.showViewDocButton"
+      :view-docs-endpoint="pageConfig?.viewDocsEndpoint">
+      <template #right-action>
+        <section class="vueform-page-menu" v-if="Object.keys(filterOnPageMenu).length > 0">
+          <Vueform :schema="filterOnPageMenu" v-on:change="onFilterPageMenuChanged" />
+        </section>
+      </template>
+      <template #table>
+        <slot name="table">
+          <DataTableAccordion
+            v-model:data="data"
+            :title="title"
+            :columns="columns"
+            :loading="loading"
+            :error="dataError"
+            :form-hooks="formHooks"
+            :form-schema="formSchema"
+            :endpoint="endpoint"
+            :page-config="pageConfig"
+            v-model:sort-by="sortBy"
+            @get-data="getData"
+            @group-action-click="groupActionClicked"
+            @reload-data-by-ids="reloadDataByIds"
+            @edit="editItem"
+            :group-by="pageConfig.tableGroupConfig?.by || ''"
+            :group-labels="pageConfig.tableGroupConfig?.labels"
+            v-if="pageConfig.tableGrouped && pageConfig.tableGroupConfig" />
+        </slot>
+      </template>
+    </PageContentTable>
+  </main>
+  <component :is="detailComponent" v-if="detailComponent" ref="$detail" />
+  <component :is="actionRowComponent" v-if="actionRowComponent" ref="$actionRow" />
+  <component :is="actionCheckComponent" v-if="actionCheckComponent" ref="$actionCheck" />
+  <component :is="actionGroupComponent" v-if="actionGroupComponent" ref="$actionGroup" />
+</template>