@sigmaott/base-next 1.0.6

package/src/composables/refReset.ts

@@ -0,0 +1,12 @@
+import { klona } from 'klona'
+import type { Ref } from 'vue'
+
+export function refReset<T>(defaultValue: T) {
+  const data = ref(klona(defaultValue)) as Ref<T>
+  const extended = extendRef(data, {
+    reset() {
+      extended.value = klona(defaultValue)
+    },
+  })
+  return extended
+}

package/src/composables/resetInfiniteQueryPagination.ts

@@ -0,0 +1,18 @@
+export function useResetInfiniteQueryPagination() {
+  const queryClient = useQueryClient()
+
+  async function reset(queryKey: string[]) {
+    queryClient.setQueryData(queryKey, (oldData: any) => {
+      if (!oldData)
+        return undefined
+
+      return {
+        pages: oldData.pages.slice(0, 1),
+        pageParams: oldData.pageParams.slice(0, 1),
+      }
+    })
+    await queryClient.invalidateQueries({ queryKey })
+  }
+
+  return { reset }
+}

package/src/composables/route.ts

@@ -0,0 +1,19 @@
+export const PLAN_TYPES = {
+  PRO: 'pro',
+  ENTERPRISE: 'enterprise',
+  FREE: 'free',
+  PROTRIAL: 'proTrial',
+}
+
+export function useActionFreeTrial() {
+  const activeFreeTrialMutation = useMutation(
+    (id: string) =>
+      $authServiceApi('auth-service/v1/apps/{id}/free-trial', { method: 'patch', pathParams: { id } }),
+  )
+  async function handleActiveFreeTrial(id: string) {
+    await activeFreeTrialMutation.mutateAsync(id)
+  }
+  return {
+    handleActiveFreeTrial,
+  }
+}

package/src/composables/toast.ts

@@ -0,0 +1,21 @@
+import { ref } from 'vue'
+import { createGlobalState } from '@vueuse/core'
+
+export const useToast = createGlobalState(
+  () => {
+    // Api lấy list notifications
+    const noti = ref([])
+
+    // add notification vào list notifications
+    function changeNotification(notifi: any) {
+      noti.value.push({ title: notifi?.title, message: notifi?.message, type: notifi?.type })
+    }
+
+    function clearNotification() {
+      if (noti.value.length)
+        noti.value.shift()
+    }
+    setInterval(clearNotification, 10000)
+    return { changeNotification, noti }
+  },
+)

package/src/composables/useApp.ts

@@ -0,0 +1,6 @@
+export function transformAppStatus(value: string | null): string | null {
+  if (!value)
+    return null
+  const words = value.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1))
+  return words.join(' ')
+}

package/src/composables/useAsyncSchema.ts

@@ -0,0 +1,58 @@
+import SwaggerClient from 'swagger-client'
+import { useFilterSchema } from './useFilterSchema'
+import service from '@/api/axios'
+
+const useSharedSchemaAsync = createSharedComposable(useAsyncState)
+
+export function useAsyncSchema(url: string, schemaInput: string) {
+  async function fetcher() {
+    const res = await service.get(url, {
+      headers: {
+        noNotify: true,
+      },
+    })
+    const result = await SwaggerClient.resolveSubtree(res.data.components.schemas, [])
+    return result.spec
+  }
+
+  const { state, ...rest } = useSharedSchemaAsync(fetcher, {})
+
+  const schema = computed(() => useFilterSchema(state.value?.[schemaInput]?.properties || {}, {}))
+  const schemaItem = computed(() => state.value?.[schemaInput] || {})
+
+  const schemaObj = computed(() => schemaItem.value?.properties || {})
+  const schemaDesc = computed(() => {
+    return objectMap(schemaObj.value || {}, (k, v) => [k, v.description || ''])
+  })
+
+  return {
+    ...rest,
+    schema,
+    schemaItem,
+    schemaDesc,
+    schemaObj,
+  }
+}
+
+export function useHelpPanel() {
+  const isShowHelpPanel = ref(false)
+  const schemaObj = ref({})
+
+  function openHelpPanel(schema: any) {
+    schemaObj.value = schema
+    isShowHelpPanel.value = true
+    console.log('🚀 ~ openHelpPanel ~ schema:', schema, isShowHelpPanel)
+  }
+
+  function closeHelpPanel() {
+    isShowHelpPanel.value = false
+  }
+  return {
+    isShowHelpPanel,
+    openHelpPanel,
+    closeHelpPanel,
+    schemaObj,
+  }
+}
+
+export const useSharedHelpPanel = createSharedComposable(useHelpPanel)

