@vc-shell/framework 1.0.38 → 1.0.39

package/shared/assets/components/assets-details/assets-details.vue

@@ -0,0 +1,138 @@
+<template>
+  <VcBlade
+    :title="options.editableAsset.name"
+    :subtitle="$t('ASSETS.PAGES.DETAILS.SUBTITLE')"
+    :expanded="expanded"
+    :closable="closable"
+    :toolbarItems="bladeToolbar"
+    @close="$emit('close:blade')"
+  >
+    <!-- Blade contents -->
+    <div class="flex grow-1 border-t border-solid border-t-[#eaedf3]">
+      <div class="assets-details__content grow basis-0">
+        <VcContainer :no-padding="true">
+          <div class="p-4">
+            <VcForm>
+              <VcImage
+                class="mb-4"
+                :src="localImage.url"
+                size="xl"
+                :bordered="true"
+              ></VcImage>
+              <VcInput
+                class="mb-4"
+                :label="$t('ASSETS.PAGES.DETAILS.FIELDS.NAME.TITLE')"
+                v-model="localImage.name"
+                :clearable="true"
+                is-required
+                :placeholder="
+                  $t('ASSETS.PAGES.DETAILS.FIELDS.NAME.PLACEHOLDER')
+                "
+              ></VcInput>
+              <VcInput
+                class="mb-4"
+                :label="$t('ASSETS.PAGES.DETAILS.FIELDS.ALT.TITLE')"
+                v-model="localImage.altText"
+                :clearable="true"
+                :placeholder="$t('ASSETS.PAGES.DETAILS.FIELDS.ALT.PLACEHOLDER')"
+                :tooltip="$t('ASSETS.PAGES.DETAILS.FIELDS.ALT.TOOLTIP')"
+                is-required
+              ></VcInput>
+              <VcTextarea
+                class="mb-4"
+                :label="$t('ASSETS.PAGES.DETAILS.FIELDS.DESCRIPTION.TITLE')"
+                v-model="localImage.description"
+                :placeholder="
+                  $t('ASSETS.PAGES.DETAILS.FIELDS.DESCRIPTION.PLACEHOLDER')
+                "
+                is-required
+              ></VcTextarea>
+            </VcForm>
+          </div>
+        </VcContainer>
+      </div>
+    </div>
+  </VcBlade>
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive, unref } from "vue";
+import { useI18n } from "@/core/composables";
+import { IParentCallArgs } from "@/shared";
+import {
+  VcBlade,
+  VcContainer,
+  VcForm,
+  VcImage,
+  VcInput,
+  VcTextarea,
+} from "@/components";
+
+interface ILocalImage {
+  url: string;
+  name: string;
+  altText: string;
+  description: string;
+}
+
+export interface Props {
+  expanded?: boolean;
+  closable?: boolean;
+  options?: {
+    editableAsset?: ILocalImage;
+    sortHandler?: (remove: boolean, localImage: ILocalImage) => void;
+  };
+}
+
+export interface Emits {
+  (event: "parent:call", args: IParentCallArgs): void;
+  (event: "close:blade"): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  expanded: true,
+  closable: true,
+  options: () => ({}),
+});
+
+const emit = defineEmits<Emits>();
+const { t } = useI18n();
+const localImage = reactive({ ...props.options.editableAsset });
+
+const bladeToolbar = [
+  {
+    id: "save",
+    title: t("ASSETS.PAGES.DETAILS.TOOLBAR.SAVE"),
+    icon: "fas fa-save",
+    clickHandler() {
+      if (
+        props.options.sortHandler &&
+        typeof props.options.sortHandler === "function"
+      ) {
+        props.options.sortHandler(false, localImage);
+        emit("close:blade");
+      }
+    },
+  },
+  {
+    id: "delete",
+    title: t("ASSETS.PAGES.DETAILS.TOOLBAR.DELETE"),
+    icon: "fas fa-trash",
+    clickHandler() {
+      if (
+        window.confirm(
+          unref(computed(() => t("ASSETS.PAGES.DETAILS.DELETE_CONFIRMATION")))
+        )
+      ) {
+        if (
+          props.options.sortHandler &&
+          typeof props.options.sortHandler === "function"
+        ) {
+          props.options.sortHandler(true, localImage);
+          emit("close:blade");
+        }
+      }
+    },
+  },
+];
+</script>

package/shared/assets/components/index.ts

@@ -0,0 +1 @@
+export {default as AssetsDetails} from './assets-details/assets-details.vue'

package/shared/assets/index.ts

@@ -0,0 +1,19 @@
+import { App } from "vue";
+import * as components from "./components";
+import * as locales from "./locales";
+
+export default {
+    install(app: App): void {
+        Object.entries(components).forEach(([pageName, page]) => {
+            app.component(pageName, page);
+            app.config.globalProperties.pages?.push(page);
+        });
+
+        // Load locales
+        Object.entries(locales).forEach(([key, message]) => {
+            app.config.globalProperties.$mergeLocaleMessage(key, message);
+        });
+    },
+};
+
+export * from './components'

package/shared/assets/locales/en.json

@@ -0,0 +1,29 @@
+{
+  "ASSETS": {
+    "PAGES": {
+      "DETAILS": {
+        "SUBTITLE": "Image edit",
+        "TOOLBAR": {
+          "SAVE": "Save",
+          "DELETE": "Delete"
+        },
+        "FIELDS": {
+          "NAME": {
+            "TITLE": "Image name",
+            "PLACEHOLDER": "Enter image name"
+          },
+          "ALT": {
+            "TITLE": "Image alternative text",
+            "PLACEHOLDER": "Enter image alt text",
+            "TOOLTIP": "This text will be displayed in case of disabled/unloaded image on the page"
+          },
+          "DESCRIPTION": {
+            "TITLE": "Meta description",
+            "PLACEHOLDER": "Enter meta description"
+          }
+        },
+        "DELETE_CONFIRMATION": "Are you sure you want to delete this image?"
+      }
+    }
+  }
+}

package/shared/assets/locales/index.ts

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

package/shared/blade-navigation/components/index.ts

@@ -0,0 +1 @@
+export { default as VcBladeNavigation } from "./vc-blade-navigation/vc-blade-navigation.vue";

package/shared/blade-navigation/components/vc-blade-navigation/vc-blade-navigation.vue

@@ -0,0 +1,84 @@
+<template>
+  <router-view v-slot="{ Component, route }">
+    <component
+      :is="Component"
+      :closable="false"
+      v-show="$isMobile.value ? !blades.length : blades.length <= 1"
+      @open:blade="$emit('onOpen', { blade: $event, id: 0 })"
+      :options="parentBladeOptions"
+      :expanded="blades.length === 0"
+      :param="resolveParam"
+      :key="route"
+      ref="parentRef"
+    >
+    </component>
+  </router-view>
+  <component
+    v-for="(blade, i) in blades"
+    v-show="i >= blades.length - ($isMobile.value ? 1 : 2)"
+    :key="`blade_${i}`"
+    :is="blade.component"
+    :param="blade.param"
+    :closable="i >= 0"
+    :expanded="i === blades.length - 1"
+    :options="blade.bladeOptions"
+    @open:blade="$emit('onOpen', { blade: $event, id: blade.idx })"
+    @close:blade="$emit('onClose', i)"
+    @close:children="$emit('onClose', i + 1)"
+    @parent:call="$emit('onParentCall', { id: i, cb: $event })"
+    :ref="setBladesRef"
+  ></component>
+</template>
+
+<script lang="ts" setup>
+import { computed, onBeforeUpdate, ref } from "vue";
+import { useRoute } from "vue-router";
+import {
+  IBladeContainer,
+  IBladeElement,
+  IBladeEvent,
+  IParentCallArgs,
+} from "@/shared";
+
+export interface Props {
+  blades: IBladeContainer[];
+  parentBladeOptions: Record<string, unknown>;
+  parentBladeParam: string;
+}
+
+export interface Emits {
+  (event: "onOpen", blade: { blade: IBladeEvent; id: number }): void;
+  (event: "onClose", index: number): void;
+  (event: "onParentCall", args: { id: number; args: IParentCallArgs }): void;
+}
+
+defineEmits<Emits>();
+
+const props = withDefaults(defineProps<Props>(), {
+  blades: () => [],
+  parentBladeOptions: () => ({}),
+  parentBladeParam: undefined,
+});
+
+const route = useRoute();
+const bladesRefs = ref([]);
+const parentRef = ref();
+
+onBeforeUpdate(() => {
+  bladesRefs.value = [parentRef.value];
+});
+
+const setBladesRef = (el: IBladeElement) => {
+  if (el && Object.keys(el).length) {
+    bladesRefs.value.push(el);
+  }
+};
+
+const resolveParam = computed(() => {
+  return props.parentBladeParam ? props.parentBladeParam : route.params.param;
+});
+
+defineExpose({
+  bladesRefs,
+});
+</script>

