adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-17 12:42:15 +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>

81
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,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 Member Billable Rate </span> v-model:saving="saving"
</div> title="Update Member Billable Rate">
</template> <p class="py-1 text-center">
<template #content> The billable rate of {{ memberName }} will be updated to
<div class="flex items-center space-x-4"> <strong>{{
<div class="col-span-6 sm:col-span-4 flex-1"> newBillableRate
<p class="py-1 text-center"> ? formatCents(newBillableRate)
The billable rate of {{ memberName }} will be updated to : ' the default rate of the organization'
<strong>{{ }}</strong
newBillableRate >.
? formatCents(newBillableRate) </p>
: ' the default rate of the organization' <p class="py-1 text-center font-semibold max-w-md mx-auto">
}}</strong Do you want to update all existing time entries, where the member
>. billable rate applies as well?
</p> </p>
<p class="py-1 text-center font-semibold max-w-md mx-auto"> </BillableRateModal>
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>
</template> </template>
<style scoped></style> <style scoped></style>

78
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> <p class="py-0.5 text-center">
<template #content> The organization billable rate will be updated to
<div class="flex items-center space-x-4"> <strong>{{
<div class="col-span-6 sm:col-span-4 flex-1"> newBillableRate ? formatCents(newBillableRate) : ' none.'
<p class="py-0.5 text-center"> }}</strong
The organization billable rate will be updated to >.
<strong>{{ </p>
newBillableRate <p class="py-0.5 text-center font-semibold">
? formatCents(newBillableRate) Do you want to update all existing time entries, where the
: ' none.' organization billable rate applies as well?
}}</strong </p>
>. </BillableRateModal>
</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>
</template> </template>
<style scoped></style> <style scoped></style>

82
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> <p class="py-1 text-center">
<template #content> The billable rate of {{ projectName }} will be updated to
<div class="flex items-center space-x-4"> <strong>{{
<div class="col-span-6 sm:col-span-4 flex-1"> newBillableRate
<p class="py-1 text-center"> ? formatCents(newBillableRate)
The billable rate of {{ projectName }} will be updated : ' the default rate of the organization member'
to }}</strong
<strong>{{ >.
newBillableRate </p>
? formatCents(newBillableRate) <p class="py-1 text-center font-semibold max-w-md mx-auto">
: ' the default rate of the organization' Do you want to update all existing time entries, where the project
}}</strong billable rate applies as well?
>. </p>
</p> </BillableRateModal>
<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>
</template> </template>
<style scoped></style> <style scoped></style>

81
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> <p class="py-1 text-center">
<template #content> The billable rate of {{ memberName }} will be updated to
<div class="flex items-center space-x-4"> <strong>{{
<div class="col-span-6 sm:col-span-4 flex-1"> newBillableRate
<p class="py-1 text-center"> ? formatCents(newBillableRate)
The billable rate of {{ memberName }} will be updated to : ' the default rate of the project'
<strong>{{ }}</strong
newBillableRate >.
? formatCents(newBillableRate) </p>
: ' the default rate of the organization' <p class="py-1 text-center font-semibold max-w-md mx-auto">
}}</strong Do you want to update all existing time entries, where the project
>. member billable rate applies as well?
</p> </p>
<p class="py-1 text-center font-semibold max-w-md mx-auto"> </BillableRateModal>
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>
</template> </template>
<style scoped></style> <style scoped></style>