fix: use props destructuring everywhere
This commit is contained in:
parent
78a268ab07
commit
3aa502e07d
@ -84,14 +84,17 @@ import ColorBubble from '@/components/misc/colorBubble.vue'
|
||||
import ProjectsNavigation from '@/components/home/ProjectsNavigation.vue'
|
||||
import {canNestProjectDeeper} from '@/helpers/canNestProjectDeeper'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
const {
|
||||
project,
|
||||
isLoading,
|
||||
canCollapse,
|
||||
level = 0,
|
||||
} = defineProps<{
|
||||
project: IProject,
|
||||
isLoading?: boolean,
|
||||
canCollapse?: boolean,
|
||||
level?: number,
|
||||
}>(), {
|
||||
level: 0,
|
||||
})
|
||||
}>()
|
||||
|
||||
const projectStore = useProjectStore()
|
||||
const baseStore = useBaseStore()
|
||||
@ -104,12 +107,12 @@ const childProjects = computed(() => {
|
||||
return []
|
||||
}
|
||||
|
||||
return projectStore.getChildProjects(props.project.id)
|
||||
return projectStore.getChildProjects(project.id)
|
||||
.filter(p => !p.isArchived)
|
||||
.sort((a, b) => a.position - b.position)
|
||||
})
|
||||
|
||||
const canNestDeeper = computed(() => canNestProjectDeeper(props.level))
|
||||
const canNestDeeper = computed(() => canNestProjectDeeper(level))
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
@ -35,7 +35,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, toRef, watch} from 'vue'
|
||||
import {computed, ref, watch} from 'vue'
|
||||
import {createRandomID} from '@/helpers/randomId'
|
||||
import XButton from '@/components/input/button.vue'
|
||||
|
||||
@ -53,22 +53,16 @@ const lastChangeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
|
||||
const defaultColors = ref(DEFAULT_COLORS)
|
||||
const colorListID = ref(createRandomID())
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
menuPosition: {
|
||||
type: String,
|
||||
default: 'top',
|
||||
},
|
||||
})
|
||||
const {
|
||||
modelValue,
|
||||
} = defineProps<{
|
||||
modelValue: string,
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const modelValue = toRef(props, 'modelValue')
|
||||
watch(
|
||||
modelValue,
|
||||
() => modelValue,
|
||||
(newValue) => {
|
||||
color.value = newValue
|
||||
},
|
||||
|
@ -75,17 +75,19 @@ import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import {ref, useAttrs, watchEffect} from 'vue'
|
||||
import {useScrollLock} from '@vueuse/core'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
const {
|
||||
enabled = true,
|
||||
overflow,
|
||||
wide,
|
||||
transitionName = 'modal',
|
||||
variant = 'default',
|
||||
} = defineProps<{
|
||||
enabled?: boolean,
|
||||
overflow?: boolean,
|
||||
wide?: boolean,
|
||||
transitionName?: 'modal' | 'fade',
|
||||
variant?: 'default' | 'hint-modal' | 'scrolling',
|
||||
}>(), {
|
||||
enabled: true,
|
||||
transitionName: 'modal',
|
||||
variant: 'default',
|
||||
})
|
||||
}>()
|
||||
|
||||
defineEmits(['close', 'submit'])
|
||||
|
||||
@ -95,7 +97,7 @@ const modal = ref<HTMLElement | null>(null)
|
||||
const scrollLock = useScrollLock(modal)
|
||||
|
||||
watchEffect(() => {
|
||||
scrollLock.value = props.enabled
|
||||
scrollLock.value = enabled
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -200,10 +202,10 @@ $modal-width: 1024px;
|
||||
right: $close-button-padding;
|
||||
color: var(--grey-900);
|
||||
font-size: 2rem;
|
||||
|
||||
|
||||
@media screen and (min-width: $desktop) and (max-width: calc(#{$desktop } + #{$close-button-min-space})) {
|
||||
top: calc(5px + $modal-margin);
|
||||
right: 50%;
|
||||
right: 50%;
|
||||
// we align the close button to the modal until there is enough space outside for it
|
||||
transform: translateX(calc((#{$modal-width} / 2) - #{$close-button-padding}));
|
||||
}
|
||||
|
@ -44,8 +44,6 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {toRef, type PropType} from 'vue'
|
||||
|
||||
import type {IProject} from '@/modelTypes/IProject'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
@ -53,14 +51,13 @@ import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import {useProjectBackground} from './useProjectBackground'
|
||||
import {useProjectStore} from '@/stores/projects'
|
||||
|
||||
const props = defineProps({
|
||||
project: {
|
||||
type: Object as PropType<IProject>,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const {
|
||||
project,
|
||||
} = defineProps<{
|
||||
project: IProject,
|
||||
}>()
|
||||
|
||||
const {background, blurHashUrl} = useProjectBackground(toRef(props, 'project'))
|
||||
const {background, blurHashUrl} = useProjectBackground(project)
|
||||
|
||||
const projectStore = useProjectStore()
|
||||
</script>
|
||||
|
@ -180,13 +180,13 @@ import {useI18n} from 'vue-i18n'
|
||||
const taskStore = useTaskStore()
|
||||
const {t} = useI18n({useScope: 'global'})
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
const {
|
||||
task,
|
||||
editEnabled = true,
|
||||
} = defineProps<{
|
||||
task: ITask,
|
||||
initialAttachments?: IAttachment[],
|
||||
editEnabled: boolean,
|
||||
}>(), {
|
||||
editEnabled: true,
|
||||
})
|
||||
}>()
|
||||
|
||||
// FIXME: this should go through the store
|
||||
const emit = defineEmits(['task-changed'])
|
||||
@ -223,7 +223,7 @@ function uploadNewAttachment() {
|
||||
}
|
||||
|
||||
function uploadFilesToTask(files: File[] | FileList) {
|
||||
uploadFiles(attachmentService, props.task.id, files)
|
||||
uploadFiles(attachmentService, task.id, files)
|
||||
}
|
||||
|
||||
const attachmentToDelete = ref<IAttachment | null>(null)
|
||||
@ -260,11 +260,11 @@ async function viewOrDownload(attachment: IAttachment) {
|
||||
const copy = useCopyToClipboard()
|
||||
|
||||
function copyUrl(attachment: IAttachment) {
|
||||
copy(generateAttachmentUrl(props.task.id, attachment.id))
|
||||
copy(generateAttachmentUrl(task.id, attachment.id))
|
||||
}
|
||||
|
||||
async function setCoverImage(attachment: IAttachment | null) {
|
||||
const task = await taskStore.setCoverImage(props.task, attachment)
|
||||
const task = await taskStore.setCoverImage(task, attachment)
|
||||
emit('task-changed', task)
|
||||
success({message: t('task.attachment.successfullyChangedCoverImage')})
|
||||
}
|
||||
|
@ -38,7 +38,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount, toRef, type PropType} from 'vue'
|
||||
import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount} from 'vue'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
|
||||
@ -46,12 +46,12 @@ import TaskService from '@/services/task'
|
||||
import type {ITask} from '@/modelTypes/ITask'
|
||||
import {useAuthStore} from '@/stores/auth'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object as PropType<ITask>,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const {
|
||||
modelValue,
|
||||
} = defineProps<{
|
||||
modelValue: ITask,
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const {t} = useI18n({useScope: 'global'})
|
||||
@ -66,7 +66,7 @@ const lastValue = ref<Date | null>()
|
||||
const changeInterval = ref<ReturnType<typeof setInterval>>()
|
||||
|
||||
watch(
|
||||
toRef(props, 'modelValue'),
|
||||
() => modelValue,
|
||||
(value) => {
|
||||
task.value = { ...value }
|
||||
dueDate.value = value.dueDate
|
||||
|
@ -96,14 +96,15 @@ const router = useRouter()
|
||||
|
||||
const loadingInternal = ref(false)
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
const {
|
||||
task,
|
||||
loading = false,
|
||||
} = defineProps<{
|
||||
task: ITask,
|
||||
loading: boolean,
|
||||
}>(), {
|
||||
loading: false,
|
||||
})
|
||||
}>()
|
||||
|
||||
const color = computed(() => getHexColor(props.task.hexColor))
|
||||
const color = computed(() => getHexColor(task.hexColor))
|
||||
|
||||
async function toggleTaskDone(task: ITask) {
|
||||
loadingInternal.value = true
|
||||
@ -120,7 +121,7 @@ async function toggleTaskDone(task: ITask) {
|
||||
function openTaskDetail() {
|
||||
router.push({
|
||||
name: 'task.detail',
|
||||
params: {id: props.task.id},
|
||||
params: {id: task.id},
|
||||
state: {backdropView: router.currentRoute.value.fullPath},
|
||||
})
|
||||
}
|
||||
@ -128,12 +129,12 @@ function openTaskDetail() {
|
||||
const coverImageBlobUrl = ref<string | null>(null)
|
||||
|
||||
async function maybeDownloadCoverImage() {
|
||||
if (!props.task.coverImageAttachmentId) {
|
||||
if (!task.coverImageAttachmentId) {
|
||||
coverImageBlobUrl.value = null
|
||||
return
|
||||
}
|
||||
|
||||
const attachment = props.task.attachments.find(a => a.id === props.task.coverImageAttachmentId)
|
||||
const attachment = task.attachments.find(a => a.id === task.coverImageAttachmentId)
|
||||
if (!attachment || !SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))) {
|
||||
return
|
||||
}
|
||||
@ -143,7 +144,7 @@ async function maybeDownloadCoverImage() {
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.task.coverImageAttachmentId,
|
||||
() => task.coverImageAttachmentId,
|
||||
maybeDownloadCoverImage,
|
||||
{immediate: true},
|
||||
)
|
||||
|
@ -65,7 +65,6 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, watch} from 'vue'
|
||||
import {toRef} from '@vueuse/core'
|
||||
import {SECONDS_A_DAY, SECONDS_A_HOUR} from '@/constants/date'
|
||||
import {IReminderPeriodRelativeTo, REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
@ -84,28 +83,27 @@ import SimpleButton from '@/components/input/SimpleButton.vue'
|
||||
|
||||
const {t} = useI18n({useScope: 'global'})
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
const {
|
||||
modelValue,
|
||||
clearAfterUpdate = false,
|
||||
defaultRelativeTo = REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE,
|
||||
} = defineProps<{
|
||||
modelValue?: ITaskReminder,
|
||||
disabled?: boolean,
|
||||
clearAfterUpdate?: boolean,
|
||||
defaultRelativeTo?: null | IReminderPeriodRelativeTo,
|
||||
}>(), {
|
||||
disabled: false,
|
||||
clearAfterUpdate: false,
|
||||
defaultRelativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE,
|
||||
})
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const reminder = ref<ITaskReminder>(new TaskReminderModel())
|
||||
|
||||
const presets = computed<TaskReminderModel[]>(() => [
|
||||
{reminder: null, relativePeriod: 0, relativeTo: props.defaultRelativeTo},
|
||||
{reminder: null, relativePeriod: -2 * SECONDS_A_HOUR, relativeTo: props.defaultRelativeTo},
|
||||
{reminder: null, relativePeriod: -1 * SECONDS_A_DAY, relativeTo: props.defaultRelativeTo},
|
||||
{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 3, relativeTo: props.defaultRelativeTo},
|
||||
{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 7, relativeTo: props.defaultRelativeTo},
|
||||
{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 30, relativeTo: props.defaultRelativeTo},
|
||||
{reminder: null, relativePeriod: 0, relativeTo: defaultRelativeTo},
|
||||
{reminder: null, relativePeriod: -2 * SECONDS_A_HOUR, relativeTo: defaultRelativeTo},
|
||||
{reminder: null, relativePeriod: -1 * SECONDS_A_DAY, relativeTo: defaultRelativeTo},
|
||||
{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 3, relativeTo: defaultRelativeTo},
|
||||
{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 7, relativeTo: defaultRelativeTo},
|
||||
{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 30, relativeTo: defaultRelativeTo},
|
||||
])
|
||||
const reminderDate = ref(null)
|
||||
|
||||
@ -114,7 +112,7 @@ type availableForms = null | 'relative' | 'absolute'
|
||||
const showFormSwitch = ref<availableForms>(null)
|
||||
|
||||
const activeForm = computed<availableForms>(() => {
|
||||
if (props.defaultRelativeTo === null) {
|
||||
if (defaultRelativeTo === null) {
|
||||
return 'absolute'
|
||||
}
|
||||
|
||||
@ -134,9 +132,8 @@ const reminderText = computed(() => {
|
||||
return t('task.addReminder')
|
||||
})
|
||||
|
||||
const modelValue = toRef(props, 'modelValue')
|
||||
watch(
|
||||
modelValue,
|
||||
() => modelValue,
|
||||
(newReminder) => {
|
||||
reminder.value = newReminder || new TaskReminderModel()
|
||||
},
|
||||
@ -146,7 +143,7 @@ watch(
|
||||
function updateData() {
|
||||
emit('update:modelValue', reminder.value)
|
||||
|
||||
if (props.clearAfterUpdate) {
|
||||
if (clearAfterUpdate) {
|
||||
reminder.value = new TaskReminderModel()
|
||||
}
|
||||
}
|
||||
@ -168,7 +165,7 @@ function setReminderFromPreset(preset, toggle) {
|
||||
|
||||
function updateDataAndMaybeClose(toggle) {
|
||||
updateData()
|
||||
if (props.clearAfterUpdate) {
|
||||
if (clearAfterUpdate) {
|
||||
toggle()
|
||||
}
|
||||
}
|
||||
|
@ -47,8 +47,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, watch, type PropType} from 'vue'
|
||||
import {toRef} from '@vueuse/core'
|
||||
import {ref, watch} from 'vue'
|
||||
|
||||
import {periodToSeconds, PeriodUnit, secondsToPeriod} from '@/helpers/time/period'
|
||||
|
||||
@ -57,16 +56,11 @@ import TaskReminderModel from '@/models/taskReminder'
|
||||
import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
|
||||
import {REMINDER_PERIOD_RELATIVE_TO_TYPES, type IReminderPeriodRelativeTo} from '@/types/IReminderPeriodRelativeTo'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object as PropType<ITaskReminder>,
|
||||
required: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
const {
|
||||
modelValue,
|
||||
} = defineProps<{
|
||||
modelValue?: ITaskReminder,
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
@ -86,9 +80,8 @@ const period = ref<PeriodInput>({
|
||||
sign: -1,
|
||||
})
|
||||
|
||||
const modelValue = toRef(props, 'modelValue')
|
||||
watch(
|
||||
modelValue,
|
||||
() => modelValue,
|
||||
(value) => {
|
||||
const p = secondsToPeriod(value?.relativePeriod)
|
||||
period.value.durationUnit = p.unit
|
||||
|
@ -41,20 +41,20 @@ import ReminderDetail from '@/components/tasks/partials/reminder-detail.vue'
|
||||
import type {ITask} from '@/modelTypes/ITask'
|
||||
import {REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
const {
|
||||
modelValue,
|
||||
disabled = false,
|
||||
} = defineProps<{
|
||||
modelValue: ITask,
|
||||
disabled?: boolean,
|
||||
}>(), {
|
||||
modelValue: [],
|
||||
disabled: false,
|
||||
})
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const reminders = ref<ITaskReminder[]>([])
|
||||
|
||||
watch(
|
||||
() => props.modelValue.reminders,
|
||||
() => modelValue.reminders,
|
||||
(newVal) => {
|
||||
reminders.value = newVal
|
||||
},
|
||||
@ -62,19 +62,19 @@ watch(
|
||||
)
|
||||
|
||||
const defaultRelativeTo = computed(() => {
|
||||
if (typeof props.modelValue === 'undefined') {
|
||||
if (typeof modelValue === 'undefined') {
|
||||
return null
|
||||
}
|
||||
|
||||
if (props.modelValue?.dueDate) {
|
||||
if (modelValue?.dueDate) {
|
||||
return REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE
|
||||
}
|
||||
|
||||
if (props.modelValue.dueDate === null && props.modelValue.startDate !== null) {
|
||||
if (modelValue.dueDate === null && modelValue.startDate !== null) {
|
||||
return REMINDER_PERIOD_RELATIVE_TO_TYPES.STARTDATE
|
||||
}
|
||||
|
||||
if (props.modelValue.dueDate === null && props.modelValue.startDate === null && props.modelValue.endDate !== null) {
|
||||
if (modelValue.dueDate === null && modelValue.startDate === null && modelValue.endDate !== null) {
|
||||
return REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE
|
||||
}
|
||||
|
||||
@ -83,7 +83,7 @@ const defaultRelativeTo = computed(() => {
|
||||
|
||||
function updateData() {
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
...modelValue,
|
||||
reminders: reminders.value,
|
||||
})
|
||||
}
|
||||
|
@ -126,7 +126,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, watch, shallowReactive, toRef, type PropType, onMounted, onBeforeUnmount, computed} from 'vue'
|
||||
import {ref, watch, shallowReactive, onMounted, onBeforeUnmount, computed} from 'vue'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
|
||||
import TaskModel, { getHexColor } from '@/models/task'
|
||||
@ -153,32 +153,21 @@ import {useProjectStore} from '@/stores/projects'
|
||||
import {useBaseStore} from '@/stores/base'
|
||||
import {useTaskStore} from '@/stores/tasks'
|
||||
|
||||
const props = defineProps({
|
||||
theTask: {
|
||||
type: Object as PropType<ITask>,
|
||||
required: true,
|
||||
},
|
||||
isArchived: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showProject: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showProjectColor: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
canMarkAsDone: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
const {
|
||||
theTask,
|
||||
isArchived = false,
|
||||
showProject = false,
|
||||
disabled = false,
|
||||
showProjectColor = false,
|
||||
canMarkAsDone = true,
|
||||
} = defineProps<{
|
||||
theTask: ITask,
|
||||
isArchived?: boolean,
|
||||
showProject?: boolean,
|
||||
disabled?: boolean,
|
||||
showProjectColor?: boolean,
|
||||
canMarkAsDone?: boolean,
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['task-updated'])
|
||||
|
||||
@ -188,10 +177,8 @@ const taskService = shallowReactive(new TaskService())
|
||||
const task = ref<ITask>(new TaskModel())
|
||||
const showDefer = ref(false)
|
||||
|
||||
const theTask = toRef(props, 'theTask')
|
||||
|
||||
watch(
|
||||
theTask,
|
||||
() => theTask,
|
||||
newVal => {
|
||||
task.value = newVal
|
||||
},
|
||||
|
@ -6,7 +6,7 @@
|
||||
<template #header>
|
||||
<span>{{ $t('filters.delete.header') }}</span>
|
||||
</template>
|
||||
|
||||
|
||||
<template #text>
|
||||
<p>{{ $t('filters.delete.text') }}</p>
|
||||
</template>
|
||||
@ -14,11 +14,14 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {toRef} from 'vue'
|
||||
import type {IProject} from '@/modelTypes/IProject'
|
||||
import {useSavedFilter} from '@/services/savedFilter'
|
||||
|
||||
const props = defineProps<{ projectId: IProject['id'] }>()
|
||||
const {
|
||||
projectId,
|
||||
} = defineProps<{
|
||||
projectId: IProject['id'],
|
||||
}>()
|
||||
|
||||
const {deleteFilter} = useSavedFilter(toRef(props, 'projectId'))
|
||||
const {deleteFilter} = useSavedFilter(projectId)
|
||||
</script>
|
||||
|
@ -54,8 +54,6 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {toRef} from 'vue'
|
||||
|
||||
import Editor from '@/components/input/AsyncEditor'
|
||||
import CreateEdit from '@/components/misc/create-edit.vue'
|
||||
import Filters from '@/components/project/partials/filters.vue'
|
||||
@ -64,7 +62,11 @@ import {useSavedFilter} from '@/services/savedFilter'
|
||||
|
||||
import type {IProject} from '@/modelTypes/IProject'
|
||||
|
||||
const props = defineProps<{ projectId: IProject['id'] }>()
|
||||
const {
|
||||
projectId,
|
||||
} = defineProps<{
|
||||
projectId: IProject['id'],
|
||||
}>()
|
||||
|
||||
const {
|
||||
saveFilterWithValidation,
|
||||
@ -73,5 +75,5 @@ const {
|
||||
filterService,
|
||||
titleValid,
|
||||
validateTitleField,
|
||||
} = useSavedFilter(toRef(props, 'projectId'))
|
||||
} = useSavedFilter(projectId)
|
||||
</script>
|
||||
|
@ -120,7 +120,7 @@ export default { name: 'List' }
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, computed, toRef, nextTick, onMounted, type PropType} from 'vue'
|
||||
import {ref, computed, nextTick, onMounted} from 'vue'
|
||||
import draggable from 'zhyswan-vuedraggable'
|
||||
import {useRoute, useRouter} from 'vue-router'
|
||||
|
||||
@ -144,12 +144,11 @@ import {useTaskStore} from '@/stores/tasks'
|
||||
|
||||
import type {IProject} from '@/modelTypes/IProject'
|
||||
|
||||
const props = defineProps({
|
||||
projectId: {
|
||||
type: Number as PropType<IProject['id']>,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const {
|
||||
projectId,
|
||||
} = defineProps<{
|
||||
projectId: IProject['id'],
|
||||
}>()
|
||||
|
||||
const ctaVisible = ref(false)
|
||||
const showTaskSearch = ref(false)
|
||||
@ -169,7 +168,7 @@ const {
|
||||
searchTerm,
|
||||
params,
|
||||
sortByParam,
|
||||
} = useTaskList(toRef(props, 'projectId'), {position: 'asc' })
|
||||
} = useTaskList(projectId, {position: 'asc' })
|
||||
|
||||
|
||||
const isAlphabeticalSorting = computed(() => {
|
||||
|
@ -180,7 +180,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {toRef, computed, type Ref} from 'vue'
|
||||
import {computed, type Ref} from 'vue'
|
||||
|
||||
import {useStorage} from '@vueuse/core'
|
||||
|
||||
@ -200,6 +200,7 @@ import {useTaskList} from '@/composables/useTaskList'
|
||||
|
||||
import type {SortBy} from '@/composables/useTaskList'
|
||||
import type {ITask} from '@/modelTypes/ITask'
|
||||
import type {IProject} from '@/modelTypes/IProject'
|
||||
|
||||
const ACTIVE_COLUMNS_DEFAULT = {
|
||||
index: true,
|
||||
@ -217,12 +218,11 @@ const ACTIVE_COLUMNS_DEFAULT = {
|
||||
createdBy: false,
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
projectId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const {
|
||||
projectId,
|
||||
} = defineProps<{
|
||||
projectId: IProject['id'],
|
||||
}>()
|
||||
|
||||
const SORT_BY_DEFAULT: SortBy = {
|
||||
index: 'desc',
|
||||
@ -231,7 +231,7 @@ const SORT_BY_DEFAULT: SortBy = {
|
||||
const activeColumns = useStorage('tableViewColumns', {...ACTIVE_COLUMNS_DEFAULT})
|
||||
const sortBy = useStorage<SortBy>('tableViewSortBy', {...SORT_BY_DEFAULT})
|
||||
|
||||
const taskList = useTaskList(toRef(props, 'projectId'), sortBy.value)
|
||||
const taskList = useTaskList(projectId, sortBy.value)
|
||||
|
||||
const {
|
||||
loading,
|
||||
|
@ -216,7 +216,7 @@
|
||||
{{ $t('task.attributes.labels') }}
|
||||
</div>
|
||||
<edit-labels
|
||||
:disabled="!canWrite"
|
||||
:disabled="!canWrite"
|
||||
:task-id="taskId"
|
||||
:ref="e => setFieldRef('labels', e)"
|
||||
v-model="task.labels"/>
|
||||
@ -270,7 +270,7 @@
|
||||
</h3>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<project-search
|
||||
<project-search
|
||||
@update:modelValue="changeProject"
|
||||
:ref="e => setFieldRef('moveProject', e)"
|
||||
/>
|
||||
@ -447,7 +447,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref, reactive, toRef, shallowReactive, computed, watch, watchEffect, nextTick, type PropType} from 'vue'
|
||||
import {ref, reactive, toRef, shallowReactive, computed, watch, watchEffect, nextTick} from 'vue'
|
||||
import {useRouter, type RouteLocation} from 'vue-router'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
import {unrefElement} from '@vueuse/core'
|
||||
@ -500,15 +500,13 @@ import type {Action as MessageAction} from '@/message'
|
||||
import {useProjectStore} from '@/stores/projects'
|
||||
import {TASK_REPEAT_MODES} from '@/types/IRepeatMode'
|
||||
|
||||
const props = defineProps({
|
||||
taskId: {
|
||||
type: Number as PropType<ITask['id']>,
|
||||
required: true,
|
||||
},
|
||||
backdropView: {
|
||||
type: String as PropType<RouteLocation['fullPath']>,
|
||||
},
|
||||
})
|
||||
const {
|
||||
taskId,
|
||||
backdropView,
|
||||
} = defineProps<{
|
||||
taskId: ITask['id'],
|
||||
backdropView?: RouteLocation['fullPath'],
|
||||
}>()
|
||||
|
||||
defineEmits(['close'])
|
||||
|
||||
@ -535,8 +533,6 @@ const taskColor = ref<ITask['hexColor']>('')
|
||||
// Used to avoid flashing of empty elements if the task content is not yet loaded.
|
||||
const visible = ref(false)
|
||||
|
||||
const taskId = toRef(props, 'taskId')
|
||||
|
||||
const project = computed(() => projectStore.projects[task.value.projectId])
|
||||
watchEffect(() => {
|
||||
if (typeof project.value === 'undefined') {
|
||||
@ -559,7 +555,7 @@ const color = computed(() => {
|
||||
const color = task.value.getHexColor
|
||||
? task.value.getHexColor()
|
||||
: undefined
|
||||
|
||||
|
||||
return color === TASK_DEFAULT_COLOR
|
||||
? ''
|
||||
: color
|
||||
@ -567,13 +563,14 @@ const color = computed(() => {
|
||||
|
||||
const hasAttachments = computed(() => attachmentStore.attachments.length > 0)
|
||||
|
||||
const isModal = computed(() => Boolean(props.backdropView))
|
||||
const isModal = computed(() => Boolean(backdropView))
|
||||
|
||||
function attachmentUpload(file: File, onSuccess?: (url: string) => void) {
|
||||
return uploadFile(taskId.value, file, onSuccess)
|
||||
return uploadFile(taskId, file, onSuccess)
|
||||
}
|
||||
|
||||
const heading = ref<HTMLElement | null>(null)
|
||||
|
||||
async function scrollToHeading() {
|
||||
scrollIntoView(unrefElement(heading))
|
||||
}
|
||||
@ -581,22 +578,24 @@ async function scrollToHeading() {
|
||||
const taskService = shallowReactive(new TaskService())
|
||||
|
||||
// load task
|
||||
watch(taskId, async (id) => {
|
||||
if (id === undefined) {
|
||||
return
|
||||
}
|
||||
watch(
|
||||
() => taskId,
|
||||
async (id) => {
|
||||
if (id === undefined) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
Object.assign(task.value, await taskService.get({id}))
|
||||
attachmentStore.set(task.value.attachments)
|
||||
taskColor.value = task.value.hexColor
|
||||
setActiveFields()
|
||||
} finally {
|
||||
await nextTick()
|
||||
scrollToHeading()
|
||||
visible.value = true
|
||||
}
|
||||
}, {immediate: true})
|
||||
try {
|
||||
Object.assign(task.value, await taskService.get({id}))
|
||||
attachmentStore.set(task.value.attachments)
|
||||
taskColor.value = task.value.hexColor
|
||||
setActiveFields()
|
||||
} finally {
|
||||
await nextTick()
|
||||
scrollToHeading()
|
||||
visible.value = true
|
||||
}
|
||||
}, {immediate: true})
|
||||
|
||||
type FieldType =
|
||||
| 'assignees'
|
||||
@ -613,7 +612,7 @@ type FieldType =
|
||||
| 'repeatAfter'
|
||||
| 'startDate'
|
||||
|
||||
const activeFields : {[type in FieldType]: boolean} = reactive({
|
||||
const activeFields: { [type in FieldType]: boolean } = reactive({
|
||||
assignees: false,
|
||||
attachments: false,
|
||||
color: false,
|
||||
@ -648,7 +647,7 @@ function setActiveFields() {
|
||||
activeFields.startDate = task.value.startDate !== null
|
||||
}
|
||||
|
||||
const activeFieldElements : {[id in FieldType]: HTMLElement | null} = reactive({
|
||||
const activeFieldElements: { [id in FieldType]: HTMLElement | null } = reactive({
|
||||
assignees: null,
|
||||
attachments: null,
|
||||
color: null,
|
||||
@ -676,7 +675,7 @@ function setFieldActive(fieldName: keyof typeof activeFields) {
|
||||
if (!el) {
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
el.focus()
|
||||
|
||||
// scroll the field to the center of the screen if not in viewport already
|
||||
@ -691,7 +690,7 @@ async function saveTask(
|
||||
if (currentTask === null) {
|
||||
currentTask = klona(task.value)
|
||||
}
|
||||
|
||||
|
||||
if (!canWrite.value) {
|
||||
return
|
||||
}
|
||||
@ -723,6 +722,7 @@ async function saveTask(
|
||||
}
|
||||
|
||||
const showDeleteModal = ref(false)
|
||||
|
||||
async function deleteTask() {
|
||||
await taskStore.delete(task.value)
|
||||
success({message: t('task.detail.deleteSuccess')})
|
||||
@ -784,32 +784,32 @@ async function removeRepeatAfter() {
|
||||
// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
|
||||
--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
|
||||
padding-bottom: 0;
|
||||
|
||||
@media screen and (min-width: $desktop) {
|
||||
|
||||
@media screen and (min-width: $desktop) {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-view {
|
||||
padding-top: 1rem;
|
||||
padding-inline: .5rem;
|
||||
background-color: var(--site-background);
|
||||
|
||||
@media screen and (min-width: $desktop) {
|
||||
background-color: var(--site-background);
|
||||
|
||||
@media screen and (min-width: $desktop) {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-modal .task-view {
|
||||
border-radius: $radius;
|
||||
padding: 1rem;
|
||||
color: var(--text);
|
||||
background-color: var(--site-background) !important;
|
||||
border-radius: $radius;
|
||||
padding: 1rem;
|
||||
color: var(--text);
|
||||
background-color: var(--site-background) !important;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
border-radius: 0;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
border-radius: 0;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.task-view * {
|
||||
@ -837,6 +837,7 @@ h3 .button {
|
||||
.icon.is-grey {
|
||||
color: var(--grey-400);
|
||||
}
|
||||
|
||||
.date-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -960,11 +961,11 @@ h3 .button {
|
||||
top: $navbar-height + 1.5rem;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
margin-bottom: .5rem;
|
||||
justify-content: left;
|
||||
justify-content: left;
|
||||
|
||||
&.has-light-text {
|
||||
color: var(--white);
|
||||
@ -989,8 +990,8 @@ h3 .button {
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
@media print {
|
||||
@media print {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -121,6 +121,9 @@ export default defineConfig(({mode}) => {
|
||||
plugins: [
|
||||
vue({
|
||||
reactivityTransform: true,
|
||||
script: {
|
||||
propsDestructure: true,
|
||||
},
|
||||
}),
|
||||
legacy,
|
||||
svgLoader({
|
||||
|
Reference in New Issue
Block a user