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

Add new item converted from vuetify to tailwind

parent 0cf2c5d1
No related branches found
No related tags found
2 merge requests!19Item card,!17Item card
Pipeline #175497 failed
Stage: build
Stage: test
Stage: deploy
Hide whitespace changes
Inline Side-by-side
src/components/AddNewItem.vue
+ 217
− 106
View file @ 54261665
<template> <template>
<v-form ref="form" v-model="valid" lazy-validation> <div class="m-6">
<v-col align="center" justify="space-around"> <!-- Component heading -->
<p class="text-h5 ma-5">Utleie</p> <div class="flex justify-center">
</v-col> <p class="text-4xl mb-6 mt-6">Utleie</p>
</div>
<v-container fluid>
<p>Leie</p> <!-- Title -->
<v-radio-group <div class="mb-6" :class="{ error: v$.item.title.$errors.length }">
v-model="radios" <label
:rules="[(v) => !!v || 'Velg en utleietype']" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
required >Tittel</label
> >
<v-radio label="Dags" value="rentForDays" v-model="radios"></v-radio> <input
<v-radio label="Time" value="rentForHours" v-model="radios"></v-radio> type="text"
<v-radio label="Begge" value="rentBothTypes" v-model="radios"></v-radio> id="title"
</v-radio-group> 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"
v-model="v$.item.title.$model"
<v-text-field
v-model="item.title"
:rules="titleRules"
label="Overskrift"
required required
></v-text-field> />
<v-select <!-- error message for title-->
v-model="select" <div
:items="items" class="text-red"
label="Category" v-for="(error, index) of v$.item.title.$errors"
:rules="[(v) => !!v || 'Kategori må velges']" :key="index"
required >
></v-select> <div class="text-red-600 text-sm">
{{ error.$message }}
<v-textarea </div>
v-model="item.description" </div>
:rules="descriptionRules" </div>
label="Beskrivelse"
></v-textarea> <!-- Select category -->
<div class="mb-6">
<v-text-field <label
v-model="item.price" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
:rules="priceRules" >Kategori</label
label="Pris" >
<select
v-model="v$.item.select.$model"
id="categories"
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 category
</option>
<option
v-for="category in categories"
:key="category"
class="text-gray-900 text-sm"
>
{{ category }}
</option>
</select>
<!-- error message for select box -->
<div
class="text-red"
v-for="(error, index) of v$.item.select.$errors"
:key="index"
>
<div class="text-red-600 text-sm">
{{ error.$message }}
</div>
</div>
</div>
<!-- price -->
<div class="mb-6" :class="{ error: v$.item.price.$errors.length }">
<label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>Pris</label
>
<input
type="number" type="number"
v-model="v$.item.price.$model"
id="price"
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"
required
/>
<!-- error message for price -->
<div
class="text-red"
v-for="(error, index) of v$.item.price.$errors"
:key="index"
>
<div class="text-red-600 text-sm">
{{ error.$message }}
</div>
</div>
</div>
<!-- Description -->
<div class="mb-6" :class="{ error: v$.item.description.$errors.length }">
<label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
>Beskrivelse</label
>
<textarea
id="description"
rows="4"
v-model="v$.item.description.$model"
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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"
required required
></v-text-field> ></textarea>
<v-col class="mb-5"> <!-- error message for description -->
<p>Bilder</p> <div
</v-col> class="text-red"
v-for="(error, index) of v$.item.description.$errors"
:key="index"
>
<div class="text-red-600 text-sm">
{{ error.$message }}
</div>
</div>
</div>
<!-- Images -->
<div>
<label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
>
Bilder
</label>
<input <input
type="file" type="file"
ref="file" ref="file"
style="display: none" style="display: none"
@change="previewFiles" @change="addImage"
multiple multiple
accept="image/png, image/jpeg"
/> />
<v-btn @click="$refs.file.click()">Nytt bilde</v-btn> <button
@click="$refs.file.click()"
<v-img class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800"
v-for="image in item.images"
:key="image"
:src="image"
width="40%"
height="100px"
class="ma-2"
> >
</v-img> Velg bilde
</v-container> </button>
<v-col align="center" justify="space-around"> <div v-for="image in item.images" :key="image" class="m-2">
<v-btn class="mr-4" @click="saveClicked"> Lagre </v-btn> <img :src="image" class="w-2/5 inline" alt="Bilde av gjenstanden" />
</v-col> </div>
</v-form> </div>
<!-- Save item button -->
<div class="flex justify-center">
<button
@click="saveClicked"
class="content-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Lagre
</button>
</div>
</div>
</template> </template>
<script> <script>
import useVuelidate from "@vuelidate/core";
import {
required,
helpers,
maxLength,
between,
minLength,
} from "@vuelidate/validators";
export default { export default {
name: "AddNewItem.vue", name: "AddNewItem",
setup() {
return { v$: useVuelidate() };
},
validations() {
return {
item: {
title: {
required,
max: helpers.withMessage(
() => `Tittelen kan inneholde max 50 tegn`,
maxLength(50)
),
},
description: {
required,
max: helpers.withMessage(
() => `Beskrivelsen kan inneholde max 200 tegn`,
maxLength(200)
),
min: helpers.withMessage(
() => `Beskrivelsen kan ikke være tom`,
minLength(0)
),
},
price: {
required,
between: helpers.withMessage(
() => `Leieprisen kan ikke være større enn 25000`,
between(0, 25000)
),
},
select: {
required: helpers.withMessage(() => `Velg en kategori`, required),
},
},
};
},
data() { data() {
return { return {
valid: true,
item: { item: {
title: "", title: "",
description: "", description: "",
price: "", price: "",
category: "", category: "",
select: null,
type: "", type: "",
images: [], images: [],
}, },
select: null, //Kategorier skal legges inn ved api/hente fra db, her må det endres etterhvert
items: ["Hage", "Kjøkken", "Musikk", "Annet"], categories: ["Hage", "Kjøkken", "Musikk", "Annet"],
radios: null,
titleRules: [
(v) => !!v || "Overskrift mangler",
(v) =>
(v && v.length <= 32) || "Overskrift må være mindre enn 32 bokstaver",
],
descriptionRules: [
(v) => !!v || "Beskrivelse mangler",
(v) =>
(v && v.length <= 50) ||
"Beskrivelse kan ikke vøre større enn 200 tegn",
],
priceRules: [
(v) =>
!!v ||
"Pris mangler, skriv inn 0 hvis produktet skal leies ut gratis",
(v) =>
(v && v <= 50000) || "Du kan ikke leie ut noe for mer enn 10,000 kr",
],
selectRules: [(v) => !!v || "Ingen kategori valgt"],
}; };
}, },
methods: { methods: {
checkValidation: function () {
console.log("sjekker validering");
this.v$.item.$touch();
if (this.v$.item.$invalid) {
console.log("Invalid, avslutter...");
return false;
}
console.log("validert!");
return true;
},
async saveClicked() { async saveClicked() {
console.log("Attempting to save item"); console.log("Attempting to save item");
await this.$refs.form.validate().then( if (this.checkValidation()) {
function (response) { console.log("validert, videre...");
this.valid = response.valid; console.log("Tittel: " + this.item.title);
console.log("valid " + this.valid); console.log("Kategori: " + this.item.select);
}.bind(this) console.log("Beskrivelse: " + this.item.description);
); console.log("Pris: " + this.item.price);
console.log("bilder: " + this.item.images);
if (this.valid === false) {
console.log("Alle felt er ikke valid");
this.valid = true;
return;
} }
console.log("videre");
console.log("Type leie: " + this.item.radios);
console.log("Tittel: " + this.item.title);
console.log("Kategori: " + this.select);
console.log("Beskrivelse: " + this.item.description);
console.log("Pris: " + this.item.price);
console.log("bilder: " + this.item.images);
}, },
addNewImage: function () {},
previewFiles: function (event) { addImage: function (event) {
console.log(event.target.files); console.log(event.target.files);
//this.item.images.push(event.target.files[0]);
this.item.images.push(URL.createObjectURL(event.target.files[0])); this.item.images.push(URL.createObjectURL(event.target.files[0]));
console.log("antall bilder: " + this.item.images.length);
}, },
}, },
}; };
......
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