@sigmaott/base-library-next 2.1.9

package/src/components/PresetTable.vue

@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import { normalizePreset } from '../utils/preset'
+import { getPresets } from '../api'
+
+const props = defineProps<{
+  params: any
+  height?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:params', params: any): void
+  (e: 'select', preset: any): void
+}>()
+
+const params = useVModel(props, 'params', emit)
+
+const _q = computed({
+  get: () => params.value.q,
+  set: (val) => {
+    params.value.q = val
+  },
+})
+
+const q = useQueryParams(_q, {})
+
+const { data, isLoading, refetch } = useQuery(
+  [QueryKeys.LibraryPreset, params],
+  async () => {
+    // return (await getProfiles(params, { params: { q: toReactive(q) } })).data
+    return (await getPresets(params.value)).data
+  },
+)
+const refreshForm = reactive({
+  enabled: true,
+  duration: 20,
+})
+
+const tableData = computed(() => {
+  return data.value?.data.map(normalizePreset)
+})
+const tableRef = ref(null)
+const paginationRef = ref(null)
+
+function handleSizeChange(value: number) {
+  params.value.perPage = value
+  params.value.page = 1
+}
+</script>
+
+<template>
+  <el-table
+    v-bind="$attrs"
+    ref="tableRef"
+    v-loading="isLoading"
+    :data="tableData"
+    stripe border
+    class="w-ful my-16px flex-1"
+    :height="height"
+    @row-click="$emit('select', $event)"
+  >
+    <el-table-column prop="id" label="ID" width="60" fixed>
+      <template #default="{ row }">
+        <SSCopyButton :value="row.id" />
+      </template>
+    </el-table-column>
+
+    <el-table-column label="Name" prop="name" min-width="130">
+      <template #default="scope">
+        {{ scope.row.name }}
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="Type" prop="type" min-width="100">
+      <template #default="scope">
+        {{ scope.row.type }}
+      </template>
+    </el-table-column>
+    <el-table-column label="Information" prop="information" width="500">
+      <template #default="scope">
+        <SharedVideoInfoViewer v-if="scope.row.type === 'video'" :video="scope.row" />
+
+        <SharedAudioInfoViewer v-if="scope.row.type === 'audio'" :audio="scope.row" />
+      </template>
+    </el-table-column>
+    <el-table-column label="Option" prop="option" min-width="130">
+      <template #default="scope">
+        <div>{{ scope.row.option || '' }}</div>
+      </template>
+    </el-table-column>
+    <el-table-column label="Description" prop="description" min-width="130">
+      <template #default="scope">
+        <div>{{ scope.row.description }}</div>
+      </template>
+    </el-table-column>
+    <slot />
+  </el-table>
+  <div class="flex items-center justify-between">
+    <el-pagination
+      v-if="tableData"
+      ref="paginationRef"
+      v-model:current-page="params.page"
+      background
+      :page-sizes="[10, 15, 20, 50, 100]"
+      :page-size="params.perPage"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="data?.total || 0"
+      @size-change="handleSizeChange"
+    />
+    <SSAutoRefresh
+      :duration="refreshForm.duration"
+      :enabled="refreshForm.enabled"
+      @on-refresh="refetch"
+    />
+  </div>
+</template>

package/src/components/ProfileAllList.vue

