@sigmaott/base-next 1.0.6

package/src/composables/error.ts

@@ -0,0 +1,24 @@
+function mapMsg(messages: string[]) {
+  let htmlFormat = ''
+
+  if (messages.length === 1) {
+    htmlFormat += toUpperCaseFirstLetter(messages[0])
+  }
+  else {
+    for (let i = 0; i < messages.length; i++)
+      htmlFormat += `<p>${toUpperCaseFirstLetter(messages[i])}</p>`
+  }
+
+  return htmlFormat
+}
+
+export function getErrorMessage(error: any) {
+  const { data } = error.response
+  const { message, errors } = data
+
+  return message
+    ? (errors
+        ? Array.isArray(errors) ? mapMsg(errors) : errors
+        : (Array.isArray(message) ? mapMsg(message) : message))
+    : 'Something went wrong!'
+}

package/src/composables/form.ts

@@ -0,0 +1,351 @@
+import { deepMerge, p, randomStr } from '@antfu/utils'
+import type { FormInstance, FormItemProp, FormItemRule } from 'element-plus'
+import type { Arrayable } from 'element-plus/es/utils'
+import { get, set, unset } from 'lodash-unified'
+import type { MaybeRefOrGetter } from 'vue'
+
+interface ElFormOptions<T> {
+  initialValues: MaybeRef<T>
+  onSubmit?: (values: T) => Promise<any> | void
+  prop?: string
+}
+
+export function cleanEmptyObjectAndArray(object: any) {
+  Object
+    .entries(object)
+    .forEach(([k, v]) => {
+      if (v && typeof v === 'object')
+        cleanEmptyObjectAndArray(v)
+
+      if (v && typeof v === 'object' && (!Object.keys(v).length || v === null || v === undefined)) {
+        if (Array.isArray(object))
+          object[k] = null
+        else
+          delete object[k]
+      }
+    })
+  return object
+}
+
+interface ElFormContext {
+  formRef: Ref<FormInstance>
+  formValue: Ref<any>
+  formErrors: Ref<any>
+  submitLocks: Map<string, (submit: boolean) => Promise<boolean>>
+  getAtrrs: (_prop: string, _rules?: Arrayable<FormItemRule>, _options?: {
+    enabled?: boolean
+  }) => {
+    error: any
+    rules: Arrayable<FormItemRule> | undefined
+    prop: string
+  }
+}
+
+function handleRegister({ formRef, formValue, formErrors }: Pick<ElFormContext, 'formErrors' | 'formRef' | 'formValue'>) {
+  return <T = any>(_prop: MaybeRefOrGetter<string>, _rules?: MaybeRefOrGetter<Arrayable<FormItemRule>>, _options?: {
+    enabled?: MaybeRefOrGetter<boolean>
+    watchDeep?: boolean
+    defaultValue?: any
+    error?: Ref<string | undefined>
+  }) => {
+    const prop = toRef(_prop)
+    const enabled = toRef(_options?.enabled ?? true)
+
+    const value = computed({
+      get: () => get(formValue.value, prop.value),
+      set: (value: T) => {
+        set(formValue.value, prop.value, value)
+      },
+    })
+
+    if (_options?.watchDeep) {
+      watch(value, () => {
+        formRef.value?.validateField(prop.value)
+      }, { deep: true })
+    }
+
+    watch(enabled, () => {
+      formRef.value.validateField(prop.value, (isValid) => {
+        if (isValid) {
+          unset(formErrors.value, prop.value)
+          formErrors.value = cleanEmptyObjectAndArray(formErrors.value)
+        }
+      })
+    }, { flush: 'post' })
+
+    watch(enabled, () => {
+      if (enabled.value) {
+        // set default value
+        if (_options?.defaultValue !== undefined && get(formValue.value, prop.value) === undefined)
+          set(formValue.value, prop.value, _options?.defaultValue)
+      }
+      else {
+        // // clear value
+        // unset(formValue.value, prop.value)
+      }
+    }, { immediate: true })
+
+    const error = computed(() => get(formErrors.value, prop.value) || _options?.error?.value)
+    const rules = computed(() => enabled.value ? toRef(_rules).value : [])
+
+    const attrs = reactive({
+      error,
+      rules,
+      prop,
+    })
+
+    return makeDestructurable(
+      {
+        value,
+        attrs,
+      } as const,
+      [value, attrs] as const,
+    )
+  }
+}
+
+// TODO: simply
+function handleRegisterArray({ formRef, formValue, formErrors }: Pick<ElFormContext, 'formErrors' | 'formRef' | 'formValue'>) {
+  return <T = any>(_prop: MaybeRefOrGetter<string>, _rules?: MaybeRefOrGetter<Arrayable<FormItemRule>>, _options?: {
+    enabled?: MaybeRefOrGetter<boolean>
+    defaultValue?: any[]
+  }) => {
+    const prop = toRef(_prop)
+    const enabled = toRef(_options?.enabled ?? true)
+
+    const value = computed({
+      get: () => get(formValue.value, prop.value),
+      set: (value: T[]) => {
+        set(formValue.value, prop.value, value)
+      },
+    })
+
+    watch(value, () => {
+      formRef.value?.validateField(prop.value)
+    }, { deep: true, flush: 'post' })
+
+    watch(enabled, () => {
+      formRef.value.validateField(prop.value, (isValid) => {
+        if (isValid) {
+          unset(formErrors.value, prop.value)
+          formErrors.value = cleanEmptyObjectAndArray(formErrors.value)
+        }
+      })
+    }, { flush: 'post' })
+
+    watch(enabled, () => {
+      if (enabled.value) {
+        // set default value
+        if (_options?.defaultValue !== undefined && (get(formValue.value, prop.value) === undefined || !get(formValue.value, prop.value).length))
+          set(formValue.value, prop.value, _options?.defaultValue)
+      }
+      else {
+        // // clear value
+        // unset(formValue.value, prop.value)
+      }
+    }, { immediate: true })
+
+    const error = computed(() => {
+      const _error = get(formErrors.value, prop.value)
+      if (Array.isArray(_error))
+        return ''
+      return _error
+    })
+    const rules = computed(() => enabled.value ? toRef(_rules).value : [])
+
+    const attrs = reactive({
+      error,
+      rules,
+      prop,
+    })
+
+    function remove(id: string | number) {
+      const index = typeof id === 'number' ? id : value.value.findIndex(item => item === id || item.id === id || item._id === id)
+      if (index !== -1) {
+        value.value.splice(index, 1)
+        const error = get(formErrors.value, prop.value)
+        error?.splice(index, 1)
+        set(formErrors.value, prop.value, error)
+        cleanEmptyObjectAndArray(formErrors.value)
+      }
+    }
+
+    function add(item: T) {
+      if (typeof item === 'string') {
+        value.value.push(item)
+      }
+      else {
+        value.value.push({
+          id: genUUID(),
+          _id: genUUID(),
+          ...item,
+        })
+      }
+    }
+
+    function addFirst(item: T) {
+      if (typeof item === 'string') {
+        value.value.unshift(item)
+      }
+      else {
+        value.value.unshift({
+          id: genUUID(),
+          _id: genUUID(),
+          ...item,
+        })
+      }
+    }
+
+    return makeDestructurable(
+      {
+        value,
+        attrs,
+        remove,
+        add,
+        addFirst,
+      } as const,
+      [value, attrs, { add, remove, addFirst }] as const,
+    )
+  }
+}
+
+const injectKey = Symbol('InjectionState')
+
+export function useElForm<T = any>(options: ElFormOptions<T>) {
+  const formRef = ref<FormInstance>()
+  const { t } = useI18n()
+
+  const _formValue = toRef(options.initialValues)
+  const formValue = extendRef(_formValue, {
+    set: (newValue) => {
+      formValue.value = defu(klona(toRaw(newValue), options.initialValues))
+      return formValue.value
+    },
+  }) as Ref<T>
+
+  const formErrors = ref<any>({})
+
+  function handleValidate(prop: FormItemProp, isValid: boolean, message: string) {
+    if (!isValid) {
+      set(formErrors.value, prop, message)
+    }
+    else {
+      // NOTE: with array it might isValid but the nested item is not valid
+      const error = get(formErrors.value, prop)
+      if (!Array.isArray(error) || !error.length)
+        unset(formErrors.value, prop)
+
+      formErrors.value = cleanEmptyObjectAndArray(formErrors.value)
+    }
+  }
+
+  async function handleSubmit() {
+    try {
+      const valid = await formRef.value?.validate()
+      if (valid)
+        options.onSubmit?.(formValue.value as T)
+
+      return valid
+    }
+    catch (error) {
+      ElMessage.error(t('form.form_validation_failed'))
+    }
+  }
+
+  const register = handleRegister({ formRef, formValue, formErrors })
+
+  const registerArray = handleRegisterArray({ formRef, formValue, formErrors })
+
+  function getAtrrs(_prop: string, _rules?: Arrayable<FormItemRule>, _options?: {
+    enabled?: boolean
+  }) {
+    const [_, attrs] = register(_prop, _rules, _options)
+    return attrs
+  }
+  const isError = computed(() => Object.keys(formErrors.value).length > 0)
+
+  const state = {
+    formRef,
+    formValue,
+    formErrors,
+    handleSubmit,
+    handleValidate,
+    register,
+    registerArray,
+    getAtrrs,
+    isError,
+  }
+  provide(injectKey, state)
+  return state
+}
+
+export function useElField<T>(_prop: MaybeRefOrGetter<string>, _rules?: MaybeRefOrGetter<Arrayable<FormItemRule>>, _options?: {
+  enabled?: MaybeRefOrGetter<boolean>
+  watchDeep?: boolean
+  defaultValue?: any
+  key?: string
+}) {
+  const { formRef, formValue, formErrors } = inject(_options?.key || injectKey) as ElFormContext
+
+  return handleRegister({ formRef, formValue, formErrors })<T>(_prop, _rules, _options)
+}
+
+export function useElFieldArray<T>(_prop: MaybeRefOrGetter<string>, _rules?: MaybeRefOrGetter<Arrayable<FormItemRule>>, _options?: {
+  enabled?: MaybeRefOrGetter<boolean>
+  defaultValue?: any
+  key?: string
+}) {
+  const { formRef, formValue, formErrors } = inject(_options?.key || injectKey) as ElFormContext
+
+  return handleRegisterArray({ formRef, formValue, formErrors })<T>(_prop, _rules, _options)
+}
+
+export function useElFormContext() {
+  return inject(injectKey) as ElFormContext
+}
+
+export function useSyncElForm(_prop: MaybeRefOrGetter<string>, { formErrors, submitLocks, formValue, formRef }: Pick<ElFormContext, 'formErrors' | 'formValue' | 'formRef'> & { handleSubmit: () => Promise<boolean> }) {
+  const prop = toRef(_prop)
+  const [_formValues] = useElField<any>(prop)
+  const { formErrors: _formErrors, submitLocks: _submitLocks } = useElFormContext()
+
+  _submitLocks.set(prop.value, async () => {
+    const submitArray = Array.from(submitLocks.values())
+    const registerHookValid = (await p(submitArray).map(async fn => await fn())).every(Boolean)
+    const valid = await formRef.value.validate()
+
+    return valid && registerHookValid
+  })
+
+  watch(formErrors, () => {
+    set(_formErrors.value, prop.value, formErrors.value)
+    cleanEmptyObjectAndArray(_formErrors.value)
+  }, { deep: true })
+
+  watch(formValue, () => {
+    _formValues.value = formValue.value
+  }, { deep: true })
+}
+
+export function hasError(errors: any, props: string[]): boolean {
+  return props.some((p) => {
+    const error = get(errors, p)
+    if (Array.isArray(error)) {
+      return error.filter((item) => {
+        if (item && typeof item === 'object')
+          return hasError(item, Object.keys(item))
+        else
+          return Boolean(item)
+      }).length > 0
+    }
+
+    if (error && typeof error === 'object')
+      return hasError(error, Object.keys(error))
+
+    return !!error
+  })
+}
+
+export function setError(errors: any, prop: string, message: string) {
+  set(errors, prop, message)
+}

