feature/convert-abstract-service-to-ts #1798

Merged
konrad merged 32 commits from dpschen/frontend:feature/convert-abstract-service-to-ts into main 2022-09-06 09:26:49 +00:00
238 changed files with 2213 additions and 1527 deletions

View File

@ -108,7 +108,7 @@ steps:
- dependencies
- name: test-frontend
image: cypress/browsers:node16.5.0-chrome94-ff93
image: cypress/browsers:node16.14.0-chrome99-ff97
pull: true
environment:
CYPRESS_API_URL: http://api:3456/api/v1

View File

@ -9,7 +9,7 @@ services:
ports:
- 3456:3456
cypress:
image: cypress/browsers:node12.18.3-chrome87-ff82
image: cypress/browsers:node16.14.0-chrome99-ff97
volumes:
- ..:/project
- $HOME/.cache:/home/node/.cache/

View File

@ -23,6 +23,7 @@
"@sentry/tracing": "7.12.1",
"@sentry/vue": "7.12.1",
"@types/is-touch-device": "1.0.0",
"@types/lodash.clonedeep": "^4.5.7",
"@types/sortablejs": "1.13.0",
"@vueuse/core": "9.1.1",
"@vueuse/router": "9.1.1",

View File

@ -15,10 +15,10 @@
</template>
<script lang="ts" setup>
import {computed, watch, Ref} from 'vue'
import {computed, watch, type Ref} from 'vue'
import {useRouter} from 'vue-router'
import {useRouteQuery} from '@vueuse/router'
import {useStore} from 'vuex'
import {useStore} from '@/store'
import {useI18n} from 'vue-i18n'
import isTouchDevice from 'is-touch-device'
import {success} from '@/message'

View File

