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

Cleanup code & make sure it has a common code style
continuous-integration/drone/push Build is passing Details

This commit is contained in:
kolaente 2020-09-05 22:35:52 +02:00
parent 4a8b15e7be
commit a8a7f70a3c
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
132 changed files with 6821 additions and 6595 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
src/App.vue
View File

@ -4,20 +4,20 @@
<!-- 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>
<nav
class="navbar main-theme is-fixed-top"
:class="{'has-background': background}"
role="navigation"
aria-label="main navigation"
class="navbar main-theme is-fixed-top"
role="navigation"
v-if="userAuthenticated && (userInfo && userInfo.type === authTypes.USER)">
<div class="navbar-brand">
<router-link :to="{name: 'home'}" class="navbar-item logo">
<img src="/images/logo-full-pride.svg" alt="Vikunja" v-if="(new Date()).getMonth() === 5"/>
<img src="/images/logo-full.svg" alt="Vikunja" v-else/>
<img alt="Vikunja" src="/images/logo-full-pride.svg" v-if="(new Date()).getMonth() === 5"/>
<img alt="Vikunja" src="/images/logo-full.svg" v-else/>
</router-link>
<a
:class="{'is-visible': !menuActive}"
@click="menuActive = true"
class="menu-show-button"
:class="{'is-visible': !menuActive}"
>
<icon icon="bars"></icon>
</a>
@ -30,9 +30,9 @@
</a>
<div class="list-title" v-if="currentList.id">
<h1
class="title"
:style="{ 'opacity': currentList.title === '' ? '0': '1' }">
{{ currentList.title === '' ? 'Loading...': currentList.title}}
:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
class="title">
{{ currentList.title === '' ? 'Loading...' : currentList.title }}
</h1>
<router-link
:to="{ name: 'list.edit', params: { id: currentList.id } }"
@ -42,16 +42,16 @@
</router-link>
</div>
<div class="navbar-end">
<div v-if="updateAvailable" class="update-notification">
<div class="update-notification" v-if="updateAvailable">
<p>There is an update for Vikunja available!</p>
<a @click="refreshApp()" class="button is-primary noshadow">Update Now</a>
</div>
<div class="user">
<img :src="userAvatar" class="avatar" alt=""/>
<img :src="userAvatar" alt="" class="avatar"/>
<div class="dropdown is-right is-active">
<div class="dropdown-trigger">
<button class="button noshadow" @click.stop="userMenuActive = !userMenuActive">
<span class="username">{{userInfo.username}}</span>
<button @click.stop="userMenuActive = !userMenuActive" class="button noshadow">
<span class="username">{{ userInfo.username }}</span>
<span class="icon is-small">
<icon icon="chevron-down"/>
</span>
@ -63,9 +63,16 @@
<router-link :to="{name: 'user.settings'}" class="dropdown-item">
Settings
</router-link>
<a :href="imprintUrl" v-if="imprintUrl" class="dropdown-item" target="_blank">Imprint</a>
<a :href="privacyPolicyUrl" v-if="privacyPolicyUrl" class="dropdown-item" target="_blank">Privacy policy</a>
<a @click="keyboardShortcutsActive = true" class="dropdown-item">Keyboard Shortcuts</a>
<a :href="imprintUrl" class="dropdown-item" target="_blank" v-if="imprintUrl">Imprint</a>
<a
:href="privacyPolicyUrl"
class="dropdown-item"
target="_blank"
v-if="privacyPolicyUrl">
Privacy policy
</a>
<a @click="keyboardShortcutsActive = true" class="dropdown-item">Keyboard
Shortcuts</a>
<a @click="logout()" class="dropdown-item">
Logout
</a>
@ -81,14 +88,14 @@
<icon icon="times"></icon>
</a>
<div
class="app-container"
:class="{'has-background': background}"
:style="{'background-image': `url(${background})`}"
class="app-container"
>
<div class="namespace-container" :class="{'is-active': menuActive}">
<div :class="{'is-active': menuActive}" class="namespace-container">
<div class="menu top-menu">
<router-link :to="{name: 'home'}" class="logo">
<img src="/images/logo-full.svg" alt="Vikunja"/>
<img alt="Vikunja" src="/images/logo-full.svg"/>
</router-link>
<ul class="menu-list">
<li>
@ -142,84 +149,87 @@
</ul>
</div>
<a @click="menuActive = false" class="collapse-menu-button" v-shortkey="['ctrl', 'e']" @shortkey="() => menuActive = !menuActive">
<a
@click="menuActive = false"
@shortkey="() => menuActive = !menuActive"
class="collapse-menu-button"
v-shortkey="['ctrl', 'e']">
Collapse Menu
</a>
<aside class="menu namespaces-lists">
<div class="spinner" :class="{ 'is-loading': namespaceService.loading}"></div>
<div :class="{ 'is-loading': namespaceService.loading}" class="spinner"></div>
<template v-for="n in namespaces">
<div :key="n.id">
<router-link
v-tooltip.right="'Settings'"
:to="{name: 'namespace.edit', params: {id: n.id} }"
class="nsettings"
v-if="n.id > 0">
v-if="n.id > 0"
v-tooltip.right="'Settings'">
<span class="icon">
<icon icon="cog"/>
</span>
</router-link>
<router-link
v-tooltip="'Add a new list in the ' + n.title + ' namespace'"
:key="n.id + 'list.create'"
:to="{ name: 'list.create', params: { id: n.id} }"
class="nsettings"
:key="n.id + 'list.create'"
v-if="n.id > 0">
v-if="n.id > 0"
v-tooltip="'Add a new list in the ' + n.title + ' namespace'">
<span class="icon">
<icon icon="plus"/>
</span>
</router-link>
<label
:for="n.id + 'checker'"
class="menu-label"
v-tooltip="n.title + ' (' + n.lists.length + ')'"
:for="n.id + 'checker'">
v-tooltip="n.title + ' (' + n.lists.length + ')'">
<span class="name">
<span
:style="{ backgroundColor: n.hexColor }"
class="color-bubble"
v-if="n.hexColor !== ''"
:style="{ backgroundColor: n.hexColor }">
v-if="n.hexColor !== ''">
</span>
{{n.title}} ({{n.lists.length}})
{{ n.title }} ({{ n.lists.length }})
</span>
</label>
</div>
<input
:key="n.id + 'checker'"
type="checkbox"
checked="checked"
:id="n.id + 'checker'"
class="checkinput"/>
<div class="more-container" :key="n.id + 'child'">
:key="n.id + 'checker'"
checked="checked"
class="checkinput"
type="checkbox"/>
<div :key="n.id + 'child'" class="more-container">
<ul class="menu-list can-be-hidden">
<template v-for="l in n.lists">
<!-- This is a bit ugly but vue wouldn't want to let me filter this - probably because the lists
are nested inside of the namespaces makes it a lot harder.-->
<li v-if="!l.isArchived" :key="l.id">
<li :key="l.id" v-if="!l.isArchived">
<router-link
:to="{ name: 'list.index', params: { listId: l.id} }"
:class="{'router-link-exact-active': currentList.id === l.id}">
:class="{'router-link-exact-active': currentList.id === l.id}"
:to="{ name: 'list.index', params: { listId: l.id} }">
<span class="name">
<span
:style="{ backgroundColor: l.hexColor }"
class="color-bubble"
v-if="l.hexColor !== ''"
:style="{ backgroundColor: l.hexColor }">
v-if="l.hexColor !== ''">
</span>
{{l.title}}
{{ l.title }}
</span>
</router-link>
</li>
</template>
</ul>
<label class="hidden-hint" :for="n.id + 'checker'">
Show hidden lists ({{n.lists.length}})...
<label :for="n.id + 'checker'" class="hidden-hint">
Show hidden lists ({{ n.lists.length }})...
</label>
</div>
</template>
</aside>
<a class="menu-bottom-link" target="_blank" href="https://vikunja.io">Powered by Vikunja</a>
<a class="menu-bottom-link" href="https://vikunja.io" target="_blank">Powered by Vikunja</a>
</div>
<div
class="app-content"
:class="[
{
'fullpage-overlay': fullpage,
@ -227,30 +237,31 @@
},
$route.name,
]"
class="app-content"
>
<a class="mobile-overlay" v-if="menuActive" @click="menuActive = false"></a>
<a @click="menuActive = false" class="mobile-overlay" v-if="menuActive"></a>
<transition name="fade">
<router-view/>
</transition>
<a class="keyboard-shortcuts-button" @click="keyboardShortcutsActive = true">
<a @click="keyboardShortcutsActive = true" class="keyboard-shortcuts-button">
<icon icon="keyboard"/>
</a>
</div>
</div>
</div>
<div
v-else-if="userAuthenticated && (userInfo && userInfo.type === authTypes.LINK_SHARE)"
class="link-share-container"
:class="{'has-background': background}"
:style="{'background-image': `url(${background})`}"
class="link-share-container"
v-else-if="userAuthenticated && (userInfo && userInfo.type === authTypes.LINK_SHARE)"
>
<div class="container has-text-centered link-share-view">
<div class="column is-10 is-offset-1">
<img src="/images/logo-full.svg" alt="Vikunja" class="logo"/>
<img alt="Vikunja" class="logo" src="/images/logo-full.svg"/>
<h1
class="title"
:style="{ 'opacity': currentList.title === '' ? '0': '1' }">
{{ currentList.title === '' ? 'Loading...': currentList.title}}
:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
class="title">
{{ currentList.title === '' ? 'Loading...' : currentList.title }}
</h1>
<div class="box has-text-left view">
<div class="logout">
@ -268,7 +279,7 @@
</div>
<div v-else>
<div class="noauth-container">
<img src="/images/logo-full.svg" alt="Vikunja"/>
<img alt="Vikunja" src="/images/logo-full.svg"/>
<div class="message is-info" v-if="motd !== ''">
<div class="message-header">
<p>Info</p>
@ -290,25 +301,25 @@
</div>
<transition name="fade">
<keyboard-shortcuts v-if="keyboardShortcutsActive" @close="keyboardShortcutsActive = false"/>
<keyboard-shortcuts @close="keyboardShortcutsActive = false" v-if="keyboardShortcutsActive"/>
</transition>
</div>
</template>
<script>
import router from './router'
import {mapState} from 'vuex'
import router from './router'
import {mapState} from 'vuex'
import NamespaceService from './services/namespace'
import authTypes from './models/authTypes'
import Rights from './models/rights.json'
import NamespaceService from './services/namespace'
import authTypes from './models/authTypes'
import Rights from './models/rights.json'
import swEvents from './ServiceWorker/events'
import Notification from './components/misc/notification'
import {CURRENT_LIST, IS_FULLPAGE, ONLINE} from './store/mutation-types'
import KeyboardShortcuts from './components/misc/keyboard-shortcuts'
import swEvents from './ServiceWorker/events'
import Notification from './components/misc/notification'
import {CURRENT_LIST, IS_FULLPAGE, ONLINE} from './store/mutation-types'
import KeyboardShortcuts from './components/misc/keyboard-shortcuts'
export default {
export default {
name: 'app',
components: {
KeyboardShortcuts,
@ -332,8 +343,8 @@
beforeMount() {
// Check if the user is offline, show a message then
this.$store.commit(ONLINE, navigator.onLine)
window.addEventListener('online', () => this.$store.commit(ONLINE, navigator.onLine));
window.addEventListener('offline', () => this.$store.commit(ONLINE, navigator.onLine));
window.addEventListener('online', () => this.$store.commit(ONLINE, navigator.onLine))
window.addEventListener('offline', () => this.$store.commit(ONLINE, navigator.onLine))
// Password reset
if (this.$route.query.userPasswordReset !== undefined) {
@ -377,10 +388,10 @@
if (navigator && navigator.serviceWorker) {
navigator.serviceWorker.addEventListener(
'controllerchange', () => {
if (this.refreshing) return;
this.refreshing = true;
window.location.reload();
}
if (this.refreshing) return
this.refreshing = true
window.location.reload()
},
)
}
@ -486,17 +497,17 @@
},
showRefreshUI(e) {
console.log('recieved refresh event', e)
this.registration = e.detail;
this.updateAvailable = true;
this.registration = e.detail
this.updateAvailable = true
},
refreshApp() {
this.updateExists = false;
this.updateExists = false
if (!this.registration || !this.registration.waiting) {
return;
return
}
// Notify the service worker to actually do the update
this.registration.waiting.postMessage('skipWaiting');
this.registration.waiting.postMessage('skipWaiting')
},
},
}
}
</script>

50
src/ServiceWorker/sw.js
View File

@ -5,69 +5,69 @@
workbox.routing.registerRoute(
// This regexp matches all files in precache-manifest
new RegExp('.+\\.(css|json|js|eot|svg|ttf|woff|woff2|png|html|txt)$'),
new workbox.strategies.StaleWhileRevalidate()
);
new workbox.strategies.StaleWhileRevalidate(),
)
// Always send api reqeusts through the network
workbox.routing.registerRoute(
new RegExp('api\\/v1\\/.*$'),
new workbox.strategies.NetworkOnly()
);
new workbox.strategies.NetworkOnly(),
)
// This code listens for the user's confirmation to update the app.
self.addEventListener('message', (e) => {
if (!e.data) {
return;
return
}
switch (e.data) {
case 'skipWaiting':
self.skipWaiting();
break;
self.skipWaiting()
break
default:
// NOOP
break;
break
}
});
})
const getBearerToken = async () => {
// we can't get a client that sent the current request, therefore we need
// to ask any controlled page for auth token
const allClients = await self.clients.matchAll();
const client = allClients.filter(client => client.type === 'window')[0];
const allClients = await self.clients.matchAll()
const client = allClients.filter(client => client.type === 'window')[0]
// if there is no page in scope, we can't get any token
// and we indicate it with null value
if(!client) {
return null;
if (!client) {
return null
}
// to communicate with a page we will use MessageChannels
// they expose pipe-like interface, where a receiver of
// a message uses one end of a port for messaging and
// we use the other end for listening
const channel = new MessageChannel();
const channel = new MessageChannel()
client.postMessage({
'action': 'getBearerToken'
}, [channel.port1]);
'action': 'getBearerToken',
}, [channel.port1])
// ports support only onmessage callback which
// is cumbersome to use, so we wrap it with Promise
return new Promise((resolve, reject) => {
channel.port2.onmessage = event => {
if (event.data.error) {
console.error('Port error', event.error);
reject(event.data.error);
console.error('Port error', event.error)
reject(event.data.error)
}
resolve(event.data.authToken);
resolve(event.data.authToken)
}
});
})
}
// Notification action
self.addEventListener('notificationclick', function(event) {
self.addEventListener('notificationclick', function (event) {
const taskId = event.notification.data.taskId
event.notification.close()
@ -88,7 +88,7 @@ self.addEventListener('notificationclick', function(event) {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`,
},
body: JSON.stringify({id: taskId, done: true})
body: JSON.stringify({id: taskId, done: true}),
})
.then(r => r.json())
.then(r => {
@ -106,7 +106,7 @@ self.addEventListener('notificationclick', function(event) {
}
})
workbox.core.clientsClaim();
workbox.core.clientsClaim()
// The precaching code provided by Workbox.
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
self.__precacheManifest = [].concat(self.__precacheManifest || [])
workbox.precaching.precacheAndRoute(self.__precacheManifest, {})

20
src/components/input/colorPicker.vue
View File

@ -1,12 +1,12 @@
<template>
<div class="color-picker-container">
<verte
v-model="color"
:menuPosition="menuPosition"
picker="square"
model="hex"
:enableAlpha="false"
:rgbSliders="true"/>
:menuPosition="menuPosition"
:rgbSliders="true"
model="hex"
picker="square"
v-model="color"/>
<a @click="reset" class="reset">
Reset Color
</a>
@ -14,10 +14,10 @@
</template>
<script>
import verte from 'verte'
import 'verte/dist/verte.css'
import verte from 'verte'
import 'verte/dist/verte.css'
export default {
export default {
name: 'colorPicker',
data() {
return {
@ -51,7 +51,7 @@
methods: {
update() {
if(this.lastChangeTimeout !== null) {
if (this.lastChangeTimeout !== null) {
clearTimeout(this.lastChangeTimeout)
}
@ -67,5 +67,5 @@
this.update()
},
},
}
}
</script>

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

@ -1,5 +1,5 @@
<template>
<div class="editor" :class="{'is-pulled-up': isEditEnabled}">
<div :class="{'is-pulled-up': isEditEnabled}" class="editor">
<div class="tabs is-right" v-if="hasPreview && isEditEnabled">
<ul>
<li :class="{'is-active': isPreviewActive}" v-if="isEditActive">
@ -11,26 +11,32 @@
</ul>
</div>
<vue-easymde v-model="text" :configs="config" @change="bubble" class="content" v-if="isEditActive" @input="handleInput"/>
<vue-easymde
:configs="config"
@change="bubble"
@input="handleInput"
class="content"
v-if="isEditActive"
v-model="text"/>
<div class="preview content" v-if="isPreviewActive" v-html="preview">
<div class="preview content" v-html="preview" v-if="isPreviewActive">
</div>
</div>
</template>
<script>
import VueEasymde from 'vue-easymde'
import EasyMDE from 'easymde'
import marked from 'marked'
import DOMPurify from 'dompurify'
import VueEasymde from 'vue-easymde'
import EasyMDE from 'easymde'
import marked from 'marked'
import DOMPurify from 'dompurify'
import AttachmentModel from '../../models/attachment'
import AttachmentService from '../../services/attachment'
import AttachmentModel from '../../models/attachment'
import AttachmentService from '../../services/attachment'
export default {
export default {
name: 'editor',
components: {
VueEasymde
VueEasymde,
},
props: {
value: {
@ -199,7 +205,7 @@
title: 'Guide',
icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19.4999 2.3999H6.4999C5.0699 2.3999 3.8999 3.5699 3.8999 4.9999V18.9999C3.8999 20.4299 5.0699 21.5999 6.4999 21.5999H19.4999C19.8299 21.5999 20.0999 21.3299 20.0999 20.9999V16.9999V2.9999C20.0999 2.6699 19.8299 2.3999 19.4999 2.3999ZM5.0999 4.9999V16.8118C5.50468 16.5513 5.98546 16.3999 6.4999 16.3999H18.8999V3.5999H6.4999C5.7299 3.5999 5.0999 4.2299 5.0999 4.9999ZM6.4999 17.5999H18.8999V20.3999H6.4999C5.7299 20.3999 5.0999 19.7699 5.0999 18.9999C5.0999 18.2299 5.7299 17.5999 6.4999 17.5999ZM8.4999 8.5999H15.4999C15.8299 8.5999 16.0999 8.3299 16.0999 7.9999C16.0999 7.6699 15.8299 7.3999 15.4999 7.3999H8.4999C8.1699 7.3999 7.8999 7.6699 7.8999 7.9999C7.8999 8.3299 8.1699 8.5999 8.4999 8.5999ZM15.4999 11.3999H8.4999C8.1699 11.3999 7.8999 11.6699 7.8999 11.9999C7.8999 12.3299 8.1699 12.5999 8.4999 12.5999H15.4999C15.8299 12.5999 16.0999 12.3299 16.0999 11.9999C16.0999 11.6699 15.8299 11.3999 15.4999 11.3999Z"/></svg>',
},
]
],
},
}
},
@ -248,7 +254,7 @@
}, timeout)
},
replaceAt(str, index, replacement) {
return str.substr(0, index) + replacement + str.substr(index + replacement.length);
return str.substr(0, index) + replacement + str.substr(index + replacement.length)
},
findNthIndex(str, n) {
@ -305,7 +311,7 @@
checkboxNum++
return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checked} class="text-checkbox-${this._uid}"/>`
},
}
},
})
this.preview = DOMPurify.sanitize(marked(this.text))
@ -367,33 +373,33 @@
this.renderPreview()
},
},
}
}
</script>
<style lang="scss">
@import '../../../node_modules/easymde/dist/easymde.min.css';
@import '../../styles/theme/variables';
@import '../../../node_modules/easymde/dist/easymde.min.css';
@import '../../styles/theme/variables';
.editor {
.editor {
.tabs ul {
margin-left: 0;
}
}
}
.CodeMirror {
.CodeMirror {
padding: 0;
border: 1px solid $editor-border-color;
&-lines pre {
margin: 0 !important;
}
}
}
.CodeMirror-scroll {
.CodeMirror-scroll {
padding: .5em;
}
}
.editor-toolbar {
.editor-toolbar {
background: #ffffff;
border-top: 1px solid $editor-border-color;
border-left: 1px solid $editor-border-color;
@ -415,14 +421,14 @@
margin-left: -3px;
}
}
}
}
pre.CodeMirror-line {
pre.CodeMirror-line {
margin-bottom: 0 !important;
}
}
.cm-header {
.cm-header {
font-family: $vikunja-font;
font-weight: 400;
}
}
</style>

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

