From b7cc50e94e4916847a5f9b33fe93c8823f6a5d50 Mon Sep 17 00:00:00 2001
From: Rory Baart <rbaart@gmail.com>
Date: Sat, 13 Apr 2024 16:13:19 +0200
Subject: [PATCH] Add ListboxInput component for selecting multiple options and
 use it for barbuddies

---
 .../pages/barbuddy/BarbuddyForm.vue           | 22 ++++++------
 .../components/elements/form/ListboxInput.vue | 35 +++++++++++++++++++
 2 files changed, 45 insertions(+), 12 deletions(-)
 create mode 100644 shared/components/elements/form/ListboxInput.vue

diff --git a/outsite.nl/components/pages/barbuddy/BarbuddyForm.vue b/outsite.nl/components/pages/barbuddy/BarbuddyForm.vue
index 1e65e88d..904641c3 100644
--- a/outsite.nl/components/pages/barbuddy/BarbuddyForm.vue
+++ b/outsite.nl/components/pages/barbuddy/BarbuddyForm.vue
@@ -1,8 +1,8 @@
 <i18n lang="yaml">
 en:
-  success: The bar buddy you selected will contact you as soon as possible.
+  success: A bar buddy you selected will contact you as soon as possible.
 nl:
-  success: Je barbuddy neemt zo snel mogelijk contact met je op.
+  success: Een barbuddy neemt zo snel mogelijk contact met je op.
 </i18n>
 
 <script setup>
@@ -12,19 +12,23 @@ const props = defineProps({
   barBuddies: { type: Array, required: true },
 })
 
-const form = useReMemberForm('barbuddy', {
+const form = useReMemberForm('barbuddy2', {
   name: '',
   age: '',
   language: locale.value === 'nl' ? 'dutch' : 'english',
   email: '',
   phone_number: '',
   pronouns: '',
-  barbuddy: 'no_preference',
+  buddy_preferences: 'no_preference',
+  buddies: [],
   remarks: '',
 })
 
 const formElement = ref(null)
 const submit = async () => {
+  if (form.fields.buddies.length > 0) {
+    form.fields.buddy_preferences = form.fields.buddies.join(', ')
+  }
   await form.submit()
   window.scrollTo({ top: formElement.value.offsetTop, behavior: 'smooth' })
 }
@@ -61,7 +65,7 @@ const barBuddyOptions = Object.fromEntries(props.barBuddies.map((buddy) => [budd
           dutch: $t('forms.label.languages.dutch'),
           english: $t('forms.label.languages.english'),
           no_preference: $t('forms.label.languages.no_preference'),
-        }"
+         }"
       />
     </ElementsFormElement>
 
@@ -70,13 +74,7 @@ const barBuddyOptions = Object.fromEntries(props.barBuddies.map((buddy) => [budd
     </ElementsFormElement>
 
     <ElementsFormElement name="barbuddy" :errors="form.validationErrors">
-      <ElementsFormRadioInput
-        v-model="form.fields.barbuddy"
-        :options="{
-          no_preference: $t('forms.label.languages.no_preference'),
-          ...barBuddyOptions,
-        }"
-      />
+      <ElementsFormListboxInput v-model="form.fields.buddies" :options="barBuddyOptions" />
     </ElementsFormElement>
 
     <ElementsFormElement name="remarks" :errors="form.validationErrors">
diff --git a/shared/components/elements/form/ListboxInput.vue b/shared/components/elements/form/ListboxInput.vue
new file mode 100644
index 00000000..36b75762
--- /dev/null
+++ b/shared/components/elements/form/ListboxInput.vue
@@ -0,0 +1,35 @@
+<script setup>
+import { ref } from 'vue'
+import {
+  Listbox,
+  ListboxLabel,
+  ListboxButton,
+  ListboxOptions,
+  ListboxOption,
+} from '@headlessui/vue'
+import { IconCheckmark } from '@iconify-prerendered/vue-zondicons'
+
+
+defineProps({
+  options: { type: Object, required: false },
+})
+const model = defineModel()
+</script>
+
+<template>
+  <Listbox v-model="model" multiple>
+    <div class="flex flex-wrap space-x-2">
+      <ListboxOption v-slot="{ selected }" v-for="[value, description] in Object.entries(options)" :key="value"
+        :value="value" as="template">
+        <button type="button" class="rounded-lg px-4 py-3 flex items-center transition-colors my-1"
+          :class="selected ? 'bg-gray-800 text-white' : 'bg-white text-gray-800 hover:bg-gray-300'">
+          {{ description }}
+          <div v-if="selected"
+            class="ml-2 w-5 h-5 rounded-full bg-white text-gray-800 flex items-center justify-center">
+            <IconCheckmark class="w-2 h-2" />
+          </div>
+        </button>
+      </ListboxOption>
+    </div>
+  </Listbox>
+</template>