@vc-shell/framework 1.0.292 → 1.0.294

package/shared/components/language-selector/language-selector.vue

@@ -1,9 +1,17 @@
 <template>
   <AppBarButtonTemplate
     :title="$t('COMPONENTS.LANGUAGE_SELECTOR.TITLE')"
-    icon="fas fa-globe"
     position="bottom-end"
   >
+    <template #button>
+      <div class="vc-language-selector__button-wrap">
+        <VcImage
+          :src="currLocaleFlag"
+          class="vc-language-selector__img vc-language-selector__img--button"
+          empty-icon="fas fa-globe"
+        />
+      </div>
+    </template>
     <template #dropdown-content="{ opened, toggle }">
       <Sidebar
         :is-expanded="$isMobile.value ? opened : false"
@@ -20,8 +28,13 @@
               v-for="(lang, i) in languageItems"
               :key="i"
               class="vc-language-selector__item"
+              :class="{ 'vc-language-selector__item--active': lang.lang === $i18n.locale }"
               @click="lang.hasOwnProperty('clickHandler') && lang.clickHandler(lang.lang)"
             >
+              <VcImage
+                :src="lang.flag"
+                class="vc-language-selector__img"
+              />
               {{ lang.title }}
             </div>
           </div>
@@ -36,19 +49,42 @@ import { useI18n } from "vue-i18n";
 import { useLanguages } from "../../../core/composables";
 import { AppBarButtonTemplate } from "./../app-bar-button";
 import { Sidebar } from "./../sidebar";
+import { watch, ref } from "vue";
+
+interface ILanguage {
+  lang: string;
+  title: string;
+  clickHandler: (lang: string) => void;
+  flag: string;
+}
 
-const { availableLocales, getLocaleMessage } = useI18n({ useScope: "global" });
-const { setLocale } = useLanguages();
+const { availableLocales, getLocaleMessage, locale } = useI18n({ useScope: "global" });
+const { setLocale, getFlag } = useLanguages();
 
-const languageItems = availableLocales
+const languageItems: ILanguage[] = availableLocales
   .map((locale: string) => ({
     lang: locale,
     title: (getLocaleMessage(locale) as { language_name: string }).language_name,
     clickHandler(lang: string) {
       setLocale(lang);
     },
+    flag: "",
   }))
   .filter((item) => item.title);
+
+const currLocaleFlag = ref<string>();
+
+watch(
+  [() => languageItems, () => locale.value],
+  async ([newValLangItem]) => {
+    for (const lang of newValLangItem) {
+      lang.flag = await getFlag(lang.lang);
+
+      currLocaleFlag.value = languageItems.find((lang) => lang.lang === locale.value)?.flag;
+    }
+  },
+  { immediate: true },
+);
 </script>
 
 <style lang="scss">
@@ -57,15 +93,16 @@ const languageItems = availableLocales
   --language-selector-text-color: var(--base-text-color, var(--neutrals-950));
   --language-selector-border-color: var(--app-bar-divider-color);
   --language-selector-hover-bg-color: var(--primary-50);
+  --language-selector-button-width: var(--app-bar-button-width);
 }
 
 .vc-language-selector {
   &__dropdown {
-    @apply tw-bg-[color:var(--language-selector-bg-color)] tw-w-full;
+    @apply tw-bg-[color:var(--language-selector-bg-color)] tw-min-w-max;
   }
 
   &__item {
-    @apply tw-p-3 tw-text-sm tw-text-[color:var(--language-selector-text-color)]
+    @apply tw-truncate tw-flex tw-items-center tw-p-3 tw-text-sm tw-text-[color:var(--language-selector-text-color)]
       tw-border-l tw-border-solid tw-border-l-[var(--language-selector-border-color)]
       tw-border-b tw-border-b-[var(--language-selector-border-color)] tw-w-full tw-cursor-pointer;
     transition: background-color 0.2s;
@@ -73,6 +110,22 @@ const languageItems = availableLocales
     &:hover {
       background-color: var(--language-selector-hover-bg-color);
     }
+
+    &--active {
+      @apply tw-bg-[color:var(--language-selector-hover-bg-color)];
+    }
+  }
+
+  &__img {
+    @apply tw-w-6 tw-h-6 tw-mr-2;
+
+    &--button {
+      @apply tw-mr-0;
+    }
+  }
+
+  &__button-wrap {
+    @apply tw-w-[var(--language-selector-button-width)] tw-flex tw-justify-center;
   }
 }
 </style>

package/shared/components/sidebar/sidebar.vue

@@ -39,7 +39,7 @@
 
 <script lang="ts" setup>
 export interface Props {
-  position: "left" | "right";
+  position?: "left" | "right";
   render: "always" | "mobile" | "desktop";
   isExpanded: boolean;
 }

package/shared/components/sign-in/azuread.vue

