From 8d3fee8aefda22fe2e5085d82cfae0f7d7437c11 Mon Sep 17 00:00:00 2001
From: Konstantin Markov <maga.ot.oz@protonmail.com>
Date: Mon, 9 Oct 2023 11:38:07 +0300
Subject: [PATCH] Add classes on item dragging, fix local storage upload
 (#4334)

---
 .../directives/ItemCarouselDirective.ts       | 21 ++++++++++++++++++-
 .../apps/authoring/views/item-carousel.html   |  5 ++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/scripts/apps/authoring/authoring/directives/ItemCarouselDirective.ts b/scripts/apps/authoring/authoring/directives/ItemCarouselDirective.ts
index 70d5173976..4889a6311a 100644
--- a/scripts/apps/authoring/authoring/directives/ItemCarouselDirective.ts
+++ b/scripts/apps/authoring/authoring/directives/ItemCarouselDirective.ts
@@ -186,6 +186,16 @@ export function ItemCarouselDirective(notify, relationsService) {
                 carousel.trigger('to.owl.carousel', [index]);
             };
 
+            const addDragOverClass = () => {
+                elem.find('figure').addClass('dragover');
+                elem.find('button.item-association').addClass('dragover');
+            };
+
+            const removeDragOverClass = () => {
+                elem.find('figure').removeClass('dragover');
+                elem.find('button.item-association').removeClass('dragover');
+            };
+
             function canUploadItems(uploadsCount: number = 0): boolean {
                 const mediaItemsForCurrentField = getAssociationsByFieldId(scope.item.associations, scope.field._id);
                 const currentUploads = mediaItemsForCurrentField.length;
@@ -208,6 +218,11 @@ export function ItemCarouselDirective(notify, relationsService) {
                 elem.on('dragover', (event) => {
                     event.preventDefault();
                     event.stopPropagation();
+                    addDragOverClass();
+                });
+
+                elem.on('dragleave', () => {
+                    removeDragOverClass();
                 });
 
                 elem.on('drop dragdrop', (event) => {
@@ -219,9 +234,13 @@ export function ItemCarouselDirective(notify, relationsService) {
                     event.stopPropagation();
 
                     const type: string = getSuperdeskType(event, false);
-                    const item: IArticle = angular.fromJson(event.originalEvent.dataTransfer.getData(type));
+
+                    const jsonData = event.originalEvent.dataTransfer.getData(type);
+                    const item: IArticle = angular.fromJson(jsonData !== '' ? jsonData : '{}');
+
                     const isWorkflowAllowed: boolean = relationsService.itemHasAllowedStatus(item, scope.field);
 
+                    removeDragOverClass();
                     if (!isWorkflowAllowed) {
                         notify.error(gettext(
                             'The following status is not allowed in this field: {{status}}',
diff --git a/scripts/apps/authoring/views/item-carousel.html b/scripts/apps/authoring/views/item-carousel.html
index 28cb085e07..57afaf0b99 100644
--- a/scripts/apps/authoring/views/item-carousel.html
+++ b/scripts/apps/authoring/views/item-carousel.html
@@ -1,4 +1,7 @@
-<button tabindex="{{tabindex}}" class="item-association" ng-if="!carouselItems.length"
+<button
+    tabindex="{{tabindex}}"
+    class="item-association"
+    ng-if="!carouselItems.length"
     ng-class="{'item-association--preview': item[item.fieldId], 'item-association--loading': loading}"
     ng-click="associations.isMediaEditable() && !item[item.fieldId] && upload()"
     ng-disabled="!editable"