Queue editor now functional

package.json

@@ -17,6 +17,7 @@
     "jwt-decode": "^3.1.2",
     "luxon": "^3.1.0",
     "vue": "^3.2.13",
+    "vue-draggable-next": "^2.1.1",
     "vue-router": "^4.0.3",
     "vuedraggable": "^4.1.0",
     "vuex": "^4.0.0"

src/components/EditQueue.vue

@@ -25,17 +25,17 @@
       >
     </div>
     <div v-else-if="queueSelection >= 0" class="is-flex-grow-1 ml-1">
-      <Draggable
-        v-model="queueMembers"
-        group="people"
-        item-key="id"
-        @end="drag=false"
-        @start="drag=true">
+      <Draggable :list="queueMembers" tag="div" class="edit-queue-list" @change="reorder">
+        <div
+          class="p-2 has-background-grey-dark edit-queue-list-item"
+          v-for="element in queueMembers"
+          :key="element.order"
         >
-        <template #item="{ queue }">
-          {{ queue.title }}
-        </template>
-        <div>{{ queue.title }}</div>
+          <div class="is-flex is-flex-direction-row is-justify-content-space-between">
+            <div>{{ element.title }} ({{ element.asset }})</div>
+            <div>{{ element.order }}</div>
+          </div>
+        </div>
       </Draggable>
     </div>
   </div>
@@ -43,6 +43,7 @@
 
 <script lang="ts" setup>
 import {
+  computed,
   ref,
   watch,
 } from 'vue';
@@ -50,19 +51,39 @@ import {
   Queue,
   RewardFund,
 } from '@/api/types';
-import Draggable from 'vuedraggable';
 import {
   getQueueMembers,
   getQueues,
 } from '@/api/composed';
+import { VueDraggableNext as Draggable } from 'vue-draggable-next';
+
+interface QueueMember {
+  id?: number;
+  title: string;
+  asset: string;
+  order: number;
+}
+
+// eslint-disable-next-line no-undef
+const props = defineProps<{ newMember: RewardFund & { order: number; } }>();
 
 // eslint-disable-next-line no-undef
 const emits = defineEmits(['selected', 'created']);
 
 const queueSelection = ref(undefined as number | undefined);
 const queueName = ref(undefined as string | undefined);
-const queueMembers = ref(undefined as RewardFund[] | undefined);
-const drag = ref(false);
+const queueMembers = ref(undefined as QueueMember[] | undefined);
+const serverQueues = ref(0);
+
+const reorder = () => {
+  if (queueMembers.value) {
+    for (let i = 0; i < queueMembers.value.length; i += 1) {
+      if (queueMembers.value[i]) {
+        queueMembers.value[i].order = (i + 1);
+      }
+    }
+  }
+};
 
 const queues = ref([] as Queue[]);
 const fetchQueues = async () => {
@@ -83,8 +104,25 @@ const createdQueue = () => {
 };
 
 const populateQueueMembers = async (id: number) => {
-  const resp = await getQueueMembers(id);
-  queueMembers.value = resp?.members;
+  const resp = await getQueueMembers(id) as { members: (RewardFund & { order: number; })[] };
+  queueMembers.value = resp?.members.map((m) => ({
+    id: m.id,
+    title: m.title,
+    asset: m.asset,
+    order: m.order,
+  }));
+  serverQueues.value = queueMembers.value.length;
+
+  if (queueMembers.value && props.newMember.title && props.newMember.asset) {
+    const newMember = {
+      id: undefined,
+      title: props.newMember.title,
+      asset: props.newMember.asset,
+      order: queueMembers.value.length + 1,
+    };
+
+    queueMembers.value.push(newMember);
+  }
 };
 
 watch(queueSelection, async (newValue) => {
@@ -93,10 +131,49 @@ watch(queueSelection, async (newValue) => {
   }
 });
 
+const addedMember = computed(() => props.newMember);
+
+watch(addedMember, (newVal) => {
+  if (newVal.title && newVal.asset) {
+    const assembleNewMember = (order: number) => ({
+      id: undefined,
+      title: newVal.title,
+      asset: newVal.asset,
+      order,
+    });
+    const newMember = ref(undefined as QueueMember | undefined);
+    if (queueMembers.value && serverQueues.value < queueMembers.value.length) {
+      const newIndex = queueMembers.value.findIndex((m) => m.id === undefined);
+      newMember.value = assembleNewMember(queueMembers.value[newIndex].order);
+      queueMembers.value?.splice(newIndex, 1);
+
+      if (queueMembers.value) {
+        queueMembers.value.splice(newIndex, 0, newMember.value);
+      } else {
+        queueMembers.value = [newMember.value];
+      }
+    } else if (queueMembers.value && serverQueues.value === queueMembers.value.length) {
+      newMember.value = assembleNewMember(queueMembers.value.length + 1);
+      queueMembers.value.push(newMember.value);
+    }
+  }
+}, { deep: true });
+
 // TODO: send new order of queued items
 </script>
 
 <style lang="stylus" scoped>
 input::placeholder, textarea::placeholder
   color #7d7d7d
+
+.edit-queue-list
+  border 1px #ccc solid
+  border-radius 4px
+  overflow hidden
+
+.edit-queue-list-item
+  cursor pointer
+
+  &:not(:last-child)
+    border-bottom 1px #a7a7a7 solid
 </style>

src/views/AddFundView.vue

@@ -47,7 +47,11 @@
       </section>
       <section class="section px-0 py-4">
         <div class="title is-5 has-text-white-ter">Queue</div>
-        <EditQueue @created="setQueueName" @selected="setQueueSelection"/>
+        <EditQueue
+          :new-member="constructFund()"
+          @created="setQueueName"
+          @selected="setQueueSelection"
+        />
       </section>
     </section>
     <div class="buttons is-flex is-justify-content-end mt-5">
@@ -121,6 +125,19 @@ const doCreateQueue = async () => {
   return null;
 };
 
+const constructFund = () => ({
+  asset: asset.value,
+  fundWallet: sanitize(fundWallet.value),
+  sellingWallet: sanitize(sellWallet.value),
+  issuerWallet: sanitize(issuerWallet.value),
+  memo: sanitize(memo.value),
+  minContribution: minContribution.value,
+  title: sanitize(title.value),
+  description: sanitize(description.value),
+  bonuses: bonuses.value,
+  queueID: null,
+});
+
 const requesting = ref(false);
 const submit = async () => {
   if (!minContribution.value) return;

yarn.lock

@@ -7304,6 +7304,11 @@ vue-demi@*:
   resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz"
   integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
 
+vue-draggable-next@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/vue-draggable-next/-/vue-draggable-next-2.1.1.tgz#49886da82f116d11b3e4df7674320fdacf5d7e04"
+  integrity sha512-f5lmA7t6LMaL4viR7dU30zzvqJzaKQs0ymL0Jy9UDT9uiZ2tXF3MzPzEvpTH2UODXZJkT+SnjeV1fXHMsgXLYA==
+
 vue-eslint-parser@^8.0.0, vue-eslint-parser@^8.0.1:
   version "8.3.0"
   resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz"