@sigmaott/base-next 1.0.6

package/src/components/AdvancedFilterSsai/SSAdvancedFilterSsaiMain.vue

@@ -0,0 +1,194 @@
+<script lang="ts" setup>
+import type { AdvancedFilterItem } from './types'
+import { createDefaultFilter } from './types'
+
+const props = defineProps<{
+  disabled?: boolean
+}>()
+
+const $emit = defineEmits<{
+  submit: []
+}>()
+
+const modelFilters = defineModel<
+  Array<AdvancedFilterItem | { or: AdvancedFilterItem[] }>
+>('filters', {
+  default: () => [],
+})
+
+function combineFilters(andFilters: AdvancedFilterItem[], orFilters: AdvancedFilterItem[]) {
+  const filters = [
+    ...andFilters,
+  ]
+  if (orFilters.length) {
+    filters.push({
+      or: orFilters,
+    })
+  }
+  return filters
+}
+
+const filtersAnd = ref<Array<AdvancedFilterItem>>([])
+const filtersOr = ref<Array<AdvancedFilterItem>>([])
+
+onMounted(() => {
+  filtersAnd.value = klona(modelFilters.value.filter(item => item.or === undefined))
+  const orFilters = modelFilters.value.find(item => item.or !== undefined)
+  filtersOr.value = orFilters?.or || []
+})
+
+watch(modelFilters, () => {
+  filtersAnd.value = klona(modelFilters.value.filter(item => item.or === undefined))
+  const orFilters = modelFilters.value.find(item => item.or !== undefined)
+  filtersOr.value = orFilters?.or || []
+})
+
+const { t: $t } = useI18n()
+const MAX_FILTERS = 10
+
+function addFilter(type: 'and' | 'or') {
+  const newFilter = createDefaultFilter()
+  if (type === 'and') {
+    filtersAnd.value.push(newFilter)
+  }
+  else {
+    filtersOr.value.push(newFilter)
+  }
+}
+
+function removeFilter(type: 'and' | 'or', id: string) {
+  if (type === 'and') {
+    filtersAnd.value = filtersAnd.value.filter(filter => filter.id !== id)
+  }
+  else {
+    filtersOr.value = filtersOr.value.filter(filter => filter.id !== id)
+  }
+}
+
+const isValid = ref(true)
+
+const refsAnd = useTemplateRefsList()
+const refsOr = useTemplateRefsList()
+function validFilterAndSubmit() {
+  const validationsAnd = refsAnd.value.map(item => item.validateFilter())
+  const validationsOr = refsOr.value.map(item => item.validateFilter())
+
+  if (validationsAnd.every(item => item) && validationsOr.every(item => item)) {
+    modelFilters.value = combineFilters(filtersAnd.value, filtersOr.value)
+    $emit('submit')
+    isValid.value = true
+  }
+}
+
+function duplicateFilter(type: 'and' | 'or', filter: AdvancedFilterItem) {
+  const newFilter = createDefaultFilter()
+  const targetArray = type === 'and' ? filtersAnd : filtersOr
+  const index = targetArray.value.findIndex(f => f.id === filter.id)
+
+  if (index !== -1) {
+    targetArray.value.splice(index + 1, 0, newFilter)
+  }
+  else {
+    targetArray.value.push(newFilter)
+  }
+}
+</script>
+
+<template>
+  <div class="relative rounded-md pl-2 space-y-4">
+    <!-- AND filters -->
+    <div
+      class="relative border rounded-md px-2 py-2"
+      :class="[
+        disabled ? 'bg-disabled-bg cursor-not-allowed pointer-events-none min-h-8' : 'bg-secondary',
+      ]"
+    >
+      <el-tag class="absolute left-0 top-0 -translate-x-2 -translate-y-2">
+        AND
+      </el-tag>
+
+      <div class="flex justify-end">
+        <el-button
+          v-if="filtersAnd.length < MAX_FILTERS && !disabled"
+          variant="text"
+          plain
+          type="primary"
+          @click="() => addFilter('and')"
+        >
+          <template #icon>
+            <div class="i-lucide:plus" />
+          </template>
+          <span>
+            {{ $t('VastControl.add_condition') }}
+          </span>
+        </el-button>
+      </div>
+
+      <div class="mt-1">
+        <SSAdvancedFilterSsaiItem
+          v-for="(filter, index) in filtersAnd"
+          :key="filter.id"
+          :ref="refsAnd.set"
+          v-model="filtersAnd[index]"
+          :disabled="disabled"
+          @remove="() => removeFilter('and', filter.id)"
+          @duplicate="() => duplicateFilter('and', filter)"
+        />
+      </div>
+    </div>
+
+    <!-- OR filters -->
+    <div
+      class="relative border rounded-md px-2 py-2"
+      :class="[
+        disabled ? 'bg-disabled-bg cursor-not-allowed pointer-events-none min-h-8' : 'bg-secondary',
+      ]"
+    >
+      <el-tag type="success" class="absolute left-0 top-0 -translate-x-2 -translate-y-2">
+        OR
+      </el-tag>
+      <div class="flex justify-end">
+        <el-button
+          v-if="filtersOr.length < MAX_FILTERS && !disabled"
+          variant="text"
+          plain
+          type="primary"
+          :disabled="disabled"
+          @click="() => addFilter('or')"
+        >
+          <template #icon>
+            <div class="i-lucide:plus" />
+          </template>
+          <span>
+            {{ $t('VastControl.add_condition') }}
+          </span>
+        </el-button>
+      </div>
+
+      <div class="mt-1">
+        <SSAdvancedFilterSsaiItem
+          v-for="(filter, index) in filtersOr"
+          :key="filter.id"
+          :ref="refsOr.set"
+          v-model="filtersOr[index]"
+          :disabled="disabled"
+          @remove="() => removeFilter('or', filter.id)"
+          @duplicate="() => duplicateFilter('or', filter)"
+        />
+      </div>
+    </div>
+    <div v-if="!disabled" class="flex justify-end">
+      <el-button
+        :disabled="!isValid"
+        type="primary"
+        plain
+        @click="validFilterAndSubmit()"
+      >
+        <template #icon>
+          <div class="i-lucide:check" />
+        </template>
+        {{ $t('VastControl.apply') }}
+      </el-button>
+    </div>
+  </div>
+</template>

