1
0

fix: use props destructuring everywhere

This commit is contained in:
kolaente
2023-06-20 14:39:59 +02:00
parent 78a268ab07
commit 3aa502e07d
17 changed files with 197 additions and 215 deletions

View File

@ -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')})
}

View File

@ -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

View File

@ -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},
)

View File

@ -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()
}
}

View File

@ -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

View File

@ -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,
})
}

View File

@ -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
},