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

package/dist/templates/mocks/sample-data/constants.ts

@@ -0,0 +1,98 @@
+interface MockedItem {
+  imgSrc: string;
+  name: string;
+  id: string;
+  description: string;
+  price: number;
+  salePrice: number;
+  guid: string;
+  currency: {
+    name: string;
+  };
+}
+
+interface MockedQuery {
+  keyword?: string;
+}
+
+const mockedItems: MockedItem[] = [
+  {
+    id: "beb211ea-1379-5a79-832c-9577ad387feb",
+    name: "Product 1",
+    imgSrc: "https://via.placeholder.com/150",
+    description: "Product 1 description",
+    price: 100,
+    salePrice: 90,
+    guid: "a1e26bcd-2704-5a3f-b97c-3e32e3d77a38",
+    currency: {
+      name: "USD",
+    },
+  },
+  {
+    id: "44b96758-792a-5449-b649-f2a0cd614c4b",
+    name: "Product 2",
+    imgSrc: "https://via.placeholder.com/150",
+    description: "Product 2 description",
+    price: 200,
+    salePrice: 90,
+    guid: "0ab995c0-3798-5011-a4ae-498e4c683cfd",
+    currency: {
+      name: "USD",
+    },
+  },
+  {
+    id: "605b2bfb-ba13-5687-91d5-0261b4b60524",
+    name: "Product 3",
+    imgSrc: "https://via.placeholder.com/150",
+    description: "Product 3 description",
+    price: 300,
+    salePrice: 90,
+    guid: "8a9b6954-7bf7-58b2-a146-c68e06fa7bb4",
+    currency: {
+      name: "USD",
+    },
+  },
+  {
+    id: "5ca8185c-0c28-59bf-ab40-991f134e6db3",
+    name: "Product 4",
+    imgSrc: "https://via.placeholder.com/150",
+    description: "Product 4 description",
+    price: 400,
+    salePrice: 90,
+    guid: "261364c5-f976-5c86-a92c-b0f0ea14efc7",
+    currency: {
+      name: "USD",
+    },
+  },
+  {
+    id: "077930cb-0874-5f85-9a5b-daafdd0bf860",
+    name: "Product 5",
+    imgSrc: "https://via.placeholder.com/150",
+    description: "Product 5 description",
+    price: 500,
+    salePrice: 90,
+    guid: "74d302ef-31e6-5432-91f1-d92c87ee2d2a",
+    currency: {
+      name: "USD",
+    },
+  },
+];
+
+const currencyOptions = [
+  {
+    value: "USD",
+    label: "USD",
+  },
+  {
+    value: "EUR",
+    label: "EUR",
+  },
+  {
+    value: "GBP",
+    label: "GBP",
+  },
+];
+
+export { mockedItems, currencyOptions };
+
+export type { MockedItem, MockedQuery };

package/dist/templates/mocks/sample-data/index.ts

@@ -0,0 +1,2 @@
+export * from './constants'
+export * from './methods'

package/dist/templates/mocks/sample-data/methods.ts

