From 6335b412b307029ce1f57a47b507a6dbdf953183 Mon Sep 17 00:00:00 2001 From: Zara Mudassar <zara.1310@hotmail.com> Date: Wed, 27 Apr 2022 11:29:45 +0200 Subject: [PATCH] group selection added --- src/components/AddNewItem.vue | 43 ++++++++++++++++++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/src/components/AddNewItem.vue b/src/components/AddNewItem.vue index 8aab81e..5da81d2 100644 --- a/src/components/AddNewItem.vue +++ b/src/components/AddNewItem.vue @@ -68,6 +68,41 @@ </div> </div> + + <!-- Select Group --> + <div class="mb-6"> + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" + >Gruppe</label + > + <select + v-model="v$.item.selectGroup.$model" + class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" + > + <option class="text-gray-400" value="" disabled selected> + Select a Group + </option> + <option + v-for="group in groups" + :key="group" + class="text-gray-900 text-sm" + > + {{ group }} + </option> + </select> + + <!-- error message for select box --> + <div + class="text-red" + v-for="(error, index) of v$.item.selectGroup.$errors" + :key="index" + > + <div class="text-red-600 text-sm"> + {{ error.$message }} + </div> + </div> + </div> + <!-- price --> <div class="mb-6" :class="{ error: v$.item.price.$errors.length }"> <label @@ -251,6 +286,9 @@ export default { select: { required: helpers.withMessage(() => `Velg en kategori`, required), }, + selectGroup: { + required: helpers.withMessage(() => `Velg en gruppe`, required), + }, address: { required: helpers.withMessage( () => "Addressen kan ikke være tom", @@ -277,9 +315,11 @@ export default { type: "", images: [], userId: -1, + selectGroup: null, }, //Kategorier skal legges inn ved api/hente fra db, her må det endres etterhvert categories: ["Hage", "Kjøkken", "Musikk", "Annet"], + groups: [4040, 4041], }; }, methods: { @@ -310,6 +350,7 @@ export default { console.log("Addressen: " + this.item.address); console.log("Pris: " + this.item.price); console.log("bilder: " + this.item.images); + console.log("gruppe: " + this.item.selectGroup); const itemInfo = { title: this.item.title, @@ -318,7 +359,7 @@ export default { address: this.item.address, userID: this.item.userId, categoryNames: [], - communityIDs: [], + communityIDs: [this.item.selectGroup], }; console.log(itemInfo); -- GitLab