package/src/composables/getBuildTime.ts

@@ -0,0 +1,7 @@
+import dayjs from 'dayjs/esm/index'
+
+export function getBuildTime() {
+  const config = useRuntimeConfig()
+  const buildTime = config.public.buildTime ? dayjs(config.public.buildTime).format('YYMMDD') : ''
+  return buildTime
+}

package/src/composables/micro.ts

@@ -0,0 +1,113 @@
+export function useMicroProps() {
+  const microProps = useState('useMicroProps', () => isSubApp ? window.microApp?.getData() : {})
+  const wujieProps = ref(window.$wujie?.props)
+
+  return { microProps: window.__MICRO_APP_ENVIRONMENT__ ? microProps : wujieProps }
+}
+
+export function useSyncMicroApp() {
+  const { microProps } = useMicroProps()
+  const { setLocale } = useI18n()
+
+  if (isSubApp) {
+    window.microApp?.addDataListener((data: any) => {
+      microProps.value = data
+      return 'Data received'
+    }, true)
+
+    watchImmediate(microProps, () => {
+      setLocale(microProps.value.locale)
+
+      if (microProps.value.token) {
+        TOKEN_STORAGE.value = microProps.value.token
+      }
+      if (microProps.value.tokenProp) {
+        TOKEN_PROP_STORAGE.value = microProps.value.tokenProp
+        if (TOKEN_PROP_STORAGE.value === 'x-backdoor') {
+          APP_DETAIL_STORAGE.value = [
+            {},
+            {
+              group: {
+                permission: [
+                  {
+                    mode: 'FULL',
+                    apiGroupId: 'management',
+                    id: null,
+                  },
+                  {
+                    mode: 'FULL',
+                    apiGroupId: 'interactive',
+                    id: null,
+                  },
+                  {
+                    mode: 'FULL',
+                    apiGroupId: 'livestream',
+                    id: null,
+                  },
+                  {
+                    mode: 'FULL',
+                    apiGroupId: 'lrm',
+                    id: null,
+                  },
+                  {
+                    mode: 'FULL',
+                    apiGroupId: 'playout',
+                    id: null,
+                  },
+                  {
+                    mode: 'FULL',
+                    apiGroupId: 'ssai',
+                    id: null,
+                  },
+                  {
+                    mode: 'FULL',
+                    apiGroupId: 'transcode',
+                    id: null,
+                  },
+                  {
+                    mode: 'FULL',
+                    apiGroupId: 'vod',
+                    id: null,
+                  },
+                  {
+                    mode: 'FULL',
+                    apiGroupId: 'library',
+                    id: null,
+                  },
+                  {
+                    mode: 'FULL',
+                    apiGroupId: 'machine',
+                    id: null,
+                  },
+                  {
+                    mode: 'FULL',
+                    apiGroupId: 'media-hub-admin',
+                    id: null,
+                  },
+                ],
+
+              },
+
+            },
+          ]
+        }
+      }
+
+      if (microProps.value.appId) {
+        APP_ID_STORAGE.value = microProps.value.appId
+      }
+
+      __IS_DARK__.value = !!microProps.value.isDark
+    }, { deep: true })
+
+    Object.defineProperty(window.Navigator.prototype, 'clipboard', {
+      get: () => {
+        return window.parent.navigator.clipboard
+      },
+    })
+  }
+
+  return {
+    microProps,
+  }
+}