@@ -0,0 +1,65 @@
+import { type MockedItem, type MockedQuery, mockedItems } from ".";
+
+export function loadMockItemsList(query: MockedQuery) {
+  return new Promise((resolve: (value: MockedItem[]) => void) => {
+    setTimeout(() => resolve(mockedItems), 1000);
+  }).then((res) => {
+    res = res.filter((x) => {
+      if (query.keyword) {
+        return x.name.toLowerCase().includes(query.keyword.toLowerCase());
+      }
+      return true;
+    });
+
+    return { results: res, totalCount: res.length };
+  });
+}
+
+export async function loadMockItem(args?: { id: string }) {
+  return new Promise((resolve: (value: MockedItem) => void) => {
+    setTimeout(() => {
+      const findMockedItem = mockedItems.find((x) => x.id === args?.id);
+
+      if (findMockedItem) resolve({ ...findMockedItem });
+    }, 1000);
+  });
+}
+
+export async function removeMockItem(args: { id: string }) {
+  new Promise((resolve: (value: boolean) => void) => {
+    setTimeout(() => {
+      const index = mockedItems.findIndex((x) => x.id === args.id);
+
+      if (index > -1) {
+        mockedItems.splice(index, 1);
+        resolve(true);
+      } else {
+        resolve(false);
+      }
+    }, 1000);
+  });
+}
+
+export async function addNewMockItem(args: MockedItem) {
+  return new Promise((resolve: (value: MockedItem) => void) => {
+    setTimeout(() => {
+      mockedItems.push(args);
+      resolve(args);
+    }, 1000);
+  });
+}
+
+export async function updateMockItem(args: MockedItem) {
+  return new Promise((resolve: (value: MockedItem) => void) => {
+    setTimeout(() => {
+      const index = mockedItems.findIndex((x) => x.id === args.id);
+
+      if (index > -1) {
+        mockedItems[index] = args;
+        resolve(args);
+      } else {
+        resolve(args);
+      }
+    }, 1000);
+  });
+}

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

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

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

@@ -0,0 +1,41 @@
+import { Ref, computed, ref } from "vue";
+import { useAsync, useLoading } from "@vc-shell/framework";
+import {
+  MockedItem,
+  addNewMockItem,
+  currencyOptions,
+  loadMockItem,
+  removeMockItem,
+  updateMockItem,
+} from "../../sample-data";
+
+export default () => {
+  const item = ref({}) as Ref<MockedItem>;
+
+  const { loading: itemLoading, action: getItem } = useAsync<{ id: string }>(async (payload) => {
+    item.value = await loadMockItem(payload);
+  });
+
+  const { loading: saveLoading, action: saveItem } = useAsync<MockedItem, MockedItem | void>(async (payload) => {
+    if (payload) {
+      return payload.id ? await updateMockItem(payload) : await addNewMockItem(payload);
+    }
+  });
+
+  const { loading: removeLoading, action: removeItem } = useAsync<{ id: string }>(async (payload) => {
+    if (payload) {
+      return await removeMockItem(payload);
+    }
+  });
+
+  const loading = useLoading(itemLoading, saveLoading, removeLoading);
+
+  return {
+    item: computed(() => item.value),
+    loading: computed(() => loading.value),
+    currencyOptions: computed(() => currencyOptions),
+    getItem,
+    saveItem,
+    removeItem,
+  };
+};

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

@@ -0,0 +1,41 @@
+import { Ref, computed, ref } from "vue";
+import { useAsync, useLoading } from "@vc-shell/framework";
+import { MockedItem, MockedQuery, loadMockItemsList, removeMockItem } from "../../sample-data";
+
+export interface useClassicAppList {
+  data: Ref<MockedItem[]>;
+  loading: Ref<boolean>;
+  totalCount: Ref<number>;
+  pages: Ref<number>;
+  currentPage: number;
+  getItems: (query: MockedQuery) => void;
+  removeItems: (args: { ids: string[] }) => void;
+}
+
+export default (): useClassicAppList => {
+  const result = ref() as Ref<{ results: MockedItem[]; totalCount: number }>;
+
+  const { loading: itemLoading, action: getItems } = useAsync<MockedQuery>(async (query) => {
+    if (query) result.value = await loadMockItemsList(query);
+  });
+
+  const { loading: removeLoading, action: removeItems } = useAsync<{ ids: string[] }>(async (args) => {
+    if (args) {
+      for (const id of args.ids) {
+        await removeMockItem({ id });
+      }
+    }
+  });
+
+  const loading = useLoading(itemLoading, removeLoading);
+
+  return {
+    data: computed(() => result.value?.results),
+    loading: computed(() => loading.value),
+    totalCount: computed(() => result.value?.totalCount),
+    pages: computed(() => Math.ceil(result.value?.totalCount / 20)),
+    currentPage: 0 / Math.max(1, 20) + 1,
+    getItems,
+    removeItems,
+  };
+};

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