package/src/composables/useChannelActions.ts

@@ -0,0 +1,151 @@
+import { ElMessageBox } from 'element-plus'
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
+import { QueryKeys } from '@/enums'
+
+export function useChannelActions() {
+  const { t } = useI18n()
+  const queryClient = useQueryClient()
+
+  interface ChannelActionParams {
+    channelId: string
+    type: 'event' | 'transcode' | 'playout'
+  }
+
+  async function confirmAction(action: string) {
+    try {
+      await ElMessageBox.confirm(
+        t('Channel.confirmMessage', { action: t(`Channel.actions.${action}`) }),
+        t('Channel.warning'),
+        {
+          confirmButtonText: t('Actions.yes'),
+          cancelButtonText: t('Actions.no'),
+          type: 'warning',
+        },
+      )
+      return true
+    }
+    catch {
+      return false
+    }
+  }
+
+  const invalidateQueries = async (type: 'event' | 'transcode' | 'playout') => {
+    if (type === 'transcode')
+      await queryClient.invalidateQueries(['TRANSCODE_CHANNEL'])
+    else if (type === 'event')
+      await queryClient.invalidateQueries([QueryKeys.EVENT_CHANNEL])
+    else if (type === 'playout')
+      await queryClient.invalidateQueries([QueryKeys.FAST_CHANNEL])
+  }
+
+  const startChannelMutation = useMutation({
+    mutationFn: async (params: ChannelActionParams) => {
+      if (params.type === 'event') {
+        return await $transcodeApi('api/transcode/event-channels/{channelId}/actions/start', {
+          method: 'PUT',
+          pathParams: { channelId: params.channelId },
+          headers: { 'X-Bypass-403': 'true' },
+        })
+      }
+      else if (params.type === 'transcode') {
+        return await $transcodeApi('api/transcode/channels/{channelId}/actions/start', {
+          method: 'PUT',
+          pathParams: { channelId: params.channelId },
+          headers: { 'X-Bypass-403': 'true' },
+        })
+      }
+      else if (params.type === 'playout') {
+        return await $playoutApi('api/playout/fast-channels/{id}/actions/start', {
+          method: 'PUT',
+          pathParams: { id: params.channelId },
+          headers: { 'X-Bypass-403': 'true' },
+        })
+      }
+    },
+    onSuccess: (_, variables) => {
+      ElNotification.success(t('Channel.start_channel_successfully'))
+      invalidateQueries(variables.type)
+    },
+  })
+
+  const stopChannelMutation = useMutation({
+    mutationFn: async (params: ChannelActionParams) => {
+      if (params.type === 'event') {
+        return await $transcodeApi('api/transcode/event-channels/{channelId}/actions/stop', {
+          method: 'PUT',
+          pathParams: { channelId: params.channelId },
+          headers: { 'X-Bypass-403': 'true' },
+        })
+      }
+      else if (params.type === 'transcode') {
+        return await $transcodeApi('api/transcode/channels/{channelId}/actions/stop', {
+          method: 'PUT',
+          pathParams: { channelId: params.channelId },
+          headers: { 'X-Bypass-403': 'true' },
+        })
+      }
+      else if (params.type === 'playout') {
+        return await $playoutApi('api/playout/fast-channels/{id}/actions/stop', {
+          method: 'PUT',
+          pathParams: { id: params.channelId },
+          headers: { 'X-Bypass-403': 'true' },
+        })
+      }
+    },
+    onSuccess: (_, variables) => {
+      ElNotification.success(t('Channel.stop_channel_successfully'))
+      invalidateQueries(variables.type)
+    },
+  })
+
+  const resetChannelMutation = useMutation({
+    mutationFn: async (params: ChannelActionParams) => {
+      if (params.type === 'event') {
+        return await $transcodeApi('api/transcode/event-channels/{channelId}/actions/reset', {
+          method: 'PUT',
+          pathParams: { channelId: params.channelId },
+          headers: { 'X-Bypass-403': 'true' },
+        })
+      }
+      else if (params.type === 'transcode') {
+        return await $transcodeApi('api/transcode/channels/{channelId}/actions/reset', {
+          method: 'PUT',
+          pathParams: { channelId: params.channelId },
+          headers: { 'X-Bypass-403': 'true' },
+        })
+      }
+      else if (params.type === 'playout') {
+        return await $playoutApi('api/playout/fast-channels/{id}/actions/reset', {
+          method: 'PUT',
+          pathParams: { id: params.channelId },
+          headers: { 'X-Bypass-403': 'true' },
+        })
+      }
+    },
+    onSuccess: (_, variables) => {
+      ElNotification.success(t('Channel.reset_channel_successfully'))
+      invalidateQueries(variables.type)
+    },
+  })
+
+  async function startChannel(params: ChannelActionParams) {
+    if (await confirmAction('start'))
+      await startChannelMutation.mutateAsync(params)
+  }
+
+  async function stopChannel(params: ChannelActionParams) {
+    if (await confirmAction('stop'))
+      await stopChannelMutation.mutateAsync(params)
+  }
+
+  async function resetChannel(params: ChannelActionParams) {
+    if (await confirmAction('reset'))
+      await resetChannelMutation.mutateAsync(params)
+  }
+
+  return {
+    startChannel,
+    stopChannel,
+    resetChannel,
+  }
+}

