mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-14 19:22:14 +01:00
add support for interval / duration format in frontend views
This commit is contained in:
Gregor Vostrak
committed by
Constantin Graf
Constantin Graf
parent
b8d9bc5b7e
commit
c1d43bcc67
@@ -1,277 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import MainContainer from '@/packages/ui/src/MainContainer.vue';
|
||||
import AppLayout from '@/Layouts/AppLayout.vue';
|
||||
import { FolderIcon } from '@heroicons/vue/16/solid';
|
||||
import PageTitle from '@/Components/Common/PageTitle.vue';
|
||||
import {
|
||||
ChartBarIcon,
|
||||
UserGroupIcon,
|
||||
CheckCircleIcon,
|
||||
TagIcon,
|
||||
} from '@heroicons/vue/20/solid';
|
||||
import DateRangePicker from '@/packages/ui/src/Input/DateRangePicker.vue';
|
||||
import ReportingChart from '@/Components/Common/Reporting/ReportingChart.vue';
|
||||
import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import {
|
||||
formatHumanReadableDuration,
|
||||
getDayJsInstance,
|
||||
getLocalizedDayJs,
|
||||
} from '@/packages/ui/src/utils/time';
|
||||
import { type GroupingOption, useReportingStore } from '@/utils/useReporting';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
|
||||
import {
|
||||
type AggregatedTimeEntriesQueryParams,
|
||||
type CreateReportBodyProperties,
|
||||
api,
|
||||
} from '@/packages/api/src';
|
||||
import ReportingFilterBadge from '@/Components/Common/Reporting/ReportingFilterBadge.vue';
|
||||
import ProjectMultiselectDropdown from '@/Components/Common/Project/ProjectMultiselectDropdown.vue';
|
||||
import MemberMultiselectDropdown from '@/Components/Common/Member/MemberMultiselectDropdown.vue';
|
||||
import TaskMultiselectDropdown from '@/Components/Common/Task/TaskMultiselectDropdown.vue';
|
||||
import SelectDropdown from '@/packages/ui/src/Input/SelectDropdown.vue';
|
||||
import ReportingGroupBySelect from '@/Components/Common/Reporting/ReportingGroupBySelect.vue';
|
||||
import ReportingRow from '@/Components/Common/Reporting/ReportingRow.vue';
|
||||
import { getOrganizationCurrencyString } from '@/utils/money';
|
||||
import ReportingPieChart from '@/Components/Common/Reporting/ReportingPieChart.vue';
|
||||
import {
|
||||
getCurrentMembershipId,
|
||||
getCurrentOrganizationId,
|
||||
getCurrentRole,
|
||||
} from '@/utils/useUser';
|
||||
import ClientMultiselectDropdown from '@/Components/Common/Client/ClientMultiselectDropdown.vue';
|
||||
import { useTagsStore } from '@/utils/useTags';
|
||||
import { formatCents } from '@/packages/ui/src/utils/money';
|
||||
import { useSessionStorage, useStorage } from '@vueuse/core';
|
||||
import ReportingTabNavbar from '@/Components/Common/Reporting/ReportingTabNavbar.vue';
|
||||
import { useNotificationsStore } from '@/utils/notification';
|
||||
import ReportingExportButton from '@/Components/Common/Reporting/ReportingExportButton.vue';
|
||||
import type { ExportFormat } from '@/types/reporting';
|
||||
import ReportSaveButton from '@/Components/Common/Report/ReportSaveButton.vue';
|
||||
import { getRandomColorWithSeed } from '@/packages/ui/src/utils/color';
|
||||
const { handleApiRequestNotifications } = useNotificationsStore();
|
||||
import ReportingOverview from "@/Components/Common/Reporting/ReportingOverview.vue";
|
||||
|
||||
const startDate = useSessionStorage<string>(
|
||||
'reporting-start-date',
|
||||
getLocalizedDayJs(getDayJsInstance()().format()).subtract(14, 'd').format()
|
||||
);
|
||||
const endDate = useSessionStorage<string>(
|
||||
'reporting-end-date',
|
||||
getLocalizedDayJs(getDayJsInstance()().format()).format()
|
||||
);
|
||||
const selectedTags = ref<string[]>([]);
|
||||
const selectedProjects = ref<string[]>([]);
|
||||
const selectedMembers = ref<string[]>([]);
|
||||
const selectedTasks = ref<string[]>([]);
|
||||
const selectedClients = ref<string[]>([]);
|
||||
|
||||
const billable = ref<'true' | 'false' | null>(null);
|
||||
|
||||
const group = useStorage<GroupingOption>('reporting-group', 'project');
|
||||
const subGroup = useStorage<GroupingOption>('reporting-sub-group', 'task');
|
||||
|
||||
const reportingStore = useReportingStore();
|
||||
|
||||
const { aggregatedGraphTimeEntries, aggregatedTableTimeEntries } =
|
||||
storeToRefs(reportingStore);
|
||||
|
||||
const { groupByOptions } = reportingStore;
|
||||
|
||||
function getFilterAttributes(): AggregatedTimeEntriesQueryParams {
|
||||
let params: AggregatedTimeEntriesQueryParams = {
|
||||
start: getLocalizedDayJs(startDate.value).startOf('day').utc().format(),
|
||||
end: getLocalizedDayJs(endDate.value).endOf('day').utc().format(),
|
||||
};
|
||||
params = {
|
||||
...params,
|
||||
member_ids:
|
||||
selectedMembers.value.length > 0
|
||||
? selectedMembers.value
|
||||
: undefined,
|
||||
project_ids:
|
||||
selectedProjects.value.length > 0
|
||||
? selectedProjects.value
|
||||
: undefined,
|
||||
task_ids:
|
||||
selectedTasks.value.length > 0 ? selectedTasks.value : undefined,
|
||||
client_ids:
|
||||
selectedClients.value.length > 0
|
||||
? selectedClients.value
|
||||
: undefined,
|
||||
tag_ids: selectedTags.value.length > 0 ? selectedTags.value : undefined,
|
||||
billable: billable.value !== null ? billable.value : undefined,
|
||||
};
|
||||
return params;
|
||||
}
|
||||
|
||||
function updateGraphReporting() {
|
||||
const params = getFilterAttributes();
|
||||
if (getCurrentRole() === 'employee') {
|
||||
params.member_id = getCurrentMembershipId();
|
||||
}
|
||||
params.fill_gaps_in_time_groups = 'true';
|
||||
params.group = getOptimalGroupingOption(startDate.value, endDate.value);
|
||||
useReportingStore().fetchGraphReporting(params);
|
||||
}
|
||||
|
||||
function updateTableReporting() {
|
||||
const params = getFilterAttributes();
|
||||
if (group.value === subGroup.value) {
|
||||
const fallbackOption = groupByOptions.find(
|
||||
(el) => el.value !== group.value
|
||||
);
|
||||
if (fallbackOption?.value) {
|
||||
subGroup.value = fallbackOption.value;
|
||||
}
|
||||
}
|
||||
if (getCurrentRole() === 'employee') {
|
||||
params.member_id = getCurrentMembershipId();
|
||||
}
|
||||
params.group = group.value;
|
||||
params.sub_group = subGroup.value;
|
||||
useReportingStore().fetchTableReporting(params);
|
||||
}
|
||||
|
||||
function updateReporting() {
|
||||
updateGraphReporting();
|
||||
updateTableReporting();
|
||||
}
|
||||
|
||||
function getOptimalGroupingOption(
|
||||
startDate: string,
|
||||
endDate: string
|
||||
): 'day' | 'week' | 'month' {
|
||||
const diffInDays = getDayJsInstance()(endDate).diff(
|
||||
getDayJsInstance()(startDate),
|
||||
'd'
|
||||
);
|
||||
|
||||
if (diffInDays <= 31) {
|
||||
return 'day';
|
||||
} else if (diffInDays <= 200) {
|
||||
return 'week';
|
||||
} else {
|
||||
return 'month';
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
updateGraphReporting();
|
||||
updateTableReporting();
|
||||
});
|
||||
|
||||
const { tags } = storeToRefs(useTagsStore());
|
||||
async function createTag(tag: string) {
|
||||
return await useTagsStore().createTag(tag);
|
||||
}
|
||||
|
||||
const reportProperties = computed(() => {
|
||||
return {
|
||||
...getFilterAttributes(),
|
||||
group: group.value,
|
||||
sub_group: subGroup.value,
|
||||
history_group: getOptimalGroupingOption(startDate.value, endDate.value),
|
||||
} as CreateReportBodyProperties;
|
||||
});
|
||||
|
||||
async function downloadExport(format: ExportFormat) {
|
||||
const organizationId = getCurrentOrganizationId();
|
||||
if (organizationId) {
|
||||
const response = await handleApiRequestNotifications(
|
||||
() =>
|
||||
api.exportAggregatedTimeEntries({
|
||||
params: {
|
||||
organization: organizationId,
|
||||
},
|
||||
queries: {
|
||||
...getFilterAttributes(),
|
||||
group: group.value,
|
||||
sub_group: subGroup.value,
|
||||
history_group: getOptimalGroupingOption(
|
||||
startDate.value,
|
||||
endDate.value
|
||||
),
|
||||
format: format,
|
||||
},
|
||||
}),
|
||||
'Export successful',
|
||||
'Export failed'
|
||||
);
|
||||
|
||||
if (response?.download_url) {
|
||||
showExportModal.value = true;
|
||||
exportUrl.value = response.download_url as string;
|
||||
}
|
||||
}
|
||||
}
|
||||
const { getNameForReportingRowEntry, emptyPlaceholder } = useReportingStore();
|
||||
import { useProjectsStore } from '@/utils/useProjects';
|
||||
import ReportingExportModal from '@/Components/Common/Reporting/ReportingExportModal.vue';
|
||||
const projectsStore = useProjectsStore();
|
||||
const { projects } = storeToRefs(projectsStore);
|
||||
const showExportModal = ref(false);
|
||||
const exportUrl = ref<string | null>(null);
|
||||
|
||||
const groupedPieChartData = computed(() => {
|
||||
return (
|
||||
aggregatedTableTimeEntries.value?.grouped_data?.map((entry) => {
|
||||
const name = getNameForReportingRowEntry(
|
||||
entry.key,
|
||||
aggregatedTableTimeEntries.value?.grouped_type
|
||||
);
|
||||
let color = getRandomColorWithSeed(entry.key ?? 'none');
|
||||
if (
|
||||
name &&
|
||||
aggregatedTableTimeEntries.value?.grouped_type &&
|
||||
emptyPlaceholder[
|
||||
aggregatedTableTimeEntries.value?.grouped_type
|
||||
] === name
|
||||
) {
|
||||
color = '#CCCCCC';
|
||||
} else if (
|
||||
aggregatedTableTimeEntries.value?.grouped_type === 'project'
|
||||
) {
|
||||
color =
|
||||
projects.value?.find((project) => project.id === entry.key)
|
||||
?.color ?? '#CCCCCC';
|
||||
}
|
||||
return {
|
||||
value: entry.seconds,
|
||||
name:
|
||||
getNameForReportingRowEntry(
|
||||
entry.key,
|
||||
aggregatedTableTimeEntries.value?.grouped_type
|
||||
) ?? '',
|
||||
color: color,
|
||||
};
|
||||
}) ?? []
|
||||
);
|
||||
});
|
||||
|
||||
const tableData = computed(() => {
|
||||
return aggregatedTableTimeEntries.value?.grouped_data?.map((entry) => {
|
||||
return {
|
||||
seconds: entry.seconds,
|
||||
cost: entry.cost,
|
||||
description: getNameForReportingRowEntry(
|
||||
entry.key,
|
||||
aggregatedTableTimeEntries.value?.grouped_type
|
||||
),
|
||||
grouped_data:
|
||||
entry.grouped_data?.map((el) => {
|
||||
return {
|
||||
seconds: el.seconds,
|
||||
cost: el.cost,
|
||||
description: getNameForReportingRowEntry(
|
||||
el.key,
|
||||
entry.grouped_type
|
||||
),
|
||||
};
|
||||
}) ?? [],
|
||||
};
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -279,218 +10,6 @@ const tableData = computed(() => {
|
||||
title="Reporting"
|
||||
data-testid="reporting_view"
|
||||
class="overflow-hidden">
|
||||
<ReportingExportModal
|
||||
v-model:show="showExportModal"
|
||||
:export-url="exportUrl"></ReportingExportModal>
|
||||
<MainContainer
|
||||
class="py-3 sm:py-5 border-b border-default-background-separator flex justify-between items-center">
|
||||
<div class="flex items-center space-x-3 sm:space-x-6">
|
||||
<PageTitle :icon="ChartBarIcon" title="Reporting"></PageTitle>
|
||||
<ReportingTabNavbar active="reporting"></ReportingTabNavbar>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<ReportingExportButton
|
||||
:download="downloadExport"></ReportingExportButton>
|
||||
<ReportSaveButton
|
||||
:report-properties="reportProperties"></ReportSaveButton>
|
||||
</div>
|
||||
</MainContainer>
|
||||
<div class="py-2.5 w-full border-b border-default-background-separator">
|
||||
<MainContainer
|
||||
class="sm:flex space-y-4 sm:space-y-0 justify-between">
|
||||
<div
|
||||
class="flex flex-wrap items-center space-y-2 sm:space-y-0 space-x-4">
|
||||
<div class="text-sm font-medium">Filters</div>
|
||||
<MemberMultiselectDropdown
|
||||
v-model="selectedMembers"
|
||||
@submit="updateReporting">
|
||||
<template #trigger>
|
||||
<ReportingFilterBadge
|
||||
:count="selectedMembers.length"
|
||||
:active="selectedMembers.length > 0"
|
||||
title="Members"
|
||||
:icon="UserGroupIcon"></ReportingFilterBadge>
|
||||
</template>
|
||||
</MemberMultiselectDropdown>
|
||||
<ProjectMultiselectDropdown
|
||||
v-model="selectedProjects"
|
||||
@submit="updateReporting">
|
||||
<template #trigger>
|
||||
<ReportingFilterBadge
|
||||
:count="selectedProjects.length"
|
||||
:active="selectedProjects.length > 0"
|
||||
title="Projects"
|
||||
:icon="FolderIcon"></ReportingFilterBadge>
|
||||
</template>
|
||||
</ProjectMultiselectDropdown>
|
||||
<TaskMultiselectDropdown
|
||||
v-model="selectedTasks"
|
||||
@submit="updateReporting">
|
||||
<template #trigger>
|
||||
<ReportingFilterBadge
|
||||
:count="selectedTasks.length"
|
||||
:active="selectedTasks.length > 0"
|
||||
title="Tasks"
|
||||
:icon="CheckCircleIcon"></ReportingFilterBadge>
|
||||
</template>
|
||||
</TaskMultiselectDropdown>
|
||||
<ClientMultiselectDropdown
|
||||
v-model="selectedClients"
|
||||
@submit="updateReporting">
|
||||
<template #trigger>
|
||||
<ReportingFilterBadge
|
||||
:count="selectedClients.length"
|
||||
:active="selectedClients.length > 0"
|
||||
title="Clients"
|
||||
:icon="FolderIcon"></ReportingFilterBadge>
|
||||
</template>
|
||||
</ClientMultiselectDropdown>
|
||||
<TagDropdown
|
||||
v-model="selectedTags"
|
||||
:create-tag
|
||||
:tags="tags"
|
||||
@submit="updateReporting">
|
||||
<template #trigger>
|
||||
<ReportingFilterBadge
|
||||
:count="selectedTags.length"
|
||||
:active="selectedTags.length > 0"
|
||||
title="Tags"
|
||||
:icon="TagIcon"></ReportingFilterBadge>
|
||||
</template>
|
||||
</TagDropdown>
|
||||
|
||||
<SelectDropdown
|
||||
v-model="billable"
|
||||
:get-key-from-item="(item) => item.value"
|
||||
:get-name-for-item="(item) => item.label"
|
||||
:items="[
|
||||
{
|
||||
label: 'Both',
|
||||
value: null,
|
||||
},
|
||||
{
|
||||
label: 'Billable',
|
||||
value: 'true',
|
||||
},
|
||||
{
|
||||
label: 'Non Billable',
|
||||
value: 'false',
|
||||
},
|
||||
]"
|
||||
@changed="updateReporting">
|
||||
<template #trigger>
|
||||
<ReportingFilterBadge
|
||||
:active="billable !== null"
|
||||
:title="
|
||||
billable === 'false'
|
||||
? 'Non Billable'
|
||||
: 'Billable'
|
||||
"
|
||||
:icon="BillableIcon"></ReportingFilterBadge>
|
||||
</template>
|
||||
</SelectDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<DateRangePicker
|
||||
v-model:start="startDate"
|
||||
v-model:end="endDate"
|
||||
@submit="updateReporting"></DateRangePicker>
|
||||
</div>
|
||||
</MainContainer>
|
||||
</div>
|
||||
<MainContainer>
|
||||
<div class="pt-10 w-full px-3 relative">
|
||||
<ReportingChart
|
||||
:grouped-type="aggregatedGraphTimeEntries?.grouped_type"
|
||||
:grouped-data="
|
||||
aggregatedGraphTimeEntries?.grouped_data
|
||||
"></ReportingChart>
|
||||
</div>
|
||||
</MainContainer>
|
||||
<MainContainer>
|
||||
<div class="sm:grid grid-cols-4 pt-6 items-start">
|
||||
<div
|
||||
class="col-span-3 bg-card-background rounded-lg border border-card-border pt-3">
|
||||
<div
|
||||
class="text-sm flex text-text-primary items-center space-x-3 font-medium px-6 border-b border-card-background-separator pb-3">
|
||||
<span>Group by</span>
|
||||
<ReportingGroupBySelect
|
||||
v-model="group"
|
||||
:group-by-options="groupByOptions"
|
||||
@changed="updateTableReporting"></ReportingGroupBySelect>
|
||||
<span>and</span>
|
||||
<ReportingGroupBySelect
|
||||
v-model="subGroup"
|
||||
:group-by-options="
|
||||
groupByOptions.filter(
|
||||
(el) => el.value !== group
|
||||
)
|
||||
"
|
||||
@changed="updateTableReporting"></ReportingGroupBySelect>
|
||||
</div>
|
||||
<div
|
||||
class="grid items-center"
|
||||
style="grid-template-columns: 1fr 100px 150px">
|
||||
<div
|
||||
class="contents [&>*]:border-card-background-separator [&>*]:border-b [&>*]:bg-tertiary [&>*]:pb-1.5 [&>*]:pt-1 text-text-secondary text-sm">
|
||||
<div class="pl-6">Name</div>
|
||||
<div class="text-right">Duration</div>
|
||||
<div class="text-right pr-6">Cost</div>
|
||||
</div>
|
||||
<template
|
||||
v-if="
|
||||
aggregatedTableTimeEntries?.grouped_data &&
|
||||
aggregatedTableTimeEntries.grouped_data
|
||||
?.length > 0
|
||||
">
|
||||
<ReportingRow
|
||||
v-for="entry in tableData"
|
||||
:key="entry.description ?? 'none'"
|
||||
:currency="getOrganizationCurrencyString()"
|
||||
:entry="entry"
|
||||
:type="
|
||||
aggregatedTableTimeEntries.grouped_type
|
||||
"></ReportingRow>
|
||||
<div
|
||||
class="contents [&>*]:transition text-text-tertiary [&>*]:h-[50px]">
|
||||
<div class="flex items-center pl-6 font-medium">
|
||||
<span>Total</span>
|
||||
</div>
|
||||
<div
|
||||
class="justify-end flex items-center font-medium">
|
||||
{{
|
||||
formatHumanReadableDuration(
|
||||
aggregatedTableTimeEntries.seconds
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
<div
|
||||
class="justify-end pr-6 flex items-center font-medium">
|
||||
{{
|
||||
aggregatedTableTimeEntries.cost ?
|
||||
formatCents(
|
||||
aggregatedTableTimeEntries.cost,
|
||||
getOrganizationCurrencyString()
|
||||
) : '--'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
v-else
|
||||
class="chart flex flex-col items-center justify-center py-12 col-span-3">
|
||||
<p class="text-lg text-text-primary font-semibold">
|
||||
No time entries found
|
||||
</p>
|
||||
<p>Try to change the filters and time range</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-2 lg:px-4">
|
||||
<ReportingPieChart
|
||||
:data="groupedPieChartData"></ReportingPieChart>
|
||||
</div>
|
||||
</div>
|
||||
</MainContainer>
|
||||
<ReportingOverview></ReportingOverview>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
@@ -7,13 +7,13 @@ import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
|
||||
import ReportingRow from '@/Components/Common/Reporting/ReportingRow.vue';
|
||||
import ReportingPieChart from '@/Components/Common/Reporting/ReportingPieChart.vue';
|
||||
import { formatCents } from '@/packages/ui/src/utils/money';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { computed, onMounted, provide, ref } from 'vue';
|
||||
import { useQuery } from '@tanstack/vue-query';
|
||||
import { api } from '@/packages/api/src';
|
||||
import { getRandomColorWithSeed } from '@/packages/ui/src/utils/color';
|
||||
import { useReportingStore } from '@/utils/useReporting';
|
||||
import { Head } from '@inertiajs/vue3';
|
||||
import { useTheme } from "@/utils/theme";
|
||||
import { useTheme } from '@/utils/theme';
|
||||
|
||||
const sharedSecret = ref<string | null>(null);
|
||||
|
||||
@@ -47,6 +47,22 @@ const reportCurrency = computed(() => {
|
||||
return 'EUR';
|
||||
});
|
||||
|
||||
const reportIntervalFormat = computed(() => {
|
||||
return sharedReportResponseData.value?.interval_format;
|
||||
});
|
||||
|
||||
const reportNumberFormat = computed(() => {
|
||||
return sharedReportResponseData.value?.number_format;
|
||||
});
|
||||
|
||||
provide(
|
||||
'organization',
|
||||
computed(() => ({
|
||||
'number_format': reportNumberFormat.value,
|
||||
'interval_format': reportIntervalFormat.value,
|
||||
}))
|
||||
);
|
||||
|
||||
const aggregatedTableTimeEntries = computed(() => {
|
||||
if (sharedReportResponseData.value) {
|
||||
return sharedReportResponseData.value?.data;
|
||||
@@ -138,15 +154,16 @@ const tableData = computed(() => {
|
||||
});
|
||||
|
||||
const { groupByOptions } = useReportingStore();
|
||||
|
||||
function getGroupLabel(key: string) {
|
||||
return groupByOptions.find((option) => {
|
||||
return option.value === key;
|
||||
})?.label;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
useTheme();
|
||||
})
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -214,6 +231,8 @@ onMounted(async () => {
|
||||
{{
|
||||
formatHumanReadableDuration(
|
||||
aggregatedTableTimeEntries.seconds,
|
||||
reportIntervalFormat,
|
||||
reportNumberFormat
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
@@ -222,7 +241,7 @@ onMounted(async () => {
|
||||
{{
|
||||
formatCents(
|
||||
aggregatedTableTimeEntries.cost,
|
||||
reportCurrency,
|
||||
reportCurrency
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
|
||||
@@ -6,14 +6,21 @@ import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
|
||||
import type { UpdateOrganizationBody } from '@/packages/api/src';
|
||||
import { useOrganizationStore } from '@/utils/useOrganization';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/Components/ui/select';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/Components/ui/select';
|
||||
import { useMutation, useQueryClient } from '@tanstack/vue-query';
|
||||
|
||||
type NumberFormat = 'point-comma' | 'comma-point' | 'space-comma' | 'space-point' | 'apostrophe-point';
|
||||
type CurrencyFormat = 'iso-code-before-with-space' | 'iso-code-after-with-space' | 'symbol-before' | 'symbol-after' | 'symbol-before-with-space' | 'symbol-after-with-space';
|
||||
type DateFormat = 'point-separated-d-m-yyyy' | 'slash-separated-mm-dd-yyyy' | 'slash-separated-dd-mm-yyyy' | 'hyphen-separated-dd-mm-yyyy' | 'hyphen-separated-mm-dd-yyyy' | 'hyphen-separated-yyyy-mm-dd';
|
||||
type TimeFormat = '12-hours' | '24-hours';
|
||||
type IntervalFormat = 'decimal' | 'hours-minutes' | 'hours-minutes-colon-separated' | 'hours-minutes-seconds-colon-separated';
|
||||
import type {
|
||||
CurrencyFormat,
|
||||
DateFormat,
|
||||
TimeFormat,
|
||||
IntervalFormat,
|
||||
} from '@/packages/ui/src/utils/time';
|
||||
import type { NumberFormat } from '@/packages/ui/src/utils/number';
|
||||
|
||||
interface FormValues {
|
||||
number_format: NumberFormat | undefined;
|
||||
@@ -37,7 +44,8 @@ const form = ref<FormValues>({
|
||||
});
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: (values: FormValues) => updateOrganization(values as UpdateOrganizationBody),
|
||||
mutationFn: (values: FormValues) =>
|
||||
updateOrganization(values as UpdateOrganizationBody),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['organization'] });
|
||||
},
|
||||
@@ -48,10 +56,12 @@ onMounted(async () => {
|
||||
if (organization.value) {
|
||||
form.value = {
|
||||
number_format: organization.value.number_format as NumberFormat,
|
||||
currency_format: organization.value.currency_format as CurrencyFormat,
|
||||
currency_format: organization.value
|
||||
.currency_format as CurrencyFormat,
|
||||
date_format: organization.value.date_format as DateFormat,
|
||||
time_format: organization.value.time_format as TimeFormat,
|
||||
interval_format: organization.value.interval_format as IntervalFormat,
|
||||
interval_format: organization?.value
|
||||
.interval_format as IntervalFormat,
|
||||
};
|
||||
}
|
||||
});
|
||||
@@ -73,17 +83,30 @@ async function submit() {
|
||||
<!-- Number Format -->
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="numberFormat" class="mb-2" value="Number Format" />
|
||||
<InputLabel
|
||||
for="numberFormat"
|
||||
class="mb-2"
|
||||
value="Number Format" />
|
||||
<Select v-model="form.number_format">
|
||||
<SelectTrigger id="numberFormat">
|
||||
<SelectValue placeholder="Select number format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="point-comma">1.111,11</SelectItem>
|
||||
<SelectItem value="comma-point">1,111.11</SelectItem>
|
||||
<SelectItem value="space-comma">1 111,11</SelectItem>
|
||||
<SelectItem value="space-point">1 111.11</SelectItem>
|
||||
<SelectItem value="apostrophe-point">1'111.11</SelectItem>
|
||||
<SelectItem value="point-comma"
|
||||
>1.111,11</SelectItem
|
||||
>
|
||||
<SelectItem value="comma-point"
|
||||
>1,111.11</SelectItem
|
||||
>
|
||||
<SelectItem value="space-comma"
|
||||
>1 111,11</SelectItem
|
||||
>
|
||||
<SelectItem value="space-point"
|
||||
>1 111.11</SelectItem
|
||||
>
|
||||
<SelectItem value="apostrophe-point"
|
||||
>1'111.11</SelectItem
|
||||
>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -92,18 +115,29 @@ async function submit() {
|
||||
<!-- Currency Format -->
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="currencyFormat" class="mb-2" value="Currency Format" />
|
||||
<InputLabel
|
||||
for="currencyFormat"
|
||||
class="mb-2"
|
||||
value="Currency Format" />
|
||||
<Select v-model="form.currency_format">
|
||||
<SelectTrigger id="currencyFormat">
|
||||
<SelectValue placeholder="Select currency format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="iso-code-before-with-space">EUR 111</SelectItem>
|
||||
<SelectItem value="iso-code-after-with-space">111 EUR</SelectItem>
|
||||
<SelectItem value="iso-code-before-with-space"
|
||||
>EUR 111</SelectItem
|
||||
>
|
||||
<SelectItem value="iso-code-after-with-space"
|
||||
>111 EUR</SelectItem
|
||||
>
|
||||
<SelectItem value="symbol-before">€111</SelectItem>
|
||||
<SelectItem value="symbol-after">111€</SelectItem>
|
||||
<SelectItem value="symbol-before-with-space">€ 111</SelectItem>
|
||||
<SelectItem value="symbol-after-with-space">111 €</SelectItem>
|
||||
<SelectItem value="symbol-before-with-space"
|
||||
>€ 111</SelectItem
|
||||
>
|
||||
<SelectItem value="symbol-after-with-space"
|
||||
>111 €</SelectItem
|
||||
>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -112,18 +146,33 @@ async function submit() {
|
||||
<!-- Date Format -->
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="dateFormat" class="mb-2" value="Date Format" />
|
||||
<InputLabel
|
||||
for="dateFormat"
|
||||
class="mb-2"
|
||||
value="Date Format" />
|
||||
<Select v-model="form.date_format">
|
||||
<SelectTrigger id="dateFormat">
|
||||
<SelectValue placeholder="Select date format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="point-separated-d-m-yyyy">D.M.YYYY</SelectItem>
|
||||
<SelectItem value="slash-separated-mm-dd-yyyy">MM/DD/YYYY</SelectItem>
|
||||
<SelectItem value="slash-separated-dd-mm-yyyy">DD/MM/YYYY</SelectItem>
|
||||
<SelectItem value="hyphen-separated-dd-mm-yyyy">DD-MM-YYYY</SelectItem>
|
||||
<SelectItem value="hyphen-separated-mm-dd-yyyy">MM-DD-YYYY</SelectItem>
|
||||
<SelectItem value="hyphen-separated-yyyy-mm-dd">YYYY-MM-DD</SelectItem>
|
||||
<SelectItem value="point-separated-d-m-yyyy"
|
||||
>D.M.YYYY</SelectItem
|
||||
>
|
||||
<SelectItem value="slash-separated-mm-dd-yyyy"
|
||||
>MM/DD/YYYY</SelectItem
|
||||
>
|
||||
<SelectItem value="slash-separated-dd-mm-yyyy"
|
||||
>DD/MM/YYYY</SelectItem
|
||||
>
|
||||
<SelectItem value="hyphen-separated-dd-mm-yyyy"
|
||||
>DD-MM-YYYY</SelectItem
|
||||
>
|
||||
<SelectItem value="hyphen-separated-mm-dd-yyyy"
|
||||
>MM-DD-YYYY</SelectItem
|
||||
>
|
||||
<SelectItem value="hyphen-separated-yyyy-mm-dd"
|
||||
>YYYY-MM-DD</SelectItem
|
||||
>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -132,14 +181,21 @@ async function submit() {
|
||||
<!-- Time Format -->
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="timeFormat" class="mb-2" value="Time Format" />
|
||||
<InputLabel
|
||||
for="timeFormat"
|
||||
class="mb-2"
|
||||
value="Time Format" />
|
||||
<Select v-model="form.time_format">
|
||||
<SelectTrigger id="timeFormat">
|
||||
<SelectValue placeholder="Select time format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="12-hours">12-hour clock</SelectItem>
|
||||
<SelectItem value="24-hours">24-hour clock</SelectItem>
|
||||
<SelectItem value="12-hours"
|
||||
>12-hour clock</SelectItem
|
||||
>
|
||||
<SelectItem value="24-hours"
|
||||
>24-hour clock</SelectItem
|
||||
>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -148,16 +204,26 @@ async function submit() {
|
||||
<!-- Interval Format -->
|
||||
<div class="col-span-6">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="intervalFormat" class="mb-2" value="Time Duration Format" />
|
||||
<InputLabel
|
||||
for="intervalFormat"
|
||||
class="mb-2"
|
||||
value="Time Duration Format" />
|
||||
<Select v-model="form.interval_format">
|
||||
<SelectTrigger id="intervalFormat">
|
||||
<SelectValue placeholder="Select interval format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="decimal">Decimal</SelectItem>
|
||||
<SelectItem value="hours-minutes">12h 3m</SelectItem>
|
||||
<SelectItem value="hours-minutes-colon-separated">12:03</SelectItem>
|
||||
<SelectItem value="hours-minutes-seconds-colon-separated">12:03:45</SelectItem>
|
||||
<SelectItem value="hours-minutes"
|
||||
>12h 3m</SelectItem
|
||||
>
|
||||
<SelectItem value="hours-minutes-colon-separated"
|
||||
>12:03</SelectItem
|
||||
>
|
||||
<SelectItem
|
||||
value="hours-minutes-seconds-colon-separated"
|
||||
>12:03:45</SelectItem
|
||||
>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -165,9 +231,7 @@ async function submit() {
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<PrimaryButton
|
||||
:disabled="mutation.isPending.value"
|
||||
@click="submit">
|
||||
<PrimaryButton :disabled="mutation.isPending.value" @click="submit">
|
||||
{{ mutation.isPending.value ? 'Saving...' : 'Save' }}
|
||||
</PrimaryButton>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user