From 41a659b99b1bdaa18cab848bfee0d0d10764b826 Mon Sep 17 00:00:00 2001
From: volar <stanislav.volar@petitpress.sk>
Date: Sun, 3 Dec 2023 02:49:47 +0100
Subject: [PATCH] wip

---
 .../components/ImageWidgetMultipleInner.vue   | 18 ++++++-
 .../components/ImageWidgetMultipleItem.vue    | 11 ++++
 .../components/UploadQueueItemEditable.vue    | 53 ++++++++++---------
 .../uploadQueue/composables/imageStore.ts     |  5 ++
 .../composables/uploadQueuesStore.ts          |  1 +
 5 files changed, 62 insertions(+), 26 deletions(-)

diff --git a/src/components/damImage/uploadQueue/components/ImageWidgetMultipleInner.vue b/src/components/damImage/uploadQueue/components/ImageWidgetMultipleInner.vue
index e069989a..1b53ddc4 100644
--- a/src/components/damImage/uploadQueue/components/ImageWidgetMultipleInner.vue
+++ b/src/components/damImage/uploadQueue/components/ImageWidgetMultipleInner.vue
@@ -8,7 +8,7 @@ import { DamExtSystemConfig } from '@/types/coreDam/DamConfig'
 import { useImageStore } from '@/components/damImage/uploadQueue/composables/imageStore'
 import ImageWidgetMultipleItem from '@/components/damImage/uploadQueue/components/ImageWidgetMultipleItem.vue'
 import { storeToRefs } from 'pinia'
-import { bulkUpdateImages, fetchImageListByIds } from '@/components/damImage/uploadQueue/api/imageApi'
+import { bulkUpdateImages, deleteImage, fetchImageListByIds } from '@/components/damImage/uploadQueue/api/imageApi'
 import { useCommonAdminImageOptions } from '@/components/damImage/composables/commonAdminImageOptions'
 import { useAlerts } from '@/composables/system/alerts'
 import { DamAssetType } from '@/types/coreDam/Asset'
@@ -200,6 +200,21 @@ const saveImages = async () => {
   }
 }
 
+const removeItem = async (index: number) => {
+  const image = images.value[index]
+  if (!image) return
+  if (isUndefined(image.id)) {
+    imageStore.removeImageByIndex(index)
+    return
+  }
+  try {
+    await deleteImage(imageClient, image.id)
+    imageStore.removeImageByIndex(index)
+  } catch (e) {
+    showErrorsDefault(e)
+  }
+}
+
 defineExpose({
   saveImages,
 })
@@ -252,6 +267,7 @@ onMounted(() => {
         :key="image.key"
         :index="index"
         @edit-asset="onEditAsset"
+        @remove-item="removeItem"
       />
     </div>
     <AImageDropzone
diff --git a/src/components/damImage/uploadQueue/components/ImageWidgetMultipleItem.vue b/src/components/damImage/uploadQueue/components/ImageWidgetMultipleItem.vue
index 73e25ec6..0f8153ee 100644
--- a/src/components/damImage/uploadQueue/components/ImageWidgetMultipleItem.vue
+++ b/src/components/damImage/uploadQueue/components/ImageWidgetMultipleItem.vue
@@ -5,6 +5,7 @@ import { computed } from 'vue'
 import AFormTextarea from '@/components/form/AFormTextarea.vue'
 import type { DocId } from '@/types/common'
 import { isNull, isUndefined } from '@/utils/common'
+import AActionDeleteButton from '@/components/buttons/action/AActionDeleteButton.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -15,6 +16,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   (e: 'editAsset', data: DocId): void
+  (e: 'removeItem', index: number): void
 }>()
 
 const imageStore = useImageStore()
@@ -25,6 +27,10 @@ const onEditAsset = () => {
   if (isNull(image.value) || isUndefined(image.value)) return
   emit('editAsset', image.value.dam.damId)
 }
+
+const removeItem = () => {
+  emit('removeItem', props.index)
+}
 </script>
 
 <template>
@@ -45,6 +51,11 @@ const onEditAsset = () => {
             >
               Edit DAM asset
             </VBtn>
+            <AActionDeleteButton
+              variant="icon"
+              button-class=""
+              @delete-record="removeItem"
+            />
           </VCol>
         </VRow>
         <VRow>
diff --git a/src/components/damImage/uploadQueue/components/UploadQueueItemEditable.vue b/src/components/damImage/uploadQueue/components/UploadQueueItemEditable.vue
index 68f9f008..9732fad8 100644
--- a/src/components/damImage/uploadQueue/components/UploadQueueItemEditable.vue
+++ b/src/components/damImage/uploadQueue/components/UploadQueueItemEditable.vue
@@ -154,31 +154,31 @@ const showCancel = computed(() => {
             cover
             :aspect-ratio="IMAGE_ASPECT_RATIO"
           />
-          <div
-            v-if="item.isDuplicate"
-            :class="
-              'dam-upload-queue__overlay dam-upload-queue__overlay--warning ' +
-                'd-flex align-center justify-center flex-column'
-            "
-          >
-            <VIcon
-              icon="mdi-alert"
-              class="ma-1"
-              size="x-small"
-              color="warning"
-            />
-            <div class="text-warning">
-              {{ t('coreDam.asset.queueItem.duplicate') }}
-            </div>
-            <!--            <AssetLinkExternal-->
-            <!--              v-if="item.duplicateAssetId"-->
-            <!--              :asset-id="item.duplicateAssetId"-->
-            <!--              variant="text"-->
-            <!--              size="small"-->
-            <!--            >-->
-            <!--              {{ t('coreDam.asset.queueItem.viewOriginal') }}&nbsp;<VIcon icon="mdi-open-in-new" />-->
-            <!--            </AssetLinkExternal>-->
-          </div>
+          <!--          <div-->
+          <!--            v-if="item.isDuplicate"-->
+          <!--            :class="-->
+          <!--              'dam-upload-queue__overlay dam-upload-queue__overlay&#45;&#45;warning ' +-->
+          <!--                'd-flex align-center justify-center flex-column'-->
+          <!--            "-->
+          <!--          >-->
+          <!--            <VIcon-->
+          <!--              icon="mdi-alert"-->
+          <!--              class="ma-1"-->
+          <!--              size="x-small"-->
+          <!--              color="warning"-->
+          <!--            />-->
+          <!--            <div class="text-warning">-->
+          <!--              {{ t('coreDam.asset.queueItem.duplicate') }}-->
+          <!--            </div>-->
+          <!--            &lt;!&ndash;            <AssetLinkExternal&ndash;&gt;-->
+          <!--            &lt;!&ndash;              v-if="item.duplicateAssetId"&ndash;&gt;-->
+          <!--            &lt;!&ndash;              :asset-id="item.duplicateAssetId"&ndash;&gt;-->
+          <!--            &lt;!&ndash;              variant="text"&ndash;&gt;-->
+          <!--            &lt;!&ndash;              size="small"&ndash;&gt;-->
+          <!--            &lt;!&ndash;            >&ndash;&gt;-->
+          <!--            &lt;!&ndash;              {{ t('coreDam.asset.queueItem.viewOriginal') }}&nbsp;<VIcon icon="mdi-open-in-new" />&ndash;&gt;-->
+          <!--            &lt;!&ndash;            </AssetLinkExternal>&ndash;&gt;-->
+          <!--          </div>-->
           <div
             v-if="item.error.hasError"
             :class="
@@ -227,6 +227,9 @@ const showCancel = computed(() => {
                 </VBtn>
               </div>
               <div>
+                <div v-if="item.isDuplicate">
+                  isDuplicate
+                </div>
                 <ATableCopyIdButton
                   v-if="item.assetId"
                   :id="item.assetId"
diff --git a/src/components/damImage/uploadQueue/composables/imageStore.ts b/src/components/damImage/uploadQueue/composables/imageStore.ts
index 661c3c32..161c5cc7 100644
--- a/src/components/damImage/uploadQueue/composables/imageStore.ts
+++ b/src/components/damImage/uploadQueue/composables/imageStore.ts
@@ -27,6 +27,10 @@ export const useImageStore = defineStore('commonImageStore', () => {
     }
   }
 
+  function removeImageByIndex(index: number) {
+    images.value.splice(index, 1)
+  }
+
   function reset() {
     images.value = []
     imageDetail.value = null
@@ -40,6 +44,7 @@ export const useImageStore = defineStore('commonImageStore', () => {
     addImages,
     setImageDetail,
     updateMaxPositionIfGreater,
+    removeImageByIndex,
     reset,
   }
 })
diff --git a/src/components/damImage/uploadQueue/composables/uploadQueuesStore.ts b/src/components/damImage/uploadQueue/composables/uploadQueuesStore.ts
index f5690011..0f070f03 100644
--- a/src/components/damImage/uploadQueue/composables/uploadQueuesStore.ts
+++ b/src/components/damImage/uploadQueue/composables/uploadQueuesStore.ts
@@ -201,6 +201,7 @@ export const useUploadQueuesStore = defineStore('commonUploadQueuesStore', () =>
           if (assetRes) {
             item.fileId = originAssetFile
             item.duplicateAssetId = assetRes.id
+            item.assetStatus = assetRes.attributes.assetStatus
           }
           if (assetRes?.mainFile?.links?.image_detail) {
             item.imagePreview = assetRes.mainFile.links.image_detail