package/src/composables/useComplexSearchParam.ts

@@ -0,0 +1,293 @@
+import type { Ref } from 'vue'
+import { toRefs } from '@vueuse/core'
+import * as R from 'ramda'
+import isEqual from 'lodash/isEqual'
+
+function equals(obj1: unknown, obj2: unknown): boolean {
+  const isPlainObject = (val: unknown): val is Record<string, unknown> =>
+    val !== null && typeof val === 'object' && val.constructor === Object
+
+  const deepEqual = (val1: unknown, val2: unknown): boolean => {
+    if (val1 === val2)
+      return true // Handles primitives and same references
+    if (typeof val1 !== typeof val2)
+      return false
+
+    if (Array.isArray(val1) && Array.isArray(val2)) {
+      if (val1.length !== val2.length)
+        return false
+      const sorted1 = [...val1].sort()
+      const sorted2 = [...val2].sort()
+      return sorted1.every((item, index) => deepEqual(item, sorted2[index]))
+    }
+
+    if (isPlainObject(val1) && isPlainObject(val2)) {
+      const keys1 = Object.keys(val1).sort()
+      const keys2 = Object.keys(val2).sort()
+      if (keys1.length !== keys2.length)
+        return false
+      return keys1.every(
+        (key, index) =>
+          key === keys2[index] && deepEqual((val1 as Record<string, unknown>)[key], (val2 as Record<string, unknown>)[key]),
+      )
+    }
+
+    return false // Not equal for all other cases
+  }
+
+  return deepEqual(obj1, obj2)
+}
+
+export function useComplexSearchParam(params: Ref<{ q: string }>, options?: {
+  defaultQ?: { q: any }
+  searchTextKey?: string
+  searchKeys?: MaybeRefOrGetter<string[]>
+}) {
+  const { q } = toRefs(params)
+  const nameKey = options?.searchTextKey || 'name'
+
+  const isChange = computed(() => {
+    return options?.defaultQ ? !equals(JSON.parse(q.value), JSON.parse(options?.defaultQ)) : false
+  })
+
+  const parsedQ = computed({
+    get: () => {
+      const value = isRef(q.value) ? q.value.value : q.value
+      if (!value)
+        return {}
+      return JSON.parse(value)
+    },
+    set: (newVal) => {
+      if (isRef(q.value))
+        q.value.value = JSON.stringify(newVal)
+      else
+        q.value = JSON.stringify(newVal)
+    },
+  })
+
+  const qAnd0 = computed({
+    get: () => {
+      return parsedQ.value.$and[0]
+    },
+    set: (newVal) => {
+      const $and = parsedQ.value.$and || []
+      $and[0] = newVal
+      parsedQ.value = { $and }
+    },
+  })
+
+  const qAnd1 = computed({
+    get: () => {
+      return parsedQ.value.$and[1]
+    },
+    set: (newVal) => {
+      const $and = parsedQ.value.$and || []
+      $and[1] = newVal
+      parsedQ.value = { $and }
+    },
+  })
+
+  const qAnd2 = computed({
+    get: () => {
+      return parsedQ.value.$and[2]
+    },
+    set: (newVal) => {
+      const $and = parsedQ.value.$and || []
+      $and[2] = newVal
+      parsedQ.value = { $and }
+    },
+  })
+
+  const searchText = ref(qAnd0.value[nameKey] ? qAnd0.value[nameKey].$regex : '')
+
+  debouncedWatch(
+    searchText,
+    (_str) => {
+      const name = _str ? { $regex: _str, $options: 'i' } : undefined
+      const $and = parsedQ.value.$and || []
+      $and[0][nameKey] = name
+      parsedQ.value = { $and }
+    },
+    { deep: true, debounce: 250 },
+  )
+
+  const searchKeys = toRef(options?.searchKeys)
+
+  // alternative to the search text, for multiple search fields
+  const qAnd1Search = ref((searchKeys.value || [])?.reduce((acc, key) => {
+    acc[key] = ''
+    return acc
+  }, {} as Record<string, string>))
+
+  debouncedWatch(qAnd1Search, () => {
+    qAnd1.value = Object.entries(qAnd1Search.value).reduce((acc, [key, value]) => {
+      acc[key] = value ? { $regex: value, $options: 'i' } : undefined
+      return acc
+    }, {} as Record<string, any>)
+  }, { deep: true, debounce: 250 })
+
+  const clearQ0 = () => {
+    const value = options?.defaultQ
+    qAnd0.value = !value ? {} : JSON.parse(value).$and[0]
+  }
+  const clearQ1 = () => {
+    const value = options?.defaultQ
+    qAnd1.value = !value ? {} : JSON.parse(value).$and[1]
+  }
+  const clearQ2 = () => {
+    const value = options?.defaultQ
+    qAnd2.value = !value ? {} : JSON.parse(value).$and[2] || {}
+  }
+  const clearQ = () => {
+    clearQ0()
+    clearQ1()
+  }
+
+  return {
+    searchText,
+    parsedQ,
+    qAnd0,
+    qAnd1,
+    qAnd2,
+    qAnd1Search,
+    isChange,
+    clearQ,
+    clearQ0,
+    clearQ1,
+    clearQ2,
+  }
+}
+
+interface TableSearchParams {
+  page?: number
+  perPage?: number
+  q?: any
+  [key: string]: any
+}
+
+interface TableSearchOptions {
+  [key: string]: any
+}
+
+export function useTableSearch(
+  defaultParams: TableSearchParams = {},
+  options: TableSearchOptions = {},
+  disabledSync = false,
+) {
+  const params = useRouteParams(defaultParams, options, disabledSync)
+
+  const complexSearch = useComplexSearchParam(params, { defaultQ: defaultParams.q })
+
+  function sortChange(sort: { column: string, prop: string, order?: 'descending' | 'ascending' }) {
+    if (sort.order)
+      params.value.sort = `${sort.prop}|${sort.order === 'ascending' ? 'asc' : 'desc'}`
+    else
+      params.value.sort = options?.sort ? options.sort : 'name|asc'
+  }
+  function sortChangeDefault(sort: { column: string, prop: string, order?: 'descending' | 'ascending' }) {
+    if (sort.order)
+      params.value.sort = `${sort.prop}|${sort.order === 'ascending' ? 'asc' : 'desc'}`
+    else
+      params.value.sort = ''
+  }
+
+  return {
+    params,
+    sortChange,
+    sortChangeDefault,
+    ...complexSearch,
+  }
+}
+// ... existing code ...
+
+interface QueryMapperOptions {
+  key: string
+  type: 'regex' | 'in' | 'exact'
+  defaultValue?: any
+}
+
+export function useQuickFilter(
+  qAnd0: Ref<any>,
+  resetPage: () => void,
+  options: QueryMapperOptions[],
+) {
+  function revertMapQueryQ(qAnd: { $and: Array<Record<string, any>> }) {
+    if (!qAnd?.$and?.length) {
+      return options.reduce((acc, opt) => {
+        acc[opt.key] = opt.defaultValue ?? (opt.type === 'in' ? [] : '')
+        return acc
+      }, {} as Record<string, any>)
+    }
+
+    return qAnd.$and.reduce((acc, query) => {
+      const [key, value] = Object.entries(query)[0]
+      const option = options.find(opt => opt.key === key)
+
+      if (option) {
+        switch (option.type) {
+          case 'regex':
+            acc[key] = value.$regex
+            break
+          case 'in':
+            acc[key] = value.$in
+            break
+          case 'exact':
+            acc[key] = value
+            break
+        }
+      }
+
+      return acc
+    }, options.reduce((acc, opt) => {
+      acc[opt.key] = opt.defaultValue ?? (opt.type === 'in' ? [] : '')
+      return acc
+    }, {} as Record<string, any>))
+  }
+
+  function mapQueryQ(query: Record<string, any>) {
+    return Object.entries(query).reduce((acc, [key, value]) => {
+      const option = options.find(opt => opt.key === key)
+
+      if (!option)
+        return acc
+
+      const isEmpty = value === '' || value === undefined || (Array.isArray(value) && value.length === 0)
+      if (isEmpty)
+        return acc
+
+      switch (option.type) {
+        case 'regex':
+          acc.push({ [key]: { $regex: value, $options: 'i' } })
+          break
+        case 'in':
+          acc.push({ [key]: { $in: value } })
+          break
+        case 'exact':
+          acc.push({ [key]: value })
+          break
+      }
+
+      return acc
+    }, [] as Array<Record<string, any>>)
+  }
+
+  const filterForm = ref<{
+    name: string
+    status?: string
+    serverId: any
+  }>(revertMapQueryQ(qAnd0.value || { $and: [{}, {}] }))
+  watch(filterForm, (newQuery) => {
+    const mapQuery = mapQueryQ(newQuery)
+    qAnd0.value = mapQuery.length > 0 ? { $and: mapQuery } : {}
+    resetPage()
+  }, { deep: true })
+
+  function resetFilter() {
+    filterForm.value = revertMapQueryQ(qAnd0.value || { $and: [{}, {}] })
+  }
+
+  return {
+    filterForm,
+    resetFilter,
+  }
+}

