@vc-shell/create-vc-app 2.0.10-pr240.41fca76 → 2.0.10-pr242.2e7f6b3

package/dist/templates/module/composables/useList.ts.ejs

@@ -1,43 +1,42 @@
-import { ref, type Ref } from "vue";
-import { useAsync, useLoading } from "@vc-shell/framework";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default function use<%- ModuleNamePascalCase %>List() {
-  const data: Ref<Record<string, any>[]> = ref([]);
-  const totalCount = ref(0);
-  const currentPage = ref(1);
-  const searchQuery = ref("");
-
-  const { loading: itemsLoading, action: fetchItems } = useAsync(async () => {
-    // TODO: Replace with real API call
-    // const result = await apiClient.search({
-    //   keyword: searchQuery.value,
-    //   skip: (currentPage.value - 1) * 20,
-    //   take: 20,
-    // });
-    // data.value = result.results ?? [];
-    // totalCount.value = result.totalCount ?? 0;
-  });
-
-  const { loading: deleteLoading, action: removeItems } = useAsync(async (ids?: string[]) => {
-    // TODO: Replace with real API call
-    // await Promise.all((ids ?? []).map((id) => apiClient.delete(id)));
-    // await fetchItems();
-  });
-
-  const loading = useLoading(itemsLoading, deleteLoading);
-
-  async function getItems() {
-    await fetchItems();
-  }
-
-  return {
-    data,
-    loading,
-    totalCount,
-    currentPage,
-    searchQuery,
-    getItems,
-    removeItems,
-  };
-}
+import { ref, type Ref } from "vue";
+import { useAsync, useLoading } from "@vc-shell/framework";
+
+export interface <%- ModuleNamePascalCase %>ListQuery {
+  keyword?: string;
+  sort?: string;
+  skip?: number;
+  take?: number;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function use<%- ModuleNamePascalCase %>List() {
+  const data: Ref<Record<string, any>[]> = ref([]);
+  const totalCount = ref(0);
+
+  const { loading: itemsLoading, action: getItems } = useAsync<<%- ModuleNamePascalCase %>ListQuery>(async (query) => {
+    // TODO: Replace with real API call
+    // const result = await apiClient.search({
+    //   keyword: query?.keyword,
+    //   sort: query?.sort,
+    //   skip: query?.skip ?? 0,
+    //   take: query?.take ?? 20,
+    // });
+    // data.value = result.results ?? [];
+    // totalCount.value = result.totalCount ?? 0;
+  });
+
+  const { loading: deleteLoading, action: removeItems } = useAsync(async (ids?: string[]) => {
+    // TODO: Replace with real API call
+    // await Promise.all((ids ?? []).map((id) => apiClient.delete(id)));
+  });
+
+  const loading = useLoading(itemsLoading, deleteLoading);
+
+  return {
+    data,
+    loading,
+    totalCount,
+    getItems,
+    removeItems,
+  };
+}

package/dist/templates/module/pages/list.vue.ejs

@@ -6,26 +6,29 @@
     width="50%"
   >
     <VcDataTable
+      v-model:search-value="searchValue"
+      v-model:sort-field="sortField"
+      v-model:sort-order="sortOrder"
       :items="data"
       :total-count="totalCount"
-      :current-page="currentPage"
-      :search-value="searchQuery"
+      :pagination="{ currentPage, pages }"
+      :searchable="true"
       :state-key="'<%- ModuleNameScreamingSnake %>'"
-      @search:change="(val: string) => { searchQuery = val; getItems(); }"
-      @item-click="openDetails"
-      @pagination-click="(page: number) => { currentPage = page; getItems(); }"
+      @search="onSearch"
+      @row-click="onRowClick"
+      @pagination-click="onPaginationClick"
     >
       <!-- Add your columns here -->
-      <VcColumn id="name" :header="$t('<%- ModuleNameScreamingSnake %>.PAGES.LIST.COLUMNS.NAME')" sortable />
-      <VcColumn id="createdDate" :header="$t('<%- ModuleNameScreamingSnake %>.PAGES.LIST.COLUMNS.CREATED_DATE')" type="datetime" sortable />
+      <VcColumn id="name" :title="$t('<%- ModuleNameScreamingSnake %>.PAGES.LIST.COLUMNS.NAME')" sortable />
+      <VcColumn id="createdDate" :title="$t('<%- ModuleNameScreamingSnake %>.PAGES.LIST.COLUMNS.CREATED_DATE')" type="datetime" sortable />
     </VcDataTable>
   </VcBlade>
 </template>
 
 <script setup lang="ts">
-import { useBlade, type IBladeToolbar } from "@vc-shell/framework";
+import { useBlade, useDataTableSort, useTableQueryState, type IBladeToolbar } from "@vc-shell/framework";
 import { VcBlade, VcDataTable, VcColumn } from "@vc-shell/framework/ui";
-import { ref, onMounted } from "vue";
+import { computed, ref, watch } from "vue";
 import use<%- ModuleNamePascalCase %>List from "../composables/useList";
 import { useI18n } from "vue-i18n";
 
@@ -43,21 +46,75 @@ defineBlade({
 const { t } = useI18n({ useScope: "global" });
 const { openBlade, exposeToChildren } = useBlade();
 
-const {
-  data,
-  loading,
-  totalCount,
-  currentPage,
-  searchQuery,
-  getItems,
-} = use<%- ModuleNamePascalCase %>List();
+const PAGE_SIZE = 20;
+
+const { sortField, sortOrder, sortExpression } = useDataTableSort({
+  initialField: "createdDate",
+  initialDirection: "DESC",
+});
+
+const { data, loading, totalCount, getItems } = use<%- ModuleNamePascalCase %>List();
+
+const searchValue = ref<string>(); // live search box (v-model)
+const appliedKeyword = ref<string>(); // applied filter — drives the loader
+const currentPage = ref(1);
+
+const pages = computed(() => Math.ceil(totalCount.value / PAGE_SIZE) || 0);
+
+// Pull-restore: read the URL-persisted view state and seed our refs synchronously,
+// BEFORE the loader watch below — so a reload costs exactly one request.
+const restored = useTableQueryState("<%- ModuleNameScreamingSnake %>").read();
+if (restored.sort) {
+  const [field, direction] = restored.sort.split(":");
+  sortField.value = field;
+  sortOrder.value = direction === "DESC" ? -1 : 1;
+}
+if (restored.search !== undefined) {
+  searchValue.value = restored.search;
+  appliedKeyword.value = restored.search;
+}
+if (restored.page) {
+  currentPage.value = restored.page;
+}
+
+// Single loader — the ONLY trigger that calls the API. Vue batches synchronous
+// changes to several criteria into one flush → one request, even on restore.
+watch(
+  () => ({
+    sort: sortExpression.value,
+    keyword: appliedKeyword.value || undefined,
+    skip: (currentPage.value - 1) * PAGE_SIZE,
+    take: PAGE_SIZE,
+  }),
+  (query) => getItems(query),
+  { immediate: true },
+);
+
+// Handlers only update state — they never load. VcDataTable debounces @search, so
+// reacting to appliedKeyword coalesces fast typing into a single request.
+const onSearch = (keyword: string) => {
+  appliedKeyword.value = keyword;
+  currentPage.value = 1;
+};
+
+const onPaginationClick = (page: number) => {
+  currentPage.value = page;
+};
+
+const reload = () =>
+  getItems({
+    sort: sortExpression.value,
+    keyword: appliedKeyword.value || undefined,
+    skip: (currentPage.value - 1) * PAGE_SIZE,
+    take: PAGE_SIZE,
+  });
 
 const bladeToolbar = ref<IBladeToolbar[]>([
   {
     id: "refresh",
     title: t("<%- ModuleNameScreamingSnake %>.PAGES.LIST.TOOLBAR.REFRESH"),
     icon: "lucide-refresh-cw",
-    clickHandler: () => getItems(),
+    clickHandler: () => reload(),
   },
   {
     id: "add",
@@ -72,15 +129,14 @@ function openDetails(item?: { id?: string }) {
     name: "<%- ModuleNamePascalCase %>Details",
     param: item?.id,
     async onClose() {
-      await getItems();
+      await reload();
     },
   });
 }
 
-onMounted(async () => {
-  await getItems();
-})
-
+function onRowClick(event: { data: { id?: string } }) {
+  openDetails(event.data);
+}
 
-exposeToChildren({ reload: getItems });
+exposeToChildren({ reload });
 </script>

package/dist/templates/sample-module/pages/list.vue

@@ -7,6 +7,8 @@
     <!-- Blade contents -->
     <VcDataTable
       v-model:search-value="searchValue"
+      v-model:sort-field="sortField"
+      v-model:sort-order="sortOrder"
       v-model:active-item-id="selectedItemId"
       v-model:selection="selectedItems"
       :loading="loading"
@@ -73,8 +75,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, onMounted, watch } from "vue";
-import { IBladeToolbar, useBlade, usePopup, useTableSort, useFunctions } from "@vc-shell/framework";
+import { computed, ref, watch } from "vue";
+import { IBladeToolbar, useBlade, usePopup, useDataTableSort, useTableQueryState } from "@vc-shell/framework";
 import type { TableAction } from "@vc-shell/framework";
 import { VcColumn, VcDataTable, VcBlade } from "@vc-shell/framework/ui";
 import { useI18n } from "vue-i18n";
@@ -95,24 +97,44 @@ defineBlade({
 const { t } = useI18n({ useScope: "global" });
 const { param, openBlade, exposeToChildren } = useBlade();
 const { showConfirmation } = usePopup();
-const { debounce } = useFunctions();
 
-const { sortExpression } = useTableSort({
-  initialProperty: "createdDate",
+const PAGE_SIZE = 20;
+
+const { sortField, sortOrder, sortExpression } = useDataTableSort({
+  initialField: "createdDate",
   initialDirection: "DESC",
 });
 
-const { getItems, removeItems, data, loading, totalCount, pages, currentPage, searchQuery } = useList({
+const { getItems, removeItems, data, loading, totalCount, pages } = useList({
   sort: sortExpression.value,
-  pageSize: 20,
+  pageSize: PAGE_SIZE,
 });
 
-const searchValue = ref();
+const searchValue = ref<string>(); // live search box (v-model)
+const appliedKeyword = ref<string>(); // applied filter — drives the loader
+const currentPage = ref(1);
 const selectedItemId = ref<string>();
 const selectedItems = ref<MockedItem[]>([]);
 
 const selectedIds = computed(() => selectedItems.value.map((item) => item.id).filter(Boolean) as string[]);
 
+// Pull-restore: read the URL-persisted view state and seed our refs synchronously,
+// BEFORE the loader watch below — so a page reload costs exactly one request with
+// the full criteria, instead of several uncoordinated loads.
+const restored = useTableQueryState("SAMPLE_APP").read();
+if (restored.sort) {
+  const [field, direction] = restored.sort.split(":");
+  sortField.value = field;
+  sortOrder.value = direction === "DESC" ? -1 : 1;
+}
+if (restored.search !== undefined) {
+  searchValue.value = restored.search;
+  appliedKeyword.value = restored.search;
+}
+if (restored.page) {
+  currentPage.value = restored.page;
+}
+
 watch(
   param,
   (newVal) => {
@@ -121,34 +143,30 @@ watch(
   { immediate: true },
 );
 
-onMounted(async () => {
-  await getItems({
-    ...searchQuery.value,
+// Single loader — the ONLY place that calls the API. Vue batches synchronous changes
+// to several criteria into one flush, so sort + search + page changing together still
+// yields one request.
+watch(
+  () => ({
     sort: sortExpression.value,
-  });
-});
-
-watch(sortExpression, async (value) => {
-  await getItems({
-    ...searchQuery.value,
-    sort: value,
-  });
-});
+    keyword: appliedKeyword.value || undefined,
+    skip: (currentPage.value - 1) * PAGE_SIZE,
+  }),
+  (query) => getItems(query),
+  { immediate: true },
+);
 
-const onSearchList = debounce(async (keyword: string) => {
-  searchValue.value = keyword;
-  await getItems({
-    ...searchQuery.value,
-    keyword,
-  });
-}, 1000);
+// Handlers only update state — they never load. VcDataTable debounces @search, so
+// reacting to appliedKeyword coalesces fast typing into a single request.
+const onSearchList = (keyword: string) => {
+  appliedKeyword.value = keyword;
+  currentPage.value = 1;
+};
 
-const clearSearch = async () => {
+const clearSearch = () => {
   searchValue.value = "";
-  await getItems({
-    ...searchQuery.value,
-    keyword: "",
-  });
+  appliedKeyword.value = "";
+  currentPage.value = 1;
 };
 
 const addItem = () => {
@@ -157,11 +175,8 @@ const addItem = () => {
   });
 };
 
-const onPaginationClick = async (page: number) => {
-  await getItems({
-    ...searchQuery.value,
-    skip: (page - 1) * (searchQuery.value.take ?? 20),
-  });
+const onPaginationClick = (page: number) => {
+  currentPage.value = page;
 };
 
 const bladeToolbar = ref<IBladeToolbar[]>([
@@ -188,10 +203,12 @@ const title = computed(() => t("SAMPLE_APP.PAGES.LIST.TITLE"));
 
 const reload = async () => {
   selectedItems.value = [];
+  // Explicit user refresh — the criteria are unchanged, so the loader watch would
+  // not fire; reload calls the API directly with the current combined criteria.
   await getItems({
-    ...searchQuery.value,
-    skip: (currentPage.value - 1) * (searchQuery.value.take ?? 10),
     sort: sortExpression.value,
+    keyword: appliedKeyword.value || undefined,
+    skip: (currentPage.value - 1) * PAGE_SIZE,
   });
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vc-shell/create-vc-app",
   "description": "Application scaffolding",
-  "version": "2.0.10-pr240.41fca76",
+  "version": "2.0.10-pr242.2e7f6b3",
   "type": "module",
   "bin": "./dist/index.js",
   "files": [
@@ -16,7 +16,7 @@
   "devDependencies": {
     "@types/ejs": "^3.1.5",
     "@types/prompts": "^2.4.4",
-    "@vc-shell/ts-config": "2.0.10-pr240.41fca76",
+    "@vc-shell/ts-config": "2.0.10-pr242.2e7f6b3",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "shx": "^0.3.4",