flfeders/FEDEO
2
1
Fork 0
Code Issues 62 Pull Requests Actions Packages Projects 21 Releases Wiki Activity

Changed Tasks List

Browse Source 
Created Time creation
Added VueDatepicker Package
This commit is contained in:
Florian Federspiel
2023-12-21 16:04:52 +01:00
parent cc636ce040
commit e792ed39c9
6 changed files with 234 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
spaces/pages/timetracking.vue
View File

@@ -1,5 +1,8 @@
<script setup>
import * as dayjs from "dayjs";
import VueDatePicker from '@vuepic/vue-datepicker'
import '@vuepic/vue-datepicker/dist/main.css'
definePageMeta({
middleware: "auth"
@@ -21,6 +24,15 @@ const timeInfo = ref({
type: null
})
const createTimeInfo = ref({
user: "",
start: new Date(),
end: "",
notes: null,
projectId: null,
type: null
})
const columns = [
{
@@ -80,9 +92,6 @@ const startTime = async () => {
runningTimeInfo.value = times.value.find(time => time.user == user.value.id && !time.end)
}
console.log(data)
console.log(error)
}
const stopStartedTime = async () => {
@@ -115,6 +124,30 @@ if(times.value.find(time => time.user == user.value.id && !time.end)) {
runningTimeInfo.value = times.value.find(time => time.user == user.value.id && !time.end)
}
const createTime = async () => {
const {data,error} = await supabase
.from("times")
.insert([createTimeInfo.value])
.select()
if(error) {
console.log(error)
} else if(data) {
createTimeInfo.value = {}
toast.add({title: "Zeit erfolgreich erstellt"})
showAddTimeModal.value = false
await fetchTimes()
}
}
const format = (date) => {
let dateFormat = dayjs(date).format("DD.MM.YY HH:mm")
return `${dateFormat}`;
}
const selectStartedTime = () => {
runningTimeInfo.value = times.value.find(time => time.user == user.value.id && !time.end)
}
@@ -166,44 +199,95 @@ const selectStartedTime = () => {
<UFormGroup
label="Start:"
>
<VueDatePicker
v-model="createTimeInfo.start"
locale="de"
cancel-text="Abbrechen"
select-text="Auswählen"
now-button-label="Jetzt"
text-input="MM.dd.yyyy HH:mm"
:dark="useColorMode().value !== 'light'"
:format="format"
:preview-format="format"
/>
</UFormGroup>
<UFormGroup
label="Ende:"
>
<VueDatePicker
v-model="createTimeInfo.end"
locale="de"
cancel-text="Abbrechen"
select-text="Auswählen"
now-button-label="Jetzt"
text-input="MM.dd.yyyy HH:mm"
:dark="useColorMode().value !== 'light'"
:format="format"
:preview-format="format"
/>
</UFormGroup>
<UFormGroup
<!-- <UFormGroup
label="Dauer:"
>
<UInput
/>
</UFormGroup>
</UFormGroup>-->
<UFormGroup
label="Benutzer:"
>
<USelectMenu/>
<USelectMenu
:options="profiles"
v-model="createTimeInfo.user"
option-attribute="firstName"
value-attribute="id"
>
<template #label>
{{profiles.find(profile => profile.id === createTimeInfo.user) ? profiles.find(profile => profile.id === createTimeInfo.user).firstName : "Benutzer auswählen"}}
</template>
</USelectMenu>
</UFormGroup>
<UFormGroup
label="Projekt:"
>
<USelectMenu/>
<USelectMenu
:options="projects"
v-model="createTimeInfo.projectId"
option-attribute="name"
value-attribute="id"
>
<template #label>
{{projects.find(project => project.id === createTimeInfo.projectId) ? projects.find(project => project.id === createTimeInfo.projectId).name : "Projekt auswählen"}}
</template>
</USelectMenu>
</UFormGroup>
<UFormGroup
label="Typ:"
>
<USelectMenu/>
<USelectMenu
v-model="runningTimeInfo.type"
:options="timeTypes"
option-attribute="label"
value-attribute="label"
>
<template #label>
{{runningTimeInfo.type ? runningTimeInfo.type : "Kategorie auswählen"}}
</template>
</USelectMenu>
</UFormGroup>
<UFormGroup
label="Notizen:"
>
<UTextarea/>
<UTextarea
v-model="createTimeInfo.notes"
/>
</UFormGroup>
<template #footer>
<UButton>
<UButton
@click="createTime"
>
Erstellen
</UButton>
</template>
@@ -212,15 +296,12 @@ const selectStartedTime = () => {
<div>
<div class="mt-3">
Aktuelle gestarteter Eintrag:
{{runningTimeInfo.id ? runningTimeInfo : "Keine Zeit gestartet"}}
<div v-if="runningTimeInfo.id" class="mt-3">
</div>
Start: {{dayjs(runningTimeInfo.start).format("DD.MM.YY HH:mm")}}
<div v-if="runningTimeInfo.id">
<UFormGroup
label="Notizen:"
>
@@ -239,8 +320,7 @@ const selectStartedTime = () => {
v-model="runningTimeInfo.projectId"
>
<template #label>
<span v-if="runningTimeInfo.projectId">{{ projects.find(project => project.id === runningTimeInfo.projectId) ? projects.find(project => project.id === runningTimeInfo.projectId).name : "" }}</span>
<span v-else>Projekt auswählen</span>
{{ projects.find(project => project.id === runningTimeInfo.projectId) ? projects.find(project => project.id === runningTimeInfo.projectId).name : "Projekt auswählen" }}
</template>
</USelectMenu>
</UFormGroup>
@@ -253,7 +333,11 @@ const selectStartedTime = () => {
:options="timeTypes"
option-attribute="label"
value-attribute="label"
/>
>
<template #label>
{{runningTimeInfo.type ? runningTimeInfo.type : "Kategorie auswählen"}}
</template>
</USelectMenu>
</UFormGroup>
</div>
@@ -281,6 +365,9 @@ const selectStartedTime = () => {
<template #end-data="{row}">
{{dayjs(row.end).format("DD.MM.YY HH:mm")}}
</template>
<template #projectId-data="{row}">
{{projects.find(project => project.id === row.projectId) ? projects.find(project => project.id === row.projectId).name : ""}}
</template>
</UTable>
</div>