Prepare UI for queueing

package.json

@@ -18,6 +18,7 @@
     "luxon": "^3.1.0",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
+    "vuedraggable": "^4.1.0",
     "vuex": "^4.0.0"
   },
   "devDependencies": {

src/api/types.ts

@@ -7,17 +7,17 @@ export enum Privileges {
 }
 
 export interface Tag {
-  CreatedAt: string;
-  DeletedAt: string;
+  createdAt: string;
+  deletedAt: string;
   ID: number;
-  UpdatedAt: string;
+  updatedAt: string;
   description: string;
   active: boolean;
   contribution: number;
 }
 
 export interface Contribution {
-  CreatedAt: string;
+  createdAt: string;
   amount: number;
   rewardFundID: number;
   tags: Tag[];
@@ -122,6 +122,14 @@ export interface AuthenticationRequest {
 
 export interface LoginResponse {
   token: string | null;
+} // TODO: change shape of fund creation request
+
+export interface GetQueueMembersRequest {
+  id: number;
+}
+
+export interface GetQueueMembersResponse {
+  members: RewardFund[];
 }
 
 export interface GetRewardFundsRequest {

src/views/AddFundView.vue

@@ -54,14 +54,14 @@
             aria-label="Queue Selection"
             ref="queueOptions"
           >
+            <option :value="-2">None</option>
             <option :value="-1">New Queue</option>
             <option :value="queue.id" v-for="(queue, i) in queues" v-bind:key="i">
               {{ queue.name }}
             </option>
           </select>
         </div>
-        <div class="is-flex is-flex-direction-row is-flex-grow-1 ml-1"
-             v-if="queueSelection === -1">
+        <div class="is-flex is-flex-direction-row is-flex-grow-1 ml-1" v-if="queueSelection === -1">
           <input
             class="input mr-1"
             type="text"
@@ -70,6 +70,20 @@
             aria-label="Queue Name"
           >
         </div>
+        <div class="is-flex-grow-1 ml-1" v-else-if="queueSelection >= 0">
+          <Draggable
+            v-model="queueMembers"
+            group="people"
+            @start="drag=true"
+            @end="drag=false"
+            item-key="id">
+          >
+            <template #item="{ queue }">
+              {{ queue.title }}
+            </template>
+            <div>{{ queue.title }}</div>
+          </Draggable>
+        </div>
       </div>
     </section>
   </section>
@@ -91,15 +105,22 @@ import {
   CreateQueueRequest,
   CreateQueueResponse,
   FundInfo,
+  GetQueueMembersRequest,
+  GetQueueMembersResponse,
   GetQueuesResponse,
   Queue,
+  RewardFund,
   SuccessResponse,
 } from '@/api/types';
-import { ref } from 'vue';
+import {
+  ref,
+  watch,
+} from 'vue';
 import store from '@/store';
 import { useRouter } from 'vue-router';
 import FundTierInput from '@/components/FundTierInput.vue';
 import { sanitize } from '@/lib/helpers';
+import Draggable from 'vuedraggable';
 
 const router = useRouter();
 
@@ -119,6 +140,8 @@ const minContribution = ref(undefined as number | undefined);
 
 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 queues = ref([] as Queue[]);
 const fetchQueues = async () => {
@@ -177,6 +200,13 @@ const submit = async () => {
     }
   }
 };
+
+watch(queueSelection, async (newValue) => {
+  if (newValue !== undefined && newValue >= 0) {
+    const resp = await controller.post<GetQueueMembersResponse, GetQueueMembersRequest>('GetQueueMembers', { id: newValue });
+    queueMembers.value = resp?.members;
+  }
+});
 </script>
 
 <style scoped lang="stylus">

yarn.lock

@@ -6669,6 +6669,11 @@ sockjs@^0.3.24:
     uuid "^8.3.2"
     websocket-driver "^0.7.4"
 
+sortablejs@1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
+  integrity sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==
+
 source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
@@ -7370,6 +7375,13 @@ vue@^3.2.13:
     "@vue/server-renderer" "3.2.41"
     "@vue/shared" "3.2.41"
 
+vuedraggable@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"
+  integrity sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==
+  dependencies:
+    sortablejs "1.14.0"
+
 vuex@^4.0.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz"