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"