@vc-shell/framework 1.0.38 → 1.0.40

package/core/composables/index.ts

@@ -0,0 +1,8 @@
+export { default as useFunctions } from "./useFunctions";
+export { default as useI18n } from "./useI18n";
+export { default as useLogger } from "./useLogger";
+export { default as useUser } from "./useUser";
+export { default as useNotifications } from "./useNotifications";
+export { default as useSettings } from "./useSettings";
+export { default as usePermissions } from "./usePermissions";
+export { default as useAutosave } from "./useAutosave";

package/core/composables/useAutosave/index.ts

@@ -0,0 +1,57 @@
+import { computed, isRef, Ref, ref, unref, watch } from "vue";
+
+interface IUseAutosave {
+  savedValue: Ref<Record<string, unknown>>;
+  loadAutosaved: () => void;
+  resetAutosaved: () => void;
+}
+
+export default (data, modified, defaultName: string): IUseAutosave => {
+  const rawValue = computed(() => (isRef(data) ? unref(data) : data));
+  const isModified = computed(() =>
+    isRef(modified) ? unref(modified) : modified
+  );
+  const savedValue = ref();
+
+  const isSaving = ref(false);
+
+  watch(isModified, () => {
+    if (isModified.value) {
+      isSaving.value = true;
+    } else {
+      isSaving.value = false;
+      resetAutosaved();
+    }
+  });
+
+  watch(
+    [rawValue, isSaving],
+    () => {
+      if (isSaving.value) {
+        saveToStorage();
+      }
+    },
+    { deep: true }
+  );
+
+  function saveToStorage() {
+    localStorage.setItem(defaultName, JSON.stringify(rawValue.value));
+  }
+
+  function loadAutosaved() {
+    const savedData = JSON.parse(localStorage.getItem(defaultName));
+    if (savedData) {
+      savedValue.value = savedData;
+    }
+  }
+
+  function resetAutosaved() {
+    localStorage.removeItem(defaultName);
+  }
+
+  return {
+    savedValue: computed(() => savedValue.value),
+    loadAutosaved,
+    resetAutosaved,
+  };
+};

package/core/composables/useFunctions/debounce.ts

@@ -0,0 +1,18 @@
+export default function debounce(
+  func: (...args: unknown[]) => void,
+  delay: number
+): (...args: unknown[]) => void {
+  console.debug(`[@vc-shell/framework#useFunctions:debounce] - Entry point`);
+  let timer: number | null = null;
+
+  return function (...args: unknown[]): void {
+    if (timer) {
+      clearTimeout(timer);
+    }
+
+    timer = window.setTimeout(() => {
+      timer = null;
+      func(...args);
+    }, delay);
+  };
+}

package/core/composables/useFunctions/delay.ts

@@ -0,0 +1,7 @@
+export default function delay(
+  func: (...args: unknown[]) => void,
+  delay = 0
+): void {
+  console.debug(`[@vc-shell/framework#useFunctions:delay] - Entry point`);
+  setTimeout(func, delay);
+}

package/core/composables/useFunctions/index.ts

@@ -0,0 +1,21 @@
+import debounce from "./debounce";
+import delay from "./delay";
+import once from "./once";
+import throttle from "./throttle";
+
+interface IUseFunctions {
+  debounce: typeof debounce;
+  delay: typeof delay;
+  once: typeof once;
+  throttle: typeof throttle;
+}
+
+export default function useFunctions(): IUseFunctions {
+  console.debug("useFunctions entry point");
+  return {
+    debounce,
+    delay,
+    once,
+    throttle,
+  };
+}

package/core/composables/useFunctions/once.ts

@@ -0,0 +1,14 @@
+const resultsMap = new WeakMap();
+
+export default function once(
+  func: (...args: unknown[]) => void
+): (...args: unknown[]) => unknown {
+  console.debug(`[@vc-shell/framework#useFunctions:once] - Entry point`);
+  return function (...args: unknown[]): unknown {
+    if (!resultsMap.has(func)) {
+      const result = func(...args);
+      resultsMap.set(func, result);
+    }
+    return resultsMap.get(func);
+  };
+}

package/core/composables/useFunctions/sleep.ts

@@ -0,0 +1,4 @@
+export default function sleep(ms: number): Promise<void> {
+  console.debug(`[@vc-shell/framework#useFunctions:sleep] - Entry point`);
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

package/core/composables/useFunctions/throttle.ts

@@ -0,0 +1,17 @@
+export default function throttle(
+  func: (...args: unknown[]) => void,
+  delay: number
+): (...args: unknown[]) => void {
+  console.debug(`[@vc-shell/framework#useFunctions:throttle] - Entry point`);
+  let wasThrottled = false;
+
+  return function (...args: unknown[]): void {
+    if (!wasThrottled) {
+      func(...args);
+      wasThrottled = true;
+      setTimeout(() => {
+        wasThrottled = false;
+      }, delay);
+    }
+  };
+}

package/core/composables/useI18n/index.ts

@@ -0,0 +1,28 @@
+import { App } from "vue";
+import {Composer, createI18n, useI18n as VueUseI18n, VueMessageType} from "vue-i18n";
+
+export function init(app: App): App {
+  console.debug(`[@vc-shell/framework#useI18n:init] - Entry point`);
+  const i18nPlugin = createI18n({
+    legacy: false,
+    globalInjection: true,
+    locale: "en",
+    fallbackLocale: "en",
+  });
+  app.use(i18nPlugin);
+
+  app.config.globalProperties.$mergeLocaleMessage =
+    i18nPlugin.global.mergeLocaleMessage;
+
+  return app;
+}
+
+export default function useI18n(): Composer<
+    unknown,
+    unknown,
+    unknown,
+    {}
+    > {
+  console.debug(`[@vc-shell/framework#useI18n] - Entry point`);
+  return VueUseI18n({ useScope: "global" });
+}

package/core/composables/useLogger/index.ts

@@ -0,0 +1,24 @@
+import { App } from "vue";
+import {
+  createLogger,
+  LogLevel,
+  useLogger as useVueLogger,
+  VueLogger,
+} from "vue-logger-plugin";
+
+export function init(app: App): App {
+  console.debug(`[@vc-shell/framework#useLogger:init] - Entry point`);
+  app.use(
+    createLogger({
+      enabled: import.meta.env.APP_LOG_ENABLED === "true",
+      level: (import.meta.env.APP_LOG_LEVEL ?? "debug") as LogLevel,
+    })
+  );
+
+  return app;
+}
+
+export default function useLogger(): VueLogger {
+  console.debug(`[@vc-shell/framework#useLogger] - Entry point`);
+  return useVueLogger();
+}

package/core/composables/useNotifications/index.ts

@@ -0,0 +1,116 @@
+import { PushNotification, PushNotificationClient } from "@/core/api";
+import useUser from "../useUser";
+import { computed, ComputedRef, readonly, ref } from "vue";
+import useLogger from "../useLogger";
+import { orderBy, remove } from "lodash-es";
+
+const notificationsClient = new PushNotificationClient();
+
+interface INotifications {
+  readonly notifications: ComputedRef<Readonly<PushNotification[]>>;
+  readonly popupNotifications: ComputedRef<Readonly<PushNotification[]>>;
+  loadFromHistory(take?: number): void;
+  addNotification(message: PushNotification): void;
+  markAsRead(message: PushNotification): void;
+  dismiss(message: PushNotification): void;
+  dismissAll(): void;
+  markAllAsRead(): void;
+}
+
+const notifications = ref<PushNotification[]>([]);
+const popupNotifications = ref<PushNotification[]>([]);
+
+export default (): INotifications => {
+  const { getAccessToken } = useUser();
+  const logger = useLogger();
+
+  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 }),
+        });
+
+        result.text().then((response) => {
+          notifications.value =
+            <PushNotification[]>JSON.parse(response).notifyEvents ?? [];
+        });
+      } catch (e) {
+        logger.error(e);
+        throw e;
+      }
+    }
+  }
+
+  function addNotification(message: PushNotification) {
+    if (message.notifyType !== "IndexProgressPushNotification") {
+      const existsNotification = notifications.value.find(
+        (x) => x.id == message.id
+      );
+
+      if (existsNotification) {
+        message.isNew = existsNotification.isNew;
+        Object.assign(existsNotification, message);
+      } else {
+        popupNotifications.value.unshift(message);
+        notifications.value.unshift(message);
+      }
+    }
+  }
+
+  function markAsRead(message: PushNotification) {
+    message.isNew = false;
+    remove(popupNotifications.value, (x) => x.id == message.id);
+  }
+
+  function dismiss(message: PushNotification) {
+    remove(popupNotifications.value, (x) => x.id == message.id);
+    remove(notifications.value, (x) => x.id == message.id);
+  }
+
+  function dismissAll() {
+    popupNotifications.value = [];
+    notifications.value = [];
+  }
+
+  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) {
+        logger.error(e);
+        throw e;
+      }
+    }
+  }
+
+  return {
+    notifications: computed(() =>
+      readonly(orderBy(notifications.value, ["created"], ["desc"]))
+    ),
+    popupNotifications: computed(() => readonly(popupNotifications.value)),
+    loadFromHistory,
+    addNotification,
+    dismissAll,
+    dismiss,
+    markAsRead,
+    markAllAsRead,
+  };
+};

