flfeders/FEDEO
2
1
Fork 0
Code Issues 63 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

38
spaces/app.vue
View File

@@ -57,16 +57,9 @@ const navLinks = [
]
},
{
label: "Aufgaben",
to: "/tasks",
icon: "i-heroicons-rectangle-stack"
},
{
label: "Plantafel",
to: "/planningBoard",
icon: "i-heroicons-calendar-days"
},
label: "Aufträge",
icon: "i-heroicons-square-3-stack-3d",
children: [
{
label: "Projekte",
to: "/projects",
@@ -77,6 +70,29 @@ const navLinks = [
to: "/jobs",
icon: "i-heroicons-square-3-stack-3d"
},
{
label: "Verträge",
to: "/contracts",
icon: "i-heroicons-clipboard-document"
},
]
},
{
label: "Planung",
icon: "i-heroicons-square-3-stack-3d",
children: [
{
label: "Aufgaben",
to: "/tasks",
icon: "i-heroicons-rectangle-stack"
},
{
label: "Plantafel",
to: "/planningBoard",
icon: "i-heroicons-calendar-days"
},
]
},
{
label: "Dokumente",
to: "/documents",
@@ -219,7 +235,7 @@ const items = [
/>
<img
v-else
src="/spaces_hell.svg"
src="/spaces.svg"
alt="Logo Dunkel"
/>
</div>

3
spaces/nuxt.config.ts
View File

@@ -7,6 +7,9 @@ export default defineNuxtConfig({
extends: [
'@nuxt/ui-pro'
],
build: {
transpile: ['@vuepic/vue-datepicker']
},
modules: [
'@pinia/nuxt',
'@nuxt/ui',

3
spaces/package.json
View File

@@ -34,6 +34,7 @@
"@pinia/nuxt": "^0.5.1",
"@popperjs/core": "^2.11.8",
"@vicons/ionicons5": "^0.12.0",
"@vuepic/vue-datepicker": "^7.4.0",
"@zip.js/zip.js": "^2.7.32",
"axios": "^1.6.2",
"buffer": "^6.0.3",
@@ -45,6 +46,6 @@
"pinia": "^2.1.7",
"socket.io-client": "^4.7.2",
"uuidv4": "^6.2.13",
"v-calendar": "^3.1.2",
"v-calendar": "^3.1.2"
}
}

2
spaces/pages/login.vue
View File

@@ -23,7 +23,7 @@ const onSubmit = async () => {
alert(error.toString())
} else {
console.log("Login Successful")
await fetchData()
fetchData()
router.push("/")

214
spaces/pages/tasks.vue
View File

@@ -86,148 +86,126 @@
/>
</UFormGroup>
<UFormGroup
label="Benutzer ändern:"
>
<USelectMenu
:options="profiles"
@change="updateTask"
v-model="taskData.user"
option-attribute="firstName"
value-attribute="id"
>
<template #label>
{{profiles.find(profile => profile.id === taskData.user) ? profiles.find(profile => profile.id === taskData.user).firstName : 'Kein Benutzer ausgewählt'}}
</template>
</USelectMenu>
</UFormGroup>
</template>
</UCard>
</UModal>
<div id="menuBar">
<UButton
class="mb-3 mr-3"
@click="showCreateTask = true"
<div class="flex items-center gap-1">
<UButton @click="showCreateTask = true">+ Aufgabe</UButton>
<UInput
v-model="searchString"
placeholder="Suche..."
/>
<UCheckbox
label="Erledigte Anzeigen"
v-model="showDoneTasks"
/>
</div>
<UTable
:rows="filteredRows"
:columns="taskColumns"
@select="inspectTask"
>
+ Aufgabe
</UButton>
<!-- <USelectMenu
:options="usersForList"
v-model="usersSelected"
multiple
placeholder="Benutzer"
class="w-40"
v-on:change="filterTasks"
>
<template #label>
<span v-if="usersSelected.length" class="truncate">{{ usersSelected.join(', ') }}</span>
<span v-else>Benutzer auswählen</span>
<template #created_at-data="{row}">
{{ dayjs(row.created_at).format("DD.MM.YY HH:mm") }}
</template>
</USelectMenu>-->
</div>
<div v-if="viewport.isLessThan('tablet')" class="scrollList">
<a
v-for="task in tasks.filter(item => item.categorie != 'Erledigt')"
>
<UCard class="listItem">
<template #header>
<UBadge>{{task.categorie}}</UBadge> {{task.name}}
<template #user-data="{row}">
{{profiles.find(profile => profile.id === row.user ) ? profiles.find(profile => profile.id === row.user ).firstName : row.user}}
</template>
{{task.description}}
</UCard>
</a>
</div>
<div v-else>
<div id="taskCatList">
<div id="catNew">
<h3>Offene Aufgaben</h3>
<div class="taskScrollList" v-if="tasks.length > 0">
<a
v-for="taskNew in tasks.filter(task => task.categorie == 'Offen')"
@click="inspectTask(taskNew)"
>
<UCard class="listItem">
{{taskNew.name}}
<UBadge
v-for="user in taskNew.users"
class="mr-2"
>
{{user}}
</UBadge>
</UCard>
</a>
</div>
</UTable>
</div>
<div id="catInProgress">
<h3>Aufgaben in Bearbeitung</h3>
<div class="taskScrollList" v-if="tasks.length > 0">
<a
v-for="taskNew in tasks.filter(task => task.categorie == 'In Bearbeitung')"
@click="inspectTask(taskNew)"
>
<UCard class="listItem">
{{taskNew.name}}
<UBadge
v-for="user in taskNew.users"
class="mr-2"
>
{{user}}
</UBadge>
</UCard>
</a>
</div>
</div>
<div id="catUrgent">
<h3>Dringende Aufgaben</h3>
<div class="taskScrollList" v-if="tasks.length > 0">
<a
v-for="taskNew in tasks.filter(task => task.categorie == 'Dringend')"
@click="inspectTask(taskNew)"
>
<UCard class="listItem">
{{taskNew.name}}
<UBadge
v-for="user in taskNew.users"
class="mr-2"
>
{{user}}
</UBadge>
</UCard>
</a>
</div>
</div>
</div>
</div>
</UPage>
</template>
<script setup>
import * as dayjs from "dayjs";
definePageMeta({
middleware: "auth",
})
const viewport = useViewport()
watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
})
const toast = useToast()
const supabase = useSupabaseClient()
const {tasks} = storeToRefs(useDataStore())
const {tasks, profiles} = storeToRefs(useDataStore())
const {fetchTasks} = useDataStore()
let refTasks = ref([])
const taskColumns = [
{
key:"created_at",
label: "Erstellt am:",
sortable: true
},
{
key:"name",
label: "Name:",
sortable: true
},
{
key:"user",
label: "Benutzer:",
sortable: true
},
{
key:"description",
label: "Beschreibung:",
sortable: true
},
{
key:"categorie",
label: "Kategorie:",
sortable: true
}
]
const showDoneTasks = ref(false)
const searchString = ref("")
const filteredRows = computed(() => {
let usersForList = []
//users.forEach(user => usersForList.push(user.username))
const usersSelected = ref([])
usersSelected.value = usersForList
let filteredTasks = tasks.value.filter(task => !showDoneTasks.value ? task.categorie !== "Erledigt" : task.categorie === "Erledigt")
if(!searchString.value) {
return filteredTasks
}
return filteredTasks.filter(item => {
return Object.values(item).some((value) => {
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
})
})
})
const showCreateTask = ref(false)
const taskCategories = ["Offen","In Bearbeitung", "Dringend","Erledigt"]
const createTaskData = ref({
name: "",
description: "",
categorie: "Offen"
categorie: "Offen",
user: ""
/*users: ["86e67794-0ea8-41b0-985a-1072e84f56e9"]*/
})
@@ -269,31 +247,11 @@ const updateTask = async () => {
}
const inspectTask = (task) => {
taskData.value = task
showTaskModal.value = true
}
const filterTasks = () => {
refTasks.value = tasks.filter(task => usersSelected.value.some(user => (task.users ? (task.users.includes(user)) : true )))
}
const finishTask = async () => {
console.log("Start")
const {error} = await supabase
.from("tasks")
.update({categorie: "Erledigt"})
.eq('id',taskData.value.id)
//console.log(data)
console.log(error)
showTaskModal.value = false
fetchTasks()
}
//filterTasks()
</script>
<style scoped>

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>