@vc-shell/create-vc-app 1.0.113 → 1.0.115

package/dist/templates/variants/both/src/modules/dynamic-module/components/DynamicItemsMobileGridView.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="tw-border-b tw-border-solid tw-border-b-[#e3e7ec] tw-py-3 tw-px-4">
+    <div class="tw-w-full tw-flex tw-justify-evenly tw-mb-2">
+      <VcImage
+        class="tw-shrink-0"
+        aspect="1x1"
+        size="s"
+        :bordered="true"
+        :src="context.item.imgSrc"
+      ></VcImage>
+      <div class="tw-grow tw-basis-0 tw-ml-3">
+        <div class="tw-font-bold tw-text-lg">
+          {{ context.item.name }}
+        </div>
+      </div>
+    </div>
+    <div class="tw-truncate tw-grow-[2] tw-basis-0">
+      <VcHint>{{ $t("DYNAMICMODULE.PAGES.LIST.MOBILE.CREATED") }}</VcHint>
+      <div class="tw-truncate tw-mt-1">
+        {{ context.item.createdDate }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  context: {
+    item: {
+      imgSrc: string;
+      name: string;
+      createdDate: Date;
+      id: string;
+    };
+  };
+}
+
+defineProps<Props>();
+</script>

package/dist/templates/variants/both/src/modules/dynamic-module/components/index.ts

@@ -0,0 +1,3 @@
+import DynamicItemsMobileGridView from "./DynamicItemsMobileGridView.vue";
+
+export { DynamicItemsMobileGridView };

package/dist/templates/variants/both/src/modules/dynamic-module/composables/index.ts

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

package/dist/templates/variants/both/src/modules/dynamic-module/composables/useDetails/index.ts

@@ -0,0 +1,92 @@
+/* eslint-disable import/no-unresolved */
+import { computed, ref } from "vue";
+import img1 from "/assets/1.jpeg";
+import img2 from "/assets/2.jpg";
+import img3 from "/assets/3.jpg";
+import {
+  DetailsBaseBladeScope,
+  DynamicBladeForm,
+  IBladeToolbar,
+  useDetailsFactory,
+} from "@vc-shell/framework";
+
+export interface DynamicItemScope extends DetailsBaseBladeScope {
+  toolbarOverrides: {
+    refresh: IBladeToolbar;
+  };
+}
+
+export default (args: {
+  props: InstanceType<typeof DynamicBladeForm>["$props"];
+  emit: InstanceType<typeof DynamicBladeForm>["$emit"];
+}) => {
+  const factory = useDetailsFactory<{ imgSrc: string; name: string; createdDate: Date; id: string }>({
+    load: async (payload) => {
+      return await new Promise((resolve) => {
+        setTimeout(() => {
+          const findMockedItem = [
+            {
+              imgSrc: img1,
+              name: "Item 1",
+              createdDate: new Date(),
+              id: "item-id-1",
+            },
+            {
+              imgSrc: img2,
+              name: "Item 2",
+              createdDate: new Date(),
+              id: "item-id-2",
+            },
+            {
+              imgSrc: img3,
+              name: "Item 3",
+              createdDate: new Date(),
+              id: "item-id-3",
+            },
+          ].find((x) => x.id === payload.id);
+          resolve(findMockedItem);
+        }, 1000);
+      });
+    },
+    saveChanges: () => {
+      throw new Error("Function not implemented.");
+    },
+    remove: () => {
+      throw new Error("Function not implemented.");
+    },
+  });
+
+  const { load, saveChanges, remove, loading, item, validationState } = factory();
+
+  // const item = ref({
+  //   imgSrc: undefined,
+  //   name: undefined,
+  //   createdDate: undefined,
+  //   id: undefined,
+  // });
+
+  const scope = ref<DynamicItemScope>({
+    toolbarOverrides: {
+      refresh: {
+        async clickHandler() {
+          await load({ id: args.props.param });
+        },
+      },
+    },
+  });
+
+  const bladeTitle = computed(() => {
+    return args.props.param ? item.value?.name : "Dynamic item details";
+  });
+
+  return {
+    load,
+    saveChanges,
+    remove,
+    loading,
+    item,
+    validationState,
+    bladeTitle,
+    scope: computed(() => scope.value),
+  };
+};