package/core/composables/usePermissions/index.ts

@@ -0,0 +1,32 @@
+import { useUser } from "@/core/composables";
+import { computed, ComputedRef } from "vue";
+
+interface IUsePermissions {
+  readonly userPermissions: ComputedRef<string[]>;
+  checkPermission(permissions: string | string[]): boolean;
+}
+
+export default (): IUsePermissions => {
+  const { user } = useUser();
+
+  function checkPermission(permissions: string | string[] | undefined) {
+    if (!permissions) {
+      return true;
+    } else if (permissions || (permissions && permissions instanceof Array)) {
+      if (typeof permissions === "string") {
+        return user.value?.permissions.includes(permissions);
+      } else if (permissions.length > 0) {
+        return user.value?.permissions.some((role) => {
+          return permissions.includes(role);
+        });
+      }
+    } else {
+      console.error("Permissions must be a string or strings array");
+    }
+  }
+
+  return {
+    userPermissions: computed(() => user.value?.permissions),
+    checkPermission,
+  };
+};

package/core/composables/useSettings/index.ts

@@ -0,0 +1,62 @@
+import { useUser, useLogger } from "@/core/composables";
+import { computed, Ref, ref } from "vue";
+import { ObjectSettingEntry, SettingClient } from "@/core/api";
+
+interface IUISetting {
+  contrast_logo?: string;
+  logo?: string;
+  title?: string;
+}
+
+interface IUseSettings {
+  readonly uiSettings: Ref<IUISetting>;
+  getUiCustomizationSettings: () => void;
+  applySettings: (args: { logo?: string; title?: string }) => void;
+}
+
+const uiSettings = ref<IUISetting>({
+  logo: undefined,
+  title: undefined,
+});
+export default (): IUseSettings => {
+  const { getAccessToken } = useUser();
+  const logger = useLogger();
+
+  async function getApiClient() {
+    const client = new SettingClient();
+    client.setAuthToken(await getAccessToken());
+    return client;
+  }
+
+  async function getUiCustomizationSettings() {
+    const client = await getApiClient();
+    const base = window.location.origin;
+
+    try {
+      const result = await client.getUICustomizationSetting();
+      const settings = JSON.parse(result.defaultValue);
+      uiSettings.value = {
+        contrast_logo: base + settings.contrast_logo,
+        logo: base + settings.logo,
+        title: settings.title,
+      };
+    } catch (e) {
+      logger.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;
+    }
+  }
+
+  return {
+    uiSettings: computed(() => uiSettings.value),
+    getUiCustomizationSettings,
+    applySettings,
+  };
+};

package/core/composables/useUser/index.ts