@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import { normalizeProfile } from '../utils/profile'
+import { deleteProfile, getProfiles } from '../api'
+import ProfileFormModal from './ProfileFormModal.vue'
+
+const emit = defineEmits(['selectItem'])
+const { t } = useI18n()
+const route = useRoute()
+const params = reactive({
+  ...useRouteQueries({
+    page: 1,
+    perPage: 15,
+    q: '{}',
+  }),
+  populates: 'sigmaChannels',
+  sort: '',
+})
+const q = useQueryParams(toRef(params, 'q'), {})
+
+const { data, isLoading, refetch } = useQuery(
+  [QueryKeys.LibraryProfile, params],
+  async () => {
+    return (await getProfiles(params)).data
+  },
+)
+const refreshForm = reactive({
+  enabled: true,
+  duration: 20,
+})
+
+const tableData = computed(() => {
+  return data.value?.data.map(normalizeProfile)
+})
+
+function handleSizeChange(value: number) {
+  params.perPage = value
+  params.page = 1
+}
+
+let modifierFormMode = $ref<'create' | 'edit' | 'clone'>('create')
+let isShowModifierForm = $ref(route.query.mode === 'create')
+let edittingProfileId = $ref<string>()
+
+function handleEdit(id: string) {
+  modifierFormMode = 'edit'
+  isShowModifierForm = true
+  edittingProfileId = id
+}
+
+function handleClone(id: string) {
+  modifierFormMode = 'clone'
+  isShowModifierForm = true
+  edittingProfileId = id
+}
+
+function handleDestroy(id: string) {
+  ElMessageBox.confirm('This will permanently delete the profile. Continue?', 'Warning', {
+    confirmButtonText: 'OK',
+    cancelButtonText: 'Cancel',
+    type: 'warning',
+  })
+    .then(async () => {
+      const res = await deleteProfile(id)
+      if (res) {
+        ElMessage({
+          message: 'Delete successful',
+          type: 'success',
+        })
+        refetch()
+      }
+    })
+    .catch(() => { })
+}
+
+function handleAdd() {
+  modifierFormMode = 'create'
+  isShowModifierForm = true
+}
+
+function selecteRow(row: any) {
+  emit('selectItem', row)
+}
+</script>
+
+<template>
+  <div class="flex items-center justify-between">
+    <div class="font-bold uppercase">
+      {{ t('Profile.list') }}
+    </div>
+    <el-button type="primary" @click="handleAdd">
+      <template #icon>
+        <div class="i-ep:plus" />
+      </template>
+      Add
+    </el-button>
+  </div>
+  <ProfileTable :is-loading="isLoading" :selecte-row="selecteRow" :table-data="tableData">
+    <el-table-column fixed="right" label="Action" align="center" width="200">
+      <template #default="scope">
+        <el-button-group>
+          <el-tooltip content="Edit">
+            <el-button type="primary" @click="handleEdit(scope.row.id)">
+              <template #icon>
+                <div class="i-ep:edit" />
+              </template>
+            </el-button>
+          </el-tooltip>
+          <el-tooltip content="Clone" placement="top-start">
+            <el-button type="warning" @click="handleClone(scope.row.id)">
+              <template #icon>
+                <div class="i-ep:document-copy" />
+              </template>
+            </el-button>
+          </el-tooltip>
+          <el-tooltip content="Delete">
+            <el-button type="danger" @click="handleDestroy(scope.row.id)">
+              <template #icon>
+                <div class="i-ep:delete" />
+              </template>
+            </el-button>
+          </el-tooltip>
+        </el-button-group>
+      </template>
+    </el-table-column>
+  </ProfileTable>
+  <div class="flex items-center justify-between">
+    <el-pagination
+      v-if="tableData" v-model:current-page="params.page" background
+      :page-sizes="[10, 20, 50, 100]" :page-size="params.perPage" layout="total, sizes, prev, pager, next, jumper"
+      :total="data?.total || 0" @size-change="handleSizeChange"
+    />
+
+    <SSAutoRefresh :duration="10" enabled @on-refresh="refetch" />
+  </div>
+
+  <ProfileFormModal :id="edittingProfileId" v-model="isShowModifierForm" :mode="modifierFormMode" @on-refresh="refetch" />
+</template>

package/src/components/ProfileFormModal.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { getProfile } from '../api'
+import ProfileModify from './ProfileModify.vue'
+
+const props = defineProps<{
+  modelValue: boolean
+  mode: 'create' | 'edit' | 'clone'
+  id: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'onRefresh'): void
+}>()
+
+const id = toRef(props, 'id')
+const mode = toRef(props, 'mode')
+
+const { data: profileDetail, isLoading } = useQuery(
+  [QueryKeys.LibraryProfile, id, mode],
+  async () => {
+    return (await getProfile(id.value!)).data
+  },
+  {
+    enabled: computed(() => !!id.value),
+  },
+)
+
+const { modelValue: visible } = defineModels<{
+  modelValue: boolean
+}>()
+
+const modifyTitle = computed(() => {
+  if (props.mode === 'create')
+    return 'Create'
+  if (props.mode === 'edit')
+    return 'Edit'
+  if (props.mode === 'clone')
+    return 'Clone'
+  return '-'
+})
+
+function handleCloseModifierForm() {
+  visible.value = false
+}
+
+function handleDoneAddProfile() {
+  handleCloseModifierForm()
+  emit('onRefresh')
+}
+
+function handleDoneCloneProfile() {
+  handleCloseModifierForm()
+  emit('onRefresh')
+}
+
+function handleDoneUpdateProfile() {
+  handleCloseModifierForm()
+  emit('onRefresh')
+}
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    append-to-body
+    width="75%"
+    :title="modifyTitle"
+    :before-close="handleCloseModifierForm"
+  >
+    <ProfileModify
+      :mode="mode"
+      :item="props.mode !== 'create' ? profileDetail : null"
+      @added="handleDoneAddProfile"
+      @cloned="handleDoneCloneProfile"
+      @updated="handleDoneUpdateProfile"
+      @close="visible = false"
+    />
+  </el-dialog>
+</template>

package/src/components/ProfileModify.vue

