image mass operations

anzusystems · Dec 1, 2024 · 109653e · 109653e
1 parent c3b180f
commit 109653e
Show file tree

Hide file tree

Showing 5 changed files with 188 additions and 5 deletions.
diff --git a/src/components/damImage/uploadQueue/components/ImageMassOperations.vue b/src/components/damImage/uploadQueue/components/ImageMassOperations.vue
@@ -0,0 +1,149 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import { useImageMassOperations } from '@/components/damImage/uploadQueue/composables/imageMassOperations'
+import AFormTextarea from '@/components/form/AFormTextarea.vue'
+import { computed, ref } from 'vue'
+import useVuelidate from '@vuelidate/core'
+import { useValidate } from '@/validators/vuelidate/useValidate'
+
+const texts = ref({ description: '', source: '' })
+
+const { replaceEmptyDescription, replaceEmptySource } = useImageMassOperations()
+const { t } = useI18n()
+
+const fillAll = (forceReplace: boolean) => {
+  replaceEmptyDescription(texts.value.description, forceReplace)
+  replaceEmptySource(texts.value.source, forceReplace)
+}
+
+const clearForm = () => {
+  texts.value.description = ''
+  texts.value.source = ''
+}
+
+const { maxLength } = useValidate()
+
+const rules = computed(() => ({
+  texts: {
+    description: {
+      maxLength: maxLength(2000),
+    },
+    source: {
+      maxLength: maxLength(255),
+    },
+  },
+}))
+const v$ = useVuelidate(rules, { texts }, { $scope: false })
+</script>
+
+<template>
+  <div class="w-100">
+    <VRow
+      dense
+      class="mt-1"
+    >
+      <VCol>
+        <div class="d-flex">
+          <AFormTextarea
+            :v="v$"
+            :label="t('common.damImage.image.model.texts.description')"
+            v-model="texts.description"
+          />
+          <VBtn
+            icon
+            size="small"
+            variant="text"
+            class="mr-1"
+            @click.stop="replaceEmptyDescription(texts.description, false)"
+          >
+            <VIcon icon="mdi-file-arrow-left-right-outline" />
+            <VTooltip
+              activator="parent"
+              location="bottom"
+            >
+              {{ t('common.damImage.asset.massOperations.fillOneEmpty') }}
+            </VTooltip>
+          </VBtn>
+          <VBtn
+            icon
+            size="small"
+            variant="text"
+            @click.stop="replaceEmptyDescription(texts.description, true)"
+          >
+            <VIcon icon="mdi-file-replace-outline" />
+            <VTooltip
+              activator="parent"
+              location="bottom"
+            >
+              {{ t('common.damImage.asset.massOperations.replaceOne') }}
+            </VTooltip>
+          </VBtn>
+        </div>
+      </VCol>
+    </VRow>
+    <VRow
+      dense
+      class="mt-1"
+    >
+      <VCol>
+        <div class="d-flex">
+          <AFormTextarea v-model="texts.source" />
+          <VBtn
+            icon
+            size="small"
+            variant="text"
+            class="mr-1"
+            @click.stop="replaceEmptySource(texts.source, false)"
+          >
+            <VIcon icon="mdi-file-arrow-left-right-outline" />
+            <VTooltip
+              activator="parent"
+              location="bottom"
+            >
+              {{ t('common.damImage.asset.massOperations.fillOneEmpty') }}
+            </VTooltip>
+          </VBtn>
+          <VBtn
+            icon
+            size="small"
+            variant="text"
+            @click.stop="replaceEmptySource(texts.source, true)"
+          >
+            <VIcon icon="mdi-file-replace-outline" />
+            <VTooltip
+              activator="parent"
+              location="bottom"
+            >
+              {{ t('common.damImage.asset.massOperations.replaceOne') }}
+            </VTooltip>
+          </VBtn>
+        </div>
+      </VCol>
+    </VRow>
+    <div class="sidebar-info__actions pa-2 d-flex align-center justify-center">
+      <VBtn
+        class="mr-2"
+        variant="text"
+        size="small"
+        @click.stop="fillAll(false)"
+      >
+        {{ t('common.damImage.asset.massOperations.fillAllEmpty') }}
+      </VBtn>
+      <VBtn
+        class="mr-2"
+        variant="text"
+        size="small"
+        @click.stop="fillAll(true)"
+      >
+        {{ t('common.damImage.asset.massOperations.replaceAll') }}
+      </VBtn>
+      <VBtn
+        variant="text"
+        size="small"
+        @click.stop="clearForm"
+      >
+        {{ t('common.damImage.asset.massOperations.clearForm') }}
+      </VBtn>
+    </div>
+  </div>
+</template>
diff --git a/src/components/damImage/uploadQueue/components/ImageWidgetMultipleItem.vue b/src/components/damImage/uploadQueue/components/ImageWidgetMultipleItem.vue
@@ -81,6 +81,7 @@ const removeItem = () => {
               v-model="image.texts.description"
               :label="t('common.damImage.image.model.texts.description')"
               :help="t('common.damImage.image.help.texts.description')"
+              :v="v$.image.texts.description"
             />
           </VCol>
         </VRow>

diff --git a/src/components/damImage/uploadQueue/composables/imageMassOperations.ts b/src/components/damImage/uploadQueue/composables/imageMassOperations.ts
@@ -0,0 +1,31 @@
+import { isUndefined } from '@/utils/common'
+import { useImageStore } from '@/components/damImage/uploadQueue/composables/imageStore'
+
+export function useImageMassOperations() {
+  const imageStore = useImageStore()
+
+  const replaceEmptyDescription = (value: any, forceReplace = false) => {
+    const items = imageStore.images
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i]
+      if (forceReplace || isUndefined(item.texts.description) || item.texts.description.length === 0) {
+        item.texts.description = value
+      }
+    }
+  }
+
+  const replaceEmptySource = (value: any, forceReplace = false) => {
+    const items = imageStore.images
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i]
+      if (forceReplace || isUndefined(item.texts.source) || item.texts.source.length === 0) {
+        item.texts.source = value
+      }
+    }
+  }
+
+  return {
+    replaceEmptyDescription,
+    replaceEmptySource,
+  }
+}
diff --git a/src/components/damImage/uploadQueue/composables/uploadValidations.ts b/src/components/damImage/uploadQueue/composables/uploadValidations.ts
@@ -12,14 +12,14 @@ export const ADamKeywordCreateValidationScopeSymbol = Symbol.for('anzu:common:ke
 
 export const ADamAuthorCreateValidationScopeSymbol = Symbol.for('anzu:common:author-create-validation-scope')
 
-const { required, maxLength } = useValidate()
-
-export function useImageValidation(
-  image: Ref<ImageCreateUpdateAware | null>,
-) {
+export function useImageValidation(image: Ref<ImageCreateUpdateAware | null>) {
+  const { required, maxLength } = useValidate()
   const rules = computed(() => ({
     image: {
       texts: {
+        description: {
+          maxLength: maxLength(2000),
+        },
         source: {
           required,
           maxLength: maxLength(255),

diff --git a/src/lib.ts b/src/lib.ts
@@ -84,6 +84,7 @@ import AImageWidget from '@/components/damImage/AImageWidget.vue'
 import AImageWidgetSimple from '@/components/damImage/AImageWidgetSimple.vue'
 import AImageWidgetMultiple from '@/components/damImage/AImageWidgetMultiple.vue'
 import AImageWidgetMultipleSimple from '@/components/damImage/AImageWidgetMultipleSimple.vue'
+import ImageMassOperations from '@/components/damImage/uploadQueue/components/ImageMassOperations.vue'
 import AImagePublicInput from '@/components/damImage/AImagePublicInput.vue'
 import ACropperjs from '@/components/ACropperjs.vue'
 import ADatatable from '@/components/datatable/ADatatable.vue'
@@ -591,6 +592,7 @@ export {
   AImageWidgetSimple,
   AImageWidgetMultiple,
   AImageWidgetMultipleSimple,
+  ImageMassOperations,
   AImagePublicInput,
   ACropperjs,
   ACollabLockedByUser,