package/src/composables/useFilterSchema.ts

@@ -0,0 +1,106 @@
+import type { FieldConfigMap } from '@sigma-streaming/base/src/components'
+
+export interface SchemaField {
+  type: string
+  enum?: []
+  filterable?: boolean
+  sortable?: boolean
+  label: string
+  value: string
+  format?: string
+  populate?: boolean
+  items?: object
+}
+
+type LabelMap = Record<string, string>
+
+function capitalizeFirstLetter(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+export function mapEnumToOptions(enums: string[], LabelMap?: LabelMap) {
+  return enums
+    .map((value: string) => ({ label: LabelMap?.[value] ?? value, value }))
+    .filter(item => item.label !== '')
+}
+
+function mapInputFieldSchema(schemaField: SchemaField) {
+  const { type, format, enum: enums } = schemaField
+  if (type === 'string') {
+    if (format === 'date-time')
+      return 'datetime'
+
+    if (format === 'date')
+      return 'date'
+
+    if (enums)
+      return 'multiselect'
+
+    return 'text'
+  }
+  else if (enums || type === 'array') {
+    return 'multiselect'
+  }
+  else if (type === 'number') {
+    return 'number'
+  }
+}
+
+export function useFilterSchema(schema: Record<string, SchemaField>,
+  LabelsMaps: Record<string, LabelMap>) {
+  const data = schema
+
+  const filterable = (() => {
+    const fields: Record<string, SchemaField> = {}
+
+    for (const prop in data) {
+      if (schema[prop].filterable && !['array', 'object'].includes(schema[prop].type))
+        fields[prop] = { ...schema[prop], label: capitalizeFirstLetter(prop), value: prop }
+    }
+    return fields
+  })()
+
+  const sortableFilter = computed(() => {
+    const sorts: Record<string, SchemaField> = {}
+
+    for (const prop in data) {
+      if (schema[prop].sortable)
+        sorts[prop] = { ...schema[prop], value: prop }
+    }
+
+    return Object.values(sorts)
+  })
+
+  const sortableKeys = computed(() => {
+    const sorts: Record<string, SchemaField> = {}
+    for (const prop in data) {
+      if (schema[prop].sortable)
+        sorts[prop] = { ...schema[prop], value: prop }
+    }
+
+    return Object.keys(sorts)
+  })
+
+  const fieldMap = Object.values(filterable || []).reduce(
+    (acc: FieldConfigMap, curr: SchemaField) => {
+      acc[curr.value] = {
+        label: curr.label,
+        value: curr.value,
+        input: mapInputFieldSchema(curr),
+        options: mapEnumToOptions(curr.enum || [], LabelsMaps[curr.value]),
+        validation: { required: true },
+        modify: false,
+      }
+      return acc
+    },
+    {} as FieldConfigMap,
+  )
+
+  return {
+    sortable: sortableFilter.value,
+    fieldMap,
+    sortableKeys: sortableKeys.value,
+  }
+}
+
+export type FilterSchema = ReturnType<typeof useFilterSchema>