diff --git a/src/components/ItemComponents/NewItemForm.vue b/src/components/ItemComponents/NewItemForm.vue
index 8f332cf983dca3f7f3e332ff83d71b0257b33631..aa969c15b3ec82ba9d90b67e9bcb4c38a607397f 100644
--- a/src/components/ItemComponents/NewItemForm.vue
+++ b/src/components/ItemComponents/NewItemForm.vue
@@ -66,43 +66,58 @@
</div>
</div>
- <!-- Select Group -->
<div class="mb-6">
<label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
- id="selectCommunityLabel"
- >Gruppe</label
- >
- <select
- v-model="v$.item.selectGroup.$model"
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+ class="block text-sm font-medium text-gray-900 dark:text-gray-400"
+ >Grupper</label>
+ <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" value="" disabled selected>
- Velg en gruppe
- </option>
- <option
- v-for="group in groups"
- :key="group"
- class="text-gray-900 text-sm"
- >
- {{ group }}
- </option>
- </select>
+ <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-primary-medium checked:bg-primary-medium 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-error text-sm block">{{ groupErrorMessage }}</label>
+ </div>
<!-- error message for select box -->
<div
- class="text-error"
- 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-error 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-primary-medium checked:bg-primary-medium 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>
- </div>
+ <label class="text-error text-sm block">{{ groupErrorMessage }}</label>
<!-- 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"
@@ -217,7 +232,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 Button from "@/components/BaseComponents/ColoredButton";
import {
@@ -276,9 +291,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",
@@ -305,11 +317,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: {
@@ -317,7 +331,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;
}
@@ -340,7 +357,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,
@@ -349,7 +366,7 @@ export default {
address: this.item.address,
userID: this.item.userId,
categoryNames: [],
- communityIDs: [this.item.selectGroup],
+ communityIDs: this.item.selectedGroups,
};
console.log(itemInfo);
@@ -357,20 +374,49 @@ 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;
+ console.log("selected clicked");
+
+ 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>