@vc-shell/create-vc-app 1.0.203 → 1.0.205

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

@@ -0,0 +1,267 @@
+<template>
+  <VcBlade
+    :title="$t('SAMPLE_APP.PAGES.LIST.TITLE')"
+    width="50%"
+    :expanded="expanded"
+    :closable="closable"
+    :toolbar-items="bladeToolbar"
+    @close="$emit('close:blade')"
+    @expand="$emit('expand:blade')"
+    @collapse="$emit('collapse:blade')"
+  >
+    <!-- Blade contents -->
+    <VcTable
+      :expanded="expanded"
+      class="tw-grow tw-basis-0"
+      multiselect
+      :loading="loading"
+      :columns="columns"
+      :sort="sort"
+      :pages="pages"
+      :total-count="totalCount"
+      :search-value="searchValue"
+      :current-page="currentPage"
+      :search-placeholder="$t('SAMPLE_APP.PAGES.LIST.SEARCH.PLACEHOLDER')"
+      :total-label="$t('SAMPLE_APP.PAGES.LIST.TABLE.TOTALS')"
+      :selected-item-id="selectedItemId"
+      state-key="SAMPLE_APP"
+      :items="data"
+      :item-action-builder="actionBuilder"
+      enable-item-actions
+      @item-click="onItemClick"
+      @header-click="onHeaderClick"
+      @selection-changed="onSelectionChanged"
+    >
+    </VcTable>
+  </VcBlade>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, markRaw, onMounted, watch } from "vue";
+import {
+  IActionBuilderResult,
+  IBladeEvent,
+  IBladeToolbar,
+  IParentCallArgs,
+  ITableColumns,
+  useBladeNavigation,
+  usePopup,
+} from "@vc-shell/framework";
+import { useI18n } from "vue-i18n";
+import { useList } from "./../composables";
+import Details from "./details.vue";
+import { MockedItem } from "../sample-data";
+
+export interface Props {
+  expanded?: boolean;
+  closable?: boolean;
+  param?: string;
+  options?: Record<string, unknown>;
+}
+
+export interface Emits {
+  (event: "parent:call", args: IParentCallArgs): void;
+  (event: "collapse:blade"): void;
+  (event: "expand:blade"): void;
+  (event: "open:blade", blade: IBladeEvent): void;
+  (event: "close:blade"): void;
+}
+
+defineOptions({
+  url: "/sample-list",
+  name: "SampleList",
+  isWorkspace: true,
+  menuItem: {
+    title: "SAMPLE_APP.MENU.TITLE",
+    icon: "fas fa-file-alt",
+    priority: 1,
+  },
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  expanded: true,
+  closable: true,
+});
+
+defineEmits<Emits>();
+
+const { t } = useI18n({ useScope: "global" });
+const { openBlade } = useBladeNavigation();
+const { showConfirmation } = usePopup();
+const { getItems, removeItems, data, loading, totalCount, pages, currentPage } = useList();
+
+const sort = ref("createdDate:DESC");
+const searchValue = ref();
+const selectedItemId = ref<string>();
+const selectedIds = ref<string[]>([]);
+const query = ref();
+
+watch(
+  () => props.param,
+  (newVal) => {
+    if (newVal) {
+      selectedItemId.value = newVal;
+
+      openBlade({
+        blade: markRaw(Details),
+        param: newVal,
+        onOpen() {
+          selectedItemId.value = newVal;
+        },
+        onClose() {
+          selectedItemId.value = undefined;
+        },
+      });
+    }
+  },
+  { immediate: true },
+);
+
+onMounted(async () => {
+  await reload();
+});
+
+const bladeToolbar = ref<IBladeToolbar[]>([
+  {
+    id: "refresh",
+    title: computed(() => t("SAMPLE_APP.PAGES.LIST.TOOLBAR.REFRESH")),
+    icon: "fas fa-sync-alt",
+    async clickHandler() {
+      await reload();
+    },
+  },
+  {
+    id: "remove",
+    icon: "fas fa-trash",
+    title: computed(() => t("SAMPLE_APP.PAGES.LIST.TOOLBAR.REMOVE")),
+    async clickHandler() {
+      await remove(selectedIds.value);
+    },
+    disabled: computed(() => selectedIds.value.length === 0),
+  },
+]);
+
+const columns = ref<ITableColumns[]>([
+  {
+    id: "imgSrc",
+    title: computed(() => t("SAMPLE_APP.PAGES.LIST.TABLE.HEADER.IMAGE")),
+    type: "image",
+    width: "70px",
+  },
+  {
+    id: "name",
+    title: computed(() => t("SAMPLE_APP.PAGES.LIST.TABLE.HEADER.PRODUCT_NAME")),
+    alwaysVisible: true,
+  },
+  {
+    id: "description",
+    title: computed(() => t("SAMPLE_APP.PAGES.LIST.TABLE.HEADER.DESCRIPTION")),
+  },
+  {
+    id: "price",
+    title: computed(() => t("SAMPLE_APP.PAGES.LIST.TABLE.HEADER.PRICE")),
+    type: "money",
+    alwaysVisible: true,
+  },
+  {
+    id: "salePrice",
+    title: computed(() => t("SAMPLE_APP.PAGES.LIST.TABLE.HEADER.SALE_PRICE")),
+    type: "money",
+  },
+  {
+    id: "currency.name",
+    title: computed(() => t("SAMPLE_APP.PAGES.LIST.TABLE.HEADER.CURRENCY")),
+  },
+]);
+
+const title = computed(() => t("SAMPLE_APP.PAGES.LIST.HEADER.TITLE"));
+
+const reload = async () => {
+  await getItems(query.value);
+};
+
+const onItemClick = (item: { id: string }) => {
+  openBlade({
+    blade: markRaw(Details),
+    param: item.id,
+    onOpen() {
+      selectedItemId.value = item.id;
+    },
+    onClose() {
+      selectedItemId.value = undefined;
+    },
+  });
+};
+
+const onHeaderClick = (item: ITableColumns) => {
+  const sortOptions = ["DESC", "ASC", ""];
+
+  if (item.sortable) {
+    if (sort.value.split(":")[0] === item.id) {
+      const index = sortOptions.findIndex((x) => {
+        const sorting = sort.value.split(":")[1];
+        if (sorting) {
+          return x === sorting;
+        } else {
+          return x === "";
+        }
+      });
+
+      if (index !== -1) {
+        const newSort = sortOptions[(index + 1) % sortOptions.length];
+
+        if (newSort === "") {
+          sort.value = `${item.id}`;
+        } else {
+          sort.value = `${item.id}:${newSort}`;
+        }
+      }
+    } else {
+      sort.value = `${item.id}:${sortOptions[0]}`;
+    }
+  }
+};
+
+const onSelectionChanged = (items: MockedItem[]) => {
+  selectedIds.value = items.map((item) => item.id!);
+};
+
+const actionBuilder = (): IActionBuilderResult[] => {
+  const result: IActionBuilderResult[] = [];
+  result.push({
+    icon: "fas fa-trash",
+    title: computed(() => t("SAMPLE_APP.PAGES.LIST.TABLE.ACTIONS.DELETE")),
+    type: "danger",
+    position: "left",
+    clickHandler(item: MockedItem) {
+      if (item.id) {
+        if (!selectedIds.value.includes(item.id)) {
+          selectedIds.value.push(item.id);
+        }
+        remove(selectedIds.value);
+        selectedIds.value = [];
+      }
+    },
+  });
+
+  return result;
+};
+
+async function remove(ids: string[]) {
+  if (
+    await showConfirmation(
+      t(`SAMPLE_APP.PAGES.ALERTS.DELETE_SELECTED_CONFIRMATION.MESSAGE`, {
+        count: selectedIds.value.length,
+      }),
+    )
+  ) {
+    await removeItems({ ids });
+    await reload();
+  }
+}
+
+defineExpose({
+  title,
+  reload,
+});
+</script>

