@sigmaott/base-next 1.0.6

package/src/components/Asset/AssetPlaylist.vue

@@ -0,0 +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>

package/src/components/Asset/AssetPlaylistInfiniteSelect.vue

@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  multipleLimit?: number
+}>()
+
+const modelValue = defineModel<any[]>()
+
+const params = ref({
+  page: 1,
+  perPage: 10,
+  q: { $and: [{ name: undefined as any }] },
+})
+
+const { data, isInitialLoading, isFetching, hasNextPage, fetchNextPage, isLoading, refetch, suspense } = useInfiniteQuery({
+  queryKey: ['/api/library/playlists_infinite', 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 {
+        page: lastPage.page + 1,
+      }
+    }
+    return null
+  },
+  refetchOnWindowFocus: false,
+})
+
+const items = computed(() => {
+  return data?.value?.pages?.flatMap(item => item.data) || []
+})
+
+function remoteMethod(query: string) {
+  const newParams = { ...params.value }
+  if (query)
+    newParams.q.$and[0].name = { $regex: query, $options: 'i' }
+
+  else
+    newParams.q.$and[0].name = undefined
+
+  params.value = newParams
+}
+
+function load() {
+  if (!isFetching.value && hasNextPage?.value)
+    fetchNextPage()
+}
+
+const qc = useQueryClient()
+const createMutation = useMutation((data: any) => {
+  return $libraryApi('/api/library/playlists', {
+    method: 'POST',
+    body: data,
+  })
+}, {
+  onSuccess: () => {
+    qc.invalidateQueries(['/api/library/playlists_infinite'])
+    qc.invalidateQueries(['/api/library/playlists'])
+  },
+})
+
+const enableAdd = ref(false)
+const SPECIAL_CHARACTERS_NAME_SPACE = /[`!@#$%^&*()+=[\]{};':"\\|,.<>/?~]/
+const CONTAIN_NAME_SPACE = /^[\w -]*$/
+function validNamePlaylist(value: string) {
+  if (!value?.trim()) {
+    // ElMessage.error($t('base.name_should_not_empty', { name: 'Name Playlist' }))
+    enableAdd.value = false
+  }
+  else if (SPECIAL_CHARACTERS_NAME_SPACE.test(value)) {
+    ElMessage.error($t('base.name_can_not_special_characters', { name: 'Name Playlist' }))
+    enableAdd.value = false
+  }
+  else if (!CONTAIN_NAME_SPACE.test(value)) {
+    ElMessage.error($t('base.name_cannot_contain_accented_characters', { name: 'Name Playlist' }))
+    enableAdd.value = false
+  }
+  else {
+    enableAdd.value = true
+  }
+}
+
+async function handleChange(value: string) {
+  const newValue = value[value?.length - 1]
+  const isAdd = items.value?.some(playlist => playlist?.id === newValue)
+
+  validNamePlaylist(newValue)
+
+  if (!isAdd && !!newValue && enableAdd.value) {
+    const res = await createMutation.mutateAsync({ name: newValue, assetIds: [] })
+    params.value.page = 1
+    await refetch()
+    if (res)
+      modelValue.value[modelValue.value?.length - 1] = res?.id
+  }
+}
+</script>
+
+<template>
+  <el-select
+    v-model="modelValue"
+    v-loading="isInitialLoading"
+    :max-collapse-tags="4"
+    :placeholder="$t('base_library.select_playlists')"
+    clearable
+    allow-create
+    collapse-tags
+    collapse-tags-tooltip
+    multiple
+    class="w-full!"
+    filterable
+    remote
+    reserve-keyword
+    remote-show-suffix
+    :remote-method="remoteMethod"
+    :loading="isLoading"
+    :multiple-limit="multipleLimit"
+    @change="handleChange"
+  >
+    <el-option
+      v-for="item in items"
+      :key="item.id"
+      v-infinite-scroll="load"
+      :label="item.name"
+      :value="item.id"
+    />
+  </el-select>
+</template>

package/src/components/Asset/AssetPlaylistModalAdd.vue

@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  isEdit?: boolean
+  defaultForm: {
+    id: string
+    name: string
+  }
+}>()
+
+const { defaultForm } = toRefs(props)
+
+function getInitialValues() {
+  return {
+    name: defaultForm.value?.name || '',
+    assetIds: [],
+  }
+}
+
+const { isEdit } = toRefs(props)
+
+const { t: $t } = useI18n()
+const qc = useQueryClient()
+
+const addOpen = defineModel<boolean>()
+
+const updateMutation = useMutation((data: any & { id: string }) => {
+  const { id, ...body } = data
+  return $libraryApi(`/api/library/playlists/${id}`, {
+    pathParams: { id },
+    method: 'PATCH',
+    body,
+  })
+}, {
+  onSuccess: () => {
+    qc.invalidateQueries(['/api/library/playlists'])
+    qc.invalidateQueries(['/api/library/playlists_infinite'])
+  },
+})
+
+const createMutation = useMutation((data: any) => {
+  return $libraryApi('/api/library/playlists', {
+    method: 'POST',
+    body: data,
+  })
+}, {
+  onSuccess: () => {
+    qc.invalidateQueries(['/api/library/playlists'])
+    qc.invalidateQueries(['/api/library/playlists_infinite'])
+  },
+})
+
+const { formRef, formValue, handleSubmit, handleValidate, formErrors, register } = useElForm<any>({
+  initialValues: getInitialValues(),
+  async onSubmit(values) {
+    const _values = klona(values)
+    if (isEdit.value) {
+      await updateMutation.mutateAsync({ name: _values.name, id: defaultForm.value.id })
+      ElMessage.success($t('base_library.playlist_updated_successfully'))
+    }
+    else {
+      await createMutation.mutateAsync(_values)
+      formValue.value = getInitialValues()
+      ElMessage.success($t('base_library.playlist_created_successfully'))
+    }
+    addOpen.value = false
+  },
+})
+
+function getProp(key: string) {
+  return key
+}
+
+const [nameValue, nameAttrs] = register<string>(getProp('name'), [
+  {
+    required: true,
+    validator: nameValidatorWithSpace($t('Name')),
+  },
+])
+
+const [assetValue, assetAttrs] = register<string[]>(getProp('assetIds'), [
+  {
+    validator: (rule, value, callback) => {
+      // if (value.length === 0)
+      //   callback(new Error($t('Please select at least one asset')))
+      // else
+      callback()
+    },
+  },
+])
+
+function resetForm() {
+  formValue.value = getInitialValues()
+  formErrors.value = {}
+}
+
+function handleClose(done: () => void) {
+  if (!equals(formValue.value, getInitialValues())) {
+    ElMessageBox.confirm($t('general.are_you_sure_you_want_to_close'), $t('general.warning'), {
+      confirmButtonText: $t('general.confirm'),
+      cancelButtonText: $t('base.cancel'),
+      type: 'warning',
+    })
+      .then(() => {
+        formValue.value = getInitialValues()
+        done()
+      })
+  }
+  else {
+    resetForm()
+    done()
+  }
+}
+</script>
+
+<template>
+  <el-dialog
+    v-model="addOpen"
+    :title="isEdit ? $t('base_library.update_playlist') : $t('base_library.create_playlist')"
+    :before-close="handleClose" width="610px"
+  >
+    <el-form ref="formRef" label-position="left" label-width="90px" :model="formValue" @validate="handleValidate">
+      <el-form-item :label="$t('base_library.name')" v-bind="nameAttrs">
+        <el-input v-model="nameValue" :placeholder="$t('base_library.enter_a_name')" show-word-limit maxlength="50" />
+      </el-form-item>
+      <el-form-item v-if="!isEdit" label="Assets" v-bind="assetAttrs">
+        <SSAssetInfiniteSelect v-model="assetValue" />
+      </el-form-item>
+      <div class="mt-4 flex justify-end">
+        <el-button @click="handleClose(() => addOpen = false)">
+          {{ $t('base.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="handleSubmit">
+          {{ $t('general.submit') }}
+        </el-button>
+      </div>
+    </el-form>
+  </el-dialog>
+</template>