@@ -0,0 +1,24 @@
+<template>
+  <ExternalProvider
+    :logo="logo"
+    :display-name="displayName"
+    @sign-in="signIn(authenticationType, '/signin-oidc')"
+  />
+</template>
+
+<script lang="ts" setup>
+import { default as ExternalProvider } from "./external-provider.vue";
+import { useExternalProvider } from "./useExternalProvider";
+
+export interface Props {
+  logo: string;
+  displayName: string;
+  authenticationType: string;
+}
+
+defineProps<Props>();
+
+const { signIn } = useExternalProvider();
+</script>
+
+<style lang="scss" scoped></style>

package/shared/components/sign-in/external-provider.vue

@@ -0,0 +1,38 @@
+<template>
+  <VcButton
+    outline
+    class="vc-external-provider"
+    @click="$emit('signIn')"
+  >
+    <div class="vc-external-provider__content">
+      <VcImage
+        :src="logo"
+        class="vc-external-provider__icon"
+        size="xxs"
+      />{{ displayName }}
+    </div>
+  </VcButton>
+</template>
+
+<script lang="ts" setup>
+import { VcButton, VcImage } from "./../../../ui/components";
+export interface Props {
+  logo: string;
+  displayName: string;
+}
+
+export interface Emits {
+  (event: "signIn"): void;
+}
+
+defineEmits<Emits>();
+defineProps<Props>();
+</script>
+
+<style lang="scss">
+.vc-external-provider {
+  &__content {
+    @apply tw-flex tw-flex-row tw-items-center tw-gap-2;
+  }
+}
+</style>

package/shared/components/sign-in/external-providers.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="vc-external-providers">
+    <component
+      :is="loadProviderComponent(provider.authenticationType!)"
+      v-for="provider in providers"
+      :key="provider"
+      :logo="'/' + provider.logoUrl"
+      :display-name="provider.displayName"
+      :authentication-type="provider.authenticationType"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineAsyncComponent } from "vue";
+import type { Component } from "vue";
+import { ExternalSignInProviderInfo } from "../../../core/api/platform";
+
+export interface Props {
+  providers: ExternalSignInProviderInfo[];
+}
+
+defineProps<Props>();
+
+const loadProviderComponent = (providerName: string) => {
+  return defineAsyncComponent<Component>({
+    loader: () => import(/* @vite-ignore */ `./${providerName.toLowerCase()}.vue`),
+    onError(error) {
+      console.error(`Failed to load ${providerName} provider component`, error);
+    },
+  });
+};
+</script>
+
+<style lang="scss">
+.vc-external-providers {
+  @apply tw-flex tw-justify-center tw-mt-4 tw-flex-wrap tw-gap-2;
+}
+</style>

package/shared/components/sign-in/index.ts

@@ -0,0 +1 @@
+export { default as ExternalProviders } from "./external-providers.vue";

package/shared/components/sign-in/useExternalProvider.ts

@@ -0,0 +1,102 @@
+import { useLocalStorage } from "@vueuse/core";
+import type { Ref } from "vue";
+import { ExternalSignInClient, ExternalSignInProviderInfo } from "../../../core/api/platform";
+
+export interface IUseExternalProvider {
+  storage: Ref<{ providerType?: string | undefined }>;
+  signIn: (authenticationType: string, oidcUrl: string) => void;
+  signOut: (authenticationType: string) => void;
+  getProviders: () => Promise<ExternalSignInProviderInfo[] | undefined>;
+}
+
+const VC_EXTERNAL_AUTH_DATA_KEY = "externalSignIn";
+
+export const useExternalProvider = (): IUseExternalProvider => {
+  const externalSecurityClient = new ExternalSignInClient();
+  const externalSignInStorage = useLocalStorage<{ providerType?: string | undefined }>(
+    VC_EXTERNAL_AUTH_DATA_KEY,
+    {},
+    {
+      listenToStorageChanges: true,
+      deep: true,
+    },
+  );
+
+  function getReturnUrlValue(): string | null {
+    const { searchParams } = new URL(location.href);
+    return searchParams.get("returnUrl") || searchParams.get("ReturnUrl");
+  }
+
+  async function externalSignIn(authenticationType: string, oidcUrl: string) {
+    try {
+      const origin = location.origin;
+      const finalReturnUrl = location.pathname ?? getReturnUrlValue() ?? "/";
+
+      if (!authenticationType) {
+        throw new Error("The parameter 'authenticationType' cannot be null or undefined.");
+      }
+
+      // const oidcUrlObject = new URL(oidcUrl, origin);
+      // const callbackUrl = new URL("/auth/callback", origin);
+      const url = new URL("/externalsignin", origin);
+      console.log("url", url);
+
+      // Set query parameters
+      // callbackUrl.searchParams.set("returnUrl", finalReturnUrl);
+      url.searchParams.set("authenticationType", authenticationType);
+      // url.searchParams.set("callbackUrl", callbackUrl.href);
+      url.searchParams.set("returnUrl", finalReturnUrl);
+
+      // Store sign-in data
+      externalSignInStorage.value = { providerType: authenticationType };
+
+      console.log("url", url);
+      // Redirect to the constructed URL
+      location.assign(url);
+    } catch (e) {
+      console.error(e);
+      throw e;
+    }
+  }
+
+  async function externalSignOut(authenticationType: string): Promise<void> {
+    try {
+      const origin = location.origin;
+      const returnUrl = location.pathname ?? "/";
+
+      const url = new URL("/externalsignin/signout", origin);
+
+      // Set query parameters
+      url.searchParams.set("authenticationType", authenticationType);
+      url.searchParams.set("returnUrl", returnUrl);
+
+      // Clear sign-in data
+      externalSignInStorage.value = {};
+
+      // Redirect to the sign-out URL
+      location.assign(url);
+    } catch (e) {
+      console.error(e);
+      throw e;
+    }
+  }
+
+  async function getExternalLoginProviders() {
+    let result: ExternalSignInProviderInfo[] | undefined = undefined;
+    try {
+      result = await externalSecurityClient.getExternalLoginProviders();
+    } catch (e) {
+      console.error(e);
+      // TODO check error in app!!!
+    }
+
+    return result;
+  }
+
+  return {
+    storage: externalSignInStorage,
+    signIn: externalSignIn,
+    signOut: externalSignOut,
+    getProviders: getExternalLoginProviders,
+  };
+};

