From 256009bdd711c7962cff0ff0e56bb2a431443565 Mon Sep 17 00:00:00 2001
From: Zara Mudassar <zara.1310@hotmail.com>
Date: Mon, 25 Apr 2022 08:55:15 +0200
Subject: [PATCH] Changing from vuetify to tailwind
---
src/components/AddNewItem.vue | 152 +++++++++++++++++++++++++++++++
src/components/ItemCard.vue | 1 -
src/components/LoginForm.vue | 167 +++++++++++++++++++++-------------
src/router/index.js | 13 ++-
src/views/AddNewItemView.vue | 16 ++++
5 files changed, 284 insertions(+), 65 deletions(-)
create mode 100644 src/components/AddNewItem.vue
create mode 100644 src/views/AddNewItemView.vue
diff --git a/src/components/AddNewItem.vue b/src/components/AddNewItem.vue
new file mode 100644
index 0000000..d2c6c64
--- /dev/null
+++ b/src/components/AddNewItem.vue
@@ -0,0 +1,152 @@
+<template>
+ <v-form ref="form" v-model="valid" lazy-validation>
+ <v-col align="center" justify="space-around">
+ <p class="text-h5 ma-5">Utleie</p>
+ </v-col>
+
+ <v-container fluid>
+ <p>Leie</p>
+ <v-radio-group
+ v-model="radios"
+ :rules="[(v) => !!v || 'Velg en utleietype']"
+ required
+ >
+ <v-radio label="Dags" value="rentForDays" v-model="radios"></v-radio>
+ <v-radio label="Time" value="rentForHours" v-model="radios"></v-radio>
+ <v-radio label="Begge" value="rentBothTypes" v-model="radios"></v-radio>
+ </v-radio-group>
+
+ <v-text-field
+ v-model="item.title"
+ :rules="titleRules"
+ label="Overskrift"
+ required
+ ></v-text-field>
+
+ <v-select
+ v-model="select"
+ :items="items"
+ label="Category"
+ :rules="[(v) => !!v || 'Kategori må velges']"
+ required
+ ></v-select>
+
+ <v-textarea
+ v-model="item.description"
+ :rules="descriptionRules"
+ label="Beskrivelse"
+ ></v-textarea>
+
+ <v-text-field
+ v-model="item.price"
+ :rules="priceRules"
+ label="Pris"
+ type="number"
+ required
+ ></v-text-field>
+
+ <v-col class="mb-5">
+ <p>Bilder</p>
+ </v-col>
+
+ <input
+ type="file"
+ ref="file"
+ style="display: none"
+ @change="previewFiles"
+ multiple
+ />
+
+ <v-btn @click="$refs.file.click()">Nytt bilde</v-btn>
+
+ <v-img
+ v-for="image in item.images"
+ :key="image"
+ :src="image"
+ width="40%"
+ height="100px"
+ class="ma-2"
+ >
+ </v-img>
+ </v-container>
+
+ <v-col align="center" justify="space-around">
+ <v-btn class="mr-4" @click="saveClicked"> Lagre </v-btn>
+ </v-col>
+ </v-form>
+</template>
+
+<script>
+export default {
+ name: "AddNewItem.vue",
+
+ data() {
+ return {
+ valid: true,
+ item: {
+ title: "",
+ description: "",
+ price: "",
+ category: "",
+ type: "",
+ images: [],
+ },
+ select: null,
+ items: ["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: {
+ async saveClicked() {
+ console.log("Attempting to save item");
+
+ await this.$refs.form.validate().then(
+ function (response) {
+ this.valid = response.valid;
+ console.log("valid " + this.valid);
+ }.bind(this)
+ );
+
+ 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) {
+ console.log(event.target.files);
+ //this.item.images.push(event.target.files[0]);
+ this.item.images.push(URL.createObjectURL(event.target.files[0]));
+ },
+ },
+};
+</script>
diff --git a/src/components/ItemCard.vue b/src/components/ItemCard.vue
index 59aaf0f..e660962 100644
--- a/src/components/ItemCard.vue
+++ b/src/components/ItemCard.vue
@@ -17,7 +17,6 @@
<script>
export default {
- name: "ItemCard.vue",
data() {
return {
item: {
diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
index 81dc56e..2c66de7 100644
--- a/src/components/LoginForm.vue
+++ b/src/components/LoginForm.vue
@@ -1,80 +1,123 @@
<template>
- <div>
- <v-col
+ <!--<div>
+ <v-col align="center" justify="space-around">
+ <v-img
+ max-width="45%"
+ :src="require('../assets/logo3.svg')"
align="center"
- justify="space-around"
- >
- <v-img
- max-width="45%"
- :src="require('../assets/logo3.svg')"
- align="center"
- ></v-img>
- </v-col>
+ ></v-img>
+ </v-col>
- <v-form
- ref="form"
- v-model="valid"
- lazy-validation
- >
+ <v-form ref="form" v-model="valid" lazy-validation>
<v-col>
<v-text-field
- v-model="user.email"
- :rules="emailRules"
- label="E-mail"
- required
+ v-model="user.email"
+ :rules="emailRules"
+ label="E-mail"
+ required
></v-text-field>
</v-col>
-
- <v-col
- align="right"
- >
+ <v-col align="right">
<v-text-field
- v-model="user.password"
- :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
- :rules="[rules.required, rules.min]"
- :type="showPassword ? 'text' : 'password'"
- name="input-10-1"
- label="Password"
- counter
- @click:append="showPassword = !showPassword"
+ v-model="user.password"
+ :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+ :rules="[rules.required, rules.min]"
+ :type="showPassword ? 'text' : 'password'"
+ name="input-10-1"
+ label="Password"
+ counter
+ @click:append="showPassword = !showPassword"
></v-text-field>
- <div class="text-decoration-underline mt-n4 mr-10">
- Glemt passord
- </div>
+ <div class="text-decoration-underline mt-n4 mr-10">Glemt passord</div>
</v-col>
-
-
- <v-col
- align="center"
- justify="space-around"
- >
+ <v-col align="center" justify="space-around">
<v-btn
- :disabled="!valid"
- color="success"
- class="mb-4 mt-4"
- width="50%"
- height="40px"
- @click="loginClicked"
+ :disabled="!valid"
+ color="success"
+ class="mb-4 mt-4"
+ width="50%"
+ height="40px"
+ @click="loginClicked"
>
Logg inn
</v-btn>
<div>
- <a
- href="/"
- class="text-decoration-none"
- >Ny bruker</a>
+ <a href="/" class="text-decoration-none">Ny bruker</a>
</div>
</v-col>
+ </v-form>
+ </div>-->
+
+ <div class="m-6" :class="{ error: v$.user.email.$errors.length }">
+ <div class="mb-6">
+ <label
+ for="email"
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ >E-post</label
+ >
+ <input
+ type="email"
+ id="email"
+ class="bg-gray-50 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"
+ placeholder="eksempel@eksempel.com"
+ v-model="v$.user.email.$model"
+ required
+ />
+
+ <!-- error message -->
+ <div
+ v-for="(error, index) of v$.user.email.$errors"
+ :key="index"
+ >
+ <div class="text-red-600 text-sm" v-show="showError" id="emailErrorId">
+ {{ error.$message }}
+ </div>
+ </div>
+ </div>
+ <div class="mb-6" :class="{ error: v$.user.password.$errors.length }">
+ <label
+ for="password"
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ >Passord</label
+ >
+ <input
+ type="password"
+ id="password"
+ class="bg-gray-50 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$.user.password.$model"
+ required
+ />
+
+ <!-- error message -->
+ <div
+ class="text-red"
+ v-for="(error, index) of v$.user.password.$errors"
+ :key="index"
+ >
+ <div class="text-red-600 text-sm" v-show="showError" id="passwordErrorId">
+ {{ error.$message }}
+ </div>
+ </div>
+ <div class="align-items: flex-end; mb-6">
+ <div class="ml-3 text-sm">
+ <a href="/" class="text-blue-600">Glemt passord</a>
+ </div>
+ </div>
+ </div>
-
- </v-form>
+ <button
+ @click="loginClicked"
+ class="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 w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+ :disabled="notValid"
+ >
+ Logg inn
+ </button>
</div>
-
</template>
<script>
@@ -121,14 +164,15 @@ export default {
},
showPassword: false,
- valid : true,
+ valid: true,
+ showError: false,
emailRules: [
- v => !!v || 'E-mail is required',
- v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
+ (v) => !!v || "E-mail is required",
+ (v) => /.+@.+\..+/.test(v) || "E-mail must be valid",
],
rules: {
- required: value => !!value || 'Required.',
- min: v => v.length >= 8 || 'Min 8 characters',
+ required: (value) => !!value || "Required.",
+ min: (v) => v.length >= 8 || "Min 8 characters",
},
};
},
@@ -145,7 +189,7 @@ export default {
if (loginResponse === "Failed login") {
this.message = "kunne ikke logge inn";
- this.$store.commit('logout');
+ this.$store.commit("logout");
return;
}
@@ -153,9 +197,8 @@ export default {
console.log(loginResponse);
},
-
- validate () {
- this.$refs.form.validate()
+ validate() {
+ this.$refs.form.validate();
},
},
};
diff --git a/src/router/index.js b/src/router/index.js
index 60092e1..6529bc2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,7 +2,6 @@ import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import LoginView from "../views/LoginView.vue";
-
const routes = [
{
path: "/endre", //Endre før push
@@ -22,7 +21,17 @@ const routes = [
path: "/login",
name: "login",
component: LoginView,
- }
+ },
+ {
+ path: "/addNewItem",
+ name: "addNewItem",
+ component: () => import("../views/AddNewItemView.vue"),
+ },
+ {
+ path: "/itemCard",
+ name: "itemCard",
+ component: () => import("../views/ItemCardView.vue"),
+ },
];
const router = createRouter({
diff --git a/src/views/AddNewItemView.vue b/src/views/AddNewItemView.vue
new file mode 100644
index 0000000..2724eed
--- /dev/null
+++ b/src/views/AddNewItemView.vue
@@ -0,0 +1,16 @@
+<template>
+ <AddNewItem></AddNewItem>
+</template>
+
+<script>
+import AddNewItem from "@/components/AddNewItem";
+
+export default {
+ name: "AddNewItemView.vue",
+ components: {
+ AddNewItem,
+ },
+};
+</script>
+
+<style scoped></style>
--
GitLab