From be503977756f6b11a115735b6f3c0b79d8b5fecd Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Mon, 8 Jul 2024 14:40:59 +0200
Subject: [PATCH] refactor billableratemodal to use a common component for
 shared logic

---
 .../Components/Common/BillableRateModal.vue   | 64 +++++++++++++++
 .../Common/Member/MemberBillableRateModal.vue | 81 +++++-------------
 .../OrganizationBillableRateModal.vue         | 78 +++++-------------
 .../Project/ProjectBillableRateModal.vue      | 82 +++++--------------
 .../ProjectMemberBillableRateModal.vue        | 81 +++++-------------
 5 files changed, 146 insertions(+), 240 deletions(-)
 create mode 100644 resources/js/Components/Common/BillableRateModal.vue

diff --git a/resources/js/Components/Common/BillableRateModal.vue b/resources/js/Components/Common/BillableRateModal.vue
new file mode 100644
index 00000000..739692e8
--- /dev/null
+++ b/resources/js/Components/Common/BillableRateModal.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import DialogModal from '@/Components/DialogModal.vue';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
+
+const show = defineModel('show', { default: false });
+const saving = defineModel('saving', { default: false });
+
+const emit = defineEmits<{
+    submit: [billable_rate_update_time_entries: boolean];
+}>();
+
+defineProps<{
+    title: string;
+}>();
+</script>
+
+<template>
+    <DialogModal closeable :show="show" @close="show = false">
+        <template #title>
+            <div class="flex justify-center">
+                <span> {{ title }} </span>
+            </div>
+        </template>
+        <template #content>
+            <div class="flex items-center space-x-4">
+                <div class="col-span-6 sm:col-span-4 flex-1">
+                    <slot></slot>
+                    <div class="space-x-3 pt-5 pb-2 flex justify-center">
+                        <PrimaryButton
+                            :class="{ 'opacity-25': saving }"
+                            :disabled="saving"
+                            @click="emit('submit', true)">
+                            Yes, update existing time entries
+                        </PrimaryButton>
+                        <PrimaryButton
+                            :class="{ 'opacity-25': saving }"
+                            :disabled="saving"
+                            @click="emit('submit', false)">
+                            No, only for new time entries
+                        </PrimaryButton>
+                    </div>
+                    <p class="text-center pt-3 pb-1">
+                        Learn more about the
+                        <a
+                            target="_blank"
+                            href="https://docs.solidtime.io/user-guide/billable-rates"
+                            class="text-blue-400 hover:text-blue-500 transition"
+                            >billable rate logic
+                            <ArrowTopRightOnSquareIcon
+                                class="w-4 -mt-0.5 inline-block"></ArrowTopRightOnSquareIcon
+                        ></a>
+                    </p>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="show = false"> Cancel </SecondaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/Member/MemberBillableRateModal.vue b/resources/js/Components/Common/Member/MemberBillableRateModal.vue
index ee11f8e5..38b52cfa 100644
--- a/resources/js/Components/Common/Member/MemberBillableRateModal.vue
+++ b/resources/js/Components/Common/Member/MemberBillableRateModal.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import SecondaryButton from '@/Components/SecondaryButton.vue';
-import DialogModal from '@/Components/DialogModal.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
 import { formatCents } from '../../../utils/money';
-import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
+import BillableRateModal from '@/Components/Common/BillableRateModal.vue';
 
 const show = defineModel('show', { default: false });
 const saving = defineModel('saving', { default: false });
@@ -13,67 +10,31 @@ defineProps<{
     memberName: string;
 }>();
 
