Skip to content
Snippets Groups Projects
Commit c50d05b4 authored by Zara Mudassar's avatar Zara Mudassar
Browse files

added doc and cleaned code

parent 8937057f
No related branches found
No related tags found
1 merge request!153doc-item-components-views
Pipeline #182260 passed
Stage: test
Hide whitespace changes
Inline Side-by-side
Showing
with 375 additions and 298 deletions
src/components/ItemComponents/EditItemForm.vue
+ 32
− 0
View file @ c50d05b4
<template> <template>
<!-- Form for editing an item -->
<div <div
class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4" 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 { ...@@ -355,6 +356,10 @@ export default {
return true; return true;
}, },
/**
* Validation gets checked, and if it returns true
* the item and the images gets updated.
*/
async saveClicked() { async saveClicked() {
if (this.checkValidation()) { if (this.checkValidation()) {
let itemInfo = { let itemInfo = {
...@@ -376,6 +381,12 @@ export default { ...@@ -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) { async addImage(event) {
var that = this; var that = this;
let image = event.target.files[0]; let image = event.target.files[0];
...@@ -390,6 +401,11 @@ export default { ...@@ -390,6 +401,11 @@ export default {
fileReader.readAsArrayBuffer(image); 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) { onChangeCommunity(e) {
this.updatedItem.selectedCommunityId = e.target.value; this.updatedItem.selectedCommunityId = e.target.value;
let alreadyInGroupList = false; let alreadyInGroupList = false;
...@@ -417,11 +433,19 @@ export default { ...@@ -417,11 +433,19 @@ export default {
} }
}, },
/**
* Updates the selected category when it gets changed changes.
*/
onChangeCategory(e) { onChangeCategory(e) {
this.updatedItem.selectedCategory = e.target.value; this.updatedItem.selectedCategory = e.target.value;
this.updatedItem.selectedCategories = [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) { isInSelectedCommunity(id) {
for (let i in this.updatedItem.selectedCommunities) { for (let i in this.updatedItem.selectedCommunities) {
if (this.updatedItem.selectedCommunities[i] == id) { if (this.updatedItem.selectedCommunities[i] == id) {
...@@ -430,6 +454,10 @@ export default { ...@@ -430,6 +454,10 @@ export default {
} }
return false; return false;
}, },
/**
* Removes image from item
*/
async removeImage(image) { async removeImage(image) {
let newImages = []; let newImages = [];
for (let i in this.updatedItem.images) { for (let i in this.updatedItem.images) {
...@@ -441,6 +469,10 @@ export default { ...@@ -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() { async beforeCreate() {
let itemID = await this.$router.currentRoute.value.params.id; let itemID = await this.$router.currentRoute.value.params.id;
let item = await ListingService.getItem(itemID); let item = await ListingService.getItem(itemID);
......
src/components/ItemComponents/ItemCard.vue
+ 2
− 1
View file @ c50d05b4
<template> <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 <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="w-full h-full rounded bg-gray-100 ring-1 ring-gray-200 overflow-hidden display:inline-block correct-size cursor-pointer"
> >
......
src/components/ItemComponents/NewItemForm.vue
+ 34
− 6
View file @ c50d05b4
<template> <template>
<!-- Form for adding a new item -->
<div <div
class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4" 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 @@ ...@@ -58,7 +59,7 @@
</option> </option>
</select> </select>
<!-- error message for select box --> <!-- error message for select category -->
<div <div
class="text-error-medium" class="text-error-medium"
v-for="(error, index) of v$.item.select.$errors" v-for="(error, index) of v$.item.select.$errors"
...@@ -70,7 +71,7 @@ ...@@ -70,7 +71,7 @@
</div> </div>
</div> </div>
<!-- Grupper --> <!-- Community -->
<div class="mb-6"> <div class="mb-6">
<label class="block text-sm font-medium text-gray-900 dark:text-gray-400" <label class="block text-sm font-medium text-gray-900 dark:text-gray-400"
>Grupper</label >Grupper</label
...@@ -95,9 +96,9 @@ ...@@ -95,9 +96,9 @@
</ul> </ul>
</div> </div>
<!-- Error message for community --> <!-- Error message for community -->
<label class="text-error-medium text-sm block">{{ <label class="text-error-medium text-sm block">
groupErrorMessage {{ groupErrorMessage }}
}}</label> </label>
</div> </div>
<!-- price --> <!-- price -->
...@@ -198,8 +199,10 @@ ...@@ -198,8 +199,10 @@
accept="image/png" accept="image/png"
/> />
<!-- Opens file explorer -->
<colored-button :text="'Velg bilde'" @click="$refs.file.click()" /> <colored-button :text="'Velg bilde'" @click="$refs.file.click()" />
<!-- Shows chosen images -->
<div v-for="image in item.images" :key="image" class="m-2"> <div v-for="image in item.images" :key="image" class="m-2">
<form-image-display :image="image" @remove="removeImage(image)" /> <form-image-display :image="image" @remove="removeImage(image)" />
</div> </div>
...@@ -307,7 +310,6 @@ export default { ...@@ -307,7 +310,6 @@ export default {
selectedGroupId: -1, selectedGroupId: -1,
selectedGroups: [], selectedGroups: [],
}, },
//Kategorier skal legges inn ved api/hente fra db, her må det endres etterhvert
categories: [ categories: [
"Antikviteter og kunst", "Antikviteter og kunst",
"Dyr og utstyr", "Dyr og utstyr",
...@@ -326,6 +328,12 @@ export default { ...@@ -326,6 +328,12 @@ export default {
}; };
}, },
methods: { 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 () { checkValidation: function () {
this.v$.item.$touch(); this.v$.item.$touch();
if (this.v$.item.$invalid || this.item.selectedGroups.length === 0) { if (this.v$.item.$invalid || this.item.selectedGroups.length === 0) {
...@@ -337,6 +345,11 @@ export default { ...@@ -337,6 +345,11 @@ export default {
return true; 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() { async saveClicked() {
if (this.checkValidation()) { if (this.checkValidation()) {
this.checkUser(); this.checkUser();
...@@ -358,11 +371,20 @@ export default { ...@@ -358,11 +371,20 @@ export default {
} }
}, },
/**
* Parses user from token and uses it when posting item in saveClciked method
*/
checkUser: async function () { checkUser: async function () {
let user = parseUserFromToken(this.$store.state.user.token); let user = parseUserFromToken(this.$store.state.user.token);
this.item.userId = parseInt(user.accountId); 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) { addImage: async function (event) {
var that = this; var that = this;
let image = event.target.files[0]; let image = event.target.files[0];
...@@ -377,6 +399,11 @@ export default { ...@@ -377,6 +399,11 @@ export default {
fileReader.readAsArrayBuffer(image); 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) { onChangeGroup: function (e) {
this.selectedGroupId = e.target.value; this.selectedGroupId = e.target.value;
let alreadyInGroupList = false; let alreadyInGroupList = false;
...@@ -397,6 +424,7 @@ export default { ...@@ -397,6 +424,7 @@ export default {
} }
}, },
async removeImage(image) { async removeImage(image) {
let newImages = []; let newImages = [];
for (let i in this.item.images) { for (let i in this.item.images) {
......
src/components/ItemComponents/SearchItemList.vue
+ 1
− 6
View file @ c50d05b4
<template> <template>
<!-- A template for searching in item list -->
<section class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md"> <section class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md">
<div class="relative" id="searchComponent"> <div class="relative" id="searchComponent">
<span class="absolute inset-y-0 left-0 flex items-center pl-3"> <span class="absolute inset-y-0 left-0 flex items-center pl-3">
...@@ -54,12 +55,6 @@ export default { ...@@ -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() { data() {
return { return {
items: [ items: [
......
src/views/ItemViews/EditItemView.vue
+ 2
− 1
View file @ c50d05b4
<template> <template>
<!-- A view for editing the item -->
<div class="h-screen grid md:mt-8"> <div class="h-screen grid md:mt-8">
<edit-item-form :initialItem="initialItem" :communities="communities" /> <edit-item-form/>
</div> </div>
</template> </template>
......
src/views/ItemViews/NewItemView.vue
+ 0
− 2
View file @ c50d05b4
...@@ -14,5 +14,3 @@ export default { ...@@ -14,5 +14,3 @@ export default {
}, },
}; };
</script> </script>
<style scoped></style>
src/views/ItemViews/SearchItemListView.vue
+ 1
− 2
View file @ c50d05b4
<template> <template>
<!-- View for search item component -->
<SearchItemListComponent></SearchItemListComponent> <SearchItemListComponent></SearchItemListComponent>
</template> </template>
...@@ -11,5 +12,3 @@ export default { ...@@ -11,5 +12,3 @@ export default {
}, },
}; };
</script> </script>
<style scoped></style>
tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap
+ 35
− 28
View file @ c50d05b4
...@@ -2,42 +2,49 @@ ...@@ -2,42 +2,49 @@
exports[`ItemCard component renders correctly 1`] = ` exports[`ItemCard component renders correctly 1`] = `
<div <div
class="mt-5 px-3" data-v-app=""
> >
<!-- Item card, displays title, address, price per day and a picture -->
<div <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 <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 <div
alt="Item image" class="relative h-0 pb-[66.7%]"
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"
> >
0 kr <img
</p> alt="Item image"
<p class="w-full h-full object-contain absolute"
class="text-gray-700 text-xs font-bold" src="String"
id="adress" />
</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> </div>
</div> </div>
`; `;
tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
+ 217
− 208
View file @ c50d05b4
...@@ -2,235 +2,244 @@ ...@@ -2,235 +2,244 @@
exports[`NewItemForm component renders correctly 1`] = ` exports[`NewItemForm component renders correctly 1`] = `
<div <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 <!-- Form for adding a new item -->
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 -->
<div <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 <!-- Component heading -->
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" <h3
id="selectCategoryLabel" class="text-xl font-medium text-center text-primary-light mt-4 mb-8"
> >
Kategori Opprett ny utleie
</label> </h3>
<select <!-- Title -->
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" <div
id="categories" class="mb-6"
> >
<option <label
class="text-gray-400" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
disabled="" id="titleLabel"
value=""
> >
Velg en kategori Tittel
</option> </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" </div>
> <!-- Select category -->
Antikviteter og kunst <div
</option> class="mb-6"
<option >
class="text-gray-900 text-sm" <label
> class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
Dyr og utstyr id="selectCategoryLabel"
</option>
<option
class="text-gray-900 text-sm"
> >
Elektronikk og hvitevarer Kategori
</option> </label>
<option <select
class="text-gray-900 text-sm" 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-400"
<option disabled=""
class="text-gray-900 text-sm" 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 Grupper
</option> </label>
<option <div
class="text-gray-900 text-sm" 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 <ul
</option> aria-labelledby="dropdownDefault"
<option class="py-1"
class="text-gray-900 text-sm" >
<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 Pris per dag
</option> </label>
<option <input
class="text-gray-900 text-sm" 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 Beskrivelse
</option> </label>
<option <textarea
class="text-gray-900 text-sm" 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 Adresse
</option> </label>
<option <input
class="text-gray-900 text-sm" 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 Bilder (bildene må være .png)
</option> </label>
<option <input
class="text-gray-900 text-sm" 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 Velg bilde
</option> </button>
<!-- Shows chosen images -->
</select>
<!-- error message for select box --> </div>
<!-- Save item button -->
</div>
<!-- Grupper -->
<div
class="mb-6"
>
<label
class="block text-sm font-medium text-gray-900 dark:text-gray-400"
>
Grupper
</label>
<div <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 <button
aria-labelledby="dropdownDefault" 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"
class="py-1" id="saveButton"
> >
<li> Lagre
</button>
</li>
</ul>
</div> </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>
</div> </div>
`; `;
tests/unit/component-tests/community-component-tests/__snapshots__/search-item-list.spec.js.snap
+ 51
− 44
View file @ c50d05b4
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SearchItemListComponent elements rendering renders correctly 1`] = ` exports[`SearchItemListComponent elements rendering renders correctly 1`] = `
<section <div
class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md" data-v-app=""
> >
<div
class="relative" <!-- A template for searching in item list -->
id="searchComponent" <section
class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md"
> >
<span <div
class="absolute inset-y-0 left-0 flex items-center pl-3" class="relative"
id="searchComponent"
> >
<svg <span
class="w-5 h-5 text-gray-400" class="absolute inset-y-0 left-0 flex items-center pl-3"
fill="none"
viewBox="0 0 24 24"
> >
<path <svg
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" class="w-5 h-5 text-gray-400"
stroke="currentColor" fill="none"
stroke-linecap="round" viewBox="0 0 24 24"
stroke-linejoin="round" >
stroke-width="2" <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"
</svg> stroke="currentColor"
</span> stroke-linecap="round"
<input stroke-linejoin="round"
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" stroke-width="2"
id="searchInput" />
placeholder="Søk" </svg>
type="text" </span>
/> <input
</div> 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"
<div id="searchInput"
class="absolute inset-x-0 px-6 py-3 mt-4 border-2 border-slate-500" placeholder="Søk"
> type="text"
/>
</div>
<div <div
class="grid grid-cols-2" class="absolute inset-x-0 px-6 py-3 mt-4 border-2 border-slate-500"
> >
<div
<item-card-stub class="grid grid-cols-2"
item="[object Object]" >
/>
<item-card-stub <item-card-stub
item="[object Object]" item="[object Object]"
/> />
<item-card-stub <item-card-stub
item="[object Object]" item="[object Object]"
/> />
<item-card-stub
item="[object Object]"
/>
</div>
</div> </div>
</div> </section>
</section>
</div>
`; `;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment