@vc-shell/create-vc-app 1.1.99-alpha.1 → 1.2.0

package/dist/templates/blades/details/blade.vue

@@ -1,175 +0,0 @@
-<template>
-  <VcBlade
-    v-loading="loading"
-    :title="bladeTitle"
-    :toolbar-items="bladeToolbar"
-    :closable="closable"
-    :expanded="expanded"
-    :modified="isModified"
-    width="70%"
-    @close="$emit('close:blade')"
-    @expand="$emit('expand:blade')"
-    @collapse="$emit('collapse:blade')"
-  >
-    <VcContainer class="tw-p-2">
-      <VcRow class="tw-space-x-4">
-        <VcCol :size="6">
-          <!-- Main Form -->
-            <div class="tw-space-y-4">
-{{FORM_FIELDS}}
-            </div>
-        </VcCol>
-      </VcRow>
-    </VcContainer>
-  </VcBlade>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, watch } from "vue";
-import { useI18n } from "vue-i18n";
-import {
-  IBladeToolbar,
-  IParentCallArgs,
-  useBladeNavigation,
-  useBeforeUnload,
-  usePopup,{{GALLERY_IMPORTS}}
-} from "@vc-shell/framework";
-import { use{{EntityName}}Details } from "../composables";
-import { Field, useForm } from "vee-validate";
-import moment from "moment";
-
-// TODO: Replace with your actual types
-// Example: import { IProduct } from "@your-app/api/products";
-
-export interface Props {
-  expanded?: boolean;
-  closable?: boolean;
-  param?: string;
-  options?: Record<string, unknown>;
-}
-
-export interface Emits {
-  (event: "parent:call", args: IParentCallArgs): void;
-  (event: "close:blade"): void;
-  (event: "expand:blade"): void;
-  (event: "collapse:blade"): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  expanded: true,
-  closable: true,
-});
-
-const emit = defineEmits<Emits>();
-
-defineOptions({
-  name: "{{EntityName}}Details",
-  url: "/{{entity-name}}",
-});
-
-const { t } = useI18n({ useScope: "global" });
-const { onBeforeClose } = useBladeNavigation();
-const { showConfirmation, showInfo } = usePopup();
-const { meta } = useForm({ validateOnMount: false });
-
-const {
-  item,
-  loading,
-  load{{EntityName}},
-  save{{EntityName}},
-  delete{{EntityName}},
-  isModified,
-  resetModificationState,
-} = use{{EntityName}}Details();
-
-{{GALLERY_SCRIPT_ADDITIONS}}
-
-const bladeTitle = computed(() => {
-  return t("{{MODULE_NAME_UPPERCASE}}.PAGES.DETAILS.TITLE");
-});
-
-const createdDate = computed(() => {
-  const date = new Date(item.value?.createdDate ?? "");
-  return moment(date).format("L LT");
-});
-
-const bladeToolbar = computed((): IBladeToolbar[] => [
-  {
-    id: "save",
-    title: t("{{MODULE_NAME_UPPERCASE}}.PAGES.DETAILS.TOOLBAR.SAVE"),
-    icon: "material-save",
-    async clickHandler() {
-      if (meta.value.valid) {
-        const saved = await save{{EntityName}}(item.value);
-
-        if (!props.param && saved?.id) {
-          emit("parent:call", {
-            method: "onItemClick",
-            args: { id: saved.id },
-          });
-        }
-
-        resetModificationState();
-        emit("parent:call", { method: "reload" });
-
-        if (!props.param) {
-          emit("close:blade");
-        }
-      } else {
-        showInfo(t("{{MODULE_NAME_UPPERCASE}}.PAGES.ALERTS.NOT_VALID"));
-      }
-    },
-    disabled: computed(() => !(meta.value.valid && isModified.value)),
-  },
-  {
-    id: "delete",
-    title: t("{{MODULE_NAME_UPPERCASE}}.PAGES.DETAILS.TOOLBAR.DELETE"),
-    icon: "material-delete",
-    async clickHandler() {
-      if (
-        props.param &&
-        (await showConfirmation(t("{{MODULE_NAME_UPPERCASE}}.PAGES.ALERTS.DELETE")))
-      ) {
-        await delete{{EntityName}}(props.param);
-        emit("parent:call", { method: "reload" });
-        emit("close:blade");
-      }
-    },
-    isVisible: computed(() => !!props.param),
-  },
-]);
-
-watch(
-  () => props.param,
-  async (newParam) => {
-    if (newParam) {
-      await load{{EntityName}}(newParam);
-    }
-  },
-  { immediate: true, deep: true }
-);
-
-onMounted(async () => {
-  if (props.param) {
-    await load{{EntityName}}(props.param);
-  } else if (props.options?.item) {
-    item.value = props.options.item;
-    resetModificationState();
-  }
-});
-
-onBeforeClose(async () => {
-  if (isModified.value) {
-    return await showConfirmation(
-      t("{{MODULE_NAME_UPPERCASE}}.PAGES.ALERTS.CLOSE_CONFIRMATION")
-    );
-  }
-  return true;
-});
-
-useBeforeUnload(computed(() => isModified.value));
-
-defineExpose({
-  title: bladeTitle,
-});
-</script>

