From 1c9e56ce2e76deafbc9fbb962f3cde76cc9f287e Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Mon, 18 Jul 2022 17:44:01 -0500
Subject: [PATCH] Fix:Libraries table to use draggable handle for items so they
 can be clicked and edited #839

---
 client/assets/draggable.css                         | 13 ++++++++++---
 client/components/tables/library/LibrariesTable.vue |  2 +-
 client/components/tables/library/LibraryItem.vue    |  2 +-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/client/assets/draggable.css b/client/assets/draggable.css
index 48dca6b8..31271e67 100644
--- a/client/assets/draggable.css
+++ b/client/assets/draggable.css
@@ -1,34 +1,40 @@
 .flip-list-move {
   transition: transform 0.5s;
 }
+
 .no-move {
   transition: transform 0s;
 }
+
 .ghost {
   opacity: 0.5;
   background-color: rgba(255, 255, 255, 0.25);
 }
+
 .list-group {
   min-height: 30px;
 }
-#librariesTable .item {
-  cursor: n-resize;
-}
+
 .drag-handle {
   cursor: n-resize;
 }
+
 .list-group-item:not(.exclude) {
   cursor: n-resize;
 }
+
 .list-group-item.exclude {
   cursor: not-allowed;
 }
+
 .list-group-item:not(.ghost):not(.exclude):hover {
   background-color: rgba(0, 0, 0, 0.1);
 }
+
 .list-group-item:nth-child(even):not(.ghost):not(.exclude) {
   background-color: rgba(0, 0, 0, 0.25);
 }
+
 .list-group-item:nth-child(even):not(.ghost):not(.exclude):hover {
   background-color: rgba(0, 0, 0, 0.1);
 }
@@ -36,6 +42,7 @@
 .list-group-item.exclude:not(.ghost) {
   background-color: rgba(255, 0, 0, 0.25);
 }
+
 .list-group-item.exclude:not(.ghost):hover {
   background-color: rgba(223, 0, 0, 0.25);
 }
\ No newline at end of file
diff --git a/client/components/tables/library/LibrariesTable.vue b/client/components/tables/library/LibrariesTable.vue
index 329f0a1e..86ddec47 100644
--- a/client/components/tables/library/LibrariesTable.vue
+++ b/client/components/tables/library/LibrariesTable.vue
@@ -6,7 +6,7 @@
         <span class="material-icons" style="font-size: 1.4rem">add</span>
       </div>
     </div>
-    <draggable v-if="libraryCopies.length" :list="libraryCopies" v-bind="dragOptions" class="list-group" draggable=".item" tag="div" @start="startDrag" @end="endDrag">
+    <draggable v-if="libraryCopies.length" :list="libraryCopies" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="startDrag" @end="endDrag">
       <template v-for="library in libraryCopies">
         <div :key="library.id" class="item">
           <tables-library-item :library="library" :selected="currentLibraryId === library.id" :dragging="drag" @edit="editLibrary" @click="setLibrary" />
diff --git a/client/components/tables/library/LibraryItem.vue b/client/components/tables/library/LibraryItem.vue
index b03dc819..f9b7f1f4 100644
--- a/client/components/tables/library/LibraryItem.vue
+++ b/client/components/tables/library/LibraryItem.vue
@@ -23,7 +23,7 @@
         <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
       </svg>
     </div>
-    <span class="material-icons text-xl text-gray-400 hover:text-gray-50 ml-4">reorder</span>
+    <span class="material-icons drag-handle text-xl text-gray-400 hover:text-gray-50 ml-4">reorder</span>
 
     <!-- For mobile -->
     <modals-dialog v-model="showMobileMenu" :title="menuTitle" :items="mobileMenuItems" @action="mobileMenuAction" />