@@ -0,0 +1,266 @@
+import { computed, Ref, ref, ComputedRef } from "vue";
+import ClientOAuth2 from "client-oauth2";
+import {
+  UserDetail,
+  SecurityClient,
+  ResetPasswordConfirmRequest,
+  SecurityResult,
+  ValidatePasswordResetTokenRequest,
+  IdentityResult,
+} from "@/core/api";
+import { AuthData, RequestPasswordResult, SignInResults } from "@/core/types";
+//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";
+
+const user: Ref<UserDetail> = ref();
+const loading: Ref<boolean> = ref(false);
+const authData: Ref<AuthData> = ref();
+const authClient = new ClientOAuth2({
+  accessTokenUri: `/connect/token`,
+  scopes: ["offline_access"],
+});
+const securityClient = new SecurityClient();
+
+interface IUseUser {
+  user: ComputedRef<UserDetail | null>;
+  loading: ComputedRef<boolean>;
+  getAccessToken: () => Promise<string | null>;
+  loadUser: () => Promise<UserDetail>;
+  signIn: (username: string, password: string) => Promise<SignInResults>;
+  signOut: () => Promise<void>;
+  validateToken: (userId: string, token: string) => Promise<boolean>;
+  validatePassword: (password: string) => Promise<IdentityResult>;
+  resetPasswordByToken: (
+    userId: string,
+    password: string,
+    token: string
+  ) => Promise<SecurityResult>;
+  requestPasswordReset: (
+    loginOrEmail: string
+  ) => Promise<RequestPasswordResult>;
+  changeUserPassword: (
+    oldPassword: string,
+    newPassword: string
+  ) => Promise<SecurityResult>;
+}
+
+export default (): IUseUser => {
+  async function validateToken(
+    userId: string,
+    token: string
+  ): Promise<boolean> {
+    let result = false;
+    try {
+      loading.value = true;
+      result = await securityClient.validatePasswordResetToken(userId, {
+        token,
+      } as ValidatePasswordResetTokenRequest);
+    } catch (e) {
+      //TODO: log error
+    } finally {
+      loading.value = false;
+    }
+    return result;
+  }
+
+  async function validatePassword(password: string): Promise<IdentityResult> {
+    return securityClient.validatePassword(password);
+  }
+
+  async function resetPasswordByToken(
+    userId: string,
+    password: string,
+    token: string
+  ): Promise<SecurityResult> {
+    return securityClient.resetPasswordByToken(userId, {
+      newPassword: password,
+      token,
+    } as ResetPasswordConfirmRequest);
+  }
+
+  async function signIn(
+    username: string,
+    password: string
+  ): Promise<SignInResults> {
+    console.debug(`[@vc-shell/framework#useUser:signIn] - Entry point`);
+    let token = undefined;
+    try {
+      loading.value = true;
+      token = await authClient.owner.getToken(username, password);
+    } catch (e) {
+      //TODO: log error
+      return { succeeded: false, error: e as string };
+    } 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(
+        "[userUsers]: 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`);
+    user.value = undefined;
+    authData.value = undefined;
+    storeAuthData({});
+    //todo
+  }
+
+  async function loadUser(): Promise<UserDetail> {
+    console.debug(`[@vc-shell/framework#useUser:loadUser] - Entry point`);
+    const token = await getAccessToken();
+    if (token) {
+      securityClient.setAuthToken(token);
+      try {
+        loading.value = true;
+        user.value = await securityClient.getCurrentUser();
+        console.log("[userUsers]: an user details has been loaded", user.value);
+      } catch (e) {
+        console.dir(e);
+        //TODO: log error
+      } finally {
+        loading.value = false;
+      }
+    }
+    return { ...user.value } as UserDetail;
+  }
+
+  async function getAccessToken(): Promise<string | null> {
+    console.debug(`[@vc-shell/framework#useUser:getAccessToken] - Entry point`);
+    if (!authData.value) {
+      authData.value = readAuthData();
+    }
+
+    if (authData.value && Date.now() >= (authData.value.expiresAt ?? 0)) {
+      const token = authClient.createToken(
+        authData.value.accessToken ?? authData.value.token ?? "",
+        authData.value.refreshToken ?? "",
+        {}
+      );
+      console.log(
+        "[userUsers]: 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) {
+        console.log("[userUsers]: getAccessToken() returns error", e);
+      }
+    }
+
+    return authData.value?.accessToken ?? authData.value?.token;
+  }
+
+  function storeAuthData(authData: AuthData) {
+    localStorage.setItem(
+      VC_AUTH_DATA_KEY,
+      JSON.stringify({ ...(authData || {}) })
+    );
+  }
+  function readAuthData(): AuthData {
+    return 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;
+      await securityClient.requestPasswordReset(loginOrEmail);
+      return { succeeded: true };
+    } catch (e) {
+      //TODO: log error
+      return { succeeded: false, error: e as string };
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function changeUserPassword(
+    oldPassword: string,
+    newPassword: string
+  ): Promise<SecurityResult> {
+    const token = await getAccessToken();
+    let result;
+
+    // TODO it's temporary workaround to get valid errors
+    if (token) {
+      try {
+        loading.value = true;
+        const res = await fetch(
+          "/api/platform/security/currentuser/changepassword",
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json-patch+json",
+              Accept: "text/plain",
+              authorization: `Bearer ${token}`,
+            },
+            body: JSON.stringify({
+              oldPassword,
+              newPassword,
+            }),
+          }
+        );
+        if (res.status !== 500) {
+          result = await res.text().then((response) => {
+            return JSON.parse(response);
+          });
+        }
+      } catch (e) {
+        return { succeeded: false, errors: [e.message] } as SecurityResult;
+      } finally {
+        loading.value = false;
+      }
+    }
+
+    return result as SecurityResult;
+  }
+
+  return {
+    user: computed(() => user.value),
+    loading: computed(() => loading.value),
+    getAccessToken,
+    loadUser,
+    signIn,
+    signOut,
+    validateToken,
+    validatePassword,
+    resetPasswordByToken,
+    requestPasswordReset,
+    changeUserPassword,
+  };
+};

package/core/directives/autofocus/index.ts

@@ -0,0 +1,9 @@
+import { Directive, DirectiveBinding } from "vue";
+
+export default {
+  mounted(el: HTMLElement, binding: DirectiveBinding): void {
+    if (binding.value) {
+      el.focus();
+    }
+  },
+} as Directive;