package/dist/templates/variants/both/src/modules/dynamic-module/composables/useList/index.ts

@@ -0,0 +1,70 @@
+/* eslint-disable import/no-unresolved */
+import { computed, ref } from "vue";
+import img1 from "/assets/1.jpeg";
+import img2 from "/assets/2.jpg";
+import img3 from "/assets/3.jpg";
+import { DynamicBladeList, ListBaseBladeScope, useBladeNavigation, useListFactory } from "@vc-shell/framework";
+
+// 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"];
+}) => {
+  const factory = useListFactory({
+    load: async () => {
+      return await new Promise((resolve) => {
+        setTimeout(
+          () =>
+            resolve([
+              {
+                imgSrc: img1,
+                name: "Item 1",
+                createdDate: new Date(),
+                id: "item-id-1",
+              },
+              {
+                imgSrc: img2,
+                name: "Item 2",
+                createdDate: new Date(),
+                id: "item-id-2",
+              },
+              {
+                imgSrc: img3,
+                name: "Item 3",
+                createdDate: new Date(),
+                id: "item-id-3",
+              },
+            ]),
+          1000
+        );
+      }).then((res: any[]) => {
+        return { results: res, totalCount: res.length };
+      });
+    },
+  });
+
+  const { load, items, pagination, loading, query } = factory();
+  const { openBlade, resolveBladeByName } = useBladeNavigation();
+
+  function openDetailsBlade(data?: Omit<Parameters<typeof openBlade>["0"], "blade">) {
+    openBlade({
+      blade: resolveBladeByName("DynamicItem"),
+      ...data,
+    });
+  }
+
+  const scope = ref<DynamicItemsScope>({
+    openDetailsBlade,
+  });
+
+  return {
+    items,
+    load,
+    loading,
+    pagination,
+    query,
+    scope: computed(() => scope.value),
+  };
+};

package/dist/templates/variants/both/src/modules/dynamic-module/index.ts

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

package/dist/templates/variants/both/src/modules/dynamic-module/locales/en.json

@@ -0,0 +1,46 @@
+{
+  "DYNAMICMODULE": {
+    "MENU": {
+      "TITLE": "Dynamic Module"
+    },
+    "PAGES": {
+      "LIST": {
+        "TITLE": "Module blade",
+        "TOOLBAR": {
+          "REFRESH": "Refresh",
+          "ADD": "Add",
+          "DELETE": "Delete selected"
+        },
+        "SEARCH": {
+          "PLACEHOLDER": "Search keywords"
+        },
+        "TABLE": {
+          "TOTALS": "Count:",
+          "HEADER": {
+            "PRODUCT_IMAGE": "Pic",
+            "PRODUCT_NAME": "Name",
+            "CREATED_DATE": "Created"
+          },
+          "EMPTY": {
+            "TITLE": "There are no content yet",
+            "ACTION": "Add content"
+          },
+          "NOT_FOUND": {
+            "TITLE": "No content found.",
+            "ACTION": "Reset search"
+          },
+          "ACTIONS": {
+            "UNPUBLISH": "Unpublish",
+            "PUBLISH": "Publish"
+          }
+        },
+        "MOBILE": {
+          "CREATED": "Created"
+        },
+        "EMPTY": {
+          "NO_ITEMS": "There are no items yet"
+        }
+      }
+    }
+  }
+}

package/dist/templates/variants/both/src/modules/dynamic-module/locales/index.ts

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

package/dist/templates/variants/both/src/modules/dynamic-module/pages/details.ts

@@ -0,0 +1,40 @@
+import { DynamicDetailsSchema } from "@vc-shell/framework";
+
+export const details: DynamicDetailsSchema = {
+  settings: {
+    url: "/dynamic-module-details",
+    id: "DynamicItem",
+    localizationPrefix: "DynamicModule",
+    titleTemplate: "Dynamic module details",
+    composable: "useDetails",
+    component: "DynamicBladeForm",
+    toolbar: [
+      {
+        id: "refresh",
+        icon: "fas fa-sync-alt",
+        title: "Refresh",
+        method: "refresh",
+      },
+    ],
+  },
+  content: [
+    {
+      id: "dynamicItemForm",
+      component: "vc-form",
+      children: [
+        {
+          id: "itemName",
+          component: "vc-input",
+          label: "Name",
+          property: "name",
+        },
+        {
+          id: "itemCreatedDate",
+          component: "vc-input",
+          label: "Created date",
+          property: "createdDate",
+        },
+      ],
+    },
+  ],
+};