package/shared/blade-navigation/composables/index.ts

@@ -0,0 +1 @@
+export {default as useBladeNavigation} from './useBladeNavigation'

package/shared/blade-navigation/composables/useBladeNavigation/index.ts

@@ -0,0 +1,216 @@
+import { computed, ref, unref, watch, Ref } from "vue";
+import { isEqual } from "lodash-es";
+import { useRouter, useRoute, NavigationFailure } from "vue-router";
+import { usePermissions } from "@/core/composables";
+import {
+  ExtendedComponent,
+  IBladeContainer,
+  IBladeElement,
+  IBladeEvent,
+  IParentCallArgs,
+} from "@/shared";
+
+interface IUseBladeNavigation {
+  readonly blades: Ref<IBladeContainer[]>;
+  readonly parentBladeOptions: Ref<Record<string, unknown>>;
+  readonly parentBladeParam: Ref<string>;
+  bladesRefs: Ref<IBladeElement[]>;
+  openBlade: (
+    {
+      parentBlade,
+      component,
+      param,
+      bladeOptions,
+      onOpen,
+      onClose,
+    }: IBladeEvent,
+    index?: number,
+    navigationCb?: () => Promise<void | NavigationFailure>
+  ) => void;
+  closeBlade: (index: number) => void;
+  onParentCall: (index: number, args: IParentCallArgs) => void;
+}
+
+const blades = ref<IBladeContainer[]>([]);
+const bladesRefs = ref<IBladeElement[]>([]);
+const parentBladeOptions = ref<Record<string, unknown>>();
+const parentBladeParam = ref<string>();
+
+export default (): IUseBladeNavigation => {
+  const router = useRouter();
+  const route = useRoute();
+  const { checkPermission } = usePermissions();
+  const isPrevented = ref(false);
+
+  watch(
+    () => blades.value,
+    (newVal) => {
+      const lastBlade = newVal[newVal.length - 1];
+
+      if (lastBlade && lastBlade.component.url) {
+        if (lastBlade.param) {
+          addEntryToLocation(lastBlade.component.url + "/" + lastBlade.param);
+        } else {
+          addEntryToLocation(lastBlade.component.url);
+        }
+      } else if (!lastBlade) {
+        addEntryToLocation(route.path);
+      }
+    },
+    { deep: true }
+  );
+
+  async function openBlade(
+    {
+      parentBlade,
+      component: blade,
+      param,
+      bladeOptions,
+      onOpen,
+      onClose,
+    }: IBladeEvent,
+    index?: number,
+    navigationCb?: () => Promise<void | NavigationFailure>
+  ) {
+    console.debug(`openBlade(${1}) called.`);
+
+    const parent = unref(parentBlade);
+    const child = unref(blade);
+    const existingChild = findBlade(child);
+
+    if (parent && parent.url) {
+      await closeBlade(0);
+
+      if (!isPrevented.value) {
+        parentBladeOptions.value = unref(bladeOptions);
+        parentBladeParam.value = unref(param);
+        if (navigationCb && typeof navigationCb === "function") {
+          try {
+            await navigationCb();
+          } catch (e) {
+            throw "Navigation failure";
+          }
+        } else if (!navigationCb) {
+          await router.push(parent.url);
+        }
+      }
+    }
+
+    if (child) {
+      if (existingChild === undefined) {
+        child.idx = index + 1;
+      } else if (existingChild) {
+        await closeBlade(
+          blades.value.findIndex((x) => x.idx === existingChild.idx)
+        );
+        child.idx = existingChild.idx;
+      }
+
+      await addBlade(child, param, bladeOptions, onOpen, onClose, index);
+    }
+  }
+
+  async function closeBlade(index: number) {
+    if (index < bladesRefs.value.length) {
+      const children = bladesRefs.value.slice(index).reverse();
+
+      isPrevented.value = false;
+      for (let i = 0; i < children.length; i++) {
+        if (
+          children[i]?.onBeforeClose &&
+          typeof children[i].onBeforeClose === "function"
+        ) {
+          const result = await children[i].onBeforeClose();
+          if (result === false) {
+            isPrevented.value = true;
+            break;
+          }
+        }
+      }
+      if (!isPrevented.value) {
+        if (typeof blades.value[index]?.onClose === "function") {
+          blades.value[index]?.onClose?.();
+        }
+        blades.value.splice(index);
+      } else {
+        throw "Closing prevented";
+      }
+    }
+  }
+
+  async function addBlade(
+    blade: ExtendedComponent,
+    param: string,
+    bladeOptions: Record<string, unknown>,
+    onOpen: () => void,
+    onClose: () => void,
+    index: number
+  ) {
+    if (blades.value.length > index) {
+      await closeBlade(index);
+    }
+
+    if (blade && checkPermission(blade.permissions)) {
+      blades.value.push({
+        component: blade,
+        bladeOptions,
+        param,
+        onOpen,
+        onClose,
+        idx: blade.idx,
+      });
+
+      if (onOpen && typeof onOpen === "function") {
+        onOpen();
+      }
+    } else {
+      // TODO temporary access alert
+      alert("Access restricted");
+    }
+  }
+
+  async function onParentCall(index: number, args: IParentCallArgs) {
+    console.debug(
+      `vc-app#onParentCall(${index}, { method: ${args.method} }) called.`
+    );
+
+    if (index >= 0) {
+      const currentParent = unref(
+        bladesRefs.value[bladesRefs.value.length - 2]
+      );
+
+      if (currentParent) {
+        if (args.method && typeof currentParent[args.method] === "function") {
+          const method = currentParent[args.method] as (
+            args: unknown
+          ) => Promise<unknown>;
+          const result = await method(args.args);
+          if (typeof args.callback === "function") {
+            args.callback(result);
+          }
+        } else {
+          // TODO temporary alert
+          console.error(`No such method: ${args.method}.`);
+        }
+      }
+    }
+  }
+
+  function addEntryToLocation(params: string) {
+    history.pushState({}, null, "#" + params);
+  }
+
+  function findBlade(blade: ExtendedComponent) {
+    return blades.value.find((x) => isEqual(x.component, blade));
+  }
+
+  return {
+    blades: computed(() => blades.value),
+    parentBladeOptions: computed(() => parentBladeOptions.value),
+    parentBladeParam: computed(() => parentBladeParam.value),
+    bladesRefs,
+    openBlade,
+    closeBlade,
+    onParentCall,
+  };
+};