@ -1,15 +1,16 @@
<template>
<div class="fancycheckbox" :class="{'is-disabled': disabled}">
<div :class="{'is-disabled': disabled}" class="fancycheckbox">
<input
@change="updateData"
type="checkbox"
:id="checkBoxId"
:checked="checked"
:disabled="disabled"
:id="checkBoxId"
@change="updateData"
style="display: none;"
:disabled="disabled"/>
type="checkbox"/>
<label :for="checkBoxId" class="check">
<svg width="18px" height="18px" viewBox="0 0 18 18">
<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
<svg height="18px" viewBox="0 0 18 18" width="18px">
<path
d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
<polyline points="1 9 7 14 15 4"></polyline>
</svg>
<span>
@ -20,7 +21,7 @@
</template>
<script>
export default {
export default {
name: 'fancycheckbox',
data() {
return {
@ -56,5 +57,5 @@
this.$emit('change', e.target.checked)
},
},
}
}
</script>

48
src/components/list/partials/background-settings.vue
View File

@ -1,8 +1,8 @@
<template>
<div
:class="{ 'is-loading': backgroundService.loading}"
class="card list-background-setting loader-container"
v-if="uploadBackgroundEnabled || unsplashBackgroundEnabled"
:class="{ 'is-loading': backgroundService.loading}">
v-if="uploadBackgroundEnabled || unsplashBackgroundEnabled">
<header class="card-header">
<p class="card-header-title">
Set list background
@ -11,47 +11,47 @@
<div class="card-content">
<div class="content" v-if="uploadBackgroundEnabled">
<input
type="file"
ref="backgroundUploadInput"
@change="uploadBackground"
class="is-hidden"
accept="image/*"
class="is-hidden"
ref="backgroundUploadInput"
type="file"
/>
<a
class="button is-primary"
:class="{'is-loading': backgroundUploadService.loading}"
@click="$refs.backgroundUploadInput.click()"
class="button is-primary"
>
Choose a background from your pc
</a>
</div>
<div class="content" v-if="unsplashBackgroundEnabled">
<input
type="text"
placeholder="Search for a background..."
class="input is-expanded"
v-model="backgroundSearchTerm"
@keyup="() => newBackgroundSearch()"
:class="{'is-loading': backgroundService.loading}"
@keyup="() => newBackgroundSearch()"
class="input is-expanded"
placeholder="Search for a background..."
type="text"
v-model="backgroundSearchTerm"
/>
<p class="unsplash-link"><a href="https://unsplash.com" target="_blank">Powered by Unsplash</a></p>
<div class="image-search-result">
<a
:key="im.id"
:style="{'background-image': `url(${backgroundThumbs[im.id]})`}"
@click="() => setBackground(im.id)"
class="image"
v-for="im in backgroundSearchResult"
:style="{'background-image': `url(${backgroundThumbs[im.id]})`}"
:key="im.id">
<a class="info" :href="`https://unsplash.com/@${im.info.author}`">
v-for="im in backgroundSearchResult">
<a :href="`https://unsplash.com/@${im.info.author}`" class="info">
{{ im.info.authorName }}
</a>
</a>
</div>
<a
v-if="backgroundSearchResult.length > 0"
class="button is-primary is-centered is-load-more-button is-outlined noshadow"
@click="() => searchBackgrounds(currentPage + 1)"
:disabled="backgroundService.loading"
@click="() => searchBackgrounds(currentPage + 1)"
class="button is-primary is-centered is-load-more-button is-outlined noshadow"
v-if="backgroundSearchResult.length > 0"
>
<template v-if="backgroundService.loading">
Loading...
@ -66,11 +66,11 @@
</template>
<script>
import BackgroundUnsplashService from '../../../services/backgroundUnsplash'
import BackgroundUploadService from '../../../services/backgroundUpload'
import {CURRENT_LIST} from '../../../store/mutation-types'
import BackgroundUnsplashService from '../../../services/backgroundUnsplash'
import BackgroundUploadService from '../../../services/backgroundUpload'
import {CURRENT_LIST} from '@/store/mutation-types'
export default {
export default {
name: 'background-settings',
data() {
return {
@ -88,7 +88,7 @@
listId: {
default: 0,
required: true,
}
},
},
computed: {
unsplashBackgroundEnabled() {
@ -171,5 +171,5 @@
})
},
},
}
}
</script>

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

@ -13,11 +13,11 @@
<label class="label">Due Date</label>
<div class="control">
<flat-pickr
class="input"
:config="flatPickerConfig"
@on-close="setDueDateFilter"
class="input"
placeholder="Due Date Range"
v-model="filters.dueDate"
@on-close="setDueDateFilter"
/>
</div>
</div>
@ -26,11 +26,11 @@
</template>
<script>
import Fancycheckbox from '../../input/fancycheckbox'
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
import Fancycheckbox from '../../input/fancycheckbox'
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
export default {
export default {
name: 'filters',
components: {
Fancycheckbox,
@ -66,13 +66,13 @@
props: {
value: {
required: true,
}
},
},
watch: {
value(newVal) {
this.$set(this, 'params', newVal)
this.prepareDone()
}
},
},
methods: {
change() {
@ -81,7 +81,7 @@
},
prepareDone() {
// Set filters.done based on params
if(typeof this.params.filter_by !== 'undefined') {
if (typeof this.params.filter_by !== 'undefined') {
let foundDone = false
this.params.filter_by.forEach((f, i) => {
if (f === 'done') {
@ -116,7 +116,7 @@
const parts = this.filters.dueDate.split(' to ')
if(parts.length < 2) {
if (parts.length < 2) {
return
}
@ -148,5 +148,5 @@
}
},
},
}
}
</script>

18
src/components/migrator/migration.vue
View File

@ -5,10 +5,10 @@
<template v-if="isMigrating === false && message === '' && lastMigrationDate === null">
<p>To authorize Vikunja to access your {{ name }} Account, click the button below.</p>
<a
:href="authUrl"
class="button is-primary"
:class="{'is-loading': migrationService.loading}"
:disabled="migrationService.loading">
:disabled="migrationService.loading"
:href="authUrl"
class="button is-primary">
Get Started
</a>
</template>
@ -16,7 +16,7 @@
class="migration-in-progress-container"
v-else-if="isMigrating === true && message === '' && lastMigrationDate === null">
<div class="migration-in-progress">
<img :src="`/images/migration/${identifier}.png`" :alt="name"/>
<img :alt="name" :src="`/images/migration/${identifier}.png`"/>
<div class="progress-dots">
<span></span>
<span></span>
@ -27,7 +27,7 @@
<span></span>
<span></span>
</div>
<img src="/images/logo.svg" alt="Vikunja">
<img alt="Vikunja" src="/images/logo.svg">
</div>
<p>Importing in progress, hang tight...</p>
</div>
@ -38,7 +38,7 @@
Are you sure?
</p>
<div class="buttons">
<button class="button is-primary" @click="migrate">I am sure, please start migrating now!</button>
<button @click="migrate" class="button is-primary">I am sure, please start migrating now!</button>
<router-link :to="{name: 'home'}" class="button is-danger is-outlined">Cancel</router-link>
</div>
</div>
@ -54,9 +54,9 @@
</template>
<script>
import AbstractMigrationService from '../../services/migrator/abstractMigrationService'
import AbstractMigrationService from '../../services/migrator/abstractMigrationService'
export default {
export default {
name: 'migration',
data() {
return {
@ -122,5 +122,5 @@
})
},
},
}
}
</script>

6
src/components/misc/error.vue
View File

@ -6,7 +6,7 @@
</template>
<script>
export default {
name: 'error'
}
export default {
name: 'error',
}
</script>

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

@ -1,6 +1,6 @@
<template>
<div class="modal-mask keyboard-shortcuts-modal">
<div class="modal-container" @click.self="close()">
<div @click.self="close()" class="modal-container">
<div class="modal-content">
<div class="card has-background-white has-no-shadow">
<header class="card-header">
@ -88,12 +88,12 @@
</template>
<script>
export default {
export default {
name: 'keyboard-shortcuts',
methods: {
close() {
this.$emit('close')
},
},
}
}
</script>

12
src/components/misc/legal.vue
View File

@ -1,19 +1,19 @@
<template>
<div class="legal-links">
<a :href="imprintUrl" v-if="imprintUrl" target="_blank">Imprint</a>
<a :href="imprintUrl" target="_blank" v-if="imprintUrl">Imprint</a>
<span v-if="imprintUrl && privacyPolicyUrl"> | </span>
<a :href="privacyPolicyUrl" v-if="privacyPolicyUrl" target="_blank">Privacy policy</a>
<a :href="privacyPolicyUrl" target="_blank" v-if="privacyPolicyUrl">Privacy policy</a>
</div>
</template>
<script>
import {mapState} from 'vuex'
import {mapState} from 'vuex'
export default {
export default {
name: 'legal',
computed: mapState({
imprintUrl: state => state.config.legal.imprintUrl,
privacyPolicyUrl: state => state.config.legal.privacyPolicyUrl,
})
}
}),
}
</script>

10
src/components/misc/loading.vue
View File

@ -3,17 +3,17 @@
</template>
<script>
export default {
name: 'loading'
}
export default {
name: 'loading',
}
</script>
<style scoped>
.loader-container {
.loader-container {
height: 100%;
min-height: 200px;
width: 100%;
min-width: 600px;
max-width: 100vw;
}
}
</style>

22
src/components/misc/notification.vue
View File

@ -3,9 +3,9 @@
<template slot="body" slot-scope="props">
<div :class="['vue-notification-template', 'vue-notification', props.item.type]" @click="close(props)">
<div
v-if="props.item.title"
class="notification-title"
v-html="props.item.title"
v-if="props.item.title"
>
</div>
<div
@ -13,11 +13,13 @@
v-html="props.item.text"
>
</div>
<div class="buttons is-right" v-if="props.item.data && props.item.data.actions && props.item.data.actions.length > 0">
<div
class="buttons is-right"
v-if="props.item.data && props.item.data.actions && props.item.data.actions.length > 0">
<button
class="button noshadow is-small"
:key="'action_'+i"
@click="action.callback"
v-for="(action, i) in props.item.data.actions" :key="'action_'+i">
class="button noshadow is-small" v-for="(action, i) in props.item.data.actions">
{{ action.title }}
</button>
</div>
@ -27,23 +29,23 @@
</template>
<script>
export default {
export default {
name: 'notification',
methods: {
close(props) {
props.close()
},
},
}
}
</script>
<style scoped>
.vue-notification {
.vue-notification {
z-index: 9999;
}
}
.buttons {
.buttons {
margin-top: .5em;
}
}
</style>

20
src/components/misc/user.vue
View File

@ -1,12 +1,18 @@
<template>
<div class="user" :class="{'is-inline': isInline}">
<img :src="user.getAvatarUrl(avatarSize)" class="avatar" alt="" v-tooltip="user.username" :width="avatarSize" :height="avatarSize"/>
<span v-if="showUsername" class="username">{{ user.username }}</span>
<div :class="{'is-inline': isInline}" class="user">
<img
:height="avatarSize"
:src="user.getAvatarUrl(avatarSize)"
:width="avatarSize"
alt=""
class="avatar"
v-tooltip="user.username"/>
<span class="username" v-if="showUsername">{{ user.username }}</span>
</div>
</template>
<script>
export default {
export default {
name: 'user',
props: {
user: {
@ -29,11 +35,11 @@
default: false,
},
},
}
}
</script>
<style lang="scss" scoped>
.user {
.user {
margin: .5em;
&.is-inline {
@ -48,5 +54,5 @@
vertical-align: middle;
margin-right: .5em;
}
}
}
</style>

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

@ -10,8 +10,8 @@
<slot name="text"></slot>
</div>
<div class="actions">
<button class="button is-danger is-inverted noshadow" @click="$emit('close')">Cancel</button>
<button class="button is-success noshadow" @click="$emit('submit')">Do it!</button>
<button @click="$emit('close')" class="button is-danger is-inverted noshadow">Cancel</button>
<button @click="$emit('submit')" class="button is-success noshadow">Do it!</button>
</div>
</div>
</div>
@ -20,7 +20,7 @@
</template>
<script>
export default {
export default {
name: 'modal',
mounted: function () {
document.addEventListener('keydown', (e) => {
@ -29,6 +29,6 @@
this.$emit('close')
}
})
}
}
},
}
</script>

32
src/components/namespace/namespace-search.vue
View File

@ -1,33 +1,33 @@
<template>
<multiselect
v-model="namespace"
:options="namespaces"
:multiple="false"
:searchable="true"
:loading="namespaceService.loading"
:internal-search="true"
:loading="namespaceService.loading"
:multiple="false"
:options="namespaces"
:searchable="true"
:showNoOptions="false"
@search-change="findNamespaces"
@select="select"
placeholder="Search for a namespace..."
:showNoOptions="false"
label="title"
track-by="id">
placeholder="Search for a namespace..."
track-by="id"
v-model="namespace">
<template slot="clear" slot-scope="props">
<div
class="multiselect__clear" v-if="namespace.id !== 0"
@mousedown.prevent.stop="clearAll(props.search)"></div>
@mousedown.prevent.stop="clearAll(props.search)" class="multiselect__clear"
v-if="namespace.id !== 0"></div>
</template>
<span slot="noResult">No namespace found. Consider changing the search query.</span>
</multiselect>
</template>
<script>
import NamespaceService from '../../services/namespace'
import NamespaceModel from '../../models/namespace'
import LoadingComponent from '../misc/loading'
import ErrorComponent from '../misc/error'
import NamespaceService from '../../services/namespace'
import NamespaceModel from '../../models/namespace'
import LoadingComponent from '../misc/loading'
import ErrorComponent from '../misc/error'
export default {
export default {
name: 'namespace-search',
data() {
return {
@ -69,5 +69,5 @@
this.$emit('selected', namespace)
},
},
}
}
</script>

31
src/components/sharing/linkSharing.vue
View File

@ -21,7 +21,7 @@
</div>
</div>
<div class="control">
<button type="submit" class="button is-success">
<button class="button is-success" type="submit">
Share
</button>
</div>
@ -36,14 +36,14 @@
<th>Delete</th>
</tr>
<template v-if="linkShares.length > 0">
<tr v-for="s in linkShares" :key="s.id">
<tr :key="s.id" v-for="s in linkShares">
<td>
<div class="field has-addons">
<div class="control">
<input class="input" type="text" :value="getShareLink(s.hash)" readonly/>
<input :value="getShareLink(s.hash)" class="input" readonly type="text"/>
</div>
<div class="control">
<a class="button is-success noshadow" @click="copy(getShareLink(s.hash))">
<a @click="copy(getShareLink(s.hash))" class="button is-success noshadow">
<span class="icon">
<icon icon="paste"/>
</span>
@ -75,7 +75,8 @@
</template>
</td>
<td class="actions">
<button @click="() => {linkIdToDelete = s.id; showDeleteModal = true}" class="button is-danger icon-only">
<button @click="() => {linkIdToDelete = s.id; showDeleteModal = true}"
class="button is-danger icon-only">
<span class="icon">
<icon icon="trash-alt"/>
</span>
@ -88,9 +89,9 @@
</div>
<modal
v-if="showDeleteModal"
@close="showDeleteModal = false"
@submit="remove()">
@submit="remove()"
v-if="showDeleteModal">
<span slot="header">Remove a link share</span>
<p slot="text">Are you sure you want to remove this link share?<br/>
It will no longer be possible to access this list with this link share.<br/>
@ -100,15 +101,15 @@
</template>
<script>
import rights from '../../models/rights'
import rights from '../../models/rights'
import LinkShareService from '../../services/linkShare'
import LinkShareModel from '../../models/linkShare'
import LinkShareService from '../../services/linkShare'
import LinkShareModel from '../../models/linkShare'
import copy from 'copy-to-clipboard'
import {mapState} from 'vuex'
import copy from 'copy-to-clipboard'
import {mapState} from 'vuex'
export default {
export default {
name: 'linkSharing',
props: {
listId: {
@ -137,7 +138,7 @@
watch: {
listId: () => { // watch it
this.load()
}
},
},
computed: mapState({
frontendUrl: state => state.config.frontendUrl,
@ -190,5 +191,5 @@
return this.frontendUrl + 'share/' + hash + '/auth'
},
},
}
}
</script>

103
src/components/sharing/userTeam.vue
View File

@ -2,7 +2,7 @@
<div class="card is-fullwidth">
<header class="card-header">
<p class="card-header-title">
Shared with these {{shareType}}s
Shared with these {{ shareType }}s
</p>
</header>
<div class="card-content content sharables-list">
@ -10,25 +10,30 @@
<div class="field is-grouped">
<p class="control is-expanded" v-bind:class="{ 'is-loading': searchService.loading}">
<multiselect
v-model="sharable"
:options="found"
:multiple="false"
:searchable="true"
:loading="searchService.loading"
:internal-search="true"
:label="searchLabel"
:loading="searchService.loading"
:multiple="false"
:options="found"
:searchable="true"
:showNoOptions="false"
@search-change="find"
placeholder="Type to search..."
:showNoOptions="false"
:label="searchLabel"
track-by="id">
track-by="id"
v-model="sharable">
<template slot="clear" slot-scope="props">
<div class="multiselect__clear" v-if="sharable.id !== 0" @mousedown.prevent.stop="clearAll(props.search)"></div>
<div
@mousedown.prevent.stop="clearAll(props.search)"
class="multiselect__clear"
v-if="sharable.id !== 0"></div>
</template>
<span slot="noResult">Oops! No {{shareType}} found. Consider changing the search query.</span>
<span slot="noResult">
Oops! No {{ shareType }} found. Consider changing the search query.
</span>
</multiselect>
</p>
<p class="control">
<button type="submit" class="button is-success">
<button class="button is-success" type="submit">
<span class="icon is-small">
<icon icon="plus"/>
</span>
@ -39,9 +44,9 @@
</form>
<table class="table is-striped is-hoverable is-fullwidth">
<tbody>
<tr v-for="s in sharables" :key="s.id">
<tr :key="s.id" v-for="s in sharables">
<template v-if="shareType === 'user'">
<td>{{s.username}}</td>
<td>{{ s.username }}</td>
<td>
<template v-if="s.id === userInfo.id">
<b class="is-success">You</b>
@ -51,7 +56,7 @@
<template v-if="shareType === 'team'">
<td>
<router-link :to="{name: 'teams.edit', params: {id: s.id}}">
{{s.name}}
{{ s.name }}
</router-link>
</td>
</template>
@ -77,13 +82,16 @@
</td>
<td class="actions" v-if="userIsAdmin">
<div class="select">
<select @change="toggleType(s)" v-model="selectedRight[s.id]" class="button buttonright">
<option :value="rights.READ" :selected="s.right === rights.READ">Read only</option>
<option :value="rights.READ_WRITE" :selected="s.right === rights.READ_WRITE">Read & write</option>
<option :value="rights.ADMIN" :selected="s.right === rights.ADMIN">Admin</option>
<select @change="toggleType(s)" class="button buttonright" v-model="selectedRight[s.id]">
<option :selected="s.right === rights.READ" :value="rights.READ">Read only</option>
<option :selected="s.right === rights.READ_WRITE" :value="rights.READ_WRITE">Read &
write
</option>
<option :selected="s.right === rights.ADMIN" :value="rights.ADMIN">Admin</option>
</select>
</div>
<button @click="() => {sharable = s; showDeleteModal = true}" class="button is-danger icon-only">
<button @click="() => {sharable = s; showDeleteModal = true}"
class="button is-danger icon-only">
<span class="icon is-small">
<icon icon="trash-alt"/>
</span>
@ -95,38 +103,38 @@
</div>
<modal
v-if="showDeleteModal"
@close="showDeleteModal = false"
@submit="deleteSharable()">
<span slot="header">Remove a {{shareType}} from the {{typeString}}</span>
<p slot="text">Are you sure you want to remove this {{shareType}} from the {{typeString}}?<br/>
@submit="deleteSharable()"
v-if="showDeleteModal">
<span slot="header">Remove a {{ shareType }} from the {{ typeString }}</span>
<p slot="text">Are you sure you want to remove this {{ shareType }} from the {{ typeString }}?<br/>
<b>This CANNOT BE UNDONE!</b></p>
</modal>
</div>
</template>
<script>
import {mapState} from 'vuex'
import {mapState} from 'vuex'
import UserNamespaceService from '../../services/userNamespace'
import UserNamespaceModel from '../../models/userNamespace'
import UserListModel from '../../models/userList'
import UserListService from '../../services/userList'
import UserService from '../../services/user'
import UserModel from '../../models/user'
import UserNamespaceService from '../../services/userNamespace'
import UserNamespaceModel from '../../models/userNamespace'
import UserListModel from '../../models/userList'
import UserListService from '../../services/userList'
import UserService from '../../services/user'
import UserModel from '../../models/user'
import TeamNamespaceService from '../../services/teamNamespace'
import TeamNamespaceModel from '../../models/teamNamespace'
import TeamListModel from '../../models/teamList'
import TeamListService from '../../services/teamList'
import TeamService from '../../services/team'
import TeamModel from '../../models/team'
import TeamNamespaceService from '../../services/teamNamespace'
import TeamNamespaceModel from '../../models/teamNamespace'
import TeamListModel from '../../models/teamList'
import TeamListService from '../../services/teamList'
import TeamService from '../../services/team'
import TeamModel from '../../models/team'
import rights from '../../models/rights'
import LoadingComponent from '../misc/loading'
import ErrorComponent from '../misc/error'
import rights from '../../models/rights'
import LoadingComponent from '../misc/loading'
import ErrorComponent from '../misc/error'
export default {
export default {
name: 'userTeamShare',
props: {
type: {
@ -172,7 +180,7 @@
}),
},
computed: mapState({
userInfo: state => state.auth.info
userInfo: state => state.auth.info,
}),
created() {
@ -192,8 +200,7 @@
} else {
throw new Error('Unknown type: ' + this.type)
}
}
else if (this.shareType === 'team') {
} else if (this.shareType === 'team') {
this.searchService = new TeamService()
this.sharable = new TeamModel()
this.searchLabel = 'name'
@ -251,7 +258,7 @@
})
},
add(admin) {
if(admin === null) {
if (admin === null) {
admin = false
}
this.stuffModel.right = rights.READ
@ -307,7 +314,7 @@
})
},
find(query) {
if(query === '') {
if (query === '') {
this.$set(this, 'found', [])
return
}
@ -320,9 +327,9 @@
this.error(e, this)
})
},
clearAll () {
clearAll() {
this.$set(this, 'found', [])
},
},
}
}
</script>

106
src/components/tasks/edit-task.vue
View File

@ -4,45 +4,45 @@
<label class="label" for="tasktext">Task Text</label>
<div class="control">
<input
v-focus
:class="{ 'disabled': taskService.loading}"
:disabled="taskService.loading"
@change="editTaskSubmit()"
class="input"
type="text"
id="tasktext"
placeholder="The task text is here..."
v-model="taskEditTask.title"
@change="editTaskSubmit()"/>
type="text"
v-focus
v-model="taskEditTask.title"/>
</div>
</div>
<div class="field">
<label class="label" for="taskdescription">Description</label>
<div class="control">
<editor
placeholder="The tasks description goes here..."
id="taskdescription"
v-model="taskEditTask.description"
:preview-is-default="false"
id="taskdescription"
placeholder="The tasks description goes here..."
v-if="editorActive"
v-model="taskEditTask.description"
/>
</div>
</div>
<b>Reminder Dates</b>
<reminders v-model="taskEditTask.reminderDates" @change="editTaskSubmit()"/>
<reminders @change="editTaskSubmit()" v-model="taskEditTask.reminderDates"/>
<div class="field">
<label class="label" for="taskduedate">Due Date</label>
<div class="control">
<flat-pickr
:class="{ 'disabled': taskService.loading}"
class="input"
:disabled="taskService.loading"
v-model="taskEditTask.dueDate"
:config="flatPickerConfig"
:disabled="taskService.loading"
@on-close="editTaskSubmit()"
class="input"
id="taskduedate"
placeholder="The tasks due date is here...">
placeholder="The tasks due date is here..."
v-model="taskEditTask.dueDate">
</flat-pickr>
</div>
</div>
@ -53,25 +53,25 @@
<div class="column">
<flat-pickr
:class="{ 'disabled': taskService.loading}"
class="input"
:disabled="taskService.loading"
v-model="taskEditTask.startDate"
:config="flatPickerConfig"
:disabled="taskService.loading"
@on-close="editTaskSubmit()"
class="input"
id="taskduedate"
placeholder="Start date">
placeholder="Start date"
v-model="taskEditTask.startDate">
</flat-pickr>
</div>
<div class="column">
<flat-pickr
:class="{ 'disabled': taskService.loading}"
class="input"
:disabled="taskService.loading"
v-model="taskEditTask.endDate"
:config="flatPickerConfig"
:disabled="taskService.loading"
@on-close="editTaskSubmit()"
class="input"
id="taskduedate"
placeholder="End date">
placeholder="End date"
v-model="taskEditTask.endDate">
</flat-pickr>
</div>
</div>
@ -79,20 +79,20 @@
<div class="field">
<label class="label" for="">Repeat after</label>
<repeat-after v-model="taskEditTask.repeatAfter" @change="editTaskSubmit()"/>
<repeat-after @change="editTaskSubmit()" v-model="taskEditTask.repeatAfter"/>
</div>
<div class="field">
<label class="label" for="">Priority</label>
<div class="control priority-select">
<priority-select v-model="taskEditTask.priority" @change="editTaskSubmit()"/>
<priority-select @change="editTaskSubmit()" v-model="taskEditTask.priority"/>
</div>
</div>
<div class="field">
<label class="label">Percent Done</label>
<div class="control">
<percent-done-select v-model="taskEditTask.percentDone" @change="editTaskSubmit()"/>
<percent-done-select @change="editTaskSubmit()" v-model="taskEditTask.percentDone"/>
</div>
</div>
@ -106,8 +106,8 @@
<div class="field">
<label class="label" for="">Assignees</label>
<ul class="assingees">
<li v-for="(a, index) in taskEditTask.assignees" :key="a.id">
{{a.username}}
<li :key="a.id" v-for="(a, index) in taskEditTask.assignees">
{{ a.username }}
<a @click="deleteAssigneeByIndex(index)">
<icon icon="times"/>
</a>
@ -118,9 +118,9 @@
<div class="field has-addons">
<div class="control is-expanded">
<edit-assignees
:task-id="taskEditTask.id"
:initial-assignees="taskEditTask.assignees"
:list-id="taskEditTask.listId"
:initial-assignees="taskEditTask.assignees"/>
:task-id="taskEditTask.id"/>
</div>
</div>
@ -132,13 +132,13 @@
</div>
<related-tasks
class="is-narrow"
:task-id="task.id"
:list-id="task.listId"
:initial-related-tasks="task.relatedTasks"
:list-id="task.listId"
:task-id="task.id"
class="is-narrow"
/>
<button type="submit" class="button is-success is-fullwidth" :class="{ 'is-loading': taskService.loading}">
<button :class="{ 'is-loading': taskService.loading}" class="button is-success is-fullwidth" type="submit">
Save
</button>
@ -146,25 +146,25 @@
</template>
<script>
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
import ListService from '../../services/list'
import TaskService from '../../services/task'
import TaskModel from '../../models/task'
import priorities from '../../models/priorities'
import PrioritySelect from './partials/prioritySelect'
import PercentDoneSelect from './partials/percentDoneSelect'
import EditLabels from './partials/editLabels'
import EditAssignees from './partials/editAssignees'
import RelatedTasks from './partials/relatedTasks'
import RepeatAfter from './partials/repeatAfter'
import Reminders from './partials/reminders'
import ColorPicker from '../input/colorPicker'
import LoadingComponent from '../misc/loading'
import ErrorComponent from '../misc/error'
import ListService from '../../services/list'
import TaskService from '../../services/task'
import TaskModel from '../../models/task'
import priorities from '../../models/priorities'
import PrioritySelect from './partials/prioritySelect'
import PercentDoneSelect from './partials/percentDoneSelect'
import EditLabels from './partials/editLabels'
import EditAssignees from './partials/editAssignees'
import RelatedTasks from './partials/relatedTasks'
import RepeatAfter from './partials/repeatAfter'
import Reminders from './partials/reminders'
import ColorPicker from '../input/colorPicker'
import LoadingComponent from '../misc/loading'
import ErrorComponent from '../misc/error'
export default {
export default {
name: 'edit-task',
data() {
return {
@ -209,13 +209,13 @@
task: {
type: TaskModel,
required: true,
}
},
},
watch: {
task() {
this.taskEditTask = this.task
this.initTaskFields()
}
},
},
created() {
this.listService = new ListService()
@ -248,11 +248,11 @@
})
},
},
}
}
</script>
<style scoped>
form {
form {
margin-bottom: 1em;
}
}
</style>

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

@ -2,21 +2,22 @@
<div class="gantt-chart box">
<div class="dates">
<template v-for="(y, yk) in days">
<div class="months" :key="yk + 'year'">
<div class="month" v-for="(m, mk) in days[yk]" :key="mk + 'month'">
{{new Date((new Date(yk)).setMonth(mk)).toLocaleString('en-us', { month: 'long' })}}, {{(new Date(yk)).getFullYear()}}
<div :key="yk + 'year'" class="months">
<div :key="mk + 'month'" class="month" v-for="(m, mk) in days[yk]">
{{ new Date((new Date(yk)).setMonth(mk)).toLocaleString('en-us', {month: 'long'}) }},
{{ (new Date(yk)).getFullYear() }}
<div class="days">
<div
class="day"
v-for="(d, dk) in days[yk][mk]"
:class="{'today': d.toDateString() === now.toDateString()}"
:key="dk + 'day'"
:style="{'width': dayWidth + 'px'}"
:class="{'today': d.toDateString() === now.toDateString()}">
class="day"
v-for="(d, dk) in days[yk][mk]">
<span class="theday" v-if="dayWidth > 25">
{{d.getDate()}}
{{ d.getDate() }}
</span>
<span class="weekday" v-if="dayWidth > 25">
{{d.toLocaleString('en-us', { weekday: 'short' })}}
{{ d.toLocaleString('en-us', {weekday: 'short'}) }}
</span>
</div>
</div>
@ -24,38 +25,42 @@
</div>
</template>
</div>
<div class="tasks" :style="{'width': fullWidth + 'px'}">
<div class="row" v-for="(t, k) in theTasks" :key="t.id" :style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}">
<div :style="{'width': fullWidth + 'px'}" class="tasks">
<div
:key="t.id"
:style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}"
class="row"
v-for="(t, k) in theTasks">
<VueDragResize
class="task"
:class="{
'done': t.done,
'is-current-edit': taskToEdit !== null && taskToEdit.id === t.id,
'has-light-text': !colorIsDark(t.hexColor),
'has-dark-text': colorIsDark(t.hexColor)
}"
:style="{'border-color': t.hexColor, 'background-color': t.hexColor}"
:isActive="canWrite"
:x="t.offsetDays * dayWidth - 6"
:y="0"
:w="t.durationDays * dayWidth"
:h="31"
:minw="dayWidth"
:snapToGrid="true"
:gridX="dayWidth"
:sticks="['mr', 'ml']"
axis="x"
:h="31"
:isActive="canWrite"
:minw="dayWidth"
:parentLimitation="true"
:parentW="fullWidth"
@resizestop="resizeTask"
@dragstop="resizeTask"
:snapToGrid="true"
:sticks="['mr', 'ml']"
:style="{'border-color': t.hexColor, 'background-color': t.hexColor}"
:w="t.durationDays * dayWidth"
:x="t.offsetDays * dayWidth - 6"
:y="0"
@clicked="setTaskDragged(t)"
@dragstop="resizeTask"
@resizestop="resizeTask"
axis="x"
class="task"
>
<span :class="{
'has-high-priority': t.priority >= priorities.HIGH,
'has-not-so-high-priority': t.priority === priorities.HIGH,
'has-super-high-priority': t.priority === priorities.DO_NOW
}">{{t.title}}</span>
}">{{ t.title }}</span>
<priority-label :priority="t.priority"/>
<!-- using the key here forces vue to use the updated version model and not the response returned by the api -->
<a @click="editTask(theTasks[k])" class="edit-toggle">
@ -64,26 +69,30 @@
</VueDragResize>
</div>
<template v-if="showTaskswithoutDates">
<div class="row" v-for="(t, k) in tasksWithoutDates" :key="t.id" :style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}">
<div
:key="t.id"
:style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}"
class="row"
v-for="(t, k) in tasksWithoutDates">
<VueDragResize
class="task nodate"
:isActive="canWrite"
:x="dayOffsetUntilToday * dayWidth - 6"
:y="0"
:h="31"
:minw="dayWidth"
:snapToGrid="true"
:gridX="dayWidth"
:sticks="['mr', 'ml']"
axis="x"
:h="31"
:isActive="canWrite"
:minw="dayWidth"
:parentLimitation="true"
:parentW="fullWidth"
@resizestop="resizeTask"
@dragstop="resizeTask"
:snapToGrid="true"
:sticks="['mr', 'ml']"
:x="dayOffsetUntilToday * dayWidth - 6"
:y="0"
@clicked="setTaskDragged(t)"
@dragstop="resizeTask"
@resizestop="resizeTask"
axis="x"
class="task nodate"
v-tooltip="'This task has no dates set.'"
>
<span>{{t.title}}</span>
<span>{{ t.title }}</span>
</VueDragResize>
</div>
</template>
@ -91,16 +100,16 @@
<form @submit.prevent="addNewTask()" class="add-new-task" v-if="canWrite">
<transition name="width">
<input
type="text"
v-model="newTaskTitle"
class="input"
v-if="newTaskFieldActive"
ref="newTaskTitleField"
@keyup.esc="newTaskFieldActive = false"
@blur="hideCrateNewTask"
@keyup.esc="newTaskFieldActive = false"
class="input"
ref="newTaskTitleField"
type="text"
v-if="newTaskFieldActive"
v-model="newTaskTitle"
/>
</transition>
<button class="button is-primary noshadow" @click="showCreateNewTask">
<button @click="showCreateNewTask" class="button is-primary noshadow">
<span class="icon is-small">
<icon icon="plus"/>
</span>
@ -113,7 +122,7 @@
<p class="card-header-title">
Edit Task
</p>
<a class="card-header-icon" @click="() => {isTaskEdit = false; taskToEdit = null}">
<a @click="() => {isTaskEdit = false; taskToEdit = null}" class="card-header-icon">
<span class="icon">
<icon icon="times"/>
</span>
@ -130,18 +139,18 @@
</template>
<script>
import VueDragResize from 'vue-drag-resize'
import EditTask from './edit-task'
import VueDragResize from 'vue-drag-resize'
import EditTask from './edit-task'
import TaskService from '../../services/task'
import TaskModel from '../../models/task'
import priorities from '../../models/priorities'
import PriorityLabel from './partials/priorityLabel'
import TaskCollectionService from '../../services/taskCollection'
import {mapState} from 'vuex'
import Rights from '../../models/rights.json'
import TaskService from '../../services/task'
import TaskModel from '../../models/task'
import priorities from '../../models/priorities'
import PriorityLabel from './partials/priorityLabel'
import TaskCollectionService from '../../services/taskCollection'
import {mapState} from 'vuex'
import Rights from '../../models/rights.json'
export default {
export default {
name: 'GanttChart',
components: {
PriorityLabel,
@ -158,16 +167,16 @@
default: false,
},
dateFrom: {
default: new Date((new Date()).setDate((new Date()).getDate() - 15))
default: new Date((new Date()).setDate((new Date()).getDate() - 15)),
},
dateTo: {
default: new Date((new Date()).setDate((new Date()).getDate() + 30))
default: new Date((new Date()).setDate((new Date()).getDate() + 30)),
},
// The width of a day in pixels, used to calculate all sorts of things.
dayWidth: {
type: Number,
default: 35,
}
},
},
data() {
return {
@ -216,11 +225,11 @@
this.startDate = new Date(this.dateFrom)
this.endDate = new Date(this.dateTo)
this.dayOffsetUntilToday = Math.floor((this.now - this.startDate) / 1000 / 60 / 60 / 24) +1
this.dayOffsetUntilToday = Math.floor((this.now - this.startDate) / 1000 / 60 / 60 / 24) + 1
},
prepareGanttDays() {
// Layout: years => [months => [days]]
let years = {};
let years = {}
for (let d = this.startDate; d <= this.endDate; d.setDate(d.getDate() + 1)) {
let date = new Date(d)
if (years[date.getFullYear() + ''] === undefined) {
@ -243,7 +252,7 @@
const getAllTasks = (page = 1) => {
return this.taskCollectionService.getAll({listId: this.listId}, {}, page)
.then(tasks => {
if(page < this.taskCollectionService.totalPages) {
if (page < this.taskCollectionService.totalPages) {
return getAllTasks(page + 1)
.then(nextTasks => {
return tasks.concat(nextTasks)
@ -261,7 +270,7 @@
.then(tasks => {
this.theTasks = tasks
.filter(t => {
if(t.startDate === null && !t.done) {
if (t.startDate === null && !t.done) {
this.tasksWithoutDates.push(t)
}
return t.startDate >= this.startDate && t.endDate <= this.endDate
@ -269,7 +278,7 @@
.map(t => {
return this.addGantAttributes(t)
})
.sort(function(a,b) {
.sort(function (a, b) {
if (a.startDate < b.startDate)
return -1
if (a.startDate > b.startDate)
@ -295,7 +304,7 @@
// Timeout to definitly catch if the user clicked on taskedit
setTimeout(() => {
if(this.isTaskEdit) {
if (this.isTaskEdit) {
return
}
@ -327,7 +336,7 @@
this.taskService.update(this.taskDragged)
.then(r => {
// If the task didn't have dates before, we'll update the list
if(didntHaveDates) {
if (didntHaveDates) {
for (const t in this.tasksWithoutDates) {
if (this.tasksWithoutDates[t].id === r.id) {
this.tasksWithoutDates.splice(t, 1)
@ -354,7 +363,7 @@
this.isTaskEdit = true
},
showCreateNewTask() {
if(!this.newTaskFieldActive) {
if (!this.newTaskFieldActive) {
// Timeout to not send the form if the field isn't even shown
setTimeout(() => {
this.newTaskFieldActive = true
@ -363,7 +372,7 @@
}
},
hideCrateNewTask() {
if(this.newTaskTitle === '') {
if (this.newTaskTitle === '') {
this.$nextTick(() => this.newTaskFieldActive = false)
}
},
@ -383,5 +392,5 @@
})
},
},
}
}
</script>

2
src/components/tasks/mixins/attachmentUpload.js
View File

@ -28,5 +28,5 @@ export default {
this.error(e, this)
})
},
}
},
}

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

@ -137,7 +137,7 @@ export default {
this.$router.push({
name: 'list.list',
query: {search: this.searchTerm}
query: {search: this.searchTerm},
})
},
hideSearchBar() {
@ -154,12 +154,12 @@ export default {
return {
name: 'list.' + type,
params: {
type: type
type: type,
},
query: {
page: page,
},
}
},
}
},
}

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

@ -6,17 +6,30 @@
</span>
Attachments
<a
v-if="editEnabled"
class="button is-primary is-outlined is-small noshadow"
:disabled="attachmentService.loading"
@click="$refs.files.click()"
:disabled="attachmentService.loading">
class="button is-primary is-outlined is-small noshadow"
v-if="editEnabled">
<span class="icon is-small"><icon icon="cloud-upload-alt"/></span>
Upload attachment
</a>
</h3>
<input type="file" id="files" ref="files" multiple @change="uploadNewAttachment()" :disabled="attachmentService.loading" v-if="editEnabled"/>
<progress v-if="attachmentService.uploadProgress > 0" class="progress is-primary" :value="attachmentService.uploadProgress" max="100">{{ attachmentService.uploadProgress }}%</progress>
<input
:disabled="attachmentService.loading"
@change="uploadNewAttachment()"
id="files"
multiple
ref="files"
type="file"
v-if="editEnabled"/>
<progress
:value="attachmentService.uploadProgress"
class="progress is-primary"
max="100"
v-if="attachmentService.uploadProgress > 0">
{{ attachmentService.uploadProgress }}%
</progress>
<table>
<tr>
@ -27,22 +40,30 @@
<th>Created By</th>
<th>Action</th>
</tr>
<tr class="attachment" v-for="a in attachments" :key="a.id">
<tr :key="a.id" class="attachment" v-for="a in attachments">
<td>
{{ a.file.name }}
</td>
<td>{{ a.file.getHumanSize() }}</td>
<td>{{ a.file.mime }}</td>
<td v-tooltip="formatDate(a.created)">{{ formatDateSince(a.created) }}</td>
<td><user :user="a.createdBy" :avatar-size="30"/></td>
<td>
<user :avatar-size="30" :user="a.createdBy"/>
</td>
<td>
<div class="buttons has-addons">
<a class="button is-primary noshadow" @click="downloadAttachment(a)" v-tooltip="'Download this attachment'">
<a
@click="downloadAttachment(a)"
class="button is-primary noshadow"
v-tooltip="'Download this attachment'">
<span class="icon">
<icon icon="cloud-download-alt"/>
</span>
</a>
<a v-if="editEnabled" class="button is-danger noshadow" v-tooltip="'Delete this attachment'" @click="() => {attachmentToDelete = a; showDeleteModal = true}">
<a
@click="() => {attachmentToDelete = a; showDeleteModal = true}"
class="button is-danger noshadow" v-if="editEnabled"
v-tooltip="'Delete this attachment'">
<span class="icon">
<icon icon="trash-alt"/>
</span>
@ -53,7 +74,7 @@
</table>
<!-- Dropzone -->
<div class="dropzone" :class="{ 'hidden': !showDropzone }" v-if="editEnabled">
<div :class="{ 'hidden': !showDropzone }" class="dropzone" v-if="editEnabled">
<div class="drop-hint">
<div class="icon">
<icon icon="cloud-upload-alt"/>
@ -66,8 +87,8 @@
<!-- Delete modal -->
<modal
v-if="showDeleteModal"
@close="showDeleteModal = false"
v-if="showDeleteModal"
v-on:submit="deleteAttachment()">
<span slot="header">Delete attachment</span>
<p slot="text">Are you sure you want to delete the attachment {{ attachmentToDelete.file.name }}?<br/>
@ -77,12 +98,12 @@
</template>
<script>
import AttachmentService from '../../../services/attachment'
import AttachmentModel from '../../../models/attachment'
import User from '../../misc/user'
import {mapState} from 'vuex'
import AttachmentService from '../../../services/attachment'
import AttachmentModel from '../../../models/attachment'
import User from '../../misc/user'
import {mapState} from 'vuex'
export default {
export default {
name: 'attachments',
components: {
User,
@ -112,26 +133,26 @@
this.attachmentService = new AttachmentService()
},
computed: mapState({
attachments: state => state.attachments.attachments
attachments: state => state.attachments.attachments,
}),
mounted() {
document.addEventListener('dragenter', e => {
e.stopPropagation()
e.preventDefault()
this.showDropzone = true
});
})
window.addEventListener('dragleave', e => {
e.stopPropagation()
e.preventDefault()
this.showDropzone = false
});
})
document.addEventListener('dragover', e => {
e.stopPropagation()
e.preventDefault()
this.showDropzone = true
});
})
document.addEventListener('drop', e => {
e.stopPropagation()
@ -147,7 +168,7 @@
this.attachmentService.download(attachment)
},
uploadNewAttachment() {
if(this.$refs.files.files.length === 0) {
if (this.$refs.files.files.length === 0) {
return
}
@ -157,13 +178,13 @@
const attachmentModel = new AttachmentModel({taskId: this.taskId})
this.attachmentService.create(attachmentModel, files)
.then(r => {
if(r.success !== null) {
if (r.success !== null) {
r.success.forEach(a => {
this.$store.commit('attachments/add', a)
this.$store.dispatch('tasks/addTaskAttachment', {taskId: this.taskId, attachment: a})
})
}
if(r.errors !== null) {
if (r.errors !== null) {
r.errors.forEach(m => {
this.error(m)
})
@ -187,5 +208,5 @@
})
},
},
}
}
</script>

48
src/components/tasks/partials/comments.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="content details" :class="{'has-top-border': canWrite || comments.length > 0}">
<div :class="{'has-top-border': canWrite || comments.length > 0}" class="content details">
<h1 v-if="canWrite || comments.length > 0">
<span class="icon is-grey">
<icon :icon="['far', 'comments']"/>
@ -10,24 +10,24 @@
<progress class="progress is-small is-info" max="100" v-if="taskCommentService.loading">Loading
comments...
</progress>
<div class="media comment" v-for="c in comments" :key="c.id">
<div :key="c.id" class="media comment" v-for="c in comments">
<figure class="media-left">
<img class="image is-avatar" :src="c.author.getAvatarUrl(48)" alt="" width="48" height="48"/>
<img :src="c.author.getAvatarUrl(48)" alt="" class="image is-avatar" height="48" width="48"/>
</figure>
<div class="media-content">
<div class="comment-info" :class="{'is-pulled-up': canWrite}">
<div :class="{'is-pulled-up': canWrite}" class="comment-info">
<strong>{{ c.author.username }}</strong>&nbsp;
<small v-tooltip="formatDate(c.created)">{{ formatDateSince(c.created) }}</small>
<small v-if="+new Date(c.created) !== +new Date(c.updated)" v-tooltip="formatDate(c.updated)"> ·
edited {{ formatDateSince(c.updated) }}</small>
</div>
<editor
v-model="c.comment"
:has-preview="true"
@change="() => {toggleEdit(c);editComment()}"
:upload-enabled="true"
:upload-callback="attachmentUpload"
:is-edit-enabled="canWrite"
:upload-callback="attachmentUpload"
:upload-enabled="true"
@change="() => {toggleEdit(c);editComment()}"
v-model="c.comment"
/>
<div class="comment-actions" v-if="canWrite">
<a @click="toggleDelete(c.id)">Remove</a>
@ -36,25 +36,25 @@
</div>
<div class="media comment" v-if="canWrite">
<figure class="media-left">
<img class="image is-avatar" :src="userAvatar" alt="" width="48" height="48"/>
<img :src="userAvatar" alt="" class="image is-avatar" height="48" width="48"/>
</figure>
<div class="media-content">
<div class="form">
<div class="field">
<editor
placeholder="Add your comment..."
:class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
v-model="newComment.comment"
:has-preview="false"
:upload-enabled="true"
:upload-callback="attachmentUpload"
:upload-enabled="true"
placeholder="Add your comment..."
v-if="editorActive"
v-model="newComment.comment"
/>
</div>
<div class="field">
<button class="button is-primary"
:class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
@click="addComment()" :disabled="newComment.comment === ''">Comment
<button :class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
:disabled="newComment.comment === ''"
@click="addComment()" class="button is-primary">Comment
</button>
</div>
</div>
@ -62,9 +62,9 @@
</div>
</div>
<modal
v-if="showDeleteModal"
@close="showDeleteModal = false"
@submit="deleteComment()">
@submit="deleteComment()"
v-if="showDeleteModal">
<span slot="header">Delete this comment</span>
<p slot="text">Are you sure you want to delete this comment?
<br/>This <b>CANNOT BE UNDONE!</b></p>
@ -73,13 +73,13 @@
</template>
<script>
import TaskCommentService from '../../../services/taskComment'
import TaskCommentModel from '../../../models/taskComment'
import attachmentUpload from '../mixins/attachmentUpload'
import LoadingComponent from '../../misc/loading'
import ErrorComponent from '../../misc/error'
import TaskCommentService from '../../../services/taskComment'
import TaskCommentModel from '../../../models/taskComment'
import attachmentUpload from '../mixins/attachmentUpload'
import LoadingComponent from '../../misc/loading'
import ErrorComponent from '../../misc/error'
export default {
export default {
name: 'comments',
components: {
editor: () => ({
@ -213,5 +213,5 @@
})
},
},
}
}
</script>

6
src/components/tasks/partials/date-table-cell.vue
View File

@ -5,13 +5,13 @@
</template>
<script>
export default {
export default {
name: 'date-table-cell',
props: {
date: {
type: Date,
default: 0,
}
},
}
},
}
</script>

24
src/components/tasks/partials/defer-task.vue
View File

@ -1,26 +1,26 @@
<template>
<div class="defer-task loading-container" :class="{'is-loading': taskService.loading}">
<div :class="{'is-loading': taskService.loading}" class="defer-task loading-container">
<label class="label">Defer due date</label>
<div class="defer-days">
<button class="button is-outlined is-primary has-no-shadow" @click="() => deferDays(1)">1 day</button>
<button class="button is-outlined is-primary has-no-shadow" @click="() => deferDays(3)">3 days</button>
<button class="button is-outlined is-primary has-no-shadow" @click="() => deferDays(7)">1 week</button>
<button @click="() => deferDays(1)" class="button is-outlined is-primary has-no-shadow">1 day</button>
<button @click="() => deferDays(3)" class="button is-outlined is-primary has-no-shadow">3 days</button>
<button @click="() => deferDays(7)" class="button is-outlined is-primary has-no-shadow">1 week</button>
</div>
<flat-pickr
:class="{ 'disabled': taskService.loading}"
class="input"
:disabled="taskService.loading"
v-model="dueDate"
:config="flatPickerConfig"
:disabled="taskService.loading"
class="input"
v-model="dueDate"
/>
</div>
</template>
<script>
import TaskService from '../../../services/task'
import flatPickr from 'vue-flatpickr-component'
import TaskService from '../../../services/task'
import flatPickr from 'vue-flatpickr-component'
export default {
export default {
name: 'defer-task',
data() {
return {
@ -47,7 +47,7 @@
props: {
value: {
required: true,
}
},
},
created() {
this.taskService = new TaskService()
@ -108,5 +108,5 @@
})
},
},
}
}
</script>

50
src/components/tasks/partials/editAssignees.vue
View File

@ -1,49 +1,51 @@
<template>
<multiselect
:multiple="true"
:close-on-select="false"
:clear-on-select="true"
:options-limit="300"
:close-on-select="false"
:disabled="disabled"
:hide-selected="true"
v-model="assignees"
:options="foundUsers"
:searchable="true"
:loading="listUserService.loading"
:internal-search="true"
:loading="listUserService.loading"
:multiple="true"
:options="foundUsers"
:options-limit="300"
:searchable="true"
:showNoOptions="false"
@search-change="findUser"
@select="addAssignee"
placeholder="Type to assign a user..."
label="username"
track-by="id"
placeholder="Type to assign a user..."
select-label="Assign this user"
:showNoOptions="false"
:disabled="disabled"
track-by="id"
v-model="assignees"
>
<template slot="tag" slot-scope="{ option }">
<user :user="option" :show-username="false" :avatar-size="30"/>
<user :avatar-size="30" :show-username="false" :user="option"/>
<a @click="removeAssignee(option)" class="remove-assignee" v-if="!disabled">
<icon icon="times"/>
</a>
</template>
<template slot="clear" slot-scope="props">
<div class="multiselect__clear" v-if="newAssignee !== null && newAssignee.id !== 0"
@mousedown.prevent.stop="clearAllFoundUsers(props.search)"></div>
<div
@mousedown.prevent.stop="clearAllFoundUsers(props.search)"
class="multiselect__clear"
v-if="newAssignee !== null && newAssignee.id !== 0"></div>
</template>
<span slot="noResult">No user found. Consider changing the search query.</span>
</multiselect>
</template>
<script>
import {differenceWith} from 'lodash'
import {differenceWith} from 'lodash'
import UserModel from '../../../models/user'
import ListUserService from '../../../services/listUsers'
import TaskAssigneeService from '../../../services/taskAssignee'
import User from '../../misc/user'
import LoadingComponent from '../../misc/loading'
import ErrorComponent from '../../misc/error'
import UserModel from '../../../models/user'
import ListUserService from '../../../services/listUsers'
import TaskAssigneeService from '../../../services/taskAssignee'
import User from '../../misc/user'
import LoadingComponent from '../../misc/loading'
import ErrorComponent from '../../misc/error'
export default {
export default {
name: 'editAssignees',
components: {
User,
@ -89,7 +91,7 @@
watch: {
initialAssignees(newVal) {
this.assignees = newVal
}
},
},
methods: {
addAssignee(user) {
@ -133,5 +135,5 @@
this.$set(this, 'foundUsers', [])
},
},
}
}
</script>

61
src/components/tasks/partials/editLabels.vue
View File

@ -1,50 +1,55 @@
<template>
<multiselect
:multiple="true"
:close-on-select="false"
:clear-on-select="true"
:options-limit="300"
:close-on-select="false"
:disabled="disabled"
:hide-selected="true"
v-model="labels"
:options="foundLabels"
:searchable="true"
:loading="labelService.loading || labelTaskService.loading"
:internal-search="true"
:loading="labelService.loading || labelTaskService.loading"
:multiple="true"
:options="foundLabels"
:options-limit="300"
:searchable="true"
:showNoOptions="false"
:taggable="true"
@search-change="findLabel"
@select="addLabel"
placeholder="Type to add a new label..."
label="title"
track-by="id"
:taggable="true"
:showNoOptions="false"
@tag="createAndAddLabel"
label="title"
placeholder="Type to add a new label..."
tag-placeholder="Add this as new label"
:disabled="disabled"
track-by="id"
v-model="labels"
>
<template slot="tag" slot-scope="{ option }">
<span class="tag"
:style="{'background': option.hexColor, 'color': option.textColor}">
<template
slot="tag"
slot-scope="{ option }">
<span
:style="{'background': option.hexColor, 'color': option.textColor}"
class="tag">
<span>{{ option.title }}</span>
<a class="delete is-small" @click="removeLabel(option)"></a>
<a @click="removeLabel(option)" class="delete is-small"></a>
</span>
</template>
<template slot="clear" slot-scope="props">
<div class="multiselect__clear" v-if="labels.length"
@mousedown.prevent.stop="clearAllLabels(props.search)"></div>
<div
@mousedown.prevent.stop="clearAllLabels(props.search)"
class="multiselect__clear"
v-if="labels.length"></div>
</template>
</multiselect>
</template>
<script>
import { differenceWith } from 'lodash'
import {differenceWith} from 'lodash'
import LabelService from '../../../services/label'
import LabelModel from '../../../models/label'
import LabelTaskService from '../../../services/labelTask'
import LoadingComponent from '../../misc/loading'
import ErrorComponent from '../../misc/error'
import LabelService from '../../../services/label'
import LabelModel from '../../../models/label'
import LabelTaskService from '../../../services/labelTask'
import LoadingComponent from '../../misc/loading'
import ErrorComponent from '../../misc/error'
export default {
export default {
name: 'edit-labels',
props: {
value: {
@ -80,7 +85,7 @@
watch: {
value(newLabels) {
this.labels = newLabels
}
},
},
created() {
this.labelService = new LabelService()
@ -153,7 +158,7 @@
},
},
}
}
</script>
<style scoped>

18
src/components/tasks/partials/labels.vue
View File

@ -1,24 +1,28 @@
<template>
<div class="label-wrapper">
<span class="tag" v-for="label in labels" :style="{'background': label.hexColor, 'color': label.textColor}" :key="label.id">
<span
:key="label.id"
:style="{'background': label.hexColor, 'color': label.textColor}"
class="tag"
v-for="label in labels">
<span>{{ label.title }}</span>
</span>
</div>
</template>
<script>
export default {
export default {
name: 'labels',
props: {
labels: {
required: true,
}
}
}
},
},
}
</script>
<style scoped>
.label-wrapper {
.label-wrapper {
display: inline;
}
}
</style>

35
src/components/tasks/partials/listSearch.vue
View File

@ -1,22 +1,25 @@
<template>
<multiselect
v-model="list"
:options="foundLists"
:multiple="false"
:searchable="true"
:loading="listSerivce.loading"
:internal-search="true"
:loading="listSerivce.loading"
:multiple="false"
:options="foundLists"
:searchable="true"
:showNoOptions="false"
@search-change="findLists"
@select="select"
placeholder="Type to search for a list..."
label="title"
track-by="id"
:showNoOptions="false"
class="control is-expanded"
label="title"
placeholder="Type to search for a list..."
track-by="id"
v-focus
v-model="list"
>
<template slot="clear" slot-scope="props">
<div class="multiselect__clear" v-if="list !== null && list.id !== 0" @mousedown.prevent.stop="clearAll(props.search)"></div>
<div
@mousedown.prevent.stop="clearAll(props.search)"
class="multiselect__clear"
v-if="list !== null && list.id !== 0"></div>
</template>
<template slot="option" slot-scope="props">
<span class="list-namespace-title">{{ namespace(props.option.namespaceId) }} ></span>
@ -27,12 +30,12 @@
</template>
<script>
import ListService from '../../../services/list'
import ListModel from '../../../models/list'
import LoadingComponent from '../../misc/loading'
import ErrorComponent from '../../misc/error'
import ListService from '../../../services/list'
import ListModel from '../../../models/list'
import LoadingComponent from '../../misc/loading'
import ErrorComponent from '../../misc/error'
export default {
export default {
name: 'listSearch',
data() {
return {
@ -82,5 +85,5 @@
return 'Shared Lists'
},
},
}
}
</script>

8
src/components/tasks/partials/percentDoneSelect.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="select">
<select v-model.number="percentDone" @change="updateData" :disabled="disabled">
<select :disabled="disabled" @change="updateData" v-model.number="percentDone">
<option value="0">0%</option>
<option value="0.1">10%</option>
<option value="0.2">20%</option>
@ -17,7 +17,7 @@
</template>
<script>
export default {
export default {
name: 'percentDoneSelect',
data() {
return {
@ -46,7 +46,7 @@
updateData() {
this.$emit('input', this.percentDone)
this.$emit('change')
}
},
}
},
}
</script>

18
src/components/tasks/partials/priorityLabel.vue
View File

@ -1,5 +1,7 @@
<template>
<span v-if="showAll || priority >= priorities.HIGH" :class="{'not-so-high': priority === priorities.HIGH, 'high-priority': priority >= priorities.HIGH}">
<span
:class="{'not-so-high': priority === priorities.HIGH, 'high-priority': priority >= priorities.HIGH}"
v-if="showAll || priority >= priorities.HIGH">
<span class="icon" v-if="priority >= priorities.HIGH">
<icon icon="exclamation"/>
</span>
@ -16,9 +18,9 @@
</template>
<script>
import priorites from '../../../models/priorities'
import priorites from '../../../models/priorities'
export default {
export default {
name: 'priorityLabel',
data() {
return {
@ -34,14 +36,14 @@
type: Boolean,
default: false,
},
}
}
},
}
</script>
<style lang="scss">
@import '../../../styles/theme/variables';
@import '../../../styles/theme/variables';
span.high-priority{
span.high-priority {
color: $red;
width: auto !important; // To override the width set in tasks
@ -54,5 +56,5 @@
&.not-so-high {
color: $orange;
}
}
}
</style>

10
src/components/tasks/partials/prioritySelect.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="select">
<select v-model="priority" @change="updateData" :disabled="disabled">
<select :disabled="disabled" @change="updateData" v-model="priority">
<option :value="priorities.UNSET">Unset</option>
<option :value="priorities.LOW">Low</option>
<option :value="priorities.MEDIUM">Medium</option>
@ -12,9 +12,9 @@
</template>
<script>
import priorites from '../../../models/priorities'
import priorites from '../../../models/priorities'
export default {
export default {
name: 'prioritySelect',
data() {
return {
@ -44,7 +44,7 @@
updateData() {
this.$emit('input', this.priority)
this.$emit('change')
}
},
}
},
}
</script>

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

@ -4,26 +4,26 @@
<label class="label">New Task Relation</label>
<div class="field">
<multiselect
v-model="newTaskRelationTask"
:options="foundTasks"
:multiple="false"
:searchable="true"
:loading="taskService.loading"
:internal-search="true"
@search-change="findTasks"
placeholder="Type search for a new task to add as related..."
label="title"
track-by="id"
:taggable="true"
:loading="taskService.loading"
:multiple="false"
:options="foundTasks"
:searchable="true"
:showNoOptions="false"
:taggable="true"
@search-change="findTasks"
@tag="createAndRelateTask"
label="title"
placeholder="Type search for a new task to add as related..."
tag-placeholder="Add this as new related task"
track-by="id"
v-model="newTaskRelationTask"
>
<template slot="clear" slot-scope="props">
<div
@mousedown.prevent.stop="clearAllFoundTasks(props.search)"
class="multiselect__clear"
v-if="newTaskRelationTask !== null && newTaskRelationTask.id !== 0"
@mousedown.prevent.stop="clearAllFoundTasks(props.search)"></div>
v-if="newTaskRelationTask !== null && newTaskRelationTask.id !== 0"></div>
</template>
<span slot="noResult">No task found. Consider changing the search query.</span>
</multiselect>
@ -33,53 +33,55 @@
<div class="select is-fullwidth has-defaults">
<select v-model="newTaskRelationKind">
<option value="unset">Select a relation kind</option>
<option v-for="(label, rk) in relationKinds" :key="rk" :value="rk">
<option :key="rk" :value="rk" v-for="(label, rk) in relationKinds">
{{ label[0] }}
</option>
</select>
</div>
</div>
<div class="control">
<a class="button is-primary" @click="addTaskRelation()">Add task Relation</a>
<a @click="addTaskRelation()" class="button is-primary">Add task Relation</a>
</div>
</div>
</template>
<div class="related-tasks" v-for="(rts, kind ) in relatedTasks" :key="kind">
<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 class="task" v-for="t in rts" :key="t.id">
<div :key="t.id" class="task" v-for="t in rts">
<router-link :to="{ name: $route.name, params: { id: t.id } }">
<span class="tasktext" :class="{ 'done': t.done}">
<span :class="{ 'done': t.done}" class="tasktext">
<span
v-if="t.listId !== listId"
class="different-list"
v-if="t.listId !== listId"
v-tooltip="'This task belongs to a different list.'">
{{ $store.getters['lists/getListById'](t.listId) === null ? '' : $store.getters['lists/getListById'](t.listId).title }} >
{{
$store.getters['lists/getListById'](t.listId) === null ? '' : $store.getters['lists/getListById'](t.listId).title
}} >
</span>
{{t.title}}
{{ t.title }}
</span>
</router-link>
<a
v-if="editEnabled"
@click="() => {showDeleteModal = true; relationToDelete = {relationKind: kind, otherTaskId: t.id}}"
class="remove"
@click="() => {showDeleteModal = true; relationToDelete = {relationKind: kind, otherTaskId: t.id}}">
v-if="editEnabled">
<icon icon="trash-alt"/>
</a>
</div>
</div>
</template>
</div>
<p v-if="showNoRelationsNotice && Object.keys(relatedTasks).length === 0" class="none">
<p class="none" v-if="showNoRelationsNotice && Object.keys(relatedTasks).length === 0">
No task relations yet.
</p>
<!-- Delete modal -->
<modal
v-if="showDeleteModal"
@close="showDeleteModal = false"
@submit="removeTaskRelation()">
@submit="removeTaskRelation()"
v-if="showDeleteModal">
<span slot="header">Delete Task Relation</span>
<p slot="text">Are you sure you want to delete this task relation?<br/>
<b>This CANNOT BE UNDONE!</b></p>
@ -88,16 +90,16 @@
</template>
<script>
import TaskService from '../../../services/task'
import TaskModel from '../../../models/task'
import TaskRelationService from '../../../services/taskRelation'
import relationKinds from '../../../models/relationKinds'
import TaskRelationModel from '../../../models/taskRelation'
import TaskService from '../../../services/task'
import TaskModel from '../../../models/task'
import TaskRelationService from '../../../services/taskRelation'
import relationKinds from '../../../models/relationKinds'
import TaskRelationModel from '../../../models/taskRelation'
import LoadingComponent from '../../misc/loading'
import ErrorComponent from '../../misc/error'
import LoadingComponent from '../../misc/loading'
import ErrorComponent from '../../misc/error'
export default {
export default {
name: 'relatedTasks',
data() {
return {
@ -233,5 +235,5 @@
return relationKinds[kind][0]
},
},
}
}
</script>

24
src/components/tasks/partials/reminders.vue
View File

@ -1,19 +1,21 @@
<template>
<div class="reminders">
<div class="reminder-input"
<div
:class="{ 'overdue': (r < nowUnix && index !== (reminders.length - 1))}"
v-for="(r, index) in reminders" :key="index">
:key="index"
class="reminder-input"
v-for="(r, index) in reminders">
<flat-pickr
:v-model="reminders"
:config="flatPickerConfig"
:id="'taskreminderdate' + index"
:value="r"
:data-index="index"
placeholder="Add a new reminder..."
:disabled="disabled"
:id="'taskreminderdate' + index"
:v-model="reminders"
:value="r"
placeholder="Add a new reminder..."
>
</flat-pickr>
<a v-if="index !== (reminders.length - 1) && !disabled" @click="removeReminderByIndex(index)">
<a @click="removeReminderByIndex(index)" v-if="index !== (reminders.length - 1) && !disabled">
<icon icon="times"></icon>
</a>
</div>
@ -21,10 +23,10 @@
</template>
<script>
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
export default {
export default {
name: 'reminders',
data() {
return {
@ -96,5 +98,5 @@
this.updateData()
},
},
}
}
</script>

30
src/components/tasks/partials/repeatAfter.vue
View File

@ -7,14 +7,14 @@
<div class="control">
<input
:disabled="disabled"
@change="updateData"
class="input"
placeholder="Specify an amount..."
v-model="repeatAfter.amount"
@change="updateData"/>
v-model="repeatAfter.amount"/>
</div>
<div class="control">
<div class="select">
<select v-model="repeatAfter.type" @change="updateData" :disabled="disabled">
<select :disabled="disabled" @change="updateData" v-model="repeatAfter.type">
<option value="hours">Hours</option>
<option value="days">Days</option>
<option value="weeks">Weeks</option>
@ -26,8 +26,8 @@
</div>
<fancycheckbox
:disabled="disabled"
class="column"
@change="updateData"
class="column"
v-model="task.repeatFromCurrentDate"
v-tooltip="'When marking the task as done, all dates will be set relative to the current date rather than the date they had before.'"
>
@ -37,9 +37,9 @@
</template>
<script>
import Fancycheckbox from '../../input/fancycheckbox'
import Fancycheckbox from '../../input/fancycheckbox'
export default {
export default {
name: 'repeatAfter',
components: {Fancycheckbox},
data() {
@ -80,26 +80,26 @@
this.task.repeatAfter = this.repeatAfter
this.$emit('input', this.task)
this.$emit('change')
}
},
}
},
}
</script>
<style scoped lang="scss">
p {
<style lang="scss" scoped>
p {
padding-top: 6px;
}
}
.field.has-addons {
.field.has-addons {
margin-bottom: .5rem;
.control .select select {
height: 2.5em;
}
}
}
.columns {
.columns {
align-items: center;
}
}
</style>

69
src/components/tasks/partials/singleTaskInList.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="task loader-container" :class="{'is-loading': taskService.loading}">
<fancycheckbox v-model="task.done" @change="markAsDone" :disabled="isArchived || disabled"/>
<span class="tasktext" :class="{ 'done': task.done}">
<div :class="{'is-loading': taskService.loading}" class="task loader-container">
<fancycheckbox :disabled="isArchived || disabled" @change="markAsDone" v-model="task.done"/>
<span :class="{ 'done': task.done}" class="tasktext">
<router-link :to="{ name: taskDetailRoute, params: { id: task.id } }">
<router-link
v-if="showList && $store.getters['lists/getListById'](task.listId) !== null"
v-tooltip="`This task belongs to list '${$store.getters['lists/getListById'](task.listId).title}'`"
:to="{ name: 'list.list', params: { listId: task.listId } }"
class="task-list">
class="task-list"
v-if="showList && $store.getters['lists/getListById'](task.listId) !== null"
v-tooltip="`This task belongs to list '${$store.getters['lists/getListById'](task.listId).title}'`">
{{ $store.getters['lists/getListById'](task.listId).title }}
</router-link>
@ -23,37 +23,37 @@
<labels :labels="task.labels"/>
<user
:user="a"
:avatar-size="27"
:show-username="false"
:is-inline="true"
v-for="(a, i) in task.assignees"
:key="task.id + 'assignee' + a.id + i"
:show-username="false"
:user="a"
v-for="(a, i) in task.assignees"
/>
<i
v-if="+new Date(task.dueDate) > 0"
:class="{'overdue': task.dueDate <= new Date() && !task.done}"
v-tooltip="formatDate(task.dueDate)"
@click.stop="showDefer = !showDefer"
v-if="+new Date(task.dueDate) > 0"
v-tooltip="formatDate(task.dueDate)"
>
- Due {{formatDateSince(task.dueDate)}}
- Due {{ formatDateSince(task.dueDate) }}
</i>
<transition name="fade">
<defer-task v-model="task" v-if="+new Date(task.dueDate) > 0 && showDefer"/>
<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task"/>
</transition>
<priority-label :priority="task.priority"/>
</span>
<router-link
v-if="currentList.id !== task.listId && $store.getters['lists/getListById'](task.listId) !== null"
v-tooltip="`This task belongs to list '${$store.getters['lists/getListById'](task.listId).title}'`"
:to="{ name: 'list.list', params: { listId: task.listId } }"
class="task-list">
class="task-list"
v-if="currentList.id !== task.listId && $store.getters['lists/getListById'](task.listId) !== null"
v-tooltip="`This task belongs to list '${$store.getters['lists/getListById'](task.listId).title}'`">
{{ $store.getters['lists/getListById'](task.listId).title }}
</router-link>
<a
class="favorite"
:class="{'is-favorite': task.isFavorite}"
@click="toggleFavorite">
@click="toggleFavorite"
class="favorite">
<icon icon="star" v-if="task.isFavorite"/>
<icon :icon="['far', 'star']" v-else/>
</a>
@ -62,15 +62,15 @@
</template>
<script>
import TaskModel from '../../../models/task'
import PriorityLabel from './priorityLabel'
import TaskService from '../../../services/task'
import Labels from './labels'
import User from '../../misc/user'
import Fancycheckbox from '../../input/fancycheckbox'
import DeferTask from './defer-task'
import TaskModel from '../../../models/task'
import PriorityLabel from './priorityLabel'
import TaskService from '../../../services/task'
import Labels from './labels'
import User from '../../misc/user'
import Fancycheckbox from '../../input/fancycheckbox'
import DeferTask from './defer-task'
export default {
export default {
name: 'singleTaskInList',
data() {
return {
@ -97,7 +97,7 @@
},
taskDetailRoute: {
type: String,
default: 'task.list.detail'
default: 'task.list.detail',
},
showList: {
type: Boolean,
@ -122,7 +122,10 @@
},
computed: {
currentList() {
return typeof this.$store.state.currentList === 'undefined' ? {id: 0, title: ''} : this.$store.state.currentList
return typeof this.$store.state.currentList === 'undefined' ? {
id: 0,
title: '',
} : this.$store.state.currentList
},
},
methods: {
@ -139,10 +142,10 @@
title: 'Undo',
callback: () => this.markAsDone({
target: {
checked: !checked
}
checked: !checked,
},
}),
}]
}],
)
})
.catch(e => {
@ -151,7 +154,7 @@
}
if (checked) {
setTimeout(updateFunc, 300); // Delay it to show the animation when marking a task as done
setTimeout(updateFunc, 300) // Delay it to show the animation when marking a task as done
} else {
updateFunc() // Don't delay it when un-marking it as it doesn't have an animation the other way around
}
@ -169,5 +172,5 @@
})
},
},
}
}
</script>

6
src/components/tasks/partials/sort.vue
View File

@ -1,13 +1,13 @@
<template>
<a @click="click">
<icon icon="sort-up" v-if="order === 'asc'"/>
<icon icon="sort-up" v-else-if="order === 'desc'" rotation="180"/>
<icon icon="sort-up" rotation="180" v-else-if="order === 'desc'"/>
<icon icon="sort" v-else/>
</a>
</template>
<script>
export default {
export default {
name: 'sort',
props: {
order: {
@ -20,5 +20,5 @@
this.$emit('click')
},
},
}
}
</script>

42
src/components/user/avatar-settings.vue
View File

@ -8,57 +8,57 @@
<div class="card-content">
<div class="control mb-4">
<label class="radio">
<input type="radio" name="avatarProvider" v-model="avatarProvider" value="default"/>
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="default"/>
Default
</label>
<label class="radio">
<input type="radio" name="avatarProvider" v-model="avatarProvider" value="initials"/>
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="initials"/>
Initials
</label>
<label class="radio">
<input type="radio" name="avatarProvider" v-model="avatarProvider" value="gravatar"/>
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="gravatar"/>
Gravatar
</label>
<label class="radio">
<input type="radio" name="avatarProvider" v-model="avatarProvider" value="upload"/>
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="upload"/>
Upload
</label>
</div>
<template v-if="avatarProvider === 'upload'">
<input
type="file"
ref="avatarUploadInput"
@change="cropAvatar"
class="is-hidden"
accept="image/*"
class="is-hidden"
ref="avatarUploadInput"
type="file"
/>
<a
v-if="!isCropAvatar"
class="button is-primary"
:class="{ 'is-loading': avatarService.loading || loading}"
@click="$refs.avatarUploadInput.click()"
:class="{ 'is-loading': avatarService.loading || loading}">
class="button is-primary"
v-if="!isCropAvatar">
Upload Avatar
</a>
<template v-else>
<cropper
:src="avatarToCrop"
class="mb-4"
@ready="() => loading = false"
:stencil-props="{aspectRatio: 1}"
@ready="() => loading = false"
class="mb-4"
ref="cropper"/>
<a
class="button is-primary"
:class="{ 'is-loading': avatarService.loading || loading}"
@click="uploadAvatar"
:class="{ 'is-loading': avatarService.loading || loading}">
class="button is-primary">
Upload Avatar
</a>
</template>
</template>
<div class="bigbuttons" v-if="avatarProvider !== 'upload'">
<button @click="updateAvatarStatus()" class="button is-primary is-fullwidth"
:class="{ 'is-loading': avatarService.loading || loading}">
<button :class="{ 'is-loading': avatarService.loading || loading}" @click="updateAvatarStatus()"
class="button is-primary is-fullwidth">
Save
</button>
</div>
@ -67,12 +67,12 @@
</template>
<script>
import {Cropper} from 'vue-advanced-cropper'
import {Cropper} from 'vue-advanced-cropper'
import AvatarService from '../../services/avatar'
import AvatarModel from '../../models/avatar'
import AvatarService from '../../services/avatar'
import AvatarModel from '../../models/avatar'
export default {
export default {
name: 'avatar-settings',
data() {
return {
@ -145,5 +145,5 @@
reader.readAsDataURL(avatar[0])
},
},
}
}
</script>

3
src/helpers/applyDrag.js
View File

@ -1,6 +1,5 @@
export const applyDrag = (arr, dragResult) => {
const { removedIndex, addedIndex, payload } = dragResult
const {removedIndex, addedIndex, payload} = dragResult
if (removedIndex === null && addedIndex === null) return arr
const result = [...arr]

8
src/helpers/case.js
View File

@ -19,7 +19,7 @@ export function objectToCamelCase(object) {
// Recursive processing
// Prevent processing for some cases
if(object[m] === null) {
if (object[m] === null) {
continue
}
@ -31,7 +31,7 @@ export function objectToCamelCase(object) {
}
// Call it again for nested objects
if(typeof object[m] === 'object') {
if (typeof object[m] === 'object') {
parsedObject[camelCase(m)] = objectToCamelCase(object[m])
}
}
@ -56,7 +56,7 @@ export function objectToSnakeCase(object) {
// Recursive processing
// Prevent processing for some cases
if(
if (
object[m] === null ||
(object[m] instanceof Date)
) {
@ -71,7 +71,7 @@ export function objectToSnakeCase(object) {
}
// Call it again for nested objects
if(typeof object[m] === 'object') {
if (typeof object[m] === 'object') {
parsedObject[snakeCase(m)] = objectToSnakeCase(object[m])
}
}

1
src/helpers/filterObject.js
View File

@ -1,4 +1,3 @@
export const filterObject = (obj, fn) => {
let key

7
src/helpers/saveListView.js
View File

@ -1,4 +1,3 @@
export const saveListView = (listId, routeName) => {
const savedListView = localStorage.getItem('listView')
let savedListViewJson = false
@ -7,7 +6,7 @@ export const saveListView = (listId, routeName) => {
}
let listView = {}
if(savedListViewJson) {
if (savedListViewJson) {
listView = savedListViewJson
}
@ -18,7 +17,7 @@ export const saveListView = (listId, routeName) => {
export const getListView = listId => {
// Remove old stored settings
const savedListView = localStorage.getItem('listView')
if(savedListView !== null && savedListView.startsWith('list.')) {
if (savedListView !== null && savedListView.startsWith('list.')) {
localStorage.removeItem('listView')
}
@ -28,7 +27,7 @@ export const getListView = listId => {
const savedListViewJson = JSON.parse(savedListView)
if(!savedListViewJson[listId]) {
if (!savedListViewJson[listId]) {
return 'list.list'
}

1
src/helpers/setTitle.js
View File

@ -1,4 +1,3 @@
export const setTitle = title => {
if (typeof title === 'undefined' || title === '') {
document.title = 'Vikunja'

2
src/http-common/index.js
View File

@ -1,5 +1,5 @@
import axios from 'axios'
export const HTTP = axios.create({
baseURL: window.API_URL
baseURL: window.API_URL,
})

157
src/main.js
View File

@ -3,77 +3,87 @@ import App from './App.vue'
import router from './router'
import {VERSION} from './version.json'
// Register the modal
import Modal from './components/modal/modal'
// Add CSS
import './styles/vikunja.scss'
// Notifications
import Notifications from 'vue-notification'
// Icons
import {library} from '@fortawesome/fontawesome-svg-core'
import {
faAlignLeft,
faAngleRight,
faBars,
faCalendar,
faCalendarWeek,
faCheck,
faCheckDouble,
faChevronDown,
faCloudDownloadAlt,
faCloudUploadAlt,
faCog,
faEllipsisV,
faExclamation,
faFillDrip,
faFilter,
faHistory,
faKeyboard,
faLayerGroup,
faList,
faListOl,
faLock,
faPaperclip,
faPaste,
faPen,
faPencilAlt,
faPercent,
faPlus,
faPowerOff,
faSearch,
faSignOutAlt,
faSort,
faSortUp,
faStar as faStarSolid,
faTachometerAlt,
faTags,
faTasks,
faTh,
faTimes,
faTrashAlt,
faUser,
faUsers,
} from '@fortawesome/free-solid-svg-icons'
import {faCalendarAlt, faClock, faComments, faSave, faStar, faTimesCircle} from '@fortawesome/free-regular-svg-icons'
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
// Tooltip
import VTooltip from 'v-tooltip'
// PWA
import './registerServiceWorker'
// Shortcuts
import vueShortkey from 'vue-shortkey'
// Mixins
import message from './message'
import {format, formatDistance} from 'date-fns'
import {colorIsDark} from './helpers/colorIsDark'
import {setTitle} from './helpers/setTitle'
// Vuex
import {store} from './store'
console.info(`Vikunja frontend version ${VERSION}`)
// Make sure the api url does not contain a / at the end
if(window.API_URL.substr(window.API_URL.length - 1, window.API_URL.length) === '/') {
if (window.API_URL.substr(window.API_URL.length - 1, window.API_URL.length) === '/') {
window.API_URL = window.API_URL.substr(0, window.API_URL.length - 1)
}
// Register the modal
import Modal from './components/modal/modal'
Vue.component('modal', Modal)
// Add CSS
import './styles/vikunja.scss'
Vue.config.productionTip = false
// Notifications
import Notifications from 'vue-notification'
Vue.use(Notifications)
// Icons
import { library } from '@fortawesome/fontawesome-svg-core'
import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
import { faPlus } from '@fortawesome/free-solid-svg-icons'
import { faListOl } from '@fortawesome/free-solid-svg-icons'
import { faTasks } from '@fortawesome/free-solid-svg-icons'
import { faCog } from '@fortawesome/free-solid-svg-icons'
import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
import { faLayerGroup } from '@fortawesome/free-solid-svg-icons'
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons'
import { faUsers } from '@fortawesome/free-solid-svg-icons'
import { faUser } from '@fortawesome/free-solid-svg-icons'
import { faLock } from '@fortawesome/free-solid-svg-icons'
import { faPen } from '@fortawesome/free-solid-svg-icons'
import { faTimes } from '@fortawesome/free-solid-svg-icons'
import { faTachometerAlt } from '@fortawesome/free-solid-svg-icons'
import { faCalendar } from '@fortawesome/free-solid-svg-icons'
import { faBars } from '@fortawesome/free-solid-svg-icons'
import { faPowerOff } from '@fortawesome/free-solid-svg-icons'
import { faCalendarWeek } from '@fortawesome/free-solid-svg-icons'
import { faExclamation } from '@fortawesome/free-solid-svg-icons'
import { faTags } from '@fortawesome/free-solid-svg-icons'
import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
import { faCheck } from '@fortawesome/free-solid-svg-icons'
import { faPaste } from '@fortawesome/free-solid-svg-icons'
import { faPencilAlt } from '@fortawesome/free-solid-svg-icons'
import { faTimesCircle } from '@fortawesome/free-regular-svg-icons'
import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons'
import { faCloudDownloadAlt } from '@fortawesome/free-solid-svg-icons'
import { faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons'
import { faPercent } from '@fortawesome/free-solid-svg-icons'
import { faStar as faStarSolid } from '@fortawesome/free-solid-svg-icons'
import { faStar } from '@fortawesome/free-regular-svg-icons'
import { faAlignLeft } from '@fortawesome/free-solid-svg-icons'
import { faPaperclip } from '@fortawesome/free-solid-svg-icons'
import { faClock } from '@fortawesome/free-regular-svg-icons'
import { faHistory } from '@fortawesome/free-solid-svg-icons'
import { faSearch } from '@fortawesome/free-solid-svg-icons'
import { faCheckDouble } from '@fortawesome/free-solid-svg-icons'
import { faTh } from '@fortawesome/free-solid-svg-icons'
import { faSort } from '@fortawesome/free-solid-svg-icons'
import { faSortUp } from '@fortawesome/free-solid-svg-icons'
import { faList } from '@fortawesome/free-solid-svg-icons'
import { faEllipsisV } from '@fortawesome/free-solid-svg-icons'
import { faFilter } from '@fortawesome/free-solid-svg-icons'
import { faFillDrip } from '@fortawesome/free-solid-svg-icons'
import { faKeyboard } from '@fortawesome/free-solid-svg-icons'
import { faComments } from '@fortawesome/free-regular-svg-icons'
import { faSave } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faSignOutAlt)
library.add(faPlus)
library.add(faListOl)
@ -124,15 +134,8 @@ library.add(faStarSolid)
Vue.component('icon', FontAwesomeIcon)
// Tooltip
import VTooltip from 'v-tooltip'
Vue.use(VTooltip, {defaultHtml: false})
// PWA
import './registerServiceWorker'
// Shortcuts
import vueShortkey from 'vue-shortkey'
Vue.use(vueShortkey)
// Set focus
@ -146,14 +149,9 @@ Vue.directive('focus', {
if (window.innerWidth > 769 || (typeof modifiers.always !== 'undefined' && modifiers.always)) {
el.focus()
}
}
},
})
// Mixins
import message from './message'
import {format, formatDistance} from 'date-fns'
import {colorIsDark} from './helpers/colorIsDark'
import {setTitle} from './helpers/setTitle'
Vue.mixin({
methods: {
formatDateSince: date => {
@ -161,35 +159,32 @@ Vue.mixin({
date = new Date(date)
}
const currentDate = new Date()
let formatted = '';
let formatted = ''
if (date > currentDate) {
formatted += 'in '
}
formatted += formatDistance(date, currentDate)
if(date < currentDate) {
if (date < currentDate) {
formatted += ' ago'
}
return formatted;
return formatted
},
formatDate: date => {
if (typeof date === 'string') {
date = new Date(date)
}
return date ? format(date, 'PPPPpppp'): ''
return date ? format(date, 'PPPPpppp') : ''
},
error: (e, context, actions = []) => message.error(e, context, actions),
success: (s, context, actions = []) => message.success(s, context, actions),
colorIsDark: colorIsDark,
setTitle: setTitle,
}
},
})
// Vuex
import {store} from './store'
new Vue({
router,
store,
render: h => h(App)
render: h => h(App),
}).$mount('#app')

4
src/message/index.js
View File

@ -2,11 +2,11 @@ export default {
setLoading(context) {
const timeout = setTimeout(function () {
context.loading = true
}, 100);
}, 100)
return () => {
clearTimeout(timeout)
context.loading = false
};
}
},
error(e, context, actions = []) {
// Build the notification text from error response

4
src/models/abstractModel.js
View File

@ -1,5 +1,5 @@
import {defaults, omitBy, isNil} from 'lodash'
import {objectToCamelCase} from '../helpers/case'
import {defaults, isNil, omitBy} from 'lodash'
import {objectToCamelCase} from '@/helpers/case'
export default class AbstractModel {

2
src/models/file.js
View File

@ -32,6 +32,6 @@ export default class FileModel extends AbstractModel {
it++
}
return Number(Math.round(size+'e2')+'e-2') + ' ' + sizes[it]
return Number(Math.round(size + 'e2') + 'e-2') + ' ' + sizes[it]
}
}

2
src/models/label.js
View File

@ -1,6 +1,6 @@
import AbstractModel from './abstractModel'
import UserModel from './user'
import {colorIsDark} from '../helpers/colorIsDark'
import {colorIsDark} from '@/helpers/colorIsDark'
export default class LabelModel extends AbstractModel {
constructor(data) {

2
src/models/labelTask.js
View File

@ -1,4 +1,4 @@
import AbstractModel from "./abstractModel";
import AbstractModel from './abstractModel'
export default class LabelTask extends AbstractModel {
defaults() {

2
src/models/passwordReset.js
View File

@ -1,4 +1,4 @@
import AbstractModel from "./abstractModel";
import AbstractModel from './abstractModel'
export default class PasswordResetModel extends AbstractModel {
constructor(data) {

2
src/models/teamList.js
View File

@ -7,7 +7,7 @@ export default class TeamListModel extends TeamShareBaseModel {
super.defaults(),
{
listId: 0,
}
},
)
}
}

2
src/models/teamMember.js
View File

@ -8,7 +8,7 @@ export default class TeamMemberModel extends UserModel {
{
admin: false,
teamId: 0,
}
},
)
}
}

2
src/models/teamNamespace.js
View File

@ -7,7 +7,7 @@ export default class TeamNamespaceModel extends TeamShareBaseModel {
super.defaults(),
{
namespaceId: 0,
}
},
)
}
}

2
src/models/teamShareBase.js
View File

@ -17,7 +17,7 @@ export default class TeamShareBaseModel extends AbstractModel {
right: 0,
created: null,
updated: null
updated: null,
}
}
}

2
src/models/userList.js
View File

@ -8,7 +8,7 @@ export default class UserListModel extends UserShareBaseModel {
super.defaults(),
{
listId: 0,
}
},
)
}
}

4
src/models/userNamespace.js
View File

@ -1,4 +1,4 @@
import UserShareBaseModel from "./userShareBase";
import UserShareBaseModel from './userShareBase'
import {merge} from 'lodash'
// This class extends the user share model with a 'rights' parameter which is used in sharing
@ -8,7 +8,7 @@ export default class UserNamespaceModel extends UserShareBaseModel {
super.defaults(),
{
namespaceId: 0,
}
},
)
}
}

34
src/registerServiceWorker.js
View File

@ -1,57 +1,57 @@
/* eslint-disable no-console */
import { register } from 'register-service-worker'
import {register} from 'register-service-worker'
import swEvents from './ServiceWorker/events'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}sw.js`, {
ready () {
ready() {
console.log('App is being served from cache by a service worker.')
},
registered () {
registered() {
console.log('Service worker has been registered.')
},
cached () {
cached() {
console.log('Content has been cached for offline use.')
},
updatefound () {
updatefound() {
console.log('New content is downloading.')
},
updated (registration) {
updated(registration) {
console.log('New content is available; please refresh.')
// Send an event with the updated info
document.dispatchEvent(
new CustomEvent(swEvents.SW_UPDATED, { detail:registration })
new CustomEvent(swEvents.SW_UPDATED, {detail: registration}),
)
},
offline () {
offline() {
console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
error(error) {
console.error('Error during service worker registration:', error)
}
},
})
}
if(navigator && navigator.serviceWorker) {
if (navigator && navigator.serviceWorker) {
navigator.serviceWorker.addEventListener('message', event => {
// for every message we expect an action field
// determining operation that we should perform
const { action } = event.data;
const {action} = event.data
// we use 2nd port provided by the message channel
const port = event.ports[0];
const port = event.ports[0]
if(action === 'getBearerToken') {
console.debug('Token request from sw');
if (action === 'getBearerToken') {
console.debug('Token request from sw')
port.postMessage({
authToken: localStorage.getItem('token'),
})
} else {
console.error('Unknown event', event);
console.error('Unknown event', event)
port.postMessage({
error: 'Unknown request',
})
}
});
})
}

72
src/router/index.js
View File

@ -8,6 +8,25 @@ import ErrorComponent from '../components/misc/error'
// User Handling
import LoginComponent from '../views/user/Login'
import RegisterComponent from '../views/user/Register'
// Tasks
import ShowTasksInRangeComponent from '../views/tasks/ShowTasksInRange'
import LinkShareAuthComponent from '../views/sharing/LinkSharingAuth'
import TaskDetailViewModal from '../views/tasks/TaskDetailViewModal'
import TaskDetailView from '../views/tasks/TaskDetailView'
import ListNamespaces from '../views/namespaces/ListNamespaces'
// Team Handling
import ListTeamsComponent from '../views/teams/ListTeams'
// Label Handling
import ListLabelsComponent from '../views/labels/ListLabels'
// Migration
import MigrationComponent from '../views/migrator/Migrate'
import MigrateServiceComponent from '../views/migrator/MigrateService'
// List Views
import ShowListComponent from '../views/list/ShowList'
import Kanban from '../views/list/views/Kanban'
import List from '../views/list/views/List'
import Gantt from '../views/list/views/Gantt'
import Table from '../views/list/views/Table'
const PasswordResetComponent = () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "user-settings" */'../views/user/PasswordReset'),
@ -40,11 +59,6 @@ const EditListComponent = () => ({
error: ErrorComponent,
timeout: 60000,
})
// Tasks
import ShowTasksInRangeComponent from '../views/tasks/ShowTasksInRange'
import LinkShareAuthComponent from '../views/sharing/LinkSharingAuth'
import TaskDetailViewModal from '../views/tasks/TaskDetailViewModal'
import TaskDetailView from '../views/tasks/TaskDetailView'
// Namespace Handling
const NewNamespaceComponent = () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "settings" */'../views/namespaces/NewNamespace'),
@ -58,9 +72,6 @@ const EditNamespaceComponent = () => ({
error: ErrorComponent,
timeout: 60000,
})
import ListNamespaces from '../views/namespaces/ListNamespaces'
// Team Handling
import ListTeamsComponent from '../views/teams/ListTeams'
const EditTeamComponent = () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "settings" */'../views/teams/EditTeam'),
@ -74,17 +85,6 @@ const NewTeamComponent = () => ({
error: ErrorComponent,
timeout: 60000,
})
// Label Handling
import ListLabelsComponent from '../views/labels/ListLabels'
// Migration
import MigrationComponent from '../views/migrator/Migrate'
import MigrateServiceComponent from '../views/migrator/MigrateService'
// List Views
import ShowListComponent from '../views/list/ShowList'
import Kanban from '../views/list/views/Kanban'
import List from '../views/list/views/List'
import Gantt from '../views/list/views/Gantt'
import Table from '../views/list/views/Table'
Vue.use(Router)
@ -99,7 +99,7 @@ export default new Router({
// Scroll to anchor should still work
if (to.hash) {
return {
selector: to.hash
selector: to.hash,
}
}
@ -110,7 +110,7 @@ export default new Router({
{
path: '/',
name: 'home',
component: HomeComponent
component: HomeComponent,
},
{
path: '*',
@ -120,22 +120,22 @@ export default new Router({
{
path: '/login',
name: 'user.login',
component: LoginComponent
component: LoginComponent,
},
{
path: '/get-password-reset',
name: 'user.password-reset.request',
component: GetPasswordResetComponent
component: GetPasswordResetComponent,
},
{
path: '/password-reset',
name: 'user.password-reset.reset',
component: PasswordResetComponent
component: PasswordResetComponent,
},
{
path: '/register',
name: 'user.register',
component: RegisterComponent
component: RegisterComponent,
},
{
path: '/user/settings',
@ -145,7 +145,7 @@ export default new Router({
{
path: '/share/:share/auth',
name: 'link-share.auth',
component: LinkShareAuthComponent
component: LinkShareAuthComponent,
},
{
path: '/namespaces',
@ -155,22 +155,22 @@ export default new Router({
{
path: '/namespaces/new',
name: 'namespace.create',
component: NewNamespaceComponent
component: NewNamespaceComponent,
},
{
path: '/namespaces/:id/edit',
name: 'namespace.edit',
component: EditNamespaceComponent
component: EditNamespaceComponent,
},
{
path: '/namespaces/:id/list',
name: 'list.create',
component: NewListComponent
component: NewListComponent,
},
{
path: '/lists/:id/edit',
name: 'list.edit',
component: EditListComponent
component: EditListComponent,
},
{
path: '/tasks/:id',
@ -228,27 +228,27 @@ export default new Router({
},
],
},
]
],
},
{
path: '/teams',
name: 'teams.index',
component: ListTeamsComponent
component: ListTeamsComponent,
},
{
path: '/teams/new',
name: 'teams.create',
component: NewTeamComponent
component: NewTeamComponent,
},
{
path: '/teams/:id/edit',
name: 'teams.edit',
component: EditTeamComponent
component: EditTeamComponent,
},
{
path: '/labels',
name: 'labels.index',
component: ListLabelsComponent
component: ListLabelsComponent,
},
{
path: '/migrate',
@ -260,5 +260,5 @@ export default new Router({
name: 'migrate.service',
component: MigrateServiceComponent,
},
]
],
})

6
src/services/abstractService.js
View File

@ -1,6 +1,6 @@
import axios from 'axios'
import {reduce, replace} from 'lodash'
import {objectToSnakeCase} from '../helpers/case'
import {objectToSnakeCase} from '@/helpers/case'
export default class AbstractService {
@ -380,7 +380,7 @@ export default class AbstractService {
})
.then(response => {
const result = this.modelCreateFactory(response.data)
if(typeof model.maxRight !== 'undefined') {
if (typeof model.maxRight !== 'undefined') {
result.maxRight = model.maxRight
}
return Promise.resolve(result)
@ -406,7 +406,7 @@ export default class AbstractService {
})
.then(response => {
const result = this.modelUpdateFactory(response.data)
if(typeof model.maxRight !== 'undefined') {
if (typeof model.maxRight !== 'undefined') {
result.maxRight = model.maxRight
}
return Promise.resolve(result)

16
src/services/attachment.js
View File

@ -38,17 +38,17 @@ export default class AttachmentService extends AbstractService {
method: 'GET',
responseType: 'blob',
}).then(response => {
return window.URL.createObjectURL(new Blob([response.data]));
return window.URL.createObjectURL(new Blob([response.data]))
})
}
download(model) {
this.getBlobUrl(model).then(url => {
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', model.file.name);
link.click();
window.URL.revokeObjectURL(url);
const link = document.createElement('a')
link.href = url
link.setAttribute('download', model.file.name)
link.click()
window.URL.revokeObjectURL(url)
})
}
@ -62,12 +62,12 @@ export default class AttachmentService extends AbstractService {
const data = new FormData()
for (let i = 0; i < files.length; i++) {
// TODO: Validation of file size
data.append('files', new Blob([files[i]]), files[i].name);
data.append('files', new Blob([files[i]]), files[i].name)
}
return this.uploadFormData(
this.getReplacedRoute(this.paths.create, model),
data
data,
)
}
}

2
src/services/backgroundUpload.js
View File

@ -26,7 +26,7 @@ export default class BackgroundUploadService extends AbstractService {
return this.uploadFile(
this.getReplacedRoute(this.paths.create, {listId: listId}),
file,
'background'
'background',
)
}
}

4
src/services/labelTask.js
View File

@ -1,5 +1,5 @@
import AbstractService from "./abstractService";
import LabelTask from "../models/labelTask";
import AbstractService from './abstractService'
import LabelTask from '../models/labelTask'
export default class LabelTaskService extends AbstractService {
constructor() {

2
src/services/listUsers.js
View File

@ -5,7 +5,7 @@ import {formatISO} from 'date-fns'
export default class ListUserService extends AbstractService {
constructor() {
super({
getAll: '/lists/{listId}/listusers'
getAll: '/lists/{listId}/listusers',
})
}

6
src/services/migrator/abstractMigrationService.js
View File

@ -7,17 +7,17 @@ export default class AbstractMigrationService extends AbstractService {
constructor(serviceUrlKey) {
super({
update: '/migration/'+serviceUrlKey+'/migrate',
update: '/migration/' + serviceUrlKey + '/migrate',
})
this.serviceUrlKey = serviceUrlKey
}
getAuthUrl() {
return this.getM('/migration/'+this.serviceUrlKey+'/auth')
return this.getM('/migration/' + this.serviceUrlKey + '/auth')
}
getStatus() {
return this.getM('/migration/'+this.serviceUrlKey+'/status')
return this.getM('/migration/' + this.serviceUrlKey + '/status')
}
migrate(data) {

2
src/services/namespace.js
View File

@ -10,7 +10,7 @@ export default class NamespaceService extends AbstractService {
getAll: '/namespaces',
update: '/namespaces/{id}',
delete: '/namespaces/{id}',
});
})
}
processModel(model) {

2
src/services/passwordUpdateService.js
View File

@ -3,7 +3,7 @@ import AbstractService from './abstractService'
export default class PasswordUpdateService extends AbstractService {
constructor() {
super({
update: '/user/password'
update: '/user/password',
})
}
}

2
src/services/task.js
View File

@ -13,7 +13,7 @@ export default class TaskService extends AbstractService {
get: '/tasks/{id}',
update: '/tasks/{id}',
delete: '/tasks/{id}',
});
})
}
modelFactory(data) {

2
src/services/team.js
View File

@ -10,7 +10,7 @@ export default class TeamService extends AbstractService {
getAll: '/teams',
update: '/teams/{id}',
delete: '/teams/{id}',
});
})
}
processModel(model) {

2
src/services/totp.js
View File

@ -1,5 +1,5 @@
import AbstractService from './abstractService'
import TotpModel from "../models/totp";
import TotpModel from '../models/totp'
export default class TotpService extends AbstractService {
urlPrefix = '/user/settings/totp'

2
src/services/user.js
View File

@ -5,7 +5,7 @@ import {formatISO} from 'date-fns'
export default class UserService extends AbstractService {
constructor() {
super({
getAll: '/users'
getAll: '/users',
})
}

9
src/store/index.js
View File

@ -1,8 +1,5 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import {CURRENT_LIST, ERROR_MESSAGE, HAS_TASKS, IS_FULLPAGE, LOADING, ONLINE} from './mutation-types'
import config from './modules/config'
import auth from './modules/auth'
@ -13,7 +10,9 @@ import lists from './modules/lists'
import attachments from './modules/attachments'
import ListService from '../services/list'
import {setTitle} from '../helpers/setTitle'
import {setTitle} from '@/helpers/setTitle'
Vue.use(Vuex)
export const store = new Vuex.Store({
modules: {
@ -97,6 +96,6 @@ export const store = new Vuex.Store({
},
[HAS_TASKS](state, hasTasks) {
state.hasTasks = hasTasks
}
},
},
})

16
src/store/modules/auth.js
View File

@ -1,6 +1,6 @@
import {HTTP} from '../../http-common'
import {ERROR_MESSAGE, LOADING} from "../mutation-types";
import UserModel from "../../models/user";
import {HTTP} from '@/http-common'
import {ERROR_MESSAGE, LOADING} from '../mutation-types'
import UserModel from '../../models/user'
export default {
namespaced: true,
@ -39,10 +39,10 @@ export default {
const data = {
username: credentials.username,
password: credentials.password
password: credentials.password,
}
if(credentials.totpPasscode) {
if (credentials.totpPasscode) {
data.totp_passcode = credentials.totpPasscode
}
@ -81,7 +81,7 @@ export default {
return HTTP.post('register', {
username: credentials.username,
email: credentials.email,
password: credentials.password
password: credentials.password,
})
.then(() => {
return ctx.dispatch('login', credentials)
@ -135,7 +135,7 @@ export default {
HTTP.post('user/token', null, {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('token'),
}
},
})
.then(r => {
localStorage.setItem('token', r.data.token)
@ -149,6 +149,6 @@ export default {
logout(ctx) {
localStorage.removeItem('token')
ctx.dispatch('checkAuth')
}
},
},
}

4
src/store/modules/config.js
View File

@ -1,5 +1,5 @@
import {CONFIG} from '../mutation-types'
import {HTTP} from '../../http-common'
import {HTTP} from '@/http-common'
export default {
namespaced: true,
@ -18,7 +18,7 @@ export default {
legal: {
imprintUrl: '',
privacyPolicyUrl: '',
}
},
}),
mutations: {
[CONFIG](state, config) {

4
src/store/modules/kanban.js
View File

@ -1,7 +1,7 @@
import Vue from 'vue'
import BucketService from '../../services/bucket'
import {filterObject} from '../../helpers/filterObject'
import {filterObject} from '@/helpers/filterObject'
import {setLoading} from '../helper'
/**
@ -90,7 +90,7 @@ export default {
return
}
}
}
},
},
getters: {
getTaskById: state => id => {

2
src/store/modules/lists.js
View File

@ -16,7 +16,7 @@ export default {
},
getters: {
getListById: state => id => {
if(typeof state[id] !== 'undefined') {
if (typeof state[id] !== 'undefined') {
return state[id]
}
return null

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

@ -95,7 +95,7 @@ export default {
},
loadNamespacesIfFavoritesDontExist(ctx) {
// The first namespace should be the one holding all favorites
if(ctx.state.namespaces[0].id !== -2) {
if (ctx.state.namespaces[0].id !== -2) {
return ctx.dispatch('loadNamespaces')
}
},

4
src/styles/components/attachments.scss
View File

@ -5,7 +5,7 @@
.dropzone {
position: fixed;
background: rgba(250,250,250,0.8);
background: rgba(250, 250, 250, 0.8);
top: 0;
left: 0;
bottom: 0;
@ -14,7 +14,7 @@
text-align: center;
&.hidden {
display:none;
display: none;
}
.drop-hint {

2
src/styles/components/base/card.scss
View File

@ -16,7 +16,7 @@
}
}
.box,.card{
.box, .card {
border: $thickness solid $border;
box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
}

26
src/styles/components/base/multiselect.scss
View File

@ -25,10 +25,12 @@ fieldset[disabled] .multiselect {
border-width: 2px;
box-shadow: 0 0 0 1px transparent;
}
&:before {
animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
animation-iteration-count: infinite;
}
&:after {
animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
animation-iteration-count: infinite;
@ -58,9 +60,11 @@ fieldset[disabled] .multiselect {
min-height: 40px;
text-align: left;
color: $text;
* {
box-sizing: border-box;
}
&:focus {
outline: none;
}
@ -73,12 +77,14 @@ fieldset[disabled] .multiselect {
.multiselect--active {
z-index: 50;
&:not(.multiselect--above) {
.multiselect__current, .multiselect__input, .multiselect__tags {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
.multiselect__select {
transform: rotateZ(180deg);
}
@ -131,6 +137,7 @@ fieldset[disabled] .multiselect {
border-color: $primary;
outline: none;
}
padding-left: 5px;
margin-bottom: 8px;
}
@ -184,14 +191,17 @@ fieldset[disabled] .multiselect {
line-height: 22px;
transition: all 0.2s ease;
border-radius: 5px;
&:after {
content: "×";
color: darken($multiselect-highlight, 20);
font-size: 14px;
}
&:focus, &:hover {
background: lighten($multiselect-highlight, 10);
}
&:focus:after, &:hover:after {
color: $white;
}
@ -227,6 +237,7 @@ fieldset[disabled] .multiselect {
text-align: center;
cursor: pointer;
transition: transform 0.2s ease;
&:before {
position: relative;
right: 0;
@ -305,6 +316,7 @@ fieldset[disabled] .multiselect {
position: relative;
cursor: pointer;
white-space: nowrap;
&:after {
top: 0;
right: 0;
@ -320,6 +332,7 @@ fieldset[disabled] .multiselect {
background: $multiselect-highlight;
outline: none;
color: $white;
&:after {
content: attr(data-select);
background: $multiselect-highlight;
@ -331,13 +344,16 @@ fieldset[disabled] .multiselect {
background: darken($white, 10);
color: $multiselect-dark;
font-weight: bold;
&:after {
content: attr(data-selected);
color: silver;
}
&.multiselect__option--highlight {
background: $multiselect-highlight-negative;
color: $white;
&:after {
background: $multiselect-highlight-negative;
content: attr(data-deselect);
@ -348,6 +364,7 @@ fieldset[disabled] .multiselect {
.multiselect--disabled {
pointer-events: none;
.multiselect__current, .multiselect__select {
background: $multiselect-disabled;
color: darken($multiselect-disabled, 40);
@ -364,9 +381,11 @@ fieldset[disabled] .multiselect {
.multiselect__option--group {
background: $multiselect-disabled;
color: $multiselect-dark;
&.multiselect__option--highlight {
background: $multiselect-dark;
color: $white;
&:after {
background: $multiselect-dark;
}
@ -380,6 +399,7 @@ fieldset[disabled] .multiselect {
.multiselect__option--group-selected.multiselect__option--highlight {
background: $multiselect-highlight-negative;
color: $white;
&:after {
background: $multiselect-highlight-negative;
content: attr(data-deselect);
@ -406,24 +426,30 @@ fieldset[disabled] .multiselect {
.multiselect {
text-align: right;
}
.multiselect__select {
right: auto;
left: 1px;
}
.multiselect__tags {
padding: 8px 8px 0px 40px;
}
.multiselect__content {
text-align: right;
}
.multiselect__option:after {
right: auto;
left: 0;
}
.multiselect__clear {
right: auto;
left: 12px;
}
.multiselect__spinner {
right: auto;
left: 1px;

3
src/styles/components/base/scrollbars.scss
View File

@ -1,4 +1,3 @@
// Chrome
::-webkit-scrollbar {
width: $scrollbar-height;
@ -25,7 +24,7 @@
}
// Firefox
*{
* {
scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
scrollbar-width: thin;
}

12
src/styles/components/fullpage.scss
View File

@ -1,4 +1,4 @@
.fullpage{
.fullpage {
position: fixed;
text-align: center;
top: 0;
@ -16,7 +16,7 @@
padding: 20vw 10vw;
}
input{
input {
background: transparent;
border: none;
border-bottom: 3px solid darken($vikunja-blue, 10);
@ -25,7 +25,7 @@
font-size: 1.5em;
border-radius: 0;
&::placeholder{
&::placeholder {
color: $vikunja-light-text;
}
}
@ -35,7 +35,7 @@
margin-top: 4px;
}
h3{
h3 {
font-size: 1.5em;
}
@ -46,12 +46,12 @@
color: $vikunja-light-text;
}
.small{
.small {
margin-top: 1em;
font-size: 0.5em;
}
}
.fullpage-overlay{
.fullpage-overlay {
z-index: 6 !important;
}

2
src/styles/components/gantt.scss
View File

@ -146,7 +146,7 @@ $gantt-vertical-border-color: lighten($grey, 45);
}
}
.high-priority{
.high-priority {
margin: 0 0 0 .5em;
vertical-align: bottom;
}

6
src/styles/components/labels.scss
View File

@ -1,13 +1,13 @@
.labels-list {
a, a:hover{
a, a:hover {
text-decoration: none;
}
.tag{
.tag {
margin: 0.5em;
background: darken($background, 5);
&.disabled{
&.disabled {
opacity: 0.7;
&, a {

41
src/styles/components/migrator.scss
View File

@ -47,18 +47,41 @@
animation: wave 2s ease infinite;
margin-right: 5px;
&:nth-child(1){ animation-delay: 0; }
&:nth-child(2){ animation-delay: 100ms; }
&:nth-child(3){ animation-delay: 200ms; }
&:nth-child(4){ animation-delay: 300ms; }
&:nth-child(5){ animation-delay: 400ms; }
&:nth-child(6){ animation-delay: 500ms; }
&:nth-child(7){ animation-delay: 600ms; }
&:nth-child(8){ animation-delay: 700ms; }
&:nth-child(1) {
animation-delay: 0;
}
&:nth-child(2) {
animation-delay: 100ms;
}
&:nth-child(3) {
animation-delay: 200ms;
}
&:nth-child(4) {
animation-delay: 300ms;
}
&:nth-child(5) {
animation-delay: 400ms;
}
&:nth-child(6) {
animation-delay: 500ms;
}
&:nth-child(7) {
animation-delay: 600ms;
}
&:nth-child(8) {
animation-delay: 700ms;
}
}
}
@keyframes wave{
@keyframes wave {
0%, 40%, 100% {
transform: translate(0, 0);
background-color: $primary;

10
src/styles/components/teams.scss
View File

@ -1,25 +1,25 @@
ul.teams{
ul.teams {
padding: 0;
margin-left: 0;
overflow: hidden;
li{
li {
list-style: none;
margin: 0;
border-bottom: 1px solid $border;
a{
a {
color: #363636;
display: block;
padding: 0.5rem 1rem;
&:hover{
&:hover {
background: darken(#fff, 2%);
}
}
}
li:last-child{
li:last-child {
border-bottom: none;
}
}

14
src/styles/theme/form.scss
View File

@ -12,7 +12,7 @@
box-shadow: 0.6em 0.6em 1em lighten($dark, 75);
}
&.fullheight{
&.fullheight {
padding-right: 7px;
height: 100%;
}
@ -25,7 +25,7 @@
box-shadow: 0.1em 0.1em 0.7em lighten($dark, 75) !important;
}
&.icon-only{
&.icon-only {
padding-left: 16px;
}
@ -58,7 +58,7 @@
color: $white;
}
&.noshadow{
&.noshadow {
&,
&.is-hovered,
&:hover,
@ -130,7 +130,7 @@
}
}
.bigbuttons{
.bigbuttons {
margin-top: 0.5rem;
}
@ -152,7 +152,7 @@
margin-bottom: 1rem;
}
.button-right{
.button-right {
float: right;
}
@ -161,7 +161,7 @@
}
// Contenteditable form
.input.title{
.input.title {
font-size: 1.8rem;
font-family: $vikunja-font;
font-weight: 400 !important;
@ -177,7 +177,7 @@
}
}
h1, h2, h3{
h1, h2, h3 {
.input.title {
height: auto;
}

4
src/styles/theme/link-share.scss
View File

@ -25,7 +25,7 @@
.link-share-list {
.field.has-addons {
.control:first-child{
.control:first-child {
width: 100%;
}
@ -49,7 +49,7 @@
overflow-y: auto
}
.link-share-container.has-background .container{
.link-share-container.has-background .container {
max-width: 100vw;
.column {

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

@ -3,6 +3,7 @@
position: relative;
pointer-events: none;
opacity: 0.5;
&:after {
@include loader;
position: absolute;
@ -15,9 +16,10 @@
}
}
.spinner{
.spinner {
&.is-loading {
pointer-events: none;
&:after {
@include loader;
width: 2em;

4
src/styles/theme/notification.scss
View File

@ -10,11 +10,11 @@
}
}
.notifications{
.notifications {
left: 0.5em !important;
bottom: 1em !important;
.notification-wrapper .notification{
.notification-wrapper .notification {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;

2
src/styles/theme/update-notification.scss
View File

@ -19,7 +19,7 @@
}
}
@media screen and (max-width: $tablet){
@media screen and (max-width: $tablet) {
& {
position: fixed;
left: 1em;

1
src/styles/utilities/animations.scss
View File

@ -1,4 +1,3 @@
@-webkit-keyframes bounce {
from,
20%,

2
src/styles/utilities/transitions.scss
View File

@ -1,6 +1,7 @@
.fade-enter-active, .fade-leave-active {
transition: opacity $transition-duration;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
@ -8,6 +9,7 @@
.width-enter-active, .width-leave-active {
transition: width $transition-duration;
}
.width-enter, .width-leave-to {
width: 0;
}

2
src/version.json
View File

@ -1,3 +1,3 @@
{
"VERSION": "0.12"
"VERSION": "dev"
}

4
src/views/404.vue
View File

@ -6,10 +6,10 @@
</template>
<script>
export default {
export default {
name: '404',
mounted() {
this.setTitle('404')
},
}
}
</script>

14
src/views/Home.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="content has-text-centered">
<h2>Hi {{userInfo.username}}!</h2>
<h2>Hi {{ userInfo.username }}!</h2>
<template v-if="!hasTasks">
<p>Click on a list or namespace on the left to get started.</p>
<router-link
class="button is-primary is-right noshadow is-outlined"
:to="{name: 'migrate.start'}"
class="button is-primary is-right noshadow is-outlined"
v-if="migratorsEnabled"
>
Import your data into Vikunja
@ -16,10 +16,10 @@
</template>
<script>
import {mapState} from 'vuex'
import ShowTasks from './tasks/ShowTasks'
import {mapState} from 'vuex'
import ShowTasks from './tasks/ShowTasks'
export default {
export default {
name: 'Home',
components: {
ShowTasks,
@ -28,7 +28,7 @@
return {
loading: false,
currentDate: new Date(),
tasks: []
tasks: [],
}
},
computed: mapState({
@ -37,5 +37,5 @@
userInfo: state => state.auth.info,
hasTasks: state => state.hasTasks,
}),
}
}
</script>

50
src/views/labels/ListLabels.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="loader-container content" :class="{ 'is-loading': labelService.loading}">
<div :class="{ 'is-loading': labelService.loading}" class="loader-container content">
<h1>Manage labels</h1>
<p>
Click on a label to edit it.
@ -9,10 +9,10 @@
<div class="columns">
<div class="labels-list column">
<span
v-for="l in labels" :key="l.id"
class="tag"
:class="{'disabled': userInfo.id !== l.createdBy.id}"
:class="{'disabled': userInfo.id !== l.createdBy.id}" :key="l.id"
:style="{'background': l.hexColor, 'color': l.textColor}"
class="tag"
v-for="l in labels"
>
<span
v-if="userInfo.id !== l.createdBy.id"
@ -20,12 +20,12 @@
{{ l.title }}
</span>
<a
@click="editLabel(l)"
:style="{'color': l.textColor}"
@click="editLabel(l)"
v-else>
{{ l.title }}
</a>
<a class="delete is-small" @click="deleteLabel(l)" v-if="userInfo.id === l.createdBy.id"></a>
<a @click="deleteLabel(l)" class="delete is-small" v-if="userInfo.id === l.createdBy.id"></a>
</span>
</div>
<div class="column is-4" v-if="isLabelEdit">
@ -34,7 +34,7 @@
<span class="card-header-title">
Edit Label
</span>
<a class="card-header-icon" @click="isLabelEdit = false">
<a @click="isLabelEdit = false" class="card-header-icon">
<span class="icon">
<icon icon="times"/>
</span>
@ -47,8 +47,8 @@
<div class="control">
<input
class="input"
type="text"
placeholder="Label title"
type="text"
v-model="labelEditLabel.title"/>
</div>
</div>
@ -56,10 +56,10 @@
<label class="label">Description</label>
<div class="control">
<editor
placeholder="Label description"
v-model="labelEditLabel.description"
:preview-is-default="false"
placeholder="Label description"
v-if="editorActive"
v-model="labelEditLabel.description"
/>
</div>
</div>
@ -71,15 +71,15 @@
</div>
<div class="field has-addons">
<div class="control is-expanded">
<button type="submit" class="button is-fullwidth is-primary"
:class="{ 'is-loading': labelService.loading}">
<button :class="{ 'is-loading': labelService.loading}" class="button is-fullwidth is-primary"
type="submit">
Save
</button>
</div>
<div class="control">
<a
class="button has-icon is-danger"
@click="() => {deleteLabel(labelEditLabel);isLabelEdit = false}">
@click="() => {deleteLabel(labelEditLabel);isLabelEdit = false}"
class="button has-icon is-danger">
<span class="icon">
<icon icon="trash-alt"/>
</span>
@ -95,15 +95,15 @@
</template>
<script>
import {mapState} from 'vuex'
import {mapState} from 'vuex'
import LabelService from '../../services/label'
import LabelModel from '../../models/label'
import ColorPicker from '../../components/input/colorPicker'
import LoadingComponent from '../../components/misc/loading'
import ErrorComponent from '../../components/misc/error'
import LabelService from '../../services/label'
import LabelModel from '../../models/label'
import ColorPicker from '../../components/input/colorPicker'
import LoadingComponent from '../../components/misc/loading'
import ErrorComponent from '../../components/misc/error'
export default {
export default {
name: 'ListLabels',
components: {
ColorPicker,
@ -132,7 +132,7 @@
this.setTitle('Labels')
},
computed: mapState({
userInfo: state => state.auth.info
userInfo: state => state.auth.info,
}),
methods: {
loadLabels() {
@ -204,7 +204,7 @@
// See https://github.com/NikulinIlya/vue-easymde/issues/3
this.editorActive = false
this.$nextTick(() => this.editorActive = true)
}
}
}
},
},
}
</script>

86
src/views/list/EditList.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="loader-container edit-list is-max-width-desktop" :class="{ 'is-loading': listService.loading}">
<div :class="{ 'is-loading': listService.loading}" class="loader-container edit-list is-max-width-desktop">
<div class="notification is-warning" v-if="list.isArchived">
This list is archived.
It is not possible to create new or edit tasks or it.
@ -17,14 +17,14 @@
<label class="label" for="listtext">List Name</label>
<div class="control">
<input
v-focus
:class="{ 'disabled': listService.loading}"
:disabled="listService.loading"
@keyup.enter="submit"
class="input"
type="text"
id="listtext"
placeholder="The list title goes here..."
@keyup.enter="submit"
type="text"
v-focus
v-model="list.title"/>
</div>
</div>
@ -37,14 +37,14 @@
</label>
<div class="control">
<input
v-focus
:class="{ 'disabled': listService.loading}"
:disabled="listService.loading"
@keyup.enter="submit"
class="input"
type="text"
id="listtext"
placeholder="The list identifier goes here..."
@keyup.enter="submit"
type="text"
v-focus
v-model="list.identifier"/>
</div>
</div>
@ -54,10 +54,10 @@
<editor
:class="{ 'disabled': listService.loading}"
:disabled="listService.loading"
placeholder="The lists description goes here..."
id="listdescription"
v-model="list.description"
:preview-is-default="false"
id="listdescription"
placeholder="The lists description goes here..."
v-model="list.description"
/>
</div>
</div>
@ -81,14 +81,14 @@
<div class="columns bigbuttons">
<div class="column">
<button @click="submit()" class="button is-primary is-fullwidth"
:class="{ 'is-loading': listService.loading}">
<button :class="{ 'is-loading': listService.loading}" @click="submit()"
class="button is-primary is-fullwidth">
Save
</button>
</div>
<div class="column is-1">
<button @click="showDeleteModal = true" class="button is-danger is-fullwidth"
:class="{ 'is-loading': listService.loading}">
<button :class="{ 'is-loading': listService.loading}" @click="showDeleteModal = true"
class="button is-danger is-fullwidth">
<span class="icon is-small">
<icon icon="trash-alt"/>
</span>
@ -114,10 +114,10 @@
</p>
<p class="control">
<button
type="submit"
class="button is-success"
:class="{'is-loading': listDuplicateService.loading}"
@click="duplicateList"
:class="{'is-loading': listDuplicateService.loading}">
class="button is-success"
type="submit">
<span class="icon is-small">
<icon icon="plus"/>
</span>
@ -132,24 +132,24 @@
<background :list-id="$route.params.id"/>
<component
:id="list.id"
:is="manageUsersComponent"
:id="list.id"
type="list"
:userIsAdmin="userIsAdmin"
shareType="user"
:userIsAdmin="userIsAdmin"/>
type="list"/>
<component
:is="manageTeamsComponent"
:id="list.id"
type="list"
:is="manageTeamsComponent"
:userIsAdmin="userIsAdmin"
shareType="team"
:userIsAdmin="userIsAdmin"/>
type="list"/>
<link-sharing :list-id="$route.params.id" v-if="linkSharingEnabled"/>
<modal
v-if="showDeleteModal"
@close="showDeleteModal = false"
@submit="deleteList()">
@submit="deleteList()"
v-if="showDeleteModal">
<span slot="header">Delete the list</span>
<p slot="text">Are you sure you want to delete this list and all of its contents?
<br/>This includes all tasks and <b>CANNOT BE UNDONE!</b></p>
@ -158,23 +158,23 @@
</template>
<script>
import router from '../../router'
import manageSharing from '../../components/sharing/userTeam'
import LinkSharing from '../../components/sharing/linkSharing'
import router from '../../router'
import manageSharing from '../../components/sharing/userTeam'
import LinkSharing from '../../components/sharing/linkSharing'
import ListModel from '../../models/list'
import ListService from '../../services/list'
import Fancycheckbox from '../../components/input/fancycheckbox'
import Background from '../../components/list/partials/background-settings'
import {CURRENT_LIST} from '../../store/mutation-types'
import ColorPicker from '../../components/input/colorPicker'
import NamespaceSearch from '../../components/namespace/namespace-search'
import ListDuplicateService from '../../services/listDuplicateService'
import ListDuplicateModel from '../../models/listDuplicateModel'
import LoadingComponent from '../../components/misc/loading'
import ErrorComponent from '../../components/misc/error'
import ListModel from '../../models/list'
import ListService from '../../services/list'
import Fancycheckbox from '../../components/input/fancycheckbox'
import Background from '../../components/list/partials/background-settings'
import {CURRENT_LIST} from '@/store/mutation-types'
import ColorPicker from '../../components/input/colorPicker'
import NamespaceSearch from '../../components/namespace/namespace-search'
import ListDuplicateService from '../../services/listDuplicateService'
import ListDuplicateModel from '../../models/listDuplicateModel'
import LoadingComponent from '../../components/misc/loading'
import ErrorComponent from '../../components/misc/error'
export default {
export default {
name: 'EditList',
data() {
return {
@ -211,7 +211,7 @@
},
watch: {
// call again the method if the route changes
'$route': 'loadList'
'$route': 'loadList',
},
computed: {
linkSharingEnabled() {
@ -275,6 +275,6 @@
this.error(e, this)
})
},
}
}
},
}
</script>

35
src/views/list/NewList.vue
View File

@ -1,23 +1,24 @@
<template>
<div class="fullpage">
<a class="close" @click="back()">
<a @click="back()" class="close">
<icon :icon="['far', 'times-circle']">
</icon>
</a>
<h3>Create a new list</h3>
<div class="field is-grouped">
<p class="control is-expanded" :class="{ 'is-loading': listService.loading}">
<input v-focus
class="input"
<p :class="{ 'is-loading': listService.loading}" class="control is-expanded">
<input
:class="{ 'disabled': listService.loading}"
v-model="list.title"
type="text"
placeholder="The list's name goes here..."
@keyup.enter="newList()"
@keyup.esc="back()"
@keyup.enter="newList()"/>
class="input"
placeholder="The list's name goes here..."
type="text"
v-focus
v-model="list.title"/>
</p>
<p class="control">
<button class="button is-success noshadow" @click="newList()" :disabled="list.title === ''">
<button :disabled="list.title === ''" @click="newList()" class="button is-success noshadow">
<span class="icon is-small">
<icon icon="plus"/>
</span>
@ -32,13 +33,13 @@
</template>
<script>
import router from '../../router'
import ListService from '../../services/list'
import ListModel from '../../models/list'
import {IS_FULLPAGE} from '../../store/mutation-types'
import router from '../../router'
import ListService from '../../services/list'
import ListModel from '../../models/list'
import {IS_FULLPAGE} from '@/store/mutation-types'
export default {
name: "NewList",
export default {
name: 'NewList',
data() {
return {
showError: false,
@ -77,6 +78,6 @@
back() {
router.go(-1)
},
}
}
},
}
</script>

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