-const emit = defineEmits<{
+defineEmits<{
     submit: [billable_rate_update_time_entries: boolean];
 }>();
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false">
-        <template #title>
-            <div class="flex justify-center">
-                <span> Update Member Billable Rate </span>
-            </div>
-        </template>
-        <template #content>
-            <div class="flex items-center space-x-4">
-                <div class="col-span-6 sm:col-span-4 flex-1">
-                    <p class="py-1 text-center">
-                        The billable rate of {{ memberName }} will be updated to
-                        <strong>{{
-                            newBillableRate
-                                ? formatCents(newBillableRate)
-                                : ' the default rate of the organization'
-                        }}</strong
-                        >.
-                    </p>
-                    <p class="py-1 text-center font-semibold max-w-md mx-auto">
-                        Do you want to update all existing time entries, where
-                        the member billable rate applies as well?
-                    </p>
-
-                    <div class="space-x-3 pt-5 pb-2 flex justify-center">
-                        <PrimaryButton
-                            :class="{ 'opacity-25': saving }"
-                            :disabled="saving"
-                            @click="emit('submit', true)">
-                            Yes, update existing time entries
-                        </PrimaryButton>
-                        <PrimaryButton
-                            :class="{ 'opacity-25': saving }"
-                            :disabled="saving"
-                            @click="emit('submit', false)">
-                            No, only for new time entries
-                        </PrimaryButton>
-                    </div>
-                    <p class="text-center pt-3 pb-1">
-                        Learn more about the
-                        <a
-                            target="_blank"
-                            href="https://docs.solidtime.io/user-guide/billable-rates"
-                            class="text-blue-400 hover:text-blue-500 transition"
-                            >billable rate logic
-                            <ArrowTopRightOnSquareIcon
-                                class="w-4 -mt-0.5 inline-block"></ArrowTopRightOnSquareIcon
-                        ></a>
-                    </p>
-                </div>
-            </div>
-        </template>
-        <template #footer>
-            <SecondaryButton @click="show = false"> Cancel </SecondaryButton>
-        </template>
-    </DialogModal>
+    <BillableRateModal
+        @submit="(...args) => $emit('submit', ...args)"
+        v-model:show="show"
+        v-model:saving="saving"
+        title="Update Member Billable Rate">
+        <p class="py-1 text-center">
+            The billable rate of {{ memberName }} will be updated to
+            <strong>{{
+                newBillableRate
+                    ? formatCents(newBillableRate)
+                    : ' the default rate of the organization'
+            }}</strong
+            >.
+        </p>
+        <p class="py-1 text-center font-semibold max-w-md mx-auto">
+            Do you want to update all existing time entries, where the member
+            billable rate applies as well?
+        </p>
+    </BillableRateModal>
 </template>
 
 <style scoped></style>
diff --git a/resources/js/Components/Common/Organization/OrganizationBillableRateModal.vue b/resources/js/Components/Common/Organization/OrganizationBillableRateModal.vue
index ab1b3b20..f08fdc27 100644
--- a/resources/js/Components/Common/Organization/OrganizationBillableRateModal.vue
+++ b/resources/js/Components/Common/Organization/OrganizationBillableRateModal.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import SecondaryButton from '@/Components/SecondaryButton.vue';
-import DialogModal from '@/Components/DialogModal.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
 import { formatCents } from '../../../utils/money';
-import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
+import BillableRateModal from '@/Components/Common/BillableRateModal.vue';
 
 const show = defineModel('show', { default: false });
 const saving = defineModel('saving', { default: false });
@@ -12,66 +9,29 @@ defineProps<{
     newBillableRate?: number | null;
 }>();
 
-const emit = defineEmits<{
+defineEmits<{
     submit: [billable_rate_update_time_entries: boolean];
 }>();
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false">
-        <template #title>
-            <div class="flex justify-center">
-                <span> Update Organization Billable Rate </span>
-            </div>
-        </template>
-        <template #content>
-            <div class="flex items-center space-x-4">
-                <div class="col-span-6 sm:col-span-4 flex-1">
-                    <p class="py-0.5 text-center">
-                        The organization billable rate will be updated to
-                        <strong>{{
-                            newBillableRate
-                                ? formatCents(newBillableRate)
-                                : ' none.'
-                        }}</strong
-                        >.
-                    </p>
-                    <p class="py-0.5 text-center font-semibold">
-                        Do you want to update all existing time entries, where
-                        the organization billable rate applies as well?
-                    </p>
-                    <div class="space-x-3 pt-5 pb-2 flex justify-center">
-                        <PrimaryButton
-                            :class="{ 'opacity-25': saving }"
-                            :disabled="saving"
-                            @click="emit('submit', true)">
-                            Yes, update existing time entries
-                        </PrimaryButton>
-                        <PrimaryButton
-                            :class="{ 'opacity-25': saving }"
-                            :disabled="saving"
-                            @click="emit('submit', false)">
-                            No, only for new time entries
-                        </PrimaryButton>
-                    </div>
-                    <p class="text-center pt-3 pb-1">
-                        Learn more about the
-                        <a
-                            target="_blank"
-                            href="https://docs.solidtime.io/user-guide/billable-rates"
-                            class="text-blue-400 hover:text-blue-500 transition"
-                            >billable rate logic
-                            <ArrowTopRightOnSquareIcon
-                                class="w-4 -mt-0.5 inline-block"></ArrowTopRightOnSquareIcon
-                        ></a>
-                    </p>
-                </div>
-            </div>
-        </template>
-        <template #footer>
-            <SecondaryButton @click="show = false"> Cancel </SecondaryButton>
-        </template>
-    </DialogModal>
+    <BillableRateModal
+        @submit="(...args) => $emit('submit', ...args)"
+        v-model:show="show"
+        v-model:saving="saving"
+        title="Update Organization Billable Rate">
+        <p class="py-0.5 text-center">
+            The organization billable rate will be updated to
+            <strong>{{
+                newBillableRate ? formatCents(newBillableRate) : ' none.'
+            }}</strong
+            >.
+        </p>
+        <p class="py-0.5 text-center font-semibold">
+            Do you want to update all existing time entries, where the
+            organization billable rate applies as well?
+        </p>
+    </BillableRateModal>
 </template>
 
 <style scoped></style>
diff --git a/resources/js/Components/Common/Project/ProjectBillableRateModal.vue b/resources/js/Components/Common/Project/ProjectBillableRateModal.vue
index 68872eba..df2900f9 100644
--- a/resources/js/Components/Common/Project/ProjectBillableRateModal.vue
+++ b/resources/js/Components/Common/Project/ProjectBillableRateModal.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import SecondaryButton from '@/Components/SecondaryButton.vue';
-import DialogModal from '@/Components/DialogModal.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
 import { formatCents } from '../../../utils/money';
-import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
+import BillableRateModal from '@/Components/Common/BillableRateModal.vue';
 
 const show = defineModel('show', { default: false });
 const saving = defineModel('saving', { default: false });
@@ -13,68 +10,31 @@ defineProps<{
     projectName: string;
 }>();
 
-const emit = defineEmits<{
+defineEmits<{
     submit: [billable_rate_update_time_entries: boolean];
 }>();
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false">
-        <template #title>
-            <div class="flex justify-center">
-                <span> Update Project Billable Rate </span>
-            </div>
-        </template>
-        <template #content>
-            <div class="flex items-center space-x-4">
-                <div class="col-span-6 sm:col-span-4 flex-1">
-                    <p class="py-1 text-center">
-                        The billable rate of {{ projectName }} will be updated
-                        to
-                        <strong>{{
-                            newBillableRate
-                                ? formatCents(newBillableRate)
-                                : ' the default rate of the organization'
-                        }}</strong
-                        >.
-                    </p>
-                    <p class="py-1 text-center font-semibold max-w-md mx-auto">
-                        Do you want to update all existing time entries, where
-                        the project billable rate applies as well?
-                    </p>
-
-                    <div class="space-x-3 pt-5 pb-2 flex justify-center">
-                        <PrimaryButton
-                            :class="{ 'opacity-25': saving }"
-                            :disabled="saving"
-                            @click="emit('submit', true)">
-                            Yes, update existing time entries
-                        </PrimaryButton>
-                        <PrimaryButton
-                            :class="{ 'opacity-25': saving }"
-                            :disabled="saving"
-                            @click="emit('submit', false)">
-                            No, only for new time entries
-                        </PrimaryButton>
-                    </div>
-                    <p class="text-center pt-3 pb-1">
-                        Learn more about the
-                        <a
-                            target="_blank"
-                            href="https://docs.solidtime.io/user-guide/billable-rates"
-                            class="text-blue-400 hover:text-blue-500 transition"
-                            >billable rate logic
-                            <ArrowTopRightOnSquareIcon
-                                class="w-4 -mt-0.5 inline-block"></ArrowTopRightOnSquareIcon
-                        ></a>
-                    </p>
-                </div>
-            </div>
-        </template>
-        <template #footer>
-            <SecondaryButton @click="show = false"> Cancel </SecondaryButton>
-        </template>
-    </DialogModal>
+    <BillableRateModal
+        @submit="(...args) => $emit('submit', ...args)"
+        v-model:show="show"
+        v-model:saving="saving"
+        title="Update Project Billable Rate">
+        <p class="py-1 text-center">
+            The billable rate of {{ projectName }} will be updated to
+            <strong>{{
+                newBillableRate
+                    ? formatCents(newBillableRate)
+                    : ' the default rate of the organization member'
+            }}</strong
+            >.
+        </p>
+        <p class="py-1 text-center font-semibold max-w-md mx-auto">
+            Do you want to update all existing time entries, where the project
+            billable rate applies as well?
+        </p>
+    </BillableRateModal>
 </template>
 
 <style scoped></style>
diff --git a/resources/js/Components/Common/ProjectMember/ProjectMemberBillableRateModal.vue b/resources/js/Components/Common/ProjectMember/ProjectMemberBillableRateModal.vue
index f346a417..8527da71 100644
--- a/resources/js/Components/Common/ProjectMember/ProjectMemberBillableRateModal.vue
+++ b/resources/js/Components/Common/ProjectMember/ProjectMemberBillableRateModal.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import SecondaryButton from '@/Components/SecondaryButton.vue';
-import DialogModal from '@/Components/DialogModal.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
 import { formatCents } from '../../../utils/money';
-import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
+import BillableRateModal from '@/Components/Common/BillableRateModal.vue';
 
 const show = defineModel('show', { default: false });
 const saving = defineModel('saving', { default: false });
@@ -13,67 +10,31 @@ defineProps<{
     memberName: string;
 }>();
 
-const emit = defineEmits<{
+defineEmits<{
     submit: [billable_rate_update_time_entries: boolean];
 }>();
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false">
-        <template #title>
-            <div class="flex justify-center">
-                <span> Update Project Member Billable Rate </span>
-            </div>
-        </template>
-        <template #content>
-            <div class="flex items-center space-x-4">
-                <div class="col-span-6 sm:col-span-4 flex-1">
-                    <p class="py-1 text-center">
-                        The billable rate of {{ memberName }} will be updated to
-                        <strong>{{
-                            newBillableRate
-                                ? formatCents(newBillableRate)
-                                : ' the default rate of the organization'
-                        }}</strong
-                        >.
-                    </p>
-                    <p class="py-1 text-center font-semibold max-w-md mx-auto">
-                        Do you want to update all existing time entries, where
-                        the project member billable rate applies as well?
-                    </p>
-
-                    <div class="space-x-3 pt-5 pb-2 flex justify-center">
-                        <PrimaryButton
-                            :class="{ 'opacity-25': saving }"
-                            :disabled="saving"
-                            @click="emit('submit', true)">
-                            Yes, update existing time entries
-                        </PrimaryButton>
-                        <PrimaryButton
-                            :class="{ 'opacity-25': saving }"
-                            :disabled="saving"
-                            @click="emit('submit', false)">
-                            No, only for new time entries
-                        </PrimaryButton>
-                    </div>
-                    <p class="text-center pt-3 pb-1">
-                        Learn more about the
-                        <a
-                            target="_blank"
-                            href="https://docs.solidtime.io/user-guide/billable-rates"
-                            class="text-blue-400 hover:text-blue-500 transition"
-                            >billable rate logic
-                            <ArrowTopRightOnSquareIcon
-                                class="w-4 -mt-0.5 inline-block"></ArrowTopRightOnSquareIcon
-                        ></a>
-                    </p>
-                </div>
-            </div>
-        </template>
-        <template #footer>
-            <SecondaryButton @click="show = false"> Cancel </SecondaryButton>
-        </template>
-    </DialogModal>
+    <BillableRateModal
+        @submit="(...args) => $emit('submit', ...args)"
+        v-model:show="show"
+        v-model:saving="saving"
+        title="Update Project Member Billable Rate">
+        <p class="py-1 text-center">
+            The billable rate of {{ memberName }} will be updated to
+            <strong>{{
+                newBillableRate
+                    ? formatCents(newBillableRate)
+                    : ' the default rate of the project'
+            }}</strong
+            >.
+        </p>
+        <p class="py-1 text-center font-semibold max-w-md mx-auto">
+            Do you want to update all existing time entries, where the project
+            member billable rate applies as well?
+        </p>
+    </BillableRateModal>
 </template>
 
 <style scoped></style>