package/dist/templates/sample/dynamic-module/composables/index.ts

@@ -0,0 +1,2 @@
+export { default as useList } from "./useList";
+export { default as useDetails } from "./useDetails";

package/dist/templates/sample/dynamic-module/composables/useDetails/index.ts

@@ -0,0 +1,49 @@
+import { computed, ref, Ref } from "vue";
+import { DetailsBaseBladeScope, DynamicBladeForm, UseDetails, useDetailsFactory } from "@vc-shell/framework";
+import { addNewMockItem, loadMockItem, removeMockItem, updateMockItem } from "../../sample-data/methods";
+import { currencyOptions, MockedItem } from "../../sample-data";
+import { useI18n } from "vue-i18n";
+
+export interface DynamicItemScope extends DetailsBaseBladeScope {
+  currencyOptions: typeof currencyOptions;
+}
+
+export default (args: {
+  props: InstanceType<typeof DynamicBladeForm>["$props"];
+  emit: InstanceType<typeof DynamicBladeForm>["$emit"];
+  mounted: Ref<boolean>;
+}): UseDetails<MockedItem, DynamicItemScope> => {
+  const factory = useDetailsFactory<MockedItem>({
+    load: loadMockItem,
+    saveChanges: (details) => {
+      return details.id ? updateMockItem(details) : addNewMockItem(details);
+    },
+    remove: removeMockItem,
+  });
+
+  const { load, saveChanges, remove, loading, item, validationState } = factory();
+
+  const scope = ref<DynamicItemScope>({
+    currencyOptions,
+  });
+  const { t } = useI18n({ useScope: "global" });
+
+  const bladeTitle = computed(() => {
+    return args.props.param
+      ? item.value?.name
+        ? item.value?.name + t("SAMPLE_APP.PAGES.DETAILS.TITLE.DETAILS")
+        : t("SAMPLE_APP.PAGES.DETAILS.TITLE.LOADING")
+      : "Test App" + t("SAMPLE_APP.PAGES.DETAILS.TITLE.DETAILS");
+  });
+
+  return {
+    load,
+    saveChanges,
+    remove,
+    loading,
+    item,
+    validationState,
+    bladeTitle,
+    scope: computed(() => scope.value),
+  };
+};