package/dist/templates/variants/both/src/modules/dynamic-module/pages/index.ts

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

package/dist/templates/variants/both/src/modules/dynamic-module/pages/list.ts

@@ -0,0 +1,50 @@
+import { DynamicGridSchema } from "@vc-shell/framework";
+
+export const grid: DynamicGridSchema = {
+  settings: {
+    url: "/dynamic-module-list",
+    id: "DynamicItems",
+    titleTemplate: "Dynamic module blade",
+    localizationPrefix: "DynamicModule",
+    isWorkspace: true,
+    composable: "useList",
+    component: "DynamicBladeList",
+    toolbar: [
+      {
+        id: "refresh",
+        icon: "fas fa-sync-alt",
+        title: "Refresh",
+        method: "refresh",
+      },
+    ],
+  },
+  content: [
+    {
+      id: "itemsGrid",
+      component: "vc-table",
+      mobileTemplate: {
+        component: "DynamicItemsMobileGridView",
+      },
+      multiselect: true,
+      columns: [
+        {
+          id: "imgSrc",
+          title: "Pic",
+          type: "image",
+          alwaysVisible: true,
+        },
+        {
+          id: "name",
+          title: "Name",
+          alwaysVisible: true,
+        },
+        {
+          id: "createdDate",
+          title: "Created date",
+          sortable: true,
+          type: "date-ago",
+        },
+      ],
+    },
+  ],
+};

package/dist/{template/base/src/pages/App.vue.ejs → templates/variants/both/src/pages/App.vue}

@@ -7,9 +7,7 @@
   <VcApp
     v-else
     :menu-items="menuItems"
-    <% if(commonPages === true) { -%>
     :mobile-menu-items="mobileMenuItems"
-    <% } -%>
     :toolbar-items="toolbarItems"
     :is-ready="isReady"
     :is-authorized="isAuthorized"
@@ -20,9 +18,7 @@
     :blades-refs="bladesRefs"
     @backlink:click="closeBlade($event)"
     @close="closeBlade($event)"
-    <% if(dashboard === true) { -%>
     @logo:click="openDashboard"
-    <% } -%>
   >
     <!-- App Switcher -->
     <template
@@ -69,21 +65,16 @@ import {
   ChangePassword,
   LanguageSelector,
   UserDropdownButton,
-  BladePageComponent
+  BladePageComponent,
 } from "@vc-shell/framework";
-import { computed, inject, onMounted, reactive, ref, Ref, markRaw, watch, defineComponent } from "vue";
+import { computed, inject, onMounted, reactive, ref, Ref, markRaw, watch, defineComponent, provide } from "vue";
 import { useRoute, useRouter } from "vue-router";
 // eslint-disable-next-line import/no-unresolved
 import avatarImage from "/assets/avatar.jpg";
 // eslint-disable-next-line import/no-unresolved
 import logoImage from "/assets/logo.svg";
-<% if(dashboard === true) { -%>
-import Dashboard from "./Dashboard.vue";
-<% } -%>
 import { useI18n } from "vue-i18n";