package/shared/components/theme-selector/theme-selector.vue

@@ -1,7 +1,8 @@
 <template>
   <AppBarButtonTemplate
     icon="fas fa-palette"
-    :title="themeText(current)"
+    :title="$t('COMPONENTS.THEME_SELECTOR.THEME_SELECTOR')"
+    position="bottom-end"
   >
     <template #dropdown-content="{ opened, toggle }">
       <Sidebar
@@ -43,23 +44,21 @@ import { useTheme } from "./../../../core/composables/useTheme";
 import { watch, computed } from "vue";
 import { notification } from "./../";
 import * as _ from "lodash-es";
-import { useI18n } from "vue-i18n";
 import { createUnrefFn } from "@vueuse/core";
 
 const { current, themes, setTheme } = useTheme();
-const { t } = useI18n({ useScope: "global" });
 
 watch(
-  () => current,
+  () => current.value,
   (newVal) => {
-    notification(themeText.value(newVal));
+    notification(_.capitalize(newVal));
   },
   { deep: true },
 );
 
 const themeText = computed(() => {
   return createUnrefFn((theme: string) => {
-    return _.capitalize(theme) + t("COMPONENTS.THEME_SELECTOR.THEME_CHANGED");
+    return _.capitalize(theme);
   });
 });
 </script>
@@ -74,11 +73,11 @@ const themeText = computed(() => {
 
 .vc-theme-selector {
   &__dropdown {
-    @apply tw-bg-[color:var(--theme-selector-bg-color)] tw-w-full;
+    @apply tw-bg-[color:var(--theme-selector-bg-color)] tw-min-w-20 tw-max-w-max;
   }
 
   &__item {
-    @apply tw-p-3 tw-text-sm tw-text-[color:var(--theme-selector-text-color)]
+    @apply tw-truncate tw-p-3 tw-text-sm tw-text-[color:var(--theme-selector-text-color)]
       tw-border-l tw-border-solid tw-border-l-[var(--theme-selector-border-color)]
       tw-border-b tw-border-b-[var(--theme-selector-border-color)] tw-w-full tw-cursor-pointer;
     transition: background-color 0.2s;

package/shared/modules/dynamic/components/SchemaRender.ts

@@ -23,7 +23,7 @@ import { usePermissions } from "../../../../core/composables";
 
 const schemeRenderProps = {
   context: {
-    type: Object as PropType<UnwrapNestedRefs<DetailsBladeContext>>,
+    type: Object as PropType<UnwrapNestedRefs<DetailsBladeContext<any, any>>>,
     default: () => ({}) as DetailsBladeContext,
   },
   modelValue: {

package/shared/modules/dynamic/helpers/nodeBuilder.ts

@@ -79,9 +79,9 @@ function nodeBuilder<
 
   const hint =
     safeIn("hint", controlSchema) && controlSchema.hint
-      ? (bladeContext.scope && unref(unwrapInterpolation(controlSchema.hint, bladeContext.scope))) ??
+      ? ((bladeContext.scope && unref(unwrapInterpolation(controlSchema.hint, bladeContext.scope))) ??
         unref(unwrapInterpolation(controlSchema.hint, internalContext)) ??
-        undefined
+        undefined)
       : undefined;
 
   const disabled =

package/shared/modules/dynamic/helpers/override.ts

@@ -60,7 +60,7 @@ const upsertHelper = (overrides: OverridesSchema, schemaCopy: { [key: string]: D
             const findIndex = _.findIndex(valueByPath, { id: args.value.id });
 
             const spliced = valueByPath /* @ts-expect-error  - toSpliced is not parsed correctly by ts */
-              .toSpliced(findIndex >= 0 ? findIndex : args.index ?? 0, findIndex >= 0 ? 1 : 0, args.value);
+              .toSpliced(findIndex >= 0 ? findIndex : (args.index ?? 0), findIndex >= 0 ? 1 : 0, args.value);
             _.set(clonedSchema, currentPath, spliced);
           } else {
             _.set(clonedSchema, currentPath, args.value);