@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Asset/AssetPlaylistInfiniteSelect.vue

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

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