From c50d05b4b290688f9b9dcfd3dbbb534a526e401f Mon Sep 17 00:00:00 2001 From: Zara Mudassar <zara.1310@hotmail.com> Date: Fri, 6 May 2022 13:47:03 +0200 Subject: [PATCH] added doc and cleaned code --- .../ItemComponents/EditItemForm.vue | 32 ++ src/components/ItemComponents/ItemCard.vue | 3 +- src/components/ItemComponents/NewItemForm.vue | 40 +- .../ItemComponents/SearchItemList.vue | 7 +- src/views/ItemViews/EditItemView.vue | 3 +- src/views/ItemViews/NewItemView.vue | 2 - src/views/ItemViews/SearchItemListView.vue | 3 +- .../__snapshots__/item-card.spec.js.snap | 63 +-- .../__snapshots__/new-item-form.spec.js.snap | 425 +++++++++--------- .../search-item-list.spec.js.snap | 95 ++-- 10 files changed, 375 insertions(+), 298 deletions(-) diff --git a/src/components/ItemComponents/EditItemForm.vue b/src/components/ItemComponents/EditItemForm.vue index 0283428..17f4620 100644 --- a/src/components/ItemComponents/EditItemForm.vue +++ b/src/components/ItemComponents/EditItemForm.vue @@ -1,4 +1,5 @@ <template> + <!-- Form for editing an item --> <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4" > @@ -355,6 +356,10 @@ export default { return true; }, + /** + * Validation gets checked, and if it returns true + * the item and the images gets updated. + */ async saveClicked() { if (this.checkValidation()) { let itemInfo = { @@ -376,6 +381,12 @@ export default { } }, + /** + * Adds image when an image is selected from file explorer. + * Posts it to the db and gets the id of the image posted in return. + * Adds that id to an image URL and saves it in an array. + * That array containing image URLs gets posted to the db when save is clicked. + */ async addImage(event) { var that = this; let image = event.target.files[0]; @@ -390,6 +401,11 @@ export default { fileReader.readAsArrayBuffer(image); }, + /** + * Runs every time a chech box under 'grupper' is changed(checked/unchecked). + * Finds out if it was checked or unchecked and adds/removes the community from + * the array based on that. + */ onChangeCommunity(e) { this.updatedItem.selectedCommunityId = e.target.value; let alreadyInGroupList = false; @@ -417,11 +433,19 @@ export default { } }, + /** + * Updates the selected category when it gets changed changes. + */ onChangeCategory(e) { this.updatedItem.selectedCategory = e.target.value; this.updatedItem.selectedCategories = [e.target.value]; }, + /** + * pre-selects (check marks) the community/communities the item + * is posted in so the user can see where the item already is posted and + * then change the community/communities + */ isInSelectedCommunity(id) { for (let i in this.updatedItem.selectedCommunities) { if (this.updatedItem.selectedCommunities[i] == id) { @@ -430,6 +454,10 @@ export default { } return false; }, + + /** + * Removes image from item + */ async removeImage(image) { let newImages = []; for (let i in this.updatedItem.images) { @@ -441,6 +469,10 @@ export default { }, }, + /** + * Gets the item before the page gets mounted so the item info + * is filled in and ready to be displayed to user. + */ async beforeCreate() { let itemID = await this.$router.currentRoute.value.params.id; let item = await ListingService.getItem(itemID); diff --git a/src/components/ItemComponents/ItemCard.vue b/src/components/ItemComponents/ItemCard.vue index ada6d6f..1544687 100644 --- a/src/components/ItemComponents/ItemCard.vue +++ b/src/components/ItemComponents/ItemCard.vue @@ -1,5 +1,6 @@ <template> - <div class="mt-5 px-3"> + <!-- Item card, displays title, address, price per day and a picture --> + <div class="mt-5 px-5"> <div class="w-full h-full rounded bg-gray-100 ring-1 ring-gray-200 overflow-hidden display:inline-block correct-size cursor-pointer" > diff --git a/src/components/ItemComponents/NewItemForm.vue b/src/components/ItemComponents/NewItemForm.vue index 105c168..c465454 100644 --- a/src/components/ItemComponents/NewItemForm.vue +++ b/src/components/ItemComponents/NewItemForm.vue @@ -1,4 +1,5 @@ <template> + <!-- Form for adding a new item --> <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4" > @@ -58,7 +59,7 @@ </option> </select> - <!-- error message for select box --> + <!-- error message for select category --> <div class="text-error-medium" v-for="(error, index) of v$.item.select.$errors" @@ -70,7 +71,7 @@ </div> </div> - <!-- Grupper --> + <!-- Community --> <div class="mb-6"> <label class="block text-sm font-medium text-gray-900 dark:text-gray-400" >Grupper</label @@ -95,9 +96,9 @@ </ul> </div> <!-- Error message for community --> - <label class="text-error-medium text-sm block">{{ - groupErrorMessage - }}</label> + <label class="text-error-medium text-sm block"> + {{ groupErrorMessage }} + </label> </div> <!-- price --> @@ -198,8 +199,10 @@ accept="image/png" /> + <!-- Opens file explorer --> <colored-button :text="'Velg bilde'" @click="$refs.file.click()" /> + <!-- Shows chosen images --> <div v-for="image in item.images" :key="image" class="m-2"> <form-image-display :image="image" @remove="removeImage(image)" /> </div> @@ -307,7 +310,6 @@ export default { selectedGroupId: -1, selectedGroups: [], }, - //Kategorier skal legges inn ved api/hente fra db, her må det endres etterhvert categories: [ "Antikviteter og kunst", "Dyr og utstyr", @@ -326,6 +328,12 @@ export default { }; }, methods: { + + /** + * Checks validation. Checks also if any community is selected. + * If no community is selected or any other field isn't valid + * false is returned, otherwise true is returned. + */ checkValidation: function () { this.v$.item.$touch(); if (this.v$.item.$invalid || this.item.selectedGroups.length === 0) { @@ -337,6 +345,11 @@ export default { return true; }, + /** + * When save is clicked, the validation gets checked. If validated, + * the user is parsed from the token to get the userId. Then the item + * and the pictures are posted to db. + */ async saveClicked() { if (this.checkValidation()) { this.checkUser(); @@ -358,11 +371,20 @@ export default { } }, + /** + * Parses user from token and uses it when posting item in saveClciked method + */ checkUser: async function () { let user = parseUserFromToken(this.$store.state.user.token); this.item.userId = parseInt(user.accountId); }, + /** + * Adds image when an image is selected from file explorer. + * Posts it to the db and gets the id of the image posted in return. + * Adds that id to an image URL and saves it in an array. + * That array containing image URLs gets posted to the db when save is clicked. + */ addImage: async function (event) { var that = this; let image = event.target.files[0]; @@ -377,6 +399,11 @@ export default { fileReader.readAsArrayBuffer(image); }, + /** + * Runs every time a chech box under 'grupper' is changed(checked/unchecked). + * Finds out if it was checked or unchecked and adds/removes the community from + * the array based on that. + */ onChangeGroup: function (e) { this.selectedGroupId = e.target.value; let alreadyInGroupList = false; @@ -397,6 +424,7 @@ export default { } }, + async removeImage(image) { let newImages = []; for (let i in this.item.images) { diff --git a/src/components/ItemComponents/SearchItemList.vue b/src/components/ItemComponents/SearchItemList.vue index c269744..7ba86f6 100644 --- a/src/components/ItemComponents/SearchItemList.vue +++ b/src/components/ItemComponents/SearchItemList.vue @@ -1,4 +1,5 @@ <template> + <!-- A template for searching in item list --> <section class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md"> <div class="relative" id="searchComponent"> <span class="absolute inset-y-0 left-0 flex items-center pl-3"> @@ -54,12 +55,6 @@ export default { }, }, - /** - * Her må det lages en metode som henter alle items (i en gruppe) fra databasen. - * De kan deretter bli pusha inn i items array, og da burde de bli displayet i lista. - * Når denne metoden er på plass kan items[] i data tømmes. Da vil alt dataen komme fra db. - */ - data() { return { items: [ diff --git a/src/views/ItemViews/EditItemView.vue b/src/views/ItemViews/EditItemView.vue index 763ecda..cdb4f27 100644 --- a/src/views/ItemViews/EditItemView.vue +++ b/src/views/ItemViews/EditItemView.vue @@ -1,6 +1,7 @@ <template> + <!-- A view for editing the item --> <div class="h-screen grid md:mt-8"> - <edit-item-form :initialItem="initialItem" :communities="communities" /> + <edit-item-form/> </div> </template> diff --git a/src/views/ItemViews/NewItemView.vue b/src/views/ItemViews/NewItemView.vue index fc9db36..a6213c5 100644 --- a/src/views/ItemViews/NewItemView.vue +++ b/src/views/ItemViews/NewItemView.vue @@ -14,5 +14,3 @@ export default { }, }; </script> - -<style scoped></style> diff --git a/src/views/ItemViews/SearchItemListView.vue b/src/views/ItemViews/SearchItemListView.vue index 7da50f9..816e04e 100644 --- a/src/views/ItemViews/SearchItemListView.vue +++ b/src/views/ItemViews/SearchItemListView.vue @@ -1,4 +1,5 @@ <template> + <!-- View for search item component --> <SearchItemListComponent></SearchItemListComponent> </template> @@ -11,5 +12,3 @@ export default { }, }; </script> - -<style scoped></style> diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap index cd4d8b5..d77de4b 100644 --- a/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap +++ b/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap @@ -2,42 +2,49 @@ exports[`ItemCard component renders correctly 1`] = ` <div - class="mt-5 px-3" + data-v-app="" > + + <!-- Item card, displays title, address, price per day and a picture --> <div - class="w-full h-full rounded bg-gray-100 ring-1 ring-gray-200 overflow-hidden display:inline-block correct-size cursor-pointer" + class="mt-5 px-5" > <div - class="relative h-0 pb-[66.7%]" + class="w-full h-full rounded bg-gray-100 ring-1 ring-gray-200 overflow-hidden display:inline-block correct-size cursor-pointer" > - <img - alt="Item image" - class="w-full h-full object-contain absolute" - src="String" - /> - </div> - <div - class="p-1 m-1 bottom-0" - > - <p - class="font-bold text-sm" - id="title" - > - String - </p> - <p - class="text-gray-700 text-xs" - id="price" + <div + class="relative h-0 pb-[66.7%]" > - 0 kr - </p> - <p - class="text-gray-700 text-xs font-bold" - id="adress" + <img + alt="Item image" + class="w-full h-full object-contain absolute" + src="String" + /> + </div> + <div + class="p-1 m-1 bottom-0" > - String - </p> + <p + class="font-bold text-sm" + id="title" + > + String + </p> + <p + class="text-gray-700 text-xs" + id="price" + > + 0 kr + </p> + <p + class="text-gray-700 text-xs font-bold" + id="adress" + > + String + </p> + </div> </div> </div> + </div> `; 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 726e3ff..1788f93 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 @@ -2,235 +2,244 @@ exports[`NewItemForm component renders correctly 1`] = ` <div - class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4" + data-v-app="" > - <!-- Component heading --> - <h3 - class="text-xl font-medium text-center text-primary-light mt-4 mb-8" - > - Opprett ny utleie - </h3> - <!-- Title --> - <div - class="mb-6" - > - <label - class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" - id="titleLabel" - > - Tittel - </label> - <input - 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" - id="title" - required="" - type="text" - /> - <!-- error message for title--> - - - </div> - <!-- Select category --> + + <!-- Form for adding a new item --> <div - class="mb-6" + class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4" > - <label - class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" - id="selectCategoryLabel" + <!-- Component heading --> + <h3 + class="text-xl font-medium text-center text-primary-light mt-4 mb-8" > - Kategori - </label> - <select - 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" - id="categories" + Opprett ny utleie + </h3> + <!-- Title --> + <div + class="mb-6" > - <option - class="text-gray-400" - disabled="" - value="" + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" + id="titleLabel" > - Velg en kategori - </option> + Tittel + </label> + <input + 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" + id="title" + required="" + type="text" + /> + <!-- error message for title--> - <option - class="text-gray-900 text-sm" - > - Antikviteter og kunst - </option> - <option - class="text-gray-900 text-sm" - > - Dyr og utstyr - </option> - <option - class="text-gray-900 text-sm" + + </div> + <!-- Select category --> + <div + class="mb-6" + > + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" + id="selectCategoryLabel" > - Elektronikk og hvitevarer - </option> - <option - class="text-gray-900 text-sm" + Kategori + </label> + <select + 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" + id="categories" > - Foreldre og barn - </option> - <option - class="text-gray-900 text-sm" + <option + class="text-gray-400" + disabled="" + value="" + > + Velg en kategori + </option> + + <option + class="text-gray-900 text-sm" + > + Antikviteter og kunst + </option> + <option + class="text-gray-900 text-sm" + > + Dyr og utstyr + </option> + <option + class="text-gray-900 text-sm" + > + Elektronikk og hvitevarer + </option> + <option + class="text-gray-900 text-sm" + > + Foreldre og barn + </option> + <option + class="text-gray-900 text-sm" + > + Fritid, hobby og underholdning + </option> + <option + class="text-gray-900 text-sm" + > + Hage, oppussing og hus + </option> + <option + class="text-gray-900 text-sm" + > + Klær, kosmetikk og tilbehør + </option> + <option + class="text-gray-900 text-sm" + > + Møbler og interiør + </option> + <option + class="text-gray-900 text-sm" + > + Næringsvirksomhet + </option> + <option + class="text-gray-900 text-sm" + > + Sport og friluftsliv + </option> + <option + class="text-gray-900 text-sm" + > + Utstyr til bil, båt og MC + </option> + + </select> + <!-- error message for select category --> + + + </div> + <!-- Community --> + <div + class="mb-6" + > + <label + class="block text-sm font-medium text-gray-900 dark:text-gray-400" > - Fritid, hobby og underholdning - </option> - <option - class="text-gray-900 text-sm" + Grupper + </label> + <div + class="overflow-auto w-full max-h-32 mt-2 text-base list-none bg-white rounded divide-y divide-gray-100 dark:bg-gray-700" > - Hage, oppussing og hus - </option> - <option - class="text-gray-900 text-sm" + <ul + aria-labelledby="dropdownDefault" + class="py-1" + > + <li> + + + </li> + </ul> + </div> + <!-- Error message for community --> + <label + class="text-error-medium text-sm block" + /> + </div> + <!-- price --> + <div + class="mb-6 mt-4" + > + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" + id="priceLabel" > - Klær, kosmetikk og tilbehør - </option> - <option - class="text-gray-900 text-sm" + Pris per dag + </label> + <input + 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" + id="price" + required="" + type="number" + /> + <!-- error message for price --> + + + </div> + <!-- Description --> + <div + class="mb-6" + > + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" + id="descriptionLabel" > - Møbler og interiør - </option> - <option - class="text-gray-900 text-sm" + Beskrivelse + </label> + <textarea + 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" + id="description" + required="" + rows="4" + /> + <!-- error message for description --> + + + </div> + <!-- Address --> + <div + class="mb-6" + > + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" + id="addressLabel" > - Næringsvirksomhet - </option> - <option - class="text-gray-900 text-sm" + Adresse + </label> + <input + 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" + id="adress" + required="" + type="text" + /> + <!-- error message for address--> + + + </div> + <!-- Images --> + <div> + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" + id="imageLabel" > - Sport og friluftsliv - </option> - <option - class="text-gray-900 text-sm" + Bilder (bildene må være .png) + </label> + <input + accept="image/png" + style="display: none;" + type="file" + /> + <!-- Opens file explorer --> + <button + class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light" > - Utstyr til bil, båt og MC - </option> + Velg bilde + </button> + <!-- Shows chosen images --> - </select> - <!-- error message for select box --> - - - </div> - <!-- Grupper --> - <div - class="mb-6" - > - <label - class="block text-sm font-medium text-gray-900 dark:text-gray-400" - > - Grupper - </label> + + </div> + <!-- Save item button --> <div - class="overflow-auto w-full max-h-32 mt-2 text-base list-none bg-white rounded divide-y divide-gray-100 dark:bg-gray-700" + class="float-right" > - <ul - aria-labelledby="dropdownDefault" - class="py-1" + <button + class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light" + id="saveButton" > - <li> - - - </li> - </ul> + Lagre + </button> </div> - <!-- Error message for community --> - <label - class="text-error-medium text-sm block" - /> - </div> - <!-- price --> - <div - class="mb-6 mt-4" - > - <label - class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" - id="priceLabel" - > - Pris per dag - </label> - <input - 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" - id="price" - required="" - type="number" - /> - <!-- error message for price --> - - - </div> - <!-- Description --> - <div - class="mb-6" - > - <label - class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" - id="descriptionLabel" - > - Beskrivelse - </label> - <textarea - 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" - id="description" - required="" - rows="4" - /> - <!-- error message for description --> - - - </div> - <!-- Address --> - <div - class="mb-6" - > - <label - class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" - id="addressLabel" - > - Adresse - </label> - <input - 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" - id="adress" - required="" - type="text" - /> - <!-- error message for address--> - - - </div> - <!-- Images --> - <div> - <label - class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" - id="imageLabel" - > - Bilder (bildene må være .png) - </label> - <input - accept="image/png" - style="display: none;" - type="file" - /> - <button - class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light" - > - Velg bilde - </button> - - - </div> - <!-- Save item button --> - <div - class="float-right" - > - <button - class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light" - id="saveButton" - > - Lagre - </button> </div> + </div> `; diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/search-item-list.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/search-item-list.spec.js.snap index bc72db6..9ccc19c 100644 --- a/tests/unit/component-tests/community-component-tests/__snapshots__/search-item-list.spec.js.snap +++ b/tests/unit/component-tests/community-component-tests/__snapshots__/search-item-list.spec.js.snap @@ -1,55 +1,62 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SearchItemListComponent elements rendering renders correctly 1`] = ` -<section - class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md" +<div + data-v-app="" > - <div - class="relative" - id="searchComponent" + + <!-- A template for searching in item list --> + <section + class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md" > - <span - class="absolute inset-y-0 left-0 flex items-center pl-3" + <div + class="relative" + id="searchComponent" > - <svg - class="w-5 h-5 text-gray-400" - fill="none" - viewBox="0 0 24 24" + <span + class="absolute inset-y-0 left-0 flex items-center pl-3" > - <path - d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - /> - </svg> - </span> - <input - class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring" - id="searchInput" - placeholder="Søk" - type="text" - /> - </div> - <div - class="absolute inset-x-0 px-6 py-3 mt-4 border-2 border-slate-500" - > + <svg + class="w-5 h-5 text-gray-400" + fill="none" + viewBox="0 0 24 24" + > + <path + d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" + stroke="currentColor" + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2" + /> + </svg> + </span> + <input + class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring" + id="searchInput" + placeholder="Søk" + type="text" + /> + </div> <div - class="grid grid-cols-2" + class="absolute inset-x-0 px-6 py-3 mt-4 border-2 border-slate-500" > - - <item-card-stub - item="[object Object]" - /> - <item-card-stub - item="[object Object]" - /> - <item-card-stub - item="[object Object]" - /> - + <div + class="grid grid-cols-2" + > + + <item-card-stub + item="[object Object]" + /> + <item-card-stub + item="[object Object]" + /> + <item-card-stub + item="[object Object]" + /> + + </div> </div> - </div> -</section> + </section> + +</div> `; -- GitLab