diff --git a/src/components/CommunityComponents/NewItemForm.vue b/src/components/CommunityComponents/NewItemForm.vue index 9324b2bb76cfe0df33fde7a0cad06bd202470708..9012fdccddf250cb3ed592cba2a445f2e3205333 100644 --- a/src/components/CommunityComponents/NewItemForm.vue +++ b/src/components/CommunityComponents/NewItemForm.vue @@ -71,39 +71,34 @@ <!-- 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 --> + class="block text-sm font-medium text-gray-900 dark:text-gray-400" + >Grupper</label> <div - class="text-red" - v-for="(error, index) of v$.item.selectGroup.$errors" - :key="index" + class="overflow-auto w-full h-32 mt-2 text-base list-none bg-white rounded divide-y divide-gray-100 dark:bg-gray-700" > - <div class="text-red-600 text-sm"> - {{ error.$message }} - </div> + <ul class="py-1" aria-labelledby="dropdownDefault"> + <li> + <div class="form-check" v-for="group in groups" :key="group"> + <input + + class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" + type="checkbox" + :value="group.communityId" + @change="onChangeGroup($event)" + > + <label class="form-check-label inline-block text-gray-800"> + {{ group.name }} + </label> + </div> + </li> + </ul> </div> + <label class="text-red-600 text-sm block">{{ groupErrorMessage }}</label> </div> + <!-- price --> - <div class="mb-6" :class="{ error: v$.item.price.$errors.length }"> + <div class="mb-6 mt-4" :class="{ error: v$.item.price.$errors.length }"> <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" id="priceLabel" @@ -228,7 +223,7 @@ <script> import useVuelidate from "@vuelidate/core"; import { parseUserFromToken } from "@/utils/token-utils"; -import { postNewItem } from "@/utils/apiutil"; +import { postNewItem, getMyGroups } from "@/utils/apiutil"; import { required, @@ -282,9 +277,6 @@ 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", @@ -311,11 +303,13 @@ export default { type: "", images: [], userId: -1, - selectGroup: null, + selectedGroupId: -1, + selectedGroups: [], }, //Kategorier skal legges inn ved api/hente fra db, her må det endres etterhvert categories: ["Hage", "Kjøkken", "Musikk", "Annet"], - groups: [4040, 4041], + groups: [], + groupErrorMessage: '', }; }, methods: { @@ -323,7 +317,10 @@ export default { console.log("sjekker validering"); this.v$.item.$touch(); - if (this.v$.item.$invalid) { + if (this.v$.item.$invalid || this.item.selectedGroups.length === 0) { + if(this.item.selectedGroups.length === 0){ + this.groupErrorMessage = "Velg gruppe/grupper"; + } console.log("Invalid, avslutter..."); return false; } @@ -346,7 +343,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); + console.log("gruppe: " + this.item.selectedGroups); const itemInfo = { title: this.item.title, @@ -355,7 +352,7 @@ export default { address: this.item.address, userID: this.item.userId, categoryNames: [], - communityIDs: [this.item.selectGroup], + communityIDs: this.item.selectedGroups, }; console.log(itemInfo); @@ -363,20 +360,48 @@ export default { const postRequest = await postNewItem(itemInfo); console.log("posted: " + postRequest); + + this.$router.push('/'); } }, checkUser: async function () { let user = parseUserFromToken(this.$store.state.user.token); this.item.userId = parseInt(user.accountId); - console.log("id: " + this.item.userId); }, addImage: function (event) { console.log(event.target.files); this.item.images.push(URL.createObjectURL(event.target.files[0])); - console.log("antall bilder: " + this.item.images.length); + }, + + getGroups: async function(){ + this.groups = await getMyGroups(); + }, + + onChangeGroup: function(e){ + this.selectedGroupId = e.target.value; + let alreadyInGroupList = false; + + for (let i = 0; i <= this.item.selectedGroups.length; i++) { + if (this.selectedGroupId == this.item.selectedGroups[i]) { + const index = this.item.selectedGroups.indexOf(this.selectedGroupId); + if (index > -1) { + this.item.selectedGroups.splice(index, 1); + } + alreadyInGroupList = true; + } + } + + if(!alreadyInGroupList){ + this.item.selectedGroups.push(this.selectedGroupId); + this.groupErrorMessage = ""; + } + }, }, + beforeMount() { + this.getGroups(); + } }; </script> diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap index a975fa560f988edeb59aee0a62e951b18b9192e2..9481b244b29873fb25e396f3f757ef1fc1f2b1e5 100644 --- a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap +++ b/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap @@ -87,40 +87,30 @@ exports[`NewItemForm component renders correctly 1`] = ` class="mb-6" > <label - class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" + class="block text-sm font-medium text-gray-900 dark:text-gray-400" > - Gruppe + Grupper </label> - <select - 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" + <div + class="overflow-auto w-full h-32 mt-2 text-base list-none bg-white rounded divide-y divide-gray-100 dark:bg-gray-700" > - <option - class="text-gray-400" - disabled="" - value="" + <ul + aria-labelledby="dropdownDefault" + class="py-1" > - Select a Group - </option> - - <option - class="text-gray-900 text-sm" - > - 4040 - </option> - <option - class="text-gray-900 text-sm" - > - 4041 - </option> - - </select> - <!-- error message for select box --> - - + <li> + + + </li> + </ul> + </div> + <label + class="text-red-600 text-sm block" + /> </div> <!-- price --> <div - class="mb-6" + class="mb-6 mt-4" > <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"