-<% if(bladeModuleStarter === true) { -%>
-import { DefaultList } from "./../modules/default";
-<% } -%>
+import { List } from "./../modules/classic-module";
 
 const { open } = usePopup({
   component: ChangePassword,
@@ -92,7 +83,16 @@ const { open } = usePopup({
 const { t, locale: currentLocale, availableLocales, getLocaleMessage } = useI18n({ useScope: "global" });
 const { user, signOut } = useUser();
 const { getUiCustomizationSettings, uiSettings, applySettings } = useSettings();
-const { blades, bladesRefs, workspaceOptions, workspaceParam, closeBlade, onParentCall, resolveLastBlade } = useBladeNavigation();
+const {
+  blades,
+  bladesRefs,
+  workspaceOptions,
+  workspaceParam,
+  closeBlade,
+  onParentCall,
+  resolveLastBlade,
+  resolveBladeByName,
+} = useBladeNavigation();
 const { navigationMenuComposer, toolbarComposer } = useMenuComposer();
 const { appsList, switchApp, getApps } = useAppSwitcher();
 
@@ -106,6 +106,8 @@ const isDesktop = inject<Ref<boolean>>("isDesktop");
 const isMobile = inject<Ref<boolean>>("isMobile");
 const version = import.meta.env.PACKAGE_VERSION;
 const bladeNavigationRefs = ref();
+const internalRoutes = inject("bladeRoutes");
+provide("internalRoutes", internalRoutes);
 
 onMounted(async () => {
   try {
@@ -162,7 +164,6 @@ const toolbarItems = computed(() =>
         },
       },
     },
-    <% if(commonPages === true) { -%>
     {
       component: markRaw(UserDropdownButton),
       options: {
@@ -190,11 +191,9 @@ const toolbarItems = computed(() =>
       },
       isVisible: isDesktop.value,
     },
-    <% } -%>
   ])
 );
 
-<% if(commonPages === true) { -%>
 const mobileMenuItems = computed(() =>
   toolbarComposer([
     {
@@ -208,11 +207,9 @@ const mobileMenuItems = computed(() =>
     },
   ])
 );
-<% } -%>
 
 const menuItems = reactive(
   navigationMenuComposer([
-    <% if(dashboard === true) { -%>
     {
       title: computed(() => t("SHELL.MENU.DASHBOARD")),
       icon: "fas fa-home",
@@ -224,7 +221,6 @@ const menuItems = reactive(
         openDashboard();
       },
     },
-    <% } -%>
     {
       title: computed(() => t("SHELL.ACCOUNT.CHANGE_PASSWORD")),
       icon: "fas fa-key",
@@ -233,15 +229,18 @@ const menuItems = reactive(
         open();
       },
     },
-    <% if(bladeModuleStarter === true) { -%>
     {
-      title: computed(() => t("<%= bladeModuleName.toUpperCase() %>.MENU.TITLE")),
+      title: computed(() => t("MODULE.MENU.TITLE")),
       icon: "fas fa-file-alt",
       isVisible: true,
-      component: markRaw(DefaultList),
+      component: markRaw(List),
+    },
+    {
+      title: computed(() => t("DYNAMICMODULE.MENU.TITLE")),
+      icon: "fas fa-file-alt",
+      isVisible: true,
+      component: resolveBladeByName("DynamicItems"),
     },
-    <% } -%>
-    <% if(commonPages === true) { -%>
     {
       title: computed(() => t("SHELL.ACCOUNT.LOGOUT")),
       icon: "fas fa-sign-out-alt",
@@ -254,7 +253,6 @@ const menuItems = reactive(
         }
       },
     },
-    <% } -%>
   ])
 );
 
@@ -267,16 +265,14 @@ function langInit() {
     currentLocale.value = "en";
   }
 }
-<% if(dashboard === true) { -%>
 const openDashboard = async () => {
   console.debug(`openDashboard() called.`);
 
-   // Close all opened pages with onBeforeClose callback
+  // Close all opened pages with onBeforeClose callback
   const isPrevented = await closeBlade(0);
 
   !isPrevented && router.push("/");
 };
-<% } -%>
 
 async function customizationHandler() {
   await getUiCustomizationSettings();

package/dist/{template/base/src/main.ts.ejs → templates/variants/classic/src/main.ts}

@@ -3,12 +3,7 @@ import { createApp } from "vue";
 import { router } from "./router";
 import * as locales from "./locales";
 import { RouterView } from "vue-router";
-<% if(commonPages === true) { -%>
-import { useLogin } from "./composables";
-<% } -%>
-<% if(bladeModuleStarter === true) { -%>
-import Default from "./modules/default";
-<% } -%>
+import ClassicModule from "./modules/classic-module";
 
 // Load required CSS
 import "./styles/index.scss";
@@ -22,11 +17,10 @@ async function startApp() {
   await loadUser();
 
   const app = createApp(RouterView)
-  .use(VirtoShellFramework)
-  <% if(bladeModuleStarter === true) { -%>
-    .use(Default, { router })
-    <% } -%>
-  .use(router)
+    .use(VirtoShellFramework)
+    // Classic module based on composables, pages and components
+    .use(ClassicModule, { router })
+    .use(router);
 
   Object.entries(locales).forEach(([key, message]) => {
     app.config.globalProperties.$mergeLocaleMessage(key, message);
@@ -45,4 +39,4 @@ async function startApp() {
   app.mount("#app");
 }
 
-startApp()
+startApp();

package/dist/templates/variants/classic/src/modules/classic-module/components/index.ts

@@ -0,0 +1 @@
+export {};

package/dist/templates/variants/classic/src/modules/classic-module/composables/index.ts

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

package/dist/templates/variants/classic/src/modules/classic-module/composables/useDetails/index.ts

@@ -0,0 +1,52 @@
+/* eslint-disable import/no-unresolved */
+import { computed, ref } from "vue";
+import img1 from "/assets/1.jpeg";
+import img2 from "/assets/2.jpg";
+import img3 from "/assets/3.jpg";
+import { useAsync, useLoading } from "@vc-shell/framework";
+
+export default () => {
+  const item = ref({
+    imgSrc: undefined,
+    name: undefined,
+    createdDate: undefined,
+    id: undefined,
+  });
+
+  // Example mocked method for 'fetching' list data
+  const { loading: itemLoading, action: getItem } = useAsync<{ id: string }>(async (payload) => {
+    item.value = await new Promise((resolve) => {
+      setTimeout(() => {
+        const findMockedItem = [
+          {
+            imgSrc: img1,
+            name: "Item 1",
+            createdDate: new Date(),
+            id: "item-id-1",
+          },
+          {
+            imgSrc: img2,
+            name: "Item 2",
+            createdDate: new Date(),
+            id: "item-id-2",
+          },
+          {
+            imgSrc: img3,
+            name: "Item 3",
+            createdDate: new Date(),
+            id: "item-id-3",
+          },
+        ].find((x) => x.id === payload.id);
+        resolve(findMockedItem);
+      }, 1000);
+    });
+  });
+
+  const loading = useLoading(itemLoading);
+
+  return {
+    item: computed(() => item.value),
+    loading: computed(() => loading.value),
+    getItem,
+  };
+};

package/dist/templates/variants/classic/src/modules/classic-module/composables/useList/index.ts

@@ -0,0 +1,51 @@
+/* eslint-disable import/no-unresolved */
+import { computed, ref } from "vue";
+import img1 from "/assets/1.jpeg";
+import img2 from "/assets/2.jpg";
+import img3 from "/assets/3.jpg";
+import { useAsync, useLoading } from "@vc-shell/framework";
+
+export default () => {
+  const data = ref([]);
+
+  // Example mocked method for 'fetching' list data
+  const { loading: itemLoading, action: getItems } = useAsync(async (payload) => {
+    data.value = await new Promise((resolve) => {
+      setTimeout(
+        () =>
+          resolve([
+            {
+              imgSrc: img1,
+              name: "Item 1",
+              createdDate: new Date(),
+              id: "item-id-1",
+            },
+            {
+              imgSrc: img2,
+              name: "Item 2",
+              createdDate: new Date(),
+              id: "item-id-2",
+            },
+            {
+              imgSrc: img3,
+              name: "Item 3",
+              createdDate: new Date(),
+              id: "item-id-3",
+            },
+          ]),
+        1000
+      );
+    });
+  });
+
+  const loading = useLoading(itemLoading);
+
+  return {
+    data: computed(() => data.value),
+    loading: computed(() => loading.value),
+    totalCount: computed(() => data.value.length),
+    pages: computed(() => Math.ceil(data.value.length / 20)),
+    currentPage: 0 / Math.max(1, 20) + 1,
+    getItems,
+  };
+};

package/dist/templates/variants/classic/src/modules/classic-module/index.ts

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