package/dist/templates/blades/grid/blade.vue

@@ -1,340 +0,0 @@
-<template>
-  <VcBlade
-    v-loading="loading"
-    :title="bladeTitle"
-    width="50%"
-    :expanded="expanded"
-    :closable="closable"
-    :toolbar-items="bladeToolbar"
-    @close="$emit('close:blade')"
-    @expand="$emit('expand:blade')"
-    @collapse="$emit('collapse:blade')"
-  >
-    <!-- @vue-generic {I{{EntityName}}} -->
-    <VcTable
-      :total-label="$t('{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TABLE.TOTALS')"
-      :items="items"
-      :selected-item-id="selectedItemId"
-      :search-value="searchValue"
-      :columns="tableColumns"
-      :sort="sortExpression"
-      :pages="pages"
-      :current-page="currentPage"
-      :total-count="totalCount"
-      :expanded="expanded"
-      :active-filter-count="activeFilterCount"
-      :empty="empty"
-      :notfound="notfound"
-      state-key="{{entity_name_plural}}_list"
-      :multiselect="false"
-      class="tw-grow tw-basis-0"
-      @item-click="onItemClick"
-      @header-click="onHeaderClick"
-      @pagination-click="onPaginationClick"
-      @search:change="onSearchList"
-      @scroll:ptr="reload"
-    >
-      <template #filters>
-        <div class="tw-p-4">
-          <VcRow class="tw-gap-16">
-            <div class="tw-flex tw-flex-col">
-              <!-- Status Filter -->
-              <h3 class="tw-text-sm tw-font-medium tw-mb-3">
-                {{ $t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TABLE.FILTER.STATUS.TITLE") }}
-              </h3>
-              <div class="tw-space-y-2">
-                <VcRadioButton
-                  v-for="status in statuses"
-                  :key="status.value"
-                  :model-value="stagedFilters.status[0] || ''"
-                  :value="status.value"
-                  :label="status.displayValue"
-                  @update:model-value="(value) => toggleFilter('status', String(value), true)"
-                >
-                </VcRadioButton>
-              </div>
-            </div>
-
-            <!-- Date Range Filter -->
-            <div class="tw-flex tw-flex-col">
-              <h3 class="tw-text-sm tw-font-medium tw-mb-3">
-                {{ $t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TABLE.FILTER.DATE.TITLE") }}
-              </h3>
-              <div class="tw-space-y-3">
-                <VcInput
-                  v-model="stagedFilters.startDate"
-                  type="date"
-                  :label="$t('{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TABLE.FILTER.DATE.START_DATE')"
-                  @update:model-value="(value) => toggleFilter('startDate', String(value || ''), true)"
-                />
-                <VcInput
-                  v-model="stagedFilters.endDate"
-                  type="date"
-                  :label="$t('{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TABLE.FILTER.DATE.END_DATE')"
-                  @update:model-value="(value) => toggleFilter('endDate', String(value || ''), true)"
-                />
-              </div>
-            </div>
-          </VcRow>
-
-          <!-- Filter Controls -->
-          <div class="tw-flex tw-gap-2 tw-mt-4">
-            <VcButton
-              variant="primary"
-              :disabled="!hasFilterChanges"
-              @click="applyFilters"
-            >
-              {{ $t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TABLE.FILTER.APPLY") }}
-            </VcButton>
-
-            <VcButton
-              variant="secondary"
-              :disabled="!hasFiltersApplied"
-              @click="resetFilters"
-            >
-              {{ $t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TABLE.FILTER.RESET") }}
-            </VcButton>
-          </div>
-        </div>
-      </template>
-
-      <!-- Override column template example -->
-      <template #item_name="itemData">
-        <div class="tw-truncate">
-          {{ itemData.item.name }}
-        </div>
-      </template>
-
-      <!-- Status column template example -->
-      <template #item_isActive="itemData">
-        <VcStatusIcon :status="itemData.item.isActive" />
-      </template>
-    </VcTable>
-  </VcBlade>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, onMounted, ref, watch, markRaw, Ref } from "vue";
-import {
-  IBladeToolbar,
-  IParentCallArgs,
-  useFunctions,
-  IActionBuilderResult,
-  ITableColumns,
-  useNotifications,
-  notification,
-  useBladeNavigation,
-  usePopup,
-  useTableSort,
-  useBlade,
-} from "@vc-shell/framework";
-import { use{{EntityName}}List } from "../composables";
-import {{EntityName}}Details from "./{{entity-name}}-details.vue";
-import { useI18n } from "vue-i18n";
-
-// TODO: Replace with your actual types
-// Example: import { IProduct } from "@your-app/api/products";
-
-export interface Props {
-  expanded?: boolean;
-  closable?: boolean;
-  param?: string;
-  options?: Record<string, unknown>;
-}
-
-export interface Emits {
-  (event: "parent:call", args: IParentCallArgs): void;
-  (event: "close:blade"): void;
-  (event: "collapse:blade"): void;
-  (event: "expand:blade"): void;
-}
-
-defineOptions({
-  name: "{{EntityName}}List",
-  url: "/{{entity-name-plural}}",
-  notifyType: "{{EntityName}}DeletedDomainEvent",
-  isWorkspace: {{isWorkspace}},
-  menuItem: {{menuItem}},
-});
-
-const props = withDefaults(defineProps<Props>(), {
-  expanded: true,
-  closable: true,
-});
-
-const emit = defineEmits<Emits>();
-const { openBlade, closeBlade } = useBladeNavigation();
-const { showConfirmation } = usePopup();
-const { t } = useI18n({ useScope: "global" });
-const { debounce } = useFunctions();
-
-const {
-  searchQuery,
-  items,
-  totalCount,
-  pages,
-  currentPage,
-  load{{EntityName}}s,
-  loading,
-  statuses,
-  // Filters
-  stagedFilters,
-  appliedFilters,
-  hasFilterChanges,
-  hasFiltersApplied,
-  activeFilterCount,
-  toggleFilter,
-  applyFilters,
-  resetFilters,
-  resetSearch,
-} = use{{EntityName}}List();
-
-const { markAsRead, setNotificationHandler } = useNotifications("{{EntityName}}DeletedDomainEvent");
-const { sortExpression, handleSortChange } = useTableSort({
-  initialProperty: "createdDate",
-  initialDirection: "DESC",
-});
-const blade = useBlade();
-
-const searchValue = ref();
-const selectedItemId = ref<string>();
-const isDesktop = inject<Ref<boolean>>("isDesktop");
-const bladeTitle = computed(() => t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TITLE"));
-
-setNotificationHandler((message) => {
-  if (message.title) {
-    notification.success(message.title, {
-      onClose() {
-        markAsRead(message);
-      },
-    });
-  }
-});
-
-watch(sortExpression, async (value) => {
-  await load{{EntityName}}s({ ...searchQuery.value, sort: value });
-});
-
-watch(
-  () => props.param,
-  (newVal) => {
-    if (newVal) {
-      selectedItemId.value = newVal;
-    }
-  },
-  { immediate: true, deep: true },
-);
-
-onMounted(async () => {
-  await load{{EntityName}}s({ ...searchQuery.value, sort: sortExpression.value });
-});
-
-const reload = async () => {
-  await load{{EntityName}}s({
-    ...searchQuery.value,
-    skip: (currentPage.value - 1) * (searchQuery.value.take ?? 20),
-    sort: sortExpression.value,
-  });
-  emit("parent:call", { method: "reload" });
-};
-
-const onSearchList = debounce(async (keyword: string) => {
-  searchValue.value = keyword;
-  await load{{EntityName}}s({
-    ...searchQuery.value,
-    keyword,
-  });
-}, 1000);
-
-const bladeToolbar = ref<IBladeToolbar[]>([
-  {
-    id: "refresh",
-    title: computed(() => t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TOOLBAR.REFRESH")),
-    icon: "material-refresh",
-    async clickHandler() {
-      await reload();
-    },
-  },
-  {
-    id: "add",
-    title: computed(() => t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TOOLBAR.ADD")),
-    icon: "material-add",
-    clickHandler() {
-      add{{EntityName}}();
-    },
-  },
-]);
-
-const tableColumns = ref<ITableColumns[]>([
-  {
-    id: "name",
-    field: "name",
-    title: computed(() => t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TABLE.HEADER.NAME")),
-    sortable: true,
-    alwaysVisible: true,
-    mobilePosition: "top-left",
-  },
-  {
-    id: "createdDate",
-    title: computed(() => t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TABLE.HEADER.CREATED_DATE")),
-    sortable: true,
-    type: "date-ago",
-    mobilePosition: "bottom-right",
-  },
-]);
-
-const empty = {
-  icon: "material-list",
-  text: computed(() => t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.EMPTY.NO_ITEMS")),
-  action: computed(() => t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.EMPTY.ADD")),
-  clickHandler: () => {
-    add{{EntityName}}();
-  },
-};
-
-const notfound = {
-  icon: "material-list",
-  text: computed(() => t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.NOT_FOUND.EMPTY")),
-  action: computed(() => t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.NOT_FOUND.RESET")),
-  clickHandler: async () => {
-    searchValue.value = "";
-    await resetSearch();
-  },
-};
-
-const onItemClick = (item: { id?: string }) => {
-  openBlade({
-    blade: markRaw({{EntityName}}Details),
-    param: item.id,
-    onOpen() {
-      selectedItemId.value = item.id;
-    },
-    onClose() {
-      selectedItemId.value = undefined;
-    },
-  });
-};
-
-const onHeaderClick = (item: ITableColumns) => {
-  handleSortChange(item.id);
-};
-
-const add{{EntityName}} = () => {
-  openBlade({
-    blade: markRaw({{EntityName}}Details),
-  });
-};
-
-const onPaginationClick = async (page: number) => {
-  await load{{EntityName}}s({
-    ...searchQuery.value,
-    skip: (page - 1) * (searchQuery.value.take ?? 20),
-  });
-};
-
-defineExpose({
-  title: bladeTitle,
-  reload,
-  onItemClick,
-});
-</script>

package/dist/templates/composables/details-composable.ts

@@ -1,101 +0,0 @@
-import { computed, ref, ComputedRef, Ref, reactive } from "vue";
-import { useAsync, useApiClient, useModificationTracker, useLoading } from "@vc-shell/framework";
-
-// TODO: Replace with your actual API client imports
-// Example: import { ProductsClient, IProduct } from "@your-app/api/products";
-
-// @ts-expect-error - Replace with your API types
-interface I{{EntityName}} {
-  id?: string;
-  name?: string;
-  createdDate?: string;
-  [key: string]: any;
-}
-
-// @ts-expect-error - Replace with your API client
-class {{EntityName}}Client {
-  // TODO: Replace these mock methods with your actual API client methods
-  async get{{EntityName}}ById(id: string): Promise<I{{EntityName}}> {
-    throw new Error("Method not implemented. Replace with your actual API method.");
-  }
-  
-  async update{{EntityName}}(data: I{{EntityName}}): Promise<I{{EntityName}}> {
-    throw new Error("Method not implemented. Replace with your actual API method.");
-  }
-  
-  async create{{EntityName}}(data: I{{EntityName}}): Promise<I{{EntityName}}> {
-    throw new Error("Method not implemented. Replace with your actual API method.");
-  }
-  
-  async delete{{EntityName}}(id: string): Promise<void> {
-    throw new Error("Method not implemented. Replace with your actual API method.");
-  }
-}
-
-export interface IUse{{EntityName}}Details {
-  item: Ref<I{{EntityName}}>;
-  loading: ComputedRef<boolean>;
-  load{{EntityName}}: (id: string) => Promise<void>;
-  save{{EntityName}}: (data?: I{{EntityName}}) => Promise<I{{EntityName}} | undefined>;
-  delete{{EntityName}}: (id: string) => Promise<void>;
-
-  // Modification tracking
-  isModified: Readonly<Ref<boolean>>;
-  resetModificationState: () => void;
-}
-
-export function use{{EntityName}}Details(): IUse{{EntityName}}Details {
-  const { getApiClient } = useApiClient({{EntityName}}Client);
-
-  const item = ref<I{{EntityName}}>(reactive({} as I{{EntityName}}));
-
-  // Use modification tracker - КАК В useOrderDetailsNew.ts
-  const { currentValue, isModified, resetModificationState } = useModificationTracker(item);
-
-  const { action: load{{EntityName}}, loading: loading{{EntityName}} } = useAsync<string>(async (id) => {
-    if (id) {
-      const apiClient = await getApiClient();
-      const data = await apiClient.get{{EntityName}}ById(id);
-
-      currentValue.value = reactive(data);
-      resetModificationState();
-    }
-  });
-
-  const { action: save{{EntityName}}, loading: saving{{EntityName}} } = useAsync<I{{EntityName}} | undefined, I{{EntityName}} | undefined>(
-    async (data) => {
-      if (!data) return;
-
-      const apiClient = await getApiClient();
-      let result: I{{EntityName}};
-
-      if (data.id) {
-        result = await apiClient.update{{EntityName}}(data);
-      } else {
-        result = await apiClient.create{{EntityName}}(data);
-      }
-
-      if (result) {
-        currentValue.value = reactive(result);
-        resetModificationState();
-      }
-
-      return result;
-    }
-  );
-
-  const { action: delete{{EntityName}}, loading: deleting{{EntityName}} } = useAsync<string>(async (id) => {
-    const apiClient = await getApiClient();
-    await apiClient.delete{{EntityName}}(id);
-  });
-
-  return {
-    item: currentValue, // ВАЖНО: возвращаем currentValue, а не item
-    loading: useLoading(loading{{EntityName}}, saving{{EntityName}}, deleting{{EntityName}}),
-    load{{EntityName}},
-    save{{EntityName}},
-    delete{{EntityName}},
-    isModified,
-    resetModificationState,
-  };
-}