From 4414604af5872245be6a2b1b85764f5575e0a77d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Trygve=20J=C3=B8rgensen?= <trygjor@stud.ntnu.no>
Date: Thu, 2 May 2024 16:00:13 +0200
Subject: [PATCH] fix(modal): fixed incorrect usage of modal component
---
src/components/ModalComponent.vue | 10 +++++++++-
src/views/ManageChallengeView.vue | 20 +++++---------------
src/views/ManageGoalView.vue | 20 +++++---------------
3 files changed, 19 insertions(+), 31 deletions(-)
diff --git a/src/components/ModalComponent.vue b/src/components/ModalComponent.vue
index af2c542..c8d84c6 100644
--- a/src/components/ModalComponent.vue
+++ b/src/components/ModalComponent.vue
@@ -9,8 +9,11 @@
<slot />
- <div class="buttons flex flex-col justify-center items-center gap-3 mt-3 w-full">
+ <div class="buttons flex flex-row justify-center items-center gap-3 mt-3 w-full">
<slot name="buttons"></slot>
+ <button v-if="closeButton" class="button primary" @click="$emit('close')">
+ Lukk
+ </button>
</div>
</div>
</div>
@@ -26,6 +29,11 @@ defineProps({
type: Boolean,
default: true,
required: false
+ },
+ closeButton: {
+ type: Boolean,
+ default: false,
+ required: false
}
})
diff --git a/src/views/ManageChallengeView.vue b/src/views/ManageChallengeView.vue
index a600840..b6f15b6 100644
--- a/src/views/ManageChallengeView.vue
+++ b/src/views/ManageChallengeView.vue
@@ -242,12 +242,8 @@ const confirmCancel = () => {
:isModalOpen="errorModalOpen"
@close="errorModalOpen = false"
>
- <template v-slot:input>
- <div class="flex justify-center items-center">
- <div class="flex flex-col gap-5">
- <button class="primary" @click="errorModalOpen = false">Lukk</button>
- </div>
- </div>
+ <template v-slot:buttons>
+ <button class="primary" @click="errorModalOpen = false">Lukk</button>
</template>
</ModalComponent>
@@ -257,15 +253,9 @@ const confirmCancel = () => {
:isModalOpen="confirmModalOpen"
@close="confirmModalOpen = false"
>
- <template v-slot:input>
- <div class="flex justify-center items-center">
- <div class="flex flex-col gap-5">
- <button class="primary" @click="confirmCancel">Bekreft</button>
- <button class="primary danger" @click="confirmModalOpen = false">
- Avbryt
- </button>
- </div>
- </div>
+ <template v-slot:buttons>
+ <button class="primary" @click="confirmCancel">Bekreft</button>
+ <button class="primary danger" @click="confirmModalOpen = false">Avbryt</button>
</template>
</ModalComponent>
</div>
diff --git a/src/views/ManageGoalView.vue b/src/views/ManageGoalView.vue
index d2d8e75..4be7adf 100644
--- a/src/views/ManageGoalView.vue
+++ b/src/views/ManageGoalView.vue
@@ -244,12 +244,8 @@ const confirmCancel = () => {
:isModalOpen="errorModalOpen"
@close="errorModalOpen = false"
>
- <template v-slot:input>
- <div class="flex justify-center items-center">
- <div class="flex flex-col gap-5">
- <button class="primary" @click="errorModalOpen = false">Lukk</button>
- </div>
- </div>
+ <template v-slot:buttons>
+ <button class="primary" @click="errorModalOpen = false">Lukk</button>
</template>
</ModalComponent>
@@ -259,15 +255,9 @@ const confirmCancel = () => {
:isModalOpen="confirmModalOpen"
@close="confirmModalOpen = false"
>
- <template v-slot:input>
- <div class="flex justify-center items-center">
- <div class="flex flex-col gap-5">
- <button class="primary" @click="confirmCancel">Bekreft</button>
- <button class="primary danger" @click="confirmModalOpen = false">
- Avbryt
- </button>
- </div>
- </div>
+ <template v-slot:buttons>
+ <button class="primary" @click="confirmCancel">Bekreft</button>
+ <button class="primary danger" @click="confirmModalOpen = false">Avbryt</button>
</template>
</ModalComponent>
</div>
--
GitLab