package/shared/blade-navigation/index.ts

@@ -0,0 +1,15 @@
+import { App } from "vue";
+import * as components from "./components";
+
+export default {
+    install(app: App): void {
+        // Register exported pages
+        Object.entries(components).forEach(([componentName, component]) => {
+            app.component(componentName, component);
+        });
+    },
+};
+
+export * from "./components";
+export * from "./composables";
+export * from './types'

package/shared/blade-navigation/types/index.ts

@@ -0,0 +1,52 @@
+import {Component, ComponentPublicInstance} from "vue";
+import {IMenuItems} from "@/core/types";
+import {NavigationFailure} from "vue-router";
+
+/* onParentCall event interface */
+export interface IParentCallArgs {
+    method: string;
+    args?: unknown;
+    callback?: (args: unknown) => void;
+}
+
+/* extended component */
+export type ExtendedComponent = Component & {
+    url?: string;
+    permissions?: string | string[];
+    idx?: number;
+};
+
+/* blade interface for navigation */
+export interface IBladeContainer extends IBladeEvent{
+    idx?: number;
+}
+
+/* blade exposed methods */
+export interface IBladeElement extends ComponentPublicInstance {
+    onBeforeClose?: () => Promise<boolean>;
+    title?: string;
+    reloadParent?: () => void;
+    openDashboard?: () => void;
+}
+
+/* emitted blade event */
+export interface IBladeEvent {
+    parentBlade?: ExtendedComponent;
+    component?: ExtendedComponent;
+    bladeOptions?: Record<string, unknown>;
+    param?: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+
+/* menu item event */
+export interface IMenuClickEvent {
+    item: IMenuItems
+    navigationCb: () => Promise<void | NavigationFailure>
+}
+
+/* openBlade args interface */
+export interface IOpenBlade extends IBladeEvent {
+    id?: number
+    navigationCb?: () => Promise<void | NavigationFailure>
+}

package/shared/index.ts

@@ -0,0 +1,16 @@
+import { App } from "vue";
+import { default as AssetsDetails } from "./assets";
+import { default as VcAppSwitcher } from "./app-switcher";
+import { default as VcBladeNavigation } from "./blade-navigation";
+
+const components = [AssetsDetails, VcAppSwitcher, VcBladeNavigation];
+
+export function init(app: App): App {
+  components.forEach((component) => app.use(component));
+
+  return app;
+}
+
+export * from "./assets";
+export * from "./app-switcher";
+export * from "./blade-navigation";