diff --git a/src/components/BaseComponents/ColoredButton.vue b/src/components/BaseComponents/ColoredButton.vue
index fb8c6ca884739d6d6b6a196fadd496944640ef57..d36bb8d03b090ff93ca1c170617d8a08ca56e46b 100644
--- a/src/components/BaseComponents/ColoredButton.vue
+++ b/src/components/BaseComponents/ColoredButton.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- Button with custom text and color -->
<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}"
:class="color"
@@ -8,6 +9,13 @@
</template>
<script>
+/**
+ * Colored button component with customizable text and 3 possible colors.
+ * Colors:
+ * blue (default),
+ * red,
+ * green
+ */
export default {
name: "ColoredButton",
props: {
@@ -18,6 +26,9 @@ export default {
},
},
computed: {
+ /**
+ * Formats the tailwind css tags based on the color passed from parent
+ */
color() {
if (this.buttonColor === "red") {
return "bg-error-medium hover:bg-error-dark focus:ring-error-light";
diff --git a/src/components/BaseComponents/CustomFooterModal.vue b/src/components/BaseComponents/CustomFooterModal.vue
index e9b5467276a554a723968b7a48581428a9df78ea..c317995fa23e3588b170826def82b946e0d76dbe 100644
--- a/src/components/BaseComponents/CustomFooterModal.vue
+++ b/src/components/BaseComponents/CustomFooterModal.vue
@@ -14,22 +14,12 @@
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
{{ title }}
</h3>
+ <!-- Close button -->
<button
@click="close()"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
>
- <svg
- class="w-5 h-5"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- fill-rule="evenodd"
- d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
- clip-rule="evenodd"
- ></path>
- </svg>
+ <XIcon class="w-5 h-5" />
</button>
</div>
<!-- Modal body -->
@@ -40,7 +30,7 @@
</div>
<!-- Modal footer -->
<div class="rounded-b border-t border-gray-200 dark:border-gray-600">
- <!-- Slot: Add any html you want here -->
+ <!-- Slot: Add any html you want here (Must be one div) -->
<slot />
</div>
</div>
@@ -49,14 +39,27 @@
</template>
<script>
+import { XIcon } from "@heroicons/vue/outline";
+
+/**
+ * CustomFooterModal component for adding buttons and such to the footer of the modals.
+ * Buttons are added to slot so must be in a single div if multiple html elements are needed.
+ */
export default {
name: "CustomFooterModal",
+ emits: ["close"],
+ components: {
+ XIcon,
+ },
props: {
visible: Boolean,
title: String,
message: String,
},
methods: {
+ /**
+ * Method that emits close to parent.
+ */
close() {
this.$emit("close");
},
diff --git a/src/components/BaseComponents/FooterBar.vue b/src/components/BaseComponents/FooterBar.vue
index 478a86447ca15a4a5be2cbb140e6a797ed142188..c2fa67a862af7abe456fcfdca2d652ec592712dc 100644
--- a/src/components/BaseComponents/FooterBar.vue
+++ b/src/components/BaseComponents/FooterBar.vue
@@ -1,10 +1,13 @@
<template>
+ <!-- Footer -->
<footer
class="w-full bg-white dark:bg-gray-800 sm:flex-row border-1 border-t border-gray-600 h-10"
>
+ <!-- Copyright -->
<p class="float-left text-xs my-3 ml-4 text-primary-dark">
© BoCo 2022 - All rights reserved
</p>
+ <!-- Icon link to help page -->
<QuestionMarkCircleIcon
class="md:mt-0 mt-1 mr-4 float-right cursor-pointer h-8 md:h-10 text-primary-medium"
alt="Hjelp"
@@ -15,9 +18,12 @@
<script>
import { QuestionMarkCircleIcon } from "@heroicons/vue/outline";
+
+/**
+ * FooterBar for homepage
+ */
export default {
name: "FooterBar",
-
components: {
QuestionMarkCircleIcon,
},
diff --git a/src/components/BaseComponents/FormImageDisplay.vue b/src/components/BaseComponents/FormImageDisplay.vue
index f0b5de3a8add044a48c7d8586ad8605b5d573598..fe2244ed30ca810141e693cfb00d928b1d7b5812 100644
--- a/src/components/BaseComponents/FormImageDisplay.vue
+++ b/src/components/BaseComponents/FormImageDisplay.vue
@@ -1,27 +1,38 @@
<template>
+ <!-- Image -->
<img
:src="image"
class="w-2/5 inline"
alt="Bilde av gjenstanden"
@click="toggleModal"
/>
- <custom-footer-modal
+ <!-- Modal -->
+ <CustomFooterModal
@close="toggleModal"
:message="'Bilder som fjernes kan ikke lastes opp på nytt uten å laste opp et annet bilde først.'"
:title="'Er du sikker på at du vil fjene bilde?'"
:visible="show"
>
+ <!-- Buttons for modal footer -->
<div class="flex justify-center p-2">
- <colored-button :text="'Avbryt'" @click="toggleModal" class="m-2" />
- <colored-button :text="'Slett'" @click="removeImage" class="m-2" />
+ <ColoredButton :text="'Avbryt'" @click="toggleModal" class="m-2" />
+ <ColoredButton
+ :text="'Slett'"
+ :color="'red'"
+ @click="removeImage"
+ class="m-2"
+ />
</div>
- </custom-footer-modal>
+ </CustomFooterModal>
</template>
<script>
import ColoredButton from "@/components/BaseComponents/ColoredButton";
import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal.vue";
+/**
+ * Displays uploaded image for forms.
+ */
export default {
components: {
ColoredButton,
@@ -36,9 +47,15 @@ export default {
image: String,
},
methods: {
+ /**
+ * Emits remove image to parent
+ */
removeImage() {
this.$emit("remove");
},
+ /**
+ * Toggles modal
+ */
toggleModal() {
this.show = !this.show;
},
diff --git a/src/components/BaseComponents/IconButton.vue b/src/components/BaseComponents/IconButton.vue
index 095db5635e33e9a5116c0724f8a77a8a8c5acb93..594b70aa04afe016f023592e947c3628234792e6 100644
--- a/src/components/BaseComponents/IconButton.vue
+++ b/src/components/BaseComponents/IconButton.vue
@@ -1,9 +1,11 @@
<template>
+ <!-- Button -->
<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"
:class="color"
>
<div class="w-5 h-5 mx-1">
+ <!-- Slot for icon (Default BanIcon) -->
<slot><BanIcon /></slot>
</div>
<span class="mx-1">{{ text }}</span>
@@ -13,6 +15,13 @@
<script>
import { BanIcon } from "@heroicons/vue/outline";
+/**
+ * IconButton component that can be customized with text, color and a slot for passing an icon.
+ * Colors:
+ * blue (default),
+ * red,
+ * green
+ */
export default {
name: "IconButton",
props: {
@@ -23,6 +32,9 @@ export default {
BanIcon,
},
computed: {
+ /**
+ * Formats the tailwind css tags based on the color passed from parent
+ */
color() {
if (this.buttonColor === "red") {
return "bg-error-medium hover:bg-error-dark focus:ring-error-light";
diff --git a/src/components/BaseComponents/LoaderSpinner.vue b/src/components/BaseComponents/LoaderSpinner.vue
index 2b88fb6994d8958d84070ecfad870f27d3326392..819677aca74e20946858215723e77edf145b154b 100644
--- a/src/components/BaseComponents/LoaderSpinner.vue
+++ b/src/components/BaseComponents/LoaderSpinner.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- PacMan for indicating loading -->
<div class="loadingio-spinner-bean-eater-o5tefvffeqm">
<div class="ldio-sweozsnwol">
<div>
@@ -16,6 +17,11 @@
</template>
<style scoped type="text/css">
+/**
+ * LoadSpinner component for indicating loading in the form of PacMan.
+ *
+ * generated by https://loading.io/
+ */
@keyframes ldio-sweozsnwol-1 {
0% {
transform: rotate(0deg);
@@ -107,10 +113,9 @@
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
- transform-origin: 0 0; /* see note above */
+ transform-origin: 0 0;
}
.ldio-sweozsnwol div {
box-sizing: content-box;
}
-/* generated by https://loading.io/ */
</style>
diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index ceb11cee9904acae7d910f43ed50ea23c25873d5..3adb5c39b0590e7e3630f0885b389f543a61b2f8 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -1,7 +1,9 @@
<template>
+ <!-- NavBar -->
<nav
class="flex items-center bg-white justify-between h-10 md:h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
>
+ <!-- Logo reroutes to homepage -->
<div class="logo">
<img
class="m-1 ml-4 cursor-pointer h-9 md:h-12"
@@ -11,6 +13,7 @@
/>
</div>
<ul class="flex justify-between">
+ <!-- New listing button -->
<li
class="cursor-pointer"
v-if="this.$store.state.user.token !== null"
@@ -22,25 +25,35 @@
/>
<a class="hidden md:block mt-7 text-sm float-right">Legg til</a>
</li>
+
+ <!-- My messages button -->
<li
class="cursor-pointer"
v-if="this.$store.state.user.token !== null"
@click="loadMessages"
>
- <div class="notification-container">
+ <div class="notification-container relative">
<ChatAlt2Icon
class="m-6 md:mr-2 h-7 text-primary-medium float-left"
alt="Meldinger"
/>
- <p class="notification" v-if="newMessages > 0">{{ notifications }}</p>
+ <p
+ class="notification absolute bg-secondary top-0 p-1 min-w-[20px] min-h-[20px] rounded-full text-xs text-white font-bold text-center right-0 cursor-pointer"
+ v-if="newMessages > 0"
+ >
+ {{ notifications }}
+ </p>
<a class="hidden md:block mt-7 text-sm float-right">Meldinger</a>
</div>
</li>
+
+ <!-- User profile button -->
<li class="cursor-pointer" @click="loadProfile">
<UserCircleIcon
class="m-6 md:mr-2 h-7 text-primary-medium float-left"
alt="Profil"
/>
+ <!-- Shows "Profil" if user is logged in, else "Logg inn" -->
<a
v-if="this.$store.state.user.token !== null"
class="hidden md:block mr-4 mt-7 text-sm float-right"
@@ -59,16 +72,27 @@ import { parseUserFromToken } from "@/utils/token-utils";
import { PlusIcon, ChatAlt2Icon, UserCircleIcon } from "@heroicons/vue/outline";
import ws from "@/services/ws";
+/**
+ * NavBar component used in App
+ */
export default {
- name: "NavBar.vue",
+ name: "NavBar",
+ components: {
+ PlusIcon,
+ ChatAlt2Icon,
+ UserCircleIcon,
+ },
data() {
return {
newMessages: 0,
};
},
computed: {
+ /**
+ * Format method for notification number on messages.
+ * Shows "+99" the user has more than 99 new messages.
+ */
notifications() {
- // if new messages is greater than 99 show +99
if (this.newMessages > 99) {
return "+99";
} else {
@@ -76,13 +100,10 @@ export default {
}
},
},
- components: {
- PlusIcon,
- ChatAlt2Icon,
- UserCircleIcon,
- },
-
methods: {
+ /**
+ * Method for routing to user profile. Routes to user profile if logged in, otherwise to login.
+ */
async loadProfile() {
if (this.$store.state.user.token !== null) {
let user = parseUserFromToken(this.$store.state.user.token);
@@ -92,11 +113,17 @@ export default {
await this.$router.push("/login");
}
},
+ /**
+ * Method for routing to messages.
+ */
loadMessages() {
this.newMessages = 0;
this.$router.push("/messages");
},
},
+ /**
+ * On creation of this component the websocket service checks if the user has new messages. To display by the chat button.
+ */
created() {
ws.on(
"NEW_MESSAGE",
@@ -111,24 +138,8 @@ export default {
</script>
<style scoped>
-.notification-container {
- position: relative;
-}
.notification {
- position: absolute;
- background-color: #ff5a5f;
- top: 0;
- min-width: 20px;
- min-height: 20px;
- padding: 0.25rem;
transform: translate(-290%, 50%);
- color: white;
- font-size: 10px;
- border-radius: 50%;
- font-weight: bold;
- text-align: center;
- right: 0;
- cursor: pointer;
}
@media (max-width: 768px) {
diff --git a/src/components/BaseComponents/NotificationModal.vue b/src/components/BaseComponents/NotificationModal.vue
index 1fa362f504d38cb7380d0ad26a1f8316c74fe823..3010a08a9507ca6a006a33e6a897ab5fac8680f1 100644
--- a/src/components/BaseComponents/NotificationModal.vue
+++ b/src/components/BaseComponents/NotificationModal.vue
@@ -14,22 +14,12 @@
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
{{ title }}
</h3>
+ <!-- Close button -->
<button
@click="close()"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
>
- <svg
- class="w-5 h-5"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- fill-rule="evenodd"
- d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
- clip-rule="evenodd"
- ></path>
- </svg>
+ <XIcon class="w-5 h-5" />
</button>
</div>
<!-- Modal body -->
@@ -44,14 +34,26 @@
</template>
<script>
+import { XIcon } from "@heroicons/vue/outline";
+
+/**
+ * Modal for displaying notifications.
+ */
export default {
name: "NotificationModal",
+ emits: ["close"],
+ components: {
+ XIcon,
+ },
props: {
visible: Boolean,
title: String,
message: String,
},
methods: {
+ /**
+ * Method that emits close to parent.
+ */
close() {
this.$emit("close");
},
diff --git a/src/components/BaseComponents/PaginationTemplate.vue b/src/components/BaseComponents/PaginationTemplate.vue
index 939d7350598667c7e2710346f3ba80bb83f96748..68994fd3bdeb6be7456e9e24a3abf7b8bb446ec0 100644
--- a/src/components/BaseComponents/PaginationTemplate.vue
+++ b/src/components/BaseComponents/PaginationTemplate.vue
@@ -1,5 +1,7 @@
<template>
+ <!-- Pagination -->
<div v-if="totalPages() > 0">
+ <!-- Prev button -->
<span
v-if="showPreviousLink()"
class="cursor-pointer inline-flex items-center p-2 text-sm font-medium text-primary-light bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700"
@@ -7,9 +9,11 @@
>
Forrige
</span>
+ <!-- Current page -->
<label class="mx-2 text-primary-light"
>{{ currentPage + 1 }} av {{ totalPages() }}</label
>
+ <!-- Next button -->
<span
v-if="showNextLink()"
class="cursor-pointer inline-flex items-center p-2 text-sm font-medium text-primary-light bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700"
@@ -21,19 +25,41 @@
</template>
<script>
+/**
+ * Pagination component
+ */
export default {
name: "paginationTemplate",
- props: ["items", "currentPage", "pageSize"],
+ emits: ["page:update"],
+ props: {
+ items: Array,
+ currentPage: Number,
+ pageSize: Number,
+ },
methods: {
- updatePage(pageNumber) {
- this.$emit("page:update", pageNumber);
- },
+ /**
+ * Calculates the number of pages to display whole list.
+ */
totalPages() {
return Math.ceil(this.items.length / this.pageSize);
},
+ /**
+ * Emits page update to parent.
+ */
+ updatePage(pageNumber) {
+ this.$emit("page:update", pageNumber);
+ },
+ /**
+ * Checks if previous button is needed.
+ * Returns true if not on first page.
+ */
showPreviousLink() {
return this.currentPage == 0 ? false : true;
},
+ /**
+ * Checks if next button is needed.
+ * Returns true if not on last page.
+ */
showNextLink() {
return this.currentPage == this.totalPages() - 1 ? false : true;
},
diff --git a/src/components/BaseComponents/RatingModal.vue b/src/components/BaseComponents/RatingModal.vue
deleted file mode 100644
index 1b09b8fceae2bc0cf2764f79199aa6342c5a7463..0000000000000000000000000000000000000000
--- a/src/components/BaseComponents/RatingModal.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<template>
- <!-- Main modal -->
- <div
- v-if="visible"
- class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
- >
- <div class="relative w-full h-full max-w-2xl p-4 md:h-auto">
- <!-- Modal content -->
- <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
- <!-- Modal header -->
- <div class="flex p-4 border-b rounded-t dark:border-gray-600">
- <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
- {{ name }}
- </h3>
- <button
- @click="close()"
- class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
- >
- <svg
- class="w-5 h-5"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- fill-rule="evenodd"
- d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
- clip-rule="evenodd"
- ></path>
- </svg>
- </button>
- </div>
- <!-- Modal body -->
- <div class="p-6 space-y-6">
- <p class="text-lg leading-relaxed text-gray-500 dark:text-gray-400">
- {{ title }}
- </p>
- </div>
-
- <div class="ml-6 mt-4">
- <p
- class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
- v-show="renterIsReceiverOfRating"
- >
- Gi en vurdering til utleieren
- </p>
- <p
- class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
- v-show="!renterIsReceiverOfRating"
- >
- Gi en vurdering til leietakeren
- </p>
- </div>
-
- <div class="flex justify-center px-4">
- <textarea
- class="w-full h-40 bg-gray-200 mb-4 ring-1 ring-gray-400 rounded-xl"
- />
- </div>
-
- <div class="flex items-center justify-center mb-8">
- <svg
- class="w-10 h-10 text-warn cursor-pointer"
- :class="rating[0]"
- @click="setRating(1)"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
- ></path>
- </svg>
- <svg
- class="w-10 h-10 text-warn cursor-pointer"
- :class="rating[1]"
- @click="setRating(2)"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
- ></path>
- </svg>
- <svg
- class="w-10 h-10 text-warn cursor-pointer"
- :class="rating[2]"
- @click="setRating(3)"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
- ></path>
- </svg>
- <svg
- class="w-10 h-10 text-warn cursor-pointer"
- :class="rating[3]"
- @click="setRating(4)"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
- ></path>
- </svg>
- <svg
- class="w-10 h-10 text-warn cursor-pointer"
- :class="rating[4]"
- @click="setRating(5)"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
- ></path>
- </svg>
- </div>
-
- <div class="flex justify-center mb-4">
- <Button :text="'Send en vurdering'" @click="sendRating"></Button>
- </div>
-
- <!-- Modal footer -->
- <div class="rounded-b border-t border-gray-200 dark:border-gray-600">
- <!-- Slot: Add any html you want here -->
- <slot />
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import Button from "@/components/BaseComponents/ColoredButton";
-import { postNewRating } from "@/utils/apiutil";
-
-export default {
- name: "RatingModal",
- data() {
- return {
- score: 3,
- comment: "",
- rating: [
- "text-warn",
- "text-warn",
- "text-warn",
- "text-gray-300",
- "text-gray-300",
- ],
- };
- },
- props: {
- visible: Boolean,
- name: String,
- title: String,
- rentID: Number,
- renterIsReceiverOfRating: Boolean,
- },
-
- components: {
- Button,
- },
- methods: {
- setRating(ratingNumber) {
- this.score = ratingNumber;
- for (let i = 0; i < 5; i++) {
- if (i < ratingNumber) {
- this.rating[i] = "text-warn";
- } else {
- this.rating[i] = "text-gray-300";
- }
- }
- },
- close() {
- this.$emit("close");
- },
- async sendRating() {
- const ratingInfo = {
- score: this.score,
- comment: this.comment,
- renterIsReceiverOfRating: this.renterIsReceiverOfRating,
- rentID: this.rentID,
- };
-
- const postResponse = await postNewRating(ratingInfo);
-
- console.log("posted: " + postResponse);
-
- this.$router.push("/");
- },
- },
-};
-</script>
diff --git a/src/components/BaseComponents/TripleDotButton.vue b/src/components/BaseComponents/TripleDotButton.vue
index 5205015a39798c6af46dae4b99af4f6fbb826172..8cac4372e2073c7bcee784919b7fd544c8c1e7bf 100644
--- a/src/components/BaseComponents/TripleDotButton.vue
+++ b/src/components/BaseComponents/TripleDotButton.vue
@@ -5,20 +5,19 @@
class="w-10 h-10 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg float-right text-sm p-1.5"
type="button"
>
- <svg
- class="w-6 h-6"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
- ></path>
- </svg>
+ <DotsVerticalIcon class="w-6 h-6" />
</button>
</template>
<script>
+import { DotsVerticalIcon } from "@heroicons/vue/outline";
+
+/**
+ * Triple dot button
+ */
export default {
name: "TripleDotButton",
+ components: {
+ DotsVerticalIcon,
+ },
};
</script>
diff --git a/src/components/UserProfileComponents/RatingComponents/RatingModal.vue b/src/components/UserProfileComponents/RatingComponents/RatingModal.vue
index 8bb1f60c9ad4d31f2379f523de15dae343f73297..c73f67973335cde876b10b3dc9e269f405f6b528 100644
--- a/src/components/UserProfileComponents/RatingComponents/RatingModal.vue
+++ b/src/components/UserProfileComponents/RatingComponents/RatingModal.vue
@@ -16,18 +16,7 @@
@click="close()"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
>
- <svg
- class="w-5 h-5"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- fill-rule="evenodd"
- d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
- clip-rule="evenodd"
- ></path>
- </svg>
+ <XIcon class="w-5 h-5" />
</button>
</div>
<!-- Modal body -->
@@ -60,71 +49,19 @@
<!-- 5 rating stars -->
<div class="flex items-center justify-center mb-8">
- <svg
- class="w-10 h-10 text-warn cursor-pointer"
- :class="rating[0]"
- @click="setRating(1)"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
- ></path>
- </svg>
- <svg
- class="w-10 h-10 text-warn cursor-pointer"
- :class="rating[1]"
- @click="setRating(2)"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
- ></path>
- </svg>
- <svg
- class="w-10 h-10 text-warn cursor-pointer"
- :class="rating[2]"
- @click="setRating(3)"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
- ></path>
- </svg>
- <svg
- class="w-10 h-10 text-warn cursor-pointer"
- :class="rating[3]"
- @click="setRating(4)"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
- ></path>
- </svg>
- <svg
- class="w-10 h-10 text-warn cursor-pointer"
- :class="rating[4]"
- @click="setRating(5)"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
- ></path>
- </svg>
+ <StarIcon :class="getStarType(0)" @click="setRating(1)"> </StarIcon>
+ <StarIcon :class="getStarType(1)" @click="setRating(2)"> </StarIcon>
+ <StarIcon :class="getStarType(2)" @click="setRating(3)"> </StarIcon>
+ <StarIcon :class="getStarType(3)" @click="setRating(4)"> </StarIcon>
+ <StarIcon :class="getStarType(4)" @click="setRating(5)"> </StarIcon>
</div>
<!-- Button for submitting the rating -->
<div class="flex justify-center mb-4">
- <Button :text="'Send en vurdering'" @click="sendRating"></Button>
+ <ColoredButton
+ :text="'Send en vurdering'"
+ @click="sendRating"
+ ></ColoredButton>
</div>
<!-- Modal footer -->
@@ -137,19 +74,22 @@
</template>
<script>
-import Button from "@/components/BaseComponents/ColoredButton";
+import ColoredButton from "@/components/BaseComponents/ColoredButton";
import { postNewRating } from "@/utils/apiutil";
+import { XIcon } from "@heroicons/vue/outline";
+import { StarIcon } from "@heroicons/vue/solid";
export default {
name: "RatingModal",
+ emits: ["close", "reload"],
data() {
return {
score: 3,
comment: "",
rating: [
- "text-warn",
- "text-warn",
- "text-warn",
+ "text-warn-medium",
+ "text-warn-medium",
+ "text-warn-medium",
"text-gray-300",
"text-gray-300",
],
@@ -164,7 +104,9 @@ export default {
},
components: {
- Button,
+ XIcon,
+ ColoredButton,
+ StarIcon,
},
methods: {
//A method for setting the rating
@@ -172,12 +114,15 @@ export default {
this.score = ratingNumber;
for (let i = 0; i < 5; i++) {
if (i < ratingNumber) {
- this.rating[i] = "text-warn";
+ this.rating[i] = "text-warn-medium";
} else {
this.rating[i] = "text-gray-300";
}
}
},
+ getStarType(n) {
+ return "w-10 h-10 cursor-pointer " + this.rating[n];
+ },
close() {
this.$emit("close");
},
@@ -192,8 +137,8 @@ export default {
renterIsReceiverOfRating: this.renterIsReceiverOfRating,
rentID: this.rentID,
};
- await postNewRating(ratingInfo);
+ await postNewRating(ratingInfo);
this.$emit("reload");
this.$router.go(0);
},
diff --git a/tailwind.config.js b/tailwind.config.js
index d8ef3f55c175f5952769a6b41dec929ef3533f4d..e2fb7f1be12a6a949bc1d2140855418d6d91f095 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -26,10 +26,7 @@ module.exports = {
medium: "#004aad",
dark: "#002B66",
},
- secondary: {
- light: "#653273",
- dark: "#731050",
- },
+ secondary: "#ff5a5f",
error: {
light: "#EF4444",
medium: "#DC2626",
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/color-button.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/color-button.spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..23b4e25c2bebf3eb8fcc97d852a1024aedb26183
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/color-button.spec.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColoredButtonComponent renders correctly 1`] = `
+<div
+ data-v-app=""
+>
+
+ <!-- Button with custom text and color -->
+ <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"
+ >
+ hei
+ </button>
+
+</div>
+`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/custom-footer-modal.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/custom-footer-modal.spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..088e1e4160c9174e917d9a62b7472627b9223061
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/custom-footer-modal.spec.js.snap
@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconButtonComponent renders correctly 1`] = `
+<div
+ data-v-app=""
+>
+
+ <!-- Main modal -->
+ <div
+ class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
+ >
+ <div
+ class="relative w-full h-full max-w-2xl p-4 md:h-auto"
+ >
+ <!-- Modal content -->
+ <div
+ class="relative bg-white rounded-lg shadow dark:bg-gray-700"
+ >
+ <!-- Modal header -->
+ <div
+ class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"
+ >
+ <h3
+ class="text-xl font-semibold text-gray-900 dark:text-white"
+ >
+ String
+ </h3>
+ <!-- Close button -->
+ <button
+ class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+ >
+ <svg
+ aria-hidden="true"
+ class="w-5 h-5"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M6 18L18 6M6 6l12 12"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ </button>
+ </div>
+ <!-- Modal body -->
+ <div
+ class="p-6 space-y-6"
+ >
+ <p
+ class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
+ >
+ String
+ </p>
+ </div>
+ <!-- Modal footer -->
+ <div
+ class="rounded-b border-t border-gray-200 dark:border-gray-600"
+ >
+ <!-- Slot: Add any html you want here (Must be one div) -->
+
+ <div
+ class="fake-msg"
+ >
+ String
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+
+</div>
+`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/footer-bar.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/footer-bar.spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..bf4ee8cc5e808ec6f563c2d10af1ec4cb33fc35b
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/footer-bar.spec.js.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FooterBar component renders correctly 1`] = `
+<div
+ data-v-app=""
+>
+
+ <!-- Footer -->
+ <footer
+ class="w-full bg-white dark:bg-gray-800 sm:flex-row border-1 border-t border-gray-600 h-10"
+ >
+ <!-- Copyright -->
+ <p
+ class="float-left text-xs my-3 ml-4 text-primary-dark"
+ >
+ © BoCo 2022 - All rights reserved
+ </p>
+ <!-- Icon link to help page -->
+ <svg
+ aria-hidden="true"
+ class="md:mt-0 mt-1 mr-4 float-right cursor-pointer h-8 md:h-10 text-primary-medium"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ </footer>
+
+</div>
+`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/form-image-display.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/form-image-display.spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..a6dc51e0b065edf6405d394c937a4e028b591409
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/form-image-display.spec.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormImageDisplay component renders correctly 1`] = `
+<div
+ data-v-app=""
+>
+
+ <!-- Image -->
+ <img
+ alt="Bilde av gjenstanden"
+ class="w-2/5 inline"
+ src="http://localhost:3000/api/images/5"
+ />
+ <!-- Modal -->
+
+ <!-- Main modal -->
+ <!--v-if-->
+
+
+</div>
+`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/icon-button.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/icon-button.spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..f38c6fa8f94b7e530126dffc3820753778b5c453
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/icon-button.spec.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconButtonComponent renders correctly 1`] = `
+<div
+ data-v-app=""
+>
+
+ <!-- Button -->
+ <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 bg-primary-medium hover:bg-primary-dark focus:ring-primary-light"
+ >
+ <div
+ class="w-5 h-5 mx-1"
+ >
+ <!-- Slot for icon (Default BanIcon) -->
+
+ <svg
+ aria-hidden="true"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+
+ </div>
+ <span
+ class="mx-1"
+ >
+ hei
+ </span>
+ </button>
+
+</div>
+`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/nav-bar.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/nav-bar.spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..f466c4431962725a99e10fdad9139913a0315aa7
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/nav-bar.spec.js.snap
@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavBar component renders correctly 1`] = `
+<div
+ data-v-app=""
+>
+
+ <!-- NavBar -->
+ <nav
+ class="flex items-center bg-white justify-between h-10 md:h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
+ >
+ <!-- Logo reroutes to homepage -->
+ <div
+ class="logo"
+ >
+ <img
+ alt="BoCo logo"
+ class="m-1 ml-4 cursor-pointer h-9 md:h-12"
+ src=""
+ />
+ </div>
+ <ul
+ class="flex justify-between"
+ >
+ <!-- New listing button -->
+ <li
+ class="cursor-pointer"
+ >
+ <plus-icon-stub
+ alt="Legg til"
+ class="m-6 md:mr-2 h-7 text-primary-medium float-left"
+ />
+ <a
+ class="hidden md:block mt-7 text-sm float-right"
+ >
+ Legg til
+ </a>
+ </li>
+ <!-- My messages button -->
+ <li
+ class="cursor-pointer"
+ >
+ <div
+ class="notification-container relative"
+ >
+ <chat-alt2-icon-stub
+ alt="Meldinger"
+ class="m-6 md:mr-2 h-7 text-primary-medium float-left"
+ />
+ <!--v-if-->
+ <a
+ class="hidden md:block mt-7 text-sm float-right"
+ >
+ Meldinger
+ </a>
+ </div>
+ </li>
+ <!-- User profile button -->
+ <li
+ class="cursor-pointer"
+ >
+ <user-circle-icon-stub
+ alt="Profil"
+ class="m-6 md:mr-2 h-7 text-primary-medium float-left"
+ />
+ <!-- Shows "Profil" if user is logged in, else "Logg inn" -->
+ <a
+ class="hidden md:block mr-4 mt-7 text-sm float-right"
+ >
+ Profil
+ </a>
+ </li>
+ </ul>
+ </nav>
+
+</div>
+`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/notification-modal.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/notification-modal.spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..485fb4f230c17053c0ffdd03ebbb1a003c2a55d9
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/notification-modal.spec.js.snap
@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NotificationModal component renders correctly 1`] = `
+<div
+ data-v-app=""
+>
+
+ <!-- Main modal -->
+ <div
+ class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
+ >
+ <div
+ class="relative w-full h-full max-w-2xl p-4 md:h-auto"
+ >
+ <!-- Modal content -->
+ <div
+ class="relative bg-white rounded-lg shadow dark:bg-gray-700"
+ >
+ <!-- Modal header -->
+ <div
+ class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"
+ >
+ <h3
+ class="text-xl font-semibold text-gray-900 dark:text-white"
+ >
+ String
+ </h3>
+ <!-- Close button -->
+ <button
+ class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+ >
+ <svg
+ aria-hidden="true"
+ class="w-5 h-5"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M6 18L18 6M6 6l12 12"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ </button>
+ </div>
+ <!-- Modal body -->
+ <div
+ class="p-6 space-y-6"
+ >
+ <p
+ class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
+ >
+ String
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+</div>
+`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/pagination-template.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/pagination-template.spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..e4d76ee174ab3fcbf15a5a02601274a3bb2be6c6
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/pagination-template.spec.js.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PaginationTemplate renders correctly 1`] = `
+<div
+ data-v-app=""
+>
+
+ <!-- Pagination -->
+ <!--v-if-->
+
+</div>
+`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/triple-dot-button.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/triple-dot-button.spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..710c50c9b036381f235ee14b68201cd4668257f9
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/triple-dot-button.spec.js.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TripleDotButton component renders correctly 1`] = `
+<button
+ class="w-10 h-10 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg float-right text-sm p-1.5"
+ data-dropdown-toggle="dropdown"
+ id="dropdownDefault"
+ type="button"
+>
+ <svg
+ aria-hidden="true"
+ class="w-6 h-6"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+</button>
+`;
diff --git a/tests/unit/component-tests/base-component-tests/color-button.spec.js b/tests/unit/component-tests/base-component-tests/color-button.spec.js
index 29300503d6aeae9159b782520be94ebb502ce44c..90c7a43df8e616a2a6349ef00db2934eb35ce40a 100644
--- a/tests/unit/component-tests/base-component-tests/color-button.spec.js
+++ b/tests/unit/component-tests/base-component-tests/color-button.spec.js
@@ -13,6 +13,10 @@ describe("ColoredButtonComponent", () => {
});
});
+ it("renders correctly", () => {
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
diff --git a/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js b/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js
index 5afb8f9cb6f6d966856b1a59516062300c80e2b1..4d4db9169c1d7c90402aa4e78be331938ebf487f 100644
--- a/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js
+++ b/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js
@@ -18,6 +18,10 @@ describe("IconButtonComponent", () => {
});
});
+ it("renders correctly", () => {
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
diff --git a/tests/unit/component-tests/base-component-tests/footer-bar.spec.js b/tests/unit/component-tests/base-component-tests/footer-bar.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..c50efb9e22f767ff23292cb0c1b371cb8c19f460
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/footer-bar.spec.js
@@ -0,0 +1,18 @@
+import { mount } from "@vue/test-utils";
+import FooterBar from "@/components/BaseComponents/FooterBar.vue";
+
+describe("FooterBar component", () => {
+ let wrapper;
+
+ beforeEach(() => {
+ wrapper = mount(FooterBar);
+ });
+
+ it("renders correctly", () => {
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
+ it("is instantiated", () => {
+ expect(wrapper.exists()).toBeTruthy();
+ });
+});
\ No newline at end of file
diff --git a/tests/unit/component-tests/base-component-tests/form-image-display.spec.js b/tests/unit/component-tests/base-component-tests/form-image-display.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..3cb8f55a0e6b87a98fe2172ef58f6cb35eea19f7
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/form-image-display.spec.js
@@ -0,0 +1,23 @@
+import { mount } from "@vue/test-utils";
+import FormImageDisplay from "@/components/BaseComponents/FormImageDisplay.vue";
+
+describe("FormImageDisplay component", () => {
+ let wrapper;
+
+ beforeEach(() => {
+ wrapper = mount(FormImageDisplay, {
+ //passing prop to component
+ props: {
+ image: "http://localhost:3000/api/images/5"
+ },
+ });
+ });
+
+ it("renders correctly", () => {
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
+ it("is instantiated", () => {
+ expect(wrapper.exists()).toBeTruthy();
+ });
+});
\ No newline at end of file
diff --git a/tests/unit/component-tests/base-component-tests/icon-button.spec.js b/tests/unit/component-tests/base-component-tests/icon-button.spec.js
index 376fb18f1f3ba20d4e417f7f615c2136f908016b..57b6f0fbc8450074c308627cd845f61085cb6743 100644
--- a/tests/unit/component-tests/base-component-tests/icon-button.spec.js
+++ b/tests/unit/component-tests/base-component-tests/icon-button.spec.js
@@ -13,6 +13,10 @@ describe("IconButtonComponent", () => {
});
});
+ it("renders correctly", () => {
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
diff --git a/tests/unit/component-tests/base-component-tests/nav-bar.spec.js b/tests/unit/component-tests/base-component-tests/nav-bar.spec.js
index c728013aea767ae263d383c9f0cf92597874512b..940507557a0acbf1c42d42aa1eaca34b654fda3c 100644
--- a/tests/unit/component-tests/base-component-tests/nav-bar.spec.js
+++ b/tests/unit/component-tests/base-component-tests/nav-bar.spec.js
@@ -16,6 +16,10 @@ describe("NavBar component", () => {
});
});
+ it("renders correctly", () => {
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
diff --git a/tests/unit/component-tests/base-component-tests/notification-modal.spec.js b/tests/unit/component-tests/base-component-tests/notification-modal.spec.js
index c005e4f94aec3da15453735e5e1b267884104baf..0fb2c913ba0efa291df6a397a8dd0ee7370da776 100644
--- a/tests/unit/component-tests/base-component-tests/notification-modal.spec.js
+++ b/tests/unit/component-tests/base-component-tests/notification-modal.spec.js
@@ -15,6 +15,10 @@ describe("NotificationModal component", () => {
});
});
+ it("renders correctly", () => {
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
diff --git a/tests/unit/component-tests/base-component-tests/pagination-template.spec.js b/tests/unit/component-tests/base-component-tests/pagination-template.spec.js
index 91a7495f64107bf31184e1dee68e250a959e06de..b72731817026bf0de1a62bbbc04964c5f9c1e2d9 100644
--- a/tests/unit/component-tests/base-component-tests/pagination-template.spec.js
+++ b/tests/unit/component-tests/base-component-tests/pagination-template.spec.js
@@ -15,6 +15,10 @@ describe("PaginationTemplate", () => {
});
});
+ it("renders correctly", () => {
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
diff --git a/tests/unit/component-tests/base-component-tests/triple-dot-button.spec.js b/tests/unit/component-tests/base-component-tests/triple-dot-button.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..f796516f86eaa2fe675fa95b0bcfec8040a23c29
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/triple-dot-button.spec.js
@@ -0,0 +1,18 @@
+import { mount } from "@vue/test-utils";
+import TripleDotButton from "@/components/BaseComponents/TripleDotButton.vue";
+
+describe("TripleDotButton component", () => {
+ let wrapper;
+
+ beforeEach(() => {
+ wrapper = mount(TripleDotButton);
+ });
+
+ it("renders correctly", () => {
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
+ it("is instantiated", () => {
+ expect(wrapper.exists()).toBeTruthy();
+ });
+});
\ No newline at end of file
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap
index 6389c542acb08f641164d126f05565082d3b9cc4..77b8975ee9dbbcc08570939bf65238456f813b77 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap
@@ -22,6 +22,8 @@ exports[`CommunityHeader component renders correctly 1`] = `
<div
class="flex place-content-center mx-4"
>
+
+ <!-- PacMan for indicating loading -->
<div
class="loadingio-spinner-bean-eater-o5tefvffeqm"
>
@@ -40,6 +42,7 @@ exports[`CommunityHeader component renders correctly 1`] = `
</div>
</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 1788f9305c5a342b282e03657a5b7351548a3c4c..c72b816590a7a3a9f0cb92722cb4e88cb5287698 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
@@ -219,11 +219,14 @@ exports[`NewItemForm component renders correctly 1`] = `
type="file"
/>
<!-- Opens file explorer -->
+
+ <!-- Button with custom text and color -->
<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>
+
<!-- Shows chosen images -->
@@ -232,12 +235,15 @@ exports[`NewItemForm component renders correctly 1`] = `
<div
class="float-right"
>
+
+ <!-- Button with custom text and color -->
<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/user-component-tests/__snapshots__/login-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
index da0a65acb1aaebb2d840fba0a32e54ed26c72800..0c3c3c009af9e5a933f5ed99d16db44906e178a4 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
@@ -58,11 +58,14 @@ exports[`LoginForm component renders correctly 1`] = `
Glemt passord?
</router-link>
<!-- Button for logging in -->
+
+ <!-- Button with custom text and color -->
<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 login"
>
Logg på
</button>
+
</div>
</div>
</div>
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap
index a62255e09948f531f521385f62d61d04c7899cef..8d4a4752be15507de8c0a6decba0a129aca5aceb 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap
@@ -78,11 +78,14 @@ exports[`NewPasswordForm component renders correctly 1`] = `
class="mt-6"
id="buttonsField"
>
+
+ <!-- Button with custom text and color -->
<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 float-right"
>
Sett ny passord
</button>
+
</div>
<!-- Message for user -->
<div
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
index af2bbf8783faa8af62a497730fa7c81f24b960ed..7ac9eff69f58987c4ffb5152ce619ff927142b62 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
@@ -99,11 +99,14 @@ exports[`RegisterFormComponent renders correctly 1`] = `
<div
class="flex justify-end mt-6"
>
+
+ <!-- Button with custom text and color -->
<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"
>
Opprett
</button>
+
</div>
</form>
</div>
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap
index 40a038afb49c611841f534b60c65fd7a2ee740ee..417f7973077f99b92a0933b95b54788ed5269141 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap
@@ -33,11 +33,14 @@ exports[`ResetPasswordForm component renders correctly 1`] = `
</div>
+
+ <!-- Button with custom text and color -->
<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 float-right"
>
Tilbakestill passord
</button>
+
</div>
</div>
`;
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap
index 6a73973168534f9f4153a75d0448d4e301d0ba97..6144f610a8902c6c981d2d5ace4425fdd3cec20d 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap
@@ -69,17 +69,23 @@ exports[`UserItems component renders correctly 1`] = `
<div
class="flex justify-center"
>
+
+ <!-- Pagination -->
<div
class="mt-10"
>
+ <!-- Prev button -->
<!--v-if-->
+ <!-- Current page -->
<label
class="mx-2 text-primary-light"
>
1 av 1
</label>
+ <!-- Next button -->
<!--v-if-->
</div>
+
</div>
</div>