package/dist/templates/sample/dynamic-module/composables/useList/index.ts

@@ -0,0 +1,54 @@
+import { computed, ref, Ref } from "vue";
+import {
+  DynamicBladeList,
+  ListBaseBladeScope,
+  useBladeNavigation,
+  useListFactory,
+  type TOpenBladeArgs,
+  UseList,
+} from "@vc-shell/framework";
+import { loadMockItemsList, removeMockItem } from "../../sample-data/methods";
+import { MockedItem, MockedQuery } from "../../sample-data";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface DynamicItemsScope extends ListBaseBladeScope {}
+
+export default (args: {
+  props: InstanceType<typeof DynamicBladeList>["$props"];
+  emit: InstanceType<typeof DynamicBladeList>["$emit"];
+  mounted: Ref<boolean>;
+}): UseList<MockedItem[], MockedQuery, DynamicItemsScope> => {
+  const factory = useListFactory<MockedItem[], MockedQuery>({
+    load: loadMockItemsList,
+    remove: async (query, customQuery) => {
+      if (customQuery?.ids === null) return;
+      for (const id of customQuery.ids) {
+        await removeMockItem({ id });
+      }
+    },
+  });
+
+  const { load, remove, items, pagination, loading, query } = factory();
+  const { openBlade, resolveBladeByName } = useBladeNavigation();
+
+  async function openDetailsBlade(data?: TOpenBladeArgs) {
+    await openBlade({
+      blade: resolveBladeByName("SampleDetails"),
+      ...data,
+    });
+  }
+
+  const scope = ref<DynamicItemsScope>({
+    openDetailsBlade,
+  });
+
+  return {
+    items,
+    load,
+    remove,
+    loading,
+    pagination,
+    query,
+    scope: computed(() => scope.value),
+  };
+};

package/dist/templates/sample/dynamic-module/index.ts

@@ -0,0 +1,8 @@
+import * as schema from "./pages";
+import * as locales from "./locales";
+import * as composables from "./composables";
+import { createDynamicAppModule } from "@vc-shell/framework";
+
+export default createDynamicAppModule({ schema, locales, composables });
+
+export { schema, composables, locales };

package/dist/templates/sample/dynamic-module/locales/en.json