package/src/composables/microState.ts

@@ -0,0 +1,22 @@
+import { klona } from 'klona'
+
+export const microState = ref({
+  token: '',
+  tokenProp: 'local',
+  children: [],
+  meta: { layoutMode: 'horizontal', lang: 'vi' },
+})
+
+watch(microState, (newValue) => {
+  if (isSubApp && newValue) {
+    TOKEN_STORAGE.value = newValue.token
+    TOKEN_PROP_STORAGE.value = newValue.tokenProp
+  }
+}, { deep: true })
+
+export function syncMicroState() {
+  microState.value = klona(window.parent.__SIGMA_STATE__)
+  window.$wujie?.bus.$on('__STATE_CHANGE__', (newState: any) => {
+    microState.value = klona(newState)
+  })
+}

package/src/composables/notiGlobal.ts

@@ -0,0 +1,19 @@
+import { notificationApi } from '~/api/api'
+export function useNotificationGlobal() {
+    const params = {
+        page: 1,
+        // perPage: 8,
+    }
+    const { data: notiGlobal, ...rest } = useQuery(
+      [QueryKeys.Noti, params],
+      async () => {
+        const res = await notificationApi.notificationControllerFindAll(params, {headers: {noNotify: true}})
+        return res.data
+      },
+    )
+    
+    return {
+        notiGlobal,
+      ...rest,
+    }
+  }

