Merge pull request #53 from Freegle/feature/photos-drag-and-drop

Add drag & drop for photos
Freegle · Nov 27, 2023 · 8bc9b2b · 8bc9b2b
2 parents 9af771b + 3950c7c
commit 8bc9b2b
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 37 deletions.
diff --git a/components/MessageEditModal.vue b/components/MessageEditModal.vue
@@ -86,15 +86,23 @@
       </b-row>
       <b-row v-if="attachments?.length">
         <b-col>
-          <div class="d-flex flex-wrap mb-1 mt-2">
-            <div
-              v-for="att in attachments"
-              :key="'image-' + att.id"
-              class="bg-transparent p-0"
-            >
-              <PostPhoto v-bind="att" @remove="removePhoto" />
-            </div>
-          </div>
+          <draggable
+            v-model="attachments"
+            class="d-flex flex-wrap mb-1 mt-2"
+            :item-key="(el) => `image-${el.id}`"
+            :animation="150"
+            ghost-class="ghost"
+          >
+            <template #item="{ element, index }">
+              <div class="bg-transparent p-0">
+                <PostPhoto
+                  v-bind="element"
+                  :primary="index === 0"
+                  @remove="removePhoto"
+                />
+              </div>
+            </template>
+          </draggable>
         </b-col>
       </b-row>
     </template>
@@ -119,6 +127,7 @@
 
 <script>
 import { ref, toRaw } from 'vue'
+import draggable from 'vuedraggable'
 import { useMessageStore } from '../stores/message'
 import { useComposeStore } from '../stores/compose'
 import { useGroupStore } from '../stores/group'
@@ -132,6 +141,7 @@ const PostPhoto = () => import('./PostPhoto')
 
 export default {
   components: {
+    draggable,
     NumberIncrementDecrement,
     OurFilePond,
     PostCode,
@@ -292,6 +302,10 @@ export default {
 }
 </script>
 <style scoped lang="scss">
+.ghost {
+  opacity: 0.5;
+}
+
 :deep(.autocomplete-wrap) {
   border: 1px solid $color-gray-4 !important;
 

diff --git a/components/PostMessage.vue b/components/PostMessage.vue
@@ -1,33 +1,46 @@
 <template>
   <div>
     <div class="d-flex flex-wrap">
-      <div
-        class="photoholder bg-light d-flex flex-column align-items-center justify-items-center mr-1"
+      <draggable
+        v-model="attachments"
+        class="d-flex flex-wrap"
+        :item-key="(el) => `image-${el.id}`"
+        :animation="150"
+        ghost-class="ghost"
       >
-        <v-icon icon="camera" class="fa-8-75x text-faded" />
-        <b-button
-          variant="primary"
-          size="lg"
-          :class="{
-            'ml-3': true,
-            'mr-3': true,
-            invisible: uploading && hidingPhotoButton,
-          }"
-          @click="photoAdd"
-          @drop.prevent="drop"
-          @dragover.prevent
-        >
-          <span v-if="attachments?.length === 1"> Add more photos </span>
-          <span v-else> Add photos </span>
-        </b-button>
-      </div>
-      <div
-        v-for="att in attachments"
-        :key="'image-' + att.id"
-        class="bg-transparent p-0"
-      >
-        <PostPhoto v-bind="att" class="mr-1" @remove="removePhoto" />
-      </div>
+        <template #header>
+          <div
+            class="photoholder bg-light d-flex flex-column align-items-center justify-items-center mr-1"
+          >
+            <v-icon icon="camera" class="fa-8-75x text-faded" />
+            <b-button
+              variant="primary"
+              size="lg"
+              :class="{
+                'ml-3': true,
+                'mr-3': true,
+                invisible: uploading && hidingPhotoButton,
+              }"
+              @click="photoAdd"
+              @drop.prevent="drop"
+              @dragover.prevent
+            >
+              <span v-if="attachments?.length === 1"> Add more photos </span>
+              <span v-else> Add photos </span>
+            </b-button>
+          </div>
+        </template>
+        <template #item="{ element, index }">
+          <div class="bg-transparent p-0">
+            <PostPhoto
+              v-bind="element"
+              :primary="index === 0"
+              class="mr-1"
+              @remove="removePhoto"
+            />
+          </div>
+        </template>
+      </draggable>
       <hr />
     </div>
     <div v-if="uploading" class="bg-white">
@@ -74,10 +87,12 @@
   </div>
 </template>
 <script>
+import draggable from 'vuedraggable'
 import { uid } from '../composables/useId'
 import { useComposeStore } from '../stores/compose'
 import { useMessageStore } from '../stores/message'
 import NumberIncrementDecrement from './NumberIncrementDecrement'
+
 const OurFilePond = () => import('~/components/OurFilePond')
 const PostPhoto = () => import('~/components/PostPhoto')
 const PostItem = () => import('~/components/PostItem')
@@ -88,6 +103,7 @@ export default {
     OurFilePond,
     PostPhoto,
     PostItem,
+    draggable,
   },
   props: {
     id: {
@@ -145,8 +161,13 @@ export default {
         })
       },
     },
-    attachments() {
-      return this.composeStore?.attachments(this.id)
+    attachments: {
+      get() {
+        return this.composeStore?.attachments(this.id)
+      },
+      set(value) {
+        return this.composeStore?.setAttachmentsForMessage(this.id, value)
+      },
     },
     placeholder() {
       return this.type === 'Offer'
@@ -261,4 +282,8 @@ export default {
   width: 200px;
   height: 200px;
 }
+
+.ghost {
+  opacity: 0.5;
+}
 </style>
diff --git a/components/PostPhoto.vue b/components/PostPhoto.vue
@@ -29,6 +29,7 @@
       rounded
       thumbnail
       class="square"
+      :class="{ primary }"
       @click="$emit('click')"
     />
     <b-img
@@ -72,6 +73,10 @@ export default {
       required: false,
       default: true,
     },
+    primary: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup() {
     const imageStore = useImageStore()
@@ -154,4 +159,9 @@ export default {
   min-height: 200px;
   max-height: 200px;
 }
+
+.primary {
+  border-width: 2px;
+  border-color: $colour-success;
+}
 </style>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -102,6 +102,7 @@
     "vue-social-sharing": "^4.0.0-alpha4",
     "vue3-draggable-resizable": "^1.6.3",
     "vue3-observe-visibility": "^0.1.2",
+    "vuedraggable": "^4.1.0",
     "wicket": "^1.3.8"
   }
 }