Rename and restructure variables

This commit is contained in:
Niko Reunanen 2025-03-01 09:32:54 +02:00
parent ff6804a6e7
commit 03107fb305
Signed by: nreunane
GPG key ID: D192625387DB0F16

View file

@ -6,9 +6,11 @@ import DatePicker from "primevue/datepicker";
import Dialog from "primevue/dialog";
import { inject, ref } from "vue";
const date = ref(new Date());
const totalHours = ref(0);
const totalHoursVisible = ref(false);
const modalTotalHours = ref({
hours: 0,
visible: false,
});
const selectedDate = ref(new Date());
const pb = inject("pb") as PocketBase;
const props = defineProps<{ org: string; projects: Project[] }>();
@ -16,21 +18,21 @@ const props = defineProps<{ org: string; projects: Project[] }>();
const emits = defineEmits<{ date: [Date]; project: [string] }>();
function setDate(offset: number) {
date.value = new Date(date.value.setDate(date.value.getDate() + offset));
emits("date", date.value);
selectedDate.value = new Date(selectedDate.value.setDate(selectedDate.value.getDate() + offset));
emits("date", selectedDate.value);
}
async function showTotalHours() {
const year = date.value.getFullYear();
const month = date.value.getMonth() + 1;
async function showModalTotalHours() {
const year = selectedDate.value.getFullYear();
const month = selectedDate.value.getMonth() + 1;
const monthDoubleDigit = month < 10 ? `0${month}` : month.toString();
const organisation = props.org;
const response = await pb.send(`/hours/${organisation}/${year}/${monthDoubleDigit}`, {});
if (response.error === null) {
totalHours.value = Math.round(response.hours * 100) / 100;
totalHoursVisible.value = true;
modalTotalHours.value.hours = Math.round(response.hours * 100) / 100;
modalTotalHours.value.visible = true;
} else {
console.error(response.error);
}
@ -39,10 +41,10 @@ async function showTotalHours() {
<template>
<Button label="<" @click="setDate(-1)" style="margin-left: 20px;" />
<DatePicker v-model="date" style="width: 150px;" />
<Button label=">" @click="setDate(1)" />
<Button label="Total hours" @click="showTotalHours" style="margin-left: 20px;" />
<Dialog v-model:visible="totalHoursVisible" modal header="Total hours" :style="{ width: '25rem' }">
<p>Hours: {{ totalHours }}</p>
<DatePicker v-model="selectedDate" style="width: 150px; margin-left: 3px;" />
<Button label=">" @click="setDate(1)" style="margin-left: 3px;" />
<Button label="total hours" @click="showModalTotalHours" style="margin-left: 20px;" />
<Dialog v-model:visible="modalTotalHours.visible" modal header="Total hours" :style="{ width: '25rem' }">
<p>Hours: {{ modalTotalHours.hours }}</p>
</Dialog>
</template>