package/src/composables/plan.ts

@@ -0,0 +1,162 @@
+export const useShowSubscriptionInfo = createGlobalState(
+  () => {
+    const isShowSubscriptionInfo = ref(false)
+    const { t } = useI18n()
+    function open() {
+      const permissionManagement = APP_DETAIL_STORAGE.value?.[1]?.group?.permission?.find(item => item.apiGroupId === 'management')
+      if (permissionManagement)
+        isShowSubscriptionInfo.value = true
+      else
+        ElMessage.error(t('app.not_permission_management'))
+    }
+
+    function close() {
+      isShowSubscriptionInfo.value = false
+    }
+
+    return { open, isShowSubscriptionInfo, close }
+  },
+)
+
+export const useNoCardWarning = createGlobalState(() => {
+  const { t } = useI18n()
+  const showNoCardWarning = ref(false)
+  function openNoCardWarning() {
+    const permissionManagement = APP_DETAIL_STORAGE.value?.[1]?.group?.permission?.find(item => item.apiGroupId === 'management')
+    if (permissionManagement)
+      showNoCardWarning.value = true
+    else
+      ElMessage.error(t('app.not_permission_management'))
+  }
+
+  function closeNoCarWarning() {
+    showNoCardWarning.value = false
+  }
+
+  return { openNoCardWarning, showNoCardWarning, closeNoCarWarning }
+})
+export const useNoCardWarningSub = createGlobalState(() => {
+  // SECTION: no card check
+  const noCard = computed(() => {
+    return !APP_DETAIL_STORAGE.value?.[0].addedPrimaryCard
+  })
+
+  function openNoCardWarning() {
+    window?.$wujie.props.openNoCardWarning()
+  }
+
+  function withNoCardWarning(fn: Function) {
+    if (noCard.value) {
+    // if(true) {
+      openNoCardWarning()
+    }
+    else {
+      fn()
+    }
+  }
+
+  return { noCard, openNoCardWarning, withNoCardWarning }
+})
+
+export function useAppBillingInfo(isTrial: MaybeRef<boolean>) {
+  const _isTrial = toRef(isTrial)
+  const { data, ...rest } = useQuery(
+    [QueryKeys.AppBillingInfo],
+    async () => {
+      return await $authServiceApi('/auth-service/v1/apps/{id}/get-remaining-free-trial', { pathParams: { id: APP_ID_STORAGE.value } })
+    },
+    {
+      enabled: computed(() => _isTrial.value && !!APP_ID_STORAGE.value),
+      refetchOnWindowFocus: false,
+    },
+  )
+  const trialRemainDay = computed(() => data.value?.remainingDays)
+
+  return {
+    data,
+    ...rest,
+    trialRemainDay,
+  }
+}
+
+export async function useGetTotalAlerts() {
+  const appId = computed(() => {
+    return APP_ID_STORAGE.value as string
+  })
+
+  const { data: alerts, isLoading, suspense, refetch } = useQuery(
+    [appId],
+    async () => await $transcodeApi('api/transcode/alerts', {
+      method: 'GET',
+      query: {
+        q: {
+          status: 'active',
+        },
+      },
+      headers: { 'X-App-Id': appId.value },
+    }),
+    {
+      enabled: computed(() => !!appId.value),
+      refetchOnWindowFocus: true,
+      refetchInterval: 10000,
+    },
+  )
+
+  await suspense()
+  syncRef(alerts, ALERTS_TRANSCODE_STORAGE, { direction: 'ltr' })
+
+  return { alerts }
+}
+
+export function useTotalAlertsPlayout() {
+  const appId = computed(() => {
+    return APP_ID_STORAGE.value as string
+  })
+
+  const { data: alerts, isLoading, suspense, refetch } = useQuery(
+    [`api/playout/alerts-${appId}`],
+    async () => await $transcodeApi('api/playout/alerts', {
+      method: 'GET',
+      query: {
+        q: {
+          status: 'active',
+        },
+      },
+      headers: { 'X-App-Id': appId.value },
+    }),
+    {
+      enabled: computed(() => !!appId.value),
+      refetchOnWindowFocus: true,
+      refetchInterval: 10000,
+    },
+  )
+  const totalAlerts = computed(() => {
+    return alerts.value?.total || 0
+  })
+  // syncRef(alerts, ALERTS_TRANSCODE_STORAGE, { direction: 'ltr' })
+
+  return { totalAlerts }
+}
+
+export async function useGetPaymentMethod() {
+  const appId = computed(() => {
+    return APP_ID_STORAGE.value as string
+  })
+
+  const { data: paymentInfo, suspense } = useQuery(
+    [appId],
+    async () => await $billingApi('api/billing/app-billings/info', {
+      method: 'GET',
+      headers: { 'X-App-Id': appId.value },
+    }),
+    {
+      enabled: computed(() => !!appId.value),
+      refetchOnWindowFocus: true,
+    },
+  )
+
+  await suspense()
+  syncRef(paymentInfo, PAYMENT_METHOD_STORAGE, { direction: 'ltr' })
+
+  return { paymentInfo }
+}