forked from vikunja/vikunja
style: ran eslint
This commit is contained in:
parent
38a519ead6
commit
683eec1ca8
|
|
@ -1,39 +1,38 @@
|
|||
<template>
|
||||
<ProjectWrapper ref="projectWrapper" class="project-list" :project-id="projectId" :view-id>
|
||||
<template #header>
|
||||
</template>
|
||||
<ProjectWrapper
|
||||
ref="projectWrapper"
|
||||
class="project-list"
|
||||
:project-id="projectId"
|
||||
:view-id
|
||||
>
|
||||
<template #header />
|
||||
|
||||
<template #default>
|
||||
<div class="card">
|
||||
<FullCalendar :options="calendarOptions" ref="calendar" />
|
||||
<FullCalendar
|
||||
ref="calendar"
|
||||
:options="calendarOptions"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</ProjectWrapper>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
|
||||
|
||||
import { ref, computed, nextTick, onMounted, watch, type Ref } from 'vue'
|
||||
import draggable from 'zhyswan-vuedraggable'
|
||||
import { isSavedFilter } from '@/services/savedFilter'
|
||||
import { ref, watch } from 'vue'
|
||||
import ProjectWrapper from '@/components/project/ProjectWrapper.vue'
|
||||
import FullCalendar from '@fullcalendar/vue3'
|
||||
import timeGridPlugin from '@fullcalendar/timegrid'
|
||||
import interactionPlugin from '@fullcalendar/interaction'
|
||||
import type { IProject } from '@/modelTypes/IProject'
|
||||
import type { IProjectView } from '@/modelTypes/IProjectView'
|
||||
|
||||
import { defineComponent } from 'vue'
|
||||
import type { ITask } from '@/modelTypes/ITask'
|
||||
import { useTaskList } from '@/composables/useTaskList'
|
||||
import { elementClosest } from '@fullcalendar/core/internal'
|
||||
|
||||
|
||||
const calendar = ref(null)
|
||||
const projectWrapper = ref(null)
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import TaskService from '@/services/task'
|
||||
import TaskModel from '@/models/task'
|
||||
import type { DateSelectArg, EventAddArg, EventChangeArg, EventClickArg, CustomContentGenerator, EventContentArg } from '@fullcalendar/core/index.js'
|
||||
|
||||
const {
|
||||
projectId,
|
||||
|
|
@ -42,21 +41,14 @@ const {
|
|||
projectId: IProject['id'],
|
||||
viewId: IProjectView['id'],
|
||||
}>()
|
||||
const calendar = ref(null)
|
||||
const projectWrapper = ref(null)
|
||||
|
||||
|
||||
const {
|
||||
tasks: allTasks,
|
||||
loading,
|
||||
totalPages,
|
||||
currentPage,
|
||||
loadTasks,
|
||||
params,
|
||||
sortByParam,
|
||||
} = useTaskList(() => projectId, () => viewId)
|
||||
|
||||
const tasks = ref<ITask[]>([])
|
||||
|
||||
|
||||
let eventGuid = 0
|
||||
let todayStr = new Date().toISOString().replace(/T.*$/, '') // YYYY-MM-DD of today
|
||||
|
||||
/*
|
||||
onMounted(() => {
|
||||
|
|
@ -69,9 +61,6 @@ onMounted(() => {
|
|||
})
|
||||
*/
|
||||
|
||||
let initialEvents = [];
|
||||
|
||||
|
||||
function is_midnight(time?: Date) {
|
||||
return (time && time.getHours() == 0 && time.getMinutes() == 0)
|
||||
}
|
||||
|
|
@ -79,9 +68,9 @@ function is_midnight(time?: Date) {
|
|||
watch(
|
||||
allTasks,
|
||||
() => {
|
||||
console.log(allTasks.value);
|
||||
for (let task of allTasks.value) {
|
||||
let allDay = (task.startDate && is_midnight(task.startDate) && task.endDate && (is_midnight(task.endDate) || is_midnight(task.endDate)));
|
||||
console.log(allTasks.value)
|
||||
for (const task of allTasks.value) {
|
||||
const allDay = (task.startDate && is_midnight(task.startDate) && task.endDate && (is_midnight(task.endDate) || is_midnight(task.endDate)))
|
||||
|
||||
if (task.startDate)
|
||||
calendar.value.calendar.addEvent({
|
||||
|
|
@ -93,30 +82,23 @@ watch(
|
|||
color: task.hexColor,
|
||||
extendedProps: {
|
||||
exists: true,
|
||||
task: task
|
||||
}
|
||||
});
|
||||
task: task,
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
let eventGuid = 0
|
||||
|
||||
function createEventId() {
|
||||
return String(eventGuid++)
|
||||
}
|
||||
|
||||
|
||||
|
||||
function handleWeekendsToggle() {
|
||||
calendarOptions.value.weekends = calendarOptions.value.weekends // update a property
|
||||
};
|
||||
|
||||
function handleDateSelect(selectInfo: { view: { calendar: any }; startStr: any; endStr: any; allDay: any }) {
|
||||
|
||||
|
||||
function handleDateSelect(selectInfo: DateSelectArg) {
|
||||
//let title = prompt('Please enter a new title for your event')
|
||||
let title = "test"
|
||||
let calendarApi = selectInfo.view.calendar
|
||||
const title = 'test'
|
||||
const calendarApi = selectInfo.view.calendar
|
||||
|
||||
calendarApi.unselect() // clear date selection
|
||||
|
||||
|
|
@ -126,56 +108,50 @@ function handleDateSelect(selectInfo: { view: { calendar: any }; startStr: any;
|
|||
title,
|
||||
start: selectInfo.startStr,
|
||||
end: selectInfo.endStr,
|
||||
allDay: selectInfo.allDay
|
||||
allDay: selectInfo.allDay,
|
||||
})
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function handleEventClick(clickInfo: { event: any }) {
|
||||
function handleEventClick(clickInfo: EventClickArg) {
|
||||
if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
|
||||
clickInfo.event.extendedProps.task.done != clickInfo.event.extendedProps.task.done
|
||||
console.log("here")
|
||||
console.log('here')
|
||||
clickInfo.view.calendar.render()
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function parseTime(time: Date | null) {
|
||||
if (time)
|
||||
return time.getHours() + ":" + String(time.getMinutes()).padStart(2, 0)
|
||||
return time.getHours() + ':' + String(time.getMinutes()).padStart(2, 0)
|
||||
else
|
||||
return ""
|
||||
return ''
|
||||
}
|
||||
|
||||
function eventRender(info: any) {
|
||||
const event = info.event;
|
||||
let timeEl = document.createElement("p");
|
||||
let titleEl = document.createElement("p");
|
||||
function eventRender(info: CustomContentGenerator<EventContentArg>) {
|
||||
const event = info.event
|
||||
const timeEl = document.createElement('p')
|
||||
let titleEl = document.createElement('p')
|
||||
timeEl.innerHTML = parseTime(event.start)
|
||||
titleEl.innerHTML = event.title
|
||||
if (event.end)
|
||||
timeEl.innerHTML += " - " + parseTime(event.end);
|
||||
timeEl.innerHTML += ' - ' + parseTime(event.end)
|
||||
|
||||
if (event.extendedProps.task.done) {
|
||||
let strikethroughEl = document.createElement("s");
|
||||
strikethroughEl.innerHTML = titleEl.innerHTML;
|
||||
titleEl = strikethroughEl;
|
||||
const strikethroughEl = document.createElement('s')
|
||||
strikethroughEl.innerHTML = titleEl.innerHTML
|
||||
titleEl = strikethroughEl
|
||||
}
|
||||
|
||||
return { domNodes: [titleEl, timeEl] }
|
||||
// {description: "Lecture", department: "BioChemistry"}
|
||||
}
|
||||
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useTaskStore } from '@/stores/tasks'
|
||||
import TaskService from '@/services/task'
|
||||
import TaskModel from '@/models/task'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const taskStore = useTaskStore()
|
||||
const taskService = new TaskService()
|
||||
let firstDayOfWeek = Math.min(authStore.settings.weekStart ?? 0, 2)
|
||||
const firstDayOfWeek = Math.min(authStore.settings.weekStart ?? 0, 2)
|
||||
|
||||
|
||||
async function eventAddHandler(addEvent:any) {
|
||||
async function eventAddHandler(addEvent: EventAddArg) {
|
||||
if(addEvent.event.extendedProps.exists) {
|
||||
return
|
||||
}
|
||||
|
|
@ -187,29 +163,32 @@ async function eventAddHandler(addEvent:any) {
|
|||
})
|
||||
|
||||
const createdTask = await taskService.create(task)
|
||||
|
||||
addEvent.event.id = createdTask.id
|
||||
eventGuid = createdTask.id + 1
|
||||
}
|
||||
|
||||
async function eventChangeHandler(changeEvent:any) {
|
||||
let task: ITask = changeEvent.event.extendedProps.task;
|
||||
task.startDate = changeEvent.event.start;
|
||||
task.endDate = changeEvent.event.end;
|
||||
async function eventChangeHandler(changeEvent: EventChangeArg) {
|
||||
const task: ITask = changeEvent.event.extendedProps.task
|
||||
task.startDate = changeEvent.event.start
|
||||
task.endDate = changeEvent.event.end
|
||||
|
||||
const updatedTask = await taskService.update(task)
|
||||
/*const updatedTask = */await taskService.update(task)
|
||||
}
|
||||
|
||||
|
||||
const calendarOptions = ref({
|
||||
plugins: [
|
||||
timeGridPlugin,
|
||||
interactionPlugin // needed for dateClick
|
||||
interactionPlugin, // needed for dateClick
|
||||
],
|
||||
headerToolbar: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'timeGridWeek,timeGridDay'
|
||||
right: 'timeGridWeek,timeGridDay',
|
||||
},
|
||||
initialView: 'timeGridWeek',
|
||||
initialEvents: initialEvents, // alternatively, use the `events` setting to fetch from a feed
|
||||
//initialEvents: initialEvents, // alternatively, use the `events` setting to fetch from a feed
|
||||
editable: true,
|
||||
selectable: true,
|
||||
selectMirror: true,
|
||||
|
|
@ -220,12 +199,12 @@ const calendarOptions = ref({
|
|||
eventClick: handleEventClick,
|
||||
eventContent: eventRender,
|
||||
eventAdd: eventAddHandler,
|
||||
eventChange: eventChangeHandler
|
||||
eventChange: eventChangeHandler,
|
||||
/* you can update a remote database when these fire:
|
||||
eventAdd:
|
||||
eventRemove:
|
||||
*/
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user