@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Asset/AssetTable.vue

@@ -1,365 +1,365 @@
-<script lang="ts" setup>
-import type { Ref } from 'vue'
-import CollapseTagsTooltip from '../CollapseTagsTooltip/CollapseTagsTooltip.vue'
-import AssetMeta from './AssetMeta.vue'
-import AssetItemPreview from './AssetItemPreview.vue'
-import { useSharedAssetFilters } from '~/components/Asset/asset-context'
-
-const props = withDefaults(defineProps<{
-  assetIdSelected?: string
-  data: Array<any>
-  isFetching: boolean
-  tableRef: Ref<HTMLElement | undefined>
-  isHiddenPlaylist?: boolean
-  selectable?: boolean
-  navigate?: boolean
-}>(), {
-  navigate: false,
-})
-const emit = defineEmits(['delete', 'select', 'preview', 'upload', 'remove', 'importLink', 'recheckFile'])
-
-const multipleSelection = defineModel<any[]>('multipleSelection')
-
-const { t } = useI18n()
-const _tableRef = useVModel(props, 'tableRef')
-function tableRowClassName({ row }: { row: any }) {
-  if (row.id === props.assetIdSelected || multipleSelection.value?.some(item => item.id === row.id))
-    return 'bg-[oklch(0.950_0.023_270.7)]! dark:bg-[oklch(0.198_0.128_270.7)]!'
-  return ''
-}
-
-function downloadAsset(url: string) {
-  const link = document.createElement('a')
-  link.href = url
-  link.download = 'downloaded_asset'
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
-}
-
-const isFullPermission = inject('isFullPermission') as Ref<boolean> | undefined
-const disabled = computed(() => isFullPermission && !isFullPermission?.value)
-
-const { searchPlayListId } = useSharedAssetFilters()
-
-const { navigateWithHistory } = useRouterHistory()
-function handleNavigate(id: string) {
-  if (!props.isHiddenPlaylist) {
-    navigateWithHistory({
-      path: `/asset/${id}`,
-    })
-  }
-}
-
-function calculateExpirationDate(createdAt: string, expiryTime?: number) {
-  if (!expiryTime)
-    return t('label.noExpiry')
-
-  const createdDate = new Date(createdAt)
-  const expirationDate = new Date(createdDate.getTime() + expiryTime * 1000)
-  return formatDateTime(expirationDate)
-}
-
-const optionValidStatus = [
-  { label: 'Not Check', value: 'not_check' },
-  { label: 'Error', value: 'error' },
-  { label: 'Ready', value: 'ready' },
-  { label: 'Checking', value: 'checking' },
-]
-
-// function Returns the label corresponding to the status enum
-function getLabel(status: string) {
-  return optionValidStatus.find(option => option.value === status)?.label ?? 'Unknown'
-}
-
-const isCheckFile = inject<Ref<boolean>>('isCheckFile')
-
-// Selectable
-
-function handleSelectionChange(val: any[]) {
-  multipleSelection.value = val
-}
-
-whenever(_tableRef, () => {
-  props.data.forEach((row) => {
-    const isSelected = multipleSelection.value?.some(item => item.id === row.id)
-    _tableRef.value?.toggleRowSelection(row, isSelected)
-  })
-})
-
-watch(multipleSelection, () => {
-  if (multipleSelection.value?.length === 0) {
-    _tableRef.value?.clearSelection()
-  }
-})
-
-function handleDelete(row: any) {
-  ElMessageBox.confirm(t('message.delete'), {
-    confirmButtonText: t('actions.confirm'),
-    cancelButtonText: t('actions.cancel'),
-    type: 'warning',
-  }).then(() => {
-    emit('delete', row)
-  })
-}
-</script>
-
-<template>
-  <el-table
-    ref="_tableRef"
-    v-loading="props.isFetching"
-    :data="data"
-    row-key="id"
-    :row-class-name="tableRowClassName"
-    @selection-change="handleSelectionChange"
-  >
-    <template #empty>
-      <slot name="empty" :disabled="disabled">
-        <div class="w-full flex flex-col items-center justify-center pt-4">
-          <p>{{ $t('base.no_data') }}</p>
-          <p class="mb-4 text-pretty text-sm">
-            {{ $t('base_library.upload_multimedia_content_for_use_with_in-app_products') }}
-          </p>
-          <el-dropdown trigger="click">
-            <el-button :disabled="disabled">
-              {{ $t('base_library.upload_asset') }}
-            </el-button>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item @click="$emit('upload')">
-                  <div class="i-ri:file-2-line mr-2 size-4" />
-                  <div>
-                    {{ $t('upload_files') }}
-                  </div>
-                </el-dropdown-item>
-                <el-dropdown-item @click="$emit('importLink')">
-                  <div class="i-ri:links-fill mr-2 size-4" />
-                  <div>
-                    {{ $t('import_from_links') }}
-                  </div>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-      </slot>
-    </template>
-    <el-table-column v-if="navigate" type="selection" width="55" />
-    <el-table-column
-      prop="id"
-      label="ID"
-      width="80"
-      fixed
-      align="center"
-    >
-      <template #default="{ row }">
-        <SSCopyButton :value="row.id" />
-      </template>
-    </el-table-column>
-    <el-table-column
-      :label="t('label.name')"
-      min-width="180"
-      :show-overflow-tooltip="{ effect: 'dark', placement: 'top', offset: 0 }"
-    >
-      <template #default="{ row }">
-        <span
-          v-if="!selectable && navigate"
-          :class="{ 'cursor-pointer': !isHiddenPlaylist }"
-          class="text-primary hover:underline"
-          @click="handleNavigate(row.id)"
-        >{{
-          row.name }}</span>
-        <span v-else>{{ row.name }}</span>
-      </template>
-    </el-table-column>
-    <el-table-column
-      prop="url"
-      :label="t('label.preview')"
-      min-width="100"
-      align="center"
-    >
-      <template #default="{ row }">
-        <AssetItemPreview mini :item="row" @on-preview="emit('preview', row)" />
-      </template>
-    </el-table-column>
-    <el-table-column prop="source" :label="t('label.source')" width="80" />
-    <el-table-column prop="meta" :label="t('label.meta')" width="220">
-      <template #default="{ row }">
-        <div class="flex flex-wrap items-center gap-1">
-          <AssetMeta :item="row" />
-        </div>
-      </template>
-    </el-table-column>
-    <el-table-column prop="type" :label="t('label.type')" width="100">
-      <template #default="{ row }">
-        <span>{{ t(`AssetType.${row.type}`) }}</span>
-      </template>
-    </el-table-column>
-    <el-table-column prop="type" :label="t('label.state')" width="100">
-      <template #default="{ row }">
-        <span>{{ row.state }}</span>
-      </template>
-    </el-table-column>
-    <el-table-column prop="type" label="Category" width="120">
-      <template #default="{ row }">
-        <span>{{ row.category }}</span>
-      </template>
-    </el-table-column>
-    <el-table-column prop="tags" :label="t('label.tags')" width="150">
-      <template #default="{ row }">
-        <CollapseTagsTooltip :tags="row.tags" :limit-text="10" :limit="2" />
-      </template>
-    </el-table-column>
-    <el-table-column prop="validStatus" label="Valid file" width="130">
-      <template #default="{ row }">
-        <div class="flex items-center gap-1">
-          <span>{{ getLabel(row.validStatus) }} <span v-if="row.validStatus === 'checking'">({{ Math.round(row.validProgress) }}%)</span></span>
-          <el-tooltip
-            effect="dark"
-            :content="row.validError"
-            placement="top-start"
-          >
-            <div v-if="row.validStatus === 'error'" class="i-ep:info-filled text-danger" />
-          </el-tooltip>
-        </div>
-      </template>
-    </el-table-column>
-    <el-table-column prop="createdAt" :label="t('label.createdAt')" width="140">
-      <template #default="{ row }">
-        <span style="word-break: break-word"> {{ formatDateTime(row.createdAt) }}</span>
-      </template>
-    </el-table-column>
-    <el-table-column :label="t('label.expirationDate')" width="140">
-      <template #default="{ row }">
-        <span style="word-break: break-word">
-          {{ calculateExpirationDate(row.createdAt, row.expire) }}
-        </span>
-      </template>
-    </el-table-column>
-    <el-table-column
-      fixed="right"
-      :label="t('label.actions')"
-      align="center"
-      width="100"
-    >
-      <template #default="{ row }">
-        <el-button-group size="small">
-          <el-tooltip
-            v-if="selectable"
-            effect="dark"
-            :content="t('actions.select')"
-            placement="top"
-          >
-            <el-button
-              :disabled="disabled"
-              type="primary"
-              @click="emit('select', row)"
-            >
-              <div class="i-carbon:checkmark" />
-            </el-button>
-          </el-tooltip>
-          <el-dropdown>
-            <el-button :class="{ 'border-group': !(selectable && row.state === 'completed') }">
-              <template #icon>
-                <div class="i-ep:more" />
-              </template>
-            </el-button>
-
-            <template #dropdown>
-              <el-dropdown-menu :show-timeout="100">
-                <el-dropdown-item :disabled="disabled" @click="!disabled && handleDelete(row)">
-                  <div class="flex items-center gap-2">
-                    <div class="i-ep:delete" />
-                    {{ t('actions.delete') }}
-                  </div>
-                </el-dropdown-item>
-
-                <el-dropdown-item :disabled="disabled" @click="!disabled && downloadAsset(row.uri)">
-                  <div class="flex items-center gap-2">
-                    <div class="i-carbon:download" />
-                    {{ t('actions.download') }}
-                  </div>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-
-              <el-dropdown-item v-if="isCheckFile && row.state === 'completed'" :disabled="disabled" @click="!disabled && $emit('recheckFile', row)">
-                <div class="flex items-center gap-2">
-                  <div class="i-ep:refresh-right" />
-                  {{ t('base_library.recheck') }}
-                </div>
-              </el-dropdown-item>
-
-              <el-dropdown-item v-if="searchPlayListId" :disabled="disabled" @click="$emit('remove', row)">
-                <div class="flex items-center gap-2">
-                  <div class="i-carbon:close" />
-                  {{ $t('base_library.remove_asset_from_playlist') }}
-                </div>
-              </el-dropdown-item>
-            </template>
-          </el-dropdown>
-        </el-button-group>
-      </template>
-    </el-table-column>
-  </el-table>
-</template>
-
-<style>
-.border-group {
-  border-top-left-radius: 4px !important;
-  border-bottom-left-radius: 4px !important;
-  border-left-color: var(--el-border-color) !important;
-}
-</style>
-
-<i18n lang="yaml">
-en:
-  label:
-    name: Name
-    preview: Preview
-    meta: Meta
-    type: Type
-    state: State
-    tags: Tags
-    createdAt: Created At
-    actions: Actions
-    expirationDate: Expiration Date
-    noExpiry: No Expiry
-  actions:
-    confirm: Confirm
-    delete: Delete
-    select: Select
-    cancel: Cancel
-  message:
-    delete: Are you sure to delete this asset?
-  AssetType:
-    image: Image
-    video: Video
-    audio: Audio
-    unknown: Unknown
-    all: All
-vi:
-  label:
-    name: Tên
-    preview: Xem trước
-    meta: Meta
-    type: Loại
-    state: Trạng thái
-    tags: Thẻ
-    createdAt: Thời gian tạo
-    actions: Hành động
-    expirationDate: Ngày hết hạn
-    noExpiry: Không Hết Hạn
-  actions:
-    confirm: Xác nhận
-    delete: Xóa
-    select: Chọn
-    cancel: Hủy
-  message:
-    delete: Bạn có chắc muốn xóa nội dung này?
-  AssetType:
-    image: Hình ảnh
-    video: Video
-    audio: Âm thanh
-    unknown: Không xác định
-    all: Tất cả
-</i18n>
+<script lang="ts" setup>
+import type { Ref } from 'vue'
+import CollapseTagsTooltip from '../CollapseTagsTooltip/CollapseTagsTooltip.vue'
+import AssetMeta from './AssetMeta.vue'
+import AssetItemPreview from './AssetItemPreview.vue'
+import { useSharedAssetFilters } from '~/components/Asset/asset-context'
+
+const props = withDefaults(defineProps<{
+  assetIdSelected?: string
+  data: Array<any>
+  isFetching: boolean
+  tableRef: Ref<HTMLElement | undefined>
+  isHiddenPlaylist?: boolean
+  selectable?: boolean
+  navigate?: boolean
+}>(), {
+  navigate: false,
+})
+const emit = defineEmits(['delete', 'select', 'preview', 'upload', 'remove', 'importLink', 'recheckFile'])
+
+const multipleSelection = defineModel<any[]>('multipleSelection')
+
+const { t } = useI18n()
+const _tableRef = useVModel(props, 'tableRef')
+function tableRowClassName({ row }: { row: any }) {
+  if (row.id === props.assetIdSelected || multipleSelection.value?.some(item => item.id === row.id))
+    return 'bg-[oklch(0.950_0.023_270.7)]! dark:bg-[oklch(0.198_0.128_270.7)]!'
+  return ''
+}
+
+function downloadAsset(url: string) {
+  const link = document.createElement('a')
+  link.href = url
+  link.download = 'downloaded_asset'
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
+const isFullPermission = inject('isFullPermission') as Ref<boolean> | undefined
+const disabled = computed(() => isFullPermission && !isFullPermission?.value)
+
+const { searchPlayListId } = useSharedAssetFilters()
+
+const { navigateWithHistory } = useRouterHistory()
+function handleNavigate(id: string) {
+  if (!props.isHiddenPlaylist) {
+    navigateWithHistory({
+      path: `/asset/${id}`,
+    })
+  }
+}
+
+function calculateExpirationDate(createdAt: string, expiryTime?: number) {
+  if (!expiryTime)
+    return t('label.noExpiry')
+
+  const createdDate = new Date(createdAt)
+  const expirationDate = new Date(createdDate.getTime() + expiryTime * 1000)
+  return formatDateTime(expirationDate)
+}
+
+const optionValidStatus = [
+  { label: 'Not Check', value: 'not_check' },
+  { label: 'Error', value: 'error' },
+  { label: 'Ready', value: 'ready' },
+  { label: 'Checking', value: 'checking' },
+]
+
+// function Returns the label corresponding to the status enum
+function getLabel(status: string) {
+  return optionValidStatus.find(option => option.value === status)?.label ?? 'Unknown'
+}
+
+const isCheckFile = inject<Ref<boolean>>('isCheckFile')
+
+// Selectable
+
+function handleSelectionChange(val: any[]) {
+  multipleSelection.value = val
+}
+
+whenever(_tableRef, () => {
+  props.data.forEach((row) => {
+    const isSelected = multipleSelection.value?.some(item => item.id === row.id)
+    _tableRef.value?.toggleRowSelection(row, isSelected)
+  })
+})
+
+watch(multipleSelection, () => {
+  if (multipleSelection.value?.length === 0) {
+    _tableRef.value?.clearSelection()
+  }
+})
+
+function handleDelete(row: any) {
+  ElMessageBox.confirm(t('message.delete'), {
+    confirmButtonText: t('actions.confirm'),
+    cancelButtonText: t('actions.cancel'),
+    type: 'warning',
+  }).then(() => {
+    emit('delete', row)
+  })
+}
+</script>
+
+<template>
+  <el-table
+    ref="_tableRef"
+    v-loading="props.isFetching"
+    :data="data"
+    row-key="id"
+    :row-class-name="tableRowClassName"
+    @selection-change="handleSelectionChange"
+  >
+    <template #empty>
+      <slot name="empty" :disabled="disabled">
+        <div class="w-full flex flex-col items-center justify-center pt-4">
+          <p>{{ $t('base.no_data') }}</p>
+          <p class="mb-4 text-pretty text-sm">
+            {{ $t('base_library.upload_multimedia_content_for_use_with_in-app_products') }}
+          </p>
+          <el-dropdown trigger="click">
+            <el-button :disabled="disabled">
+              {{ $t('base_library.upload_asset') }}
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item @click="$emit('upload')">
+                  <div class="i-ri:file-2-line mr-2 size-4" />
+                  <div>
+                    {{ $t('upload_files') }}
+                  </div>
+                </el-dropdown-item>
+                <el-dropdown-item @click="$emit('importLink')">
+                  <div class="i-ri:links-fill mr-2 size-4" />
+                  <div>
+                    {{ $t('import_from_links') }}
+                  </div>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </slot>
+    </template>
+    <el-table-column v-if="navigate" type="selection" width="55" />
+    <el-table-column
+      prop="id"
+      label="ID"
+      width="80"
+      fixed
+      align="center"
+    >
+      <template #default="{ row }">
+        <SSCopyButton :value="row.id" />
+      </template>
+    </el-table-column>
+    <el-table-column
+      :label="t('label.name')"
+      min-width="180"
+      :show-overflow-tooltip="{ effect: 'dark', placement: 'top', offset: 0 }"
+    >
+      <template #default="{ row }">
+        <span
+          v-if="!selectable && navigate"
+          :class="{ 'cursor-pointer': !isHiddenPlaylist }"
+          class="text-primary hover:underline"
+          @click="handleNavigate(row.id)"
+        >{{
+          row.name }}</span>
+        <span v-else>{{ row.name }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      prop="url"
+      :label="t('label.preview')"
+      min-width="100"
+      align="center"
+    >
+      <template #default="{ row }">
+        <AssetItemPreview mini :item="row" @on-preview="emit('preview', row)" />
+      </template>
+    </el-table-column>
+    <el-table-column prop="source" :label="t('label.source')" width="80" />
+    <el-table-column prop="meta" :label="t('label.meta')" width="220">
+      <template #default="{ row }">
+        <div class="flex flex-wrap items-center gap-1">
+          <AssetMeta :item="row" />
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column prop="type" :label="t('label.type')" width="100">
+      <template #default="{ row }">
+        <span>{{ t(`AssetType.${row.type}`) }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="type" :label="t('label.state')" width="100">
+      <template #default="{ row }">
+        <span>{{ row.state }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="type" label="Category" width="120">
+      <template #default="{ row }">
+        <span>{{ row.category }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="tags" :label="t('label.tags')" width="150">
+      <template #default="{ row }">
+        <CollapseTagsTooltip :tags="row.tags" :limit-text="10" :limit="2" />
+      </template>
+    </el-table-column>
+    <el-table-column prop="validStatus" label="Valid file" width="130">
+      <template #default="{ row }">
+        <div class="flex items-center gap-1">
+          <span>{{ getLabel(row.validStatus) }} <span v-if="row.validStatus === 'checking'">({{ Math.round(row.validProgress) }}%)</span></span>
+          <el-tooltip
+            effect="dark"
+            :content="row.validError"
+            placement="top-start"
+          >
+            <div v-if="row.validStatus === 'error'" class="i-ep:info-filled text-danger" />
+          </el-tooltip>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column prop="createdAt" :label="t('label.createdAt')" width="140">
+      <template #default="{ row }">
+        <span style="word-break: break-word"> {{ formatDateTime(row.createdAt) }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column :label="t('label.expirationDate')" width="140">
+      <template #default="{ row }">
+        <span style="word-break: break-word">
+          {{ calculateExpirationDate(row.createdAt, row.expire) }}
+        </span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      fixed="right"
+      :label="t('label.actions')"
+      align="center"
+      width="100"
+    >
+      <template #default="{ row }">
+        <el-button-group size="small">
+          <el-tooltip
+            v-if="selectable"
+            effect="dark"
+            :content="t('actions.select')"
+            placement="top"
+          >
+            <el-button
+              :disabled="disabled"
+              type="primary"
+              @click="emit('select', row)"
+            >
+              <div class="i-carbon:checkmark" />
+            </el-button>
+          </el-tooltip>
+          <el-dropdown>
+            <el-button :class="{ 'border-group': !(selectable && row.state === 'completed') }">
+              <template #icon>
+                <div class="i-ep:more" />
+              </template>
+            </el-button>
+
+            <template #dropdown>
+              <el-dropdown-menu :show-timeout="100">
+                <el-dropdown-item :disabled="disabled" @click="!disabled && handleDelete(row)">
+                  <div class="flex items-center gap-2">
+                    <div class="i-ep:delete" />
+                    {{ t('actions.delete') }}
+                  </div>
+                </el-dropdown-item>
+
+                <el-dropdown-item :disabled="disabled" @click="!disabled && downloadAsset(row.uri)">
+                  <div class="flex items-center gap-2">
+                    <div class="i-carbon:download" />
+                    {{ t('actions.download') }}
+                  </div>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+
+              <el-dropdown-item v-if="isCheckFile && row.state === 'completed'" :disabled="disabled" @click="!disabled && $emit('recheckFile', row)">
+                <div class="flex items-center gap-2">
+                  <div class="i-ep:refresh-right" />
+                  {{ t('base_library.recheck') }}
+                </div>
+              </el-dropdown-item>
+
+              <el-dropdown-item v-if="searchPlayListId" :disabled="disabled" @click="$emit('remove', row)">
+                <div class="flex items-center gap-2">
+                  <div class="i-carbon:close" />
+                  {{ $t('base_library.remove_asset_from_playlist') }}
+                </div>
+              </el-dropdown-item>
+            </template>
+          </el-dropdown>
+        </el-button-group>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<style>
+.border-group {
+  border-top-left-radius: 4px !important;
+  border-bottom-left-radius: 4px !important;
+  border-left-color: var(--el-border-color) !important;
+}
+</style>
+
+<i18n lang="yaml">
+en:
+  label:
+    name: Name
+    preview: Preview
+    meta: Meta
+    type: Type
+    state: State
+    tags: Tags
+    createdAt: Created At
+    actions: Actions
+    expirationDate: Expiration Date
+    noExpiry: No Expiry
+  actions:
+    confirm: Confirm
+    delete: Delete
+    select: Select
+    cancel: Cancel
+  message:
+    delete: Are you sure to delete this asset?
+  AssetType:
+    image: Image
+    video: Video
+    audio: Audio
+    unknown: Unknown
+    all: All
+vi:
+  label:
+    name: Tên
+    preview: Xem trước
+    meta: Meta
+    type: Loại
+    state: Trạng thái
+    tags: Thẻ
+    createdAt: Thời gian tạo
+    actions: Hành động
+    expirationDate: Ngày hết hạn
+    noExpiry: Không Hết Hạn
+  actions:
+    confirm: Xác nhận
+    delete: Xóa
+    select: Chọn
+    cancel: Hủy
+  message:
+    delete: Bạn có chắc muốn xóa nội dung này?
+  AssetType:
+    image: Hình ảnh
+    video: Video
+    audio: Âm thanh
+    unknown: Không xác định
+    all: Tất cả
+</i18n>