@ -12,12 +12,7 @@
</template>
<script lang="ts">
import {defineComponent} from 'vue'
// see https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script
export default defineComponent({
inheritAttrs: false,
})
export default { inheritAttrs: false }
</script>
<script lang="ts" setup>
@ -30,7 +25,7 @@ export default defineComponent({
// NOTE: Do NOT use buttons with @click to push routes. => Use router-links instead!
import {ref, watchEffect, computed, useAttrs, PropType} from 'vue'
import { ref, watchEffect, computed, useAttrs, type PropType } from 'vue'
const BASE_BUTTON_TYPES_MAP = Object.freeze({
button: 'button',

View File

@ -110,10 +110,10 @@
</template>
<script lang="ts" setup>
import {format} from 'date-fns'
import { formatDate } from '@/helpers/time/formatDate'
import BaseButton from '@/components/base/BaseButton.vue'
const exampleDate = format(new Date(), 'yyyy-MM-dd')
const exampleDate = formatDate(new Date(), 'yyyy-MM-dd')
</script>
<style scoped>

View File

@ -71,7 +71,7 @@
<script lang="ts" setup>
import {computed, ref, watch} from 'vue'
import {useStore} from 'vuex'
import {useStore} from '@/store'
import {useI18n} from 'vue-i18n'
import flatPickr from 'vue-flatpickr-component'

View File

@ -11,7 +11,7 @@
<script setup lang="ts">
import {computed} from 'vue'
import {useStore} from 'vuex'
import {useStore} from '@/store'
import BaseButton from '@/components/base/BaseButton.vue'

View File

@ -88,11 +88,11 @@
<script setup lang="ts">
import {ref, computed, onMounted, nextTick} from 'vue'
import {useStore} from 'vuex'
import {useStore} from '@/store'
import {useRouter} from 'vue-router'
import {QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
import Rights from '@/models/constants/rights.json'
import {RIGHTS as Rights} from '@/constants/rights'
import Update from '@/components/home/update.vue'
import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
@ -103,6 +103,8 @@ import Logo from '@/components/home/Logo.vue'
import BaseButton from '@/components/base/BaseButton.vue'
import MenuButton from '@/components/home/MenuButton.vue'
import {getListTitle} from '@/helpers/getListTitle'
const store = useStore()
const userInfo = computed(() => store.state.auth.info)

View File

@ -60,8 +60,8 @@
</template>
<script lang="ts" setup>
import {watch, computed, shallowRef, watchEffect, VNode, h} from 'vue'
import {useStore} from 'vuex'
import {watch, computed, shallowRef, watchEffect, type VNode, h} from 'vue'
import {useStore} from '@/store'
import {useRoute, useRouter} from 'vue-router'
import {useEventListener} from '@vueuse/core'

View File

@ -23,7 +23,7 @@
<script lang="ts" setup>
import {computed} from 'vue'
import {useStore} from 'vuex'
import {useStore} from '@/store'
import Logo from '@/components/home/Logo.vue'
import PoweredByLink from './PoweredByLink.vue'

View File

@ -141,9 +141,9 @@
<script setup lang="ts">
import {ref, computed, onMounted, onBeforeMount} from 'vue'
import {useStore} from 'vuex'
import {useStore} from '@/store'
import draggable from 'zhyswan-vuedraggable'
import {SortableEvent} from 'sortablejs'
import type {SortableEvent} from 'sortablejs'
import BaseButton from '@/components/base/BaseButton.vue'
import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
@ -154,9 +154,10 @@ import Logo from '@/components/home/Logo.vue'
import {MENU_ACTIVE} from '@/store/mutation-types'
import {calculateItemPosition} from '@/helpers/calculateItemPosition'
import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
import {getListTitle} from '@/helpers/getListTitle'
import {useEventListener} from '@vueuse/core'
import NamespaceModel from '@/models/namespace'
import ListModel from '@/models/list'
import type { IList } from '@/models/list'
import type { INamespace } from '@/models/namespace'
const drag = ref(false)
const dragOptions = {
@ -171,7 +172,7 @@ const loading = computed(() => store.state.loading && store.state.loadingModule
const namespaces = computed(() => {
return (store.state.namespaces.namespaces as NamespaceModel[]).filter(n => !n.isArchived)
return (store.state.namespaces.namespaces as INamespace[]).filter(n => !n.isArchived)
})
const activeLists = computed(() => {
return namespaces.value.map(({lists}) => {
@ -194,7 +195,7 @@ useEventListener('resize', resize)
onMounted(() => resize())
function toggleFavoriteList(list: ListModel) {
function toggleFavoriteList(list: IList) {
// The favorites pseudo list is always favorite
// Archived lists cannot be marked favorite
if (list.id === -1 || list.isArchived) {
@ -208,14 +209,14 @@ function resize() {
store.commit(MENU_ACTIVE, window.innerWidth >= 770)
}
function toggleLists(namespaceId: number) {
function toggleLists(namespaceId: INamespace['id']) {
listsVisible.value[namespaceId] = !listsVisible.value[namespaceId]
}
const listsVisible = ref<{ [id: NamespaceModel['id']]: boolean }>({})
const listsVisible = ref<{ [id: INamespace['id']]: boolean }>({})
// FIXME: async action will be unfinished when component mounts
onBeforeMount(async () => {
const namespaces = await store.dispatch('namespaces/loadNamespaces') as NamespaceModel[]
const namespaces = await store.dispatch('namespaces/loadNamespaces') as INamespace[]
namespaces.forEach(n => {
if (typeof listsVisible.value[n.id] === 'undefined') {
listsVisible.value[n.id] = true
@ -223,7 +224,7 @@ onBeforeMount(async () => {
})
})
function updateActiveLists(namespace: NamespaceModel, activeLists: ListModel[]) {
function updateActiveLists(namespace: INamespace, activeLists: IList[]) {
// This is a bit hacky: since we do have to filter out the archived items from the list
// for vue draggable updating it is not as simple as replacing it.
// To work around this, we merge the active lists with the archived ones. Doing so breaks the order
@ -240,7 +241,7 @@ function updateActiveLists(namespace: NamespaceModel, activeLists: ListModel[])
})
}
const listUpdating = ref<{ [id: NamespaceModel['id']]: boolean }>({})
const listUpdating = ref<{ [id: INamespace['id']]: boolean }>({})
async function saveListPosition(e: SortableEvent) {
if (!e.newIndex && e.newIndex !== 0) return

View File

@ -18,15 +18,11 @@
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name: 'x-button',
})
export default { name: 'x-button' }
</script>
<script setup lang="ts">
import {computed, useSlots, PropType} from 'vue'
import {computed, useSlots, type PropType} from 'vue'
import BaseButton from '@/components/base/BaseButton.vue'
const BUTTON_TYPES_MAP = Object.freeze({

View File

@ -97,7 +97,7 @@ import {i18n} from '@/i18n'
import BaseButton from '@/components/base/BaseButton.vue'
import {format} from 'date-fns'
import {formatDate, formatDateShort} from '@/helpers/time/formatDate'
import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
@ -170,11 +170,12 @@ export default defineComponent({
return ''
}
return format(this.date, 'yyy-LL-dd H:mm')
return formatDate(this.date, 'yyy-LL-dd H:mm')
},
},
},
methods: {
formatDateShort,
setDateValue(newVal) {
if (newVal === null) {
this.date = null
@ -233,7 +234,7 @@ export default defineComponent({
const interval = calculateDayInterval(date)
const newDate = new Date()
newDate.setDate(newDate.getDate() + interval)
return format(newDate, 'E')
return formatDate(newDate, 'E')
},
},
})

View File

@ -53,7 +53,7 @@ export default defineComponent({
},
},
methods: {
updateData(checked) {
updateData(checked: boolean) {
this.checked = checked
this.$emit('update:modelValue', checked)
this.$emit('change', checked)

View File

@ -76,24 +76,24 @@
</template>
<script setup lang="ts">
import {ref, computed, watchEffect} from 'vue'
import {useStore} from 'vuex'
import {ref, computed, watchEffect, type PropType} from 'vue'
import {useStore} from '@/store'
import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
import Dropdown from '@/components/misc/dropdown.vue'
import DropdownItem from '@/components/misc/dropdown-item.vue'
import TaskSubscription from '@/components/misc/subscription.vue'
import ListModel from '@/models/list'
import SubscriptionModel from '@/models/subscription'
import type {IList} from '@/models/list'
import type { ISubscription } from '@/models/subscription'
const props = defineProps({
list: {
type: ListModel,
type: Object as PropType<IList>,
required: true,
},
})
const subscription = ref<SubscriptionModel | null>(null)
const subscription = ref<ISubscription | null>(null)
watchEffect(() => {
subscription.value = props.list.subscription ?? null
})

View File

@ -186,8 +186,8 @@
<script lang="ts">
import {defineComponent} from 'vue'
import DatepickerWithRange from '@/components/date/datepickerWithRange'
import Fancycheckbox from '../../input/fancycheckbox'
import DatepickerWithRange from '@/components/date/datepickerWithRange.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
import {includesById} from '@/helpers/utils'
import PrioritySelect from '@/components/tasks/partials/prioritySelect.vue'

View File

@ -36,16 +36,16 @@
</template>
<script lang="ts" setup>
import {PropType, ref, watch} from 'vue'
import {useStore} from 'vuex'
import {type PropType, ref, watch} from 'vue'
import {useStore} from '@/store'
import ListService from '@/services/list'
import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
import {colorIsDark} from '@/helpers/color/colorIsDark'
import ListModel from '@/models/list'
import BaseButton from '@/components/base/BaseButton.vue'
import type { IList } from '@/models/list'
const background = ref<string | null>(null)
const backgroundLoading = ref(false)
@ -53,7 +53,7 @@ const blurHashUrl = ref('')
const props = defineProps({
list: {
type: Object as PropType<ListModel>,
type: Object as PropType<IList>,
required: true,
},
showArchived: {
@ -86,7 +86,7 @@ async function loadBackground() {
const store = useStore()
function toggleFavoriteList(list: ListModel) {
function toggleFavoriteList(list: IList) {
// The favorites pseudo list is always favorite
// Archived lists cannot be marked favorite
if (list.id === -1 || list.isArchived) {

View File

@ -9,7 +9,7 @@
</template>
<script lang="ts" setup>
import {PropType} from 'vue'
import type {PropType} from 'vue'
type Variants = 'default' | 'small'
defineProps({

View File

@ -33,7 +33,7 @@
</template>
<script lang="ts" setup>
import {useStore} from 'vuex'
import {useStore} from '@/store'
import Shortcut from '@/components/misc/shortcut.vue'
import Message from '@/components/misc/message.vue'

View File

@ -8,7 +8,7 @@
<script lang="ts" setup>
import {computed} from 'vue'
import {useStore} from 'vuex'
import {useStore} from '@/store'
import BaseButton from '@/components/base/BaseButton.vue'

View File

@ -7,7 +7,7 @@
</template>
<script lang="ts" setup>
import {computed, PropType} from 'vue'
import {computed, type PropType} from 'vue'
const TEXT_ALIGN_MAP = Object.freeze({
left: '',

View File

@ -30,7 +30,7 @@ import Logo from '@/components/home/Logo.vue'
import Message from '@/components/misc/message.vue'
import Legal from '@/components/misc/legal.vue'
import ApiConfig from '@/components/misc/api-config.vue'
import {useStore} from 'vuex'
import {useStore} from '@/store'
import {computed} from 'vue'
import {useRoute} from 'vue-router'
import {useI18n} from 'vue-i18n'

View File

@ -42,7 +42,7 @@
<script lang="ts" setup>
import {ref, computed} from 'vue'
import {useStore} from 'vuex'
import {useStore} from '@/store'
import Logo from '@/assets/logo.svg?component'
import ApiConfig from '@/components/misc/api-config.vue'

View File

@ -32,27 +32,32 @@
</template>
<script lang="ts" setup>
import {computed, shallowRef} from 'vue'
import {computed, shallowRef, type PropType} from 'vue'
import {useI18n} from 'vue-i18n'
import BaseButton from '@/components/base/BaseButton.vue'
import DropdownItem from '@/components/misc/dropdown-item.vue'
import SubscriptionService from '@/services/subscription'
import SubscriptionModel from '@/models/subscription'
import SubscriptionModel, { type ISubscription } from '@/models/subscription'
import {success} from '@/message'
interface Props {
entity: string
entityId: number
subscription: SubscriptionModel | null
type?: 'button' | 'dropdown' | null
}
const props = withDefaults(defineProps<Props>(), {
subscription: null,
type: 'button',
const props = defineProps({
entity: String,
entityId: Number,
isButton: {
type: Boolean,
default: true,
},
subscription: {
type: Object as PropType<ISubscription>,
default: null,
},
type: {
type: String as PropType<'button' | 'dropdown' | 'null'>,
default: 'button',
},
})
const subscriptionEntity = computed<string | null>(() => props.subscription?.entity ?? null)

View File

@ -54,15 +54,16 @@
</template>
<script setup lang="ts">
import {ref, onMounted} from 'vue'
import {ref, onMounted, type PropType} from 'vue'
import Dropdown from '@/components/misc/dropdown.vue'
import DropdownItem from '@/components/misc/dropdown-item.vue'
import TaskSubscription from '@/components/misc/subscription.vue'
import type { INamespace } from '@/models/namespace'
const props = defineProps({
namespace: {
type: Object, // NamespaceModel
type: Object as PropType<INamespace>,
required: true,
},
})

View File

@ -30,7 +30,7 @@
{{ n.toText(userInfo) }}
</BaseButton>
</div>
<span class="created" v-tooltip="formatDate(n.created)">
<span class="created" v-tooltip="formatDateLong(n.created)">
{{ formatDateSince(n.created) }}
</span>
</div>
@ -52,17 +52,18 @@ import {computed, onMounted, onUnmounted, ref} from 'vue'
import NotificationService from '@/services/notification'
import BaseButton from '@/components/base/BaseButton.vue'
import User from '@/components/misc/user.vue'
import names from '@/models/constants/notificationNames.json'
import { NOTIFICATION_NAMES as names, type INotification} from '@/modelTypes/INotification'
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
import {useStore} from 'vuex'
import {useStore} from '@/store'
import {useRouter} from 'vue-router'
import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
const LOAD_NOTIFICATIONS_INTERVAL = 10000
const store = useStore()
const router = useRouter()
const allNotifications = ref([])
const allNotifications = ref<INotification[]>([])
const showNotifications = ref(false)
const popup = ref(null)

View File

@ -177,16 +177,17 @@
<script setup lang="ts">
import {ref, watch, computed, shallowReactive} from 'vue'
import {useStore} from 'vuex'
import {useStore} from '@/store'
import {useI18n} from 'vue-i18n'
import RIGHTS from '@/models/constants/rights.json'
import LinkShareModel from '@/models/linkShare'
import {RIGHTS} from '@/constants/rights'
import LinkShareModel, { type ILinkShare } from '@/models/linkShare'
import LinkShareService from '@/services/linkShare'
import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
import {success} from '@/message'
import type { IList } from '@/models/list'
const props = defineProps({
listId: {
@ -197,7 +198,7 @@ const props = defineProps({
const {t} = useI18n({useScope: 'global'})
const linkShares = ref([])
const linkShares = ref<ILinkShare[]>([])
const linkShareService = shallowReactive(new LinkShareService())
const selectedRight = ref(RIGHTS.READ)
const name = ref('')
@ -216,7 +217,7 @@ watch(
const store = useStore()
const frontendUrl = computed(() => store.state.config.frontendUrl)
async function load(listId) {
async function load(listId: IList['id']) {
// If listId == 0 the list on the calling component wasn't already loaded, so we just bail out here
if (listId === 0) {
return
@ -225,7 +226,7 @@ async function load(listId) {
linkShares.value = await linkShareService.getAll({listId})
}
async function add(listId) {
async function add(listId: IList['id']) {
const newLinkShare = new LinkShareModel({
right: selectedRight.value,
listId,
@ -241,7 +242,7 @@ async function add(listId) {
await load(listId)
}
async function remove(listId) {
async function remove(listId: IList['id']) {
try {
await linkShareService.delete(new LinkShareModel({
id: linkIdToDelete.value,

View File

@ -133,32 +133,34 @@
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({name: 'userTeamShare'})
export default {name: 'userTeamShare'}
</script>
<script setup lang="ts">
import {ref, reactive, computed, shallowReactive, ShallowReactive, Ref} from 'vue'
import {ref, reactive, computed, shallowReactive, type Ref} from 'vue'
import type {PropType} from 'vue'
import {useStore} from 'vuex'
import {useStore} from '@/store'
import {useI18n} from 'vue-i18n'
import UserNamespaceService from '@/services/userNamespace'
import UserNamespaceModel from '@/models/userNamespace'
import UserListModel from '@/models/userList'
import UserNamespaceModel, { type IUserNamespace } from '@/models/userNamespace'
import UserListService from '@/services/userList'
import UserListModel, { type IUserList } from '@/models/userList'
import UserService from '@/services/user'
import UserModel from '@/models/user'
import UserModel, { type IUser } from '@/models/user'
import TeamNamespaceService from '@/services/teamNamespace'
import TeamNamespaceModel from '@/models/teamNamespace'
import TeamListModel from '@/models/teamList'
import TeamListService from '@/services/teamList'
import TeamService from '@/services/team'
import TeamModel from '@/models/team'
import TeamNamespaceModel, { type ITeamNamespace } from '@/models/teamNamespace'
import RIGHTS from '@/models/constants/rights.json'
import TeamListService from '@/services/teamList'
import TeamListModel, { type ITeamList } from '@/models/teamList'
import TeamService from '@/services/team'
import TeamModel, { type ITeam } from '@/models/team'
import {RIGHTS} from '@/constants/rights'
import Multiselect from '@/components/input/multiselect.vue'
import Nothing from '@/components/misc/nothing.vue'
import {success} from '@/message'
@ -185,10 +187,10 @@ const props = defineProps({
const {t} = useI18n({useScope: 'global'})
// This user service is either a userNamespaceService or a userListService, depending on the type we are using
let stuffService: ShallowReactive<UserNamespaceService | UserListService | TeamListService | TeamNamespaceService>
let stuffModel: UserNamespaceModel | UserListModel | TeamListModel | TeamNamespaceModel
let searchService: ShallowReactive<UserService | TeamService>
let sharable: Ref<UserModel | TeamModel>
let stuffService: UserNamespaceService | UserListService | TeamListService | TeamNamespaceService
let stuffModel: IUserNamespace | IUserList | ITeamList | ITeamNamespace
let searchService: UserService | TeamService
let sharable: Ref<IUser | ITeam>
const searchLabel = ref('')
const selectedRight = ref({})
@ -355,7 +357,7 @@ async function toggleType(sharable) {
const found = ref([])
const currentUserId = computed(() => store.state.auth.info.id)
async function find(query) {
async function find(query: string) {
if (query === '') {
found.value = []
return

View File

@ -43,8 +43,8 @@
<script setup lang="ts">
import {ref, watch, unref, shallowReactive} from 'vue'
import {useI18n} from 'vue-i18n'
import {useStore} from 'vuex'
import {tryOnMounted, debouncedWatch, useWindowSize, MaybeRef} from '@vueuse/core'
import {useStore} from '@/store'
import {tryOnMounted, debouncedWatch, useWindowSize, type MaybeRef} from '@vueuse/core'
import TaskService from '@/services/task'
import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
@ -200,7 +200,7 @@ function handleEnter(e: KeyboardEvent) {
}
function focusTaskInput() {
newTaskInput.value.focus()
newTaskInput.value?.focus()
}
defineExpose({

View File

@ -76,14 +76,14 @@
</template>
<script setup lang="ts">
import {ref, reactive, computed, shallowReactive, watch, nextTick} from 'vue'
import {ref, reactive, computed, shallowReactive, watch, nextTick, type PropType} from 'vue'
import {useRouter} from 'vue-router'
import {useI18n} from 'vue-i18n'
import Editor from '@/components/input/AsyncEditor'
import TaskService from '@/services/task'
import TaskModel from '@/models/task'
import TaskModel, { type ITask } from '@/models/task'
import EditLabels from './partials/editLabels.vue'
import Reminders from './partials/reminders.vue'
import ColorPicker from '../input/colorPicker.vue'
@ -93,14 +93,16 @@ import {success} from '@/message'
const {t} = useI18n({useScope: 'global'})
const router = useRouter()
const props = defineProps<{
task?: TaskModel | null,
}>()
const props = defineProps({
task: {
type: Object as PropType<ITask | null>,
},
})
const taskService = shallowReactive(new TaskService())
const editorActive = ref(false)
let taskEditTask: TaskModel | undefined
let taskEditTask: ITask | undefined
// FIXME: this initialization should not be necessary here

View File

@ -175,19 +175,20 @@
import {defineComponent} from 'vue'
import VueDragResize from 'vue-drag-resize'
import EditTask from './edit-task'
import EditTask from './edit-task.vue'
import TaskService from '../../services/task'
import TaskModel from '../../models/task'
import priorities from '../../models/constants/priorities'
import PriorityLabel from './partials/priorityLabel'
import {PRIORITIES as priorities} from '@/constants/priorities'
import PriorityLabel from './partials/priorityLabel.vue'
import TaskCollectionService from '../../services/taskCollection'
import {mapState} from 'vuex'
import Rights from '../../models/constants/rights.json'
import {RIGHTS as Rights} from '@/constants/rights'
import FilterPopup from '@/components/list/partials/filter-popup.vue'
import BaseButton from '@/components/base/BaseButton.vue'
import {colorIsDark} from '@/helpers/color/colorIsDark'
import {formatDate} from '@/helpers/time/formatDate'
export default defineComponent({
name: 'GanttChart',
@ -439,7 +440,7 @@ export default defineComponent({
formatMonthAndYear(year, month) {
month = month < 10 ? '0' + month : month
const date = new Date(`${year}-${month}-01`)
return this.format(date, 'MMMM, yyyy')
return formatDate(date, 'MMMM, yyyy')
},
},
})

View File

@ -39,7 +39,7 @@
<div class="info">
<p class="attachment-info-meta">
<i18n-t keypath="task.attachment.createdBy">
<span v-tooltip="formatDate(a.created)">
<span v-tooltip="formatDateLong(a.created)">
{{ formatDateSince(a.created) }}
</span>
<user
@ -49,7 +49,7 @@
/>
</i18n-t>
<span>
{{ a.file.getHumanSize() }}
{{ getHumanSize(a.file.size) }}
</span>
<span v-if="a.file.mime">
{{ a.file.mime }}
@ -147,14 +147,17 @@
import {defineComponent} from 'vue'
import AttachmentService from '../../../services/attachment'
import AttachmentModel from '../../../models/attachment'
import User from '../../misc/user'
import AttachmentModel, { type IAttachment } from '@/models/attachment'
import User from '@/components/misc/user.vue'
import {mapState} from 'vuex'
import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
import { uploadFiles, generateAttachmentUrl } from '@/helpers/attachments'
import {formatDate, formatDateSince, formatDateLong} from '@/helpers/time/formatDate'
import BaseButton from '@/components/base/BaseButton'
import type { IFile } from '@/models/file'
import { getHumanSize } from '@/helpers/getHumanSize'
export default defineComponent({
name: 'attachments',
@ -190,7 +193,7 @@ export default defineComponent({
setup(props) {
const copy = useCopyToClipboard()
function copyUrl(attachment: AttachmentModel) {
function copyUrl(attachment: IAttachment) {
copy(generateAttachmentUrl(props.taskId, attachment.id))
}
@ -229,7 +232,12 @@ export default defineComponent({
})
},
methods: {
downloadAttachment(attachment) {
getHumanSize,
formatDate,
formatDateSince,
formatDateLong,
downloadAttachment(attachment: IAttachment) {
this.attachmentService.download(attachment)
},
uploadNewAttachment() {
@ -239,7 +247,7 @@ export default defineComponent({
this.uploadFiles(this.$refs.files.files)
},
uploadFiles(files) {
uploadFiles(files: IFile[]) {
uploadFiles(this.attachmentService, this.taskId, files)
},
async deleteAttachment() {

View File

@ -10,15 +10,15 @@
</template>
<script setup lang="ts">
import {computed} from 'vue'
import {computed, type PropType} from 'vue'
import { useI18n } from 'vue-i18n'
import {getChecklistStatistics} from '@/helpers/checklistFromText'
import TaskModel from '@/models/task'
import type {ITask} from '@/models/task'
const props = defineProps({
task: {
type: TaskModel,
type: Object as PropType<ITask>,
required: true,
},
})

View File

@ -34,12 +34,12 @@
width="20"
/>
<strong>{{ c.author.getDisplayName() }}</strong>&nbsp;
<span v-tooltip="formatDate(c.created)" class="has-text-grey">
<span v-tooltip="formatDateLong(c.created)" class="has-text-grey">
{{ formatDateSince(c.created) }}
</span>
<span
v-if="+new Date(c.created) !== +new Date(c.updated)"
v-tooltip="formatDate(c.updated)"
v-tooltip="formatDateLong(c.updated)"
>
· {{ $t('task.comment.edited', {date: formatDateSince(c.updated)}) }}
</span>
@ -153,16 +153,18 @@
<script setup lang="ts">
import {ref, reactive, computed, shallowReactive, watch, nextTick} from 'vue'
import {useStore} from 'vuex'
import {useStore} from '@/store'
import {useI18n} from 'vue-i18n'
import Editor from '@/components/input/AsyncEditor'
import TaskCommentService from '@/services/taskComment'
import TaskCommentModel from '@/models/taskComment'
import TaskCommentModel, { type ITaskComment } from '@/models/taskComment'
import {uploadFile} from '@/helpers/attachments'
import {success} from '@/message'
import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
import type { ITask } from '@/models/task'
const props = defineProps({
taskId: {
type: Number,
@ -176,7 +178,7 @@ const props = defineProps({
const {t} = useI18n({useScope: 'global'})
const store = useStore()
const comments = ref<TaskCommentModel[]>([])
const comments = ref<ITaskComment[]>([])
const showDeleteModal = ref(false)
const commentToDelete = reactive(new TaskCommentModel())
@ -186,8 +188,8 @@ const commentEdit = reactive(new TaskCommentModel())
const newComment = reactive(new TaskCommentModel())
const saved = ref(null)
const saving = ref(null)
const saved = ref<ITask['id'] | null>(null)
const saving = ref<ITask['id'] | null>(null)
const userAvatar = computed(() => store.state.auth.info.getAvatarUrl(48))
const currentUserId = computed(() => store.state.auth.info.id)
@ -213,7 +215,7 @@ function attachmentUpload(...args) {
const taskCommentService = shallowReactive(new TaskCommentService())
async function loadComments(taskId) {
async function loadComments(taskId: ITask['id']) {
if (!enabled.value) {
return
}
@ -257,12 +259,12 @@ async function addComment() {
}
}
function toggleEdit(comment: TaskCommentModel) {
function toggleEdit(comment: ITaskComment) {
isCommentEdit.value = !isCommentEdit.value
Object.assign(commentEdit, comment)
}
function toggleDelete(commentId) {
function toggleDelete(commentId: ITaskComment['id']) {
showDeleteModal.value = !showDeleteModal.value
commentToDelete.id = commentId
}
@ -292,7 +294,7 @@ async function editComment() {
}
}
async function deleteComment(commentToDelete: TaskCommentModel) {
async function deleteComment(commentToDelete: ITaskComment) {
try {
await taskCommentService.delete(commentToDelete)
const index = comments.value.findIndex(({id}) => id === commentToDelete.id)

View File

@ -1,6 +1,6 @@
<template>
<p class="created">
<time :datetime="formatISO(task.created)" v-tooltip="formatDate(task.created)">
<time :datetime="formatISO(task.created)" v-tooltip="formatDateLong(task.created)">
<i18n-t keypath="task.detail.created">
<span>{{ formatDateSince(task.created) }}</span>
{{ task.createdBy.getDisplayName() }}
@ -27,13 +27,13 @@
</template>
<script lang="ts" setup>
import {computed, toRefs} from 'vue'
import TaskModel from '@/models/task'
import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
import {computed, toRefs, type PropType} from 'vue'
import type { ITask } from '@/models/task'
import {formatISO, formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
const props = defineProps({
task: {
type: TaskModel,
type: Object as PropType<ITask>,
required: true,
},
})

View File

@ -1,12 +1,14 @@
<template>
<td v-tooltip="+date === 0 ? '' : formatDate(date)">
<time :datetime="date ? formatISO(date) : null">
<td v-tooltip="+date === 0 ? '' : formatDateLong(date)">
<time :datetime="date ? formatISO(date) : undefined">
{{ +date === 0 ? '-' : formatDateSince(date) }}
</time>
</td>
</template>
<script setup lang="ts">
import {formatISO, formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
defineProps({
date: {
type: Date,

View File

@ -38,17 +38,17 @@
</template>
<script setup lang="ts">
import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount} from 'vue'
import {useStore} from 'vuex'
import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount, type PropType} from 'vue'
import {useStore} from '@/store'
import {useI18n} from 'vue-i18n'
import flatPickr from 'vue-flatpickr-component'
import TaskService from '@/services/task'
import TaskModel from '@/models/task'
import { type ITask } from '@/models/task'
const props = defineProps({
modelValue: {
type: TaskModel,
type: Object as PropType<ITask>,
required: true,
},
})
@ -58,7 +58,7 @@ const {t} = useI18n({useScope: 'global'})
const store = useStore()
const taskService = shallowReactive(new TaskService())
const task = ref<TaskModel>()
const task = ref<ITask>()
// We're saving the due date seperately to prevent null errors in very short periods where the task is null.
const dueDate = ref<Date>()

View File

@ -30,30 +30,31 @@
</template>
<script setup lang="ts">
import {ref,computed, watch} from 'vue'
import {useStore} from 'vuex'
import {ref,computed, watch, type PropType} from 'vue'
import {useStore} from '@/store'
import Editor from '@/components/input/AsyncEditor'
import TaskModel from '@/models/task'
import type { ITask } from '@/models/task'
const props = defineProps({
modelValue: {
type: TaskModel,
type: Object as PropType<ITask>,
required: true,
},
attachmentUpload: {
required: true,
},
canWrite: {
type: Boolean,
required: true,
},
})
const emit = defineEmits(['update:modelValue'])
const task = ref<TaskModel>({description: ''})
const task = ref<ITask>({description: ''})
const saved = ref(false)
// Since loading is global state, this variable ensures we're only showing the saving icon when saving the description.

View File

@ -28,8 +28,8 @@
</template>
<script setup lang="ts">
import {ref, shallowReactive, watch, PropType} from 'vue'
import {useStore} from 'vuex'
import {ref, shallowReactive, watch, type PropType} from 'vue'
import {useStore} from '@/store'
import {useI18n} from 'vue-i18n'
import User from '@/components/misc/user.vue'
@ -37,9 +37,9 @@ import Multiselect from '@/components/input/multiselect.vue'
import BaseButton from '@/components/base/BaseButton.vue'
import {includesById} from '@/helpers/utils'
import UserModel from '@/models/user'
import ListUserService from '@/services/listUsers'
import {success} from '@/message'
import type { IUser } from '@/modelTypes/IUser'
const props = defineProps({
taskId: {
@ -54,7 +54,7 @@ const props = defineProps({
default: false,
},
modelValue: {
type: Array as PropType<UserModel[]>,
type: Array as PropType<IUser[]>,
default: () => [],
},
})
@ -65,7 +65,7 @@ const {t} = useI18n({useScope: 'global'})
const listUserService = shallowReactive(new ListUserService())
const foundUsers = ref([])
const assignees = ref<UserModel[]>([])
const assignees = ref<IUser[]>([])
watch(
() => props.modelValue,
@ -78,13 +78,13 @@ watch(
},
)
async function addAssignee(user: UserModel) {
async function addAssignee(user: IUser) {
await store.dispatch('tasks/addAssignee', {user: user, taskId: props.taskId})
emit('update:modelValue', assignees.value)
success({message: t('task.assignee.assignSuccess')})
}
async function removeAssignee(user: UserModel) {
async function removeAssignee(user: IUser) {
await store.dispatch('tasks/removeAssignee', {user: user, taskId: props.taskId})
// Remove the assignee from the list

View File

@ -39,8 +39,8 @@
</template>
<script setup lang="ts">
import {PropType, ref, computed, shallowReactive, watch} from 'vue'
import {useStore} from 'vuex'
import {type PropType, ref, computed, shallowReactive, watch} from 'vue'
import {useStore} from '@/store'
import {useI18n} from 'vue-i18n'
import LabelModel from '@/models/label'
@ -49,10 +49,11 @@ import {success} from '@/message'
import BaseButton from '@/components/base/BaseButton.vue'
import Multiselect from '@/components/input/multiselect.vue'
import type { ILabel } from '@/modelTypes/ILabel'
const props = defineProps({
modelValue: {
type: Array as PropType<LabelModel[]>,
type: Array as PropType<ILabel[]>,
default: () => [],
},
taskId: {
@ -71,7 +72,7 @@ const store = useStore()
const {t} = useI18n({useScope: 'global'})
const labelTaskService = shallowReactive(new LabelTaskService())
const labels = ref<LabelModel[]>([])
const labels = ref<ILabel[]>([])
const query = ref('')
watch(
@ -92,7 +93,7 @@ function findLabel(newQuery: string) {
query.value = newQuery
}
async function addLabel(label: LabelModel, showNotification = true) {
async function addLabel(label: ILabel, showNotification = true) {
const bubble = () => {
emit('update:modelValue', labels.value)
emit('change', labels.value)
@ -110,14 +111,14 @@ async function addLabel(label: LabelModel, showNotification = true) {
}
}
async function removeLabel(label: LabelModel) {
async function removeLabel(label: ILabel) {
if (props.taskId !== 0) {
await store.dispatch('tasks/removeLabel', {label, taskId: props.taskId})
}
for (const l in labels.value) {
if (labels.value[l].id === label.id) {

Can you rename it?

Can you rename it?
labels.value.splice(l, 1)
labels.value.splice(l, 1) // FIXME: l should be index
}
}
emit('update:modelValue', labels.value)

View File

@ -32,18 +32,18 @@
</template>
<script setup lang="ts">
import {ref, computed} from 'vue'
import {useStore} from 'vuex'
import {ref, computed, type PropType} from 'vue'
import {useStore} from '@/store'
import BaseButton from '@/components/base/BaseButton.vue'
import Done from '@/components/misc/Done.vue'
import TaskModel from '@/models/task'
import type {ITask} from '@/models/task'
import { useRouter } from 'vue-router'
import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
const props = defineProps({
task: {
type: TaskModel,
type: Object as PropType<ITask>,
required: true,
},
canWrite: {

View File

@ -24,7 +24,7 @@
:class="{'overdue': task.dueDate <= new Date() && !task.done}"
class="due-date"
v-if="task.dueDate > 0"
v-tooltip="formatDate(task.dueDate)">
v-tooltip="formatDateLong(task.dueDate)">
<span class="icon">
<icon :icon="['far', 'calendar-alt']"/>
</span>
@ -66,16 +66,17 @@
</template>
<script lang="ts">
import {defineComponent} from 'vue'
import {defineComponent, type PropType} from 'vue'
import {playPop} from '../../../helpers/playPop'
import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
import User from '../../../components/misc/user'
import PriorityLabel from '../../../components/tasks/partials/priorityLabel.vue'
import User from '../../../components/misc/user.vue'
import Done from '@/components/misc/Done.vue'
import Labels from '../../../components/tasks/partials/labels'
import ChecklistSummary from './checklist-summary'
import {TASK_DEFAULT_COLOR} from '@/models/task'
import Labels from '../../../components/tasks/partials/labels.vue'
import ChecklistSummary from './checklist-summary.vue'
import {TASK_DEFAULT_COLOR, type ITask} from '@/models/task'
import {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatDate'
import {colorIsDark} from '@/helpers/color/colorIsDark'
export default defineComponent({
@ -95,6 +96,7 @@ export default defineComponent({
},
props: {
task: {
type: Object as PropType<ITask>,
required: true,
},
loading: {
@ -111,8 +113,11 @@ export default defineComponent({
},
},
methods: {
formatDateLong,
formatISO,
formatDateSince,
colorIsDark,
async toggleTaskDone(task) {
async toggleTaskDone(task: ITask) {
this.loadingInternal = true
try {
const done = !task.done

View File

@ -11,8 +11,12 @@
</template>
<script setup lang="ts">
import type { PropType } from 'vue'
import type { ILabel } from '@/models/label'
defineProps({
labels: {
type: Array as PropType<ILabel[]>,
required: true,
},
})

View File

@ -1,5 +1,5 @@
<template>
<multiselect
<Multiselect
class="control is-expanded"
:placeholder="$t('list.search')"
@search="findLists"
@ -13,23 +13,20 @@
<span class="list-namespace-title search-result">{{ namespace(props.option.namespaceId) }} ></span>
{{ props.option.title }}
</template>
</multiselect>
</Multiselect>
</template>
<script lang="ts" setup>
import {reactive, ref, watch} from 'vue'
import type {PropType} from 'vue'
import {useStore} from 'vuex'
import {useStore} from '@/store'
import {useI18n} from 'vue-i18n'
import ListModel from '@/models/list'
import ListModel, { type IList } from '@/models/list'
import Multiselect from '@/components/input/multiselect.vue'
const props = defineProps({
modelValue: {
type: Object as PropType<ListModel>,
validator(value) {
return value instanceof ListModel
},
type: Object as PropType<IList>,
required: false,
},
})
@ -38,7 +35,7 @@ const emit = defineEmits(['update:modelValue'])
const store = useStore()
const {t} = useI18n({useScope: 'global'})
const list = reactive<ListModel>(new ListModel())
const list: IList = reactive(new ListModel())
watch(
() => props.modelValue,
@ -57,7 +54,10 @@ function findLists(query: string) {
foundLists.value = store.getters['lists/searchList'](query)
}
function select(l: ListModel | null) {
function select(l: IList | null) {
if (l === null) {
return
}
Object.assign(list, l)
emit('update:modelValue', list)
}

View File

@ -21,7 +21,7 @@
</template>
<script setup lang="ts">
import priorities from '@/models/constants/priorities'
import {PRIORITIES as priorities} from '@/constants/priorities'
defineProps({
priority: {

View File

@ -5,19 +5,19 @@
@change="updateData"
:disabled="disabled || undefined"
>
<option :value="priorities.UNSET">{{ $t('task.priority.unset') }}</option>
<option :value="priorities.LOW">{{ $t('task.priority.low') }}</option>
<option :value="priorities.MEDIUM">{{ $t('task.priority.medium') }}</option>
<option :value="priorities.HIGH">{{ $t('task.priority.high') }}</option>
<option :value="priorities.URGENT">{{ $t('task.priority.urgent') }}</option>
<option :value="priorities.DO_NOW">{{ $t('task.priority.doNow') }}</option>
<option :value="PRIORITIES.UNSET">{{ $t('task.priority.unset') }}</option>
<option :value="PRIORITIES.LOW">{{ $t('task.priority.low') }}</option>
<option :value="PRIORITIES.MEDIUM">{{ $t('task.priority.medium') }}</option>
<option :value="PRIORITIES.HIGH">{{ $t('task.priority.high') }}</option>
<option :value="PRIORITIES.URGENT">{{ $t('task.priority.urgent') }}</option>
<option :value="PRIORITIES.DO_NOW">{{ $t('task.priority.doNow') }}</option>
</select>
</div>
</template>
<script setup lang="ts">
import {ref, watch} from 'vue'
import priorities from '@/models/constants/priorities.json'
import {PRIORITIES} from '@/constants/priorities'
const priority = ref(0)

View File

@ -144,8 +144,8 @@ import {defineComponent} from 'vue'
import TaskService from '../../../services/task'
import TaskModel from '../../../models/task'
import TaskRelationService from '../../../services/taskRelation'
import relationKinds from '../../../models/constants/relationKinds'
import TaskRelationModel from '../../../models/taskRelation'
import TaskRelationModel from '@/models/taskRelation'
import { RELATION_KIND, RELATION_KINDS } from '@/types/IRelationKind'
import BaseButton from '@/components/base/BaseButton.vue'
import Multiselect from '@/components/input/multiselect.vue'
@ -157,9 +157,9 @@ export default defineComponent({
relatedTasks: {},
taskService: new TaskService(),
foundTasks: [],
relationKinds: relationKinds,
relationKinds: RELATION_KINDS,
newTaskRelationTask: new TaskModel(),
newTaskRelationKind: 'related',
newTaskRelationKind: RELATION_KIND.RELATED,
taskRelationService: new TaskRelationService(),
showDeleteModal: false,
relationToDelete: {},
@ -221,7 +221,7 @@ export default defineComponent({
},
},
methods: {
async findTasks(query) {
async findTasks(query: string) {
this.query = query
this.foundTasks = await this.taskService.getAll({}, {s: query})
},

View File

@ -26,7 +26,7 @@
</template>
<script setup lang="ts">
import {PropType, ref, onMounted, watch} from 'vue'
import {type PropType, ref, onMounted, watch} from 'vue'
import BaseButton from '@/components/base/BaseButton.vue'
import Datepicker from '@/components/input/datepicker.vue'
@ -45,8 +45,8 @@ const props = defineProps({
return false
}
const isDate = (e: any) => e instanceof Date
const isString = (e: any) => typeof e === 'string'
const isDate = (e: unknown) => e instanceof Date
const isString = (e: unknown) => typeof e === 'string'
dpschen marked this conversation as resolved Outdated

What's the difference between unknown and any?

What's the difference between `unknown` and `any`?

unknown means that we do not know the type. For these function we don't know it.
any means we don't care what type we use.

It reminds me a bit of the difference of undefined vs null.

But probably better to let stackoverflow do it's work: https://stackoverflow.com/a/51439876

:P

`unknown` means that we do not know the type. For these function we don't know it. `any` means we don't care what type we use. It reminds me a bit of the difference of `undefined` vs `null`. But probably better to let stackoverflow do it's work: https://stackoverflow.com/a/51439876 :P
for (const e of prop) {
if (!isDate(e) && !isString(e)) {

View File

@ -18,17 +18,14 @@
<div class="control">
<div class="select">
<select @change="updateData" v-model="task.repeatMode" id="repeatMode">
<option :value="repeatModes.REPEAT_MODE_DEFAULT">{{ $t('misc.default') }}</option>
<option :value="repeatModes.REPEAT_MODE_MONTH">{{ $t('task.repeat.monthly') }}</option>
<option :value="repeatModes.REPEAT_MODE_FROM_CURRENT_DATE">{{
$t('task.repeat.fromCurrentDate')
}}
</option>
<option :value="TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT">{{ $t('misc.default') }}</option>
<option :value="TASK_REPEAT_MODES.REPEAT_MODE_MONTH">{{ $t('task.repeat.monthly') }}</option>
<option :value="TASK_REPEAT_MODES.REPEAT_MODE_FROM_CURRENT_DATE">{{ $t('task.repeat.fromCurrentDate') }}</option>
</select>
</div>
</div>
</div>
<div class="is-flex" v-if="task.repeatMode !== repeatModes.REPEAT_MODE_MONTH">
<div class="is-flex" v-if="task.repeatMode !== TASK_REPEAT_MODES.REPEAT_MODE_MONTH">
<p class="pr-4">
{{ $t('task.repeat.each') }}
</p>
@ -65,14 +62,18 @@
</template>
<script setup lang="ts">
import {ref, reactive, watch} from 'vue'
import repeatModes from '@/models/constants/taskRepeatModes.json'
import TaskModel from '@/models/task'
import {error} from '@/message'
import {ref, reactive, watch, type PropType} from 'vue'
import {useI18n} from 'vue-i18n'
import {error} from '@/message'
import {TASK_REPEAT_MODES} from '@/types/IRepeatMode'
import type {IRepeatAfter} from '@/types/IRepeatAfter'
import type {ITask} from '@/modelTypes/ITask'
const props = defineProps({
modelValue: {
type: Object as PropType<ITask>,
default: () => ({}),
required: true,
},
@ -86,7 +87,7 @@ const {t} = useI18n({useScope: 'global'})
const emit = defineEmits(['update:modelValue', 'change'])
const task = ref<TaskModel>()
const task = ref<ITask>()
const repeatAfter = reactive({
amount: 0,
type: '',
@ -104,7 +105,7 @@ watch(
)
function updateData() {
if (task.value.repeatMode !== repeatModes.REPEAT_MODE_DEFAULT && repeatAfter.amount === 0) {
if (!task.value || task.value.repeatMode !== TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT && repeatAfter.amount === 0) {
return
}
@ -118,8 +119,8 @@ function updateData() {
emit('change')
}
function setRepeatAfter(amount: number, type) {
Object.assign(repeatAfter, {amount, type})
function setRepeatAfter(amount: number, type: IRepeatAfter['type']) {
Object.assign(repeatAfter, { amount, type})
updateData()
}
</script>

View File

@ -30,7 +30,7 @@
{{ task.title }}
</span>
<labels class="labels ml-2 mr-1" :labels="task.labels" v-if="task.labels.length > 0"/>
<labels class="labels ml-2 mr-1" :labels="task.labels" v-if="task.labels.length > 0" />
<user
:avatar-size="27"
:is-inline="true"
@ -43,7 +43,7 @@
v-if="+new Date(task.dueDate) > 0"
class="dueDate"
@click.prevent.stop="showDefer = !showDefer"
v-tooltip="formatDate(task.dueDate)"
v-tooltip="formatDateLong(task.dueDate)"
konrad marked this conversation as resolved Outdated

Is formatDateLong the same as the global formatDate helper?

Edit: looks like it is.

Is `formatDateLong` the same as the global `formatDate` helper? Edit: looks like it is.

Yes. I removed the mixins and replaced them everywhere with imports for better typing (trying to avoid globals in general). In order to prevent naming collision I had to rename one of the methods. I don't remember anymore where it collided though…

Is the replacing with imports fine with you?

Yes. I removed the mixins and replaced them everywhere with imports for better typing (trying to avoid globals in general). In order to prevent naming collision I had to rename one of the methods. I don't remember anymore where it collided though… Is the replacing with imports fine with you?

Yeah, removing the mixins is fine.

Yeah, removing the mixins is fine.
>
<time
:datetime="formatISO(task.dueDate)"
@ -96,19 +96,20 @@
</template>
<script lang="ts">
import {defineComponent} from 'vue'
import {defineComponent, type PropType} from 'vue'
import TaskModel from '../../../models/task'
import PriorityLabel from './priorityLabel'
import TaskModel, { type ITask } from '../../../models/task'
import PriorityLabel from './priorityLabel.vue'
import TaskService from '../../../services/task'
import Labels from './labels'
import User from '../../misc/user'
import Labels from '@/components/tasks/partials/labels.vue'
import User from '@/components/misc/user.vue'
import BaseButton from '@/components/base/BaseButton.vue'
import Fancycheckbox from '../../input/fancycheckbox'
import DeferTask from './defer-task'
import Fancycheckbox from '../../input/fancycheckbox.vue'
import DeferTask from './defer-task.vue'
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
import {playPop} from '@/helpers/playPop'
import ChecklistSummary from './checklist-summary'
import ChecklistSummary from './checklist-summary.vue'
import {formatDateSince, formatISO, formatDateLong} from '@/helpers/time/formatDate'
export default defineComponent({
name: 'singleTaskInList',
@ -130,7 +131,7 @@ export default defineComponent({
},
props: {
theTask: {
type: TaskModel,
type: Object as PropType<ITask>,
required: true,
},
isArchived: {
@ -188,7 +189,11 @@ export default defineComponent({
},
},
methods: {
async markAsDone(checked) {
formatDateSince,
formatISO,
formatDateLong,
async markAsDone(checked: boolean) {
const updateFunc = async () => {
const task = await this.taskService.update(this.task)
if (this.task.done) {
@ -213,7 +218,7 @@ export default defineComponent({
}
},
undoDone(checked) {
undoDone(checked: boolean) {
this.task.done = !this.task.done
this.markAsDone(!checked)
},

View File

@ -7,7 +7,7 @@
</template>
<script setup lang="ts">
import {PropType} from 'vue'
import type {PropType} from 'vue'
import BaseButton from '@/components/base/BaseButton.vue'
type Order = 'asc' | 'desc' | 'none'

View File

@ -1,6 +1,6 @@
import {watch, reactive, shallowReactive, unref, toRefs, readonly} from 'vue'
import type {MaybeRef} from '@vueuse/core'
import {useStore} from 'vuex'
import {useStore} from '@/store'
import ListService from '@/services/list'
import ListModel from '@/models/list'

View File

@ -1,5 +1,5 @@
import {ref, computed} from 'vue'
import {useStore} from 'vuex'
import {useStore} from '@/store'
export function useNameSpaceSearch() {
const query = ref('')

View File

@ -0,0 +1,10 @@
export const PRIORITIES = {
'UNSET': 0,
'LOW': 1,
'MEDIUM': 2,
'HIGH': 3,
'URGENT': 4,
'DO_NOW': 5,
} as const
export type Priority = typeof PRIORITIES[keyof typeof PRIORITIES]

7
src/constants/rights.ts Normal file
View File

@ -0,0 +1,7 @@
export const RIGHTS = {
'READ': 0,
'READ_WRITE': 1,
'ADMIN': 2,
} as const
export type Right = typeof RIGHTS[keyof typeof RIGHTS]

View File

@ -1,22 +1,27 @@
import AttachmentModel from '@/models/attachment'
import FileModel from '@/models/file'
import AttachmentModel, { type IAttachment } from '@/models/attachment'
import type {IFile} from '@/models/file'
import AttachmentService from '@/services/attachment'
import { store } from '@/store'
export function uploadFile(taskId: number, file: FileModel, onSuccess: () => Function) {
export function uploadFile(taskId: number, file: IFile, onSuccess: () => Function) {
const attachmentService = new AttachmentService()
const files = [file]
return uploadFiles(attachmentService, taskId, files, onSuccess)
}
export async function uploadFiles(attachmentService: AttachmentService, taskId: number, files: FileModel[], onSuccess : Function = () => {}) {
export async function uploadFiles(
attachmentService: AttachmentService,
taskId: number,
files: IFile[],
onSuccess: Function = () => {},
) {
const attachmentModel = new AttachmentModel({taskId})
const response = await attachmentService.create(attachmentModel, files)
console.debug(`Uploaded attachments for task ${taskId}, response was`, response)
response.success?.map((attachment: AttachmentModel) => {
response.success?.map((attachment: IAttachment) => {
store.dispatch('tasks/addTaskAttachment', {
taskId,
attachment,
@ -29,6 +34,6 @@ export async function uploadFiles(attachmentService: AttachmentService, taskId:
}
}
export function generateAttachmentUrl(taskId: number, attachmentId: number) : any {
export function generateAttachmentUrl(taskId: number, attachmentId: number) {
return `${window.API_URL}/tasks/${taskId}/attachments/${attachmentId}`
}

View File

@ -1,5 +1,5 @@
import {AuthenticatedHTTPFactory} from '@/http-common'
import {AxiosResponse} from 'axios'
import type {AxiosResponse} from 'axios'
let savedToken: string | null = null

View File

@ -1,4 +1,4 @@
export function colorIsDark(color) {
export function colorIsDark(color: string | undefined) {
if (typeof color === 'undefined') {
return true // Defaults to dark
}

View File

@ -0,0 +1,18 @@
const SIZES = [
'B',
'KB',
'MB',
'GB',
'TB',
] as const
export function getHumanSize(inputSize: number) {
let iterator = 0
let size = inputSize
while (size > 1024) {
size /= 1024
iterator++
}
return Number(Math.round(Number(size + 'e2')) + 'e-2') + ' ' + SIZES[iterator]
}

View File

@ -1,8 +1,7 @@
import {i18n} from '@/i18n'
import type { IList } from '@/models/list'
import type ListModal from '@/models/list'
export function getListTitle(l: ListModal) {
export function getListTitle(l: IList) {
if (l.id === -1) {
return i18n.global.t('list.pseudo.favorites.title')
}

View File

@ -1,7 +1,7 @@
import {i18n} from '@/i18n'
import NamespaceModel from '@/models/namespace'
import type {INamespace} from '@/models/namespace'
export const getNamespaceTitle = (n: NamespaceModel) => {
export const getNamespaceTitle = (n: INamespace) => {
if (n.id === -1) {
return i18n.global.t('namespace.pseudo.sharedLists.title')
}

View File

@ -1,18 +1,10 @@
import {createNewIndexer} from '../indexes'
import type {LabelState} from '@/store/types'
import type {ILabel} from '@/models/label'
const {search} = createNewIndexer('labels', ['title', 'description'])
export interface label {
id: number,
title: string,
}
interface labelState {
labels: {
[k: number]: label,
},
}
/**
* Checks if a list of labels is available in the store and filters them then query
* @param {Object} state
@ -20,7 +12,7 @@ interface labelState {
* @param {String} query
* @returns {Array}
*/
export function filterLabelsByQuery(state: labelState, labelsToHide: label[], query: string) {
export function filterLabelsByQuery(state: LabelState, labelsToHide: ILabel[], query: string) {
const labelIdsToHide: number[] = labelsToHide.map(({id}) => id)
return search(query)
@ -36,6 +28,6 @@ export function filterLabelsByQuery(state: labelState, labelsToHide: label[], qu
* @param {Array} ids
* @returns {Array}
*/
export function getLabelsByIds(state: labelState, ids: number[]) {
export function getLabelsByIds(state: LabelState, ids: ILabel['id'][]) {
return Object.values(state.labels).filter(({id}) => ids.includes(id))
}

View File

@ -1,7 +1,7 @@
import {createRandomID} from '@/helpers/randomId'
import {parseURL} from 'ufo'
interface Provider {
export interface Provider {
name: string
key: string
authUrl: string

View File

@ -1,4 +1,4 @@
import ListModel from '@/models/list'
import type {IList} from '@/models/list'
const key = 'collapsedBuckets'
@ -11,7 +11,10 @@ const getAllState = () => {
return JSON.parse(saved)
}
export const saveCollapsedBucketState = (listId: ListModel['id'], collapsedBuckets) => {
export const saveCollapsedBucketState = (
listId: IList['id'],
collapsedBuckets,
) => {
const state = getAllState()
state[listId] = collapsedBuckets
for (const bucketId in state[listId]) {
@ -22,7 +25,7 @@ export const saveCollapsedBucketState = (listId: ListModel['id'], collapsedBucke
localStorage.setItem(key, JSON.stringify(state))
}
export const getCollapsedBucketState = (listId : ListModel['id']) => {
export const getCollapsedBucketState = (listId : IList['id']) => {
const state = getAllState()
if (typeof state[listId] !== 'undefined') {
return state[listId]

View File

@ -1,6 +1,6 @@
import ListModel from '@/models/list'
import type {IList} from '@/models/list'
export function getSavedFilterIdFromListId(listId: ListModel['id']) {
export function getSavedFilterIdFromListId(listId: IList['id']) {
let filterId = listId * -1 - 1
// FilterIds from listIds are always positive
if (filterId < 0) {

View File

@ -1,8 +1,8 @@
export function findIndexById(array : [], id : string | number) {
export function findIndexById<T extends {id: string | number}>(array : T[], id : string | number) {
return array.findIndex(({id: currentId}) => currentId === id)
}
export function findById(array : [], id : string | number) {
export function findById<T extends {id: string | number}>(array : T[], id : string | number) {
return array.find(({id: currentId}) => currentId === id)
}
@ -11,11 +11,11 @@ export function includesById(array: [], id: string | number) {
}
// https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_isnil
export function isNil(value: any) {
export function isNil(value: unknown) {
return value == null
}
export function omitBy(obj: {}, check: (value: any) => boolean): {} {
export function omitBy(obj: {}, check: (value: unknown) => boolean) {
if (isNil(obj)) {
return {}
}

View File

@ -5,8 +5,6 @@ import router from './router'
import {error, success} from './message'
import {formatDate, formatDateShort, formatDateLong, formatDateSince, formatISO} from '@/helpers/time/formatDate'
import {VERSION} from './version.json'
// Notifications
@ -16,7 +14,7 @@ import Notifications from '@kyvg/vue3-notification'
import './registerServiceWorker'
// Vuex
import {store} from './store'
import { store, key } from './store'
// i18n
import {i18n} from './i18n'
@ -69,24 +67,6 @@ app.component('x-button', Button)
app.component('modal', Modal)
app.component('card', Card)
// Mixins
import {getNamespaceTitle} from './helpers/getNamespaceTitle'
import {getListTitle} from './helpers/getListTitle'
import {setTitle} from './helpers/setTitle'
app.mixin({
methods: {
formatDateSince,
format: formatDate,
formatDate: formatDateLong,
formatDateShort: formatDateShort,
formatISO,
getNamespaceTitle,
getListTitle,
setTitle,
},
})
app.config.errorHandler = (err, vm, info) => {
if (import.meta.env.DEV) {
console.error(err, vm, info)
@ -124,7 +104,7 @@ if (window.SENTRY_ENABLED) {
import('./sentry').then(sentry => sentry.default(app, router))
}
app.use(store)
app.use(store, key) // pass the injection key
app.use(router)
app.use(i18n)

View File

@ -0,0 +1,43 @@
import { REPEAT_TYPES, type IRepeatAfter } from '@/types/IRepeatAfter'
import { nativeEnum, number, object, preprocess } from 'zod'
export const RepeatsSchema = preprocess(
(repeats: unknown) => {
// Parses the "repeat after x seconds" from the task into a usable js object inside the task.
if (typeof repeats !== 'number') {
return repeats
}
const repeatAfterHours = (repeats / 60) / 60
const repeatAfter : IRepeatAfter = {
type: 'hours',
amount: repeatAfterHours,
}
// if its dividable by 24, its something with days, otherwise hours
if (repeatAfterHours % 24 === 0) {
const repeatAfterDays = repeatAfterHours / 24
if (repeatAfterDays % 7 === 0) {
repeatAfter.type = 'weeks'
repeatAfter.amount = repeatAfterDays / 7
} else if (repeatAfterDays % 30 === 0) {
repeatAfter.type = 'months'
repeatAfter.amount = repeatAfterDays / 30
} else if (repeatAfterDays % 365 === 0) {
repeatAfter.type = 'years'
repeatAfter.amount = repeatAfterDays / 365
} else {
repeatAfter.type = 'days'
repeatAfter.amount = repeatAfterDays
}
}
return repeatAfter
},
object({
type: nativeEnum(REPEAT_TYPES),
amount: number().int(),
}),
)

View File

@ -0,0 +1,5 @@
import type {Right} from '@/constants/rights'
export interface IAbstract {
maxRight: Right | null // FIXME: should this be readonly?
}

View File

@ -0,0 +1,11 @@
import type {IAbstract} from './IAbstract'
import type {IFile} from './IFile'
import type {IUser} from './IUser'
export interface IAttachment extends IAbstract {
id: number
taskId: number
createdBy: IUser
file: IFile
created: Date
}

View File

@ -0,0 +1,7 @@
import type {IAbstract} from './IAbstract'
export type AvatarProvider = 'default' | 'initials' | 'gravatar' | 'marble' | 'upload'
export interface IAvatar extends IAbstract {
avatarProvider: AvatarProvider
}

View File

@ -0,0 +1,12 @@
import type {IAbstract} from './IAbstract'
export interface IBackgroundImage extends IAbstract {
id: number
url: string
thumb: string
info: {
author: string
authorName: string
}
blurHash: string
}

17
src/modelTypes/IBucket.ts Normal file
View File

@ -0,0 +1,17 @@
import type {IAbstract} from './IAbstract'
import type {IUser} from './IUser'
import type {ITask} from './ITask'
export interface IBucket extends IAbstract {
id: number
title: string
listId: number
limit: number
tasks: ITask[]
isDoneBucket: boolean
position: number
createdBy: IUser
created: Date
updated: Date
}

View File

@ -0,0 +1,7 @@
import type {IAbstract} from './IAbstract'
export interface ICaldavToken extends IAbstract {
id: number;
created: Date;
}

View File

@ -0,0 +1,6 @@
import type {IAbstract} from './IAbstract'
export interface IEmailUpdate extends IAbstract {
newEmail: string
password: string
}

10
src/modelTypes/IFile.ts Normal file
View File

@ -0,0 +1,10 @@
import type {IAbstract} from './IAbstract'
export interface IFile extends IAbstract {
id: number
mime: string
name: string
size: number
created: Date
}

15
src/modelTypes/ILabel.ts Normal file
View File

@ -0,0 +1,15 @@
import type {IAbstract} from './IAbstract'
import type {IUser} from './IUser'
export interface ILabel extends IAbstract {
id: number
title: string
hexColor: string
description: string
createdBy: IUser
listId: number
textColor: string
created: Date
updated: Date
}

View File

@ -0,0 +1,7 @@
import type {IAbstract} from './IAbstract'
export interface ILabelTask extends IAbstract {
id: number
taskId: number
labelId: number
}

View File

@ -0,0 +1,17 @@
import type {IAbstract} from './IAbstract'
import type {IUser} from './IUser'
import type { Right } from '@/constants/rights'
export interface ILinkShare extends IAbstract {
id: number
hash: string
right: Right
sharedBy: IUser
sharingType: number // FIXME: use correct numbers
listId: number
name: string
password: string
created: Date
updated: Date
}

26
src/modelTypes/IList.ts Normal file
View File

@ -0,0 +1,26 @@
import type {IAbstract} from './IAbstract'
import type {ITask} from './ITask'
import type {IUser} from './IUser'
import type {ISubscription} from './ISubscription'
import type {INamespace} from './INamespace'
export interface IList extends IAbstract {
id: number
title: string
description: string
owner: IUser
tasks: ITask[]
namespaceId: INamespace['id']
isArchived: boolean
hexColor: string
identifier: string
backgroundInformation: any // FIXME: improve type
isFavorite: boolean
subscription: ISubscription
position: number
backgroundBlurHash: string
created: Date
updated: Date
}

View File

@ -0,0 +1,9 @@
import type {IAbstract} from './IAbstract'
import type {IList} from './IList'
import type {INamespace} from './INamespace'
export interface IListDuplicate extends IAbstract {
listId: number
namespaceId: INamespace['id']
list: IList
}

View File

@ -0,0 +1,18 @@
import type {IAbstract} from './IAbstract'
import type {IList} from './IList'
import type {IUser} from './IUser'
import type {ISubscription} from './ISubscription'
export interface INamespace extends IAbstract {
id: number
title: string
description: string
owner: IUser
lists: IList[]
isArchived: boolean
hexColor: string
subscription: ISubscription
created: Date
updated: Date
}

View File

@ -0,0 +1,51 @@
import type {IAbstract} from './IAbstract'
import type {IUser} from './IUser'
import type {ITask} from './ITask'
import type {ITaskComment} from './ITaskComment'
import type {ITeam} from './ITeam'
import type { IList } from './IList'
export const NOTIFICATION_NAMES = {
'TASK_COMMENT': 'task.comment',
'TASK_ASSIGNED': 'task.assigned',
'TASK_DELETED': 'task.deleted',
'LIST_CREATED': 'list.created',
'TEAM_MEMBER_ADDED': 'team.member.added',
} as const
interface Notification {
doer: IUser
}
interface NotificationTask extends Notification {
task: ITask
comment: ITaskComment
}
interface NotificationAssigned extends Notification {
task: ITask
assignee: IUser
}
interface NotificationDeleted extends Notification {
task: ITask
}
interface NotificationCreated extends Notification {
task: ITask
list: IList
}
interface NotificationMemberAdded extends Notification {
member: IUser
team: ITeam
}
export interface INotification extends IAbstract {
id: number
name: string
notification: NotificationTask | NotificationAssigned | NotificationDeleted | NotificationCreated | NotificationMemberAdded
read: boolean
readAt: Date | null
created: Date
}

View File

@ -0,0 +1,7 @@
import type {IAbstract} from './IAbstract'
export interface IPasswordReset extends IAbstract {
token: string
newPassword: string
email: string
}

View File

@ -0,0 +1,6 @@
import type {IAbstract} from './IAbstract'
export interface IPasswordUpdate extends IAbstract {
newPassword: string
oldPassword: string
}

View File

@ -0,0 +1,14 @@
import type {IAbstract} from './IAbstract'
import type {IUser} from './IUser'
import type {IFilter} from '@/types/IFilter'
export interface ISavedFilter extends IAbstract {
id: number
title: string
description: string
filters: IFilter
owner: IUser
created: Date
updated: Date
}

View File

@ -0,0 +1,11 @@
import type {IAbstract} from './IAbstract'
import type {IUser} from './IUser'
export interface ISubscription extends IAbstract {
id: number
entity: string // FIXME: correct type?
entityId: number // FIXME: correct type?
user: IUser
created: Date
}

50
src/modelTypes/ITask.ts Normal file
View File

@ -0,0 +1,50 @@
import type { Priority } from '@/constants/priorities'
import type {IAbstract} from './IAbstract'
import type {IUser} from './IUser'
import type {ILabel} from './ILabel'
import type {IAttachment} from './IAttachment'
import type {ISubscription} from './ISubscription'
import type {IList} from './IList'
import type {IBucket} from './IBucket'
import type {IRelationKind} from '@/types/IRelationKind'
import type {IRepeatAfter} from '@/types/IRepeatAfter'
import type {IRepeatMode} from '@/types/IRepeatMode'
export interface ITask extends IAbstract {
id: number
title: string
description: string
done: boolean
doneAt: Date | null
priority: Priority
labels: ILabel[]
assignees: IUser[]
dueDate: Date | null
startDate: Date | null
endDate: Date | null
repeatAfter: number | IRepeatAfter
repeatFromCurrentDate: boolean
repeatMode: IRepeatMode
reminderDates: Date[]
parentTaskId: ITask['id']
hexColor: string
percentDone: number
relatedTasks: Partial<Record<IRelationKind, ITask>>,
attachments: IAttachment[]
identifier: string
index: number
isFavorite: boolean
subscription: ISubscription
position: number
kanbanPosition: number
createdBy: IUser
created: Date
updated: Date
listId: IList['id'] // Meta, only used when creating a new task
bucketId: IBucket['id']
}

View File

@ -0,0 +1,9 @@
import type {IAbstract} from './IAbstract'
import type {ITask} from './ITask'
import type {IUser} from './IUser'
export interface ITaskAssignee extends IAbstract {
created: Date
userId: IUser['id']
taskId: ITask['id']
}

View File

@ -0,0 +1,13 @@
import type {IAbstract} from './IAbstract'
import type {IUser} from './IUser'
import type {ITask} from './ITask'
export interface ITaskComment extends IAbstract {
id: number
taskId: ITask['id']
comment: string
author: IUser
created: Date
updated: Date
}

View File

@ -0,0 +1,15 @@
import type {IAbstract} from './IAbstract'
import type {IUser} from './IUser'
import type {ITask} from './ITask'
import type {IRelationKind} from '@/types/IRelationKind'
export interface ITaskRelation extends IAbstract {
id: number
otherTaskId: ITask['id']
taskId: ITask['id']
relationKind: IRelationKind
createdBy: IUser
created: Date
}

16
src/modelTypes/ITeam.ts Normal file
View File

@ -0,0 +1,16 @@
import type {IAbstract} from './IAbstract'
import type {IUser} from './IUser'
import type {ITeamMember} from './ITeamMember'
import type {Right} from '@/constants/rights'
export interface ITeam extends IAbstract {
id: number
name: string
description: string
members: ITeamMember[]
right: Right
createdBy: IUser
created: Date
updated: Date
}

View File

@ -0,0 +1,6 @@
import type {ITeamShareBase} from './ITeamShareBase'
import type {IList} from './IList'
export interface ITeamList extends ITeamShareBase {
listId: IList['id']
}

View File

@ -0,0 +1,7 @@
import type {IUser} from './IUser'
import type {IList} from './IList'
export interface ITeamMember extends IUser {
admin: boolean
teamId: IList['id']
}

View File

@ -0,0 +1,6 @@
import type {ITeamShareBase} from './ITeamShareBase'
import type {INamespace} from './INamespace'
export interface ITeamNamespace extends ITeamShareBase {
namespaceId: INamespace['id']
}

View File

@ -0,0 +1,11 @@
import type {IAbstract} from './IAbstract'
import type {ITeam} from './ITeam'
import type {Right} from '@/constants/rights'
export interface ITeamShareBase extends IAbstract {
teamId: ITeam['id']
right: Right
created: Date
updated: Date
}

7
src/modelTypes/ITotp.ts Normal file
View File

@ -0,0 +1,7 @@
import type {IAbstract} from './IAbstract'
export interface ITotp extends IAbstract {
secret: string
enabled: boolean
url: string
}

13
src/modelTypes/IUser.ts Normal file
View File

@ -0,0 +1,13 @@
import type {IAbstract} from './IAbstract'
import type {IUserSettings} from './IUserSettings'
export interface IUser extends IAbstract {
id: number
email: string
username: string
name: string
created: Date
updated: Date
settings: IUserSettings
}

Some files were not shown because too many files have changed in this diff Show More