@vc-shell/framework 1.0.69 → 1.0.71

package/core/composables/index.ts

@@ -8,3 +8,4 @@ export * from "./useAsync";
 export * from "./useApiClient";
 export * from "./useLoading";
 export * from "./useErrorHandler";
+export * from "./useMenuComposer";

package/core/composables/useMenuComposer/index.ts

@@ -0,0 +1,25 @@
+import { BladeMenu, IBladeToolbar, NavigationMenu, ToolbarMenu } from "./../../types";
+
+interface IUseMenuComposer {
+  navigationMenuComposer<T extends BladeMenu[]>(items: [...{ [I in keyof T]: NavigationMenu<T[I]> }]): BladeMenu[];
+  toolbarComposer<T extends IBladeToolbar[]>(items: [...{ [I in keyof T]: ToolbarMenu<T[I]> }]): IBladeToolbar[];
+}
+
+export function useMenuComposer(): IUseMenuComposer {
+  function navigationMenuComposer<T extends BladeMenu[]>(
+    items: [...{ [I in keyof T]: NavigationMenu<T[I]> }]
+  ): BladeMenu[] {
+    return items;
+  }
+
+  function toolbarComposer<T extends IBladeToolbar[]>(
+    items: [...{ [I in keyof T]: ToolbarMenu<T[I]> }]
+  ): IBladeToolbar[] {
+    return items;
+  }
+
+  return {
+    navigationMenuComposer,
+    toolbarComposer,
+  };
+}

package/core/composables/useNotifications/index.ts

@@ -1,25 +1,23 @@
 import { PushNotification, PushNotificationClient } from "./../../api";
 import { useUser } from "./../useUser";
