@vc-shell/framework 1.0.128 → 1.0.130

package/core/composables/index.ts

@@ -8,5 +8,6 @@ export * from "./useAsync";
 export * from "./useApiClient";
 export * from "./useLoading";
 export * from "./useErrorHandler";
-export * from "./useMenuComposer";
 export { useAssets } from "./useAssets";
+export { useMenuService } from "./useMenuService";
+export { useBeforeUnload } from "./useBeforeUnload";

package/core/composables/useApiClient/index.ts

@@ -1,5 +1,3 @@
-import { useUser } from "../useUser";
-
 export interface IAuthApiBase {
   authToken: string;
   setAuthToken(token: string): void;
@@ -11,14 +9,10 @@ interface UseApiClient<ApiClient extends IAuthApiBase> {
 }
 
 export function useApiClient<ApiClient extends IAuthApiBase>(
-  c: new (baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) => ApiClient
+  c: new (baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) => ApiClient,
 ): UseApiClient<ApiClient> {
-  const { getAccessToken } = useUser();
-
   async function getApiClient() {
     const client = new c();
-    const token = await getAccessToken();
-    if (token) client.setAuthToken(token);
     return client;
   }
 

package/core/composables/useAssets/index.ts

@@ -11,7 +11,6 @@ export interface IUseAssets {
 }
 
 export function useAssets(): IUseAssets {
-  const { getAccessToken } = useUser();
   const loading = ref(false);
 
   async function upload(files: FileList, uploadPath: string, startingSortOrder?: number): Promise<ICommonAsset[]> {
@@ -19,8 +18,6 @@ export function useAssets(): IUseAssets {
       loading.value = true;
 
       const uploadedAssets: Ref<ICommonAsset[]> = ref([]);
-      const authToken = await getAccessToken();
-
       for (let i = 0; i < files.length; i++) {
         const formData = new FormData();
         formData.append("file", files[i]);
@@ -28,9 +25,6 @@ export function useAssets(): IUseAssets {
         const result = await fetch(`/api/assets?folderUrl=/${uploadPath}`, {
           method: "POST",
           body: formData,
-          headers: {
-            Authorization: `Bearer ${authToken}`,
-          },
         });
 
         const response = await result.json();

package/core/composables/useBeforeUnload/index.ts

@@ -0,0 +1,20 @@
+import { onBeforeMount, onBeforeUnmount, unref, ComputedRef } from "vue";
+
+export const useBeforeUnload = (modified: ComputedRef<boolean>) => {
+  onBeforeMount(() => {
+    window.addEventListener("beforeunload", preventUnload);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("beforeunload", preventUnload);
+  });
+
+  function preventUnload(event: Event) {
+    if (!unref(modified)) return;
+    event.preventDefault();
+  }
+
+  return {
+    modified,
+  };
+};

package/core/composables/useMenuService/index.ts

@@ -0,0 +1,96 @@
+import { createSharedComposable, createUnrefFn, useArrayFind } from "@vueuse/core";
+import { Ref, ref, computed } from "vue";
+import * as _ from "lodash-es";
+import { i18n } from "./../../plugins/i18n";
+import { MenuItemConfig } from "../../../shared/components/blade-navigation/types";
+import { MenuItem } from "../../types";
+
+export interface IUseMenuService {
+  addMenuItem: MenuItemConfig;
+  menuItems: Ref<MenuItem[]>;
+  removeMenuItem: (item: MenuItem) => void;
+}
+
+const menuItems: Ref<MenuItem[]> = ref([]);
+const rawMenu: Ref<Record<string, unknown>[]> = ref([]);
+
+function useMenuServiceFn() {
+  const { t } = i18n.global;
+
+  function addMenuItem(item: Record<string, unknown>) {
+    rawMenu.value.push(item);
+
+    constructMenu();
+  }
+
+  const upsert = createUnrefFn((array: Record<string, unknown>[], element: Record<string, unknown>) => {
+    const i = array.findIndex((_element) => _.isEqual(_element, element));
+    if (i > -1) array[i] = { ...element };
+    else array.push({ ...element });
+  });
+
+  function sortByPriority(a: MenuItem, b: MenuItem) {
+    const priorityA = a.priority !== undefined ? a.priority : Infinity;
+    const priorityB = b.priority !== undefined ? b.priority : Infinity;
+
+    return priorityA - priorityB;
+  }
+
+  function constructMenu() {
+    const constructedMenu = ref<MenuItem[]>([]);
+
+    rawMenu.value.forEach((item) => {
+      let group;
+      if (item.group) {
+        const isGroupExist = useArrayFind(constructedMenu, (m) => m.groupId === "group_" + item.group);
+
+        const groupItem = _.omit(
+          {
+            ...item,
+            title: computed(() => t(item.title as string)),
+          },
+          "group",
+        );
+
+        if (isGroupExist.value) {
+          upsert(isGroupExist.value.children, groupItem);
+        } else {
+          group = {
+            groupId: "group_" + item.group,
+            icon: item.icon,
+            title: computed(() => t(item.group as string)),
+            children: [_.omit(groupItem)],
+            priority: item.priority,
+          };
+          upsert(constructedMenu.value, group);
+        }
+      } else {
+        if (item && item.title) {
+          upsert(constructedMenu.value, {
+            ...item,
+            title: item.title,
+          });
+        }
+      }
+    });
+
+    menuItems.value = constructedMenu.value
+      .map((x, index) => ({ ...x, title: computed(() => t(x.title as string)), id: index }))
+      .sort(sortByPriority);
+  }
+
+  function removeMenuItem(item: MenuItem) {
+    const index = menuItems.value.indexOf(item);
+    menuItems.value.splice(index, 1);
+  }
+
+  return {
+    addMenuItem,
+    menuItems,
+    removeMenuItem,
+  };
+}
+
+const useMenuService = createSharedComposable(useMenuServiceFn);
+
+export { useMenuService };

package/core/composables/useNotifications/index.ts

@@ -18,31 +18,24 @@ const notifications = ref<PushNotification[]>([]);
 const pushNotifications = ref<PushNotification[]>([]);
 
 export function useNotifications(notifyType?: string | string[]): INotifications {
-  const { getAccessToken } = useUser();
-
   async function loadFromHistory(take = 10) {
-    const token = await getAccessToken();
-    if (token) {
-      // TODO temporary workaround to get push notifications without base type
-      try {
-        notificationsClient.setAuthToken(token);
-        const result = await fetch("/api/platform/pushnotifications", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json-patch+json",
-            Accept: "application/json",
-            authorization: `Bearer ${token}`,
-          },
-          body: JSON.stringify({ take }),
-        });
+    // TODO temporary workaround to get push notifications without base type
+    try {
+      const result = await fetch("/api/platform/pushnotifications", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json-patch+json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify({ take }),
+      });
 
-        result.text().then((response) => {
-          notifications.value = <PushNotification[]>JSON.parse(response).notifyEvents ?? [];
-        });
-      } catch (e) {
-        console.error(e);
-        throw e;
-      }
+      result.text().then((response) => {
+        notifications.value = <PushNotification[]>JSON.parse(response).notifyEvents ?? [];
+      });
+    } catch (e) {
+      console.error(e);
+      throw e;
     }
   }
 
@@ -75,21 +68,17 @@ export function useNotifications(notifyType?: string | string[]): INotifications
   }
 
   async function markAllAsRead() {
-    const token = await getAccessToken();
-    if (token) {
-      notificationsClient.setAuthToken(token);
-      try {
-        await notificationsClient.markAllAsRead();
-        notifications.value = notifications.value.map((x) => {
-          if (x.isNew) {
-            x.isNew = false;
-          }
-          return x;
-        });
-      } catch (e) {
-        console.error(e);
-        throw e;
-      }
+    try {
+      await notificationsClient.markAllAsRead();
+      notifications.value = notifications.value.map((x) => {
+        if (x.isNew) {
+          x.isNew = false;
+        }
+        return x;
+      });
+    } catch (e) {
+      console.error(e);
+      throw e;
     }
   }
 
@@ -97,8 +86,8 @@ export function useNotifications(notifyType?: string | string[]): INotifications
     () =>
       pushNotifications.value.filter(
         (item: PushNotification) =>
-          item.isNew && !!item.notifyType && !!notifyType && notifyType.includes(item.notifyType)
-      ) ?? []
+          item.isNew && !!item.notifyType && !!notifyType && notifyType.includes(item.notifyType),
+      ) ?? [],
   );
 
   return {

package/core/composables/useSettings/index.ts

@@ -1,6 +1,8 @@
-import { useUser } from "./../useUser";
-import { computed, inject, Ref, ref } from "vue";
+import { useAsync } from "./../useAsync";
+import { useApiClient } from "./../useApiClient";
+import { computed, inject, onBeforeMount, Ref, ref, ComputedRef } from "vue";
 import { SettingClient } from "./../../api/platform";
+import { useLoading } from "../useLoading";
 
 interface IUISetting {
   contrast_logo?: string;
@@ -10,52 +12,44 @@ interface IUISetting {
 
 interface IUseSettings {
   readonly uiSettings: Ref<IUISetting>;
-  getUiCustomizationSettings: () => void;
+  readonly loading: ComputedRef<boolean>;
   applySettings: (args: { logo?: string; title?: string }) => void;
 }
 
-const uiSettings = ref<IUISetting>({
-  logo: undefined,
-  title: undefined,
-});
+const uiSettings = ref<IUISetting | undefined>();
 export function useSettings(): IUseSettings {
-  const { getAccessToken } = useUser();
   const base = inject("platformUrl");
 
-  async function getApiClient() {
-    const client = new SettingClient();
-    client.setAuthToken((await getAccessToken()) ?? "");
-    return client;
-  }
+  const { getApiClient } = useApiClient(SettingClient);
 
-  async function getUiCustomizationSettings() {
-    const client = await getApiClient();
+  const { loading, action: getUiCustomizationSettings } = useAsync(async () => {
+    const result = await (await getApiClient()).getUICustomizationSetting();
+    const settings = await JSON.parse(result.defaultValue ?? null);
 
-    try {
-      const result = await client.getUICustomizationSetting();
-      const settings = JSON.parse(result.defaultValue);
+    if (settings) {
       uiSettings.value = {
         contrast_logo: base + settings.contrast_logo,
         logo: base + settings.logo,
         title: settings.title,
       };
-    } catch (e) {
-      console.error(e);
     }
-  }
+  });
 
   function applySettings(args: { logo?: string; title?: string }) {
-    if (args.logo) {
-      uiSettings.value.logo = args.logo;
-    }
-    if (args.title) {
-      uiSettings.value.title = args.title;
-    }
+    uiSettings.value = {
+      ...uiSettings.value,
+      logo: args.logo,
+      title: args.title,
+    };
   }
 
+  onBeforeMount(async () => {
+    await getUiCustomizationSettings();
+  });
+
   return {
-    uiSettings: computed(() => uiSettings.value),
-    getUiCustomizationSettings,
+    uiSettings: computed(() => uiSettings.value ?? {}),
     applySettings,
+    loading: useLoading(loading),
   };
 }

package/core/composables/useUser/index.ts

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { computed, Ref, ref, ComputedRef } from "vue";
-import ClientOAuth2 from "client-oauth2";
 import {
   UserDetail,
   SecurityClient,
@@ -12,29 +11,21 @@ import {
   ChangePasswordRequest,
   LoginType,
   ExternalSignInProviderInfo,
+  LoginRequest,
+  SignInResult,
 } from "./../../api/platform";
-import { AuthData, RequestPasswordResult, SignInResults } from "./../../types";
-import { useLocalStorage, useStorage } from "@vueuse/core";
-//The Platform Manager uses the same key to store authorization data in the
-//local storage, so we can exchange authorization data between the Platform Manager
-//and the user application that is hosted in the same domain as the sub application.
-const VC_AUTH_DATA_KEY = "ls.authenticationData";
+import { RequestPasswordResult } from "./../../types";
+import { createSharedComposable, useLocalStorage } from "@vueuse/core";
 
-const user: Ref<UserDetail | undefined> = ref();
-const loading: Ref<boolean> = ref(false);
-const authClient = new ClientOAuth2({
-  accessTokenUri: `/connect/token`,
-  scopes: ["offline_access"],
-});
-const securityClient = new SecurityClient();
+const VC_EXTERNAL_AUTH_DATA_KEY = "externalSignIn";
 
 interface IUseUser {
   user: ComputedRef<UserDetail | undefined>;
   loading: ComputedRef<boolean>;
   isAdministrator: ComputedRef<boolean | undefined>;
-  getAccessToken: () => Promise<string | undefined>;
+  // getAccessToken: () => Promise<string | undefined>;
   loadUser: () => Promise<UserDetail>;
-  signIn: (username: string, password: string) => Promise<SignInResults>;
+  signIn: (username: string, password: string) => Promise<SignInResult | { succeeded: boolean; error?: any }>;
   signOut: () => Promise<void>;
   validateToken: (userId: string, token: string) => Promise<boolean>;
   validatePassword: (password: string) => Promise<IdentityResult>;
@@ -44,28 +35,25 @@ interface IUseUser {
   getExternalLoginProviders: () => Promise<ExternalSignInProviderInfo[] | undefined>;
   externalSignIn: (authenticationType?: string | undefined, returnUrl?: string | undefined) => void;
   getLoginType: () => Promise<LoginType[]>;
-  isAuthenticated: () => Promise<boolean>;
+  isAuthenticated: ComputedRef<boolean>;
 }
+const user: Ref<UserDetail | undefined> = ref();
+function useUserFn(): IUseUser {
+  const loading: Ref<boolean> = ref(false);
 
-const simulateLogin = async () => {
-  return {
-    accessToken: "testToken",
-    refreshToken: "testTokenRefresh",
-    data: { expires_in: new Date(new Date().setDate(new Date().getDate() + 1)) },
-  };
-};
-
-export function useUser(): IUseUser {
-  const authData: Ref<AuthData | null> = useStorage(VC_AUTH_DATA_KEY, {});
+  const securityClient = new SecurityClient();
   const base = window.location.origin + "/";
   const externalSecurityClient = new ExternalSignInClient(base);
-  const externalSignInStorage = useLocalStorage<{ providerType: string | undefined }>("externalSignIn", {
-    providerType: undefined,
-  });
+  const externalSignInStorage = useLocalStorage<{ providerType?: string | undefined }>(
+    VC_EXTERNAL_AUTH_DATA_KEY,
+    {},
+    {
+      listenToStorageChanges: true,
+      deep: true,
+    },
+  );
 
-  const isAuthenticated = async () => {
-    return !!((externalSignInStorage.value && externalSignInStorage.value.providerType) ?? (await getAccessToken()));
-  };
+  const isAuthenticated = computed(() => user.value?.userName != null);
 
   async function validateToken(userId: string, token: string): Promise<boolean> {
     let result = false;
@@ -93,69 +81,55 @@ export function useUser(): IUseUser {
     } as ResetPasswordConfirmRequest);
   }
 
-  async function signIn(username: string, password: string): Promise<SignInResults> {
+  async function signIn(
+    username: string,
+    password: string,
+  ): Promise<SignInResult | { succeeded: boolean; error?: any }> {
     console.debug(`[@vc-shell/framework#useUser:signIn] - Entry point`);
-    let token = undefined;
     try {
       loading.value = true;
-      token = !window.__DEMO_MODE__ ? await authClient.owner.getToken(username, password) : await simulateLogin();
-    } catch (e) {
+      const result = await securityClient.login(new LoginRequest({ userName: username, password }));
+      return await securityClient
+        .getCurrentUser()
+        .then((res) => {
+          if (res) {
+            user.value = res;
+            return result;
+          }
+          throw { succeeded: false };
+        })
+        .catch((e) => {
+          throw e;
+        });
+    } catch (e: any) {
       //TODO: log error
-      return { succeeded: false, error: e as string };
+      console.log(e);
+      return { succeeded: false, error: e.message };
     } finally {
       loading.value = false;
     }
-
-    if (token) {
-      authData.value = {
-        accessToken: token.accessToken,
-        refreshToken: token.refreshToken,
-        expiresAt: addOffsetToCurrentDate(Number(token.data?.["expires_in"])),
-        userName: username,
-      };
-      console.log("[useUser]: an access token has been obtained successfully", authData.value);
-
-      storeAuthData(authData.value);
-    }
-
-    await loadUser();
-    return { succeeded: true };
   }
 
   async function signOut(): Promise<void> {
     console.debug(`[@vc-shell/framework#useUser:signOut] - Entry point`);
 
-    if (externalSignInStorage.value && externalSignInStorage.value.providerType) {
-      externalSignOut(externalSignInStorage.value.providerType);
+    if (externalSignInStorage.value?.providerType) {
+      await externalSignOut(externalSignInStorage.value.providerType);
     } else {
       user.value = undefined;
-      authData.value = null;
-      storeAuthData(null);
+      securityClient.logout();
     }
   }
 
   async function loadUser(): Promise<UserDetail> {
     console.debug(`[@vc-shell/framework#useUser:loadUser] - Entry point`);
 
-    if (!externalSignInStorage.value?.providerType) {
-      const token = await getAccessToken();
-      if (token) {
-        securityClient.setAuthToken(token);
-      }
-    }
-
     try {
       loading.value = true;
-      user.value = !window.__DEMO_MODE__
-        ? await securityClient.getCurrentUser()
-        : ({
-            id: "testUserId",
-            userName: "testUserName",
-          } as UserDetail);
-
+      user.value = await securityClient.getCurrentUser();
       console.log("[useUser]: an user details has been loaded", user.value);
     } catch (e: any) {
-      console.dir(e);
+      console.error(e);
     } finally {
       loading.value = false;
     }
@@ -163,50 +137,6 @@ export function useUser(): IUseUser {
     return { ...user.value } as UserDetail;
   }
 
-  async function getAccessToken(): Promise<string | undefined> {
-    console.debug(`[@vc-shell/framework#useUser:getAccessToken] - Entry point`);
-    if (authData.value) {
-      if (Date.now() >= (authData.value.expiresAt ?? 0)) {
-        const token = authClient.createToken(
-          authData.value.accessToken ?? authData.value.token ?? "",
-          authData.value.refreshToken ?? "",
-          {}
-        );
-
-        console.log("[useUser]: an access token is expired, using refresh token to receive a new");
-        try {
-          const newToken = await token.refresh();
-          if (newToken) {
-            authData.value = {
-              ...authData.value,
-              accessToken: newToken.accessToken,
-              token: newToken.accessToken,
-              refreshToken: newToken.refreshToken,
-              expiresAt: addOffsetToCurrentDate(Number(newToken.data["expires_in"])),
-            };
-            storeAuthData(authData.value);
-          }
-        } catch (e: any) {
-          console.log("[useUser]: getAccessToken() returns error", e);
-        }
-      }
-
-      return authData.value?.accessToken ?? authData.value?.token;
-    }
-  }
-
-  function storeAuthData(data: AuthData | null) {
-    authData.value = data;
-  }
-
-  async function readAuthData(): Promise<AuthData> {
-    return (await JSON.parse(localStorage.getItem(VC_AUTH_DATA_KEY) || "{}")) as AuthData;
-  }
-
-  function addOffsetToCurrentDate(offsetInSeconds: number): number {
-    return Date.now() + offsetInSeconds * 1000;
-  }
-
   async function requestPasswordReset(loginOrEmail: string): Promise<RequestPasswordResult> {
     try {
       loading.value = true;
@@ -221,23 +151,20 @@ export function useUser(): IUseUser {
   }
 
   async function changeUserPassword(oldPassword: string, newPassword: string): Promise<SecurityResult | undefined> {
-    const token = await getAccessToken();
     let result;
 
-    if (token) {
-      try {
-        loading.value = true;
-        const command = new ChangePasswordRequest({
-          oldPassword,
-          newPassword,
-        });
+    try {
+      loading.value = true;
+      const command = new ChangePasswordRequest({
+        oldPassword,
+        newPassword,
+      });
 
-        result = await securityClient.changeCurrentUserPassword(command);
-      } catch (e: any) {
-        return { succeeded: false, errors: [e.message] } as SecurityResult;
-      } finally {
-        loading.value = false;
-      }
+      result = await securityClient.changeCurrentUserPassword(command);
+    } catch (e: any) {
+      return { succeeded: false, errors: [e.message] } as SecurityResult;
+    } finally {
+      loading.value = false;
     }
 
     return result;
@@ -297,7 +224,7 @@ export function useUser(): IUseUser {
     try {
       externalSecurityClient.signOut(authenticationType);
 
-      externalSignInStorage.value = null;
+      externalSignInStorage.value = {};
     } catch (e) {
       console.error(e);
       throw e;
@@ -309,7 +236,7 @@ export function useUser(): IUseUser {
     loading: computed(() => loading.value),
     isAdministrator: computed(() => user.value?.isAdministrator),
     isAuthenticated,
-    getAccessToken,
+    // getAccessToken,
     loadUser,
     signIn,
     signOut,
@@ -323,3 +250,5 @@ export function useUser(): IUseUser {
     getLoginType,
   };
 }
+
+export const useUser = createSharedComposable(() => useUserFn());

package/core/directives/loading/styles.css

@@ -5,9 +5,9 @@
 }
 
 .v-loading::before {
-  content: '';
+  content: "";
   position: absolute;
-  z-index: 99998;
+  z-index: 9998;
   top: 0;
   right: 0;
   bottom: 0;
@@ -17,9 +17,9 @@
 }
 
 .v-loading::after {
-  content: '';
+  content: "";
   position: absolute;
-  z-index: 99999;
+  z-index: 9999;
   width: 30px;
   height: 30px;
   border: 4px solid #319ed4;
@@ -33,6 +33,6 @@
 
 @keyframes v-loading {
   to {
-      transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }