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

Merge branch 'main' into bulma-css-variables 

# Conflicts:
#	src/App.vue
#	src/components/home/contentNoAuth.vue
#	src/components/home/topNavigation.vue
#	src/components/misc/api-config.vue
#	src/components/tasks/partials/relatedTasks.vue
This commit is contained in:
kolaente 2021-11-13 21:37:35 +01:00
parent 1745c174e1 feea191ecf
commit 2614fddf51
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
58 changed files with 1170 additions and 993 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.drone.yml
View File

@ -151,6 +151,10 @@ steps:
- node ./scripts/deploy-preview-netlify.js
depends_on:
- build-prod
when:
event:
include:
- pull_request
---
kind: pipeline
@ -651,6 +655,6 @@ steps:
from_secret: crowdin_key
---
kind: signature
hmac: b343ca4448b29bcd26ba9888fa67926040b2f420d891b62e2e74ce487557c58c
hmac: 15df446c7e93a881249d46273485183386157229ee6a37b1ed0fcb2a0b32bbe2
...

6
Dockerfile
View File

@ -24,12 +24,6 @@ RUN \
# Stage 2: copy
FROM nginx
RUN apt-get update && apt-get install -y apt-utils openssl && \
mkdir -p /etc/nginx/ssl && \
openssl genrsa -out /etc/nginx/ssl/dummy.key 2048 && \
openssl req -new -key /etc/nginx/ssl/dummy.key -out /etc/nginx/ssl/dummy.csr -subj "/C=DE/L=Berlin/O=Vikunja/CN=Vikunja Snakeoil" && \
openssl x509 -req -days 3650 -in /etc/nginx/ssl/dummy.csr -signkey /etc/nginx/ssl/dummy.key -out /etc/nginx/ssl/dummy.crt
COPY nginx.conf /etc/nginx/nginx.conf
COPY run.sh /run.sh

4
cypress/integration/list/list.spec.js
View File

