@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Asset/AssetPlaylist.vue

@@ -1,414 +1,414 @@
-<script lang="ts" setup>
-import type Node from 'element-plus/es/components/tree/src/model/node'
-import { useSharedAssetFilters } from '~/components/Asset/asset-context'
-
-const emits = defineEmits<{
-  refetch: []
-  preview: [asset: any]
-  delete: [asset: any]
-}>()
-
-const showPlaylist = defineModel<boolean>('show')
-
-const params = ref({
-  page: 1,
-  perPage: 20,
-  q: { $and: [{ name: undefined as any }] },
-})
-
-const searchText = ref('')
-debouncedWatch(searchText, (_str) => {
-  const name = _str ? { $regex: _str, $options: 'i' } : undefined
-  const $and = (params.value.q.$and || []) as any
-  $and[0].name = name
-  params.value.q = { $and }
-}, { deep: true, debounce: 250 })
-
-const { data, isFetchingNextPage, isInitialLoading, isFetching, refetch, dataUpdatedAt, errorUpdatedAt, hasNextPage, fetchNextPage } = useInfiniteQuery({
-  queryKey: ['/api/library/playlists', params],
-  queryFn: async ({ pageParam }) => {
-    return $libraryApi('/api/library/playlists', {
-      method: 'GET',
-      query: {
-        ...params.value,
-        ...pageParam,
-      },
-    })
-  },
-  getNextPageParam: (lastPage) => {
-    const maxPage = Math.ceil(lastPage.total / lastPage.perPage)
-    if (lastPage.page < maxPage) {
-      return {
-        ...params.value,
-        page: lastPage.page + 1,
-      }
-    }
-    return null
-  },
-  refetchOnWindowFocus: false,
-  enabled: computed(() => showPlaylist.value),
-})
-
-const dataPlaylist = computed(() => {
-  return data.value?.pages?.flatMap(item => item.data) || []
-})
-
-const scrollRef = ref<any>()
-const scrollEl = computed(() => scrollRef.value?.wrapRef)
-
-function load() {
-  if (hasNextPage?.value && !isFetching.value)
-    fetchNextPage()
-}
-
-useInfiniteScroll(scrollEl, () => {
-  load()
-}, { distance: 10 })
-const addOpen = ref(false)
-
-const qc = useQueryClient()
-const { t: $t } = useI18n()
-
-const deleteMutation = useMutation((id: string) => {
-  return $libraryApi(`/api/library/playlists/${id}`, {
-    pathParams: { id },
-    method: 'DELETE',
-  })
-}, {
-  onSuccess: () => {
-    qc.invalidateQueries(['/api/library/playlists'])
-  },
-})
-
-const isEdit = ref(false)
-const edittingPlaylist = ref<any>(null)
-
-const { searchPlayListId } = useSharedAssetFilters()
-
-const props = {
-  label: 'name',
-  children: 'zones',
-  isLeaf: 'leaf',
-}
-
-interface Tree {
-  name: string
-  leaf?: boolean
-}
-
-//
-
-const paramsItems = ref({
-  page: 1,
-  perPage: 20,
-})
-
-const { data: dataItems, isFetchingNextPage: isFetchingNextPageItems, isInitialLoading: isInitialLoadingItems, isFetching: isFetchingItems, refetch: refetchItems, dataUpdatedAt: dataUpdatedAtItems, suspense: suspenseItems, hasNextPage: hasNextPageItems, fetchNextPage: fetchNextPageItems } = useInfiniteQuery({
-  queryKey: ['/api/library/playlist-items', paramsItems, searchPlayListId],
-  queryFn: async ({ pageParam }) => {
-    return $libraryApi('/api/library/playlist-items', {
-      method: 'GET',
-      query: {
-        playlistId: searchPlayListId.value,
-        ...paramsItems.value,
-        ...pageParam,
-      },
-    })
-  },
-  getNextPageParam: (lastPage) => {
-    const maxPage = Math.ceil(lastPage.total / lastPage.perPage)
-    if (lastPage.page < maxPage) {
-      return {
-        playlistId: searchPlayListId.value,
-        ...paramsItems.value,
-        page: lastPage.page + 1,
-      }
-    }
-    return null
-  },
-  refetchOnWindowFocus: false,
-  enabled: computed(() => !!searchPlayListId.value && showPlaylist.value),
-})
-
-const treeRef = ref()
-
-// NOTE: Effect by useQuery
-function getItems(dataItems) {
-  const data = klona(dataItems?.pages?.flatMap(item => item.data) || [])
-  const items = data.map(item => ({
-    type: 'asset',
-    ...item,
-    thumbUri: getAssetURI(item.thumbUri, ASSET_DEV_URL),
-    uri: getAssetURI(item.uri, ASSET_DEV_URL),
-    leaf: true,
-  }))
-
-  return hasNextPageItems?.value ? [...items, { leaf: true, type: 'loadmore', id: genUUID() }] : items
-}
-
-function updateTreeChildren(data?: any) {
-  const items = getItems(data || dataItems.value)
-  treeRef.value.updateKeyChildren(searchPlayListId.value, items)
-}
-
-async function nodeExpand(data) {
-  if (!data.leaf)
-    searchPlayListId.value = data.id
-}
-
-async function loadNode(node: Node, resolve: (data: Tree[]) => void) {
-  if (node.level === 0) {
-    return resolve(dataPlaylist.value.map(item => ({
-      ...item,
-      name: item.name,
-      leaf: item.totalItem === 0,
-    })))
-  }
-
-  if (node.level > 1)
-    return resolve([])
-  searchPlayListId.value = node.data.id
-  const res = await refetchItems()
-
-  const items = getItems(res.data)
-  resolve(items.length ? items : [{ leaf: true, type: 'empty', id: genUUID() }])
-}
-
-function openAdd() {
-  edittingPlaylist.value = undefined
-  isEdit.value = false
-  addOpen.value = true
-}
-
-function openRename(data: any) {
-  edittingPlaylist.value = {
-    id: data.id,
-    name: data.name,
-  }
-  isEdit.value = true
-  addOpen.value = true
-}
-
-async function deletePlaylist(id: string) {
-  ElMessageBox.confirm($t('base_library.only_delete_playlists_do_not_delete_assets'), $t('base_library.delete_playlist'), {
-    confirmButtonText: $t('general.confirm'),
-    cancelButtonText: $t('base.cancel'),
-    type: 'error',
-  })
-    .then(async () => {
-      await deleteMutation.mutateAsync(id)
-      ElMessage.success($t('base_library.playlist_deleted_successfully'))
-    })
-}
-
-/// !SECTION
-
-const removeMutation = useMutation({
-  mutationFn: ({ playlistId, assetId }: { playlistId: string, assetId: string }) => {
-    return $libraryApi(`/api/library/playlists/{id}/items/{assetId}`, {
-      pathParams: { id: playlistId, assetId },
-      method: 'DELETE',
-    })
-  },
-})
-
-async function updatePlayListItems() {
-  await refetchItems()
-
-  updateTreeChildren()
-}
-
-async function removeAsset(data: any) {
-  await ElMessageBox.confirm($t('base_library.are_you_sure_you_want_to_delete_this_asset'), $t('base_library.remove_asset'), {
-    confirmButtonText: $t('general.confirm'),
-    cancelButtonText: $t('base.cancel'),
-    type: 'error',
-  })
-
-  await removeMutation.mutateAsync({ playlistId: data.playlistId, assetId: data.assetId })
-  ElMessage.success($t('base_library.asset_deleted_successfully'))
-  await updatePlayListItems()
-  refetch()
-  emits('refetch')
-}
-
-defineExpose({
-  removeAsset,
-  updatePlayListItems,
-})
-
-async function loadMoreItems() {
-  await fetchNextPageItems()
-  updateTreeChildren()
-}
-
-const isFullPermission = inject('isFullPermission') as Ref<boolean> | undefined
-const disabled = computed(() => isFullPermission && !isFullPermission?.value)
-</script>
-
-<template>
-  <SSAssetPlaylistModalAdd
-    v-if="addOpen"
-    v-model="addOpen"
-    :is-edit="isEdit"
-    :default-form="edittingPlaylist"
-  />
-  <div class="h-full flex flex-col border-r border-border pr-2">
-    <div class="flex items-center justify-between gap-2">
-      <div>
-        Playlist
-      </div>
-      <div class="flex">
-        <el-button
-          :disabled="disabled"
-          circle
-          class="ml-0!"
-          text
-          @click="openAdd"
-        >
-          <div class="i-ri:add-line size-4" />
-        </el-button>
-        <el-button
-          circle
-          class="ml-0!"
-          text
-          @click="refetch()"
-        >
-          <div class="i-ri:refresh-line size-4" />
-        </el-button>
-        <el-button
-          circle
-          class="ml-0!"
-          text
-          @click="showPlaylist = false; searchPlayListId = undefined"
-        >
-          <div class="i-ri:close-line size-4" />
-        </el-button>
-      </div>
-    </div>
-    <div class="py-2">
-      <el-input v-model="searchText" placeholder="Name">
-        <template #prefix>
-          <div class="i-ri:search-line size-4" />
-        </template>
-      </el-input>
-    </div>
-
-    <div class="relative flex-1">
-      <el-scrollbar ref="scrollRef" class="absolute size-full">
-        <el-skeleton v-if="isInitialLoading">
-          <template #template>
-            <el-skeleton-item v-for="i in 7" :key="i" variant="p" />
-          </template>
-        </el-skeleton>
-        <div v-else-if="dataPlaylist.length === 0" class="flex flex-col items-center gap-2 py-10 text-center text-sm">
-          <p>{{ $t('base_library.empty_list') }}</p>
-          <p>
-            {{ $t('base_library.organize_media_files_to_manage_and_search_easily') }}
-          </p>
-          <el-button :disabled="disabled" @click="openAdd">
-            {{ $t('base_library.create_playlist') }}
-          </el-button>
-        </div>
-        <el-tree
-          v-else
-          :key="dataUpdatedAt || errorUpdatedAt"
-          ref="treeRef"
-          v-loading="isFetching && !isFetchingNextPage"
-          :props="props"
-          :load="loadNode"
-          lazy
-          accordion
-          node-key="id"
-          @node-expand="nodeExpand"
-        >
-          <template #default="{ node, data }">
-            <span v-if="node.level === 1" class="min-w-0 w-full flex justify-between gap-2">
-              <span
-                style="word-break: break-all;"
-                class="flex-1 truncate"
-                :class="[searchPlayListId === data.id ? 'text-primary' : '']"
-              >{{ node.label }}</span>
-              <span class="flex justify-between gap-1">
-                <span class="size-5 flex-center rounded bg-fill">
-                  {{ data.totalItem || 0 }}
-                </span>
-                <el-dropdown :disabled="disabled">
-                  <el-button
-                    size="small"
-                    text
-                    round
-                    @click.stop.prevent
-                  >
-                    <div i-ri:more-line class="size-4" />
-                  </el-button>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item @click="openRename(data)">{{ $t('general.rename') }}</el-dropdown-item>
-                      <el-dropdown-item @click="deletePlaylist(data.id)">{{ $t('general.delete') }}</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-              </span>
-            </span>
-            <template v-else-if="node.level === 2">
-              <div v-if="data.type === 'empty'">
-                <p class="text-center">
-                  {{ $t('base_library.empty_list') }}
-                </p>
-              </div>
-              <el-popover
-                v-else-if="data.type === 'asset' && data.asset"
-                placement="right"
-                :width="400"
-                trigger="click"
-              >
-                <template #reference>
-                  <div class="min-w-0 w-full flex justify-between gap-2">
-                    <span style="word-break: break-all;" class="flex-1 truncate">{{ data.asset?.name || data.asset?.id }}</span>
-                    <span class="flex justify-between gap-1">
-                      <el-dropdown :disabled="disabled">
-                        <el-button
-                          size="small"
-                          text
-                          round
-                          @click.stop.prevent
-                        >
-                          <div i-ri:more-line class="size-4" />
-                        </el-button>
-                        <template #dropdown>
-                          <el-dropdown-menu>
-                            <el-dropdown-item @click="removeAsset(data)">
-                              {{ $t('base.remove') }}
-                            </el-dropdown-item>
-                          </el-dropdown-menu>
-                        </template>
-                      </el-dropdown>
-                    </span>
-                  </div>
-                </template>
-
-                <SSAssetItem
-                  v-if="data.asset"
-                  :item="data.asset"
-                  @remove="removeAsset(data)"
-                  @preview="$emit('preview', data.asset)"
-                  @delete="$emit('delete', data.asset)"
-                />
-              </el-popover>
-              <div v-else-if="data.type === 'loadmore'" class="mt-2 flex items-center justify-center">
-                <el-button text :loading="isFetchingNextPageItems" @click="loadMoreItems">
-                  <span class="text-text-secondary">{{ $t('Actions.load_more') }}</span>
-                  <div i-ri:arrow-down-circle-line class="ml-1 size-4 text-text-secondary" />
-                </el-button>
-              </div>
-            </template>
-          </template>
-        </el-tree>
-        <div v-if="isFetchingNextPage" class="flex items-center justify-center">
-          <div i-ri:loader-2-fill class="size-5 animate-spin" />
-        </div>
-      </el-scrollbar>
-    </div>
-  </div>
-</template>
+<script lang="ts" setup>
+import type Node from 'element-plus/es/components/tree/src/model/node'
+import { useSharedAssetFilters } from '~/components/Asset/asset-context'
+
+const emits = defineEmits<{
+  refetch: []
+  preview: [asset: any]
+  delete: [asset: any]
+}>()
+
+const showPlaylist = defineModel<boolean>('show')
+
+const params = ref({
+  page: 1,
+  perPage: 20,
+  q: { $and: [{ name: undefined as any }] },
+})
+
+const searchText = ref('')
+debouncedWatch(searchText, (_str) => {
+  const name = _str ? { $regex: _str, $options: 'i' } : undefined
+  const $and = (params.value.q.$and || []) as any
+  $and[0].name = name
+  params.value.q = { $and }
+}, { deep: true, debounce: 250 })
+
+const { data, isFetchingNextPage, isInitialLoading, isFetching, refetch, dataUpdatedAt, errorUpdatedAt, hasNextPage, fetchNextPage } = useInfiniteQuery({
+  queryKey: ['/api/library/playlists', params],
+  queryFn: async ({ pageParam }) => {
+    return $libraryApi('/api/library/playlists', {
+      method: 'GET',
+      query: {
+        ...params.value,
+        ...pageParam,
+      },
+    })
+  },
+  getNextPageParam: (lastPage) => {
+    const maxPage = Math.ceil(lastPage.total / lastPage.perPage)
+    if (lastPage.page < maxPage) {
+      return {
+        ...params.value,
+        page: lastPage.page + 1,
+      }
+    }
+    return null
+  },
+  refetchOnWindowFocus: false,
+  enabled: computed(() => showPlaylist.value),
+})
+
+const dataPlaylist = computed(() => {
+  return data.value?.pages?.flatMap(item => item.data) || []
+})
+
+const scrollRef = ref<any>()
+const scrollEl = computed(() => scrollRef.value?.wrapRef)
+
+function load() {
+  if (hasNextPage?.value && !isFetching.value)
+    fetchNextPage()
+}
+
+useInfiniteScroll(scrollEl, () => {
+  load()
+}, { distance: 10 })
+const addOpen = ref(false)
+
+const qc = useQueryClient()
+const { t: $t } = useI18n()
+
+const deleteMutation = useMutation((id: string) => {
+  return $libraryApi(`/api/library/playlists/${id}`, {
+    pathParams: { id },
+    method: 'DELETE',
+  })
+}, {
+  onSuccess: () => {
+    qc.invalidateQueries(['/api/library/playlists'])
+  },
+})
+
+const isEdit = ref(false)
+const edittingPlaylist = ref<any>(null)
+
+const { searchPlayListId } = useSharedAssetFilters()
+
+const props = {
+  label: 'name',
+  children: 'zones',
+  isLeaf: 'leaf',
+}
+
+interface Tree {
+  name: string
+  leaf?: boolean
+}
+
+//
+
+const paramsItems = ref({
+  page: 1,
+  perPage: 20,
+})
+
+const { data: dataItems, isFetchingNextPage: isFetchingNextPageItems, isInitialLoading: isInitialLoadingItems, isFetching: isFetchingItems, refetch: refetchItems, dataUpdatedAt: dataUpdatedAtItems, suspense: suspenseItems, hasNextPage: hasNextPageItems, fetchNextPage: fetchNextPageItems } = useInfiniteQuery({
+  queryKey: ['/api/library/playlist-items', paramsItems, searchPlayListId],
+  queryFn: async ({ pageParam }) => {
+    return $libraryApi('/api/library/playlist-items', {
+      method: 'GET',
+      query: {
+        playlistId: searchPlayListId.value,
+        ...paramsItems.value,
+        ...pageParam,
+      },
+    })
+  },
+  getNextPageParam: (lastPage) => {
+    const maxPage = Math.ceil(lastPage.total / lastPage.perPage)
+    if (lastPage.page < maxPage) {
+      return {
+        playlistId: searchPlayListId.value,
+        ...paramsItems.value,
+        page: lastPage.page + 1,
+      }
+    }
+    return null
+  },
+  refetchOnWindowFocus: false,
+  enabled: computed(() => !!searchPlayListId.value && showPlaylist.value),
+})
+
+const treeRef = ref()
+
+// NOTE: Effect by useQuery
+function getItems(dataItems) {
+  const data = klona(dataItems?.pages?.flatMap(item => item.data) || [])
+  const items = data.map(item => ({
+    type: 'asset',
+    ...item,
+    thumbUri: getAssetURI(item.thumbUri, ASSET_DEV_URL),
+    uri: getAssetURI(item.uri, ASSET_DEV_URL),
+    leaf: true,
+  }))
+
+  return hasNextPageItems?.value ? [...items, { leaf: true, type: 'loadmore', id: genUUID() }] : items
+}
+
+function updateTreeChildren(data?: any) {
+  const items = getItems(data || dataItems.value)
+  treeRef.value.updateKeyChildren(searchPlayListId.value, items)
+}
+
+async function nodeExpand(data) {
+  if (!data.leaf)
+    searchPlayListId.value = data.id
+}
+
+async function loadNode(node: Node, resolve: (data: Tree[]) => void) {
+  if (node.level === 0) {
+    return resolve(dataPlaylist.value.map(item => ({
+      ...item,
+      name: item.name,
+      leaf: item.totalItem === 0,
+    })))
+  }
+
+  if (node.level > 1)
+    return resolve([])
+  searchPlayListId.value = node.data.id
+  const res = await refetchItems()
+
+  const items = getItems(res.data)
+  resolve(items.length ? items : [{ leaf: true, type: 'empty', id: genUUID() }])
+}
+
+function openAdd() {
+  edittingPlaylist.value = undefined
+  isEdit.value = false
+  addOpen.value = true
+}
+
+function openRename(data: any) {
+  edittingPlaylist.value = {
+    id: data.id,
+    name: data.name,
+  }
+  isEdit.value = true
+  addOpen.value = true
+}
+
+async function deletePlaylist(id: string) {
+  ElMessageBox.confirm($t('base_library.only_delete_playlists_do_not_delete_assets'), $t('base_library.delete_playlist'), {
+    confirmButtonText: $t('general.confirm'),
+    cancelButtonText: $t('base.cancel'),
+    type: 'error',
+  })
+    .then(async () => {
+      await deleteMutation.mutateAsync(id)
+      ElMessage.success($t('base_library.playlist_deleted_successfully'))
+    })
+}
+
+/// !SECTION
+
+const removeMutation = useMutation({
+  mutationFn: ({ playlistId, assetId }: { playlistId: string, assetId: string }) => {
+    return $libraryApi(`/api/library/playlists/{id}/items/{assetId}`, {
+      pathParams: { id: playlistId, assetId },
+      method: 'DELETE',
+    })
+  },
+})
+
+async function updatePlayListItems() {
+  await refetchItems()
+
+  updateTreeChildren()
+}
+
+async function removeAsset(data: any) {
+  await ElMessageBox.confirm($t('base_library.are_you_sure_you_want_to_delete_this_asset'), $t('base_library.remove_asset'), {
+    confirmButtonText: $t('general.confirm'),
+    cancelButtonText: $t('base.cancel'),
+    type: 'error',
+  })
+
+  await removeMutation.mutateAsync({ playlistId: data.playlistId, assetId: data.assetId })
+  ElMessage.success($t('base_library.asset_deleted_successfully'))
+  await updatePlayListItems()
+  refetch()
+  emits('refetch')
+}
+
+defineExpose({
+  removeAsset,
+  updatePlayListItems,
+})
+
+async function loadMoreItems() {
+  await fetchNextPageItems()
+  updateTreeChildren()
+}
+
+const isFullPermission = inject('isFullPermission') as Ref<boolean> | undefined
+const disabled = computed(() => isFullPermission && !isFullPermission?.value)
+</script>
+
+<template>
+  <SSAssetPlaylistModalAdd
+    v-if="addOpen"
+    v-model="addOpen"
+    :is-edit="isEdit"
+    :default-form="edittingPlaylist"
+  />
+  <div class="h-full flex flex-col border-r border-border pr-2">
+    <div class="flex items-center justify-between gap-2">
+      <div>
+        Playlist
+      </div>
+      <div class="flex">
+        <el-button
+          :disabled="disabled"
+          circle
+          class="ml-0!"
+          text
+          @click="openAdd"
+        >
+          <div class="i-ri:add-line size-4" />
+        </el-button>
+        <el-button
+          circle
+          class="ml-0!"
+          text
+          @click="refetch()"
+        >
+          <div class="i-ri:refresh-line size-4" />
+        </el-button>
+        <el-button
+          circle
+          class="ml-0!"
+          text
+          @click="showPlaylist = false; searchPlayListId = undefined"
+        >
+          <div class="i-ri:close-line size-4" />
+        </el-button>
+      </div>
+    </div>
+    <div class="py-2">
+      <el-input v-model="searchText" placeholder="Name">
+        <template #prefix>
+          <div class="i-ri:search-line size-4" />
+        </template>
+      </el-input>
+    </div>
+
+    <div class="relative flex-1">
+      <el-scrollbar ref="scrollRef" class="absolute size-full">
+        <el-skeleton v-if="isInitialLoading">
+          <template #template>
+            <el-skeleton-item v-for="i in 7" :key="i" variant="p" />
+          </template>
+        </el-skeleton>
+        <div v-else-if="dataPlaylist.length === 0" class="flex flex-col items-center gap-2 py-10 text-center text-sm">
+          <p>{{ $t('base_library.empty_list') }}</p>
+          <p>
+            {{ $t('base_library.organize_media_files_to_manage_and_search_easily') }}
+          </p>
+          <el-button :disabled="disabled" @click="openAdd">
+            {{ $t('base_library.create_playlist') }}
+          </el-button>
+        </div>
+        <el-tree
+          v-else
+          :key="dataUpdatedAt || errorUpdatedAt"
+          ref="treeRef"
+          v-loading="isFetching && !isFetchingNextPage"
+          :props="props"
+          :load="loadNode"
+          lazy
+          accordion
+          node-key="id"
+          @node-expand="nodeExpand"
+        >
+          <template #default="{ node, data }">
+            <span v-if="node.level === 1" class="min-w-0 w-full flex justify-between gap-2">
+              <span
+                style="word-break: break-all;"
+                class="flex-1 truncate"
+                :class="[searchPlayListId === data.id ? 'text-primary' : '']"
+              >{{ node.label }}</span>
+              <span class="flex justify-between gap-1">
+                <span class="size-5 flex-center rounded bg-fill">
+                  {{ data.totalItem || 0 }}
+                </span>
+                <el-dropdown :disabled="disabled">
+                  <el-button
+                    size="small"
+                    text
+                    round
+                    @click.stop.prevent
+                  >
+                    <div i-ri:more-line class="size-4" />
+                  </el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item @click="openRename(data)">{{ $t('general.rename') }}</el-dropdown-item>
+                      <el-dropdown-item @click="deletePlaylist(data.id)">{{ $t('general.delete') }}</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </span>
+            </span>
+            <template v-else-if="node.level === 2">
+              <div v-if="data.type === 'empty'">
+                <p class="text-center">
+                  {{ $t('base_library.empty_list') }}
+                </p>
+              </div>
+              <el-popover
+                v-else-if="data.type === 'asset' && data.asset"
+                placement="right"
+                :width="400"
+                trigger="click"
+              >
+                <template #reference>
+                  <div class="min-w-0 w-full flex justify-between gap-2">
+                    <span style="word-break: break-all;" class="flex-1 truncate">{{ data.asset?.name || data.asset?.id }}</span>
+                    <span class="flex justify-between gap-1">
+                      <el-dropdown :disabled="disabled">
+                        <el-button
+                          size="small"
+                          text
+                          round
+                          @click.stop.prevent
+                        >
+                          <div i-ri:more-line class="size-4" />
+                        </el-button>
+                        <template #dropdown>
+                          <el-dropdown-menu>
+                            <el-dropdown-item @click="removeAsset(data)">
+                              {{ $t('base.remove') }}
+                            </el-dropdown-item>
+                          </el-dropdown-menu>
+                        </template>
+                      </el-dropdown>
+                    </span>
+                  </div>
+                </template>
+
+                <SSAssetItem
+                  v-if="data.asset"
+                  :item="data.asset"
+                  @remove="removeAsset(data)"
+                  @preview="$emit('preview', data.asset)"
+                  @delete="$emit('delete', data.asset)"
+                />
+              </el-popover>
+              <div v-else-if="data.type === 'loadmore'" class="mt-2 flex items-center justify-center">
+                <el-button text :loading="isFetchingNextPageItems" @click="loadMoreItems">
+                  <span class="text-text-secondary">{{ $t('Actions.load_more') }}</span>
+                  <div i-ri:arrow-down-circle-line class="ml-1 size-4 text-text-secondary" />
+                </el-button>
+              </div>
+            </template>
+          </template>
+        </el-tree>
+        <div v-if="isFetchingNextPage" class="flex items-center justify-center">
+          <div i-ri:loader-2-fill class="size-5 animate-spin" />
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>