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

Added New Viewport Config

Browse Source
This commit is contained in:
Florian Federspiel
2023-12-11 20:30:10 +01:00
parent 2721a3b2d4
commit 2dd31690e5
4 changed files with 107 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
spaces/nuxt.config.ts
View File

@@ -16,8 +16,8 @@ export default defineNuxtConfig({
"nuxt-editorjs",
'@nuxtjs/fontaine',
'@nuxtjs/google-fonts',
'@vite-pwa/nuxt'
'@vite-pwa/nuxt',
'nuxt-viewport'
],
routeRules: {

2
spaces/package.json
View File

@@ -22,6 +22,7 @@
"@fullcalendar/core": "^6.1.10",
"@fullcalendar/daygrid": "^6.1.10",
"@fullcalendar/interaction": "^6.1.10",
"@fullcalendar/list": "^6.1.10",
"@fullcalendar/resource": "^6.1.10",
"@fullcalendar/resource-timeline": "^6.1.10",
"@fullcalendar/vue3": "^6.1.10",
@@ -37,6 +38,7 @@
"buffer": "^6.0.3",
"jsprintmanager": "^6.0.3",
"nuxt-editorjs": "^1.0.4",
"nuxt-viewport": "^2.0.6",
"papaparse": "^5.4.1",
"pinia": "^2.1.7",
"uuidv4": "^6.2.13"

35
spaces/pages/planningBoard.vue
View File

@@ -4,6 +4,14 @@ import dayGridPlugin from '@fullcalendar/daygrid'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
import deLocale from '@fullcalendar/core/locales/de'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list';
const viewport = useViewport()
watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
})
const supabase = useSupabaseClient()
@@ -37,9 +45,15 @@ const createEvent = async () => {
}
const calendarOptionsList = reactive({
locale: deLocale,
plugins: [listPlugin],
initialView: "listWeek",
initialEvents: events,
nowIndicator: true
})
const calendarOptions = reactive({
const calendarOptionsTimeline = reactive({
schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
locale: deLocale,
plugins: [resourceTimelinePlugin, interactionPlugin],
@@ -140,12 +154,21 @@ const calendarOptions = reactive({
</UCard>
</UModal>
<FullCalendar
:options="calendarOptions"
/>
<div v-if="viewport.isLessThan('tablet')">
<FullCalendar
:options="calendarOptionsList"
/>
</div>
<div v-else>
<FullCalendar
:options="calendarOptionsTimeline"
/>
</div>
</div>
</template>
<style scoped>
</style>

130
spaces/pages/tasks.vue
View File

@@ -112,72 +112,84 @@
</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>
{{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>
<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>
<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="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 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 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>
</UPage>
@@ -189,6 +201,12 @@ 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())