@sigmaott/base-library-next 2.2.5 → 2.2.7

package/src/components/PresetTable.vue

@@ -1,114 +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>
+<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

@@ -1,137 +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>
+<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

@@ -1,79 +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>
+<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>