@lilaquadrat/design-core 0.2.2 → 0.3.0

package/src/stores/main.store.ts

@@ -1,182 +1,228 @@
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
-import type { BasicData, Content, CustomModule } from '@lilaquadrat/interfaces';
-import type EditorConfiguration from '../interfaces/EditorConfiguration.interface';
+import type { BasicData, Content, DesignCustomModule, WorkingContext } from '@lilaquadrat/interfaces';
 import StudioSDK, { type SDKResponse } from '@lilaquadrat/sdk';
 import { useAuth } from '../plugins/auth';
-import type FrontendConfig from '../interfaces/FrontendConfig.interface';
 import type { AxiosError } from 'axios';
-import { computed } from 'vue';
 import { hardCopy } from '@lilaquadrat/frontend/content';
+import useContentStore from './content.store';
+
+/**
+ * a failed request resolves with a status and no data, instead of throwing
+ */
+type ContentResponse = SDKResponse<BasicData<Content>> | SDKResponse<undefined>;
 
 export const useMainStore = defineStore('main', () => {
 
-  const startupDone = ref<boolean>(false);
-  const clientOnlyStartupDone = ref<boolean>(false);
-  const data = ref<BasicData<Content>>();
-  const layout = ref<BasicData<Content>>();
-  const editorConfiguration = ref<EditorConfiguration>({});
-  const fullscreen = ref<boolean>(false);
-  const config = ref<FrontendConfig>();
-  const isEditor = ref<boolean>(typeof window !== 'undefined' && window !== window.top);
-  /**
+    const startupDone = ref<boolean>(false);
+    const clientOnlyStartupDone = ref<boolean>(false);
+    const fullscreen = ref<boolean>(false);
+    const isEditor = ref<boolean>(typeof window !== 'undefined' && window !== window.top);
+    /**
    * there are case where the content should not update if the lock state changed
    * e.g. the user is connected after using register-main
    * this state will be set to false by the next navigation
    */
-  const disabledLockUpdate = ref<boolean>(false);
-  const staticData = ref<Record<string, Partial<BasicData<Content>>>>();
-  const customModulesBrowser = ref<CustomModule[]>();
-  const customModulesMail = ref<CustomModule[]>();
-  const target = ref<'browser'|'mail'>();
+    const disabledLockUpdate = ref<boolean>(false);
+    const staticData = ref<Record<string, Partial<BasicData<Content>>>>();
+    const customModulesBrowser = ref<DesignCustomModule[]>();
+    const customModulesMail = ref<DesignCustomModule[]>();
+
+    /**
+   * the flattened WorkingContext: the static environment and project settings,
+   * mirrored key for key. the rendered content itself lives in the content store.
+   */
+    const project = ref<WorkingContext['project']>();
+    const company = ref<WorkingContext['company']>();
+    const dynamic = ref<WorkingContext['dynamic']>();
+    const installable = ref<WorkingContext['installable']>();
+    const pwa = ref<WorkingContext['pwa']>();
+    const login = ref<WorkingContext['login']>();
+    const analytics = ref<WorkingContext['analytics']>();
+    const paymentProvider = ref<WorkingContext['paymentProvider']>();
+    const endpoints = ref<WorkingContext['endpoints']>();
+    const auth = ref<WorkingContext['auth']>();
+    const editor = ref<WorkingContext['editor']>();
+    const tags = ref<WorkingContext['tags']>();
+    const app = ref<WorkingContext['app']>();
+    const css = ref<WorkingContext['css']>();
+    const cdn = ref<WorkingContext['cdn']>();
+    const renderTarget = ref<WorkingContext['renderTarget']>();
+
+    function setContext(value: Partial<WorkingContext>) {
+
+        project.value = value.project;
+        company.value = value.company;
+        dynamic.value = value.dynamic;
+        installable.value = value.installable;
+        pwa.value = value.pwa;
+        login.value = value.login;
+        analytics.value = value.analytics;
+        paymentProvider.value = value.paymentProvider;
+        endpoints.value = value.endpoints;
+        auth.value = value.auth;
+        editor.value = value.editor;
+        tags.value = value.tags;
+        app.value = value.app;
+        css.value = value.css;
+        cdn.value = value.cdn;
+        renderTarget.value = value.renderTarget;
 
-  function setData (value: BasicData<Content>) {
+    }
 
-    data.value = value;
+    function setFullscreen(value: boolean) {
 
-  }
+        fullscreen.value = value;
 
-  function setFullscreen (value: boolean) {
+        if (!document) return;
 
-    fullscreen.value = value;
+        const { body } = document;
 
-    if (!document) return;
+        if (value) {
 
-    const { body } = document;
+            body.classList.add('fullscreen');
 
-    if (value) {
+        } else {
 
-      body.classList.add('fullscreen');
+            if (body.classList.contains('fullscreen')) {
 
-    } else {
+                body.classList.remove('fullscreen');
+            
+            }
 
-      if (body.classList.contains('fullscreen')) {
-        body.classList.remove('fullscreen');
-      }
+        }
 
     }
 
-  }
+    function checkFullscreen() {
 
-  function checkFullscreen () {
+        const elements = document.querySelectorAll('.overlay-background:not(.inactive)');
 
-    const elements = document.querySelectorAll('.overlay-background:not(.inactive)');
+        if (!elements.length) setFullscreen(false);
 
-    if (!elements.length) setFullscreen(false);
-
-  }
-
-  function setConfiguration (value: EditorConfiguration) {
-
-    editorConfiguration.value = value;
+    }
 
-  }
+    const apiConfig = computed(() => {
 
-  const apiConfig = computed(() => {
+        const { authToken } = useAuth();
 
-    const { authToken } = useAuth();
+        return {
+            authToken,
+            mode: 'custom' as const,
+            customEndpoints: {
+                api: endpoints.value?.api ?? '',
+                media: endpoints.value?.media ?? ''
+            },
+            company: company.value,
+            project: project.value,
+            // the sdk identifies the calling app as `<company>-<project>`
+            app: company.value && project.value ? `${company.value}-${project.value}` : ''
+        }
 
-    return {
-      authToken,
-      ...config.value?.api,
-      company: config.value?.company,
-      project: config.value?.project,
-      app    : config.value?.name as string
-    }
+    });
 
-  });
+  async function getContent(params: { filename: string }, type: 'public' | 'members'): Promise<ContentResponse>
+  async function getContent(params: { id: string }, type: 'public' | 'members'): Promise<ContentResponse>
+  async function getContent(params: { internalId: string }, type: 'public' | 'members'): Promise<ContentResponse>
+  async function getContent(params: { latest?: boolean, predefined?: boolean, categories?: string[] }, type: 'public' | 'members'): Promise<ContentResponse>
+  async function getContent(params: { predefined?: boolean, filename?: string, latest?: boolean, id?: string, internalId?: string, categories?: string[] }, type: 'public' | 'members'): Promise<ContentResponse> {
 
-  async function getContent(params: { filename: string }, type: 'public' | 'members'): Promise<SDKResponse<BasicData<Content>|undefined>>
-  async function getContent(params: { id: string }, type: 'public' | 'members'): Promise<SDKResponse<BasicData<Content>|undefined>>
-  async function getContent(params: { internalId: string }, type: 'public' | 'members'): Promise<SDKResponse<BasicData<Content>|undefined>>
-  async function getContent(params: { latest?: boolean, predefined?: boolean, categories?: string[] }, type: 'public' | 'members'): Promise<SDKResponse<BasicData<Content>|undefined>>
-  async function getContent (params: { predefined?: boolean, filename?: string, latest?: boolean, id?: string, internalId?: string, categories?: string[] }, type: 'public' | 'members'): Promise<SDKResponse<BasicData<Content>|undefined>> {
+      const sdk = new StudioSDK(apiConfig.value);
+      const targetWithType = sdk[type === 'members' ? 'members' : 'public'];
+      const current = useContentStore().content;
 
-    const sdk = new StudioSDK(apiConfig.value);
-    const targetWithType = sdk[type === 'members' ? 'members' : 'public'];
+      if(params.filename && current?.settings?.filename?.includes(params.filename)) {
 
-    if(params.filename && data.value?.settings?.filename?.includes(params.filename)) {
+          return hardCopy<SDKResponse<BasicData<Content>>>({ data: current, status: 200 });
 
-      return hardCopy<SDKResponse<BasicData<Content>>>({ data: data.value, status: 200 });
+      }
 
-    }
+      if (params.id && current?.id === params.id) {
 
-    if (params.id && data.value?.id === params.id) {
+          return hardCopy<SDKResponse<BasicData<Content>>>({ data: current, status: 200 });
 
-      return hardCopy<SDKResponse<BasicData<Content>>>({ data: data.value, status: 200 });
+      }
 
-    }
+      if (params.internalId && current?._id?.toString() === params.internalId) {
 
-    if (params.internalId && data.value?._id?.toString() === params.internalId) {
+          return hardCopy<SDKResponse<BasicData<Content>>>({ data: current, status: 200 });
 
-      return hardCopy<SDKResponse<BasicData<Content>>>({ data: data.value, status: 200 });
+      }
 
-    }
+      try {
 
-    try {
+          if (params.predefined && !params.latest && params.id && type === 'public') {
 
-      if (params.predefined && !params.latest && params.id && type === 'public') {
+              return sdk.public.content.predefined(params.id);
 
-        return sdk.public.content.predefined(params.id);
+          } else if (params.predefined && params.latest && params.categories && type === 'public') {
 
-      } else if (params.predefined && params.latest && params.categories && type === 'public') {
+              return sdk.public.content.predefinedLatest(params.categories);
 
-        return sdk.public.content.predefinedLatest(params.categories);
+          } else if (params.internalId) {
 
-      } else if (params.internalId) {
+              return targetWithType.content.getByInternalId(params.internalId);
 
-        return targetWithType.content.getByInternalId(params.internalId);
+          } else if (params.id) {
 
-      } else if (params.id) {
+              return targetWithType.content.getById(params.id);
 
-        return targetWithType.content.getById(params.id);
+          } else if (params.filename) {
 
-      } else if (params.filename) {
+              return targetWithType.content.getByFilename(params.filename);
 
-        return targetWithType.content.getByFilename(params.filename);
+          }
 
-      }
+      } catch (e) {
 
-    } catch (e) {
+          const error = e as AxiosError;
 
-      const error = e as AxiosError;
+          if (!error.response?.status) {
 
-      if (!error.response?.status) {
+              return { status: 400, data: undefined}
 
-        return { status: 400, data: undefined} 
+          } else {
 
-      } else {
+              return { status: error?.response?.status, data: undefined };
 
-        return { status: error?.response?.status, data: undefined };
+          }
 
       }
 
-    }
-
-    return { status: 400, data: undefined};
+      return { status: 400, data: undefined};
 
   }
 
   return {
-    setData,
-    data,
-    layout,
-    fullscreen,
-    setFullscreen,
-    checkFullscreen,
-    setConfiguration,
-    configuration: editorConfiguration,
-    getContent,
-    startupDone,
-    clientOnlyStartupDone,
-    config,
-    staticData,
-    apiConfig,
-    customModulesBrowser,
-    customModulesMail,
-    target,
-    disabledLockUpdate,
-    isEditor
+      setContext,
+      setFullscreen,
+      checkFullscreen,
+      getContent,
+      startupDone,
+      clientOnlyStartupDone,
+      staticData,
+      apiConfig,
+      customModulesBrowser,
+      customModulesMail,
+      disabledLockUpdate,
+      isEditor,
+      fullscreen,
+      project,
+      company,
+      dynamic,
+      installable,
+      pwa,
+      login,
+      analytics,
+      paymentProvider,
+      endpoints,
+      auth,
+      editor,
+      tags,
+      app,
+      css,
+      cdn,
+      renderTarget
   }
 
 });

package/src/stores/user.store.ts

@@ -8,116 +8,120 @@ import { type CustomerPerson } from '@lilaquadrat/interfaces';
 
 export const useUserStore = defineStore('user', () => {
 
-  const locked = ref<string>();
-  const customer = ref<{_id: string, id?: string}>();
-  const emailConfirmationCode = ref<string>();
-  const userData = ref<CustomerPerson>();
-  const isUser = ref<boolean>(false);
-  const isFullUser = ref<boolean>(false);
+    const locked = ref<string>();
+    const customer = ref<{_id: string, id?: string}>();
+    const emailConfirmationCode = ref<string>();
+    const userData = ref<CustomerPerson>();
+    const isUser = ref<boolean>(false);
+    const isFullUser = ref<boolean>(false);
 
-  function setCustomer (customerData: {_id: string, id?: string}) {
+    function setCustomer(customerData: {_id: string, id?: string}) {
 
-    customer.value = customerData;
-    localStorage.setItem('lila-customer', JSON.stringify(customerData));
+        customer.value = customerData;
+        localStorage.setItem('lila-customer', JSON.stringify(customerData));
 
-  }
+    }
 
-  async function initCustomer () {
+    async function initCustomer() {
 
-    const customerData = localStorage.getItem('lila-customer');
+        const customerData = localStorage.getItem('lila-customer');
 
-    logger.userstore('init');
+        logger.userstore('init');
 
-    if(customerData) {
+        if(customerData) {
 
-      customer.value = JSON.parse(customerData);
+            customer.value = JSON.parse(customerData);
 
-    }
+        }
 
-    if(auth.isAuth.value) {
+        if(auth.isAuth.value) {
       
-      await updateLock();
-      isUser.value = true;
+            await updateLock();
+            isUser.value = true;
 
-      if(locked.value === 'user-connect') {
-        isFullUser.value = false;
-      } else {
-        isFullUser.value = true;
-      }
+            if(locked.value === 'user-connect') {
 
-    }
+                isFullUser.value = false;
+            
+            } else {
+
+                isFullUser.value = true;
+            
+            }
+
+        }
 
-    logger.userstore('done');
+        logger.userstore('done');
 
-  }
+    }
 
-  async function updateLock () {
+    async function updateLock() {
 
-    if(auth.isAuth.value) {
+        if(auth.isAuth.value) {
       
-      await getUser();
+            await getUser();
 
-      if(!userData.value) {
+            if(!userData.value) {
 
-        console.error('LOCK THE USE FOR MISSING CONNECTION');
-        locked.value = 'user-connect';
+                console.error('LOCK THE USE FOR MISSING CONNECTION');
+                locked.value = 'user-connect';
 
-        return;
+                return;
         
-      }
+            }
       
-      /**
+            /**
       * check if a customerId is given and user is not connected
       */
-      if (!userData.value?.emailConfirmed) {
+            if (!userData.value?.emailConfirmed) {
         
-        console.error('LOCK THE USE FOR EMAIL VERIFICATION');
-        locked.value = 'email-verified';
+                console.error('LOCK THE USE FOR EMAIL VERIFICATION');
+                locked.value = 'email-verified';
         
-        return;
+                return;
         
-      }
+            }
 
-      locked.value = undefined;
-      isFullUser.value = true;
+            locked.value = undefined;
+            isFullUser.value = true;
 
-    }
+        }
     
-  }
+    }
 
-  async function getUser () {
+    async function getUser() {
     
-    const mainStore = useMainStore();
-    const sdk = new StudioSDK(mainStore.apiConfig);
+        const mainStore = useMainStore();
+        const sdk = new StudioSDK(mainStore.apiConfig);
 
-    try {
+        try {
       
-      StudioSDK.flushCache('me');
+            StudioSDK.flushCache('me');
 
-      const me = await sdk.members.me.get();
+            const me = await sdk.members.me.get();
 
-      userData.value = me.data;
+            userData.value = me.data;
 
-    } catch (error) {
+        } catch (error) {
 
-      console.error(error);
+            console.error(error);
       
+        }
+
     }
 
-  }
-
-  return {
-    locked,
-    setCustomer,
-    initCustomer,
-    updateLock,
-    customer,
-    userData,
-    isUser,
-    isFullUser,
-    getUser,
-    emailConfirmationCode
-  }
+    return {
+        locked,
+        setCustomer,
+        initCustomer,
+        updateLock,
+        customer,
+        userData,
+        isUser,
+        isFullUser,
+        getUser,
+        emailConfirmationCode
+    }
 
 })