-import { computed, ComputedRef, readonly, ref } from "vue";
+import { computed, ComputedRef, ref } from "vue";
 import * as _ from "lodash-es";
 
 const notificationsClient = new PushNotificationClient();
 
 interface INotifications {
-  readonly notifications: ComputedRef<Readonly<PushNotification[]>>;
-  readonly popupNotifications: ComputedRef<Readonly<PushNotification[]>>;
-  loadFromHistory(take?: number): void;
+  readonly notifications: ComputedRef<PushNotification[]>;
+  readonly moduleNotifications: ComputedRef<PushNotification[]>;
+  loadFromHistory(take?: number): Promise<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[]>([]);
+const pushNotifications = ref<PushNotification[]>([]);
 
-export function useNotifications(): INotifications {
+export function useNotifications(notifyType?: string | string[]): INotifications {
   const { getAccessToken } = useUser();
 
   async function loadFromHistory(take = 10) {
@@ -50,43 +48,32 @@ export function useNotifications(): INotifications {
 
   function addNotification(message: PushNotification) {
     if (message.notifyType !== "IndexProgressPushNotification") {
-      const existsNotification = notifications.value.find((x) => x.id == message.id);
-      const existPushNotification = popupNotifications.value.find((x) => x.id == message.id);
+      const existsNotification = notifications.value.find((x: PushNotification) => x.id == message.id);
+      const existPushNotification = pushNotifications.value.find((x) => x.id == message.id);
 
       if (existsNotification) {
         message.isNew = existsNotification.isNew;
         Object.assign(existsNotification, message);
       } else {
-        notifications.value.unshift(message);
+        notifications.value.push(new PushNotification(message));
       }
 
       if (existPushNotification) {
-        message.isNew = true;
+        message.isNew = existPushNotification.isNew;
         Object.assign(existPushNotification, message);
       } else {
-        popupNotifications.value.unshift(message);
+        pushNotifications.value.push(new PushNotification(message));
       }
     }
   }
 
   function markAsRead(message: PushNotification) {
-    const mes = popupNotifications.value.find((x) => x.id === message.id);
-    if (mes) {
-      mes.isNew = false;
-      _.remove(popupNotifications.value, (x) => x.id == message.id);
+    const exists = pushNotifications.value.find((x) => x.id === message.id);
+    if (exists) {
+      Object.assign(exists, { ...message, isNew: false });
     }
   }
 
-  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) {
@@ -106,13 +93,20 @@ export function useNotifications(): INotifications {
     }
   }
 
+  const moduleNotifications = computed(
+    () =>
+      (notifyType &&
+        pushNotifications.value.filter(
+          (item: PushNotification) => item.isNew && notifyType.includes(item.notifyType)
+        )) ??
+      []
+  );
+
   return {
-    notifications: computed(() => readonly(_.orderBy(notifications.value, ["created"], ["desc"]))),
-    popupNotifications: computed(() => readonly(popupNotifications.value)),
+    notifications: computed(() => _.orderBy(notifications.value, ["created"], ["desc"])),
+    moduleNotifications,
     loadFromHistory,
     addNotification,
-    dismissAll,
-    dismiss,
     markAsRead,
     markAllAsRead,
   };

package/core/composables/useUser/index.ts

@@ -1,4 +1,4 @@
-import { computed, Ref, ref, ComputedRef } from "vue";
+import { computed, Ref, ref, ComputedRef, onUnmounted, getCurrentInstance } from "vue";
 import ClientOAuth2 from "client-oauth2";
 import {
   UserDetail,
@@ -9,6 +9,8 @@ import {
   IdentityResult,
 } from "./../../api";
 import { AuthData, RequestPasswordResult, SignInResults } from "./../../types";
+import * as _ from "lodash-es";
+import fetchIntercept from "fetch-intercept";
 //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.
@@ -21,11 +23,25 @@ const authClient = new ClientOAuth2({
   accessTokenUri: `/connect/token`,
   scopes: ["offline_access"],
 });
+const isExternalSignedIn = ref(false);
+const activeAuthenticationType = ref();
 const securityClient = new SecurityClient();
 
+export interface LoginTypes {
+  enabled?: boolean;
+  hasLoginForm?: boolean;
+  authenticationType?: string;
+  priority?: number;
+}
+export interface LoginProviders {
+  authenticationType?: string;
+  displayName?: string;
+}
+
 interface IUseUser {
   user: ComputedRef<UserDetail | null>;
   loading: ComputedRef<boolean>;
+  isExternalSignedIn: Ref<boolean>;
   getAccessToken: () => Promise<string | null>;
   loadUser: () => Promise<UserDetail>;
   signIn: (username: string, password: string) => Promise<SignInResults>;
@@ -35,9 +51,23 @@ interface IUseUser {
   resetPasswordByToken: (userId: string, password: string, token: string) => Promise<SecurityResult>;
   requestPasswordReset: (loginOrEmail: string) => Promise<RequestPasswordResult>;
   changeUserPassword: (oldPassword: string, newPassword: string) => Promise<SecurityResult>;
+  getExternalLoginProviders: () => Promise<LoginProviders[]>;
+  externalSignIn: (authenticationType?: string | undefined, returnUrl?: string | undefined) => void;
+  externalSignOut: (authenticationType?: string | undefined) => void;
+  getLoginTypes: () => Promise<LoginTypes[]>;
+  isAzureAdAuthAvailable: () => Promise<boolean>;
+  getAzureAdAuthCaption: () => Promise<string>;
 }
 
 export function useUser(): IUseUser {
+  // const instance = getCurrentInstance();
+  // if (instance) {
+  //   onUnmounted(() => {
+  //     console.error("UNREGISTET");
+  //     unregister();
+  //   });
+  // }
+
   async function validateToken(userId: string, token: string): Promise<boolean> {
     let result = false;
     try {
@@ -84,7 +114,7 @@ export function useUser(): IUseUser {
         expiresAt: addOffsetToCurrentDate(Number(token.data["expires_in"])),
         userName: username,
       };
-      console.log("[userUsers]: an access token has been obtained successfully", authData.value);
+      console.log("[useUser]: an access token has been obtained successfully", authData.value);
 
       storeAuthData(authData.value);
       await loadUser();
@@ -94,10 +124,15 @@ export function useUser(): IUseUser {
 
   async function signOut(): Promise<void> {
     console.debug(`[@vc-shell/framework#useUser:signOut] - Entry point`);
-    user.value = undefined;
-    authData.value = undefined;
-    storeAuthData({});
-    //todo
+
+    if (!isExternalSignedIn.value) {
+      user.value = undefined;
+      authData.value = undefined;
+      storeAuthData({});
+    } else {
+      externalSignOut(activeAuthenticationType.value);
+      activeAuthenticationType.value = undefined;
+    }
   }
 
   async function loadUser(): Promise<UserDetail> {
@@ -108,10 +143,10 @@ export function useUser(): IUseUser {
       try {
         loading.value = true;
         user.value = await securityClient.getCurrentUser();
-        console.log("[userUsers]: an user details has been loaded", user.value);
+        console.log("[useUser]: an user details has been loaded", user.value);
       } catch (e) {
         console.dir(e);
-        //TODO: log error
+        throw e;
       } finally {
         loading.value = false;
       }
@@ -131,7 +166,7 @@ export function useUser(): IUseUser {
         authData.value.refreshToken ?? "",
         {}
       );
-      console.log("[userUsers]: an access token is expired, using refresh token to receive a new");
+      console.log("[useUser]: an access token is expired, using refresh token to receive a new");
       try {
         const newToken = await token.refresh();
         if (newToken) {
@@ -145,7 +180,7 @@ export function useUser(): IUseUser {
           storeAuthData(authData.value);
         }
       } catch (e) {
-        console.log("[userUsers]: getAccessToken() returns error", e);
+        console.log("[useUser]: getAccessToken() returns error", e);
       }
     }
 
@@ -211,9 +246,134 @@ export function useUser(): IUseUser {
     return result as SecurityResult;
   }
 
+  async function getLoginTypes(): Promise<LoginTypes[]> {
+    let result = null as LoginTypes[];
+    try {
+      const fetchResult = await fetch("/api/platform/security/logintypes", {
+        method: "GET",
+        headers: {},
+      });
+
+      const response = await fetchResult.text();
+      if (response && response.trim()) {
+        result = JSON.parse(response) as LoginTypes[];
+      }
+    } catch (e) {
+      console.error(e);
+
+      throw e;
+    }
+
+    return result;
+  }
+
+  async function getExternalLoginProviders(): Promise<LoginProviders[]> {
+    let result = null as LoginProviders[];
+    try {
+      const fetchResult = await fetch(import.meta.env.APP_PLATFORM_URL + "externalsignin/providers", {
+        method: "GET",
+        mode: "no-cors",
+      });
+
+      const response = await fetchResult.text();
+      if (response && response.trim()) {
+        result = JSON.parse(response) as LoginProviders[];
+      }
+    } catch (e) {
+      console.error(e);
+
+      throw e;
+    }
+
+    return result;
+  }
+
+  async function externalSignIn(authenticationType?: string | undefined, returnUrl?: string | undefined) {
+    activeAuthenticationType.value = authenticationType;
+    try {
+      let url_ = import.meta.env.APP_PLATFORM_URL + "externalsignin?";
+      if (authenticationType === null) throw new Error("The parameter 'authenticationType' cannot be null.");
+      else {
+        if (authenticationType !== undefined)
+          url_ += "authenticationType=" + encodeURIComponent("" + authenticationType) + "&";
+        if (returnUrl !== undefined) url_ += "returnUrl=" + encodeURIComponent("" + returnUrl) + "&";
+      }
+      url_ = url_.replace(/[?&]$/, "");
+      isExternalSignedIn.value = true;
+      initInterceptor();
+
+      window.location.href = url_;
+    } catch (e) {
+      isExternalSignedIn.value = false;
+      console.error(e);
+
+      throw e;
+    }
+  }
+
+  async function externalSignOut(authenticationType?: string | undefined): Promise<void> {
+    try {
+      let url_ = import.meta.env.APP_PLATFORM_URL + "externalsignin/signout?";
+      if (authenticationType === null) throw new Error("The parameter 'authenticationType' cannot be null.");
+      else {
+        if (authenticationType !== undefined)
+          url_ += "authenticationType=" + encodeURIComponent("" + authenticationType) + "&";
+      }
+      url_ = url_.replace(/[?&]$/, "");
+
+      await fetch(url_, {
+        method: "GET",
+        mode: "no-cors",
+        headers: {},
+      });
+
+      fetchIntercept.clear();
+    } catch (e) {
+      console.error(e);
+
+      throw e;
+    }
+    isExternalSignedIn.value = false;
+  }
+
+  async function isAzureAdAuthAvailable(): Promise<boolean> {
+    const loginTypes = await getLoginTypes();
+    if (loginTypes) {
+      return (
+        loginTypes.filter((x) => x.authenticationType === "AzureAD").length > 0 &&
+        loginTypes.find((x) => x.authenticationType === "AzureAD").enabled
+      );
+    }
+    return false;
+  }
+
+  async function getAzureAdAuthCaption(): Promise<string> {
+    const loginProviders = await getExternalLoginProviders();
+    if (loginProviders) {
+      return loginProviders.find((x) => x.authenticationType === "AzureAD").displayName;
+    }
+    return null;
+  }
+
+  /* Intercepting requests to explicitly remove auth token when we use AzureAd authentication */
+  function initInterceptor() {
+    console.log("[@vc-shell/framework#useUser:initInterceptor]: Entry point");
+    return fetchIntercept.register({
+      request: function (_url, config) {
+        if (isExternalSignedIn.value) {
+          const edited = _.omit(config.headers, "authorization");
+          config.headers = edited;
+        }
+
+        return [_url, config];
+      },
+    });
+  }
+
   return {
     user: computed(() => user.value),
     loading: computed(() => loading.value),
+    isExternalSignedIn,
     getAccessToken,
     loadUser,
     signIn,
@@ -223,5 +383,11 @@ export function useUser(): IUseUser {
     resetPasswordByToken,
     requestPasswordReset,
     changeUserPassword,
+    getExternalLoginProviders,
+    externalSignIn,
+    externalSignOut,
+    getLoginTypes,
+    isAzureAdAuthAvailable,
+    getAzureAdAuthCaption,
   };
 }

package/core/directives/index.ts

@@ -1,4 +1,3 @@
 export * from "./permissions";
 export * from "./autofocus";
-export * from "./click-outside";
 export * from "./loading";

package/core/plugins/index.ts

@@ -2,4 +2,4 @@ export * from "./moment";
 export * from "./i18n";
 export * from "./validation";
 export * from "./modularity";
-export * from "./error-interceptor";
+export * from "./signalR";

package/core/plugins/modularity/index.ts

@@ -17,7 +17,7 @@ export const createModule = (components: unknown, locales?: unknown) => ({
   },
 });
 
-export const createAppModule = (pages: unknown, locales?: unknown) => {
+export const createAppModule = (pages: unknown, locales?: unknown, notificationTemplates?: unknown) => {
   const module = createModule(pages, locales);
 
   return {
@@ -26,6 +26,13 @@ export const createAppModule = (pages: unknown, locales?: unknown) => {
       Object.entries(pages).forEach(([, page]) => {
         app.config.globalProperties.pages?.push(page);
       });
+
+      if (notificationTemplates) {
+        // Register notification templates
+        Object.entries(notificationTemplates).forEach(([, template]) => {
+          app.config.globalProperties.notificationTemplates?.push(template);
+        });
+      }
       module.install(app);
     },
   };

package/core/plugins/signalR/index.ts

@@ -0,0 +1,32 @@
+import { HubConnectionBuilder, LogLevel } from "@microsoft/signalr";
+import { PushNotification } from "../../api";
+import { useNotifications } from "./../../composables/useNotifications";
+
+const { addNotification } = useNotifications();
+
+export const signalR = {
+  install() {
+    const connection = new HubConnectionBuilder()
+      .withUrl("/pushNotificationHub")
+      .withAutomaticReconnect()
+      .configureLogging(LogLevel.Information)
+      .build();
+
+    let startedPromise = null;
+
+    function start() {
+      startedPromise = connection.start().catch((err) => {
+        console.error("Failed to connect", err);
+        return new Promise((resolve, reject) => setTimeout(() => start().then(resolve).catch(reject), 5000));
+      });
+      return startedPromise;
+    }
+    connection.onclose(() => start());
+
+    start();
+
+    connection.on("Send", (message: PushNotification) => {
+      addNotification(message);
+    });
+  },
+};

package/core/types/index.ts

@@ -1,5 +1,11 @@
-import { ComputedRef } from "vue";
-import { IBladeElement, ExtendedComponent } from "./../../shared";
+import { ComponentPublicInstance, ComputedRef, Ref } from "vue";
+import {
+  CoreBladeExposed,
+  BladeConstructor,
+  ExtractedBladeOptions,
+  ComponentInstanceConstructor,
+  BladeInstanceConstructor,
+} from "./../../shared";
 
 // Type instead of interface here is workaround for:
 // https://github.com/microsoft/TypeScript/issues/15300
@@ -20,36 +26,69 @@ export type IValidationRules = {
   size?: number;
 };
 
-export interface IBladeToolbar {
+export interface IBladeDropdownItem {
+  id: string;
+  title: string;
+  icon?: string;
+  clickHandler?(): void;
+}
+
+export interface BladeMenu<T extends ComponentPublicInstance = ComponentPublicInstance> {
+  title?: string | Ref<string>;
+  icon?: string;
+  isVisible?: boolean | Ref<boolean>;
+  component?: BladeConstructor<T>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  clickHandler?(app?: Record<string, any> | CoreBladeExposed): void;
+  children?: BladeMenu<T>[];
+  options?: ExtractedBladeOptions<InstanceType<BladeConstructor<T>>["$props"], "options">;
+}
+
+export interface IBladeToolbar<T extends ComponentPublicInstance = ComponentPublicInstance>
+  extends Omit<BladeMenu, "children" | "icon" | "options" | "component"> {
   id?: string;
   icon?: string | (() => string);
-  title?: string | unknown;
-  isVisible?: boolean | unknown;
   isAccent?: boolean | ComputedRef<boolean>;
-  component?: ExtendedComponent;
-  bladeOptions?: Record<string, unknown>;
+  component?: ComponentInstanceConstructor<T>;
   disabled?: boolean | ComputedRef<boolean>;
   dropdownItems?: IBladeDropdownItem[];
-  clickHandler?(app?: Record<string, unknown> | IBladeElement): void;
+  options?: InstanceType<ComponentInstanceConstructor<T>>["$props"];
 }
 
-export interface IBladeDropdownItem {
-  id: string;
-  title: string;
-  icon?: string;
-  clickHandler?(): void;
+export type NavigationMenu<T> = T extends {
+  component?: infer C extends BladeInstanceConstructor;
 }
+  ? {
+      component?: C;
+      options?: ExtractedBladeOptions<InstanceType<C>["$props"], "options">;
+    } & BladeMenu
+  : T extends {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      children?: infer P extends [] | readonly any[];
+    } & BladeMenu
+  ? {
+      children?: readonly [...{ [I in keyof P]: NavigationMenu<P[I]> }];
+    } & BladeMenu
+  : T & { component?: BladeInstanceConstructor };
 
-export interface IMenuItems extends IBladeToolbar {
-  children?: IBladeToolbar[];
+export type ToolbarMenu<T> = T extends {
+  component?: infer C extends ComponentInstanceConstructor;
 }
+  ? {
+      component?: C;
+      options?: InstanceType<C>["$props"];
+    } & IBladeToolbar
+  : T & { component?: ComponentInstanceConstructor };
+
+export type NotificationTemplateConstructor = ComponentInstanceConstructor & { notifyType: string };
 
-export interface IActionBuilderResult {
+// eslint-disable-next-line @typescript-eslint/ban-types
+export interface IActionBuilderResult<T = {}> {
   icon: string;
   title: string;
   variant: string;
   leftActions?: boolean;
-  clickHandler(item?: { id?: string }): void;
+  clickHandler(item?: T): void;
 }
 
 export interface IImage {