@@ -0,0 +1,8 @@
+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";

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

@@ -0,0 +1,59 @@
+{
+  "SAMPLE_APP": {
+    "MENU": {
+      "TITLE": "Sample"
+    },
+    "PAGES": {
+      "LIST": {
+        "TITLE": "Sample 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"
+          },
+          "ACTIONS": {
+            "DELETE": "Delete"
+          }
+        }
+      },
+      "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/classic-module/locales/index.ts

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

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

@@ -0,0 +1,257 @@
+<template>
+  <VcBlade
+    v-loading="loading"
+    :title="title"
+    :expanded="expanded"
+    :closable="closable"
+    width="70%"
+    :toolbar-items="bladeToolbar"
+    @close="$emit('close:blade')"
+    @expand="$emit('expand:blade')"
+    @collapse="$emit('collapse:blade')"
+  >
+    <VcContainer class="tw-p-2">
+      <VcForm>
+        <Field
+          v-slot="{ errorMessage, handleChange, errors }"
+          name="name"
+          :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.NAME')"
+          rules="required"
+          :model-value="item.name"
+        >
+          <VcInput
+            v-model="item.name"
+            :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.NAME')"
+            required
+            :error="!!errors.length"
+            :error-message="errorMessage"
+            class="tw-mb-4"
+            @update:model-value="handleChange"
+          ></VcInput>
+        </Field>
+        <VcCard
+          header="Content"
+          class="tw-mb-4"
+        >
+          <div class="tw-p-4">
+            <Field
+              v-slot="{ errorMessage, handleChange, errors }"
+              name="guid"
+              :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.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}/,
+              }"
+              :model-value="item.guid"
+            >
+              <VcInput
+                v-model="item.guid"
+                :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.GUID')"
+                required
+                :error="!!errors.length"
+                :error-message="errorMessage"
+                class="tw-mb-4"
+                @update:model-value="handleChange"
+              ></VcInput>
+            </Field>
+            <Field
+              v-slot="{ errorMessage, handleChange, errors }"
+              name="description"
+              :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.DESCRIPTION')"
+              :rules="{
+                required: true,
+              }"
+              :model-value="item.description"
+            >
+              <VcTextarea
+                v-model="item.description"
+                :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.DESCRIPTION')"
+                required
+                :error="!!errors.length"
+                :error-message="errorMessage"
+                @update:model-value="handleChange"
+              ></VcTextarea>
+            </Field>
+          </div>
+        </VcCard>
+        <VcCard
+          v-if="item.currency"
+          header="Prices"
+        >
+          <VcRow class="tw-p-4 tw-gap-4">
+            <VcCol :size="2">
+              <Field
+                v-slot="{ errorMessage, handleChange, errors }"
+                name="price"
+                :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.PRICE')"
+                :rules="{
+                  required: true,
+                }"
+                :model-value="item.price"
+              >
+                <VcInputCurrency
+                  v-model="item.price"
+                  v-model:option="item.currency.name"
+                  :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.PRICE')"
+                  required
+                  option-value="value"
+                  option-label="label"
+                  :error="!!errors.length"
+                  :error-message="errorMessage"
+                  :options="currencyOptions"
+                  @update:model-value="handleChange"
+                ></VcInputCurrency>
+              </Field>
+            </VcCol>
+            <VcCol :size="2">
+              <Field
+                v-slot="{ errorMessage, handleChange, errors }"
+                name="salePrice"
+                :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.SALE_PRICE')"
+                :rules="{
+                  required: true,
+                }"
+                :model-value="item.salePrice"
+              >
+                <VcInputCurrency
+                  v-model="item.salePrice"
+                  v-model:option="item.currency.name"
+                  :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.SALE_PRICE')"
+                  required
+                  option-value="value"
+                  option-label="label"
+                  :error="!!errors.length"
+                  :error-message="errorMessage"
+                  :options="currencyOptions"
+                  @update:model-value="handleChange"
+                ></VcInputCurrency>
+              </Field>
+            </VcCol>
+          </VcRow>
+        </VcCard>
+      </VcForm>
+    </VcContainer>
+  </VcBlade>
+</template>
+
+<script lang="ts" setup>
+import { IBladeToolbar, IParentCallArgs, useBeforeUnload, useBladeNavigation, usePopup } from "@vc-shell/framework";
+import { useDetails } from "./../composables";
+import { computed, onMounted, ref, unref, watch } from "vue";
+import { Field, useForm, useIsFormDirty, useIsFormValid } from "vee-validate";
+import { useI18n } from "vue-i18n";
+import * as _ from "lodash-es";
+import { MockedItem } from "../sample-data";
+
+export interface Props {
+  expanded?: boolean;
+  closable?: boolean;
+  param?: string;
+}
+
+export interface Emits {
+  (event: "parent:call", args: IParentCallArgs): void;
+  (event: "collapse:blade"): void;
+  (event: "expand:blade"): void;
+  (event: "close:blade"): void;
+}
+
+defineOptions({
+  url: "/sample-details",
+  name: "SampleDetails",
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  expanded: true,
+  closable: true,
+  param: undefined,
+});
+
+const emit = defineEmits<Emits>();
+
+const { loading, getItem, saveItem, removeItem, item, currencyOptions } = useDetails();
+const { showConfirmation } = usePopup();
+const { onBeforeClose } = useBladeNavigation();
+const { t } = useI18n({ useScope: "global" });
+useForm({
+  validateOnMount: false,
+});
+useBeforeUnload(computed(() => !isDisabled.value && modified.value));
+
+const modified = ref(false);
+const isFormValid = useIsFormValid();
+const isDirty = useIsFormDirty();
+const isDisabled = computed(() => {
+  return !isDirty.value || !isFormValid.value;
+});
+let itemCopy: MockedItem;
+const title = computed(() => {
+  return 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");
+});
+
+watch(
+  () => item.value,
+  (state) => {
+    if (itemCopy) {
+      modified.value = !_.isEqual(itemCopy, state);
+    }
+  },
+  { deep: true },
+);
+
+const bladeToolbar = ref<IBladeToolbar[]>([
+  {
+    id: "save",
+    icon: "fas fa-save",
+    title: "Save",
+    async clickHandler() {
+      await saveItem(item.value);
+      itemCopy = _.cloneDeep(item.value);
+      modified.value = false;
+      emit("parent:call", {
+        method: "reload",
+      });
+      emit("close:blade");
+    },
+    disabled: computed(() => !(modified.value && !isDisabled.value)),
+  },
+  {
+    id: "delete",
+    icon: "fas fa-trash",
+    title: "Delete",
+    async clickHandler() {
+      if (await showConfirmation(computed(() => t(`SAMPLE_APP.PAGES.ALERTS.DELETE`)))) {
+        if (props.param) {
+          await removeItem({ id: props.param });
+          emit("parent:call", {
+            method: "reload",
+          });
+
+          emit("close:blade");
+        }
+      }
+    },
+  },
+]);
+
+onMounted(async () => {
+  if (props.param) {
+    await getItem({ id: props.param });
+    itemCopy = _.cloneDeep(item.value);
+  }
+});
+
+onBeforeClose(async () => {
+  if (!isDisabled.value && modified.value) {
+    return await showConfirmation(unref(computed(() => t("SAMPLE_APP.PAGES.ALERTS.CLOSE_CONFIRMATION"))));
+  }
+});
+
+defineExpose({
+  title,
+});
+</script>

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

@@ -0,0 +1,2 @@
+export { default as List } from "./list.vue";
+export {default as Details } from './details.vue'