diff --git a/src/components/ItemComponents/NewItemForm.vue b/src/components/ItemComponents/NewItemForm.vue index 4ad15c10637fb350bed8e279e114e265c5c44cfa..75f575f59e9035b5ce75ffd6eb11f3a0ed77870d 100644 --- a/src/components/ItemComponents/NewItemForm.vue +++ b/src/components/ItemComponents/NewItemForm.vue @@ -66,28 +66,32 @@ </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" - >Grupper</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