@@ -0,0 +1,152 @@
+<script lang="ts" setup>
+import { serializePreset } from '../utils/preset'
+import type { CreateProfileDto } from '../api-client-library'
+
+const props = withDefaults(defineProps<{
+  mode: 'create' | 'edit' | 'clone' // why so much mode?
+  needSubmit: boolean
+  prop?: string
+  item?: CreateProfileDto | null
+  isPackage?: boolean
+}>(), { needSubmit: true })
+
+const emit = defineEmits<{
+  close: []
+  submit: [profile: CreateProfileDto]
+}>()
+
+const item = toRef(props, 'item')
+
+const activeMedia = ref()
+
+const initFields = ref<any>({
+  name: '',
+  video: [],
+  audio: [],
+  other: [],
+  presets: [],
+})
+const fields = ref(klona(initFields.value))
+
+if (props.prop)
+  useSyncElForm(props.prop, { formValue, formErrors, submitLocks, formRef })
+
+watchEffect(() => {
+  if (props.item) {
+    initFields.value = klona(item.value)
+    fields.value = klona(item.value)
+    activeMedia.value = 'media-0'
+  }
+})
+
+const { createProfileMutation, updateProfileMutation, isMutationLoading } = useProfileMutation()
+
+const { t } = useI18n()
+const { formRef, formValue, handleSubmit, handleValidate, formErrors, getAtrrs, submitLocks } = useElForm<any>({
+  initialValues: fields,
+  async onSubmit(values) {
+    if (props.mode === 'create') {
+      await createProfileMutation.mutateAsync(serializeData(fields.value))
+      ElMessage.success(t('library_profile.profile_added_successfully'))
+      handleReset()
+      formRef.value?.resetFields()
+    }
+
+    if (props.mode === 'edit') {
+      await updateProfileMutation.mutateAsync({
+        id: fields.value.id,
+        updateProfileDto: serializeData(fields.value),
+      })
+      ElMessage.success(t('library_profile.profile_updated_successfully'))
+    }
+
+    if (props.mode === 'clone') {
+      await createProfileMutation.mutateAsync(serializeData(fields.value))
+      ElMessage.success(t('library_profile.profile_cloned_successfully'))
+    }
+
+    emit('close')
+    emit('submit', serializeData(fields.value))
+    try {
+      // switch (props.mode) {
+      //   case 'create': {
+      //     res = await createProfile(payload)
+      //     if (res) {
+      //       ElMessage.success('Add successful')
+      //       emit('added', res)
+      //     }
+      //     break
+      //   }
+      //   case 'edit': {
+      //     let parsed = serializeData(fields.value)
+      //     parsed = { ...parsed, ...{ id: fields.value.id } }
+      //     res = await updateProfile(parsed)
+      //     if (res) {
+      //       ElMessage.success('Update successful')
+      //       emit('updated', res)
+      //     }
+      //     break
+      //   }
+      //   case 'clone': {
+      //     const payload = serializeData(fields.value)
+      //     res = await createProfile(payload)
+      //     if (res) {
+      //       ElMessage.success('Clone successful')
+      //       emit('cloned', res)
+      //     }
+      //     break
+      //   }
+      //   default:
+      //     break
+      // }
+    }
+    catch (error) {
+    }
+  },
+})
+
+function handleReset() {
+  fields.value = klona(initFields.value)
+}
+
+function handleCancel() {
+  emit('close')
+}
+
+function serializeData(data: any) {
+  const { name, description, presets = [] } = data
+  const serializedPresets = presets.map((item) => {
+    return serializePreset(item)
+  })
+  return {
+    name,
+    description,
+    presets: serializedPresets,
+  }
+}
+</script>
+
+<template>
+  <el-form
+    ref="formRef" label-position="top" label-width="80px" :model="formValue"
+    @validate="handleValidate"
+  >
+    <ProfileConfigItem v-model:activeMedia="activeMedia" :is-package="isPackage">
+      <template #default>
+        <slot name="input" :fields="fields" :get-atrrs="getAtrrs" />
+      </template>
+    </ProfileConfigItem>
+    <div v-if="needSubmit" class="mt-4 w-full flex justify-end">
+      <!-- <el-button :disabled="isMutationLoading" @click="handleReset">
+          {{ $t('library_action.reset') }}
+        </el-button> -->
+
+      <el-button type="primary" plain :disabled="isMutationLoading" @click="handleCancel">
+        {{ $t('library_action.cancel') }}
+      </el-button>
+      <el-button :loading="isMutationLoading" type="primary" @click="handleSubmit">
+        {{ $t('library_action.submit') }}
+      </el-button>
+    </div>
+  </el-form>
+</template>

