mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-19 13:42:14 +01:00
refactor billableratemodal to use a common component for shared logic
This commit is contained in:
Gregor Vostrak
64
resources/js/Components/Common/BillableRateModal.vue
Normal file
64
resources/js/Components/Common/BillableRateModal.vue
Normal 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>
|
||||
@@ -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,21 +10,17 @@ 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">
|
||||
<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>{{
|
||||
@@ -38,42 +31,10 @@ const emit = defineEmits<{
|
||||
>.
|
||||
</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?
|
||||
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>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -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">
|
||||
<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.'
|
||||
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?
|
||||
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>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -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">
|
||||
<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
|
||||
The billable rate of {{ projectName }} will be updated to
|
||||
<strong>{{
|
||||
newBillableRate
|
||||
? formatCents(newBillableRate)
|
||||
: ' the default rate of the organization'
|
||||
: ' 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?
|
||||
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>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -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">
|
||||
<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 organization'
|
||||
: ' 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?
|
||||
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>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user