package/src/components/AdvancedFilterSsai/types.ts

@@ -0,0 +1,19 @@
+import { nanoid } from 'nanoid'
+
+export interface AdvancedFilterItem {
+  id: string
+  valid: boolean
+  member: string
+  operator: string
+  values: string[]
+}
+
+export function createDefaultFilter(): AdvancedFilterItem {
+  return {
+    id: nanoid(),
+    valid: true,
+    member: '',
+    operator: 'equals',
+    values: [],
+  }
+}

package/src/components/Asset/AssetAddPlaylist.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import * as R from 'remeda'
+
+const props = defineProps<{
+  data: any
+  isDisabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'success'): void
+}>()
+
+const visible = defineModel<boolean>('visible')
+
+function getInitialValues() {
+  return {
+    playlistIds: [],
+  }
+}
+
+const { t: $t } = useI18n()
+const qc = useQueryClient()
+
+const mutation = useMutation({
+  mutationFn: ({ body, playListId }: { body: any, playListId: string }) => {
+    return $libraryApi('/api/library/playlists/{id}/items/add', {
+      method: 'POST',
+      body,
+      pathParams: {
+        id: playListId,
+      },
+    })
+  },
+})
+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.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: string[]) {
+  return !lists.some(value => !validNamePlaylist(value))
+}
+const { formRef, formValue, handleSubmit, handleValidate, register, formErrors } = useElForm({
+  initialValues: getInitialValues(),
+  async onSubmit(values) {
+    enableAdd.value = checkPlaylists(values.playlistIds)
+    if (enableAdd.value) {
+      const promises = values.playlistIds.map(async (playlistId: string) => {
+        await mutation.mutateAsync({
+          body: {
+            assetIds: props.data.map((item: any) => item.id),
+          },
+          playListId: playlistId,
+        })
+      })
+
+      await Promise.all(promises)
+      ElNotification.success($t('library.add_assets_to_playlist_successfully'))
+      emit('success')
+    }
+  },
+})
+
+function getProp(path: string) {
+  return path
+}
+const [playlistIdsValue, playlistIdsAttrs] = register<string[]>(getProp('playlistIds'), [{
+  required: true,
+  trigger: ['blur', 'change'],
+  validator: (rule, value, callback) => {
+    if (!value.length)
+      callback(new Error($t('base.please_select_at_least_one_playlist')))
+    else
+      callback()
+  },
+}])
+
+function handleClose(done: () => void) {
+  if (!R.equals(formValue.value, getInitialValues())) {
+    ElMessageBox.confirm($t('library.are_you_sure_you_want_to_close_this'), $t('message.Warning'), {
+      type: 'warning',
+    })
+      .then(() => {
+        formValue.value = getInitialValues()
+        done()
+      })
+      .catch(() => {
+        // catch error
+      })
+  }
+  else {
+    formValue.value = getInitialValues()
+    done()
+  }
+}
+
+const isLoading = computed(() => false)
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    center
+    :title="$t('library.add_asset_to_playlist')"
+    width="700px"
+    :before-close="handleClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="formValue"
+      label-position="left"
+      label-width="120px"
+      @validate="handleValidate"
+    >
+      <div class="text-sm text-text-primary font-bold">
+        Assets ({{ data.length }})
+      </div>
+      <div class="grid grid-cols-1 max-h-500px items-start gap-x-4 gap-y-2 of-y-auto py-5">
+        <template v-for="(item, i) in data" :key="item.id">
+          <div class="flex gap-2 border border-border rounded px-2 py-2">
+            <div class="i-ri:file-2-line mt-1 size-5 flex-shrink-0" />
+            <div class="min-w-0 w-full flex gap-2">
+              <p class="mt-1 flex-grow-1 break-all text-sm">
+                <span class="line-clamp-1">
+                  {{ item.name }}
+                </span>
+              </p>
+              <div v-if="item.metadata?.size" class="flex-shrink-0">
+                {{ formatFileSize(item.metadata?.size || 0) }}
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+
+      <el-form-item label="Playlist" class="mt-3" v-bind="playlistIdsAttrs">
+        <SSAssetPlaylistInfiniteSelect v-model="playlistIdsValue" :multiple-limit="20" />
+      </el-form-item>
+    </el-form>
+    <span class="mt-5 flex justify-end">
+      <el-button :disabled="isDisabled" @click="handleClose(() => visible = false)">
+        {{ $t('base.cancel') }}
+      </el-button>
+      <el-button
+        :disabled="isDisabled"
+        type="primary"
+        :loading="isLoading"
+        @click="handleSubmit"
+      >
+        {{ $t('general.submit') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>

package/src/components/Asset/AssetExtra.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  item: Asset
+  disabled?: boolean
+}>()
+const emit = defineEmits(['select'])
+const type = computed(() => props.item.type!)
+
+const audio = ref()
+const { playing, muted } = useMediaControls(audio, {
+  src: props.item.uri,
+})
+
+function onPlay() {
+  playing.value = !playing.value
+}
+
+const { selectable } = useAssetStore()
+const { t } = useI18n()
+</script>
+
+<template>
+  <div v-if="selectable">
+    <el-tooltip
+      class="box-item"
+      effect="dark"
+      :content="t('select')"
+      placement="top"
+    >
+      <el-button :disabled="disabled" type="primary" circle @click="emit('select', item)">
+        <div class="i-carbon:checkmark" />
+      </el-button>
+    </el-tooltip>
+  </div>
+</template>
+
+<i18n lang="yaml">
+en:
+  select: Select
+  play: Play
+  pause: Pause
+vi:
+  select: Chọn
+  play: Bật
+  pause: Dừng
+</i18n>

package/src/components/Asset/AssetImportLinks.vue

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