package/src/components/ProfileTable.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+const { isLoading, selecteRow, tableData, hasSelection, sortChange } = definePropsRefs<{
+  isLoading?: boolean
+  selecteRow?: (row: any) => void
+  tableData: any[]
+  hasSelection?: boolean
+  sortChange?: (row: any) => void
+}>()
+
+const { selectedProfiles } = defineModels<{
+  selectedProfiles?: any[]
+}>()
+
+const hasId = computed(() => tableData.value?.some(item => item.id))
+
+const toggle = ref(false)
+function handleSelectionChange(val) {
+  if (toggle.value)
+    return
+  selectedProfiles.value = val
+}
+const multipleTableRef = ref<any>()
+whenever(multipleTableRef, () => {
+  if (selectedProfiles.value?.length > 0) {
+    toggle.value = true
+    tableData.value.forEach((row) => {
+      const isSelected = selectedProfiles.value?.some(item => item.id === row.id)
+      multipleTableRef.value?.toggleRowSelection(row, isSelected)
+    })
+    toggle.value = false
+  }
+})
+</script>
+
+<template>
+  <el-table
+    ref="multipleTableRef"
+    v-loading="isLoading"
+    :data="tableData"
+    stripe
+    border
+    row-key="id"
+    v-bind="$attrs"
+    class="my-16px w-full flex-1 [&_.el-table\_\_row:hover]:cursor-pointer"
+    @sort-change="sortChange"
+    @row-click="selecteRow"
+    @selection-change="handleSelectionChange"
+  >
+    <slot name="empty" />
+    <slot name="single" />
+    <el-table-column v-if="hasSelection" type="selection" width="55" />
+    <el-table-column
+      prop="id"
+      label="ID"
+      width="60"
+      fixed
+    >
+      <template #default="{ row }">
+        <SSCopyButton v-if="hasId" :value="row.id" @click.prevent.stop />
+      </template>
+    </el-table-column>
+    <ProfileTableColumns />
+    <template #empty>
+      <slot name="empty" />
+    </template>
+    <slot />
+  </el-table>
+</template>

package/src/components/WatermarkDraggableItem.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { isNumber } from '@antfu/utils'
+
+const { modelValue } = defineModels<{
+  modelValue: {
+    mediaScale: number
+    width: number
+    height: number
+    x: number
+    y: number
+    isActive: boolean
+    assetId: string
+  }
+}>()
+
+const screenRatio = ref(3)
+const watermarkXBoundary = ref(1920)
+const watermarkYBoundary = ref(1080)
+
+const w = computed({
+  get: () => {
+    return modelValue.value.width / screenRatio.value * modelValue.value.mediaScale
+  },
+  set: (value: number) => {
+    modelValue.value = {
+      ...modelValue.value,
+      width: value * screenRatio.value,
+      mediaScale: Number(((value * screenRatio.value) / modelValue.value.width).toFixed(1)),
+    }
+  },
+})
+
+const h = computed({
+  get: () => {
+    return modelValue.value.height / screenRatio.value * modelValue.value.mediaScale
+  },
+  set: (value: number) => {
+    modelValue.value = {
+      ...modelValue.value,
+      height: value * screenRatio.value,
+    }
+  },
+})
+
+const x = computed({
+  get: () => {
+    const origin = modelValue.value.x
+    if (origin >= 0)
+      return origin / screenRatio.value
+    return (watermarkXBoundary.value + origin - modelValue.value.width) / screenRatio.value
+  },
+  set: (left: number) => {
+    modelValue.value.x = (left * screenRatio.value) || 0
+  },
+})
+
+const y = computed({
+  get: () => {
+    const origin = modelValue.value.y
+    if (isNumber(origin)) {
+      if (origin >= 0)
+        return origin / screenRatio.value
+      return (watermarkYBoundary.value + origin - modelValue.value.height) / screenRatio.value
+    }
+    return origin
+  },
+  set: (top: number) => {
+    modelValue.value.y = (top * screenRatio.value) || 0
+  },
+})
+
+const { data } = useAssetDetail(() => modelValue.value.assetId)
+</script>
+
+<template>
+  <CommonVue3DraggableResizable
+    v-model:x="x" v-model:y="y" v-model:h="h" v-model:w="w"
+    v-model:active="modelValue.isActive" :handles="['tl', 'tr', 'br', 'bl']" :parent="true" :draggable="true"
+    :resizable="true" :lock-aspect-ratio="true"
+  >
+    <el-image v-if="data?.uri" class="h-full w-full" :src="data.uri" />
+  </CommonVue3DraggableResizable>
+<!--
+  :min-width="getVisualWatermarkSize(watermark.width || 10, 0.1)"
+        :min-height="getVisualWatermarkSize(watermark.height || 10, 0.1)"
+        :max-width="getVisualWatermarkSize(watermark.width, 10)"
+        :max-height="getVisualWatermarkSize(watermark.height, 10)" -->
+</template>