@@ -0,0 +1,69 @@
+{
+  "SAMPLE_APP": {
+    "MENU": {
+      "TITLE": "Sample"
+    },
+    "PAGES": {
+      "LIST": {
+        "TOOLBAR": {
+          "REFRESH": "Refresh",
+          "REMOVE": "Remove"
+        },
+        "SEARCH": {
+          "PLACEHOLDER": "Search keywords"
+        },
+        "TABLE": {
+          "TOTALS": "Count:",
+          "HEADER": {
+            "IMAGE": "Image",
+            "PRODUCT_NAME": "Product name",
+            "DESCRIPTION": "Description",
+            "PRICE": "Price",
+            "SALE_PRICE": "Sale price",
+            "CURRENCY": "Currency"
+          },
+          "EMPTY": {
+            "TITLE": "There are no content yet",
+            "ACTION": "Add content"
+          },
+          "NOT_FOUND": {
+            "TITLE": "No content found.",
+            "ACTION": "Reset search"
+          },
+          "ACTIONS": {
+            "DELETE": "Delete"
+          }
+        },
+        "EMPTY": {
+          "NO_ITEMS": "There are no items yet"
+        }
+      },
+      "DETAILS": {
+        "TITLE": {
+          "DETAILS": " details",
+          "LOADING": "Loading..."
+        },
+        "TOOLBAR": {
+          "SAVE": "Save",
+          "DELETE": "Delete"
+        },
+        "FIELDS": {
+          "NAME": "Name",
+          "CONTENT": "Content",
+          "GUID": "GUID",
+          "DESCRIPTION": "Description",
+          "PRICE": "Price",
+          "SALE_PRICE": "Sale price"
+        }
+      },
+      "ALERTS": {
+        "CLOSE_CONFIRMATION": "You have unsaved changes. Close anyway?",
+        "DELETE": "Are you sure you want to delete this item?",
+        "DELETE_SELECTED_CONFIRMATION": {
+          "MESSAGE": "Are you sure you want to delete {count} selected items?",
+          "ALL": "all {totalCount}"
+        }
+      }
+    }
+  }
+}

package/dist/templates/sample/dynamic-module/locales/index.ts

@@ -0,0 +1,2 @@
+import * as en from "./en.json";
+export { en };

package/dist/templates/sample/dynamic-module/pages/details.ts

