adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-18 13:12:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor billableratemodal to use a common component for shared logic

Browse Source
This commit is contained in:
Gregor Vostrak
2024-07-08 14:40:59 +02:00
parent e3b4cfd881
commit be50397775
5 changed files with 146 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
resources/js/Components/Common/BillableRateModal.vue Normal file
View File

@@ -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>

59
resources/js/Components/Common/Member/MemberBillableRateModal.vue
View File

@@ -1,9 +1,6 @@
<script setup lang="ts"> <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 { 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 show = defineModel('show', { default: false });
const saving = defineModel('saving', { default: false }); const saving = defineModel('saving', { default: false });
@@ -13,21 +10,17 @@ defineProps<{
memberName: string; memberName: string;
}>(); }>();
const emit = defineEmits<{ defineEmits<{
submit: [billable_rate_update_time_entries: boolean]; submit: [billable_rate_update_time_entries: boolean];
}>(); }>();
</script> </script>
<template> <template>
<DialogModal closeable :show="show" @close="show = false"> <BillableRateModal
<template #title> @submit="(...args) => $emit('submit', ...args)"
<div class="flex justify-center"> v-model:show="show"
<span> Update Member Billable Rate </span> v-model:saving="saving"
</div> title="Update Member Billable Rate">
</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"> <p class="py-1 text-center">
The billable rate of {{ memberName }} will be updated to The billable rate of {{ memberName }} will be updated to
<strong>{{ <strong>{{
@@ -38,42 +31,10 @@ const emit = defineEmits<{
>. >.
</p> </p>
<p class="py-1 text-center font-semibold max-w-md mx-auto"> <p class="py-1 text-center font-semibold max-w-md mx-auto">
Do you want to update all existing time entries, where Do you want to update all existing time entries, where the member
the member billable rate applies as well? billable rate applies as well?
</p> </p>
</BillableRateModal>
<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> </template>
<style scoped></style> <style scoped></style>

62
resources/js/Components/Common/Organization/OrganizationBillableRateModal.vue
View File

@@ -1,9 +1,6 @@
<script setup lang="ts"> <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 { 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 show = defineModel('show', { default: false });
const saving = defineModel('saving', { default: false }); const saving = defineModel('saving', { default: false });
@@ -12,66 +9,29 @@ defineProps<{
newBillableRate?: number | null; newBillableRate?: number | null;
}>(); }>();
const emit = defineEmits<{ defineEmits<{
submit: [billable_rate_update_time_entries: boolean]; submit: [billable_rate_update_time_entries: boolean];
}>(); }>();
</script> </script>
<template> <template>
<DialogModal closeable :show="show" @close="show = false"> <BillableRateModal
<template #title> @submit="(...args) => $emit('submit', ...args)"
<div class="flex justify-center"> v-model:show="show"
<span> Update Organization Billable Rate </span> v-model:saving="saving"
</div> title="Update Organization Billable Rate">
</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"> <p class="py-0.5 text-center">
The organization billable rate will be updated to The organization billable rate will be updated to
<strong>{{ <strong>{{
newBillableRate newBillableRate ? formatCents(newBillableRate) : ' none.'
? formatCents(newBillableRate)
: ' none.'
}}</strong }}</strong
>. >.
</p> </p>
<p class="py-0.5 text-center font-semibold"> <p class="py-0.5 text-center font-semibold">
Do you want to update all existing time entries, where Do you want to update all existing time entries, where the
the organization billable rate applies as well? organization billable rate applies as well?
</p> </p>
<div class="space-x-3 pt-5 pb-2 flex justify-center"> </BillableRateModal>
<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> </template>
<style scoped></style> <style scoped></style>

64
resources/js/Components/Common/Project/ProjectBillableRateModal.vue
View File

@@ -1,9 +1,6 @@
<script setup lang="ts"> <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 { 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 show = defineModel('show', { default: false });
const saving = defineModel('saving', { default: false }); const saving = defineModel('saving', { default: false });
@@ -13,68 +10,31 @@ defineProps<{
projectName: string; projectName: string;
}>(); }>();
const emit = defineEmits<{ defineEmits<{
submit: [billable_rate_update_time_entries: boolean]; submit: [billable_rate_update_time_entries: boolean];
}>(); }>();
</script> </script>
<template> <template>
<DialogModal closeable :show="show" @close="show = false"> <BillableRateModal
<template #title> @submit="(...args) => $emit('submit', ...args)"
<div class="flex justify-center"> v-model:show="show"
<span> Update Project Billable Rate </span> v-model:saving="saving"
</div> title="Update Project Billable Rate">
</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"> <p class="py-1 text-center">
The billable rate of {{ projectName }} will be updated The billable rate of {{ projectName }} will be updated to
to
<strong>{{ <strong>{{
newBillableRate newBillableRate
? formatCents(newBillableRate) ? formatCents(newBillableRate)
: ' the default rate of the organization' : ' the default rate of the organization member'
}}</strong }}</strong
>. >.
</p> </p>
<p class="py-1 text-center font-semibold max-w-md mx-auto"> <p class="py-1 text-center font-semibold max-w-md mx-auto">
Do you want to update all existing time entries, where Do you want to update all existing time entries, where the project
the project billable rate applies as well? billable rate applies as well?
</p> </p>
</BillableRateModal>
<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> </template>
<style scoped></style> <style scoped></style>

61
resources/js/Components/Common/ProjectMember/ProjectMemberBillableRateModal.vue
View File

@@ -1,9 +1,6 @@
<script setup lang="ts"> <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 { 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 show = defineModel('show', { default: false });
const saving = defineModel('saving', { default: false }); const saving = defineModel('saving', { default: false });
@@ -13,67 +10,31 @@ defineProps<{
memberName: string; memberName: string;
}>(); }>();
const emit = defineEmits<{ defineEmits<{
submit: [billable_rate_update_time_entries: boolean]; submit: [billable_rate_update_time_entries: boolean];
}>(); }>();
</script> </script>
<template> <template>
<DialogModal closeable :show="show" @close="show = false"> <BillableRateModal
<template #title> @submit="(...args) => $emit('submit', ...args)"
<div class="flex justify-center"> v-model:show="show"
<span> Update Project Member Billable Rate </span> v-model:saving="saving"
</div> title="Update Project Member Billable Rate">
</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"> <p class="py-1 text-center">
The billable rate of {{ memberName }} will be updated to The billable rate of {{ memberName }} will be updated to
<strong>{{ <strong>{{
newBillableRate newBillableRate
? formatCents(newBillableRate) ? formatCents(newBillableRate)
: ' the default rate of the organization' : ' the default rate of the project'
}}</strong }}</strong
>. >.
</p> </p>
<p class="py-1 text-center font-semibold max-w-md mx-auto"> <p class="py-1 text-center font-semibold max-w-md mx-auto">
Do you want to update all existing time entries, where Do you want to update all existing time entries, where the project
the project member billable rate applies as well? member billable rate applies as well?
</p> </p>
</BillableRateModal>
<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> </template>
<style scoped></style> <style scoped></style>