|
@@ -25,17 +25,17 @@ |
|
|
> |
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
<div v-else-if="queueSelection >= 0" class="is-flex-grow-1 ml-1"> |
|
|
<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> |
|
|
</Draggable> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@@ -43,6 +43,7 @@ |
|
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
<script lang="ts" setup> |
|
|
import { |
|
|
import { |
|
|
|
|
|
computed, |
|
|
ref, |
|
|
ref, |
|
|
watch, |
|
|
watch, |
|
|
} from 'vue'; |
|
|
} from 'vue'; |
|
@@ -50,19 +51,39 @@ import { |
|
|
Queue, |
|
|
Queue, |
|
|
RewardFund, |
|
|
RewardFund, |
|
|
} from '@/api/types'; |
|
|
} from '@/api/types'; |
|
|
import Draggable from 'vuedraggable'; |
|
|
|
|
|
import { |
|
|
import { |
|
|
getQueueMembers, |
|
|
getQueueMembers, |
|
|
getQueues, |
|
|
getQueues, |
|
|
} from '@/api/composed'; |
|
|
} 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 |
|
|
// eslint-disable-next-line no-undef |
|
|
const emits = defineEmits(['selected', 'created']); |
|
|
const emits = defineEmits(['selected', 'created']); |
|
|
|
|
|
|
|
|
const queueSelection = ref(undefined as number | undefined); |
|
|
const queueSelection = ref(undefined as number | undefined); |
|
|
const queueName = ref(undefined as string | 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 queues = ref([] as Queue[]); |
|
|
const fetchQueues = async () => { |
|
|
const fetchQueues = async () => { |
|
@@ -83,8 +104,25 @@ const createdQueue = () => { |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const populateQueueMembers = async (id: number) => { |
|
|
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) => { |
|
|
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 |
|
|
// TODO: send new order of queued items |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="stylus" scoped> |
|
|
<style lang="stylus" scoped> |
|
|
input::placeholder, textarea::placeholder |
|
|
input::placeholder, textarea::placeholder |
|
|
color #7d7d7d |
|
|
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> |
|
|
</style> |