@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Asset/AssetImportLinks.vue

@@ -1,281 +1,281 @@
-<script setup lang="ts">
-import type { FormInstance, FormRules } from 'element-plus'
-import * as R from 'remeda'
-import { klona } from 'klona'
-
-const props = defineProps<{
-  visible: boolean
-  server: any
-}>()
-
-const visible = useVModel(props, 'visible')
-
-const inputValue = ref('')
-const formDefault = reactive({
-  playlistIds: [],
-  tags: [],
-  category: 'Promo Video',
-  expire: null,
-  source: {
-    type: 'http',
-    httpPayload: {
-      urls: [],
-    },
-  },
-})
-
-const form = reactive(klona(formDefault))
-
-const categories = computed(() => [
-  'Promo Video',
-  'Film',
-  'Video Short',
-  'Podcast',
-  'Series',
-  'Sport Clip',
-  'Song',
-  'Voice Over',
-  'Graphics File',
-  'Presentation',
-])
-
-const formRef = ref<FormInstance>()
-const rules = ref<FormRules>({
-  tags: [{
-    trigger: ['blur', 'change'],
-    validator: tagValidator(35),
-  }],
-})
-
-function handleInput() {
-  const link = inputValue.value.split('\n')
-  form.source.httpPayload.urls = link
-}
-
-const formattedLinks = computed(() => {
-  return form.source.httpPayload.urls
-    .map((link, index) => {
-      if (!link) {
-        return `<span style="color: red;">${index + 1}. ${link || $t('please_enter_link')}</span>`
-      }
-      return `${index + 1}. ${link}`
-    })
-    .join('\n')
-})
-
-const inValidUrl = computed(() => {
-  return form.source.httpPayload.urls.some(item => item === '' || item === undefined) as boolean
-})
-
-const quantityLinkInvalid = computed(() => {
-  return form?.source?.httpPayload?.urls.filter(link => link === '' || link === undefined).length || 0
-})
-
-watch(() => form.source.httpPayload.urls, () => {
-  if (form.source.httpPayload.urls.length > 100) {
-    ElMessage.error($t('do_not_exceed_100_links_links'))
-  }
-}, { deep: true })
-
-const qc = useQueryClient()
-const createMutation = useMutation(
-  (createAsset: any) =>
-    $libraryApi('/api/library/assets', {
-      method: 'POST',
-      body: createAsset,
-    }),
-  {
-    onSuccess: () => {
-      qc.invalidateQueries(['api/library/assets'])
-    },
-  },
-)
-
-const enableAdd = ref(false)
-const SPECIAL_CHARACTERS_NAME_SPACE = /[`!@#$%^&*()+=[\]{};':"\\|,.<>/?~]/
-const CONTAIN_NAME_SPACE = /^[\w -]*$/
-function validNamePlaylist(value) {
-  if (!value.trim()) {
-    ElMessage.error($t('base.cannot_contain_all_space', { name: 'Name Playlist' }))
-    return false
-  }
-  else if (SPECIAL_CHARACTERS_NAME_SPACE.test(value)) {
-    ElMessage.error($t('base.name_can_not_special_characters', { name: 'Name Playlist' }))
-    return false
-  }
-  else if (!CONTAIN_NAME_SPACE.test(value)) {
-    ElMessage.error($t('base.name_cannot_contain_accented_characters', { name: 'Name Playlist' }))
-    return false
-  }
-  else {
-    return true
-  }
-}
-
-function checkPlaylists(lists) {
-  return !lists.some(value => !validNamePlaylist(value))
-}
-async function createAssetWithLinks(formEl: FormInstance | undefined) {
-  enableAdd.value = checkPlaylists(form.playlistIds)
-  if (!formEl)
-    return
-  await formEl.validate(async (valid, fields) => {
-    if (valid && enableAdd.value) {
-      if (form?.source?.httpPayload?.urls?.length === 0) {
-        ElMessage.error($t('urls_required'))
-      }
-      else {
-        if (quantityLinkInvalid.value === 0) {
-          await createMutation.mutateAsync({
-            ...form,
-            expire: form.expire ? form.expire * 24 * 60 * 60 : null,
-          })
-          ElMessage.success($t('Asset.upload_success'))
-          visible.value = false
-        }
-        else {
-          ElMessage.error($t('an_invalid_link_exists'))
-        }
-      }
-    }
-  })
-}
-const hasExpiration = ref(false)
-
-watch(hasExpiration, (newValue) => {
-  form.expire = newValue ? 365 : null
-})
-
-function handleClose() {
-  if (!R.equals(form, formDefault)) {
-    ElMessageBox.confirm(
-      $t('are_you_sure_you_want_to_cancel_import_from_links'),
-      $t('Warning'),
-      {
-        confirmButtonText: $t('Actions.ok'),
-        cancelButtonText: $t('Actions.cancel'),
-        type: 'warning',
-      },
-    )
-      .then(() => {
-        visible.value = false
-        hasExpiration.value = false
-      })
-  }
-  else {
-    visible.value = false
-  }
-}
-</script>
-
-<template>
-  <el-dialog
-    v-model="visible"
-    width="600"
-    align-center
-    :before-close="handleClose"
-  >
-    <template #header>
-      <div class="text-xl font-bold">
-        {{ $t('add_media_from_links') }}
-      </div>
-      <p class="text-sm">
-        {{ $t('add_video_just_paste_links_your_video_below_link_format') }}
-      </p>
-    </template>
-    <el-form
-      ref="formRef"
-      :model="form"
-      label-width="auto"
-      :rules="rules"
-      style="max-width: 600px"
-      label-position="left"
-    >
-      <el-form-item :label="$t('name_playlist')">
-        <SSAssetPlaylistInfiniteSelect v-model="form.playlistIds" />
-      </el-form-item>
-
-      <el-form-item :label="$t('label.tag')" prop="tags">
-        <SSInputTags v-model="form.tags" :max-item="10" class="w-full" />
-      </el-form-item>
-      <el-form-item label="Category">
-        <el-select v-model="form.category" placeholder="Select">
-          <el-option
-            v-for="item in categories"
-            :key="item"
-            :label="item"
-            :value="item"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Expiration">
-        <div class="flex items-center gap-2">
-          <el-switch v-model="hasExpiration" />
-          <template v-if="hasExpiration">
-            <el-input-number
-              v-model="form.expire"
-              :min="1"
-              :max="365"
-              :step="1"
-              step-strictly
-              controls-position="right"
-              :clearable="true"
-            />
-            <span class="ml-2 text-sm">
-              Days
-            </span>
-          </template>
-        </div>
-      </el-form-item>
-
-      <div class="pb-4 font-bold">
-        Total: {{ form?.source?.httpPayload?.urls?.length || 0 }} {{ $t('links') }} | {{ (form?.source?.httpPayload?.urls?.length - quantityLinkInvalid) || 0 }} {{ $t('links_valid') }} - {{ quantityLinkInvalid || 0 }} {{ $t('link_invalid') }}
-      </div>
-      <el-form-item label="Links">
-        <el-input
-          v-model="inputValue"
-          class="![&_.el-textarea\_\_inner]:h-200px"
-          :autosize="{ minRows: 2, maxRows: 6 }"
-          type="textarea"
-          :placeholder="$t('please_input_links')"
-          @input="handleInput"
-        />
-      </el-form-item>
-      <el-form-item label="Formatted Links">
-        <template #label>
-          <div class="font-bold" :class="{ 'text-red': inValidUrl }">
-            {{ $t('formatted_links') }}
-          </div>
-        </template>
-        <div class="h-180px w-full border-1px rounded-sm">
-          <el-scrollbar max-height="180px" class="w-full p-2">
-            <div class="formatted-url w-full" v-html="formattedLinks" />
-          </el-scrollbar>
-        </div>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="handleClose">
-          {{ $t('Actions.cancel') }}
-        </el-button>
-        <el-button type="primary" @click="createAssetWithLinks(formRef)">
-          {{ $t('Actions.submit') }}
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style scoped>
-:deep(.el-dialog__header) {
-  padding-right: 0 !important;
-}
-
-.formatted-url {
-  white-space: pre-wrap;
-  padding-bottom: 4px;
-  border-radius: 4px;
-  line-height: normal;
-}
-</style>
+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+import * as R from 'remeda'
+import { klona } from 'klona'
+
+const props = defineProps<{
+  visible: boolean
+  server: any
+}>()
+
+const visible = useVModel(props, 'visible')
+
+const inputValue = ref('')
+const formDefault = reactive({
+  playlistIds: [],
+  tags: [],
+  category: 'Promo Video',
+  expire: null,
+  source: {
+    type: 'http',
+    httpPayload: {
+      urls: [],
+    },
+  },
+})
+
+const form = reactive(klona(formDefault))
+
+const categories = computed(() => [
+  'Promo Video',
+  'Film',
+  'Video Short',
+  'Podcast',
+  'Series',
+  'Sport Clip',
+  'Song',
+  'Voice Over',
+  'Graphics File',
+  'Presentation',
+])
+
+const formRef = ref<FormInstance>()
+const rules = ref<FormRules>({
+  tags: [{
+    trigger: ['blur', 'change'],
+    validator: tagValidator(35),
+  }],
+})
+
+function handleInput() {
+  const link = inputValue.value.split('\n')
+  form.source.httpPayload.urls = link
+}
+
+const formattedLinks = computed(() => {
+  return form.source.httpPayload.urls
+    .map((link, index) => {
+      if (!link) {
+        return `<span style="color: red;">${index + 1}. ${link || $t('please_enter_link')}</span>`
+      }
+      return `${index + 1}. ${link}`
+    })
+    .join('\n')
+})
+
+const inValidUrl = computed(() => {
+  return form.source.httpPayload.urls.some(item => item === '' || item === undefined) as boolean
+})
+
+const quantityLinkInvalid = computed(() => {
+  return form?.source?.httpPayload?.urls.filter(link => link === '' || link === undefined).length || 0
+})
+
+watch(() => form.source.httpPayload.urls, () => {
+  if (form.source.httpPayload.urls.length > 100) {
+    ElMessage.error($t('do_not_exceed_100_links_links'))
+  }
+}, { deep: true })
+
+const qc = useQueryClient()
+const createMutation = useMutation(
+  (createAsset: any) =>
+    $libraryApi('/api/library/assets', {
+      method: 'POST',
+      body: createAsset,
+    }),
+  {
+    onSuccess: () => {
+      qc.invalidateQueries(['api/library/assets'])
+    },
+  },
+)
+
+const enableAdd = ref(false)
+const SPECIAL_CHARACTERS_NAME_SPACE = /[`!@#$%^&*()+=[\]{};':"\\|,.<>/?~]/
+const CONTAIN_NAME_SPACE = /^[\w -]*$/
+function validNamePlaylist(value) {
+  if (!value.trim()) {
+    ElMessage.error($t('base.cannot_contain_all_space', { name: 'Name Playlist' }))
+    return false
+  }
+  else if (SPECIAL_CHARACTERS_NAME_SPACE.test(value)) {
+    ElMessage.error($t('base.name_can_not_special_characters', { name: 'Name Playlist' }))
+    return false
+  }
+  else if (!CONTAIN_NAME_SPACE.test(value)) {
+    ElMessage.error($t('base.name_cannot_contain_accented_characters', { name: 'Name Playlist' }))
+    return false
+  }
+  else {
+    return true
+  }
+}
+
+function checkPlaylists(lists) {
+  return !lists.some(value => !validNamePlaylist(value))
+}
+async function createAssetWithLinks(formEl: FormInstance | undefined) {
+  enableAdd.value = checkPlaylists(form.playlistIds)
+  if (!formEl)
+    return
+  await formEl.validate(async (valid, fields) => {
+    if (valid && enableAdd.value) {
+      if (form?.source?.httpPayload?.urls?.length === 0) {
+        ElMessage.error($t('urls_required'))
+      }
+      else {
+        if (quantityLinkInvalid.value === 0) {
+          await createMutation.mutateAsync({
+            ...form,
+            expire: form.expire ? form.expire * 24 * 60 * 60 : null,
+          })
+          ElMessage.success($t('Asset.upload_success'))
+          visible.value = false
+        }
+        else {
+          ElMessage.error($t('an_invalid_link_exists'))
+        }
+      }
+    }
+  })
+}
+const hasExpiration = ref(false)
+
+watch(hasExpiration, (newValue) => {
+  form.expire = newValue ? 365 : null
+})
+
+function handleClose() {
+  if (!R.equals(form, formDefault)) {
+    ElMessageBox.confirm(
+      $t('are_you_sure_you_want_to_cancel_import_from_links'),
+      $t('Warning'),
+      {
+        confirmButtonText: $t('Actions.ok'),
+        cancelButtonText: $t('Actions.cancel'),
+        type: 'warning',
+      },
+    )
+      .then(() => {
+        visible.value = false
+        hasExpiration.value = false
+      })
+  }
+  else {
+    visible.value = false
+  }
+}
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    width="600"
+    align-center
+    :before-close="handleClose"
+  >
+    <template #header>
+      <div class="text-xl font-bold">
+        {{ $t('add_media_from_links') }}
+      </div>
+      <p class="text-sm">
+        {{ $t('add_video_just_paste_links_your_video_below_link_format') }}
+      </p>
+    </template>
+    <el-form
+      ref="formRef"
+      :model="form"
+      label-width="auto"
+      :rules="rules"
+      style="max-width: 600px"
+      label-position="left"
+    >
+      <el-form-item :label="$t('name_playlist')">
+        <SSAssetPlaylistInfiniteSelect v-model="form.playlistIds" />
+      </el-form-item>
+
+      <el-form-item :label="$t('label.tag')" prop="tags">
+        <SSInputTags v-model="form.tags" :max-item="10" class="w-full" />
+      </el-form-item>
+      <el-form-item label="Category">
+        <el-select v-model="form.category" placeholder="Select">
+          <el-option
+            v-for="item in categories"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="Expiration">
+        <div class="flex items-center gap-2">
+          <el-switch v-model="hasExpiration" />
+          <template v-if="hasExpiration">
+            <el-input-number
+              v-model="form.expire"
+              :min="1"
+              :max="365"
+              :step="1"
+              step-strictly
+              controls-position="right"
+              :clearable="true"
+            />
+            <span class="ml-2 text-sm">
+              Days
+            </span>
+          </template>
+        </div>
+      </el-form-item>
+
+      <div class="pb-4 font-bold">
+        Total: {{ form?.source?.httpPayload?.urls?.length || 0 }} {{ $t('links') }} | {{ (form?.source?.httpPayload?.urls?.length - quantityLinkInvalid) || 0 }} {{ $t('links_valid') }} - {{ quantityLinkInvalid || 0 }} {{ $t('link_invalid') }}
+      </div>
+      <el-form-item label="Links">
+        <el-input
+          v-model="inputValue"
+          class="![&_.el-textarea\_\_inner]:h-200px"
+          :autosize="{ minRows: 2, maxRows: 6 }"
+          type="textarea"
+          :placeholder="$t('please_input_links')"
+          @input="handleInput"
+        />
+      </el-form-item>
+      <el-form-item label="Formatted Links">
+        <template #label>
+          <div class="font-bold" :class="{ 'text-red': inValidUrl }">
+            {{ $t('formatted_links') }}
+          </div>
+        </template>
+        <div class="h-180px w-full border-1px rounded-sm">
+          <el-scrollbar max-height="180px" class="w-full p-2">
+            <div class="formatted-url w-full" v-html="formattedLinks" />
+          </el-scrollbar>
+        </div>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleClose">
+          {{ $t('Actions.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="createAssetWithLinks(formRef)">
+          {{ $t('Actions.submit') }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+:deep(.el-dialog__header) {
+  padding-right: 0 !important;
+}
+
+.formatted-url {
+  white-space: pre-wrap;
+  padding-bottom: 4px;
+  border-radius: 4px;
+  line-height: normal;
+}
+</style>