@@ -0,0 +1,100 @@
+import { DynamicDetailsSchema } from "@vc-shell/framework";
+
+export const details: DynamicDetailsSchema = {
+  settings: {
+    url: "/sample-details",
+    id: "SampleDetails",
+    localizationPrefix: "SAMPLE_APP",
+    composable: "useDetails",
+    component: "DynamicBladeForm",
+    toolbar: [
+      {
+        id: "save",
+        icon: "fas fa-save",
+        title: "SAMPLE_APP.PAGES.DETAILS.TOOLBAR.SAVE",
+        method: "saveChanges",
+      },
+      {
+        id: "delete",
+        icon: "fas fa-trash",
+        title: "SAMPLE_APP.PAGES.DETAILS.TOOLBAR.DELETE",
+        method: "remove",
+      },
+    ],
+  },
+  content: [
+    {
+      id: "dynamicItemForm",
+      component: "vc-form",
+      children: [
+        {
+          id: "name",
+          component: "vc-input",
+          label: "SAMPLE_APP.PAGES.DETAILS.FIELDS.NAME",
+          rules: { required: true },
+          property: "name",
+        },
+        {
+          id: "contentCard",
+          component: "vc-card",
+          label: "SAMPLE_APP.PAGES.DETAILS.FIELDS.CONTENT",
+          fields: [
+            {
+              id: "guid",
+              component: "vc-input",
+              label: "SAMPLE_APP.PAGES.DETAILS.FIELDS.GUID",
+              property: "guid",
+              rules: {
+                required: true,
+                regex: /[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/,
+              },
+            },
+            {
+              id: "description",
+              component: "vc-textarea",
+              label: "SAMPLE_APP.PAGES.DETAILS.FIELDS.DESCRIPTION",
+              property: "description",
+              rules: { required: true },
+            },
+          ],
+        },
+        {
+          id: "prices",
+          component: "vc-card",
+          label: "SAMPLE_APP.PAGES.DETAILS.FIELDS.PRICE",
+          fields: [
+            {
+              id: "price-fieldset",
+              component: "vc-fieldset",
+              columns: 2,
+              fields: [
+                {
+                  id: "price",
+                  component: "vc-input-currency",
+                  label: "SAMPLE_APP.PAGES.DETAILS.FIELDS.PRICE",
+                  property: "price",
+                  rules: { required: true },
+                  options: "currencyOptions",
+                  optionProperty: "currency.name",
+                  optionValue: "value",
+                  optionLabel: "label",
+                },
+                {
+                  id: "salePrice",
+                  component: "vc-input-currency",
+                  label: "SAMPLE_APP.PAGES.DETAILS.FIELDS.SALE_PRICE",
+                  property: "salePrice",
+                  rules: { required: true },
+                  options: "currencyOptions",
+                  optionProperty: "currency.name",
+                  optionValue: "value",
+                  optionLabel: "label",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};

package/dist/templates/sample/dynamic-module/pages/index.ts

@@ -0,0 +1,4 @@
+import { grid as testAppList } from "./list";
+import { details as testAppDetails } from "./details";
+
+export { testAppList, testAppDetails };

package/dist/templates/sample/dynamic-module/pages/list.ts

@@ -0,0 +1,81 @@
+import { DynamicGridSchema } from "@vc-shell/framework";
+
+export const grid: DynamicGridSchema = {
+  settings: {
+    url: "/sample-list",
+    id: "SampleList",
+    titleTemplate: "Sample list",
+    localizationPrefix: "SAMPLE_APP",
+    isWorkspace: true,
+    composable: "useList",
+    component: "DynamicBladeList",
+    toolbar: [
+      {
+        id: "refresh",
+        icon: "fas fa-sync-alt",
+        title: "SAMPLE_APP.PAGES.LIST.TOOLBAR.REFRESH",
+        method: "refresh",
+      },
+      {
+        id: "remove",
+        icon: "fas fa-trash",
+        title: "SAMPLE_APP.PAGES.LIST.TOOLBAR.REMOVE",
+        method: "removeItems",
+      },
+    ],
+    menuItem: {
+      title: "SAMPLE_APP.MENU.TITLE",
+      icon: "fas fa-file-alt",
+      priority: 1,
+    },
+  },
+  content: [
+    {
+      id: "itemsGrid",
+      component: "vc-table",
+      multiselect: true,
+      actions: [
+        {
+          id: "delete",
+          icon: "fas fa-trash",
+          title: "SAMPLE_APP.PAGES.LIST.TABLE.ACTIONS.DELETE",
+          method: "removeItems",
+          position: "left",
+          type: "danger",
+        },
+      ],
+      columns: [
+        {
+          id: "imgSrc",
+          title: "SAMPLE_APP.PAGES.LIST.TABLE.HEADER.IMAGE",
+          type: "image",
+          width: "70px",
+        },
+        {
+          id: "name",
+          title: "SAMPLE_APP.PAGES.LIST.TABLE.HEADER.PRODUCT_NAME",
+          alwaysVisible: true,
+        },
+        {
+          id: "description",
+          title: "SAMPLE_APP.PAGES.LIST.TABLE.HEADER.DESCRIPTION",
+        },
+        {
+          id: "price",
+          title: "SAMPLE_APP.PAGES.LIST.TABLE.HEADER.PRICE",
+          type: "money",
+          alwaysVisible: true,
+        },
+        {
+          id: "salePrice",
+          title: "SAMPLE_APP.PAGES.LIST.TABLE.HEADER.SALE_PRICE",
+          type: "money",
+        },
+        {
+          id: "currency.name",
+          title: "SAMPLE_APP.PAGES.LIST.TABLE.HEADER.CURRENCY",
+        },
+      ],
+    },
+  ],
+};

package/dist/templates/sample/overrides/main.ts

@@ -0,0 +1,53 @@
+import VirtoShellFramework, { notification, useUser, useLanguages } from "@vc-shell/framework";
+import { createApp } from "vue";
+import { router } from "./router";
+import * as locales from "./locales";
+import { RouterView } from "vue-router";
+import {{ModuleNamePascalCase}} from "./modules/{{ModuleName}}";
+import SampleModule from "./modules/sample";
+
+// Load required CSS
+import "./styles/index.scss";
+import "@fortawesome/fontawesome-free/css/all.min.css";
+import "roboto-fontface/css/roboto/roboto-fontface.css";
+import "@vc-shell/framework/dist/index.css";
+
+async function startApp() {
+  const { loadUser } = useUser();
+  await loadUser();
+
+  const { currentLocale, setLocale } = useLanguages();
+
+  const app = createApp(RouterView)
+    .use(VirtoShellFramework, {
+      router,
+      platformUrl: import.meta.env.APP_PLATFORM_URL,
+      i18n: {
+        locale: import.meta.env.APP_I18N_LOCALE,
+        fallbackLocale: import.meta.env.APP_I18N_FALLBACK_LOCALE,
+      },
+    })
+    // {{ModuleNamePascalCase}} module initialization
+    .use({{ModuleNamePascalCase}}, { router })
+    // Sample module initialization
+    .use(SampleModule, { router })
+    .use(router);
+
+  Object.entries(locales).forEach(([key, message]) => {
+    app.config.globalProperties.$mergeLocaleMessage(key, message);
+  });
+
+  setLocale(currentLocale.value);
+
+  app.config.errorHandler = (err) => {
+    notification.error((err as Error).toString(), {
+      timeout: 5000,
+    });
+  };
+
+  await router.isReady();
+
+  app.mount("#app");
+}
+
+startApp();