vikunja/frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Merge branch 'main' into feature/ganttastic

Browse Source 
# Conflicts:
#	package.json
#	pnpm-lock.yaml
#	src/components/tasks/gantt-component.vue
This commit is contained in:
kolaente 2022-10-05 15:15:03 +02:00
commit 97a6b2f3d1
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
40 changed files with 736 additions and 714 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.envrc Normal file
View File

@ -0,0 +1 @@
use flake

7
.eslintrc.js → .eslintrc.cjs
View File

@ -1,3 +1,6 @@
/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution")
module.exports = { module.exports = {
'root': true, 'root': true,
'env': { 'env': {
@ -9,7 +12,7 @@ module.exports = {
'extends': [ 'extends': [
'eslint:recommended', 'eslint:recommended',
'plugin:vue/vue3-essential', 'plugin:vue/vue3-essential',
'@vue/typescript', '@vue/eslint-config-typescript/recommended',
], ],
'rules': { 'rules': {
'vue/html-quotes': [ 'vue/html-quotes': [
@ -28,7 +31,6 @@ module.exports = {
'error', 'error',
'never', 'never',
], ],
'vue/script-setup-uses-vars': 'error',
// see https://segmentfault.com/q/1010000040813116/a-1020000041134455 (original in chinese) // see https://segmentfault.com/q/1010000040813116/a-1020000041134455 (original in chinese)
'no-unused-vars': 'off', 'no-unused-vars': 'off',
@ -40,6 +42,7 @@ module.exports = {
'parserOptions': { 'parserOptions': {
'parser': '@typescript-eslint/parser', 'parser': '@typescript-eslint/parser',
'ecmaVersion': 2022, 'ecmaVersion': 2022,
'sourceType': 'module',
}, },
'ignorePatterns': [ 'ignorePatterns': [
'*.test.*', '*.test.*',

1
.gitignore vendored
View File

@ -2,6 +2,7 @@
node_modules node_modules
/dist* /dist*
*.zip *.zip
.direnv/
# local env files # local env files
.env.local .env.local

25
flake.lock Normal file
View File

@ -0,0 +1,25 @@
{
"nodes": {
"nixpkgs": {
"locked": {
"lastModified": 1664753041,
"narHash": "sha256-0ogaD8PaGHluARFeupofvk1Nq9gpVeZdlFM0Kcwguys=",
"owner": "NixOS",
"repo": "nixpkgs",
"rev": "a62844b302507c7531ad68a86cb7aa54704c9cb4",
"type": "github"
},
"original": {
"id": "nixpkgs",
"type": "indirect"
}
},
"root": {
"inputs": {
"nixpkgs": "nixpkgs"
}
}
},
"root": "root",
"version": 7
}

10
flake.nix Normal file
View File

@ -0,0 +1,10 @@
{
description = "Vikunja frontend dev environment";
outputs = { self, nixpkgs }:
let pkgs = nixpkgs.legacyPackages.x86_64-linux;
in {
defaultPackage.x86_64-linux =
pkgs.mkShell { buildInputs = [ pkgs.nodePackages.pnpm pkgs.cypress ]; };
};
}

1
index.html
View File

@ -2,7 +2,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vikunja</title> <title>Vikunja</title>
<meta name="description" content="Vikunja (/vɪˈkuːnjə/) - The to-do app to organize your life."> <meta name="description" content="Vikunja (/vɪˈkuːnjə/) - The to-do app to organize your life.">

30
package.json
View File

@ -25,15 +25,15 @@
"@github/hotkey": "2.0.1", "@github/hotkey": "2.0.1",
"@infectoone/vue-ganttastic": "^2.0.4", "@infectoone/vue-ganttastic": "^2.0.4",
"@kyvg/vue3-notification": "2.4.1", "@kyvg/vue3-notification": "2.4.1",
"@sentry/tracing": "7.14.0", "@sentry/tracing": "7.14.1",
"@sentry/vue": "7.14.0", "@sentry/vue": "7.14.1",
"@types/is-touch-device": "1.0.0", "@types/is-touch-device": "1.0.0",
"@types/lodash.clonedeep": "4.5.7", "@types/lodash.clonedeep": "4.5.7",
"@types/sortablejs": "1.15.0", "@types/sortablejs": "1.15.0",
"@vueuse/core": "9.3.0", "@vueuse/core": "9.3.0",
"@vueuse/router": "9.3.0", "@vueuse/router": "9.3.0",
"axios": "0.27.2", "axios": "0.27.2",
"blurhash": "2.0.2", "blurhash": "2.0.3",
"bulma-css-variables": "0.9.33", "bulma-css-variables": "0.9.33",
"camel-case": "4.1.2", "camel-case": "4.1.2",
"codemirror": "5.65.9", "codemirror": "5.65.9",
@ -42,6 +42,7 @@
"easymde": "2.18.0", "easymde": "2.18.0",
"flatpickr": "4.6.13", "flatpickr": "4.6.13",
"flexsearch": "0.7.21", "flexsearch": "0.7.21",
"floating-vue": "2.0.0-beta.20",
"highlight.js": "11.6.0", "highlight.js": "11.6.0",
"is-touch-device": "1.0.1", "is-touch-device": "1.0.1",
"lodash.clonedeep": "4.5.0", "lodash.clonedeep": "4.5.0",
@ -53,9 +54,9 @@
"snake-case": "3.0.4", "snake-case": "3.0.4",
"sortablejs": "1.15.0", "sortablejs": "1.15.0",
"ufo": "0.8.5", "ufo": "0.8.5",
"v-tooltip": "4.0.0-beta.17",
"vue": "3.2.40", "vue": "3.2.40",
"vue-advanced-cropper": "2.8.3", "vue-advanced-cropper": "2.8.6",
"vue-drag-resize": "2.0.3",
"vue-flatpickr-component": "9.0.6", "vue-flatpickr-component": "9.0.6",
"vue-i18n": "9.2.2", "vue-i18n": "9.2.2",
"vue-router": "4.1.5", "vue-router": "4.1.5",
@ -67,26 +68,29 @@
"@cypress/vite-dev-server": "3.2.0", "@cypress/vite-dev-server": "3.2.0",
"@cypress/vue": "4.2.0", "@cypress/vue": "4.2.0",
"@faker-js/faker": "7.5.0", "@faker-js/faker": "7.5.0",
"@rushstack/eslint-patch": "1.2.0",
"@types/dompurify": "2.3.4", "@types/dompurify": "2.3.4",
"@types/flexsearch": "0.7.3", "@types/flexsearch": "0.7.3",
"@types/node": "16.11.62", "@types/lodash.debounce": "4.0.7",
"@typescript-eslint/eslint-plugin": "5.38.1", "@types/marked": "4.0.7",
"@typescript-eslint/parser": "5.38.1", "@types/node": "16.11.64",
"@typescript-eslint/eslint-plugin": "5.39.0",
"@typescript-eslint/parser": "5.39.0",
"@vitejs/plugin-legacy": "2.2.0", "@vitejs/plugin-legacy": "2.2.0",
"@vitejs/plugin-vue": "3.1.0", "@vitejs/plugin-vue": "3.1.2",
"@vue/eslint-config-typescript": "11.0.2", "@vue/eslint-config-typescript": "11.0.2",
"@vue/test-utils": "2.1.0", "@vue/test-utils": "2.1.0",
"@vue/tsconfig": "0.1.3", "@vue/tsconfig": "0.1.3",
"autoprefixer": "10.4.12", "autoprefixer": "10.4.12",
"browserslist": "4.21.4", "browserslist": "4.21.4",
"caniuse-lite": "1.0.30001412", "caniuse-lite": "1.0.30001414",
"cypress": "10.9.0", "cypress": "10.9.0",
"esbuild": "0.15.10", "esbuild": "0.15.10",
"eslint": "8.24.0", "eslint": "8.24.0",
"eslint-plugin-vue": "9.5.1", "eslint-plugin-vue": "9.6.0",
"express": "4.18.1", "express": "4.18.1",
"happy-dom": "6.0.4", "happy-dom": "6.0.4",
"netlify-cli": "11.8.3", "netlify-cli": "12.0.2",
"postcss": "8.4.17", "postcss": "8.4.17",
"postcss-preset-env": "7.8.2", "postcss-preset-env": "7.8.2",
"rollup": "2.79.1", "rollup": "2.79.1",
@ -107,5 +111,5 @@
} }
}, },
"license": "AGPL-3.0-or-later", "license": "AGPL-3.0-or-later",
"packageManager": "pnpm@7.12.2" "packageManager": "pnpm@7.13.1"
} }

431
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

96
src/components/home/contentAuth.vue
View File

@ -60,65 +60,18 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {watch, computed, shallowRef, watchEffect, type VNode, h} from 'vue' import {watch, computed} from 'vue'
import {useBaseStore} from '@/stores/base' import {useRoute} from 'vue-router'
import {useRoute, useRouter} from 'vue-router'
import {useEventListener} from '@vueuse/core'
import {useLabelStore} from '@/stores/labels'
import Navigation from '@/components/home/navigation.vue' import Navigation from '@/components/home/navigation.vue'
import QuickActions from '@/components/quick-actions/quick-actions.vue' import QuickActions from '@/components/quick-actions/quick-actions.vue'
import BaseButton from '@/components/base/BaseButton.vue' import BaseButton from '@/components/base/BaseButton.vue'
import {useAuthStore} from '@/stores/auth'
function useRouteWithModal() { import {useBaseStore} from '@/stores/base'
const router = useRouter() import {useLabelStore} from '@/stores/labels'
const route = useRoute()
const backdropView = computed(() => route.fullPath && window.history.state.backdropView)
const routeWithModal = computed(() => { import {useRouteWithModal} from '@/composables/useRouteWithModal'
return backdropView.value import {useRenewTokenOnFocus} from '@/composables/useRenewTokenOnFocus'
? router.resolve(backdropView.value)
: route
})
const currentModal = shallowRef<VNode>()
watchEffect(() => {
if (!backdropView.value) {
currentModal.value = undefined
return
}
// logic from vue-router
// https://github.com/vuejs/vue-router-next/blob/798cab0d1e21f9b4d45a2bd12b840d2c7415f38a/src/RouterView.ts#L125
const routePropsOption = route.matched[0]?.props.default
const routeProps = routePropsOption
? routePropsOption === true
? route.params
: typeof routePropsOption === 'function'
? routePropsOption(route)
: routePropsOption
: null
currentModal.value = h(
route.matched[0]?.components.default,
routeProps,
)
})
function closeModal() {
const historyState = computed(() => route.fullPath && window.history.state)
if (historyState.value) {
router.back()
} else {
const backdropRoute = historyState.value?.backdropView && router.resolve(historyState.value.backdropView)
router.push(backdropRoute)
}
}
return {routeWithModal, currentModal, closeModal}
}
const {routeWithModal, currentModal, closeModal} = useRouteWithModal() const {routeWithModal, currentModal, closeModal} = useRouteWithModal()
@ -162,43 +115,8 @@ watch(() => route.name as string, (routeName) => {
// TODO: Reset the title if the page component does not set one itself // TODO: Reset the title if the page component does not set one itself
function useRenewTokenOnFocus() {
const router = useRouter()
const authStore = useAuthStore()
const userInfo = computed(() => authStore.info)
const authenticated = computed(() => authStore.authenticated)
// Try renewing the token every time vikunja is loaded initially
// (When opening the browser the focus event is not fired)
authStore.renewToken()
// Check if the token is still valid if the window gets focus again to maybe renew it
useEventListener('focus', () => {
if (!authenticated.value) {
return
}
const expiresIn = (userInfo.value !== null ? userInfo.value.exp : 0) - +new Date() / 1000
// If the token expiry is negative, it is already expired and we have no choice but to redirect
// the user to the login page
if (expiresIn < 0) {
authStore.checkAuth()
router.push({name: 'user.login'})
return
}
// Check if the token is valid for less than 60 hours and renew if thats the case
if (expiresIn < 60 * 3600) {
authStore.renewToken()
console.debug('renewed token')
}
})
}
useRenewTokenOnFocus() useRenewTokenOnFocus()
const labelStore = useLabelStore() const labelStore = useLabelStore()
labelStore.loadAllLabels() labelStore.loadAllLabels()
</script> </script>

254
src/components/input/editor.vue
View File

@ -4,7 +4,7 @@
<vue-easymde <vue-easymde
:configs="config" :configs="config"
@change="bubble" @change="() => bubble()"
@update:modelValue="handleInput" @update:modelValue="handleInput"
class="content" class="content"
v-if="isEditActive" v-if="isEditActive"
@ -66,32 +66,28 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {defineComponent} from 'vue' import {computed, nextTick, onMounted, ref, toRefs, watch} from 'vue'
import VueEasymde from './vue-easymde.vue' import VueEasymde from './vue-easymde.vue'
import {marked} from 'marked' import {marked} from 'marked'
import DOMPurify from 'dompurify' import DOMPurify from 'dompurify'
import {setupMarkdownRenderer} from '@/helpers/markdownRenderer'
import {createEasyMDEConfig} from './editorConfig' import {createEasyMDEConfig} from './editorConfig'
import AttachmentModel from '../../models/attachment' import AttachmentModel from '@/models/attachment'
import AttachmentService from '../../services/attachment' import AttachmentService from '@/services/attachment'
import {findCheckboxesInText} from '../../helpers/checklistFromText'
import {setupMarkdownRenderer} from '@/helpers/markdownRenderer'
import {findCheckboxesInText} from '@/helpers/checklistFromText'
import {createRandomID} from '@/helpers/randomId' import {createRandomID} from '@/helpers/randomId'
import BaseButton from '@/components/base/BaseButton.vue' import BaseButton from '@/components/base/BaseButton.vue'
import ButtonLink from '@/components/misc/ButtonLink.vue' import ButtonLink from '@/components/misc/ButtonLink.vue'
import type { IAttachment } from '@/modelTypes/IAttachment'
import type { ITask } from '@/modelTypes/ITask'
export default defineComponent({ const props = defineProps({
name: 'editor',
components: {
VueEasymde,
BaseButton,
ButtonLink,
},
props: {
modelValue: { modelValue: {
type: String, type: String,
default: '', default: '',
@ -135,96 +131,108 @@ export default defineComponent({
type: String, type: String,
default: '', default: '',
}, },
}, })
emits: ['update:modelValue'],
computed: {
showPreviewText() {
return this.isPreviewActive && this.text === '' && this.emptyText !== ''
},
showEditButton() {
return !this.isEditActive && this.text !== ''
},
},
data() {
return {
text: '',
changeTimeout: null,
isEditActive: false,
isPreviewActive: true,
preview: '', const emit = defineEmits(['update:modelValue'])
attachmentService: null,
loadedAttachments: {}, const text = ref('')
config: createEasyMDEConfig({ const changeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
placeholder: this.placeholder, const isEditActive = ref(false)
uploadImage: this.uploadEnabled, const isPreviewActive = ref(true)
imageUploadFunction: this.uploadCallback,
}), const showPreviewText = computed(() => isPreviewActive.value && text.value === '' && props.emptyText !== '')
checkboxId: createRandomID(), const showEditButton = computed(() => !isEditActive.value && text.value !== '')
}
const preview = ref('')
const attachmentService = new AttachmentService()
type CacheKey = `${ITask['id']}-${IAttachment['id']}`
const loadedAttachments = ref<{[key: CacheKey]: string}>({})
const config = ref(createEasyMDEConfig({
placeholder: props.placeholder,
uploadImage: props.uploadEnabled,
imageUploadFunction: props.uploadCallback,
}))
const checkboxId = ref(createRandomID())
const {modelValue} = toRefs(props)
watch(
modelValue,
async (value) => {
text.value = value
await nextTick()
renderPreview()
}, },
watch: { )
modelValue(modelValue) {
this.text = modelValue watch(
this.$nextTick(this.renderPreview) text,
}, (newVal, oldVal) => {
text(newVal, oldVal) {
// Only bubble the new value if it actually changed, but not if the component just got mounted and the text changed from the outside. // Only bubble the new value if it actually changed, but not if the component just got mounted and the text changed from the outside.
if (oldVal === '' && this.text === this.modelValue) { if (oldVal === '' && text.value === modelValue.value) {
return return
} }
this.bubble() bubble()
}, },
}, )
mounted() {
if (this.modelValue !== '') {
this.text = this.modelValue onMounted(() => {
if (modelValue.value !== '') {
text.value = modelValue.value
} }
if (this.previewIsDefault && this.hasPreview) { if (props.previewIsDefault && props.hasPreview) {
this.$nextTick(this.renderPreview) nextTick(() => renderPreview())
return return
} }
this.isPreviewActive = false isPreviewActive.value = false
this.isEditActive = true isEditActive.value = true
}, })
methods: {
// This gets triggered when only pasting content into the editor. // This gets triggered when only pasting content into the editor.
// A change event would not get generated by that, an input event does. // A change event would not get generated by that, an input event does.
// Therefore, we're using this handler to catch paste events. // Therefore, we're using this handler to catch paste events.
// But because this also gets triggered when typing into the editor, we give // But because this also gets triggered when typing into the editor, we give
// it a higher timeout to make the timouts cancel each other in that case so // it a higher timeout to make the timouts cancel each other in that case so
// that in the end, only one change event is triggered to the outside per change. // that in the end, only one change event is triggered to the outside per change.
handleInput(val) { function handleInput(val: string) {
// Don't bubble if the text is up to date // Don't bubble if the text is up to date
if (val === this.text) { if (val === text.value) {
return return
} }
this.text = val text.value = val
this.bubble(1000) bubble(1000)
},
bubble(timeout = 500) {
if (this.changeTimeout !== null) {
clearTimeout(this.changeTimeout)
} }
this.changeTimeout = setTimeout(() => { function bubble(timeout = 500) {
this.$emit('update:modelValue', this.text) if (changeTimeout.value !== null) {
clearTimeout(changeTimeout.value)
}
changeTimeout.value = setTimeout(() => {
emit('update:modelValue', text.value)
}, timeout) }, timeout)
}, }
replaceAt(str, index, replacement) {
return str.substr(0, index) + replacement + str.substr(index + replacement.length) function replaceAt(str: string, index: number, replacement: string) {
}, return str.slice(0, index) + replacement + str.slice(index + replacement.length)
findNthIndex(str, n) { }
function findNthIndex(str: string, n: number) {
const checkboxes = findCheckboxesInText(str) const checkboxes = findCheckboxesInText(str)
return checkboxes[n] return checkboxes[n]
}, }
renderPreview() {
setupMarkdownRenderer(this.checkboxId)
this.preview = DOMPurify.sanitize(marked(this.text), {ADD_ATTR: ['target']}) function renderPreview() {
setupMarkdownRenderer(checkboxId.value)
preview.value = DOMPurify.sanitize(marked(text.value), {ADD_ATTR: ['target']})
// Since the render function is synchronous, we can't do async http requests in it. // Since the render function is synchronous, we can't do async http requests in it.
// Therefore, we can't resolve the blob url at (markdown) compile time. // Therefore, we can't resolve the blob url at (markdown) compile time.
@ -233,78 +241,70 @@ export default defineComponent({
// dom tree. If we're calling this right after setting this.preview it could be the images were // dom tree. If we're calling this right after setting this.preview it could be the images were
// not already made available. // not already made available.
// Some docs at https://stackoverflow.com/q/62865160/10924593 // Some docs at https://stackoverflow.com/q/62865160/10924593
this.$nextTick(async () => { nextTick().then(async () => {
const attachmentImage = document.getElementsByClassName('attachment-image') const attachmentImage = document.querySelectorAll<HTMLImageElement>('.attachment-image')
if (attachmentImage) { if (attachmentImage) {
for (const img of attachmentImage) { Array.from(attachmentImage).forEach(async (img) => {
// The url is something like /tasks/<id>/attachments/<id> // The url is something like /tasks/<id>/attachments/<id>
const parts = img.dataset.src.substr(window.API_URL.length + 1).split('/') const parts = img.dataset.src?.slice(window.API_URL.length + 1).split('/')
const taskId = parseInt(parts[1]) const taskId = Number(parts[1])
const attachmentId = parseInt(parts[3]) const attachmentId = Number(parts[3])
const cacheKey = `${taskId}-${attachmentId}` const cacheKey: CacheKey = `${taskId}-${attachmentId}`
if (typeof this.loadedAttachments[cacheKey] !== 'undefined') { if (typeof loadedAttachments.value[cacheKey] !== 'undefined') {
img.src = this.loadedAttachments[cacheKey] img.src = loadedAttachments.value[cacheKey]
continue return
} }
const attachment = new AttachmentModel({taskId: taskId, id: attachmentId}) const attachment = new AttachmentModel({taskId: taskId, id: attachmentId})
if (this.attachmentService === null) { const url = await attachmentService.getBlobUrl(attachment)
this.attachmentService = new AttachmentService()
}
const url = await this.attachmentService.getBlobUrl(attachment)
img.src = url img.src = url
this.loadedAttachments[cacheKey] = url loadedAttachments.value[cacheKey] = url
} })
} }
const textCheckbox = document.getElementsByClassName(`text-checkbox-${this.checkboxId}`) const textCheckbox = document.querySelectorAll<HTMLInputElement>(`.text-checkbox-${checkboxId.value}`)
if (textCheckbox) { if (textCheckbox) {
for (const check of textCheckbox) { Array.from(textCheckbox).forEach(check => {
check.removeEventListener('change', this.handleCheckboxClick) check.removeEventListener('change', handleCheckboxClick)
check.addEventListener('change', this.handleCheckboxClick) check.addEventListener('change', handleCheckboxClick)
check.parentElement.classList.add('has-checkbox') check.parentElement?.classList.add('has-checkbox')
} })
} }
}) })
}, }
handleCheckboxClick(e) {
// Find the original markdown checkbox this is targeting
const checked = e.target.checked
const numMarkdownCheck = parseInt(e.target.dataset.checkboxNum)
const index = this.findNthIndex(this.text, numMarkdownCheck) function handleCheckboxClick(e: Event) {
// Find the original markdown checkbox this is targeting
const checked = (e.target as HTMLInputElement).checked
const numMarkdownCheck = Number((e.target as HTMLInputElement).dataset.checkboxNum)
const index = findNthIndex(text.value, numMarkdownCheck)
if (index < 0 || typeof index === 'undefined') { if (index < 0 || typeof index === 'undefined') {
console.debug('no index found') console.debug('no index found')
return return
} }
console.debug(index, this.text.substr(index, 9)) console.debug(index, text.value.slice(index, 9))
const listPrefix = this.text.substr(index, 1) const listPrefix = text.value.slice(index, 1)
if (checked) { text.value = replaceAt(text.value, index, `${listPrefix} ${checked ? '[x]' : '[ ]'} `)
this.text = this.replaceAt(this.text, index, `${listPrefix} [x] `) bubble()
} else { renderPreview()
this.text = this.replaceAt(this.text, index, `${listPrefix} [ ] `)
} }
this.bubble()
this.renderPreview() function toggleEdit() {
}, if (isEditActive.value) {
toggleEdit() { isPreviewActive.value = true
if (this.isEditActive) { isEditActive.value = false
this.isPreviewActive = true renderPreview()
this.isEditActive = false bubble(0) // save instantly
this.renderPreview()
this.bubble(0) // save instantly
} else { } else {
this.isPreviewActive = false isPreviewActive.value = false
this.isEditActive = true isEditActive.value = true
}
} }
},
},
})
</script> </script>
<style lang="scss"> <style lang="scss">

58
src/components/input/fancycheckbox.vue
View File

@ -4,8 +4,9 @@
:checked="checked" :checked="checked"
:disabled="disabled || undefined" :disabled="disabled || undefined"
:id="checkBoxId" :id="checkBoxId"
@change="(event) => updateData(event.target.checked)" @change="(event: Event) => updateData((event.target as HTMLInputElement).checked)"
type="checkbox"/> type="checkbox"
/>
<label :for="checkBoxId" class="check"> <label :for="checkBoxId" class="check">
<svg height="18px" viewBox="0 0 18 18" width="18px"> <svg height="18px" viewBox="0 0 18 18" width="18px">
<path <path
@ -19,21 +20,17 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {defineComponent} from 'vue' import {ref, toRef, watch} from 'vue'
import {createRandomID} from '@/helpers/randomId' import {createRandomID} from '@/helpers/randomId'
export default defineComponent({ const checked = ref(false)
name: 'fancycheckbox', const checkBoxId = `fancycheckbox_${createRandomID()}`
data() {
return { const props = defineProps({
checked: false,
checkBoxId: `fancycheckbox_${createRandomID()}`,
}
},
props: {
modelValue: { modelValue: {
type: Boolean,
required: false, required: false,
}, },
disabled: { disabled: {
@ -41,25 +38,24 @@ export default defineComponent({
required: false, required: false,
default: false, default: false,
}, },
},
emits: ['update:modelValue', 'change'],
watch: {
modelValue: {
handler(modelValue) {
this.checked = modelValue
},
immediate: true,
},
},
methods: {
updateData(checked: boolean) {
this.checked = checked
this.$emit('update:modelValue', checked)
this.$emit('change', checked)
},
},
}) })
const emit = defineEmits(['update:modelValue', 'change'])
const modelValue = toRef(props, 'modelValue')
watch(
modelValue,
newValue => {
checked.value = newValue
},
{immediate: true},
)
function updateData(newChecked: boolean) {
checked.value = newChecked
emit('update:modelValue', newChecked)
emit('change', newChecked)
}
</script> </script>

4
src/components/list/partials/filters.vue
View File

@ -578,7 +578,7 @@ export default defineComponent({
return return
} }
let ids = [] const ids = []
this[kind].forEach(u => { this[kind].forEach(u => {
ids.push(kind === 'users' ? u.username : u.id) ids.push(kind === 'users' ? u.username : u.id)
}) })
@ -613,7 +613,7 @@ export default defineComponent({
return return
} }
let labelIDs = [] const labelIDs = []
this.labels.forEach(u => { this.labels.forEach(u => {
labelIDs.push(u.id) labelIDs.push(u.id)
}) })

14
src/components/misc/modal.vue
View File

@ -71,10 +71,9 @@ export default {
<script lang="ts" setup> <script lang="ts" setup>
import BaseButton from '@/components/base/BaseButton.vue' import BaseButton from '@/components/base/BaseButton.vue'
import {onUnmounted, ref, useAttrs, watch} from 'vue' import {ref, useAttrs, watchEffect} from 'vue'
import {useScrollLock} from '@vueuse/core' import {useScrollLock} from '@vueuse/core'
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
enabled?: boolean, enabled?: boolean,
overflow?: boolean, overflow?: boolean,
@ -94,14 +93,9 @@ const attrs = useAttrs()
const modal = ref<HTMLElement | null>(null) const modal = ref<HTMLElement | null>(null)
const scrollLock = useScrollLock(modal) const scrollLock = useScrollLock(modal)
watch( watchEffect(() => {
() => props.enabled, scrollLock.value = props.enabled
enabled => { })
scrollLock.value = enabled
},
)
onUnmounted(() => scrollLock.value = false)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

4
src/components/misc/ready.vue
View File

@ -75,8 +75,8 @@ async function load() {
await router.push(redirectTo) await router.push(redirectTo)
} }
ready.value = true ready.value = true
} catch (e: any) { } catch (e: unknown) {
error.value = e error.value = String(e)
} }
} }

2
src/components/tasks/add-task.vue
View File

@ -214,7 +214,7 @@ async function addTask() {
return rel return rel
}) })
await Promise.all(relations) await Promise.all(relations)
} catch (e: any) { } catch (e: { message?: string }) {
newTaskTitle.value = taskTitleBackup newTaskTitle.value = taskTitleBackup
if (e?.message === 'NO_LIST') { if (e?.message === 'NO_LIST') {
errorMessage.value = t('list.create.addListRequired') errorMessage.value = t('list.create.addListRequired')

2
src/components/tasks/partials/attachments.vue
View File

@ -214,7 +214,7 @@ async function deleteAttachment() {
try { try {
const r = await attachmentService.delete(attachmentToDelete.value) const r = await attachmentService.delete(attachmentToDelete.value)
attachmentStore.removeById(this.attachmentToDelete.id) attachmentStore.removeById(attachmentToDelete.value.id)
success(r) success(r)
setAttachmentToDelete(null) setAttachmentToDelete(null)
} catch(e) { } catch(e) {

93
src/components/tasks/partials/kanban-card.vue
View File

@ -6,7 +6,7 @@
'draggable': !(loadingInternal || loading), 'draggable': !(loadingInternal || loading),
'has-light-text': color !== TASK_DEFAULT_COLOR && !colorIsDark(color), 'has-light-text': color !== TASK_DEFAULT_COLOR && !colorIsDark(color),
}" }"
:style="{'background-color': color !== TASK_DEFAULT_COLOR ? color : false}" :style="{'background-color': color !== TASK_DEFAULT_COLOR ? color : undefined}"
@click.exact="openTaskDetail()" @click.exact="openTaskDetail()"
@click.ctrl="() => toggleTaskDone(task)" @click.ctrl="() => toggleTaskDone(task)"
@click.meta="() => toggleTaskDone(task)" @click.meta="() => toggleTaskDone(task)"
@ -44,11 +44,11 @@
<priority-label :priority="task.priority" :done="task.done"/> <priority-label :priority="task.priority" :done="task.done"/>
<div class="assignees" v-if="task.assignees.length > 0"> <div class="assignees" v-if="task.assignees.length > 0">
<user <user
v-for="u in task.assignees"
:avatar-size="24" :avatar-size="24"
:key="task.id + 'assignee' + u.id" :key="task.id + 'assignee' + u.id"
:show-username="false" :show-username="false"
:user="u" :user="u"
v-for="u in task.assignees"
/> />
</div> </div>
<checklist-summary :task="task"/> <checklist-summary :task="task"/>
@ -65,80 +65,55 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import {defineComponent, type PropType} from 'vue' import {ref, computed} from 'vue'
import {useRouter} from 'vue-router'
import PriorityLabel from '../../../components/tasks/partials/priorityLabel.vue' import PriorityLabel from '@/components/tasks/partials/priorityLabel.vue'
import User from '../../../components/misc/user.vue' import User from '@/components/misc/user.vue'
import Done from '@/components/misc/Done.vue' import Done from '@/components/misc/Done.vue'
import Labels from '../../../components/tasks/partials/labels.vue' import Labels from '@/components/tasks/partials/labels.vue'
import ChecklistSummary from './checklist-summary.vue' import ChecklistSummary from './checklist-summary.vue'
import {TASK_DEFAULT_COLOR} from '@/models/task'
import {TASK_DEFAULT_COLOR, getHexColor} from '@/models/task'
import type {ITask} from '@/modelTypes/ITask' import type {ITask} from '@/modelTypes/ITask'
import {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatDate' import {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatDate'
import {colorIsDark} from '@/helpers/color/colorIsDark' import {colorIsDark} from '@/helpers/color/colorIsDark'
import {useTaskStore} from '@/stores/tasks' import {useTaskStore} from '@/stores/tasks'
export default defineComponent({ const router = useRouter()
name: 'kanban-card',
components: { const loadingInternal = ref(false)
ChecklistSummary,
Done, const props = withDefaults(defineProps<{
PriorityLabel, task: ITask,
User, loading: boolean,
Labels, }>(), {
}, loading: false,
data() { })
return {
loadingInternal: false, const color = computed(() => getHexColor(props.task.hexColor))
TASK_DEFAULT_COLOR,
} async function toggleTaskDone(task: ITask) {
}, loadingInternal.value = true
props: {
task: {
type: Object as PropType<ITask>,
required: true,
},
loading: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
color() {
return this.task.getHexColor
? this.task.getHexColor()
: TASK_DEFAULT_COLOR
},
},
methods: {
formatDateLong,
formatISO,
formatDateSince,
colorIsDark,
async toggleTaskDone(task: ITask) {
this.loadingInternal = true
try { try {
const done = !task.done
await useTaskStore().update({ await useTaskStore().update({
...task, ...task,
done, done: !task.done,
}) })
} finally { } finally {
this.loadingInternal = false loadingInternal.value = false
} }
}, }
openTaskDetail() {
this.$router.push({ function openTaskDetail() {
router.push({
name: 'task.detail', name: 'task.detail',
params: { id: this.task.id }, params: {id: props.task.id},
state: { backdropView: this.$router.currentRoute.value.fullPath }, state: {backdropView: router.currentRoute.value.fullPath},
})
},
},
}) })
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

2
src/components/tasks/partials/relatedTasks.vue
View File

@ -348,7 +348,7 @@ async function toggleTaskDone(task: ITask) {
// Find the task in the list and update it so that it is correctly strike through // Find the task in the list and update it so that it is correctly strike through
Object.entries(relatedTasks.value).some(([kind, tasks]) => { Object.entries(relatedTasks.value).some(([kind, tasks]) => {
return tasks.some((t, key) => { return (tasks as ITask[]).some((t, key) => {
const found = t.id === task.id const found = t.id === task.id
if (found) { if (found) {
relatedTasks.value[kind as IRelationKind]![key] = task relatedTasks.value[kind as IRelationKind]![key] = task

40
src/composables/useRenewTokenOnFocus.ts Normal file
View File

@ -0,0 +1,40 @@
import {computed} from 'vue'
import {useRouter} from 'vue-router'
import {useEventListener} from '@vueuse/core'
import {useAuthStore} from '@/stores/auth'
export function useRenewTokenOnFocus() {
const router = useRouter()
const authStore = useAuthStore()
const userInfo = computed(() => authStore.info)
const authenticated = computed(() => authStore.authenticated)
// Try renewing the token every time vikunja is loaded initially
// (When opening the browser the focus event is not fired)
authStore.renewToken()
// Check if the token is still valid if the window gets focus again to maybe renew it
useEventListener('focus', () => {
if (!authenticated.value) {
return
}
const expiresIn = (userInfo.value !== null ? userInfo.value.exp : 0) - +new Date() / 1000
// If the token expiry is negative, it is already expired and we have no choice but to redirect
// the user to the login page
if (expiresIn < 0) {
authStore.checkAuth()
router.push({name: 'user.login'})
return
}
// Check if the token is valid for less than 60 hours and renew if thats the case
if (expiresIn < 60 * 3600) {
authStore.renewToken()
console.debug('renewed token')
}
})
}

54
src/composables/useRouteWithModal.ts Normal file
View File

@ -0,0 +1,54 @@
import { computed, shallowRef, watchEffect, h, type VNode } from 'vue'
import { useRoute, useRouter } from 'vue-router'
export function useRouteWithModal() {
const router = useRouter()
const route = useRoute()
const backdropView = computed(() => route.fullPath && window.history.state.backdropView)
const routeWithModal = computed(() => {
return backdropView.value
? router.resolve(backdropView.value)
: route
})
const currentModal = shallowRef<VNode>()
watchEffect(() => {
if (!backdropView.value) {
currentModal.value = undefined
return
}
// logic from vue-router
// https://github.com/vuejs/vue-router-next/blob/798cab0d1e21f9b4d45a2bd12b840d2c7415f38a/src/RouterView.ts#L125
const routePropsOption = route.matched[0]?.props.default
const routeProps = routePropsOption
? routePropsOption === true
? route.params
: typeof routePropsOption === 'function'
? routePropsOption(route)
: routePropsOption
: null
const component = route.matched[0]?.components?.default
if (!component) {
currentModal.value = undefined
return
}
currentModal.value = h(component, routeProps)
})
function closeModal() {
const historyState = computed(() => route.fullPath && window.history.state)
if (historyState.value) {
router.back()
} else {
const backdropRoute = historyState.value?.backdropView && router.resolve(historyState.value.backdropView)
router.push(backdropRoute)
}
}
return {routeWithModal, currentModal, closeModal}
}

8
src/directives/focus.ts
View File

@ -1,6 +1,8 @@
export default { import type {Directive} from 'vue'
const focus = <Directive<HTMLElement,string>>{
// When the bound element is inserted into the DOM... // When the bound element is inserted into the DOM...
mounted: (el, {modifiers}) => { mounted(el, {modifiers}) {
// Focus the element only if the viewport is big enough // Focus the element only if the viewport is big enough
// auto focusing elements on mobile can be annoying since in these cases the // auto focusing elements on mobile can be annoying since in these cases the
// keyboard always pops up and takes half of the available space on the screen. // keyboard always pops up and takes half of the available space on the screen.
@ -10,3 +12,5 @@ export default {
} }
}, },
} }
export default focus

6
src/helpers/attachments.ts
View File

@ -4,7 +4,7 @@ import type {IAttachment} from '@/modelTypes/IAttachment'
import AttachmentService from '@/services/attachment' import AttachmentService from '@/services/attachment'
import {useTaskStore} from '@/stores/tasks' import {useTaskStore} from '@/stores/tasks'
export function uploadFile(taskId: number, file: File, onSuccess: (url: string) => void) { export function uploadFile(taskId: number, file: File, onSuccess?: (url: string) => void) {
const attachmentService = new AttachmentService() const attachmentService = new AttachmentService()
const files = [file] const files = [file]
@ -15,7 +15,7 @@ export async function uploadFiles(
attachmentService: AttachmentService, attachmentService: AttachmentService,
taskId: number, taskId: number,
files: File[] | FileList, files: File[] | FileList,
onSuccess: Function = () => {}, onSuccess?: (attachmentUrl: string) => void,
) { ) {
const attachmentModel = new AttachmentModel({taskId}) const attachmentModel = new AttachmentModel({taskId})
const response = await attachmentService.create(attachmentModel, files) const response = await attachmentService.create(attachmentModel, files)
@ -26,7 +26,7 @@ export async function uploadFiles(
taskId, taskId,
attachment, attachment,
}) })
onSuccess(generateAttachmentUrl(taskId, attachment.id)) onSuccess?.(generateAttachmentUrl(taskId, attachment.id))
}) })
if (response.errors !== null) { if (response.errors !== null) {

1
src/helpers/auth.ts
View File

@ -45,7 +45,6 @@ export async function refreshToken(persist: boolean): Promise<AxiosResponse> {
return response return response
} catch(e) { } catch(e) {
// @ts-ignore
throw new Error('Error renewing token: ', { cause: e }) throw new Error('Error renewing token: ', { cause: e })
} }
} }

9
src/helpers/calculateItemPosition.ts
View File

@ -1,19 +1,18 @@
export const calculateItemPosition = (positionBefore: number | null, positionAfter: number | null): number => { export const calculateItemPosition = (positionBefore: number | null, positionAfter: number | null): number => {
if (positionBefore === null && positionAfter === null) { if (positionBefore === null) {
if (positionAfter === null) {
return 0 return 0
} }
// If there is no task before, our task is the first task in which case we let it have half of the position of the task after it // If there is no task after it, we just add 2^16 to the last position to have enough room in the future
if (positionBefore === null && positionAfter !== null) {
return positionAfter / 2 return positionAfter / 2
} }
// If there is no task after it, we just add 2^16 to the last position to have enough room in the future // If there is no task after it, we just add 2^16 to the last position to have enough room in the future
if (positionBefore !== null && positionAfter === null) { if (positionAfter === null) {
return positionBefore + Math.pow(2, 16) return positionBefore + Math.pow(2, 16)
} }
// If we have both a task before and after it, we acually calculate the position // If we have both a task before and after it, we acually calculate the position
// @ts-ignore - can never be null but TS does not seem to understand that
return positionBefore + (positionAfter - positionBefore) / 2 return positionBefore + (positionAfter - positionBefore) / 2
} }

15
src/helpers/markdownRenderer.ts
View File

@ -8,33 +8,34 @@ export function setupMarkdownRenderer(checkboxId: string) {
let checkboxNum = -1 let checkboxNum = -1
marked.use({ marked.use({
renderer: { renderer: {
image: (src, title, text) => { image(src: string, title: string, text: string) {
title = title ? ` title="${title}` : '' title = title ? ` title="${title}` : ''
// If the url starts with the api url, the image is likely an attachment and // If the url starts with the api url, the image is likely an attachment and
// we'll need to download and parse it properly. // we'll need to download and parse it properly.
if (src.substr(0, window.API_URL.length + 7) === `${window.API_URL}/tasks/`) { if (src.slice(0, window.API_URL.length + 7) === `${window.API_URL}/tasks/`) {
return `<img data-src="${src}" alt="${text}" ${title} class="attachment-image"/>` return `<img data-src="${src}" alt="${text}" ${title} class="attachment-image"/>`
} }
return `<img src="${src}" alt="${text}" ${title}/>` return `<img src="${src}" alt="${text}" ${title}/>`
}, },
checkbox: (checked) => { checkbox(checked: boolean) {
let checkedString = ''
if (checked) { if (checked) {
checked = ' checked="checked"' checkedString = 'checked'
} }
checkboxNum++ checkboxNum++
return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checked} class="text-checkbox-${checkboxId}"/>` return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checkedString} class="text-checkbox-${checkboxId}"/>`
}, },
link: (href, title, text) => { link(href: string, title: string, text: string) {
const isLocal = href.startsWith(`${location.protocol}//${location.hostname}`) const isLocal = href.startsWith(`${location.protocol}//${location.hostname}`)
const html = linkRenderer.call(renderer, href, title, text) const html = linkRenderer.call(renderer, href, title, text)
return isLocal ? html : html.replace(/^<a /, '<a target="_blank" rel="noreferrer noopener nofollow" ') return isLocal ? html : html.replace(/^<a /, '<a target="_blank" rel="noreferrer noopener nofollow" ')
}, },
}, },
highlight: function (code, language) { highlight(code, language) {
const validLanguage = hljs.getLanguage(language) ? language : 'plaintext' const validLanguage = hljs.getLanguage(language) ? language : 'plaintext'
return hljs.highlight(code, {language: validLanguage}).value return hljs.highlight(code, {language: validLanguage}).value
}, },

2
src/helpers/objectIsEmpty.ts
View File

@ -1,5 +1,5 @@
// https://stackoverflow.com/a/32108184/10924593 // https://stackoverflow.com/a/32108184/10924593
export function objectIsEmpty(obj: any): boolean { export function objectIsEmpty(obj: Record<string, unknown>): boolean {
return obj return obj
&& Object.keys(obj).length === 0 && Object.keys(obj).length === 0
&& Object.getPrototypeOf(obj) === Object.prototype && Object.getPrototypeOf(obj) === Object.prototype

2
src/helpers/randomId.ts
View File

@ -1,5 +1,5 @@
const DEFAULT_ID_LENGTH = 9 const DEFAULT_ID_LENGTH = 9
export function createRandomID(idLength = DEFAULT_ID_LENGTH) { export function createRandomID(idLength = DEFAULT_ID_LENGTH) {
return Math.random().toString(36).substr(2, idLength) return Math.random().toString(36).slice(2, idLength)
} }

2
src/helpers/redirectToProvider.ts
View File

@ -3,7 +3,7 @@ import {parseURL} from 'ufo'
import {createRandomID} from '@/helpers/randomId' import {createRandomID} from '@/helpers/randomId'
import type {IProvider} from '@/types/IProvider' import type {IProvider} from '@/types/IProvider'
export const redirectToProvider = (provider: IProvider, redirectUrl: string = '') => { export const redirectToProvider = (provider: IProvider, redirectUrl = '') => {
// We're not using the redirect url provided by the server to allow redirects when using the electron app. // We're not using the redirect url provided by the server to allow redirects when using the electron app.
// The implications are not quite clear yet hence the logic to pass in another redirect url still exists. // The implications are not quite clear yet hence the logic to pass in another redirect url still exists.

14
src/helpers/time/parseDate.ts
View File

@ -125,16 +125,16 @@ const addTimeToDate = (text: string, date: Date, previousMatch: string | null):
} }
export const getDateFromText = (text: string, now: Date = new Date()) => { export const getDateFromText = (text: string, now: Date = new Date()) => {
const fullDateRegex: RegExp = / ([0-9][0-9]?\/[0-9][0-9]?\/[0-9][0-9]([0-9][0-9])?|[0-9][0-9][0-9][0-9]\/[0-9][0-9]?\/[0-9][0-9]?|[0-9][0-9][0-9][0-9]-[0-9][0-9]?-[0-9][0-9]?)/ig const fullDateRegex = / ([0-9][0-9]?\/[0-9][0-9]?\/[0-9][0-9]([0-9][0-9])?|[0-9][0-9][0-9][0-9]\/[0-9][0-9]?\/[0-9][0-9]?|[0-9][0-9][0-9][0-9]-[0-9][0-9]?-[0-9][0-9]?)/ig
// 1. Try parsing the text as a "usual" date, like 2021-06-24 or 06/24/2021 // 1. Try parsing the text as a "usual" date, like 2021-06-24 or 06/24/2021
let results: string[] | null = fullDateRegex.exec(text) let results: string[] | null = fullDateRegex.exec(text)
let result: string | null = results === null ? null : results[0] let result: string | null = results === null ? null : results[0]
let foundText: string | null = result let foundText: string | null = result
let containsYear: boolean = true let containsYear = true
if (result === null) { if (result === null) {
// 2. Try parsing the date as something like "jan 21" or "21 jan" // 2. Try parsing the date as something like "jan 21" or "21 jan"
const monthRegex: RegExp = new RegExp(` (${monthsRegexGroup} [0-9][0-9]?|[0-9][0-9]? ${monthsRegexGroup})`, 'ig') const monthRegex = new RegExp(` (${monthsRegexGroup} [0-9][0-9]?|[0-9][0-9]? ${monthsRegexGroup})`, 'ig')
results = monthRegex.exec(text) results = monthRegex.exec(text)
result = results === null ? null : `${results[0]} ${now.getFullYear()}`.trim() result = results === null ? null : `${results[0]} ${now.getFullYear()}`.trim()
foundText = results === null ? '' : results[0].trim() foundText = results === null ? '' : results[0].trim()
@ -142,7 +142,7 @@ export const getDateFromText = (text: string, now: Date = new Date()) => {
if (result === null) { if (result === null) {
// 3. Try parsing the date as "27/01" or "01/27" // 3. Try parsing the date as "27/01" or "01/27"
const monthNumericRegex: RegExp = / ([0-9][0-9]?\/[0-9][0-9]?)/ig const monthNumericRegex = / ([0-9][0-9]?\/[0-9][0-9]?)/ig
results = monthNumericRegex.exec(text) results = monthNumericRegex.exec(text)
// Put the year before or after the date, depending on what works // Put the year before or after the date, depending on what works
@ -229,7 +229,7 @@ export const getDateFromTextIn = (text: string, now: Date = new Date()) => {
} }
const getDateFromWeekday = (text: string): dateFoundResult => { const getDateFromWeekday = (text: string): dateFoundResult => {
const matcher: RegExp = / (next )?(monday|mon|tuesday|tue|wednesday|wed|thursday|thu|friday|fri|saturday|sat|sunday|sun)($| )/g const matcher = / (next )?(monday|mon|tuesday|tue|wednesday|wed|thursday|thu|friday|fri|saturday|sat|sunday|sun)($| )/g
const results: string[] | null = matcher.exec(text.toLowerCase()) // The i modifier does not seem to work. const results: string[] | null = matcher.exec(text.toLowerCase()) // The i modifier does not seem to work.
if (results === null) { if (results === null) {
return { return {
@ -240,7 +240,7 @@ const getDateFromWeekday = (text: string): dateFoundResult => {
const date: Date = new Date() const date: Date = new Date()
const currentDay: number = date.getDay() const currentDay: number = date.getDay()
let day: number = 0 let day = 0
switch (results[2]) { switch (results[2]) {
case 'mon': case 'mon':
@ -285,7 +285,7 @@ const getDateFromWeekday = (text: string): dateFoundResult => {
// matched string comes with a space at the end (last part of the regex). // matched string comes with a space at the end (last part of the regex).
let foundText = results[0] let foundText = results[0]
if (foundText.endsWith(' ')) { if (foundText.endsWith(' ')) {
foundText = foundText.substr(0, foundText.length - 1) foundText = foundText.slice(0, foundText.length - 1)
} }
return { return {

5
src/helpers/time/parseDateOrString.ts
View File

@ -1,12 +1,11 @@
export function parseDateOrString(rawValue: string | undefined, fallback: any): string | Date { export function parseDateOrString(rawValue: string | undefined, fallback: unknown) {
if (typeof rawValue === 'undefined') { if (typeof rawValue === 'undefined') {
return fallback return fallback
} }
const d = new Date(rawValue) const d = new Date(rawValue)
// @ts-ignore if rawValue is an invalid date, isNan will return false. return !isNaN(+d)
return !isNaN(d)
? d ? d
: rawValue : rawValue
} }

2
src/helpers/utils.ts
View File

@ -15,7 +15,7 @@ export function isNil(value: unknown) {
return value == null return value == null
} }
export function omitBy(obj: {}, check: (value: unknown) => boolean) { export function omitBy(obj: Record<string, unknown>, check: (value: unknown) => boolean) {
if (isNil(obj)) { if (isNil(obj)) {
return {} return {}
} }

5
src/indexes/index.ts
View File

@ -31,15 +31,14 @@ export const createNewIndexer = (name: string, fieldsToIndex: string[]) => {
return index.update(item.id, item) return index.update(item.id, item)
} }
function search(query: string | null): number[] | null { function search(query: string | null) {
if (query === '' || query === null) { if (query === '' || query === null) {
return null return null
} }
// @ts-ignore
return index.search(query) return index.search(query)
?.flatMap(r => r.result) ?.flatMap(r => r.result)
.filter((value, index, self) => self.indexOf(value) === index) .filter((value, index, self) => self.indexOf(value) === index) as number[]
|| null || null
} }

9
src/main.ts
View File

@ -34,8 +34,8 @@ if (apiUrlFromStorage !== null) {
} }
// Make sure the api url does not contain a / at the end // Make sure the api url does not contain a / at the end
if (window.API_URL.substr(window.API_URL.length - 1, window.API_URL.length) === '/') { if (window.API_URL.slice(window.API_URL.length - 1, window.API_URL.length) === '/') {
window.API_URL = window.API_URL.substr(0, window.API_URL.length - 1) window.API_URL = window.API_URL.slice(0, window.API_URL.length - 1)
} }
const app = createApp(App) const app = createApp(App)
@ -44,9 +44,8 @@ app.use(Notifications)
// directives // directives
import focus from '@/directives/focus' import focus from '@/directives/focus'
// @ts-ignore The export does exist, ts just doesn't find it. import { VTooltip } from 'floating-vue'
import { VTooltip } from 'v-tooltip' import 'floating-vue/dist/style.css'
import 'v-tooltip/dist/v-tooltip.css'
import shortcut from '@/directives/shortcut' import shortcut from '@/directives/shortcut'
import cypress from '@/directives/cypress' import cypress from '@/directives/cypress'

2
src/modelTypes/IList.ts
View File

@ -15,7 +15,7 @@ export interface IList extends IAbstract {
isArchived: boolean isArchived: boolean
hexColor: string hexColor: string
identifier: string identifier: string
backgroundInformation: any // FIXME: improve type backgroundInformation: unknown | null // FIXME: improve type
isFavorite: boolean isFavorite: boolean
subscription: ISubscription subscription: ISubscription
position: number position: number

2
src/models/list.ts
View File

@ -19,7 +19,7 @@ export default class ListModel extends AbstractModel<IList> implements IList {
isArchived = false isArchived = false
hexColor = '' hexColor = ''
identifier = '' identifier = ''
backgroundInformation: any = null backgroundInformation: unknown | null = null
isFavorite = false isFavorite = false
subscription: ISubscription = null subscription: ISubscription = null
position = 0 position = 0

2
src/models/task.ts
View File

@ -28,7 +28,7 @@ if (!SUPPORTS_TRIGGERED_NOTIFICATION) {
console.debug('This browser does not support triggered notifications') console.debug('This browser does not support triggered notifications')
} }
export function getHexColor(hexColor: string) { export function getHexColor(hexColor: string): string {
if (hexColor === '' || hexColor === '#') { if (hexColor === '' || hexColor === '#') {
return TASK_DEFAULT_COLOR return TASK_DEFAULT_COLOR
} }

2
src/services/abstractService.ts
View File

@ -149,7 +149,7 @@ export default abstract class AbstractService<Model extends IAbstract = IAbstrac
/** /**
* Returns a fully-ready-ready-to-make-a-request-to route with replaced parameters. * Returns a fully-ready-ready-to-make-a-request-to route with replaced parameters.
*/ */
getReplacedRoute(path : string, pathparams : {}) : string { getReplacedRoute(path : string, pathparams : Record<string, unknown>) : string {
const replacements = this.getRouteReplacements(path, pathparams) const replacements = this.getRouteReplacements(path, pathparams)
return Object.entries(replacements).reduce( return Object.entries(replacements).reduce(
(result, [parameter, value]) => result.replace(parameter, value as string), (result, [parameter, value]) => result.replace(parameter, value as string),

9
src/stores/base.ts
View File

@ -12,7 +12,7 @@ import type {IList} from '@/modelTypes/IList'
export interface RootStoreState { export interface RootStoreState {
loading: boolean, loading: boolean,
currentList: IList, currentList: IList | null,
background: string, background: string,
blurHash: string, blurHash: string,
@ -47,12 +47,13 @@ export const useBaseStore = defineStore('base', {
this.loading = loading this.loading = loading
}, },
setCurrentList(currentList: IList) { setCurrentList(currentList: IList | null) {
// Server updates don't return the right. Therefore, the right is reset after updating the list which is // Server updates don't return the right. Therefore, the right is reset after updating the list which is
// confusing because all the buttons will disappear in that case. To prevent this, we're keeping the right // confusing because all the buttons will disappear in that case. To prevent this, we're keeping the right
// when updating the list in global state. // when updating the list in global state.
if ( if (
typeof this.currentList.maxRight !== 'undefined' && typeof this.currentList?.maxRight !== 'undefined' &&
currentList !== null &&
( (
typeof currentList.maxRight === 'undefined' || typeof currentList.maxRight === 'undefined' ||
currentList.maxRight === null currentList.maxRight === null
@ -95,7 +96,7 @@ export const useBaseStore = defineStore('base', {
this.logoVisible = visible this.logoVisible = visible
}, },
async handleSetCurrentList({list, forceUpdate = false} : {list: IList, forceUpdate: boolean}) { async handleSetCurrentList({list, forceUpdate = false} : {list: IList | null, forceUpdate: boolean}) {
if (list === null) { if (list === null) {
this.setCurrentList({}) this.setCurrentList({})
this.setBackground('') this.setBackground('')

4
src/views/tasks/TaskDetailView.vue
View File

@ -562,8 +562,8 @@ const hasAttachments = computed(() => attachmentStore.attachments.length > 0)
// HACK: // HACK:
const shouldShowClosePopup = computed(() => (route.name as string).includes('kanban')) const shouldShowClosePopup = computed(() => (route.name as string).includes('kanban'))
function attachmentUpload(...args: any[]) { function attachmentUpload(file: File, onSuccess?: (url: string) => void) {
return uploadFile(taskId.value, ...args) return uploadFile(taskId.value, file, onSuccess)
} }
const heading = ref<HTMLElement | null>(null) const heading = ref<HTMLElement | null>(null)

2
src/views/user/PasswordReset.vue
View File

@ -47,7 +47,7 @@
<div class="field is-grouped"> <div class="field is-grouped">
<div class="control"> <div class="control">
<x-button <x-button
:loading="this.passwordResetService.loading" :loading="passwordResetService.loading"
@click="submit" @click="submit"
> >
{{ $t('user.auth.resetPassword') }} {{ $t('user.auth.resetPassword') }}