@ -219,10 +219,10 @@ describe('Lists', () => {
cy.get('.table-view .filter-container .items .button')
.contains('Columns')
.click()
cy.get('.table-view .filter-container .card .card-content .fancycheckbox .check')
cy.get('.table-view .filter-container .card.columns-filter .card-content .fancycheckbox .check')
.contains('Priority')
.click()
cy.get('.table-view .filter-container .card .card-content .fancycheckbox .check')
cy.get('.table-view .filter-container .card.columns-filter .card-content .fancycheckbox .check')
.contains('Done')
.click()

12
netlify.toml
View File

@ -1,3 +1,15 @@
[build]
command = "yarn build"
publish = "dist"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
[[headers]]
for = "/*"
[headers.values]
X-Frame-Options = "DENY"
X-XSS-Protection = "1; mode=block"
X-Robots-Tag = "noindex"

4
nginx.conf
View File

@ -60,15 +60,11 @@ http {
server {
listen 80;
listen 81 default_server http2 proxy_protocol; ## Needed when behind HAProxy with SSL termination + HTTP/2 support
listen 443 default_server ssl http2;
server_name _;
expires $expires;
ssl_certificate /etc/nginx/ssl/dummy.crt;
ssl_certificate_key /etc/nginx/ssl/dummy.key;
location ~* .(txt|webmanifest|css|js|mjs|map|svg|jpg|jpeg|png|ico|ttf|woff|woff2|wav)$ {
root /usr/share/nginx/html;
try_files $uri $uri/ =404;

3
package.json
View File

@ -17,6 +17,7 @@
"browserslist:update": "npx browserslist@latest --update-db"
},
"dependencies": {
"@github/hotkey": "^1.6.0",
"@kyvg/vue3-notification": "2.3.4",
"@sentry/tracing": "6.14.3",
"@sentry/vue": "6.14.3",
@ -82,7 +83,7 @@
"vite": "2.6.14",
"vite-plugin-pwa": "0.11.3",
"vue-tsc": "0.29.4",
"vite-svg-loader": "^3.1.0",
"vite-svg-loader": "3.1.0",
"wait-on": "6.0.0",
"workbox-cli": "6.3.0"
},

69
src/App.vue
View File

@ -1,25 +1,21 @@
<template>
<div :class="{'is-touch': isTouch}">
<div :class="{'is-hidden': !online}">
<!-- This is a workaround to get the sw to "see" the to-be-cached version of the offline background image -->
<div class="offline" style="height: 0;width: 0;"></div>
<top-navigation v-if="authUser"/>
<content-auth v-if="authUser"/>
<content-link-share v-else-if="authLinkShare"/>
<content-no-auth v-else/>
<notification/>
</div>
<div class="app offline" v-if="!online">
<div class="offline-message">
<h1>You are offline.</h1>
<p>Please check your network connection and try again.</p>
<ready>
<div :class="{'is-touch': isTouch}">
<div :class="{'is-hidden': !online}">
<template v-if="authUser">
<top-navigation/>
<content-auth/>
</template>
<content-link-share v-else-if="authLinkShare"/>
<content-no-auth v-else/>
<notification/>
</div>
</div>
<transition name="fade">
<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
</transition>
</div>
<transition name="fade">
<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
</transition>
</div>
</ready>
</template>
<script>
@ -36,6 +32,7 @@ import ContentLinkShare from './components/home/contentLinkShare'
import ContentNoAuth from './components/home/contentNoAuth'
import {setLanguage} from './i18n'
import AccountDeleteService from '@/services/accountDelete'
import Ready from '@/components/misc/ready'
import {useColorScheme} from '@/composables/useColorScheme'
export default defineComponent({
@ -47,6 +44,7 @@ export default defineComponent({
TopNavigation,
KeyboardShortcuts,
Notification,
Ready,
},
beforeMount() {
this.setupOnlineStatus()
@ -55,13 +53,6 @@ export default defineComponent({
this.setupAccountDeletionVerification()
},
beforeCreate() {
// FIXME: async action in beforeCreate, might be not finished when component mounts
this.$store.dispatch('config/update')
.then(() => {
this.$store.dispatch('auth/checkAuth')
})
this.$store.dispatch('auth/checkAuth')
setLanguage()
},
setup() {
@ -125,29 +116,3 @@ export default defineComponent({
<style lang="scss">
@import '@/styles/global.scss';
</style>
<style lang="scss" scoped>
.offline {
background: url('@/assets/llama-nightscape.jpg') no-repeat center;
background-size: cover;
height: 100vh;
.offline-message {
text-align: center;
position: absolute;
width: 100vw;
bottom: 5vh;
color: var(--white);
padding: 0 1rem;
h1 {
font-weight: bold;
font-size: 1.5rem;
text-align: center;
color: var(--white);
font-weight: 700 !important;
font-size: 1.5rem;
}
}
}
</style>

20
src/components/home/MenuButton.vue
View File

@ -1,16 +1,17 @@
<template>
<button
type="button"
@click="$store.commit('toggleMenu')"
class="menu-show-button"
@shortkey="() => $store.commit('toggleMenu')"
v-shortkey="['ctrl', 'e']"
:aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
/>
<button
type="button"
@click="$store.commit('toggleMenu')"
class="menu-show-button"
@shortkey="() => $store.commit('toggleMenu')"
v-shortcut="'Control+e'"
:title="$t('keyboardShortcuts.toggleMenu')"
:aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
/>
</template>
<script setup>
import { computed} from 'vue'
import {computed} from 'vue'
import {store} from '@/store'
const menuActive = computed(() => store.menuActive)
@ -32,6 +33,7 @@ $size: $lineWidth + 1rem;
position: relative;
$transformX: translateX(-50%);
&::before,
&::after {
content: '';

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

@ -31,8 +31,7 @@
<a
class="keyboard-shortcuts-button"
@click="showKeyboardShortcuts()"
@shortkey="showKeyboardShortcuts()"
v-shortkey="['?']"
v-shortcut="'?'"
>
<icon icon="keyboard"/>
</a>

43
src/components/home/contentNoAuth.vue
View File

@ -1,37 +1,20 @@
<template>
<div class="no-auth-wrapper">
<div class="noauth-container">
<Logo width="400" height="117" />
<div class="message is-info" v-if="motd !== ''">
<div class="message-header">
<p>{{ $t('misc.info') }}</p>
</div>
<div class="message-body">
{{ motd }}
</div>
</div>
<router-view/>
</div>
</div>
<no-auth-wrapper>
<router-view/>
</no-auth-wrapper>
</template>
<script>
import {mapState} from 'vuex'
import Logo from '@/components/home/Logo.vue'
import { saveLastVisited } from '@/helpers/saveLastVisited'
import {saveLastVisited} from '@/helpers/saveLastVisited'
import NoAuthWrapper from '@/components/misc/no-auth-wrapper'
export default {
name: 'contentNoAuth',
components: { Logo },
components: {NoAuthWrapper},
computed: {
routeName() {
return this.$route.name
},
...mapState({
motd: state => state.config.motd,
}),
},
watch: {
routeName: {
@ -62,17 +45,3 @@ export default {
},
}
</script>
<style lang="scss" scoped>
.no-auth-wrapper {
background: url('@/assets/llama.svg?url') no-repeat bottom left fixed var(--site-background);
min-height: 100vh;
}
.noauth-container {
max-width: 450px;
width: 100%;
margin: 0 auto;
padding: 1rem;
}
</style>

20
src/components/home/navigation.vue
View File

@ -48,7 +48,7 @@
</ul>
</div>
<aside class="menu namespaces-lists loader-container" :class="{'is-loading': loading}">
<aside class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
<template v-for="(n, nk) in namespaces" :key="n.id" >
<div class="namespace-title" :class="{'has-menu': n.id > 0}">
<span
@ -105,7 +105,7 @@
>
<template #item="{element: l}">
<li
class="loader-container"
class="loader-container is-loading-small"
:class="{'is-loading': listUpdating[l.id]}"
>
<router-link
@ -449,14 +449,6 @@ $vikunja-nav-selected-width: 0.4rem;
&:hover :deep(.dropdown-trigger) {
opacity: 1;
}
&.loader-container.is-loading:after {
width: 1.5rem;
height: 1.5rem;
top: calc(50% - .75rem);
left: calc(50% - .75rem);
border-width: 2px;
}
}
.flip-list-move {
@ -533,14 +525,6 @@ $vikunja-nav-selected-width: 0.4rem;
padding-top: math.div($navbar-padding, 2);
}
&.loader-container.is-loading:after {
width: 1.5rem;
height: 1.5rem;
top: calc(50% - .75rem);
left: calc(50% - .75rem);
border-width: 2px;
}
.icon {
color: var(--grey-400) !important;
}

56
src/components/home/topNavigation.vue
View File

@ -5,10 +5,10 @@
class="navbar main-theme is-fixed-top"
role="navigation"
>
<router-link :to="{name: 'home'}" class="logo">
<Logo width="164" height="48" />
<router-link :to="{name: 'home'}" class="navbar-item logo">
<Logo width="164" height="48"/>
</router-link>
<MenuButton class="menu-button" />
<MenuButton class="menu-button"/>
<div class="list-title" ref="listTitle" v-show="currentList.id">
<template v-if="currentList.id">
<h1
@ -26,8 +26,8 @@
<a
@click="openQuickActions"
class="trigger-button pr-0"
@shortkey="openQuickActions"
v-shortkey="['ctrl', 'k']"
v-shortcut="'Control+k'"
:title="$t('keyboardShortcuts.quickSearch')"
>
<icon icon="search"/>
</a>
@ -256,33 +256,33 @@ $vikunja-nav-logo-full-width: 164px;
}
.list-title {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
$edit-icon-width: 1rem;
$edit-icon-width: 1rem;
@media screen and (min-width: $tablet) {
// We need a fixed width for overflowing ellipsis to work
--nav-username-width: 0;
width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width} - #{$vikunja-nav-logo-full-width} - var(--nav-username-width));
}
@media screen and (min-width: $tablet) {
// We need a fixed width for overflowing ellipsis to work
--nav-username-width: 0;
width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width} - #{$vikunja-nav-logo-full-width} - var(--nav-username-width));
}
@media screen and (max-width: $tablet) {
// We need a fixed width for overflowing ellipsis to work
width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width});
}
@media screen and (max-width: $tablet) {
// We need a fixed width for overflowing ellipsis to work
width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width});
}
h1 {
margin: 0;
}
h1 {
margin: 0;
}
:deep(.dropdown-trigger) {
color: var(--grey-400);
margin-left: 1rem;
height: 1rem;
width: 1rem;
cursor: pointer;
}
:deep(.dropdown-trigger) {
color: var(--grey-400);
margin-left: 1rem;
height: 1rem;
width: 1rem;
cursor: pointer;
}
}
</style>

96
src/components/list/partials/filter-popup.vue
View File

@ -1,37 +1,49 @@
<template>
<transition name="fade">
<filters
v-if="visibleInternal"
v-model="value"
ref="filters"
/>
</transition>
<x-button
v-if="hasFilters"
type="secondary"
@click="clearFilters"
>
{{ $t('filters.clear') }}
</x-button>
<popup>
<template #trigger="{toggle}">
<x-button
@click.prevent.stop="toggle()"
type="secondary"
icon="filter"
>
{{ $t('filters.title') }}
</x-button>
</template>
<template #content="{isOpen}">
<filters
v-model="value"
ref="filters"
class="filter-popup"
:class="{'is-open': isOpen}"
/>
</template>
</popup>
</template>
<script>
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
import Filters from '../../../components/list/partials/filters'
import Filters from '@/components/list/partials/filters'
import {getDefaultParams} from '@/components/tasks/mixins/taskList'
import Popup from '@/components/misc/popup'
export default {
name: 'filter-popup',
components: {
Popup,
Filters,
},
props: {
modelValue: {
required: true,
},
visible: {
type: Boolean,
default: false,
},
},
emits: ['update:modelValue'],
data() {
return {
visibleInternal: false,
}
},
computed: {
value: {
get() {
@ -41,34 +53,46 @@ export default {
this.$emit('update:modelValue', value)
},
},
},
mounted() {
document.addEventListener('click', this.hidePopup)
},
beforeUnmount() {
document.removeEventListener('click', this.hidePopup)
hasFilters() {
// this.value also contains the page parameter which we don't want to include in filters
// eslint-disable-next-line no-unused-vars
const {filter_by, filter_value, filter_comparator, filter_concat, s} = this.value
const def = {...getDefaultParams()}
const params = {filter_by, filter_value, filter_comparator, filter_concat, s}
const defaultParams = {
filter_by: def.filter_by,
filter_value: def.filter_value,
filter_comparator: def.filter_comparator,
filter_concat: def.filter_concat,
s: s ? def.s : undefined,
}
return JSON.stringify(params) !== JSON.stringify(defaultParams)
},
},
watch: {
modelValue: {
handler(value) {
this.params = value
this.value = value
},
immediate: true,
},
visible() {
this.visibleInternal = !this.visibleInternal
},
},
methods: {
hidePopup(e) {
if (!this.visibleInternal) {
return
}
closeWhenClickedOutside(e, this.$refs.filters.$el, () => {
this.visibleInternal = false
})
clearFilters() {
this.value = {...getDefaultParams()}
},
},
}
</script>
<style scoped lang="scss">
.filter-popup {
margin: 0;
&.is-open {
margin: 2rem 0 1rem;
}
}
</style>

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

@ -458,15 +458,7 @@ export default {
return
}
let foundDone = false
this.params.filter_by.forEach((f, i) => {
if (f === 'done') {
foundDone = i
}
})
if (foundDone === false) {
this.filters.done = true
}
this.filters.done = this.params.filter_by.some((f) => f === 'done') === false
},
async prepareRelatedObjectFilter(kind, filterName = null, servicePrefix = null) {
if (filterName === null) {

169
src/components/misc/api-config.vue
View File

@ -26,7 +26,7 @@
<i18n-t keypath="apiConfig.signInOn">
<span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span>
</i18n-t>
<br />
<br/>
<a @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</a>
</div>
@ -46,9 +46,8 @@
</template>
<script>
import { parseURL } from 'ufo'
const API_DEFAULT_PORT = 3456
import {parseURL} from 'ufo'
import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
export default {
name: 'apiConfig',
@ -71,128 +70,48 @@ export default {
return parseURL(this.apiUrl).host
},
},
props: {
configureOpen: {
type: Boolean,
required: false,
default: false,
},
},
watch: {
configureOpen: {
handler(value) {
this.configureApi = value
},
immediate: true,
},
},
methods: {
setApiUrl() {
async setApiUrl() {
if (this.apiUrl === '') {
// Don't try to check and set an empty url
this.errorMsg = this.$t('apiConfig.urlRequired')
return
}
let urlToCheck = this.apiUrl
try {
const url = await checkAndSetApiUrl(this.apiUrl)
// Check if the url has an http prefix
if (
!urlToCheck.startsWith('http://') &&
!urlToCheck.startsWith('https://')
) {
urlToCheck = `http://${urlToCheck}`
if (url === '') {
// If the config setter function could not figure out a url
throw new Error('URL cannot be empty.')
}
// Set it + save it to local storage to save us the hoops
this.errorMsg = ''
this.successMsg = this.$t('apiConfig.success', {domain: this.apiDomain})
this.configureApi = false
this.apiUrl = url
this.$emit('foundApi', this.apiUrl)
} catch (e) {
// Still not found, url is still invalid
this.successMsg = ''
this.errorMsg = this.$t('apiConfig.error', {domain: this.apiDomain})
}
urlToCheck = new URL(urlToCheck)
const origUrlToCheck = urlToCheck
const oldUrl = window.API_URL
window.API_URL = urlToCheck.toString()
// Check if the api is reachable at the provided url
this.$store
.dispatch('config/update')
.catch((e) => {
// Check if it is reachable at /api/v1 and http
if (
!urlToCheck.pathname.endsWith('/api/v1') &&
!urlToCheck.pathname.endsWith('/api/v1/')
) {
urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
window.API_URL = urlToCheck.toString()
return this.$store.dispatch('config/update')
}
throw e
})
.catch((e) => {
// Check if it has a port and if not check if it is reachable at https
if (urlToCheck.protocol === 'http:') {
urlToCheck.protocol = 'https:'
window.API_URL = urlToCheck.toString()
return this.$store.dispatch('config/update')
}
throw e
})
.catch((e) => {
// Check if it is reachable at /api/v1 and https
urlToCheck.pathname = origUrlToCheck.pathname
if (
!urlToCheck.pathname.endsWith('/api/v1') &&
!urlToCheck.pathname.endsWith('/api/v1/')
) {
urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
window.API_URL = urlToCheck.toString()
return this.$store.dispatch('config/update')
}
throw e
})
.catch((e) => {
// Check if it is reachable at port API_DEFAULT_PORT and https
if (urlToCheck.port !== API_DEFAULT_PORT) {
urlToCheck.protocol = 'https:'
urlToCheck.port = API_DEFAULT_PORT
window.API_URL = urlToCheck.toString()
return this.$store.dispatch('config/update')
}
throw e
})
.catch((e) => {
// Check if it is reachable at :API_DEFAULT_PORT and /api/v1 and https
urlToCheck.pathname = origUrlToCheck.pathname
if (
!urlToCheck.pathname.endsWith('/api/v1') &&
!urlToCheck.pathname.endsWith('/api/v1/')
) {
urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
window.API_URL = urlToCheck.toString()
return this.$store.dispatch('config/update')
}
throw e
})
.catch((e) => {
// Check if it is reachable at port API_DEFAULT_PORT and http
if (urlToCheck.port !== API_DEFAULT_PORT) {
urlToCheck.protocol = 'http:'
urlToCheck.port = API_DEFAULT_PORT
window.API_URL = urlToCheck.toString()
return this.$store.dispatch('config/update')
}
throw e
})
.catch((e) => {
// Check if it is reachable at :API_DEFAULT_PORT and /api/v1 and http
urlToCheck.pathname = origUrlToCheck.pathname
if (
!urlToCheck.pathname.endsWith('/api/v1') &&
!urlToCheck.pathname.endsWith('/api/v1/')
) {
urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
window.API_URL = urlToCheck.toString()
return this.$store.dispatch('config/update')
}
throw e
})
.catch(() => {
// Still not found, url is still invalid
this.successMsg = ''
this.errorMsg = this.$t('apiConfig.error', {domain: this.apiDomain})
window.API_URL = oldUrl
})
.then((r) => {
if (typeof r !== 'undefined') {
// Set it + save it to local storage to save us the hoops
this.errorMsg = ''
this.successMsg = this.$t('apiConfig.success', {domain: this.apiDomain})
localStorage.setItem('API_URL', window.API_URL)
this.configureApi = false
this.apiUrl = window.API_URL
this.$emit('foundApi', this.apiUrl)
}
})
},
},
}
@ -200,15 +119,15 @@ export default {
<style lang="scss" scoped>
.api-config {
margin-bottom: .75rem;
margin-bottom: .75rem;
}
.api-url-info {
font-size: .9rem;
text-align: right;
font-size: .9rem;
text-align: right;
}
span.url {
border-bottom: 1px dashed var(--primary);
}
.url {
border-bottom: 1px dashed var(--primary);
}
</style>

72
src/components/misc/keyboard-shortcuts.vue
View File

@ -1,72 +0,0 @@
<template>
<modal @close="close()">
<card class="has-no-shadow" :title="$t('keyboardShortcuts.title')">
<div class="message is-primary">
<div class="message-body">
{{ $t('keyboardShortcuts.allPages') }}
</div>
</div>
<p>
<strong>{{ $t('keyboardShortcuts.toggleMenu') }}</strong>
<shortcut :keys="['ctrl', 'e']"/>
</p>
<p>
<strong>{{ $t('keyboardShortcuts.quickSearch') }}</strong>
<shortcut :keys="['ctrl', 'k']"/>
</p>
<h3>{{ $t('list.kanban.title') }}</h3>
<div class="message is-primary" v-if="$route.name === 'list.kanban'">
<div class="message-body">
{{ $t('keyboardShortcuts.currentPageOnly') }}
</div>
</div>
<p>
<strong>{{ $t('keyboardShortcuts.task.done') }}</strong>
<shortcut :keys="['ctrl', 'click']"/>
</p>
<h3>{{ $t('keyboardShortcuts.task.title') }}</h3>
<div
class="message is-primary"
v-if="$route.name === 'task.detail' || $route.name === 'task.list.detail' || $route.name === 'task.gantt.detail' || $route.name === 'task.kanban.detail' || $route.name === 'task.detail'">
<div class="message-body">
{{ $t('keyboardShortcuts.currentPageOnly') }}
</div>
</div>
<p>
<strong>{{ $t('keyboardShortcuts.task.assign') }}</strong>
<shortcut :keys="['a']"/>
</p>
<p>
<strong>{{ $t('keyboardShortcuts.task.labels') }}</strong>
<shortcut :keys="['l']"/>
</p>
<p>
<strong>{{ $t('keyboardShortcuts.task.dueDate') }}</strong>
<shortcut :keys="['d']"/>
</p>
<p>
<strong>{{ $t('keyboardShortcuts.task.attachment') }}</strong>
<shortcut :keys="['f']"/>
</p>
<p>
<strong>{{ $t('keyboardShortcuts.task.related') }}</strong>
<shortcut :keys="['r']"/>
</p>
</card>
</modal>
</template>
<script>
import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
import Shortcut from '@/components/misc/shortcut.vue'
export default {
name: 'keyboard-shortcuts',
components: {Shortcut},
methods: {
close() {
this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
},
},
}
</script>

54
src/components/misc/keyboard-shortcuts/index.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<modal @close="close()">
<card class="has-background-white has-no-shadow" :title="$t('keyboardShortcuts.title')">
<template v-for="(s, i) in shortcuts" :key="i">
<h3>{{ $t(s.title) }}</h3>
<div class="message is-primary">
<div class="message-body">
{{
s.available($route) ? $t('keyboardShortcuts.currentPageOnly') : $t('keyboardShortcuts.allPages')
}}
</div>
</div>
<dl>
<template v-for="(sc, si) in s.shortcuts" :key="si">
<dt>{{ $t(sc.title) }}</dt>
<shortcut
is="dd"
:keys="sc.keys"
:combination="typeof sc.combination !== 'undefined' ? $t(`keyboardShortcuts.${sc.combination}`) : null"/>
</template>
</dl>
</template>
</card>
</modal>
</template>
<script>
import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
import Shortcut from '@/components/misc/shortcut.vue'
import {KEYBOARD_SHORTCUTS} from './shortcuts'
export default {
name: 'keyboard-shortcuts',
components: {Shortcut},
data() {
return {
shortcuts: KEYBOARD_SHORTCUTS,
}
},
methods: {
close() {
this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
},
},
}
</script>
<style>
dt {
font-weight: bold;
}
</style>

88
src/components/misc/keyboard-shortcuts/shortcuts.js Normal file
View File

@ -0,0 +1,88 @@
import {isAppleDevice} from '@/helpers/isAppleDevice'
const ctrl = isAppleDevice() ? '⌘' : 'ctrl'
export const KEYBOARD_SHORTCUTS = [
{
title: 'keyboardShortcuts.general',
available: () => null,
shortcuts: [
{
title: 'keyboardShortcuts.toggleMenu',
keys: [ctrl, 'e'],
},
{
title: 'keyboardShortcuts.quickSearch',
keys: [ctrl, 'k'],
},
],
},
{
title: 'list.kanban.title',
available: (route) => route.name === 'list.kanban',
shortcuts: [
{
title: 'keyboardShortcuts.task.done',
keys: [ctrl, 'click'],
},
],
},
{
title: 'keyboardShortcuts.list.title',
available: (route) => route.name.startsWith('list.'),
shortcuts: [
{
title: 'keyboardShortcuts.list.switchToListView',
keys: ['g', 'l'],
combination: 'then',
},
{
title: 'keyboardShortcuts.list.switchToGanttView',
keys: ['g', 'g'],
combination: 'then',
},
{
title: 'keyboardShortcuts.list.switchToTableView',
keys: ['g', 't'],
combination: 'then',
},
{
title: 'keyboardShortcuts.list.switchToKanbanView',
keys: ['g', 'k'],
combination: 'then',
},
],
},
{
title: 'keyboardShortcuts.task.title',
available: (route) => [
'task.detail',
'task.list.detail',
'task.gantt.detail',
'task.kanban.detail',
'task.detail',
].includes(route.name),
shortcuts: [
{
title: 'keyboardShortcuts.task.assign',
keys: ['a'],
},
{
title: 'keyboardShortcuts.task.labels',
keys: ['l'],
},
{
title: 'keyboardShortcuts.task.dueDate',
keys: ['d'],
},
{
title: 'keyboardShortcuts.task.attachment',
keys: ['f'],
},
{
title: 'keyboardShortcuts.task.related',
keys: ['r'],
},
],
},
]

39
src/components/misc/no-auth-wrapper.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<div class="no-auth-wrapper">
<div class="noauth-container">
<Logo width="400" height="117" />
<div class="message is-info" v-if="motd !== ''">
<div class="message-header">
<p>{{ $t('misc.info') }}</p>
</div>
<div class="message-body">
{{ motd }}
</div>
</div>
<slot/>
</div>
</div>
</template>
<script setup>
import Logo from '@/components/home/Logo.vue'
import {useStore} from 'vuex'
import {computed} from 'vue'
const store = useStore()
const motd = computed(() => store.state.config.motd)
</script>
<style lang="scss" scoped>
.no-auth-wrapper {
background: url('@/assets/llama.svg') no-repeat bottom left fixed $light-background;
min-height: 100vh;
}
.noauth-container {
max-width: 450px;
width: 100%;
margin: 0 auto;
padding: 1rem;
}
</style>

54
src/components/misc/popup.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<slot name="trigger" :isOpen="open" :toggle="toggle"></slot>
<div class="popup" :class="{'is-open': open}" ref="popup">
<slot name="content" :isOpen="open"/>
</div>
</template>
<script setup>
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
import {onBeforeUnmount, onMounted, ref} from 'vue'
const open = ref(false)
const popup = ref(null)
const toggle = () => {
open.value = !open.value
}
function hidePopup(e) {
if (!open.value) {
return
}
// we actually want to use popup.$el, not its value.
// eslint-disable-next-line vue/no-ref-as-operand
closeWhenClickedOutside(e, popup.value, () => {
open.value = false
})
}
onMounted(() => {
document.addEventListener('click', hidePopup)
})
onBeforeUnmount(() => {
document.removeEventListener('click', hidePopup)
})
</script>
<style scoped lang="scss">
.popup {
transition: opacity $transition;
opacity: 0;
height: 0;
overflow: hidden;
position: absolute;
top: 1rem;
&.is-open {
opacity: 1;
height: auto;
}
}
</style>

141
src/components/misc/ready.vue Normal file
View File

@ -0,0 +1,141 @@
<template>
<!-- This is a workaround to get the sw to "see" the to-be-cached version of the offline background image -->
<div class="offline" style="height: 0;width: 0;"></div>
<div class="app offline" v-if="!online">
<div class="offline-message">
<h1>{{ $t('offline.title') }}</h1>
<p>{{ $t('offline.text') }}</p>
</div>
</div>
<template v-else-if="ready">
<slot/>
</template>
<section v-else-if="error !== ''">
<no-auth-wrapper>
<card>
<p v-if="error === errorNoApiUrl">
{{ $t('ready.noApiUrlConfigured') }}
</p>
<div class="notification is-danger" v-else>
<p>
{{ $t('ready.errorOccured') }}<br/>
{{ error }}
</p>
<p>
{{ $t('ready.checkApiUrl') }}
</p>
</div>
<api-config :configure-open="true" @found-api="load"/>
</card>
</no-auth-wrapper>
</section>
<transition name="fade">
<section class="vikunja-loading" v-if="showLoading">
<img alt="Vikunja" :src="logoUrl" width="100" height="100"/>
<p>
<span class="loader-container is-loading-small is-loading"></span>
{{ $t('ready.loading') }}
</p>
</section>
</transition>
</template>
<script>
import logoUrl from '@/assets/logo.svg'
import ApiConfig from '@/components/misc/api-config'
import NoAuthWrapper from '@/components/misc/no-auth-wrapper'
import {mapState} from 'vuex'
import {ERROR_NO_API_URL} from '@/helpers/checkAndSetApiUrl'
export default {
name: 'ready',
components: {
NoAuthWrapper,
ApiConfig,
},
data() {
return {
logoUrl,
error: '',
errorNoApiUrl: ERROR_NO_API_URL,
}
},
created() {
this.load()
},
computed: {
ready() {
return this.$store.state.vikunjaReady
},
showLoading() {
return !this.ready && this.error === ''
},
...mapState([
'online',
]),
},
methods: {
load() {
this.$store.dispatch('loadApp')
.catch(e => {
this.error = e
})
},
},
}
</script>
<style lang="scss" scoped>
.vikunja-loading {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: $grey-100;
z-index: 99;
img {
margin-bottom: 1rem;
}
}
.loader-container {
margin-right: 1rem;
&.is-loading::after {
border-left-color: $grey-400;
border-bottom-color: $grey-400;
}
}
.offline {
background: url('@/assets/llama-nightscape.jpg') no-repeat center;
background-size: cover;
height: 100vh;
}
.offline-message {
text-align: center;
position: absolute;
width: 100vw;
bottom: 5vh;
color: $white;
padding: 0 1rem;
h1 {
font-weight: bold;
font-size: 1.5rem;
text-align: center;
color: $white;
font-weight: 700 !important;
font-size: 1.5rem;
}
}
</style>

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

@ -1,10 +1,10 @@
<template>
<span class="shortcuts">
<component :is="is" class="shortcuts">
<template v-for="(k, i) in keys" :key="i">
<kbd>{{ k }}</kbd>
<span v-if="i < keys.length - 1">+</span>
<span v-if="i < keys.length - 1">{{ combination }}</span>
</template>
</span>
</component>
</template>
<script>
@ -15,6 +15,14 @@ export default {
type: Array,
required: true,
},
combination: {
type: String,
default: '+',
},
is: {
type: String,
default: 'div',
},
},
}
</script>

3
src/components/modal/modal.vue
View File

@ -12,8 +12,7 @@
class="modal-container"
:class="{'has-overflow': overflow}"
@click.self.prevent.stop="$emit('close')"
@shortkey="$emit('close')"
v-shortkey="['esc']"
v-shortcut="'Escape'"
>
<div
class="modal-content"

117
src/components/quick-actions/quick-actions.vue
View File

@ -62,7 +62,10 @@ import TeamModel from '@/models/team'
import {CURRENT_LIST, LOADING, LOADING_MODULE, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
import ListModel from '@/models/list'
import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
import {getHistory} from '../../modules/listHistory'
import {getHistory} from '@/modules/listHistory'
import {parseTaskText, PrefixMode} from '@/modules/parseTaskText'
import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
import {PREFIXES} from '@/modules/parseTaskText'
const TYPE_LIST = 'list'
const TYPE_TASK = 'task'
@ -107,11 +110,6 @@ export default {
results() {
let lists = []
if (this.searchMode === SEARCH_MODE_ALL || this.searchMode === SEARCH_MODE_LISTS) {
let query = this.query
if (this.searchMode === SEARCH_MODE_LISTS) {
query = query.substr(1)
}
const ncache = {}
const history = getHistory()
@ -122,25 +120,31 @@ export default {
}),
...Object.values(this.$store.state.lists)])]
lists = (allLists.filter(l => {
if (typeof l === 'undefined' || l === null) {
return false
}
const {list} = this.parsedQuery
if (l.isArchived) {
return false
}
if (list === null) {
lists = []
} else {
lists = allLists.filter(l => {
if (typeof l === 'undefined' || l === null) {
return false
}
if (typeof ncache[l.namespaceId] === 'undefined') {
ncache[l.namespaceId] = this.$store.getters['namespaces/getNamespaceById'](l.namespaceId)
}
if (l.isArchived) {
return false
}
if (ncache[l.namespaceId].isArchived) {
return false
}
if (typeof ncache[l.namespaceId] === 'undefined') {
ncache[l.namespaceId] = this.$store.getters['namespaces/getNamespaceById'](l.namespaceId)
}
return l.title.toLowerCase().includes(query.toLowerCase())
}) ?? [])
if (ncache[l.namespaceId].isArchived) {
return false
}
return l.title.toLowerCase().includes(list.toLowerCase())
}) ?? []
}
}
const cmds = this.availableCmds
@ -207,7 +211,9 @@ export default {
}
}
return this.$t('quickActions.hint')
const prefixes = PREFIXES[getQuickAddMagicMode()] ?? PREFIXES[PrefixMode.Default]
return this.$t('quickActions.hint', prefixes)
},
currentList() {
return Object.keys(this.$store.state[CURRENT_LIST]).length === 0 ? null : this.$store.state[CURRENT_LIST]
@ -236,18 +242,23 @@ export default {
return cmds
},
parsedQuery() {
return parseTaskText(this.query, getQuickAddMagicMode())
},
searchMode() {
if (this.query === '') {
return SEARCH_MODE_ALL
}
if (this.query.startsWith('#')) {
const {text, list, labels, assignees} = this.parsedQuery
if (assignees.length === 0 && text !== '') {
return SEARCH_MODE_TASKS
}
if (this.query.startsWith('*')) {
if (assignees.length === 0 && list !== null && text === '' && labels.length === 0) {
return SEARCH_MODE_LISTS
}
if (this.query.startsWith('@')) {
if (assignees.length > 0 && list === null && text === '' && labels.length === 0) {
return SEARCH_MODE_TEAMS
}
@ -268,12 +279,7 @@ export default {
return
}
let query = this.query
if (this.searchMode === SEARCH_MODE_TASKS) {
query = query.substr(1)
}
if (query === '' || this.selectedCmd !== null) {
if (this.selectedCmd !== null) {
return
}
@ -282,8 +288,35 @@ export default {
this.taskSearchTimeout = null
}
const {text, list, labels} = this.parsedQuery
const params = {
s: text,
filter_by: [],
filter_value: [],
filter_comparator: [],
}
if (list !== null) {
const l = this.$store.getters['lists/findListByExactname'](list)
if (l !== null) {
params.filter_by.push('list_id')
params.filter_value.push(l.id)
params.filter_comparator.push('equals')
}
}
if (labels.length > 0) {
const labelIds = this.$store.getters['labels/getLabelsByExactTitles'](labels).map(l => l.id)
if (labelIds.length > 0) {
params.filter_by.push('labels')
params.filter_value.push(labelIds.join())
params.filter_comparator.push('in')
}
}
this.taskSearchTimeout = setTimeout(async () => {
const r = await this.taskService.getAll({}, {s: query})
const r = await this.taskService.getAll({}, params)
this.foundTasks = r.map(t => {
t.type = TYPE_TASK
const list = this.$store.getters['lists/getListById'](t.listId)
@ -301,12 +334,7 @@ export default {
return
}
let query = this.query
if (this.searchMode === SEARCH_MODE_TEAMS) {
query = query.substr(1)
}
if (query === '' || this.selectedCmd !== null) {
if (this.query === '' || this.selectedCmd !== null) {
return
}
@ -315,11 +343,14 @@ export default {
this.teamSearchTimeout = null
}
const {assignees} = this.parsedQuery
this.teamSearchTimeout = setTimeout(async () => {
const r = await this.teamService.getAll({}, {s: query})
this.foundTeams = r.map(t => {
t.title = t.name
return t
const teamSearchPromises = assignees.map((t) => this.teamService.getAll({}, {s: t}))
const teamsResult = await Promise.all(teamSearchPromises)
this.foundTeams = teamsResult.flatMap(team => {
team.title = team.name
return team
})
}, 150)
},
@ -348,7 +379,7 @@ export default {
this.doAction(this.results[0].type, this.results[0].items[0])
return
}
if (this.selectedCmd === null) {
return
}

12
src/components/tasks/gantt-component.vue
View File

@ -9,12 +9,12 @@
>
{{ $t('filters.title') }}
</x-button>
<filter-popup
:visible="showTaskFilter"
v-model="params"
@update:modelValue="loadTasks()"
/>
</div>
<filter-popup
:visible="showTaskFilter"
v-model="params"
@update:modelValue="loadTasks()"
/>
</div>
<div class="dates">
<template v-for="(y, yk) in days" :key="yk + 'year'">
@ -347,7 +347,7 @@ export default {
return
}
let newTask = { ...taskDragged }
let newTask = {...taskDragged}
const didntHaveDates = newTask.startDate === null ? true : false

8
src/components/tasks/mixins/taskList.js
View File

@ -1,14 +1,14 @@
import TaskCollectionService from '@/services/taskCollection'
// FIXME: merge with DEFAULT_PARAMS in filters.vue
const DEFAULT_PARAMS = {
export const getDefaultParams = () => ({
sort_by: ['position', 'id'],
order_by: ['asc', 'desc'],
filter_by: ['done'],
filter_value: ['false'],
filter_comparator: ['equals'],
filter_concat: 'and',
}
})
/**
* This mixin provides a base set of methods and properties to get tasks on a list.
@ -26,7 +26,7 @@ export default {
searchTerm: '',
showTaskFilter: false,
params: DEFAULT_PARAMS,
params: {...getDefaultParams()},
}
},
watch: {
@ -94,7 +94,7 @@ export default {
this.initTasks(page, search)
},
loadTasksOnSavedFilter() {
if(typeof this.$route.params.listId !== 'undefined' && parseInt(this.$route.params.listId) < 0) {
if (typeof this.$route.params.listId !== 'undefined' && parseInt(this.$route.params.listId) < 0) {
this.loadTasks(1, '', null, true)
}
},

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

@ -29,7 +29,7 @@
:placeholder="$t('task.relation.searchPlaceholder')"
@search="findTasks"
:loading="taskService.loading"
:search-results="foundTasks"
:search-results="mappedFoundTasks"
label="title"
v-model="newTaskRelationTask"
:creatable="true"
@ -41,8 +41,17 @@
<span
class="different-list"
v-if="props.option.listId !== listId"
v-tooltip="$t('task.relation.differentList')">
{{ $store.getters['lists/getListById'](props.option.listId) === null ? '' : $store.getters['lists/getListById'](props.option.listId).title }} >
>
<span
v-if="props.option.differentNamespace !== null"
v-tooltip="$t('task.relation.differentNamespace')">
{{ props.option.differentNamespace }} >
</span>
<span
v-if="props.option.differentList !== null"
v-tooltip="$t('task.relation.differentList')">
{{ props.option.differentList }} >
</span>
</span>
{{ props.option.title }}
</span>
@ -70,33 +79,36 @@
</template>
</transition-group>
<div :key="kind" class="related-tasks" v-for="(rts, kind ) in relatedTasks">
<template v-if="rts.length > 0">
<span class="title">{{ relationKindTitle(kind, rts.length) }}</span>
<div class="tasks noborder">
<div :key="t.id" class="task" v-for="t in rts.filter(t => t)">
<router-link :to="{ name: $route.name, params: { id: t.id } }">
<span :class="{ 'done': t.done}" class="tasktext">
<span
class="different-list"
v-if="t.listId !== listId"
v-tooltip="$t('task.relation.differentList')">
{{
$store.getters['lists/getListById'](t.listId) === null ? '' : $store.getters['lists/getListById'](t.listId).title
}} >
</span>
{{ t.title }}
<div :key="rts.kind" class="related-tasks" v-for="rts in mappedRelatedTasks">
<span class="title">{{ rts.title }}</span>
<div class="tasks">
<div :key="t.id" class="task" v-for="t in rts.tasks">
<router-link :to="{ name: $route.name, params: { id: t.id } }" :class="{ 'done': t.done}">
<span
class="different-list"
v-if="t.listId !== listId"
>
<span
v-if="t.differentNamespace !== null"
v-tooltip="$t('task.relation.differentNamespace')">
{{ t.differentNamespace }} >
</span>
</router-link>
<a
@click="() => {showDeleteModal = true; relationToDelete = {relationKind: kind, otherTaskId: t.id}}"
class="remove"
v-if="editEnabled">
<icon icon="trash-alt"/>
</a>
</div>
<span
v-if="t.differentList !== null"
v-tooltip="$t('task.relation.differentList')">
{{ t.differentList }} >
</span>
</span>
{{ t.title }}
</router-link>
<a
@click="() => {showDeleteModal = true; relationToDelete = {relationKind: rts.kind, otherTaskId: t.id}}"
class="remove"
v-if="editEnabled">
<icon icon="trash-alt"/>
</a>
</div>
</template>
</div>
</div>
<p class="none" v-if="showNoRelationsNotice && Object.keys(relatedTasks).length === 0">
{{ $t('task.relation.noneYet') }}
@ -110,10 +122,10 @@
v-if="showDeleteModal"
>
<template #header><span>{{ $t('task.relation.delete') }}</span></template>
<template #text>
<p>{{ $t('task.relation.deleteText1') }}<br/>
<strong>{{ $t('task.relation.deleteText2') }}</strong></p>
<strong>{{ $t('task.relation.deleteText2') }}</strong></p>
</template>
</modal>
</transition>
@ -183,6 +195,19 @@ export default {
showCreate() {
return Object.keys(this.relatedTasks).length === 0 || this.showNewRelationForm
},
namespace() {
return this.$store.getters['namespaces/getListAndNamespaceById'](this.listId, true)?.namespace
},
mappedRelatedTasks() {
return Object.entries(this.relatedTasks).map(([kind, tasks]) => ({
title: this.$tc(`task.relation.kinds.${kind}`, tasks.length),
tasks: this.mapRelatedTasks(tasks),
kind,
}))
},
mappedFoundTasks() {
return this.mapRelatedTasks(this.foundTasks.filter(t => t.id !== this.taskId))
},
},
methods: {
async findTasks(query) {
@ -217,15 +242,14 @@ export default {
try {
await this.taskRelationService.delete(rel)
Object.entries(this.relatedTasks).some(([relationKind, t]) => {
const found = typeof this.relatedTasks[relationKind][t] !== 'undefined' &&
this.relatedTasks[relationKind][t].id === this.relationToDelete.otherTaskId &&
relationKind === this.relationToDelete.relationKind
if (!found) return false
const kind = this.relationToDelete.relationKind
for (const t in this.relatedTasks[kind]) {
if (this.relatedTasks[kind][t].id === this.relationToDelete.otherTaskId) {
this.relatedTasks[kind].splice(t, 1)
this.relatedTasks[relationKind].splice(t, 1)
return true
})
break
}
}
this.saved = true
setTimeout(() => {
@ -245,13 +269,34 @@ export default {
relationKindTitle(kind, length) {
return this.$tc(`task.relation.kinds.${kind}`, length)
},
mapRelatedTasks(tasks) {
return tasks
.map(task => {
// by doing this here once we can save a lot of duplicate calls in the template
const {
list,
namespace,
} = this.$store.getters['namespaces/getListAndNamespaceById'](task.listId, true)
return {
...task,
differentNamespace:
(namespace !== null &&
namespace.id !== this.namespace.id &&
namespace?.title) || null,
differentList:
(list !== null &&
task.listId !== this.listId &&
list?.title) || null,
}
})
},
},
}
</script>
<style lang="scss" scoped>
$remove-icon-width: 24px;
.add-task-relation-button {
margin-top: -3rem;
@ -264,71 +309,55 @@ $remove-icon-width: 24px;
}
}
.task-relations {
&.is-narrow .columns {
display: block;
.different-list {
color: var(--grey-500);
width: auto;
}
.column {
width: 100%;
}
}
.title {
font-size: 1rem;
margin: 0;
}
.different-list {
color: var(--grey-500);
width: auto;
}
.task {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: .75rem;
transition: background-color $transition;
border-radius: $radius;
.related-tasks {
.title {
font-size: 1rem;
margin: 0;
}
&:hover {
background-color: $grey-200;
}
.tasks {
margin: 0;
a {
color: var(--text);
transition: color ease $transition-duration;
a:not(.remove) {
width: calc(100% - #{$remove-icon-width});
}
.task .tasktext {
width: calc(100% - .25rem); // Magic .25rem extra space
}
.remove {
width: $remove-icon-width;
text-align: center;
}
}
.task {
display: flex;
flex-wrap: wrap;
padding: .4rem;
transition: background-color $transition;
align-items: center;
cursor: pointer;
border-radius: $radius;
border: 2px solid transparent;
a {
color: var(--text);
transition: color ease $transition-duration;
&:hover {
color: var(--grey-900);
}
}
.remove {
color: var(--danger);
&:hover {
color: var(--grey-900);
}
}
}
.none {
font-style: italic;
text-align: center;
}
.remove {
text-align: center;
color: var(--danger);
opacity: 0;
transition: opacity $transition;
}
}
.related-tasks:hover .tasks .task .remove {
opacity: 1;
}
.none {
font-style: italic;
text-align: center;
}
:deep(.multiselect .search-results button) {
padding: 0.5rem;
}
</style>

17
src/directives/shortcut.ts Normal file
View File

@ -0,0 +1,17 @@
import {Directive} from 'vue'
import {install, uninstall} from '@github/hotkey'
import {isAppleDevice} from '@/helpers/isAppleDevice'
const directive: Directive = {
mounted(el, {value}) {
if (isAppleDevice() && value.includes('Control')) {
value = value.replace('Control', 'Meta')
}
install(el, value)
},
beforeUnmount(el) {
uninstall(el)
},
}
export default directive

118
src/helpers/checkAndSetApiUrl.ts Normal file
View File

@ -0,0 +1,118 @@
import {store} from '@/store'
const API_DEFAULT_PORT = '3456'
export const ERROR_NO_API_URL = 'noApiUrlProvided'
const updateConfig = () => store.dispatch('config/update')
export const checkAndSetApiUrl = (url: string): Promise<string> => {
// Check if the url has an http prefix
if (
!url.startsWith('http://') &&
!url.startsWith('https://')
) {
url = `http://${url}`
}
const urlToCheck: URL = new URL(url)
const origUrlToCheck = urlToCheck
const oldUrl = window.API_URL
window.API_URL = urlToCheck.toString()
// Check if the api is reachable at the provided url
return updateConfig()
.catch(e => {
// Check if it is reachable at /api/v1 and http
if (
!urlToCheck.pathname.endsWith('/api/v1') &&
!urlToCheck.pathname.endsWith('/api/v1/')
) {
urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
window.API_URL = urlToCheck.toString()
return updateConfig()
}
throw e
})
.catch(e => {
// Check if it has a port and if not check if it is reachable at https
if (urlToCheck.protocol === 'http:') {
urlToCheck.protocol = 'https:'
window.API_URL = urlToCheck.toString()
return updateConfig()
}
throw e
})
.catch(e => {
// Check if it is reachable at /api/v1 and https
urlToCheck.pathname = origUrlToCheck.pathname
if (
!urlToCheck.pathname.endsWith('/api/v1') &&
!urlToCheck.pathname.endsWith('/api/v1/')
) {
urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
window.API_URL = urlToCheck.toString()
return updateConfig()
}
throw e
})
.catch(e => {
// Check if it is reachable at port API_DEFAULT_PORT and https
if (urlToCheck.port !== API_DEFAULT_PORT) {
urlToCheck.protocol = 'https:'
urlToCheck.port = API_DEFAULT_PORT
window.API_URL = urlToCheck.toString()
return updateConfig()
}
throw e
})
.catch(e => {
// Check if it is reachable at :API_DEFAULT_PORT and /api/v1 and https
urlToCheck.pathname = origUrlToCheck.pathname
if (
!urlToCheck.pathname.endsWith('/api/v1') &&
!urlToCheck.pathname.endsWith('/api/v1/')
) {
urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
window.API_URL = urlToCheck.toString()
return updateConfig()
}
throw e
})
.catch(e => {
// Check if it is reachable at port API_DEFAULT_PORT and http
if (urlToCheck.port !== API_DEFAULT_PORT) {
urlToCheck.protocol = 'http:'
urlToCheck.port = API_DEFAULT_PORT
window.API_URL = urlToCheck.toString()
return updateConfig()
}
throw e
})
.catch(e => {
// Check if it is reachable at :API_DEFAULT_PORT and /api/v1 and http
urlToCheck.pathname = origUrlToCheck.pathname
if (
!urlToCheck.pathname.endsWith('/api/v1') &&
!urlToCheck.pathname.endsWith('/api/v1/')
) {
urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
window.API_URL = urlToCheck.toString()
return updateConfig()
}
throw e
})
.catch(e => {
window.API_URL = oldUrl
throw e
})
.then(r => {
if (typeof r !== 'undefined') {
localStorage.setItem('API_URL', window.API_URL)
return window.API_URL
}
throw new Error(ERROR_NO_API_URL)
})
}

10
src/helpers/isAppleDevice.ts Normal file
View File

@ -0,0 +1,10 @@
export const isAppleDevice = (): Boolean => {
return navigator.userAgent.includes('Mac') || [
'iPad Simulator',
'iPhone Simulator',
'iPod Simulator',
'iPad',
'iPhone',
'iPod',
].includes(navigator.platform)
}

4
src/i18n/lang/cs-CZ.json
View File

@ -449,7 +449,9 @@
"saved": "Uloženo!",
"default": "Výchozí",
"close": "Zavřít",
"download": "Stáhnout"
"download": "Stáhnout",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu"
},
"input": {
"resetColor": "Obnovit barvu",

4
src/i18n/lang/de-DE.json
View File

@ -449,7 +449,9 @@
"saved": "Gespeichert!",
"default": "Standard",
"close": "Schließen",
"download": "Herunterladen"
"download": "Herunterladen",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu"
},
"input": {
"resetColor": "Farbe zurücksetzen",

4
src/i18n/lang/de-swiss.json
View File

@ -449,7 +449,9 @@
"saved": "Gspeicheret!",
"default": "Standard",
"close": "Schlüüse",
"download": "Herunterladen"
"download": "Herunterladen",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu"
},
"input": {
"resetColor": "Farb zruggsetze",

28
src/i18n/lang/en.json
View File

@ -16,6 +16,16 @@
"title": "Not found",
"text": "The page you requested does not exist."
},
"ready": {
"loading": "Vikunja is loading…",
"errorOccured": "An error occured:",
"checkApiUrl": "Please check if the api url is correct.",
"noApiUrlConfigured": "No API url was configured. Please set one below:"
},
"offline": {
"title": "You are offline.",
"text": "Please check your network connection and try again."
},
"user": {
"auth": {
"username": "Username",
@ -353,6 +363,7 @@
},
"filters": {
"title": "Filters",
"clear": "Clear Filters",
"attributes": {
"title": "Title",
"titlePlaceholder": "The saved filter title goes here…",
@ -654,6 +665,7 @@
"searchPlaceholder": "Type search for a new task to add as related…",
"createPlaceholder": "Add this as new related task",
"differentList": "This task belongs to a different list.",
"differentNamespace": "This task belongs to a different namespace.",
"noneYet": "No task relations yet.",
"delete": "Delete Task Relation",
"deleteText1": "Are you sure you want to delete this task relation?",
@ -754,10 +766,12 @@
},
"keyboardShortcuts": {
"title": "Keyboard Shortcuts",
"general": "General",
"allPages": "These shortcuts work on all pages.",
"currentPageOnly": "These shortcuts work only on the current page.",
"toggleMenu": "Toggle The Menu",
"quickSearch": "Open the search/quick action bar",
"then": "then",
"task": {
"title": "Task Page",
"done": "Mark a task as done",
@ -766,6 +780,13 @@
"dueDate": "Change the due date of this task",
"attachment": "Add an attachment to this task",
"related": "Modify related tasks of this task"
},
"list": {
"title": "List Views",
"switchToListView": "Switch to list view",
"switchToGanttView": "Switch to gantt view",
"switchToKanbanView": "Switch to kanban view",
"switchToTableView": "Switch to table view"
}
},
"update": {
@ -787,8 +808,9 @@
"urlPlaceholder": "eg. https://localhost:3456",
"change": "change",
"signInOn": "Sign in to your Vikunja account on {0}",
"error": "Could not find or use Vikunja installation at \"{domain}\".",
"success": "Using Vikunja installation at \"{domain}\"."
"error": "Could not find or use Vikunja installation at \"{domain}\". Please try a different url.",
"success": "Using Vikunja installation at \"{domain}\".",
"urlRequired": "A url is required."
},
"loadingError": {
"failed": "Loading failed, please {0}. If the error persists, please {1}.",
@ -803,7 +825,7 @@
"quickActions": {
"commands": "Commands",
"placeholder": "Type a command or search…",
"hint": "You can use # to only search for tasks, * to only search for lists and @ to only search for teams.",
"hint": "You can use {list} to limit the search to a list. Combine {list} or {label} (labels) with a search query to search for a task with these labels or on that list. Use {assignee} to only search for teams.",
"tasks": "Tasks",
"lists": "Lists",
"teams": "Teams",

4
src/i18n/lang/es-ES.json
View File

@ -449,7 +449,9 @@
"saved": "Saved!",
"default": "Default",
"close": "Close",
"download": "Download"
"download": "Download",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu"
},
"input": {
"resetColor": "Reset Color",

4
src/i18n/lang/fr-FR.json
View File

@ -449,7 +449,9 @@
"saved": "Enregistré !",
"default": "Par défaut",
"close": "Fermer",
"download": "Télécharger"
"download": "Télécharger",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu"
},
"input": {
"resetColor": "Réinitialiser la couleur",

4
src/i18n/lang/it-IT.json
View File

@ -449,7 +449,9 @@
"saved": "Salvato!",
"default": "Predefinito",
"close": "Chiudi",
"download": "Scarica"
"download": "Scarica",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu"
},
"input": {
"resetColor": "Ripristina Colore",

4
src/i18n/lang/nl-NL.json
View File

@ -449,7 +449,9 @@
"saved": "Saved!",
"default": "Default",
"close": "Close",
"download": "Download"
"download": "Download",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu"
},
"input": {
"resetColor": "Reset Color",

4
src/i18n/lang/pt-BR.json
View File

@ -449,7 +449,9 @@
"saved": "Saved!",
"default": "Default",
"close": "Close",
"download": "Download"
"download": "Download",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu"
},
"input": {
"resetColor": "Reset Color",

4
src/i18n/lang/pt-PT.json
View File

@ -449,7 +449,9 @@
"saved": "Saved!",
"default": "Default",
"close": "Close",
"download": "Download"
"download": "Download",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu"
},
"input": {
"resetColor": "Reset Color",

4
src/i18n/lang/ro-RO.json
View File

@ -449,7 +449,9 @@
"saved": "Saved!",
"default": "Default",
"close": "Close",
"download": "Download"
"download": "Download",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu"
},
"input": {
"resetColor": "Reset Color",

4
src/i18n/lang/ru-RU.json
View File

@ -449,7 +449,9 @@
"saved": "Сохранено!",
"default": "По умолчанию",
"close": "Закрыть",
"download": "Скачать"
"download": "Скачать",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu"
},
"input": {
"resetColor": "Сбросить цвет",

4
src/i18n/lang/tr-TR.json
View File

@ -449,7 +449,9 @@
"saved": "Saved!",
"default": "Default",
"close": "Close",
"download": "Download"
"download": "Download",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu"
},
"input": {
"resetColor": "Reset Color",

4
src/i18n/lang/vi-VN.json
View File

@ -449,7 +449,9 @@
"saved": "Đã lưu!",
"default": "Mặc định",
"close": "Đóng",
"download": "Tải về"
"download": "Tải về",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu"
},
"input": {
"resetColor": "Đặt lại màu",

6
src/main.ts
View File

@ -31,8 +31,6 @@ import Notifications from '@kyvg/vue3-notification'
// PWA
import './registerServiceWorker'
// Shortcuts
import shortkey from '@/plugins/shortkey'
// Vuex
import {store} from './store'
// i18n
@ -55,14 +53,14 @@ const app = createApp(App)
app.use(Notifications)
app.use(shortkey, {prevent: ['input', 'textarea', '.input', '[contenteditable]']})
// directives
import focus from './directives/focus'
import tooltip from './directives/tooltip'
import shortcut from '@/directives/shortcut'
app.directive('focus', focus)
app.directive('tooltip', tooltip)
app.directive('shortcut', shortcut)
// global components
import FontAwesomeIcon from './icons'

78
src/plugins/shortkey/helpers.js
View File

@ -1,78 +0,0 @@
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1)
}
const MODIFIER_KEYS = ['shift', 'ctrl', 'meta', 'alt']
const SHORT_CUT_INDEX = [
{ key: 'ArrowUp', value: 'arrowup' },
{ key: 'ArrowLeft', value: 'arrowlef' },
{ key: 'ArrowRight', value: 'arrowright' },
{ key: 'ArrowDown', value: 'arrowdown' },
{ key: 'AltGraph', value: 'altgraph' },
{ key: 'Escape', value: 'esc' },
{ key: 'Enter', value: 'enter' },
{ key: 'Tab', value: 'tab' },
{ key: ' ', value: 'space' },
{ key: 'PageUp', value: 'pagup' },
{ key: 'PageDown', value: 'pagedow' },
{ key: 'Home', value: 'home' },
{ key: 'End', value: 'end' },
{ key: 'Delete', value: 'del' },
{ key: 'Backspace', value: 'bacspace' },
{ key: 'Insert', value: 'insert' },
{ key: 'NumLock', value: 'numlock' },
{ key: 'CapsLock', value: 'capslock' },
{ key: 'Pause', value: 'pause' },
{ key: 'ContextMenu', value: 'cotextmenu' },
{ key: 'ScrollLock', value: 'scrolllock' },
{ key: 'BrowserHome', value: 'browserhome' },
{ key: 'MediaSelect', value: 'mediaselect' },
]
export function encodeKey(pKey) {
const shortKey = {}
MODIFIER_KEYS.forEach((key) => {
shortKey[`${key}Key`] = pKey.includes(key)
})
let indexedKeys = createShortcutIndex(shortKey)
const vKey = pKey.filter(
(item) => !MODIFIER_KEYS.includes(item),
)
indexedKeys += vKey.join('')
return indexedKeys
}
function createShortcutIndex(pKey) {
let k = ''
MODIFIER_KEYS.forEach((key) => {
if (pKey.key === capitalizeFirstLetter(key) || pKey[`${key}Key`]) {
k += key
}
})
SHORT_CUT_INDEX.forEach(({ key, value }) => {
if (pKey.key === key) {
k += value
}
})
if (
(pKey.key && pKey.key !== ' ' && pKey.key.length === 1) ||
/F\d{1,2}|\//g.test(pKey.key)
) {
k += pKey.key.toLowerCase()
}
return k
}
export { createShortcutIndex as decodeKey }
export function parseValue(value) {
value = typeof value === 'string' ? JSON.parse(value.replace(/'/gi, '"')) : value
return value instanceof Array ? { '': value } : value
}

186
src/plugins/shortkey/index.js
View File

@ -1,186 +0,0 @@
import { parseValue, decodeKey, encodeKey } from './helpers'
let mapFunctions = {}
let objAvoided = []
let elementAvoided = []
let keyPressed = false
function dispatchShortkeyEvent(pKey) {
const e = new CustomEvent('shortkey', { bubbles: false })
if (mapFunctions[pKey].key) {
e.srcKey = mapFunctions[pKey].key
}
const elm = mapFunctions[pKey].el
if (!mapFunctions[pKey].propagte) {
elm[elm.length - 1].dispatchEvent(e)
} else {
elm.forEach((elmItem) => elmItem.dispatchEvent(e))
}
}
function keyDown(pKey) {
if (
(!mapFunctions[pKey].once && !mapFunctions[pKey].push) ||
(mapFunctions[pKey].push && !keyPressed)
) {
dispatchShortkeyEvent(pKey)
}
}
function fillMappingFunctions(
mappingFunctions,
{ b, push, once, focus, propagte, el },
) {
for (let key in b) {
const k = encodeKey(b[key])
const propagated = mappingFunctions[k] && mappingFunctions[k].propagte
const elm =
mappingFunctions[k] && mappingFunctions[k].el
? mappingFunctions[k].el
: []
elm.push(el)
mappingFunctions[k] = {
push,
once,
focus,
key,
propagte: propagated || propagte,
el: elm,
}
}
}
function bindValue(value, el, binding, vnode) {
const { modifiers } = binding
const push = !!modifiers.push
const avoid = !!modifiers.avoid
const focus = !modifiers.focus
const once = !!modifiers.once
const propagte = !!modifiers.propagte
if (avoid) {
objAvoided = objAvoided.filter((itm) => !itm === el)
objAvoided.push(el)
} else {
fillMappingFunctions(mapFunctions, {
b: value,
push,
once,
focus,
propagte,
el: vnode.el,
})
}
}
function unbindValue(value, el) {
for (let key in value) {
const k = encodeKey(value[key])
const idxElm = mapFunctions[k].el.indexOf(el)
if (mapFunctions[k].el.length > 1 && idxElm > -1) {
mapFunctions[k].el.splice(idxElm, 1)
} else {
delete mapFunctions[k]
}
}
}
function availableElement(decodedKey) {
const objectIsAvoided = !!objAvoided.find(
(r) => r === document.activeElement,
)
const filterAvoided = !!elementAvoided.find(
(selector) =>
document.activeElement && document.activeElement.matches(selector),
)
return !!mapFunctions[decodedKey] && !(objectIsAvoided || filterAvoided)
}
function keyDownListener(pKey) {
const decodedKey = decodeKey(pKey)
// Check avoidable elements
if (!availableElement(decodedKey)) {
return
}
if (!mapFunctions[decodedKey].propagte) {
pKey.preventDefault()
pKey.stopPropagation()
}
if (mapFunctions[decodedKey].focus) {
keyDown(decodedKey)
keyPressed = true
} else if (!keyPressed) {
const elm = mapFunctions[decodedKey].el
elm[elm.length - 1].focus()
keyPressed = true
}
}
function keyUpListener(pKey) {
const decodedKey = decodeKey(pKey)
if (!availableElement(decodedKey)) {
keyPressed = false
return
}
if (!mapFunctions[decodedKey].propagte) {
pKey.preventDefault()
pKey.stopPropagation()
}
if (mapFunctions[decodedKey].once || mapFunctions[decodedKey].push) {
dispatchShortkeyEvent(decodedKey)
}
keyPressed = false
}
// register key presses that happen before mounting of directive
// if (process?.env?.NODE_ENV !== 'test') {
// (() => {
document.addEventListener('keydown', keyDownListener, true)
document.addEventListener('keyup', keyUpListener, true)
// })()
// }
function install(app, options) {
elementAvoided = [...(options && options.prevent ? options.prevent : [])]
app.directive('shortkey', {
beforeMount(el, binding, vnode) {
// Mapping the commands
const value = parseValue(binding.value)
bindValue(value, el, binding, vnode)
},
updated(el, binding, vnode) {
const oldValue = parseValue(binding.oldValue)
unbindValue(oldValue, el)
const newValue = parseValue(binding.value)
bindValue(newValue, el, binding, vnode)
},
unmounted(el, binding) {
const value = parseValue(binding.value)
unbindValue(value, el)
},
})
}
export default {
install,
encodeKey,
decodeKey,
keyDown,
}

10
src/store/index.js
View File

@ -19,6 +19,7 @@ import attachments from './modules/attachments'
import labels from './modules/labels'
import ListService from '../services/list'
import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
export const store = createStore({
strict: import.meta.env.DEV,
@ -43,6 +44,7 @@ export const store = createStore({
menuActive: true,
keyboardShortcutsActive: false,
quickActionsActive: false,
vikunjaReady: false,
},
mutations: {
[LOADING](state, loading) {
@ -84,6 +86,9 @@ export const store = createStore({
[BACKGROUND](state, background) {
state.background = background
},
vikunjaReady(state, ready) {
state.vikunjaReady = ready
},
},
actions: {
async [CURRENT_LIST]({state, commit}, currentList) {
@ -138,5 +143,10 @@ export const store = createStore({
commit(CURRENT_LIST, currentList)
},
async loadApp({commit, dispatch}) {
await checkAndSetApiUrl(window.API_URL)
await dispatch('auth/checkAuth')
commit('vikunjaReady', true)
},
},
})

7
src/store/modules/labels.js
View File

@ -1,6 +1,6 @@
import LabelService from '@/services/label'
import {setLoading} from '@/store/helper'
import { success } from '@/message'
import {success} from '@/message'
import {i18n} from '@/i18n'
import {getLabelsByIds, filterLabelsByQuery} from '@/helpers/labels'
@ -45,6 +45,11 @@ export default {
filterLabelsByQuery(state) {
return (labelsToHide, query) => filterLabelsByQuery(state, labelsToHide, query)
},
getLabelsByExactTitles(state) {
return labelTitles => Object
.values(state.labels)
.filter(({title}) => labelTitles.some(l => l.toLowerCase() === title.toLowerCase()))
},
},
actions: {
async loadAllLabels(ctx, {forceLoad} = {}) {

7
src/store/modules/namespaces.js
View File

@ -76,8 +76,13 @@ export default {
},
},
getters: {
getListAndNamespaceById: state => listId => {
getListAndNamespaceById: state => (listId, ignorePseudoNamespaces = false) => {
for (const n in state.namespaces) {
if(ignorePseudoNamespaces && state.namespaces[n].id < 0) {
continue
}
for (const l in state.namespaces[n].lists) {
if (state.namespaces[n].lists[l].id === listId) {
return {

5
src/styles/components/list.scss
View File

@ -34,7 +34,6 @@ $filter-container-top-link-share-list: -47px;
.card {
text-align: left;
margin-top: calc(1rem - 1px);
}
.fancycheckbox {
@ -47,10 +46,6 @@ $filter-container-top-link-share-list: -47px;
justify-content: space-between;
margin-right: .5rem;
.button, .input {
height: $switch-view-height;
}
.field {
transition: width $transition;
width: 100%;

50
src/styles/theme/loading.scss
View File

@ -1,30 +1,38 @@
// FIXME: move to loading.vue
.loader-container.is-loading {
position: relative;
pointer-events: none;
opacity: 0.5;
position: relative;
pointer-events: none;
opacity: 0.5;
&::after {
@include loader;
position: absolute;
top: calc(50% - 2.5rem);
left: calc(50% - 2.5rem);
width: 5rem;
height: 5rem;
border-width: 0.25rem;
}
&::after {
@include loader;
position: absolute;
top: calc(50% - 2.5rem);
left: calc(50% - 2.5rem);
width: 5rem;
height: 5rem;
border-width: 0.25rem;
}
&.is-loading-small::after {
width: 1.5rem;
height: 1.5rem;
top: calc(50% - .75rem);
left: calc(50% - .75rem);
border-width: 2px;
}
}
// FIXME: move to ShowTasks.vue
.spinner.is-loading {
pointer-events: none;
pointer-events: none;
&::after {
@include loader;
width: 2rem;
height: 2rem;
margin-left: calc(50% - 1rem);
margin-top: 1rem;
border-width: 0.25rem;
}
&::after {
@include loader;
width: 2rem;
height: 2rem;
margin-left: calc(50% - 1rem);
margin-top: 1rem;
border-width: 0.25rem;
}
}

8
src/views/list/ShowList.vue
View File

@ -6,21 +6,29 @@
<div class="switch-view-container">
<div class="switch-view">
<router-link
v-shortcut="'g l'"
:title="$t('keyboardShortcuts.list.switchToListView')"
:class="{'is-active': $route.name.includes('list.list')}"
:to="{ name: 'list.list', params: { listId: listId } }">
{{ $t('list.list.title') }}
</router-link>
<router-link
v-shortcut="'g g'"
:title="$t('keyboardShortcuts.list.switchToGanttView')"
:class="{'is-active': $route.name.includes('list.gantt')}"
:to="{ name: 'list.gantt', params: { listId: listId } }">
{{ $t('list.gantt.title') }}
</router-link>
<router-link
v-shortcut="'g t'"
:title="$t('keyboardShortcuts.list.switchToTableView')"
:class="{'is-active': $route.name.includes('list.table')}"
:to="{ name: 'list.table', params: { listId: listId } }">
{{ $t('list.table.title') }}
</router-link>
<router-link
v-shortcut="'g k'"
:title="$t('keyboardShortcuts.list.switchToKanbanView')"
:class="{'is-active': $route.name.includes('list.kanban')}"
:to="{ name: 'list.kanban', params: { listId: listId } }">
{{ $t('list.kanban.title') }}

42
src/views/list/views/Kanban.vue
View File

@ -2,18 +2,11 @@
<div class="kanban-view">
<div class="filter-container" v-if="isSavedFilter">
<div class="items">
<x-button
@click.prevent.stop="toggleFilterPopup"
icon="filter"
type="secondary"
>
{{ $t('filters.title') }}
</x-button>
<filter-popup
v-model="params"
@update:modelValue="loadBuckets"
/>
</div>
<filter-popup
:visible="showFilters"
v-model="params"
/>
</div>
<div
:class="{ 'is-loading': loading && !oneTaskUpdating}"
@ -143,7 +136,7 @@
:component-data="taskDraggableTaskComponentData"
>
<template #item="{element: task}">
<kanban-card :task="task" />
<kanban-card :task="task"/>
</template>
</draggable>
</div>
@ -213,7 +206,7 @@
<!-- This router view is used to show the task popup while keeping the kanban board itself -->
<router-view v-slot="{ Component }">
<transition name="modal">
<component :is="Component" />
<component :is="Component"/>
</transition>
</router-view>
@ -224,10 +217,10 @@
v-if="showBucketDeleteModal"
>
<template #header><span>{{ $t('list.kanban.deleteHeaderBucket') }}</span></template>
<template #text>
<p>{{ $t('list.kanban.deleteBucketText1') }}<br/>
{{ $t('list.kanban.deleteBucketText2') }}</p>
{{ $t('list.kanban.deleteBucketText2') }}</p>
</template>
</modal>
</transition>
@ -300,7 +293,6 @@ export default {
filter_comparator: [],
filter_concat: 'and',
},
showFilters: false,
}
},
created() {
@ -328,10 +320,10 @@ export default {
return {
type: 'transition',
tag: 'div',
name: !this.dragBucket ? 'move-bucket': null,
name: !this.dragBucket ? 'move-bucket' : null,
class: [
'kanban-bucket-container',
{ 'dragging-disabled': !this.canWrite },
{'dragging-disabled': !this.canWrite},
],
}
},
@ -339,10 +331,10 @@ export default {
return {
type: 'transition',
tag: 'div',
name: !this.drag ? 'move-card': null,
name: !this.drag ? 'move-card' : null,
class: [
'dropper',
{ 'dragging-disabled': !this.canWrite },
{'dragging-disabled': !this.canWrite},
],
}
},
@ -357,19 +349,15 @@ export default {
list: state => state.currentList,
}),
},
methods: {
toggleFilterPopup() {
this.showFilters = !this.showFilters
},
methods: {
loadBuckets() {
// Prevent trying to load buckets if the task popup view is active
if (this.$route.name !== 'list.kanban') {
return
}
const { listId, params } = this.loadBucketParameter
const {listId, params} = this.loadBucketParameter
this.collapsedBuckets = getCollapsedBucketState(listId)
@ -424,7 +412,7 @@ export default {
const newTask = cloneDeep(task) // cloning the task to avoid vuex store mutations
newTask.bucketId = newBucket.id,
newTask.kanbanPosition = calculateItemPosition(taskBefore !== null ? taskBefore.kanbanPosition : null, taskAfter !== null ? taskAfter.kanbanPosition : null)
newTask.kanbanPosition = calculateItemPosition(taskBefore !== null ? taskBefore.kanbanPosition : null, taskAfter !== null ? taskAfter.kanbanPosition : null)
try {
await this.$store.dispatch('tasks/update', newTask)

28
src/views/list/views/List.vue
View File

@ -41,19 +41,11 @@
v-if="!showTaskSearch"
/>
</div>
<x-button
@click.prevent.stop="showTaskFilter = !showTaskFilter"
type="secondary"
icon="filter"
>
{{ $t('filters.title') }}
</x-button>
<filter-popup
v-model="params"
@update:modelValue="loadTasks()"
/>
</div>
<filter-popup
:visible="showTaskFilter"
v-model="params"
@update:modelValue="loadTasks()"
/>
</div>
<card :padding="false" :has-content="false" class="has-overflow">
@ -126,7 +118,7 @@
/>
</div>
<Pagination
<Pagination
:total-pages="taskCollectionService.totalPages"
:current-page="currentPage"
/>
@ -135,7 +127,7 @@
<!-- This router view is used to show the task popup while keeping the kanban board itself -->
<router-view v-slot="{ Component }">
<transition name="modal">
<component :is="Component" />
<component :is="Component"/>
</transition>
</router-view>
</div>
@ -155,6 +147,7 @@ import FilterPopup from '@/components/list/partials/filter-popup.vue'
import {HAS_TASKS} from '@/store/mutation-types'
import Nothing from '@/components/misc/nothing.vue'
import Pagination from '@/components/misc/pagination.vue'
import Popup from '@/components/misc/popup'
import draggable from 'vuedraggable'
import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
@ -198,6 +191,7 @@ export default {
taskList,
],
components: {
Popup,
Nothing,
FilterPopup,
SingleTaskInList,
@ -294,11 +288,11 @@ export default {
async saveTaskPosition(e) {
this.drag = false
const task = this.tasks[e.newIndex]
const taskBefore = this.tasks[e.newIndex - 1] ?? null
const taskAfter = this.tasks[e.newIndex + 1] ?? null
const taskAfter = this.tasks[e.newIndex + 1] ?? null
const newTask = {
...task,
position: calculateItemPosition(taskBefore !== null ? taskBefore.position : null, taskAfter !== null ? taskAfter.position : null),

141
src/views/list/views/Table.vue
View File

@ -2,67 +2,63 @@
<div :class="{'is-loading': taskCollectionService.loading}" class="table-view loader-container">
<div class="filter-container">
<div class="items">
<x-button
@click.prevent.stop="() => {showActiveColumnsFilter = !showActiveColumnsFilter; showTaskFilter = false}"
icon="th"
type="secondary"
>
{{ $t('list.table.columns') }}
</x-button>
<x-button
@click.prevent.stop="() => {showTaskFilter = !showTaskFilter; showActiveColumnsFilter = false}"
icon="filter"
type="secondary"
>
{{ $t('filters.title') }}
</x-button>
<popup>
<template #trigger="{toggle}">
<x-button
@click.prevent.stop="toggle()"
icon="th"
type="secondary"
>
{{ $t('list.table.columns') }}
</x-button>
</template>
<template #content="{isOpen}">
<card class="columns-filter" :class="{'is-open': isOpen}">
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.id">#</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.done">
{{ $t('task.attributes.done') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.title">
{{ $t('task.attributes.title') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.priority">
{{ $t('task.attributes.priority') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.labels">
{{ $t('task.attributes.labels') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.assignees">
{{ $t('task.attributes.assignees') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.dueDate">
{{ $t('task.attributes.dueDate') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.startDate">
{{ $t('task.attributes.startDate') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.endDate">
{{ $t('task.attributes.endDate') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.percentDone">
{{ $t('task.attributes.percentDone') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.created">
{{ $t('task.attributes.created') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.updated">
{{ $t('task.attributes.updated') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">
{{ $t('task.attributes.createdBy') }}
</fancycheckbox>
</card>
</template>
</popup>
<filter-popup
v-model="params"
@update:modelValue="loadTasks()"
/>
</div>
<transition name="fade">
<card v-if="showActiveColumnsFilter">
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.id">#</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.done">
{{ $t('task.attributes.done') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.title">
{{ $t('task.attributes.title') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.priority">
{{ $t('task.attributes.priority') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.labels">
{{ $t('task.attributes.labels') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.assignees">
{{ $t('task.attributes.assignees') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.dueDate">
{{ $t('task.attributes.dueDate') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.startDate">
{{ $t('task.attributes.startDate') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.endDate">
{{ $t('task.attributes.endDate') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.percentDone">
{{ $t('task.attributes.percentDone') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.created">
{{ $t('task.attributes.created') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.updated">
{{ $t('task.attributes.updated') }}
</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">
{{ $t('task.attributes.createdBy') }}
</fancycheckbox>
</card>
</transition>
<filter-popup
:visible="showTaskFilter"
v-model="params"
@update:modelValue="loadTasks()"
/>
</div>
<card :padding="false" :has-content="false">
@ -189,21 +185,23 @@
</template>
<script>
import taskList from '../../../components/tasks/mixins/taskList'
import taskList from '@/components/tasks/mixins/taskList'
import Done from '@/components/misc/Done.vue'
import User from '../../../components/misc/user'
import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
import Labels from '../../../components/tasks/partials/labels'
import DateTableCell from '../../../components/tasks/partials/date-table-cell'
import Fancycheckbox from '../../../components/input/fancycheckbox'
import Sort from '../../../components/tasks/partials/sort'
import User from '@/components/misc/user'
import PriorityLabel from '@/components/tasks/partials/priorityLabel'
import Labels from '@/components/tasks/partials/labels'
import DateTableCell from '@/components/tasks/partials/date-table-cell'
import Fancycheckbox from '@/components/input/fancycheckbox'
import Sort from '@/components/tasks/partials/sort'
import {saveListView} from '@/helpers/saveListView'
import FilterPopup from '@/components/list/partials/filter-popup.vue'
import Pagination from '@/components/misc/pagination.vue'
import Popup from '@/components/misc/popup'
export default {
name: 'Table',
components: {
Popup,
Done,
FilterPopup,
Sort,
@ -219,7 +217,6 @@ export default {
],
data() {
return {
showActiveColumnsFilter: false,
activeColumns: {
id: true,
done: true,
@ -323,4 +320,12 @@ export default {
}
}
}
.columns-filter {
margin: 0;
&.is-open {
margin: 2rem 0 1rem;
}
}
</style>

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

@ -270,18 +270,16 @@
/>
<x-button
@click="setFieldActive('assignees')"
@shortkey="setFieldActive('assignees')"
type="secondary"
v-shortkey="['a']">
v-shortcut="'a'">
<span class="icon is-small"><icon icon="users"/></span>
{{ $t('task.detail.actions.assign') }}
</x-button>
<x-button
@click="setFieldActive('labels')"
@shortkey="setFieldActive('labels')"
type="secondary"
v-shortkey="['l']"
icon="tags"
v-shortcut="'l'"
>
{{ $t('task.detail.actions.label') }}
</x-button>
@ -294,10 +292,9 @@
</x-button>
<x-button
@click="setFieldActive('dueDate')"
@shortkey="setFieldActive('dueDate')"
type="secondary"
v-shortkey="['d']"
icon="calendar"
v-shortcut="'d'"
>
{{ $t('task.detail.actions.dueDate') }}
</x-button>
@ -338,19 +335,17 @@
</x-button>
<x-button
@click="setFieldActive('attachments')"
@shortkey="setFieldActive('attachments')"
type="secondary"
v-shortkey="['f']"
icon="paperclip"
v-shortcut="'f'"
>
{{ $t('task.detail.actions.attachments') }}
</x-button>
<x-button
@click="setFieldActive('relatedTasks')"
@shortkey="setFieldActive('relatedTasks')"
type="secondary"
v-shortkey="['r']"
icon="sitemap"
v-shortcut="'r'"
>
{{ $t('task.detail.actions.relatedTasks') }}
</x-button>

7
yarn.lock
View File

@ -1088,6 +1088,11 @@
resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.0-5.tgz#6251e6917198362fa56510eb256cfb6aa6d30a32"
integrity sha512-aNmBT4bOecrFsZTog1l6AJDQHPP3ocXV+WQ3Ogy8WZCqstB/ahfhH4CPu5i4N9Hw0MBKXqE+LX+NbUxcj8cVTw==
"@github/hotkey@^1.6.0":
version "1.6.0"
resolved "https://registry.yarnpkg.com/@github/hotkey/-/hotkey-1.6.0.tgz#64da82a18ac11d24f9d5d61575a0a58ba101b2ab"
integrity sha512-pm/xBWrn0yyD2GFqPUBH4ne7mdpdrnmdHxwKV0hN/jnSKj01RTPxau65SAvBvWD1Pf2VRv/OEE4H9ECORBHGdg==
"@hapi/hoek@^9.0.0":
version "9.2.1"
resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.2.1.tgz#9551142a1980503752536b5050fd99f4a7f13b17"
@ -12084,7 +12089,7 @@ vite-plugin-pwa@0.11.3:
workbox-build "^6.3.0"
workbox-window "^6.3.0"
vite-svg-loader@^3.1.0:
vite-svg-loader@3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/vite-svg-loader/-/vite-svg-loader-3.1.0.tgz#58d4ed5785583afce10059125467f8bf803e3183"
integrity sha512-dcxLJPQXC3e2/HYrKjOi0fEIzP+Wcny1PhOTsYhnZcqLIhyjAHkMeZwWl9jXC3u+QpUZy4TyLgVnBPuiok3BUA==