Merge branch 'main' into feature/ganttastic
# Conflicts: # package.json # pnpm-lock.yaml # src/components/tasks/gantt-component.vue
This commit is contained in:
kolaente
commit
97a6b2f3d1
40 changed files with 736 additions and 714 deletions
1
.envrc
Normal file
1
.envrc
Normal file
|
|
@ -0,0 +1 @@
|
|||
use flake
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
/* eslint-env node */
|
||||
require("@rushstack/eslint-patch/modern-module-resolution")
|
||||
|
||||
module.exports = {
|
||||
'root': true,
|
||||
'env': {
|
||||
|
|
@ -9,7 +12,7 @@ module.exports = {
|
|||
'extends': [
|
||||
'eslint:recommended',
|
||||
'plugin:vue/vue3-essential',
|
||||
'@vue/typescript',
|
||||
'@vue/eslint-config-typescript/recommended',
|
||||
],
|
||||
'rules': {
|
||||
'vue/html-quotes': [
|
||||
|
|
@ -28,7 +31,6 @@ module.exports = {
|
|||
'error',
|
||||
'never',
|
||||
],
|
||||
'vue/script-setup-uses-vars': 'error',
|
||||
|
||||
// see https://segmentfault.com/q/1010000040813116/a-1020000041134455 (original in chinese)
|
||||
'no-unused-vars': 'off',
|
||||
|
|
@ -40,6 +42,7 @@ module.exports = {
|
|||
'parserOptions': {
|
||||
'parser': '@typescript-eslint/parser',
|
||||
'ecmaVersion': 2022,
|
||||
'sourceType': 'module',
|
||||
},
|
||||
'ignorePatterns': [
|
||||
'*.test.*',
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -2,6 +2,7 @@
|
|||
node_modules
|
||||
/dist*
|
||||
*.zip
|
||||
.direnv/
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
|
|
|
|||
25
flake.lock
Normal file
25
flake.lock
Normal 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
10
flake.nix
Normal 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 ]; };
|
||||
};
|
||||
}
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>Vikunja</title>
|
||||
<meta name="description" content="Vikunja (/vɪˈkuːnjə/) - The to-do app to organize your life.">
|
||||
|
|
|
|||
30
package.json
30
package.json
|
|
@ -25,15 +25,15 @@
|
|||
"@github/hotkey": "2.0.1",
|
||||
"@infectoone/vue-ganttastic": "^2.0.4",
|
||||
"@kyvg/vue3-notification": "2.4.1",
|
||||
"@sentry/tracing": "7.14.0",
|
||||
"@sentry/vue": "7.14.0",
|
||||
"@sentry/tracing": "7.14.1",
|
||||
"@sentry/vue": "7.14.1",
|
||||
"@types/is-touch-device": "1.0.0",
|
||||
"@types/lodash.clonedeep": "4.5.7",
|
||||
"@types/sortablejs": "1.15.0",
|
||||
"@vueuse/core": "9.3.0",
|
||||
"@vueuse/router": "9.3.0",
|
||||
"axios": "0.27.2",
|
||||
"blurhash": "2.0.2",
|
||||
"blurhash": "2.0.3",
|
||||
"bulma-css-variables": "0.9.33",
|
||||
"camel-case": "4.1.2",
|
||||
"codemirror": "5.65.9",
|
||||
|
|
@ -42,6 +42,7 @@
|
|||
"easymde": "2.18.0",
|
||||
"flatpickr": "4.6.13",
|
||||
"flexsearch": "0.7.21",
|
||||
"floating-vue": "2.0.0-beta.20",
|
||||
"highlight.js": "11.6.0",
|
||||
"is-touch-device": "1.0.1",
|
||||
"lodash.clonedeep": "4.5.0",
|
||||
|
|
@ -53,9 +54,9 @@
|
|||
"snake-case": "3.0.4",
|
||||
"sortablejs": "1.15.0",
|
||||
"ufo": "0.8.5",
|
||||
"v-tooltip": "4.0.0-beta.17",
|
||||
"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-i18n": "9.2.2",
|
||||
"vue-router": "4.1.5",
|
||||
|
|
@ -67,26 +68,29 @@
|
|||
"@cypress/vite-dev-server": "3.2.0",
|
||||
"@cypress/vue": "4.2.0",
|
||||
"@faker-js/faker": "7.5.0",
|
||||
"@rushstack/eslint-patch": "1.2.0",
|
||||
"@types/dompurify": "2.3.4",
|
||||
"@types/flexsearch": "0.7.3",
|
||||
"@types/node": "16.11.62",
|
||||
"@typescript-eslint/eslint-plugin": "5.38.1",
|
||||
"@typescript-eslint/parser": "5.38.1",
|
||||
"@types/lodash.debounce": "4.0.7",
|
||||
"@types/marked": "4.0.7",
|
||||
"@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-vue": "3.1.0",
|
||||
"@vitejs/plugin-vue": "3.1.2",
|
||||
"@vue/eslint-config-typescript": "11.0.2",
|
||||
"@vue/test-utils": "2.1.0",
|
||||
"@vue/tsconfig": "0.1.3",
|
||||
"autoprefixer": "10.4.12",
|
||||
"browserslist": "4.21.4",
|
||||
"caniuse-lite": "1.0.30001412",
|
||||
"caniuse-lite": "1.0.30001414",
|
||||
"cypress": "10.9.0",
|
||||
"esbuild": "0.15.10",
|
||||
"eslint": "8.24.0",
|
||||
"eslint-plugin-vue": "9.5.1",
|
||||
"eslint-plugin-vue": "9.6.0",
|
||||
"express": "4.18.1",
|
||||
"happy-dom": "6.0.4",
|
||||
"netlify-cli": "11.8.3",
|
||||
"netlify-cli": "12.0.2",
|
||||
"postcss": "8.4.17",
|
||||
"postcss-preset-env": "7.8.2",
|
||||
"rollup": "2.79.1",
|
||||
|
|
@ -107,5 +111,5 @@
|
|||
}
|
||||
},
|
||||
"license": "AGPL-3.0-or-later",
|
||||
"packageManager": "pnpm@7.12.2"
|
||||
"packageManager": "pnpm@7.13.1"
|
||||
}
|
||||
|
|
|
|||
431
pnpm-lock.yaml
431
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
|
@ -60,65 +60,18 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {watch, computed, shallowRef, watchEffect, type VNode, h} from 'vue'
|
||||
import {useBaseStore} from '@/stores/base'
|
||||
import {useRoute, useRouter} from 'vue-router'
|
||||
import {useEventListener} from '@vueuse/core'
|
||||
import {watch, computed} from 'vue'
|
||||
import {useRoute} from 'vue-router'
|
||||
|
||||
import {useLabelStore} from '@/stores/labels'
|
||||
import Navigation from '@/components/home/navigation.vue'
|
||||
import QuickActions from '@/components/quick-actions/quick-actions.vue'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import {useAuthStore} from '@/stores/auth'
|
||||
|
||||
function useRouteWithModal() {
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const backdropView = computed(() => route.fullPath && window.history.state.backdropView)
|
||||
import {useBaseStore} from '@/stores/base'
|
||||
import {useLabelStore} from '@/stores/labels'
|
||||
|
||||
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
|
||||
|
||||
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}
|
||||
}
|
||||
import {useRouteWithModal} from '@/composables/useRouteWithModal'
|
||||
import {useRenewTokenOnFocus} from '@/composables/useRenewTokenOnFocus'
|
||||
|
||||
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
|
||||
|
||||
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()
|
||||
|
||||
const labelStore = useLabelStore()
|
||||
labelStore.loadAllLabels()
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<vue-easymde
|
||||
:configs="config"
|
||||
@change="bubble"
|
||||
@change="() => bubble()"
|
||||
@update:modelValue="handleInput"
|
||||
class="content"
|
||||
v-if="isEditActive"
|
||||
|
|
@ -66,245 +66,245 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from 'vue'
|
||||
<script setup lang="ts">
|
||||
import {computed, nextTick, onMounted, ref, toRefs, watch} from 'vue'
|
||||
|
||||
import VueEasymde from './vue-easymde.vue'
|
||||
import {marked} from 'marked'
|
||||
import DOMPurify from 'dompurify'
|
||||
import {setupMarkdownRenderer} from '@/helpers/markdownRenderer'
|
||||
|
||||
import {createEasyMDEConfig} from './editorConfig'
|
||||
|
||||
import AttachmentModel from '../../models/attachment'
|
||||
import AttachmentService from '../../services/attachment'
|
||||
import {findCheckboxesInText} from '../../helpers/checklistFromText'
|
||||
import AttachmentModel from '@/models/attachment'
|
||||
import AttachmentService from '@/services/attachment'
|
||||
|
||||
import {setupMarkdownRenderer} from '@/helpers/markdownRenderer'
|
||||
import {findCheckboxesInText} from '@/helpers/checklistFromText'
|
||||
import {createRandomID} from '@/helpers/randomId'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import ButtonLink from '@/components/misc/ButtonLink.vue'
|
||||
import type { IAttachment } from '@/modelTypes/IAttachment'
|
||||
import type { ITask } from '@/modelTypes/ITask'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'editor',
|
||||
components: {
|
||||
VueEasymde,
|
||||
BaseButton,
|
||||
ButtonLink,
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
uploadEnabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
uploadCallback: {
|
||||
type: Function,
|
||||
},
|
||||
hasPreview: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
previewIsDefault: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
isEditEnabled: {
|
||||
default: true,
|
||||
},
|
||||
bottomActions: {
|
||||
default: () => [],
|
||||
},
|
||||
emptyText: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
showSave: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// If a key is passed the editor will go in "edit" mode when the key is pressed.
|
||||
// Disabled if an empty string is passed.
|
||||
editShortcut: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
computed: {
|
||||
showPreviewText() {
|
||||
return this.isPreviewActive && this.text === '' && this.emptyText !== ''
|
||||
},
|
||||
showEditButton() {
|
||||
return !this.isEditActive && this.text !== ''
|
||||
},
|
||||
uploadEnabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
text: '',
|
||||
changeTimeout: null,
|
||||
isEditActive: false,
|
||||
isPreviewActive: true,
|
||||
|
||||
preview: '',
|
||||
attachmentService: null,
|
||||
loadedAttachments: {},
|
||||
config: createEasyMDEConfig({
|
||||
placeholder: this.placeholder,
|
||||
uploadImage: this.uploadEnabled,
|
||||
imageUploadFunction: this.uploadCallback,
|
||||
}),
|
||||
checkboxId: createRandomID(),
|
||||
}
|
||||
uploadCallback: {
|
||||
type: Function,
|
||||
},
|
||||
watch: {
|
||||
modelValue(modelValue) {
|
||||
this.text = modelValue
|
||||
this.$nextTick(this.renderPreview)
|
||||
},
|
||||
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.
|
||||
if (oldVal === '' && this.text === this.modelValue) {
|
||||
return
|
||||
}
|
||||
this.bubble()
|
||||
},
|
||||
hasPreview: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
mounted() {
|
||||
if (this.modelValue !== '') {
|
||||
this.text = this.modelValue
|
||||
}
|
||||
|
||||
if (this.previewIsDefault && this.hasPreview) {
|
||||
this.$nextTick(this.renderPreview)
|
||||
return
|
||||
}
|
||||
|
||||
this.isPreviewActive = false
|
||||
this.isEditActive = true
|
||||
previewIsDefault: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
methods: {
|
||||
// This gets triggered when only pasting content into the editor.
|
||||
// A change event would not get generated by that, an input event does.
|
||||
// Therefore, we're using this handler to catch paste events.
|
||||
// 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
|
||||
// that in the end, only one change event is triggered to the outside per change.
|
||||
handleInput(val) {
|
||||
// Don't bubble if the text is up to date
|
||||
if (val === this.text) {
|
||||
return
|
||||
}
|
||||
|
||||
this.text = val
|
||||
this.bubble(1000)
|
||||
},
|
||||
bubble(timeout = 500) {
|
||||
if (this.changeTimeout !== null) {
|
||||
clearTimeout(this.changeTimeout)
|
||||
}
|
||||
|
||||
this.changeTimeout = setTimeout(() => {
|
||||
this.$emit('update:modelValue', this.text)
|
||||
}, timeout)
|
||||
},
|
||||
replaceAt(str, index, replacement) {
|
||||
return str.substr(0, index) + replacement + str.substr(index + replacement.length)
|
||||
},
|
||||
findNthIndex(str, n) {
|
||||
const checkboxes = findCheckboxesInText(str)
|
||||
return checkboxes[n]
|
||||
},
|
||||
renderPreview() {
|
||||
setupMarkdownRenderer(this.checkboxId)
|
||||
|
||||
this.preview = DOMPurify.sanitize(marked(this.text), {ADD_ATTR: ['target']})
|
||||
|
||||
// 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.
|
||||
// To work around this, we modify the url after rendering it in the vue component.
|
||||
// We're doing the whole thing in the next tick to ensure the image elements are available in the
|
||||
// dom tree. If we're calling this right after setting this.preview it could be the images were
|
||||
// not already made available.
|
||||
// Some docs at https://stackoverflow.com/q/62865160/10924593
|
||||
this.$nextTick(async () => {
|
||||
const attachmentImage = document.getElementsByClassName('attachment-image')
|
||||
if (attachmentImage) {
|
||||
for (const img of attachmentImage) {
|
||||
// The url is something like /tasks/<id>/attachments/<id>
|
||||
const parts = img.dataset.src.substr(window.API_URL.length + 1).split('/')
|
||||
const taskId = parseInt(parts[1])
|
||||
const attachmentId = parseInt(parts[3])
|
||||
const cacheKey = `${taskId}-${attachmentId}`
|
||||
|
||||
if (typeof this.loadedAttachments[cacheKey] !== 'undefined') {
|
||||
img.src = this.loadedAttachments[cacheKey]
|
||||
continue
|
||||
}
|
||||
|
||||
const attachment = new AttachmentModel({taskId: taskId, id: attachmentId})
|
||||
|
||||
if (this.attachmentService === null) {
|
||||
this.attachmentService = new AttachmentService()
|
||||
}
|
||||
|
||||
const url = await this.attachmentService.getBlobUrl(attachment)
|
||||
img.src = url
|
||||
this.loadedAttachments[cacheKey] = url
|
||||
}
|
||||
}
|
||||
|
||||
const textCheckbox = document.getElementsByClassName(`text-checkbox-${this.checkboxId}`)
|
||||
if (textCheckbox) {
|
||||
for (const check of textCheckbox) {
|
||||
check.removeEventListener('change', this.handleCheckboxClick)
|
||||
check.addEventListener('change', this.handleCheckboxClick)
|
||||
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)
|
||||
if (index < 0 || typeof index === 'undefined') {
|
||||
console.debug('no index found')
|
||||
return
|
||||
}
|
||||
console.debug(index, this.text.substr(index, 9))
|
||||
|
||||
const listPrefix = this.text.substr(index, 1)
|
||||
|
||||
if (checked) {
|
||||
this.text = this.replaceAt(this.text, index, `${listPrefix} [x] `)
|
||||
} else {
|
||||
this.text = this.replaceAt(this.text, index, `${listPrefix} [ ] `)
|
||||
}
|
||||
this.bubble()
|
||||
this.renderPreview()
|
||||
},
|
||||
toggleEdit() {
|
||||
if (this.isEditActive) {
|
||||
this.isPreviewActive = true
|
||||
this.isEditActive = false
|
||||
this.renderPreview()
|
||||
this.bubble(0) // save instantly
|
||||
} else {
|
||||
this.isPreviewActive = false
|
||||
this.isEditActive = true
|
||||
}
|
||||
},
|
||||
isEditEnabled: {
|
||||
default: true,
|
||||
},
|
||||
bottomActions: {
|
||||
default: () => [],
|
||||
},
|
||||
emptyText: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
showSave: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// If a key is passed the editor will go in "edit" mode when the key is pressed.
|
||||
// Disabled if an empty string is passed.
|
||||
editShortcut: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const text = ref('')
|
||||
const changeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
|
||||
const isEditActive = ref(false)
|
||||
const isPreviewActive = ref(true)
|
||||
|
||||
const showPreviewText = computed(() => isPreviewActive.value && text.value === '' && props.emptyText !== '')
|
||||
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(
|
||||
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.
|
||||
if (oldVal === '' && text.value === modelValue.value) {
|
||||
return
|
||||
}
|
||||
bubble()
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
if (modelValue.value !== '') {
|
||||
text.value = modelValue.value
|
||||
}
|
||||
|
||||
if (props.previewIsDefault && props.hasPreview) {
|
||||
nextTick(() => renderPreview())
|
||||
return
|
||||
}
|
||||
|
||||
isPreviewActive.value = false
|
||||
isEditActive.value = true
|
||||
})
|
||||
|
||||
|
||||
// This gets triggered when only pasting content into the editor.
|
||||
// A change event would not get generated by that, an input event does.
|
||||
// Therefore, we're using this handler to catch paste events.
|
||||
// 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
|
||||
// that in the end, only one change event is triggered to the outside per change.
|
||||
function handleInput(val: string) {
|
||||
// Don't bubble if the text is up to date
|
||||
if (val === text.value) {
|
||||
return
|
||||
}
|
||||
|
||||
text.value = val
|
||||
bubble(1000)
|
||||
}
|
||||
|
||||
function bubble(timeout = 500) {
|
||||
if (changeTimeout.value !== null) {
|
||||
clearTimeout(changeTimeout.value)
|
||||
}
|
||||
|
||||
changeTimeout.value = setTimeout(() => {
|
||||
emit('update:modelValue', text.value)
|
||||
}, timeout)
|
||||
}
|
||||
|
||||
function replaceAt(str: string, index: number, replacement: string) {
|
||||
return str.slice(0, index) + replacement + str.slice(index + replacement.length)
|
||||
}
|
||||
|
||||
function findNthIndex(str: string, n: number) {
|
||||
const checkboxes = findCheckboxesInText(str)
|
||||
return checkboxes[n]
|
||||
}
|
||||
|
||||
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.
|
||||
// Therefore, we can't resolve the blob url at (markdown) compile time.
|
||||
// To work around this, we modify the url after rendering it in the vue component.
|
||||
// We're doing the whole thing in the next tick to ensure the image elements are available in the
|
||||
// dom tree. If we're calling this right after setting this.preview it could be the images were
|
||||
// not already made available.
|
||||
// Some docs at https://stackoverflow.com/q/62865160/10924593
|
||||
nextTick().then(async () => {
|
||||
const attachmentImage = document.querySelectorAll<HTMLImageElement>('.attachment-image')
|
||||
if (attachmentImage) {
|
||||
Array.from(attachmentImage).forEach(async (img) => {
|
||||
// The url is something like /tasks/<id>/attachments/<id>
|
||||
const parts = img.dataset.src?.slice(window.API_URL.length + 1).split('/')
|
||||
const taskId = Number(parts[1])
|
||||
const attachmentId = Number(parts[3])
|
||||
const cacheKey: CacheKey = `${taskId}-${attachmentId}`
|
||||
|
||||
if (typeof loadedAttachments.value[cacheKey] !== 'undefined') {
|
||||
img.src = loadedAttachments.value[cacheKey]
|
||||
return
|
||||
}
|
||||
|
||||
const attachment = new AttachmentModel({taskId: taskId, id: attachmentId})
|
||||
|
||||
const url = await attachmentService.getBlobUrl(attachment)
|
||||
img.src = url
|
||||
loadedAttachments.value[cacheKey] = url
|
||||
})
|
||||
}
|
||||
|
||||
const textCheckbox = document.querySelectorAll<HTMLInputElement>(`.text-checkbox-${checkboxId.value}`)
|
||||
if (textCheckbox) {
|
||||
Array.from(textCheckbox).forEach(check => {
|
||||
check.removeEventListener('change', handleCheckboxClick)
|
||||
check.addEventListener('change', handleCheckboxClick)
|
||||
check.parentElement?.classList.add('has-checkbox')
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
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') {
|
||||
console.debug('no index found')
|
||||
return
|
||||
}
|
||||
console.debug(index, text.value.slice(index, 9))
|
||||
|
||||
const listPrefix = text.value.slice(index, 1)
|
||||
|
||||
text.value = replaceAt(text.value, index, `${listPrefix} ${checked ? '[x]' : '[ ]'} `)
|
||||
bubble()
|
||||
renderPreview()
|
||||
}
|
||||
|
||||
function toggleEdit() {
|
||||
if (isEditActive.value) {
|
||||
isPreviewActive.value = true
|
||||
isEditActive.value = false
|
||||
renderPreview()
|
||||
bubble(0) // save instantly
|
||||
} else {
|
||||
isPreviewActive.value = false
|
||||
isEditActive.value = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@
|
|||
:checked="checked"
|
||||
:disabled="disabled || undefined"
|
||||
:id="checkBoxId"
|
||||
@change="(event) => updateData(event.target.checked)"
|
||||
type="checkbox"/>
|
||||
@change="(event: Event) => updateData((event.target as HTMLInputElement).checked)"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label :for="checkBoxId" class="check">
|
||||
<svg height="18px" viewBox="0 0 18 18" width="18px">
|
||||
<path
|
||||
|
|
@ -19,47 +20,42 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from 'vue'
|
||||
<script setup lang="ts">
|
||||
import {ref, toRef, watch} from 'vue'
|
||||
|
||||
import {createRandomID} from '@/helpers/randomId'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'fancycheckbox',
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
checkBoxId: `fancycheckbox_${createRandomID()}`,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
required: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['update:modelValue', 'change'],
|
||||
watch: {
|
||||
modelValue: {
|
||||
handler(modelValue) {
|
||||
this.checked = modelValue
|
||||
const checked = ref(false)
|
||||
const checkBoxId = `fancycheckbox_${createRandomID()}`
|
||||
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
},
|
||||
methods: {
|
||||
updateData(checked: boolean) {
|
||||
this.checked = checked
|
||||
this.$emit('update:modelValue', checked)
|
||||
this.$emit('change', checked)
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -578,7 +578,7 @@ export default defineComponent({
|
|||
return
|
||||
}
|
||||
|
||||
let ids = []
|
||||
const ids = []
|
||||
this[kind].forEach(u => {
|
||||
ids.push(kind === 'users' ? u.username : u.id)
|
||||
})
|
||||
|
|
@ -613,7 +613,7 @@ export default defineComponent({
|
|||
return
|
||||
}
|
||||
|
||||
let labelIDs = []
|
||||
const labelIDs = []
|
||||
this.labels.forEach(u => {
|
||||
labelIDs.push(u.id)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -71,10 +71,9 @@ export default {
|
|||
|
||||
<script lang="ts" setup>
|
||||
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'
|
||||
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
enabled?: boolean,
|
||||
overflow?: boolean,
|
||||
|
|
@ -94,14 +93,9 @@ const attrs = useAttrs()
|
|||
const modal = ref<HTMLElement | null>(null)
|
||||
const scrollLock = useScrollLock(modal)
|
||||
|
||||
watch(
|
||||
() => props.enabled,
|
||||
enabled => {
|
||||
scrollLock.value = enabled
|
||||
},
|
||||
)
|
||||
|
||||
onUnmounted(() => scrollLock.value = false)
|
||||
watchEffect(() => {
|
||||
scrollLock.value = props.enabled
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -75,8 +75,8 @@ async function load() {
|
|||
await router.push(redirectTo)
|
||||
}
|
||||
ready.value = true
|
||||
} catch (e: any) {
|
||||
error.value = e
|
||||
} catch (e: unknown) {
|
||||
error.value = String(e)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -214,7 +214,7 @@ async function addTask() {
|
|||
return rel
|
||||
})
|
||||
await Promise.all(relations)
|
||||
} catch (e: any) {
|
||||
} catch (e: { message?: string }) {
|
||||
newTaskTitle.value = taskTitleBackup
|
||||
if (e?.message === 'NO_LIST') {
|
||||
errorMessage.value = t('list.create.addListRequired')
|
||||
|
|
|
|||
|
|
@ -214,7 +214,7 @@ async function deleteAttachment() {
|
|||
|
||||
try {
|
||||
const r = await attachmentService.delete(attachmentToDelete.value)
|
||||
attachmentStore.removeById(this.attachmentToDelete.id)
|
||||
attachmentStore.removeById(attachmentToDelete.value.id)
|
||||
success(r)
|
||||
setAttachmentToDelete(null)
|
||||
} catch(e) {
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
'draggable': !(loadingInternal || loading),
|
||||
'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.ctrl="() => toggleTaskDone(task)"
|
||||
@click.meta="() => toggleTaskDone(task)"
|
||||
>
|
||||
<span class="task-id">
|
||||
<Done class="kanban-card__done" :is-done="task.done" variant="small" />
|
||||
<Done class="kanban-card__done" :is-done="task.done" variant="small"/>
|
||||
<template v-if="task.identifier === ''">
|
||||
#{{ task.index }}
|
||||
</template>
|
||||
|
|
@ -44,11 +44,11 @@
|
|||
<priority-label :priority="task.priority" :done="task.done"/>
|
||||
<div class="assignees" v-if="task.assignees.length > 0">
|
||||
<user
|
||||
v-for="u in task.assignees"
|
||||
:avatar-size="24"
|
||||
:key="task.id + 'assignee' + u.id"
|
||||
:show-username="false"
|
||||
:user="u"
|
||||
v-for="u in task.assignees"
|
||||
/>
|
||||
</div>
|
||||
<checklist-summary :task="task"/>
|
||||
|
|
@ -65,80 +65,55 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, type PropType} from 'vue'
|
||||
<script lang="ts" setup>
|
||||
import {ref, computed} from 'vue'
|
||||
import {useRouter} from 'vue-router'
|
||||
|
||||
import PriorityLabel from '../../../components/tasks/partials/priorityLabel.vue'
|
||||
import User from '../../../components/misc/user.vue'
|
||||
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.vue'
|
||||
import Labels from '@/components/tasks/partials/labels.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 {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatDate'
|
||||
import {colorIsDark} from '@/helpers/color/colorIsDark'
|
||||
import {useTaskStore} from '@/stores/tasks'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'kanban-card',
|
||||
components: {
|
||||
ChecklistSummary,
|
||||
Done,
|
||||
PriorityLabel,
|
||||
User,
|
||||
Labels,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadingInternal: false,
|
||||
TASK_DEFAULT_COLOR,
|
||||
}
|
||||
},
|
||||
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 {
|
||||
const done = !task.done
|
||||
await useTaskStore().update({
|
||||
...task,
|
||||
done,
|
||||
})
|
||||
} finally {
|
||||
this.loadingInternal = false
|
||||
}
|
||||
},
|
||||
openTaskDetail() {
|
||||
this.$router.push({
|
||||
name: 'task.detail',
|
||||
params: { id: this.task.id },
|
||||
state: { backdropView: this.$router.currentRoute.value.fullPath },
|
||||
})
|
||||
},
|
||||
},
|
||||
const router = useRouter()
|
||||
|
||||
const loadingInternal = ref(false)
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
task: ITask,
|
||||
loading: boolean,
|
||||
}>(), {
|
||||
loading: false,
|
||||
})
|
||||
|
||||
const color = computed(() => getHexColor(props.task.hexColor))
|
||||
|
||||
async function toggleTaskDone(task: ITask) {
|
||||
loadingInternal.value = true
|
||||
try {
|
||||
await useTaskStore().update({
|
||||
...task,
|
||||
done: !task.done,
|
||||
})
|
||||
} finally {
|
||||
loadingInternal.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openTaskDetail() {
|
||||
router.push({
|
||||
name: 'task.detail',
|
||||
params: {id: props.task.id},
|
||||
state: {backdropView: router.currentRoute.value.fullPath},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
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
|
||||
if (found) {
|
||||
relatedTasks.value[kind as IRelationKind]![key] = task
|
||||
|
|
|
|||
40
src/composables/useRenewTokenOnFocus.ts
Normal file
40
src/composables/useRenewTokenOnFocus.ts
Normal 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
54
src/composables/useRouteWithModal.ts
Normal 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}
|
||||
}
|
||||
|
|
@ -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...
|
||||
mounted: (el, {modifiers}) => {
|
||||
mounted(el, {modifiers}) {
|
||||
// Focus the element only if the viewport is big enough
|
||||
// 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.
|
||||
|
|
@ -10,3 +12,5 @@ export default {
|
|||
}
|
||||
},
|
||||
}
|
||||
|
||||
export default focus
|
||||
|
|
@ -4,7 +4,7 @@ import type {IAttachment} from '@/modelTypes/IAttachment'
|
|||
import AttachmentService from '@/services/attachment'
|
||||
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 files = [file]
|
||||
|
||||
|
|
@ -15,7 +15,7 @@ export async function uploadFiles(
|
|||
attachmentService: AttachmentService,
|
||||
taskId: number,
|
||||
files: File[] | FileList,
|
||||
onSuccess: Function = () => {},
|
||||
onSuccess?: (attachmentUrl: string) => void,
|
||||
) {
|
||||
const attachmentModel = new AttachmentModel({taskId})
|
||||
const response = await attachmentService.create(attachmentModel, files)
|
||||
|
|
@ -26,7 +26,7 @@ export async function uploadFiles(
|
|||
taskId,
|
||||
attachment,
|
||||
})
|
||||
onSuccess(generateAttachmentUrl(taskId, attachment.id))
|
||||
onSuccess?.(generateAttachmentUrl(taskId, attachment.id))
|
||||
})
|
||||
|
||||
if (response.errors !== null) {
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@ export async function refreshToken(persist: boolean): Promise<AxiosResponse> {
|
|||
return response
|
||||
|
||||
} catch(e) {
|
||||
// @ts-ignore
|
||||
throw new Error('Error renewing token: ', { cause: e })
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
export const calculateItemPosition = (positionBefore: number | null, positionAfter: number | null): number => {
|
||||
if (positionBefore === null && positionAfter === null) {
|
||||
return 0
|
||||
}
|
||||
if (positionBefore === null) {
|
||||
if (positionAfter === null) {
|
||||
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 (positionBefore === null && positionAfter !== null) {
|
||||
// If there is no task after it, we just add 2^16 to the last position to have enough room in the future
|
||||
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 (positionBefore !== null && positionAfter === null) {
|
||||
if (positionAfter === null) {
|
||||
return positionBefore + Math.pow(2, 16)
|
||||
}
|
||||
|
||||
// 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
|
||||
}
|
||||
|
|
@ -8,33 +8,34 @@ export function setupMarkdownRenderer(checkboxId: string) {
|
|||
let checkboxNum = -1
|
||||
marked.use({
|
||||
renderer: {
|
||||
image: (src, title, text) => {
|
||||
image(src: string, title: string, text: string) {
|
||||
|
||||
title = title ? ` title="${title}` : ''
|
||||
|
||||
// If the url starts with the api url, the image is likely an attachment and
|
||||
// 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 src="${src}" alt="${text}" ${title}/>`
|
||||
},
|
||||
checkbox: (checked) => {
|
||||
checkbox(checked: boolean) {
|
||||
let checkedString = ''
|
||||
if (checked) {
|
||||
checked = ' checked="checked"'
|
||||
checkedString = 'checked'
|
||||
}
|
||||
|
||||
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 html = linkRenderer.call(renderer, href, title, text)
|
||||
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'
|
||||
return hljs.highlight(code, {language: validLanguage}).value
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// https://stackoverflow.com/a/32108184/10924593
|
||||
export function objectIsEmpty(obj: any): boolean {
|
||||
export function objectIsEmpty(obj: Record<string, unknown>): boolean {
|
||||
return obj
|
||||
&& Object.keys(obj).length === 0
|
||||
&& Object.getPrototypeOf(obj) === Object.prototype
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
const DEFAULT_ID_LENGTH = 9
|
||||
|
||||
export function createRandomID(idLength = DEFAULT_ID_LENGTH) {
|
||||
return Math.random().toString(36).substr(2, idLength)
|
||||
return Math.random().toString(36).slice(2, idLength)
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import {parseURL} from 'ufo'
|
|||
import {createRandomID} from '@/helpers/randomId'
|
||||
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.
|
||||
// The implications are not quite clear yet hence the logic to pass in another redirect url still exists.
|
||||
|
|
|
|||
|
|
@ -125,16 +125,16 @@ const addTimeToDate = (text: string, date: Date, previousMatch: string | null):
|
|||
}
|
||||
|
||||
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
|
||||
let results: string[] | null = fullDateRegex.exec(text)
|
||||
let result: string | null = results === null ? null : results[0]
|
||||
let foundText: string | null = result
|
||||
let containsYear: boolean = true
|
||||
let containsYear = true
|
||||
if (result === null) {
|
||||
// 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)
|
||||
result = results === null ? null : `${results[0]} ${now.getFullYear()}`.trim()
|
||||
foundText = results === null ? '' : results[0].trim()
|
||||
|
|
@ -142,7 +142,7 @@ export const getDateFromText = (text: string, now: Date = new Date()) => {
|
|||
|
||||
if (result === null) {
|
||||
// 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)
|
||||
|
||||
// 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 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.
|
||||
if (results === null) {
|
||||
return {
|
||||
|
|
@ -240,7 +240,7 @@ const getDateFromWeekday = (text: string): dateFoundResult => {
|
|||
|
||||
const date: Date = new Date()
|
||||
const currentDay: number = date.getDay()
|
||||
let day: number = 0
|
||||
let day = 0
|
||||
|
||||
switch (results[2]) {
|
||||
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).
|
||||
let foundText = results[0]
|
||||
if (foundText.endsWith(' ')) {
|
||||
foundText = foundText.substr(0, foundText.length - 1)
|
||||
foundText = foundText.slice(0, foundText.length - 1)
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -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') {
|
||||
return fallback
|
||||
}
|
||||
|
||||
const d = new Date(rawValue)
|
||||
|
||||
// @ts-ignore if rawValue is an invalid date, isNan will return false.
|
||||
return !isNaN(d)
|
||||
return !isNaN(+d)
|
||||
? d
|
||||
: rawValue
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export function isNil(value: unknown) {
|
|||
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)) {
|
||||
return {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,15 +31,14 @@ export const createNewIndexer = (name: string, fieldsToIndex: string[]) => {
|
|||
return index.update(item.id, item)
|
||||
}
|
||||
|
||||
function search(query: string | null): number[] | null {
|
||||
function search(query: string | null) {
|
||||
if (query === '' || query === null) {
|
||||
return null
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
return index.search(query)
|
||||
?.flatMap(r => r.result)
|
||||
.filter((value, index, self) => self.indexOf(value) === index)
|
||||
.filter((value, index, self) => self.indexOf(value) === index) as number[]
|
||||
|| null
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@ if (apiUrlFromStorage !== null) {
|
|||
}
|
||||
|
||||
// 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) === '/') {
|
||||
window.API_URL = window.API_URL.substr(0, window.API_URL.length - 1)
|
||||
if (window.API_URL.slice(window.API_URL.length - 1, window.API_URL.length) === '/') {
|
||||
window.API_URL = window.API_URL.slice(0, window.API_URL.length - 1)
|
||||
}
|
||||
|
||||
const app = createApp(App)
|
||||
|
|
@ -44,9 +44,8 @@ app.use(Notifications)
|
|||
|
||||
// directives
|
||||
import focus from '@/directives/focus'
|
||||
// @ts-ignore The export does exist, ts just doesn't find it.
|
||||
import { VTooltip } from 'v-tooltip'
|
||||
import 'v-tooltip/dist/v-tooltip.css'
|
||||
import { VTooltip } from 'floating-vue'
|
||||
import 'floating-vue/dist/style.css'
|
||||
import shortcut from '@/directives/shortcut'
|
||||
import cypress from '@/directives/cypress'
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export interface IList extends IAbstract {
|
|||
isArchived: boolean
|
||||
hexColor: string
|
||||
identifier: string
|
||||
backgroundInformation: any // FIXME: improve type
|
||||
backgroundInformation: unknown | null // FIXME: improve type
|
||||
isFavorite: boolean
|
||||
subscription: ISubscription
|
||||
position: number
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export default class ListModel extends AbstractModel<IList> implements IList {
|
|||
isArchived = false
|
||||
hexColor = ''
|
||||
identifier = ''
|
||||
backgroundInformation: any = null
|
||||
backgroundInformation: unknown | null = null
|
||||
isFavorite = false
|
||||
subscription: ISubscription = null
|
||||
position = 0
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ if (!SUPPORTS_TRIGGERED_NOTIFICATION) {
|
|||
console.debug('This browser does not support triggered notifications')
|
||||
}
|
||||
|
||||
export function getHexColor(hexColor: string) {
|
||||
export function getHexColor(hexColor: string): string {
|
||||
if (hexColor === '' || hexColor === '#') {
|
||||
return TASK_DEFAULT_COLOR
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
*/
|
||||
getReplacedRoute(path : string, pathparams : {}) : string {
|
||||
getReplacedRoute(path : string, pathparams : Record<string, unknown>) : string {
|
||||
const replacements = this.getRouteReplacements(path, pathparams)
|
||||
return Object.entries(replacements).reduce(
|
||||
(result, [parameter, value]) => result.replace(parameter, value as string),
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import type {IList} from '@/modelTypes/IList'
|
|||
export interface RootStoreState {
|
||||
loading: boolean,
|
||||
|
||||
currentList: IList,
|
||||
currentList: IList | null,
|
||||
background: string,
|
||||
blurHash: string,
|
||||
|
||||
|
|
@ -47,12 +47,13 @@ export const useBaseStore = defineStore('base', {
|
|||
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
|
||||
// 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.
|
||||
if (
|
||||
typeof this.currentList.maxRight !== 'undefined' &&
|
||||
typeof this.currentList?.maxRight !== 'undefined' &&
|
||||
currentList !== null &&
|
||||
(
|
||||
typeof currentList.maxRight === 'undefined' ||
|
||||
currentList.maxRight === null
|
||||
|
|
@ -95,7 +96,7 @@ export const useBaseStore = defineStore('base', {
|
|||
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) {
|
||||
this.setCurrentList({})
|
||||
this.setBackground('')
|
||||
|
|
|
|||
|
|
@ -562,8 +562,8 @@ const hasAttachments = computed(() => attachmentStore.attachments.length > 0)
|
|||
// HACK:
|
||||
const shouldShowClosePopup = computed(() => (route.name as string).includes('kanban'))
|
||||
|
||||
function attachmentUpload(...args: any[]) {
|
||||
return uploadFile(taskId.value, ...args)
|
||||
function attachmentUpload(file: File, onSuccess?: (url: string) => void) {
|
||||
return uploadFile(taskId.value, file, onSuccess)
|
||||
}
|
||||
|
||||
const heading = ref<HTMLElement | null>(null)
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<x-button
|
||||
:loading="this.passwordResetService.loading"
|
||||
:loading="passwordResetService.loading"
|
||||
@click="submit"
|
||||
>
|
||||
{{ $t('user.auth.resetPassword') }}
|
||||
|
|
|
|||
Loading…
Reference in a new issue