local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Move buttons to separate component (#380)

Browse source 
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/380
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad 2021-01-17 17:57:57 +00:00
parent f3e0b79b26
commit 2aceca54ca
61 changed files with 2315 additions and 1825 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
cypress/integration/list/list.spec.js
View file

@ -29,7 +29,7 @@ describe('Lists', () => {
.contains('Create a new list')
cy.get('input.input')
.type('New List')
cy.get('button')
cy.get('.button')
.contains('Add')
.click()

2
cypress/integration/list/namespaces.spec.js
View file

@ -30,7 +30,7 @@ describe('Namepaces', () => {
.should('contain', 'Create a new namespace')
cy.get('input.input')
.type('New Namespace')
cy.get('button')
cy.get('.button')
.contains('Add')
.click()
cy.url()

4
cypress/integration/sharing/team.spec.js
View file

@ -17,7 +17,7 @@ describe('Team', () => {
.contains('Create a new team')
cy.get('input.input')
.type('New Team')
cy.get('button')
cy.get('.button')
.contains('Add')
.click()
@ -113,7 +113,7 @@ describe('Team', () => {
.click()
cy.get('.card')
.contains('Team Members')
.get('.card-content button.button')
.get('.card-content .button')
.contains('Add To Team')
.click()

8
cypress/integration/task/task.spec.js
View file

@ -28,7 +28,7 @@ describe('Task', () => {
cy.visit('/lists/1/list')
cy.get('input.input[placeholder="Add a new task..."')
.type('New Task')
cy.get('button.button')
cy.get('.button')
.contains('Add')
.click()
cy.get('.tasks .task .tasktext')
@ -44,7 +44,7 @@ describe('Task', () => {
.should('not.exist')
cy.get('input.input[placeholder="Add a new task..."')
.type('New Task')
cy.get('button.button')
cy.get('.button')
.contains('Add')
.click()
@ -175,7 +175,7 @@ describe('Task', () => {
.should('exist')
})
it('Can add a new comment', () => {
it.only('Can add a new comment', () => {
const tasks = TaskFactory.create(1, {
id: 1,
})
@ -183,7 +183,7 @@ describe('Task', () => {
cy.get('.task-view .comments .media.comment .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
.type('{selectall}New Comment')
cy.get('.task-view .comments .media.comment .button.is-primary')
cy.get('.task-view .comments .media.comment .button:not([disabled])')
.contains('Comment')
.click()

4
cypress/integration/user/login.spec.js
View file

@ -4,7 +4,7 @@ const testAndAssertFailed = fixture => {
cy.visit('/login')
cy.get('input[id=username]').type(fixture.username)
cy.get('input[id=password]').type(fixture.password)
cy.get('button').contains('Login').click()
cy.get('.button').contains('Login').click()
cy.wait(5000) // It can take waaaayy too long to log the user in
cy.url().should('include', '/')
@ -32,7 +32,7 @@ context('Login', () => {
cy.visit('/login')
cy.get('input[id=username]').type(fixture.username)
cy.get('input[id=password]').type(fixture.password)
cy.get('button').contains('Login').click()
cy.get('.button').contains('Login').click()
cy.url().should('include', '/')
cy.get('h2').should('contain', `Hi ${fixture.username}!`)
})

4
cypress/integration/user/registration.spec.js
View file

@ -26,7 +26,7 @@ context('Registration', () => {
cy.get('#email').type(fixture.email)
cy.get('#password1').type(fixture.password)
cy.get('#password2').type(fixture.password)
cy.get('button#register-submit').click()
cy.get('#register-submit').click()
cy.url().should('include', '/')
cy.get('h2').should('contain', `Hi ${fixture.username}!`)
})
@ -43,7 +43,7 @@ context('Registration', () => {
cy.get('#email').type(fixture.email)
cy.get('#password1').type(fixture.password)
cy.get('#password2').type(fixture.password)
cy.get('button#register-submit').click()
cy.get('#register-submit').click()
cy.get('div.notification.is-danger').contains('A user with this username already exists.')
})
})

2
cypress/integration/user/settings.spec.js
View file

@ -32,7 +32,7 @@ describe('User Settings', () => {
cy.get('input#newName')
.type('Lorem Ipsum')
cy.get('.card.update-name button.button.is-primary')
cy.get('.card.general-settings .button.is-primary')
.contains('Save')
.click()

8
src/components/home/contentLinkShare.vue
View file

@ -14,12 +14,12 @@
</h1>
<div class="box has-text-left view">
<div class="logout">
<a @click="logout()" class="button">
<x-button @click="logout()" type="secondary">
<span>Logout</span>
<span class="icon is-small">
<icon icon="sign-out-alt"/>
</span>
</a>
</x-button>
</div>
<router-view/>
<a class="menu-bottom-link" href="https://vikunja.io" target="_blank">
@ -49,7 +49,3 @@ export default {
},
}
</script>
<style scoped>
</style>

7
src/components/home/topNavigation.vue
View file

@ -44,12 +44,15 @@
<img :src="userAvatar" alt="" class="avatar"/>
<div class="dropdown is-right is-active">
<div class="dropdown-trigger">
<button @click.stop="userMenuActive = !userMenuActive" class="button has-no-shadow">
<x-button
@click.stop="userMenuActive = !userMenuActive"
type="secondary"
:shadow="false">
<span class="username">{{ userInfo.name !== '' ? userInfo.name : userInfo.username }}</span>
<span class="icon is-small">
<icon icon="chevron-down"/>
</span>
</button>
</x-button>
</div>
<transition name="fade">
<div class="dropdown-menu" v-if="userMenuActive">

4
src/components/home/update.vue
View file

@ -1,7 +1,9 @@
<template>
<div class="update-notification" v-if="updateAvailable">
<p>There is an update for Vikunja available!</p>
<a @click="refreshApp()" class="button is-primary has-no-shadow">Update Now</a>
<x-button @click="refreshApp()" :shadow="false">
Update Now
</x-button>
</div>
</template>

74
src/components/input/button.vue Normal file
View file

@ -0,0 +1,74 @@
<template>
<a
class="button"
:class="{
'is-loading': loading,
'has-no-shadow': !shadow,
'is-primary': type === 'primary',
'is-outlined': type === 'secondary',
'is-text is-inverted has-no-shadow underline-none':
type === 'tertary',
}"
:disabled="disabled"
@click="click"
:href="href !== '' ? href : false"
>
<icon :icon="icon" v-if="showIconOnly"/>
<span class="icon is-small" v-else-if="icon !== ''">
<icon :icon="icon"/>
</span>
<slot></slot>
</a>
</template>
<script>
export default {
name: 'x-button',
props: {
type: {
type: String,
default: 'primary',
},
href: {
type: String,
default: '',
},
to: {
default: false,
},
icon: {
default: '',
},
loading: {
type: Boolean,
default: false,
},
shadow: {
type: Boolean,
default: true,
},
disabled: {
type: Boolean,
default: false,
},
},
computed: {
showIconOnly() {
return this.icon !== '' && typeof this.$slots.default === 'undefined'
}
},
methods: {
click(e) {
if (this.disabled) {
return
}
if (this.to !== false) {
this.$router.push(this.to)
}
this.$emit('click', e)
},
},
}
</script>

4
src/components/input/colorPicker.vue
View file

@ -16,9 +16,9 @@
model="hex"
picker="square"
v-model="color"/>
<a @click="reset" class="button has-no-shadow is-small ml-2">
<x-button @click="reset" class="is-small ml-2" :shadow="false" type="secondary">
Reset Color
</a>
</x-button>
</div>
</template>

7
src/components/input/datepicker.vue
View file

@ -97,12 +97,13 @@
v-model="flatPickrDate"
/>
<a
class="button is-primary has-no-shadow is-fullwidth"
<x-button
class="is-fullwidth"
:shadow="false"
@click="close"
>
Confirm
</a>
</x-button>
</div>
</transition>
</div>

18
src/components/input/editor.vue
View file

@ -1,12 +1,22 @@
<template>
<div :class="{'is-pulled-up': isEditEnabled}" class="editor">
<div class="is-pulled-right mb-4" v-if="hasPreview && isEditEnabled && !hasEditBottom">
<a v-if="!isEditActive" @click="toggleEdit" class="button has-no-shadow">
<x-button
v-if="!isEditActive"
@click="toggleEdit"
:shadow="false"
type="secondary"
>
<icon icon="pen"/>
</a>
<a v-else @click="toggleEdit" class="button has-no-shadow">
</x-button>
<x-button
v-else
@click="toggleEdit"
:shadow="false"
type="secondary"
>
Done
</a>
</x-button>
</div>
<div class="clear"></div>

4
src/components/input/multiselect.vue
View file

@ -35,7 +35,7 @@
<div class="search-results" v-if="searchResultsVisible">
<button
v-if="creatableAvailable"
class="button is-ghost is-fullwidth"
class="is-fullwidth"
ref="result--1"
@keydown.up.prevent="() => preSelect(-2)"
@keydown.down.prevent="() => preSelect(0)"
@ -55,7 +55,7 @@
</button>
<button
class="button is-ghost is-fullwidth"
class="is-fullwidth"
v-for="(data, key) in filteredSearchResults"
:key="key"
:ref="`result-${key}`"

39
src/components/list/partials/background-settings.vue
View file

@ -1,15 +1,11 @@
<template>
<div
<card
:class="{ 'is-loading': backgroundService.loading}"
class="card list-background-setting loader-container"
v-if="uploadBackgroundEnabled || unsplashBackgroundEnabled">
<header class="card-header">
<p class="card-header-title">
Set list background
</p>
</header>
<div class="card-content">
<div class="content" v-if="uploadBackgroundEnabled">
class="list-background-setting loader-container"
v-if="uploadBackgroundEnabled || unsplashBackgroundEnabled"
title="Set list background"
>
<div class="mb-4" v-if="uploadBackgroundEnabled">
<input
@change="uploadBackground"
accept="image/*"
@ -17,15 +13,15 @@
ref="backgroundUploadInput"
type="file"
/>
<a
:class="{'is-loading': backgroundUploadService.loading}"
<x-button
:loading="backgroundUploadService.loading"
@click="$refs.backgroundUploadInput.click()"
class="button is-primary"
type="primary"
>
Choose a background from your pc
</a>
</x-button>
</div>
<div class="content" v-if="unsplashBackgroundEnabled">
<template v-if="unsplashBackgroundEnabled">
<input
:class="{'is-loading': backgroundService.loading}"
@keyup="() => newBackgroundSearch()"
@ -47,10 +43,12 @@
</a>
</a>
</div>
<a
<x-button
:disabled="backgroundService.loading"
@click="() => searchBackgrounds(currentPage + 1)"
class="button is-centered is-load-more-button has-no-shadow mt-4"
class="is-load-more-button mt-4"
:shadow="false"
type="secondary"
v-if="backgroundSearchResult.length > 0"
>
<template v-if="backgroundService.loading">
@ -59,10 +57,9 @@
<template v-else>
Load more photos
</template>
</a>
</div>
</div>
</div>
</x-button>
</template>
</card>
</template>
<script>

6
src/components/list/partials/filters.vue
View file

@ -1,6 +1,5 @@
<template>
<div class="card filters has-overflow">
<div class="card-content">
<card class="filters has-overflow">
<fancycheckbox v-model="params.filter_include_nulls">
Include Tasks which don't have a value set
</fancycheckbox>
@ -175,8 +174,7 @@
</div>
</div>
</template>
</div>
</div>
</card>
</template>
<script>

14
src/components/migrator/migration.vue
View file

@ -4,13 +4,13 @@
<p>Vikunja will import all lists, tasks, notes, reminders and files you have access to.</p>
<template v-if="isMigrating === false && message === '' && lastMigrationDate === null">
<p>To authorize Vikunja to access your {{ name }} Account, click the button below.</p>
<a
:class="{'is-loading': migrationService.loading}"
<x-button
:loading="migrationService.loading"
:disabled="migrationService.loading"
:href="authUrl"
class="button is-primary">
>
Get Started
</a>
</x-button>
</template>
<div
class="migration-in-progress-container"
@ -38,8 +38,8 @@
Are you sure?
</p>
<div class="buttons">
<button @click="migrate" class="button is-primary">I am sure, please start migrating now!</button>
<router-link :to="{name: 'home'}" class="button is-text has-text-danger is-inverted has-no-shadow underline-none">Cancel</router-link>
<x-button @click="migrate">I am sure, please start migrating now!</x-button>
<x-button :to="{name: 'home'}" type="tertary" class="has-text-danger">Cancel</x-button>
</div>
</div>
<div v-else>
@ -48,7 +48,7 @@
{{ message }}
</div>
</div>
<router-link :to="{name: 'home'}" class="button is-primary">Refresh</router-link>
<x-button :to="{name: 'home'}">Refresh</x-button>
</div>
</div>
</template>

71
src/components/misc/api-config.vue
View file

@ -5,7 +5,8 @@
<div class="field has-addons">
<div class="control is-expanded">
<input
class="input" id="api-url"
class="input"
id="api-url"
placeholder="eg. https://localhost:3456"
required
type="url"
@ -15,21 +16,29 @@
/>
</div>
<div class="control">
<a class="button is-primary" @click="setApiUrl" :disabled="apiUrl === ''">
<x-button @click="setApiUrl" :disabled="apiUrl === ''">
Change
</a>
</x-button>
</div>
</div>
</div>
<div class="api-url-info" v-else>
Sign in to your Vikunja account on <span v-tooltip="apiUrl">{{ apiDomain() }}</span><br/>
<a @click="() => configureApi = true">change</a>
Sign in to your Vikunja account on
<span v-tooltip="apiUrl"> {{ apiDomain() }} </span>
<br />
<a @click="() => (configureApi = true)">change</a>
</div>
<div class="notification is-success mt-2" v-if="successMsg !== '' && errorMsg === ''">
<div
class="notification is-success mt-2"
v-if="successMsg !== '' && errorMsg === ''"
>
{{ successMsg }}
</div>
<div class="notification is-danger mt-2" v-if="errorMsg !== '' && successMsg === ''">
<div
class="notification is-danger mt-2"
v-if="errorMsg !== '' && successMsg === ''"
>
{{ errorMsg }}
</div>
</div>
@ -57,7 +66,9 @@ export default {
if (window.API_URL.startsWith('/api/v1')) {
return window.location.host
}
const urlParts = window.API_URL.replace('http://', '').replace('https://', '').split(/[/?#]/)
const urlParts = window.API_URL.replace('http://', '')
.replace('https://', '')
.split(/[/?#]/)
return urlParts[0]
},
setApiUrl() {
@ -68,7 +79,10 @@ export default {
let urlToCheck = this.apiUrl
// Check if the url has an http prefix
if (!urlToCheck.startsWith('http://') && !urlToCheck.startsWith('https://')) {
if (
!urlToCheck.startsWith('http://') &&
!urlToCheck.startsWith('https://')
) {
urlToCheck = `http://${urlToCheck}`
}
@ -79,17 +93,21 @@ export default {
window.API_URL = urlToCheck.toString()
// Check if the api is reachable at the provided url
this.$store.dispatch('config/update')
.catch(e => {
this.$store
.dispatch('config/update')
.catch((e) => {
// Check if it is reachable at /api/v1 and http
if (!urlToCheck.pathname.endsWith('/api/v1') && !urlToCheck.pathname.endsWith('/api/v1/')) {
if (
!urlToCheck.pathname.endsWith('/api/v1') &&
!urlToCheck.pathname.endsWith('/api/v1/')
) {
urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
window.API_URL = urlToCheck.toString()
return this.$store.dispatch('config/update')
}
return Promise.reject(e)
})
.catch(e => {
.catch((e) => {
// Check if it has a port and if not check if it is reachable at https
if (urlToCheck.protocol === 'http:') {
urlToCheck.protocol = 'https:'
@ -98,17 +116,20 @@ export default {
}
return Promise.reject(e)
})
.catch(e => {
.catch((e) => {
// Check if it is reachable at /api/v1 and https
urlToCheck.pathname = origUrlToCheck.pathname
if (!urlToCheck.pathname.endsWith('/api/v1') && !urlToCheck.pathname.endsWith('/api/v1/')) {
if (
!urlToCheck.pathname.endsWith('/api/v1') &&
!urlToCheck.pathname.endsWith('/api/v1/')
) {
urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
window.API_URL = urlToCheck.toString()
return this.$store.dispatch('config/update')
}
return Promise.reject(e)
})
.catch(e => {
.catch((e) => {
// Check if it is reachable at port 3456 and https
if (urlToCheck.port !== 3456) {
urlToCheck.protocol = 'https:'
@ -118,17 +139,20 @@ export default {
}
return Promise.reject(e)
})
.catch(e => {
.catch((e) => {
// Check if it is reachable at :3456 and /api/v1 and https
urlToCheck.pathname = origUrlToCheck.pathname
if (!urlToCheck.pathname.endsWith('/api/v1') && !urlToCheck.pathname.endsWith('/api/v1/')) {
if (
!urlToCheck.pathname.endsWith('/api/v1') &&
!urlToCheck.pathname.endsWith('/api/v1/')
) {
urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
window.API_URL = urlToCheck.toString()
return this.$store.dispatch('config/update')
}
return Promise.reject(e)
})
.catch(e => {
.catch((e) => {
// Check if it is reachable at port 3456 and http
if (urlToCheck.port !== 3456) {
urlToCheck.protocol = 'http:'
@ -138,10 +162,13 @@ export default {
}
return Promise.reject(e)
})
.catch(e => {
.catch((e) => {
// Check if it is reachable at :3456 and /api/v1 and http
urlToCheck.pathname = origUrlToCheck.pathname
if (!urlToCheck.pathname.endsWith('/api/v1') && !urlToCheck.pathname.endsWith('/api/v1/')) {
if (
!urlToCheck.pathname.endsWith('/api/v1') &&
!urlToCheck.pathname.endsWith('/api/v1/')
) {
urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
window.API_URL = urlToCheck.toString()
return this.$store.dispatch('config/update')
@ -154,7 +181,7 @@ export default {
this.errorMsg = `Could not find or use Vikunja installation at "${this.apiDomain()}".`
window.API_URL = oldUrl
})
.then(r => {
.then((r) => {
if (typeof r !== 'undefined') {
// Set it + save it to local storage to save us the hoops
this.errorMsg = ''

39
src/components/misc/card.vue Normal file
View file

@ -0,0 +1,39 @@
<template>
<div class="card">
<header class="card-header" v-if="title !== ''">
<p class="card-header-title">
{{ title }}
</p>
<a @click="$emit('close')" class="card-header-icon" v-if="hasClose">
<span class="icon">
<icon icon="angle-right"/>
</span>
</a>
</header>
<div class="card-content" :class="{'p-0': !padding}">
<div class="content">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'card',
props: {
title: {
type: String,
default: '',
},
padding: {
type: Boolean,
default: true,
},
hasClose: {
type: Boolean,
default: false,
},
},
}
</script>

47
src/components/misc/keyboard-shortcuts.vue
View file

@ -2,18 +2,10 @@
<div class="modal-mask keyboard-shortcuts-modal">
<div @click.self="close()" class="modal-container">
<div class="modal-content">
<div class="card has-background-white has-no-shadow">
<header class="card-header">
<p class="card-header-title">Available Keyboard Shortcuts</p>
</header>
<div class="card-content content">
<card class="has-background-white has-no-shadow" title="Available Keyboard Shortcuts">
<p>
<strong>Toggle The Menu</strong>
<span class="shortcuts">
<span>ctrl</span>
<i>+</i>
<span>e</span>
</span>
<shortcut :keys="['ctrl', 'e']"/>
</p>
<h3>Kanban</h3>
<div class="message is-primary" v-if="$route.name === 'list.kanban'">
@ -23,50 +15,37 @@
</div>
<p>
<strong>Mark a task as done</strong>
<span class="shortcuts">
<span>ctrl</span>
<i>+</i>
<span>click</span>
</span>
<shortcut :keys="['ctrl', 'click']"/>
</p>
<h3>Task Page</h3>
<div class="message is-primary" v-if="$route.name === 'task.detail' || $route.name === 'task.list.detail' || $route.name === 'task.gantt.detail' || $route.name === 'task.kanban.detail' || $route.name === 'task.detail'">
<div
class="message is-primary"
v-if="$route.name === 'task.detail' || $route.name === 'task.list.detail' || $route.name === 'task.gantt.detail' || $route.name === 'task.kanban.detail' || $route.name === 'task.detail'">
<div class="message-body">
These shortcuts work on the current page.
</div>
</div>
<p>
<strong>Assign this task to a user</strong>
<span class="shortcuts">
<span>a</span>
</span>
<shortcut :keys="['a']"/>
</p>
<p>
<strong>Add labels to this task</strong>
<span class="shortcuts">
<span>l</span>
</span>
<shortcut :keys="['l']"/>
</p>
<p>
<strong>Change the due date of this task</strong>
<span class="shortcuts">
<span>d</span>
</span>
<shortcut :keys="['d']"/>
</p>
<p>
<strong>Add an attachment to this task</strong>
<span class="shortcuts">
<span>f</span>
</span>
<shortcut :keys="['f']"/>
</p>
<p>
<strong>Modify related tasks of this task</strong>
<span class="shortcuts">
<span>r</span>
</span>
<shortcut :keys="['r']"/>
</p>
</div>
</div>
</card>
</div>
</div>
</div>
@ -74,9 +53,11 @@
<script>
import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
import Shortcut from '@/components/misc/shortcut'
export default {
name: 'keyboard-shortcuts',
components: {Shortcut},
methods: {
close() {
this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)

34
src/components/misc/notification.vue
View file

@ -1,27 +1,40 @@
<template>
<notifications position="bottom left" :max="2" class="global-notification">
<template slot="body" slot-scope="props">
<div :class="['vue-notification-template', 'vue-notification', props.item.type]" @click="close(props)">
<div
:class="[
'vue-notification-template',
'vue-notification',
props.item.type,
]"
@click="close(props)"
>
<div
class="notification-title"
v-html="props.item.title"
v-if="props.item.title"
>
</div>
></div>
<div
class="notification-content"
v-html="props.item.text"
>
</div>
></div>
<div
class="buttons is-right"
v-if="props.item.data && props.item.data.actions && props.item.data.actions.length > 0">
<button
v-if="
props.item.data &&
props.item.data.actions &&
props.item.data.actions.length > 0
"
>
<x-button
:key="'action_' + i"
@click="action.callback"
class="button has-no-shadow is-small" v-for="(action, i) in props.item.data.actions">
:shadow="false"
class="is-small"
v-for="(action, i) in props.item.data.actions"
>
{{ action.title }}
</button>
</x-button>
</div>
</div>
</template>
@ -40,12 +53,11 @@ export default {
</script>
<style scoped>
.vue-notification {
z-index: 9999;
}
.buttons {
margin-top: .5em;
margin-top: 0.5em;
}
</style>

20
src/components/misc/shortcut.vue Normal file
View file

@ -0,0 +1,20 @@
<template>
<span class="shortcuts">
<template v-for="(k, i) in keys">
<span :key="i">{{ k }}</span>
<i v-if="i < keys.length - 1" :key="`plus${i}`">+</i>
</template>
</span>
</template>
<script>
export default {
name: 'shortcut',
props: {
keys: {
type: Array,
required: true,
}
},
}
</script>

16
src/components/modal/modal.vue
View file

@ -11,8 +11,20 @@
<slot name="text"></slot>
</div>
<div class="actions">
<button @click="$emit('close')" class="button is-text has-text-danger is-inverted has-no-shadow underline-none">Cancel</button>
<button @click="$emit('submit')" class="button is-primary has-no-shadow">Do it!</button>
<x-button
@click="$emit('close')"
type="tertary"
class="has-text-danger"
>
Cancel
</x-button>
<x-button
@click="$emit('submit')"
type="primary"
:shadow="false"
>
Do it!
</x-button>
</div>
</slot>
</div>

116
src/components/sharing/linkSharing.vue
View file

@ -1,33 +1,29 @@
<template>
<div class="card is-fullwidth">
<header class="card-header">
<p class="card-header-title">
Share links
</p>
</header>
<div class="card-content content sharables-list">
<form @submit.prevent="add()" class="add-form">
<p>
Share with a link:
</p>
<card title="Share links" class="is-fullwidth" :padding="false">
<div class="sharables-list">
<div class="p-4">
<p>Share with a link:</p>
<div class="field has-addons">
<div class="control">
<div class="select">
<select v-model="selectedRight">
<option :value="rights.READ">Read only</option>
<option :value="rights.READ_WRITE">Read & write</option>
<option :value="rights.READ_WRITE">
Read & write
</option>
<option :value="rights.ADMIN">Admin</option>
</select>
</div>
</div>
<div class="control">
<button class="button is-primary" type="submit">
Share
</button>
<x-button @click="add"> Share</x-button>
</div>
</div>
</form>
<table class="table is-striped is-hoverable is-fullwidth link-share-list" v-if="linkShares.length > 0">
</div>
<table
class="table is-striped is-hoverable is-fullwidth link-share-list"
v-if="linkShares.length > 0"
>
<thead>
<tr>
<th>Link</th>
@ -41,14 +37,23 @@
<td>
<div class="field has-addons no-input-mobile">
<div class="control">
<input :value="getShareLink(s.hash)" class="input" readonly type="text"/>
<input
:value="getShareLink(s.hash)"
class="input"
readonly
type="text"
/>
</div>
<div class="control">
<a @click="copy(getShareLink(s.hash))" class="button is-primary has-no-shadow" v-tooltip="'Copy to clipboard'">
<x-button
@click="copy(getShareLink(s.hash))"
:shadow="false"
v-tooltip="'Copy to clipboard'"
>
<span class="icon">
<icon icon="paste"/>
</span>
</a>
</x-button>
</div>
</div>
</td>
@ -76,11 +81,16 @@
</template>
</td>
<td class="actions">
<button @click="() => {linkIdToDelete = s.id; showDeleteModal = true}" class="button is-danger icon-only">
<span class="icon">
<icon icon="trash-alt"/>
</span>
</button>
<x-button
@click="
() => {
linkIdToDelete = s.id
showDeleteModal = true
}
"
class="is-danger"
icon="trash-alt"
/>
</td>
</tr>
</tbody>
@ -90,13 +100,17 @@
<modal
@close="showDeleteModal = false"
@submit="remove()"
v-if="showDeleteModal">
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/>
<b>This CANNOT BE UNDONE!</b></p>
<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/>
<b>This CANNOT BE UNDONE!</b>
</p>
</modal>
</div>
</card>
</template>
<script>
@ -135,12 +149,13 @@ export default {
this.load()
},
watch: {
listId() { // watch it
listId() {
// watch it
this.load()
},
},
computed: mapState({
frontendUrl: state => state.config.frontendUrl,
frontendUrl: (state) => state.config.frontendUrl,
}),
methods: {
load() {
@ -149,34 +164,49 @@ export default {
return
}
this.linkShareService.getAll({listId: this.listId})
.then(r => {
this.linkShareService
.getAll({listId: this.listId})
.then((r) => {
this.linkShares = r
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},
add() {
let newLinkShare = new LinkShareModel({right: this.selectedRight, listId: this.listId})
this.linkShareService.create(newLinkShare)
let newLinkShare = new LinkShareModel({
right: this.selectedRight,
listId: this.listId,
})
this.linkShareService
.create(newLinkShare)
.then(() => {
this.selectedRight = rights.READ
this.success({message: 'The link share was successfully created'}, this)
this.success(
{message: 'The link share was successfully created'},
this
)
this.load()
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},
remove() {
let linkshare = new LinkShareModel({id: this.linkIdToDelete, listId: this.listId})
this.linkShareService.delete(linkshare)
let linkshare = new LinkShareModel({
id: this.linkIdToDelete,
listId: this.listId,
})
this.linkShareService
.delete(linkshare)
.then(() => {
this.success({message: 'The link share was successfully deleted'}, this)
this.success(
{message: 'The link share was successfully deleted'},
this
)
this.load()
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
.finally(() => {

180
src/components/sharing/userTeam.vue
View file

@ -1,13 +1,11 @@
<template>
<div class="card is-fullwidth has-overflow">
<header class="card-header">
<p class="card-header-title">
Shared with these {{ shareType }}s
</p>
</header>
<div class="card-content" v-if="userIsAdmin">
<card class="is-fullwidth has-overflow" :title="`Shared with these ${shareType}s`" :padding="false">
<div class="p-4" v-if="userIsAdmin">
<div class="field has-addons">
<p class="control is-expanded" v-bind:class="{ 'is-loading': searchService.loading}">
<p
class="control is-expanded"
v-bind:class="{ 'is-loading': searchService.loading }"
>
<multiselect
:loading="searchService.loading"
placeholder="Type to search..."
@ -18,9 +16,7 @@
/>
</p>
<p class="control">
<button class="button is-primary" @click="add()">
Share
</button>
<x-button @click="add()"> Share </x-button>
</p>
</div>
</div>
@ -37,7 +33,12 @@
</template>
<template v-if="shareType === 'team'">
<td>
<router-link :to="{name: 'teams.edit', params: {id: s.id}}">
<router-link
:to="{
name: 'teams.edit',
params: { id: s.id },
}"
>
{{ s.name }}
</router-link>
</td>
@ -64,20 +65,41 @@
</td>
<td class="actions" v-if="userIsAdmin">
<div class="select">
<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
<select
@change="toggleType(s)"
class="button mr-2"
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>
<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">
<span class="icon">
<icon icon="trash-alt"/>
</span>
</button>
<x-button
@click="
() => {
sharable = s
showDeleteModal = true
}
"
class="is-danger"
icon="trash-alt"
/>
</td>
</tr>
</tbody>
@ -86,12 +108,18 @@
<modal
@close="showDeleteModal = false"
@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>
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>
</card>
</template>
<script>
@ -155,10 +183,9 @@ export default {
Multiselect,
},
computed: mapState({
userInfo: state => state.auth.info,
userInfo: (state) => state.auth.info,
}),
created() {
if (this.shareType === 'user') {
this.searchService = new UserService()
this.sharable = new UserModel()
@ -171,7 +198,9 @@ export default {
} else if (this.type === 'namespace') {
this.typeString = `namespace`
this.stuffService = new UserNamespaceService()
this.stuffModel = new UserNamespaceModel({namespaceId: this.id})
this.stuffModel = new UserNamespaceModel({
namespaceId: this.id,
})
} else {
throw new Error('Unknown type: ' + this.type)
}
@ -187,7 +216,9 @@ export default {
} else if (this.type === 'namespace') {
this.typeString = `namespace`
this.stuffService = new TeamNamespaceService()
this.stuffModel = new TeamNamespaceModel({namespaceId: this.id})
this.stuffModel = new TeamNamespaceModel({
namespaceId: this.id,
})
} else {
throw new Error('Unknown type: ' + this.type)
}
@ -199,36 +230,51 @@ export default {
},
methods: {
load() {
this.stuffService.getAll(this.stuffModel)
.then(r => {
this.stuffService
.getAll(this.stuffModel)
.then((r) => {
this.$set(this, 'sharables', r)
r.forEach(s => this.$set(this.selectedRight, s.id, s.right))
r.forEach((s) =>
this.$set(this.selectedRight, s.id, s.right)
)
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},
deleteSharable() {
if (this.shareType === 'user') {
this.stuffModel.userId = this.sharable.username
} else if (this.shareType === 'team') {
this.stuffModel.teamId = this.sharable.id
}
this.stuffService.delete(this.stuffModel)
this.stuffService
.delete(this.stuffModel)
.then(() => {
this.showDeleteModal = false
for (const i in this.sharables) {
if (
(this.sharables[i].id === this.stuffModel.userId && this.shareType === 'user') ||
(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
(this.sharables[i].id === this.stuffModel.userId &&
this.shareType === 'user') ||
(this.sharables[i].id === this.stuffModel.teamId &&
this.shareType === 'team')
) {
this.sharables.splice(i, 1)
}
}
this.success({message: 'The ' + this.shareType + ' was successfully deleted from the ' + this.typeString + '.'}, this)
this.success(
{
message:
'The ' +
this.shareType +
' was successfully deleted from the ' +
this.typeString +
'.',
},
this
)
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},
@ -247,17 +293,27 @@ export default {
this.stuffModel.teamId = this.sharable.id
}
this.stuffService.create(this.stuffModel)
this.stuffService
.create(this.stuffModel)
.then(() => {
this.success({message: 'The ' + this.shareType + ' was successfully added.'}, this)
this.success(
{
message:
'The ' +
this.shareType +
' was successfully added.',
},
this
)
this.load()
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},
toggleType(sharable) {
if (this.selectedRight[sharable.id] !== rights.ADMIN &&
if (
this.selectedRight[sharable.id] !== rights.ADMIN &&
this.selectedRight[sharable.id] !== rights.READ &&
this.selectedRight[sharable.id] !== rights.READ_WRITE
) {
@ -265,26 +321,37 @@ export default {
}
this.stuffModel.right = this.selectedRight[sharable.id]
if (this.shareType === 'user') {
this.stuffModel.userId = sharable.username
} else if (this.shareType === 'team') {
this.stuffModel.teamId = sharable.id
}
this.stuffService.update(this.stuffModel)
.then(r => {
this.stuffService
.update(this.stuffModel)
.then((r) => {
for (const i in this.sharables) {
if (
(this.sharables[i].username === this.stuffModel.userId && this.shareType === 'user') ||
(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
(this.sharables[i].username ===
this.stuffModel.userId &&
this.shareType === 'user') ||
(this.sharables[i].id === this.stuffModel.teamId &&
this.shareType === 'team')
) {
this.$set(this.sharables[i], 'right', r.right)
}
}
this.success({message: 'The ' + this.shareType + ' right was successfully updated.'}, this)
this.success(
{
message:
'The ' +
this.shareType +
' right was successfully updated.',
},
this
)
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},
@ -294,11 +361,12 @@ export default {
return
}
this.searchService.getAll({}, {s: query})
.then(response => {
this.searchService
.getAll({}, { s: query })
.then((response) => {
this.$set(this, 'found', response)
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},

81
src/components/tasks/edit-task.vue
View file

@ -4,7 +4,7 @@
<label class="label" for="tasktext">Task Text</label>
<div class="control">
<input
:class="{ 'disabled': taskService.loading}"
:class="{ disabled: taskService.loading }"
:disabled="taskService.loading"
@change="editTaskSubmit()"
class="input"
@ -12,7 +12,8 @@
placeholder="The task text is here..."
type="text"
v-focus
v-model="taskEditTask.title"/>
v-model="taskEditTask.title"
/>
</div>
</div>
<div class="field">
@ -29,20 +30,24 @@
</div>
<b>Reminder Dates</b>
<reminders @change="editTaskSubmit()" v-model="taskEditTask.reminderDates"/>
<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="{ disabled: taskService.loading }"
:config="flatPickerConfig"
:disabled="taskService.loading"
@on-close="editTaskSubmit()"
class="input"
id="taskduedate"
placeholder="The tasks due date is here..."
v-model="taskEditTask.dueDate">
v-model="taskEditTask.dueDate"
>
</flat-pickr>
</div>
</div>
@ -52,26 +57,28 @@
<div class="control columns">
<div class="column">
<flat-pickr
:class="{ 'disabled': taskService.loading}"
:class="{ disabled: taskService.loading }"
:config="flatPickerConfig"
:disabled="taskService.loading"
@on-close="editTaskSubmit()"
class="input"
id="taskduedate"
placeholder="Start date"
v-model="taskEditTask.startDate">
v-model="taskEditTask.startDate"
>
</flat-pickr>
</div>
<div class="column">
<flat-pickr
:class="{ 'disabled': taskService.loading}"
:class="{ disabled: taskService.loading }"
:config="flatPickerConfig"
:disabled="taskService.loading"
@on-close="editTaskSubmit()"
class="input"
id="taskduedate"
placeholder="End date"
v-model="taskEditTask.endDate">
v-model="taskEditTask.endDate"
>
</flat-pickr>
</div>
</div>
@ -79,20 +86,29 @@
<div class="field">
<label class="label" for="">Repeat after</label>
<repeat-after @change="editTaskSubmit()" v-model="taskEditTask.repeatAfter"/>
<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 @change="editTaskSubmit()" v-model="taskEditTask.priority"/>
<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 @change="editTaskSubmit()" v-model="taskEditTask.percentDone"/>
<percent-done-select
@change="editTaskSubmit()"
v-model="taskEditTask.percentDone"
/>
</div>
</div>
@ -120,14 +136,18 @@
<edit-assignees
:initial-assignees="taskEditTask.assignees"
:list-id="taskEditTask.listId"
:task-id="taskEditTask.id"/>
:task-id="taskEditTask.id"
/>
</div>
</div>
<div class="field">
<label class="label">Labels</label>
<div class="control">
<edit-labels :task-id="taskEditTask.id" v-model="taskEditTask.labels"/>
<edit-labels
:task-id="taskEditTask.id"
v-model="taskEditTask.labels"
/>
</div>
</div>
@ -138,10 +158,13 @@
class="is-narrow"
/>
<button :class="{ 'is-loading': taskService.loading}" class="button is-primary is-fullwidth" type="submit">
<x-button
:loading="taskService.loading"
class="is-fullwidth"
@click="editTaskSubmit()"
>
Save
</button>
</x-button>
</form>
</template>
@ -199,7 +222,9 @@ export default {
PrioritySelect,
flatPickr,
editor: () => ({
component: import(/* webpackChunkName: "editor" */ '../../components/input/editor'),
component: import(
/* webpackChunkName: "editor" */ '../../components/input/editor'
),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
@ -226,24 +251,30 @@ export default {
},
methods: {
initTaskFields() {
this.taskEditTask.dueDate = +new Date(this.task.dueDate) === 0 ? null : this.task.dueDate
this.taskEditTask.startDate = +new Date(this.task.startDate) === 0 ? null : this.task.startDate
this.taskEditTask.endDate = +new Date(this.task.endDate) === 0 ? null : this.task.endDate
this.taskEditTask.dueDate =
+new Date(this.task.dueDate) === 0 ? null : this.task.dueDate
this.taskEditTask.startDate =
+new Date(this.task.startDate) === 0
? null
: this.task.startDate
this.taskEditTask.endDate =
+new Date(this.task.endDate) === 0 ? null : this.task.endDate
// This makes the editor trigger its mounted function again which makes it forget every input
// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
// which made it impossible to detect change from the outside. Therefore the component would
// not update if new content from the outside was made available.
// See https://github.com/NikulinIlya/vue-easymde/issues/3
this.editorActive = false
this.$nextTick(() => this.editorActive = true)
this.$nextTick(() => (this.editorActive = true))
},
editTaskSubmit() {
this.taskService.update(this.taskEditTask)
.then(r => {
this.taskService
.update(this.taskEditTask)
.then((r) => {
this.$set(this, 'taskEditTask', r)
this.initTaskFields()
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},

236
src/components/tasks/gantt-component.vue
View file

@ -2,12 +2,13 @@
<div class="gantt-chart box">
<div class="filter-container">
<div class="items">
<button @click.prevent.stop="showTaskFilter = !showTaskFilter" class="button">
<span class="icon is-small">
<icon icon="filter"/>
</span>
<x-button
@click.prevent.stop="showTaskFilter = !showTaskFilter"
type="secondary"
icon="filter"
>
Filters
</button>
</x-button>
</div>
<filter-popup
@change="loadTasks"
@ -18,21 +19,37 @@
<div class="dates">
<template v-for="(y, yk) in days">
<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
: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="{'today': d.toDateString() === now.toDateString()}"
:class="{
today:
d.toDateString() === now.toDateString(),
}"
:key="dk + 'day'"
:style="{'width': dayWidth + 'px'}"
:style="{ width: dayWidth + 'px' }"
class="day"
v-for="(d, dk) in days[yk][mk]">
v-for="(d, dk) in days[yk][mk]"
>
<span class="theday" v-if="dayWidth > 25">
{{ 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>
@ -40,18 +57,28 @@
</div>
</template>
</div>
<div :style="{'width': fullWidth + 'px'}" class="tasks">
<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)'}"
: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">
v-for="(t, k) in theTasks"
>
<VueDragResize
:class="{
'done': t.done,
'is-current-edit': taskToEdit !== null && taskToEdit.id === t.id,
done: t.done,
'is-current-edit':
taskToEdit !== null && taskToEdit.id === t.id,
'has-light-text': !colorIsDark(t.hexColor),
'has-dark-text': colorIsDark(t.hexColor)
'has-dark-text': colorIsDark(t.hexColor),
}"
:gridX="dayWidth"
:h="31"
@ -61,7 +88,10 @@
:parentW="fullWidth"
:snapToGrid="true"
:sticks="['mr', 'ml']"
:style="{'border-color': t.hexColor, 'background-color': t.hexColor}"
:style="{
'border-color': t.hexColor,
'background-color': t.hexColor,
}"
:w="t.durationDays * dayWidth"
:x="t.offsetDays * dayWidth - 6"
:y="0"
@ -71,11 +101,16 @@
axis="x"
class="task"
>
<span :class="{
<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>
'has-not-so-high-priority':
t.priority === priorities.HIGH,
'has-super-high-priority':
t.priority === priorities.DO_NOW,
}"
>{{ 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">
@ -86,9 +121,18 @@
<template v-if="showTaskswithoutDates">
<div
:key="t.id"
:style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}"
: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">
v-for="(t, k) in tasksWithoutDates"
>
<VueDragResize
:gridX="dayWidth"
:h="31"
@ -112,7 +156,11 @@
</div>
</template>
</div>
<form @submit.prevent="addNewTask()" class="add-new-task" v-if="canWrite">
<form
@submit.prevent="addNewTask()"
class="add-new-task"
v-if="canWrite"
>
<transition name="width">
<input
@blur="hideCrateNewTask"
@ -124,31 +172,20 @@
v-model="newTaskTitle"
/>
</transition>
<button @click="showCreateNewTask" class="button is-primary has-no-shadow">
<span class="icon is-small">
<icon icon="plus"/>
</span>
<x-button @click="showCreateNewTask" :shadow="false" icon="plus">
Add a new task
</button>
</x-button>
</form>
<transition name="fade">
<div class="card taskedit" v-if="isTaskEdit">
<header class="card-header">
<p class="card-header-title">
Edit Task
</p>
<a @click="() => {isTaskEdit = false; taskToEdit = null}" class="card-header-icon">
<span class="icon">
<icon icon="times"/>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<card
v-if="isTaskEdit"
class="taskedit"
title="Edit Task"
@close="() => {isTaskEdit = false;taskToEdit = null}"
:has-close="true"
>
<edit-task :task="taskToEdit"/>
</div>
</div>
</div>
</card>
</transition>
</div>
</template>
@ -184,10 +221,10 @@ export default {
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: {
@ -226,9 +263,9 @@ export default {
}
},
watch: {
'dateFrom': 'buildTheGanttChart',
'dateTo': 'buildTheGanttChart',
'listId': 'parseTasks',
dateFrom: 'buildTheGanttChart',
dateTo: 'buildTheGanttChart',
listId: 'parseTasks',
},
created() {
this.now = new Date()
@ -240,7 +277,7 @@ export default {
this.buildTheGanttChart()
},
computed: mapState({
canWrite: state => state.currentList.maxRight > Rights.READ,
canWrite: (state) => state.currentList.maxRight > Rights.READ,
}),
methods: {
buildTheGanttChart() {
@ -252,17 +289,26 @@ export default {
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 = {}
for (let d = this.startDate; d <= this.endDate; d.setDate(d.getDate() + 1)) {
for (
let d = this.startDate;
d <= this.endDate;
d.setDate(d.getDate() + 1)
) {
let date = new Date(d)
if (years[date.getFullYear() + ''] === undefined) {
years[date.getFullYear() + ''] = {}
}
if (years[date.getFullYear() + ''][date.getMonth() + ''] === undefined) {
if (
years[date.getFullYear() + ''][date.getMonth() + ''] ===
undefined
) {
years[date.getFullYear() + ''][date.getMonth() + ''] = []
}
years[date.getFullYear() + ''][date.getMonth() + ''].push(date)
@ -279,79 +325,86 @@ export default {
this.$set(this, 'tasksWithoutDates', [])
const getAllTasks = (page = 1) => {
return this.taskCollectionService.getAll({listId: this.listId}, this.params, page)
.then(tasks => {
return this.taskCollectionService
.getAll({listId: this.listId}, this.params, page)
.then((tasks) => {
if (page < this.taskCollectionService.totalPages) {
return getAllTasks(page + 1)
.then(nextTasks => {
return getAllTasks(page + 1).then((nextTasks) => {
return tasks.concat(nextTasks)
})
} else {
return tasks
}
})
.catch(e => {
.catch((e) => {
return Promise.reject(e)
})
}
getAllTasks()
.then(tasks => {
.then((tasks) => {
this.theTasks = tasks
.filter(t => {
.filter((t) => {
if (t.startDate === null && !t.done) {
this.tasksWithoutDates.push(t)
}
return t.startDate >= this.startDate && t.endDate <= this.endDate
return (
t.startDate >= this.startDate &&
t.endDate <= this.endDate
)
})
.map(t => {
.map((t) => {
return this.addGantAttributes(t)
})
.sort(function (a, b) {
if (a.startDate < b.startDate)
return -1
if (a.startDate > b.startDate)
return 1
if (a.startDate < b.startDate) return -1
if (a.startDate > b.startDate) return 1
return 0
})
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},
addGantAttributes(t) {
t.endDate === null ? this.endDate : t.endDate
t.durationDays = Math.floor((t.endDate - t.startDate) / 1000 / 60 / 60 / 24) + 1
t.offsetDays = Math.floor((t.startDate - this.startDate) / 1000 / 60 / 60 / 24) + 1
t.durationDays =
Math.floor((t.endDate - t.startDate) / 1000 / 60 / 60 / 24) + 1
t.offsetDays =
Math.floor(
(t.startDate - this.startDate) / 1000 / 60 / 60 / 24
) + 1
return t
},
setTaskDragged(t) {
this.taskDragged = t
},
resizeTask(newRect) {
// Timeout to definitly catch if the user clicked on taskedit
setTimeout(() => {
if (this.isTaskEdit) {
return
}
let didntHaveDates = this.taskDragged.startDate === null ? true : false
let didntHaveDates =
this.taskDragged.startDate === null ? true : false
let startDate = new Date(this.startDate)
startDate.setDate(startDate.getDate() + newRect.left / this.dayWidth)
startDate.setDate(
startDate.getDate() + newRect.left / this.dayWidth
)
startDate.setUTCHours(0)
startDate.setUTCMinutes(0)
startDate.setUTCSeconds(0)
startDate.setUTCMilliseconds(0)
this.taskDragged.startDate = startDate
let endDate = new Date(startDate)
endDate.setDate(startDate.getDate() + newRect.width / this.dayWidth)
endDate.setDate(
startDate.getDate() + newRect.width / this.dayWidth
)
this.taskDragged.startDate = startDate
this.taskDragged.endDate = endDate
// We take the task from the overall tasks array because the one in it has bad data after it was updated once.
// FIXME: This is a workaround. We should use a better mechanism to get the task or, even better,
// prevent it from containing outdated Data in the first place.
@ -362,8 +415,9 @@ export default {
}
}
this.taskService.update(this.taskDragged)
.then(r => {
this.taskService
.update(this.taskDragged)
.then((r) => {
// If the task didn't have dates before, we'll update the list
if (didntHaveDates) {
for (const t in this.tasksWithoutDates) {
@ -376,13 +430,17 @@ export default {
} else {
for (const tt in this.theTasks) {
if (this.theTasks[tt].id === r.id) {
this.$set(this.theTasks, tt, this.addGantAttributes(r))
this.$set(
this.theTasks,
tt,
this.addGantAttributes(r)
)
break
}
}
}
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
}, 100)
@ -402,21 +460,25 @@ export default {
},
hideCrateNewTask() {
if (this.newTaskTitle === '') {
this.$nextTick(() => this.newTaskFieldActive = false)
this.$nextTick(() => (this.newTaskFieldActive = false))
}
},
addNewTask() {
if (!this.newTaskFieldActive) {
return
}
let task = new TaskModel({title: this.newTaskTitle, listId: this.listId})
this.taskService.create(task)
.then(r => {
let task = new TaskModel({
title: this.newTaskTitle,
listId: this.listId,
})
this.taskService
.create(task)
.then((r) => {
this.tasksWithoutDates.push(this.addGantAttributes(r))
this.newTaskTitle = ''
this.hideCrateNewTask()
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},

121
src/components/tasks/partials/attachments.vue
View file

@ -14,12 +14,14 @@
multiple
ref="files"
type="file"
v-if="editEnabled"/>
v-if="editEnabled"
/>
<progress
:value="attachmentService.uploadProgress"
class="progress is-primary"
max="100"
v-if="attachmentService.uploadProgress > 0">
v-if="attachmentService.uploadProgress > 0"
>
{{ attachmentService.uploadProgress }}%
</progress>
@ -28,13 +30,22 @@
class="attachment"
v-for="a in attachments"
:key="a.id"
@click="viewOrDownload(a)">
@click="viewOrDownload(a)"
>
<div class="filename">{{ a.file.name }}</div>
<div class="info">
<p class="collapses">
<span>
created <span v-tooltip="formatDate(a.created)">{{ formatDateSince(a.created) }}</span> by
<user :avatar-size="24" :user="a.createdBy" :is-inline="true"/>
created
<span v-tooltip="formatDate(a.created)">{{
formatDateSince(a.created)
}}</span>
by
<user
:avatar-size="24"
:user="a.createdBy"
:is-inline="true"
/>
</span>
<span>
{{ a.file.getHumanSize() }}
@ -46,13 +57,20 @@
<p>
<a
@click="downloadAttachment(a)"
v-tooltip="'Download this attachment'">
v-tooltip="'Download this attachment'"
>
Download
</a>
<a
@click="() => {attachmentToDelete = a; showDeleteModal = true}"
@click="
() => {
attachmentToDelete = a
showDeleteModal = true
}
"
v-if="editEnabled"
v-tooltip="'Delete this attachment'">
v-tooltip="'Delete this attachment'"
>
Delete
</a>
</p>
@ -60,24 +78,29 @@
</a>
</div>
<a
<x-button
v-if="editEnabled"
:disabled="attachmentService.loading"
@click="$refs.files.click()"
class="button mb-4 has-no-shadow"
v-if="editEnabled">
<span class="icon is-small"><icon icon="cloud-upload-alt"/></span>
class="mb-4"
icon="cloud-upload-alt"
type="secondary"
:shadow="false"
>
Upload attachment
</a>
</x-button>
<!-- Dropzone -->
<div :class="{ 'hidden': !showDropzone }" class="dropzone" v-if="editEnabled">
<div
:class="{ hidden: !showDropzone }"
class="dropzone"
v-if="editEnabled"
>
<div class="drop-hint">
<div class="icon">
<icon icon="cloud-upload-alt" />
</div>
<div class="hint">
Drop files here to upload
</div>
<div class="hint">Drop files here to upload</div>
</div>
</div>
@ -85,15 +108,24 @@
<modal
@close="showDeleteModal = false"
v-if="showDeleteModal"
@submit="deleteAttachment()">
@submit="deleteAttachment()"
>
<span slot="header">Delete attachment</span>
<p slot="text">Are you sure you want to delete the attachment {{ attachmentToDelete.file.name }}?<br/>
<b>This CANNOT BE UNDONE!</b></p>
<p slot="text">
Are you sure you want to delete the attachment
{{ attachmentToDelete.file.name }}?<br />
<b>This CANNOT BE UNDONE!</b>
</p>
</modal>
<transition name="modal">
<modal
@close="() => {showImageModal = false; attachmentImageBlobUrl = null}"
@close="
() => {
showImageModal = false
attachmentImageBlobUrl = null
}
"
v-if="showImageModal"
>
<img :src="attachmentImageBlobUrl" alt="" />
@ -141,28 +173,28 @@ export default {
this.attachmentService = new AttachmentService()
},
computed: mapState({
attachments: state => state.attachments.attachments,
attachments: (state) => state.attachments.attachments,
}),
mounted() {
document.addEventListener('dragenter', e => {
document.addEventListener('dragenter', (e) => {
e.stopPropagation()
e.preventDefault()
this.showDropzone = true
})
window.addEventListener('dragleave', e => {
window.addEventListener('dragleave', (e) => {
e.stopPropagation()
e.preventDefault()
this.showDropzone = false
})
document.addEventListener('dragover', e => {
document.addEventListener('dragover', (e) => {
e.stopPropagation()
e.preventDefault()
this.showDropzone = true
})
document.addEventListener('drop', e => {
document.addEventListener('drop', (e) => {
e.stopPropagation()
e.preventDefault()
@ -184,31 +216,39 @@ export default {
},
uploadFiles(files) {
const attachmentModel = new AttachmentModel({ taskId: this.taskId })
this.attachmentService.create(attachmentModel, files)
.then(r => {
this.attachmentService
.create(attachmentModel, files)
.then((r) => {
if (r.success !== null) {
r.success.forEach(a => {
r.success.forEach((a) => {
this.$store.commit('attachments/add', a)
this.$store.dispatch('tasks/addTaskAttachment', {taskId: this.taskId, attachment: a})
this.$store.dispatch('tasks/addTaskAttachment', {
taskId: this.taskId,
attachment: a,
})
})
}
if (r.errors !== null) {
r.errors.forEach(m => {
r.errors.forEach((m) => {
this.error(m)
})
}
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},
deleteAttachment() {
this.attachmentService.delete(this.attachmentToDelete)
.then(r => {
this.$store.commit('attachments/removeById', this.attachmentToDelete.id)
this.attachmentService
.delete(this.attachmentToDelete)
.then((r) => {
this.$store.commit(
'attachments/removeById',
this.attachmentToDelete.id
)
this.success(r, this)
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
.finally(() => {
@ -216,13 +256,14 @@ export default {
})
},
viewOrDownload(attachment) {
if (attachment.file.name.endsWith('.jpg') ||
if (
attachment.file.name.endsWith('.jpg') ||
attachment.file.name.endsWith('.png') ||
attachment.file.name.endsWith('.bmp') ||
attachment.file.name.endsWith('.gif')) {
attachment.file.name.endsWith('.gif')
) {
this.showImageModal = true
this.attachmentService.getBlobUrl(attachment)
.then(url => {
this.attachmentService.getBlobUrl(attachment).then((url) => {
this.attachmentImageBlobUrl = url
})
} else {

156
src/components/tasks/partials/comments.vue
View file

@ -7,28 +7,65 @@
Comments
</h3>
<div class="comments">
<span class="is-inline-flex is-align-items-center" v-if="taskCommentService.loading && saving === null && !creating">
<span
class="is-inline-flex is-align-items-center"
v-if="
taskCommentService.loading && saving === null && !creating
"
>
<span class="loader is-inline-block mr-2"></span>
Loading comments...
</span>
<div :key="c.id" class="media comment" v-for="c in comments">
<figure class="media-left is-hidden-mobile">
<img :src="c.author.getAvatarUrl(48)" alt="" class="image is-avatar" height="48" width="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">
<img :src="c.author.getAvatarUrl(20)" alt="" class="image is-avatar" height="20" width="20"/>
<strong>{{ c.author.getDisplayName() }}</strong>&nbsp;
<span v-tooltip="formatDate(c.created)">{{ formatDateSince(c.created) }}</span>
<span v-if="+new Date(c.created) !== +new Date(c.updated)" v-tooltip="formatDate(c.updated)">
<img
:src="c.author.getAvatarUrl(20)"
alt=""
class="image is-avatar"
height="20"
width="20"
/>
<strong>{{ c.author.getDisplayName() }}</strong
>&nbsp;
<span v-tooltip="formatDate(c.created)">{{
formatDateSince(c.created)
}}</span>
<span
v-if="+new Date(c.created) !== +new Date(c.updated)"
v-tooltip="formatDate(c.updated)"
>
· edited {{ formatDateSince(c.updated) }}
</span>
<transition name="fade">
<span class="is-inline-flex" v-if="taskCommentService.loading && saving === c.id">
<span class="loader is-inline-block mr-2"></span>
<span
class="is-inline-flex"
v-if="
taskCommentService.loading &&
saving === c.id
"
>
<span
class="loader is-inline-block mr-2"
></span>
Saving...
</span>
<span class="has-text-success" v-if="!taskCommentService.loading && saved === c.id">
<span
class="has-text-success"
v-if="
!taskCommentService.loading &&
saved === c.id
"
>
Saved!
</span>
</transition>
@ -38,7 +75,12 @@
:is-edit-enabled="canWrite"
:upload-callback="attachmentUpload"
:upload-enabled="true"
@change="() => {toggleEdit(c);editComment()}"
@change="
() => {
toggleEdit(c)
editComment()
}
"
v-model="c.comment"
:has-edit-bottom="true"
:bottom-actions="actions[c.id]"
@ -47,19 +89,34 @@
</div>
<div class="media comment" v-if="canWrite">
<figure class="media-left is-hidden-mobile">
<img :src="userAvatar" alt="" class="image is-avatar" height="48" width="48"/>
<img
:src="userAvatar"
alt=""
class="image is-avatar"
height="48"
width="48"
/>
</figure>
<div class="media-content">
<div class="form">
<transition name="fade">
<span class="is-inline-flex" v-if="taskCommentService.loading && creating">
<span class="loader is-inline-block mr-2"></span>
<span
class="is-inline-flex"
v-if="taskCommentService.loading && creating"
>
<span
class="loader is-inline-block mr-2"
></span>
Creating comment...
</span>
</transition>
<div class="field">
<editor
:class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
:class="{
'is-loading':
taskCommentService.loading &&
!isCommentEdit,
}"
:has-preview="false"
:upload-callback="attachmentUpload"
:upload-enabled="true"
@ -69,10 +126,15 @@
/>
</div>
<div class="field">
<button :class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
<x-button
:loading="
taskCommentService.loading && !isCommentEdit
"
:disabled="newComment.comment === ''"
@click="addComment()" class="button is-primary">Comment
</button>
@click="addComment()"
>
Comment
</x-button>
</div>
</div>
</div>
@ -81,10 +143,13 @@
<modal
@close="showDeleteModal = false"
@submit="deleteComment()"
v-if="showDeleteModal">
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>
<p slot="text">
Are you sure you want to delete this comment? <br />This
<b>CANNOT BE UNDONE!</b>
</p>
</modal>
</div>
</template>
@ -100,15 +165,15 @@ export default {
name: 'comments',
components: {
editor: () => ({
component: import(/* webpackChunkName: "editor" */ '../../input/editor'),
component: import(
/* webpackChunkName: "editor" */ '../../input/editor'
),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
}),
},
mixins: [
attachmentUpload,
],
mixins: [attachmentUpload],
props: {
taskId: {
type: Number,
@ -163,12 +228,13 @@ export default {
},
methods: {
loadComments() {
this.taskCommentService.getAll({taskId: this.taskId})
.then(r => {
this.taskCommentService
.getAll({ taskId: this.taskId })
.then((r) => {
this.$set(this, 'comments', r)
this.makeActions()
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},
@ -183,16 +249,20 @@ export default {
// not update if new content from the outside was made available.
// See https://github.com/NikulinIlya/vue-easymde/issues/3
this.editorActive = false
this.$nextTick(() => this.editorActive = true)
this.$nextTick(() => (this.editorActive = true))
this.creating = true
this.taskCommentService.create(this.newComment)
.then(r => {
this.taskCommentService
.create(this.newComment)
.then((r) => {
this.comments.push(r)
this.newComment.comment = ''
this.success({message: 'The comment was added successfully.'}, this)
this.success(
{ message: 'The comment was added successfully.' },
this
)
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
.finally(() => {
@ -215,8 +285,9 @@ export default {
this.saving = this.commentEdit.id
this.commentEdit.taskId = this.taskId
this.taskCommentService.update(this.commentEdit)
.then(r => {
this.taskCommentService
.update(this.commentEdit)
.then((r) => {
for (const c in this.comments) {
if (this.comments[c].id === this.commentEdit.id) {
this.$set(this.comments, c, r)
@ -227,7 +298,7 @@ export default {
this.saved = null
}, 2000)
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
.finally(() => {
@ -236,7 +307,8 @@ export default {
})
},
deleteComment() {
this.taskCommentService.delete(this.commentToDelete)
this.taskCommentService
.delete(this.commentToDelete)
.then(() => {
for (const a in this.comments) {
if (this.comments[a].id === this.commentToDelete.id) {
@ -244,7 +316,7 @@ export default {
}
}
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
.finally(() => {
@ -253,14 +325,16 @@ export default {
},
makeActions() {
if (this.canWrite) {
this.comments.forEach(c => {
this.$set(this.actions, c.id, [{
this.comments.forEach((c) => {
this.$set(this.actions, c.id, [
{
action: () => this.toggleDelete(c.id),
title: 'Remove',
}])
},
])
})
}
}
},
},
}
</script>

38
src/components/tasks/partials/defer-task.vue
View file

@ -1,13 +1,34 @@
<template>
<div :class="{'is-loading': taskService.loading}" class="defer-task loading-container">
<div
:class="{ 'is-loading': taskService.loading }"
class="defer-task loading-container"
>
<label class="label">Defer due date</label>
<div class="defer-days">
<button @click="() => deferDays(1)" class="button has-no-shadow">1 day</button>
<button @click="() => deferDays(3)" class="button has-no-shadow">3 days</button>
<button @click="() => deferDays(7)" class="button has-no-shadow">1 week</button>
<x-button
@click.prevent.stop="() => deferDays(1)"
:shadow="false"
type="secondary"
>
1 day
</x-button>
<x-button
@click.prevent.stop="() => deferDays(3)"
:shadow="false"
type="secondary"
>
3 days
</x-button>
<x-button
@click.prevent.stop="() => deferDays(7)"
:shadow="false"
type="secondary"
>
1 week
</x-button>
</div>
<flat-pickr
:class="{ 'disabled': taskService.loading}"
:class="{ disabled: taskService.loading }"
:config="flatPickerConfig"
:disabled="taskService.loading"
class="input"
@ -97,13 +118,14 @@ export default {
}
this.task.dueDate = new Date(this.dueDate)
this.taskService.update(this.task)
.then(r => {
this.taskService
.update(this.task)
.then((r) => {
this.lastValue = r.dueDate
this.task = r
this.$emit('input', r)
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},

20
src/components/tasks/partials/relatedTasks.vue
View file

@ -1,14 +1,14 @@
<template>
<div class="task-relations">
<button
class="button is-pulled-right add-task-relation-button"
:class="{'is-active': showNewRelationForm}"
@click="showNewRelationForm = !showNewRelationForm"
v-tooltip="'Add a New Task Relation'"
<x-button
v-if="Object.keys(relatedTasks).length > 0"
>
<icon icon="plus"/>
</button>
@click="showNewRelationForm = !showNewRelationForm"
class="is-pulled-right add-task-relation-button"
:class="{'is-active': showNewRelationForm}"
v-tooltip="'Add a New Task Relation'"
type="secondary"
icon="plus"
/>
<transition-group name="fade">
<template v-if="editEnabled && showCreate">
<label class="label" key="label">
@ -48,7 +48,7 @@
</div>
</div>
<div class="control">
<a @click="addTaskRelation()" class="button is-primary">Add Task Relation</a>
<x-button @click="addTaskRelation()">Add Task Relation</x-button>
</div>
</div>
</template>
@ -248,7 +248,7 @@ export default {
}
</script>
<style lang="scss" scoped>
<style lang="scss">
@import '@/styles/theme/variables';
.add-task-relation-button {

6
src/components/tasks/partials/repeatAfter.vue
View file

@ -1,9 +1,9 @@
<template>
<div class="control repeat-after-input">
<div class="buttons has-addons is-centered mt-2">
<button class="button is-small" @click="() => setRepeatAfter(1, 'days')">Every Day</button>
<button class="button is-small" @click="() => setRepeatAfter(1, 'weeks')">Every Week</button>
<button class="button is-small" @click="() => setRepeatAfter(1, 'months')">Every Month</button>
<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'days')">Every Day</x-button>
<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'weeks')">Every Week</x-button>
<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'months')">Every Month</x-button>
</div>
<div class="columns is-align-items-center">
<div class="is-flex column">

37
src/components/user/avatar-settings.vue
View file

@ -1,11 +1,5 @@
<template>
<div class="card">
<header class="card-header">
<p class="card-header-title">
Avatar
</p>
</header>
<div class="card-content">
<card title="Avatar">
<div class="control mb-4">
<label class="radio">
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="default"/>
@ -33,13 +27,12 @@
ref="avatarUploadInput"
type="file"
/>
<a
:class="{ 'is-loading': avatarService.loading || loading}"
<x-button
:loading="avatarService.loading || loading"
@click="$refs.avatarUploadInput.click()"
class="button is-primary"
v-if="!isCropAvatar">
Upload Avatar
</a>
</x-button>
<template v-else>
<cropper
:src="avatarToCrop"
@ -47,23 +40,25 @@
@ready="() => loading = false"
class="mb-4"
ref="cropper"/>
<a
:class="{ 'is-loading': avatarService.loading || loading}"
<x-button
:loading="avatarService.loading || loading"
@click="uploadAvatar"
class="button is-primary">
>
Upload Avatar
</a>
</x-button>
</template>
</template>
<div class="bigbuttons" v-if="avatarProvider !== 'upload'">
<button :class="{ 'is-loading': avatarService.loading || loading}" @click="updateAvatarStatus()"
class="button is-primary is-fullwidth">
<div class="mt-2" v-if="avatarProvider !== 'upload'">
<x-button
:loading="avatarService.loading || loading"
@click="updateAvatarStatus()"
class="is-fullwidth"
>
Save
</button>
</div>
</div>
</x-button>
</div>
</card>
</template>
<script>

6
src/main.js
View file

@ -162,6 +162,12 @@ const formatDate = (date, f) => {
return date ? format(date, f) : ''
}
import Button from '@/components/input/button'
Vue.component('x-button', Button)
import Card from '@/components/misc/card'
Vue.component('card', Card)
Vue.mixin({
methods: {
formatDateSince: date => {

4
src/styles/components/base/multiselect.scss
View file

@ -81,7 +81,9 @@
text-transform: none;
font-family: $family-sans-serif;
font-weight: normal;
padding: 0;
padding: .5rem 0;
border: none;
cursor: pointer;
display: flex;
justify-content: space-between;

2
src/styles/components/task.scss
View file

@ -125,7 +125,7 @@
&.description .editor {
&.is-pulled-up {
margin-top: -4rem;
margin-top: -3rem;
}
.tabs {

8
src/styles/theme/form.scss
View file

@ -119,14 +119,6 @@
height: 100%;
}
.bigbuttons {
margin-top: 0.5rem;
}
.buttonright {
margin-right: 0.5rem;
}
.control.has-icons-left .icon, .control.has-icons-right .icon {
z-index: 0;
}

6
src/views/Home.vue
View file

@ -3,13 +3,13 @@
<h2>Hi {{ userInfo.name !== '' ? userInfo.name : userInfo.username }}!</h2>
<template v-if="!hasTasks">
<p>Click on a list or namespace on the left to get started.</p>
<router-link
<x-button
:to="{name: 'migrate.start'}"
class="button is-primary has-no-shadow"
:shadow="false"
v-if="migratorsEnabled"
>
Import your data into Vikunja
</router-link>
</x-button>
</template>
<ShowTasks :show-all="true"/>
</div>

18
src/views/filters/CreateSavedFilter.vue
View file

@ -2,11 +2,7 @@
<div class="modal-mask keyboard-shortcuts-modal">
<div @click.self="$router.back()" class="modal-container">
<div class="modal-content">
<div class="card has-background-white has-no-shadow">
<header class="card-header">
<p class="card-header-title">Create A Saved Filter</p>
</header>
<div class="card-content content">
<card class="has-background-white has-no-shadow" title="Create A Saved Filter">
<p>
A saved filter is a virtual list which is computed from a set of filters each time it is
accessed. Once created, it will appear in a special namespace.
@ -51,15 +47,15 @@
/>
</div>
</div>
<button
:class="{ 'disabled': savedFilterService.loading}"
<x-button
:loading="savedFilterService.loading"
:disabled="savedFilterService.loading"
@click="create()"
class="button is-primary is-fullwidth">
class="is-fullwidth"
>
Create new saved filter
</button>
</div>
</div>
</x-button>
</card>
</div>
</div>
</div>

33
src/views/filters/EditSavedFilter.vue
View file

@ -1,13 +1,6 @@
<template>
<div :class="{ 'is-loading': filterService.loading}" class="loader-container edit-list is-max-width-desktop">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Edit Saved Filter
</p>
</header>
<div class="card-content">
<div class="content">
<card title="Edit Saved Filter">
<form @submit.prevent="save()">
<div class="field">
<label class="label" for="listtext">Filter Name</label>
@ -52,27 +45,23 @@
<div class="field has-addons mt-4">
<div class="control is-fullwidth">
<button
<x-button
@click="save()"
:class="{ 'is-loading': filterService.loading}"
class="button is-primary is-fullwidth">
:loading="filterService.loading"
class="is-fullwidth">
Save
</button>
</x-button>
</div>
<div class="control">
<button
<x-button
@click="showDeleteModal = true"
:class="{ 'is-loading': filterService.loading}"
class="button is-danger">
<span class="icon">
<icon icon="trash-alt"/>
</span>
</button>
</div>
</div>
</div>
:loading="filterService.loading"
class="is-danger"
icon="trash-alt"
/>
</div>
</div>
</card>
<modal
@close="showDeleteModal = false"

55
src/views/labels/ListLabels.vue
View file

@ -1,17 +1,23 @@
<template>
<div :class="{ 'is-loading': labelService.loading}" class="loader-container content">
<router-link :to="{name:'labels.create'}" class="button is-primary button-right">
<span class="icon is-small">
<icon icon="plus"/>
</span>
<div :class="{ 'is-loading': labelService.loading}" class="loader-container">
<x-button
:to="{name:'labels.create'}"
class="is-pulled-right"
icon="plus"
>
New label
</router-link>
</x-button>
<div class="content">
<h1>Manage labels</h1>
<p>
Click on a label to edit it.
You can edit all labels you created, you can use all labels which are associated with a task to whose list
You can edit all labels you created, you can use all labels which are associated with a task to whose
list
you have access.
</p>
</div>
<div class="columns">
<div class="labels-list column">
<span
@ -35,18 +41,7 @@
</span>
</div>
<div class="column is-4" v-if="isLabelEdit">
<div class="card">
<header class="card-header">
<span class="card-header-title">
Edit Label
</span>
<a @click="isLabelEdit = false" class="card-header-icon">
<span class="icon">
<icon icon="times"/>
</span>
</a>
</header>
<div class="card-content">
<card title="Edit Label" :has-close="true" @close="() => isLabelEdit = false">
<form @submit.prevent="editLabelSubmit()">
<div class="field">
<label class="label">Title</label>
@ -77,24 +72,24 @@
</div>
<div class="field has-addons">
<div class="control is-expanded">
<button :class="{ 'is-loading': labelService.loading}" class="button is-fullwidth is-primary"
type="submit">
<x-button
:loading="labelService.loading"
class="is-fullwidth"
@click="editLabelSubmit()"
>
Save
</button>
</x-button>
</div>
<div class="control">
<a
<x-button
@click="() => {deleteLabel(labelEditLabel);isLabelEdit = false}"
class="button has-icon is-danger">
<span class="icon">
<icon icon="trash-alt"/>
</span>
</a>
icon="trash-alt"
class="is-danger"
/>
</div>
</div>
</form>
</div>
</div>
</card>
</div>
</div>
</div>

11
src/views/labels/NewLabel.vue
View file

@ -15,12 +15,13 @@
v-model="label.title"/>
</p>
<p class="control">
<button class="button is-primary has-no-shadow" type="submit">
<span class="icon is-small">
<icon icon="plus"/>
</span>
<x-button
:shadow="false"
icon="plus"
@click="newlabel"
>
Add
</button>
</x-button>
</p>
</div>
<p class="help is-danger" v-if="showError && label.title === ''">

56
src/views/list/EditList.vue
View file

@ -4,14 +4,7 @@
This list is archived.
It is not possible to create new or edit tasks or it.
</div>
<div class="card">
<header class="card-header">
<p class="card-header-title">
Edit List
</p>
</header>
<div class="card-content">
<div class="content">
<card title="Edit List">
<form @submit.prevent="submit()">
<div class="field">
<label class="label" for="listtext">List Name</label>
@ -81,36 +74,26 @@
<div class="field has-addons mt-4">
<div class="control is-fullwidth">
<button
<x-button
@click="submit()"
:class="{ 'is-loading': listService.loading}"
class="button is-primary is-fullwidth">
:loading="listService.loading"
class="is-fullwidth">
Save
</button>
</x-button>
</div>
<div class="control">
<button
<x-button
@click="showDeleteModal = true"
:class="{ 'is-loading': listService.loading}"
class="button is-danger">
<span class="icon">
<icon icon="trash-alt"/>
</span>
</button>
</div>
</div>
</div>
:locading="listService.loading"
icon="trash-alt"
class="is-danger"
/>
</div>
</div>
</card>
<div class="card has-overflow">
<header class="card-header">
<p class="card-header-title">
Duplicate this list
</p>
</header>
<div class="card-content">
<div class="content">
<!-- Duplicate list -->
<card class="has-overflow" title="Duplicate this list">
<p>Select a namespace which should hold the duplicated list:</p>
<div class="field has-addons">
@ -118,18 +101,15 @@
<namespace-search @selected="selectNamespace"/>
</div>
<div class="control">
<button
:class="{'is-loading': listDuplicateService.loading}"
<x-button
:loading="listDuplicateService.loading"
@click="duplicateList"
class="button is-primary"
type="submit">
>
Duplicate
</button>
</div>
</div>
</div>
</x-button>
</div>
</div>
</card>
<background :list-id="$route.params.id"/>

12
src/views/list/NewList.vue
View file

@ -18,12 +18,14 @@
v-model="list.title"/>
</p>
<p class="control">
<button :disabled="list.title === ''" @click="newList()" class="button is-primary has-no-shadow">
<span class="icon is-small">
<icon icon="plus"/>
</span>
<x-button
:disabled="list.title === ''"
@click="newList()"
icon="plus"
:shadow="false"
>
Add
</button>
</x-button>
</p>
</div>
<p class="help is-danger" v-if="showError && list.title === ''">

59
src/views/list/views/Kanban.vue
View file

@ -2,12 +2,13 @@
<div class="kanban-view">
<div class="filter-container" v-if="list.isSavedFilter && !list.isSavedFilter()">
<div class="items">
<button @click.prevent.stop="showFilters = !showFilters" class="button">
<span class="icon is-small">
<icon icon="filter"/>
</span>
<x-button
@click.prevent.stop="showFilters = !showFilters"
icon="filter"
type="secondary"
>
Filters
</button>
</x-button>
</div>
<filter-popup
@change="() => {filtersChanged = true; loadBuckets()}"
@ -59,11 +60,10 @@
/>
</div>
<div class="control">
<a class="button is-primary has-no-shadow">
<span class="icon">
<icon :icon="['far', 'save']"/>
</span>
</a>
<x-button
:icon="['far', 'save']"
:shadow="false"
/>
</div>
</div>
<template v-else>
@ -191,20 +191,21 @@
Please specify a title.
</p>
</div>
<a
<x-button
@click="toggleShowNewTaskInput(bucket.id)"
class="button has-no-shadow is-transparent is-fullwidth has-text-centered"
v-if="!showNewTaskInput[bucket.id]">
<span class="icon is-small">
<icon icon="plus"/>
</span>
<span v-if="bucket.tasks.length === 0">
class="is-transparent is-fullwidth has-text-centered"
:shadow="false"
v-if="!showNewTaskInput[bucket.id]"
icon="plus"
type="secondary"
>
<template v-if="bucket.tasks.length === 0">
Add a task
</span>
<span v-else>
</template>
<template v-else>
Add another task
</span>
</a>
</template>
</x-button>
</div>
</div>
@ -222,16 +223,16 @@
v-if="showNewBucketInput"
v-model="newBucketTitle"
/>
<a
<x-button
@click="() => showNewBucketInput = true"
class="button has-no-shadow is-transparent is-fullwidth has-text-centered" v-if="!showNewBucketInput">
<span class="icon is-small">
<icon icon="plus"/>
</span>
<span>
:shadow="false"
class="is-transparent is-fullwidth has-text-centered"
v-if="!showNewBucketInput"
type="secondary"
icon="plus"
>
Create a new bucket
</span>
</a>
</x-button>
</div>
</div>

64
src/views/list/views/List.vue
View file

@ -1,5 +1,7 @@
<template>
<div :class="{ 'is-loading': taskCollectionService.loading}" class="loader-container is-max-width-desktop list-view">
<div
:class="{ 'is-loading': taskCollectionService.loading}"
class="loader-container is-max-width-desktop list-view">
<div class="filter-container" v-if="list.isSavedFilter && !list.isSavedFilter()">
<div class="items">
<div class="search">
@ -18,26 +20,29 @@
</span>
</div>
<div class="control">
<button
:class="{'is-loading': taskCollectionService.loading}"
<x-button
:loading="taskCollectionService.loading"
@click="searchTasks"
class="button has-no-shadow is-primary">
:shadow="false"
>
Search
</button>
</x-button>
</div>
</div>
<button @click="showTaskSearch = !showTaskSearch" class="button" v-if="!showTaskSearch">
<span class="icon">
<icon icon="search"/>
</span>
</button>
<x-button
@click="showTaskSearch = !showTaskSearch"
icon="search"
type="secondary"
v-if="!showTaskSearch"
/>
</div>
<button @click.prevent.stop="showTaskFilter = !showTaskFilter" class="button">
<span class="icon is-small">
<icon icon="filter"/>
</span>
<x-button
@click.prevent.stop="showTaskFilter = !showTaskFilter"
type="secondary"
icon="filter"
>
Filters
</button>
</x-button>
</div>
<filter-popup
@change="loadTasks(1)"
@ -62,12 +67,13 @@
</span>
</p>
<p class="control">
<button :disabled="newTaskText.length === 0" @click="addTask()" class="button is-primary">
<span class="icon is-small">
<icon icon="plus"/>
</span>
<x-button
:disabled="newTaskText.length === 0"
@click="addTask()"
icon="plus"
>
Add
</button>
</x-button>
</p>
</div>
<p class="help is-danger" v-if="showError && newTaskText === ''">
@ -97,23 +103,9 @@
</div>
</div>
<div class="column is-4" v-if="isTaskEdit">
<div class="card taskedit">
<header class="card-header">
<p class="card-header-title">
Edit Task
</p>
<a @click="isTaskEdit = false" class="card-header-icon">
<span class="icon">
<icon icon="angle-right"/>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<card class="taskedit" title="Edit Task" :has-close="true" @close="() => isTaskEdit = false">
<edit-task :task="taskEditTask"/>
</div>
</div>
</div>
</card>
</div>
</div>

33
src/views/list/views/Table.vue
View file

@ -2,24 +2,23 @@
<div :class="{'is-loading': taskCollectionService.loading}" class="table-view loader-container">
<div class="filter-container">
<div class="items">
<button @click.prevent.stop="() => {showActiveColumnsFilter = !showActiveColumnsFilter; showTaskFilter = false}"
class="button">
<span class="icon is-small">
<icon icon="th"/>
</span>
<x-button
@click.prevent.stop="() => {showActiveColumnsFilter = !showActiveColumnsFilter; showTaskFilter = false}"
icon="th"
type="secondary"
>
Columns
</button>
<button @click.prevent.stop="() => {showTaskFilter = !showTaskFilter; showActiveColumnsFilter = false}"
class="button">
<span class="icon is-small">
<icon icon="filter"/>
</span>
</x-button>
<x-button
@click.prevent.stop="() => {showTaskFilter = !showTaskFilter; showActiveColumnsFilter = false}"
icon="filter"
type="secondary"
>
Filters
</button>
</x-button>
</div>
<transition name="fade">
<div class="card" v-if="showActiveColumnsFilter">
<div class="card-content">
<card v-if="showActiveColumnsFilter">
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.id">#</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.done">Done</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.title">Title</fancycheckbox>
@ -33,8 +32,7 @@
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.created">Created</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.updated">Updated</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">Created By</fancycheckbox>
</div>
</div>
</card>
</transition>
<filter-popup
@change="loadTasks(1)"
@ -174,7 +172,8 @@
:aria-label="'Goto page ' + p.number"
:class="{'is-current': p.number === currentPage}"
:to="getRouteForPagination(p.number, 'table')"
class="pagination-link">{{ p.number }}
class="pagination-link">
{{ p.number }}
</router-link>
</li>
</template>

34
src/views/namespaces/EditNamespace.vue
View file

@ -4,14 +4,7 @@
This namespace is archived.
It is not possible to create new lists or edit it.
</div>
<div class="card">
<header class="card-header">
<p class="card-header-title">
Edit Namespace
</p>
</header>
<div class="card-content">
<div class="content">
<card title="Edit Namespace">
<form @submit.prevent="submit()">
<div class="field">
<label class="label" for="namespacetext">Namespace Name</label>
@ -61,27 +54,24 @@
<div class="field has-addons mt-4">
<div class="control is-fullwidth">
<button
<x-button
@click="submit()"
:class="{ 'is-loading': namespaceService.loading}"
class="button is-primary is-fullwidth">
:loading="namespaceService.loading"
class="is-fullwidth"
>
Save
</button>
</x-button>
</div>
<div class="control">
<button
<x-button
@click="showDeleteModal = true"
:class="{ 'is-loading': namespaceService.loading}"
class="button is-danger">
<span class="icon">
<icon icon="trash-alt"/>
</span>
</button>
</div>
</div>
</div>
:loading="namespaceService.loading"
class="is-danger"
icon="trash-alt"
/>
</div>
</div>
</card>
<component
:id="namespace.id"

28
src/views/namespaces/ListNamespaces.vue
View file

@ -1,32 +1,26 @@
<template>
<div class="content namespaces-list loader-container" :class="{'is-loading': loading}">
<router-link :to="{name: 'namespace.create'}" class="button is-primary new-namespace">
<span class="icon is-small">
<icon icon="plus"/>
</span>
<x-button :to="{name: 'namespace.create'}" class="new-namespace" icon="plus">
Create namespace
</router-link>
<router-link :to="{name: 'filters.create'}" class="button is-primary new-namespace">
<span class="icon is-small">
<icon icon="filter"/>
</span>
</x-button>
<x-button :to="{name: 'filters.create'}" class="new-namespace" icon="filter">
Create saved filter
</router-link>
</x-button>
<fancycheckbox class="show-archived-check" v-model="showArchived">
Show Archived
</fancycheckbox>
<div :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
<router-link
<x-button
:to="{name: 'list.create', params: {id: n.id}}"
class="button is-pulled-right"
v-if="n.id > 0">
<span class="icon is-small">
<icon icon="plus"/>
</span>
class="is-pulled-right"
type="secondary"
v-if="n.id > 0"
icon="plus"
>
Create list
</router-link>
</x-button>
<h1>
<span>{{ n.title }}</span>

12
src/views/namespaces/NewNamespace.vue
View file

@ -18,12 +18,14 @@
v-model="namespace.title"/>
</p>
<p class="control">
<button :disabled="namespace.title === ''" @click="newNamespace()" class="button is-primary has-no-shadow">
<span class="icon is-small">
<icon icon="plus"/>
</span>
<x-button
:disabled="namespace.title === ''"
@click="newNamespace()"
:shadow="false"
icon="plus"
>
Add
</button>
</x-button>
</p>
</div>
<p class="help is-danger" v-if="showError && namespace.title === ''">

6
src/views/tasks/ShowTasks.vue
View file

@ -30,9 +30,9 @@
/>
</h3>
<div v-if="!showAll">
<a @click="showTodaysTasks()" class="button has-no-shadow mr-2">Today</a>
<a @click="setDatesToNextWeek()" class="button has-no-shadow mr-2">Next Week</a>
<a @click="setDatesToNextMonth()" class="button has-no-shadow">Next Month</a>
<x-button type="secondary" @click="showTodaysTasks()" :shadow="false" class="mr-2">Today</x-button>
<x-button type="secondary" @click="setDatesToNextWeek()" :shadow="false" class="mr-2">Next Week</x-button>
<x-button type="secondary" @click="setDatesToNextMonth()" :shadow="false">Next Month</x-button>
</div>
<template v-if="!taskService.loading && (!hasUndoneTasks || !tasks || tasks.length === 0)">
<h3 class="nothing">Nothing to do - Have a nice day!</h3>

178
src/views/tasks/TaskDetailView.vue
View file

@ -57,7 +57,10 @@
:disabled="taskService.loading || !canWrite"
ref="dueDate"
/>
<a @click="() => {task.dueDate = null;saveTask()}" v-if="task.dueDate && canWrite" class="remove">
<a
@click="() => {task.dueDate = null;saveTask()}"
v-if="task.dueDate && canWrite"
class="remove">
<span class="icon is-small">
<icon icon="times"></icon>
</span>
@ -94,7 +97,11 @@
:disabled="taskService.loading || !canWrite"
ref="startDate"
/>
<a @click="() => {task.startDate = null;saveTask()}" v-if="task.startDate && canWrite" class="remove">
<a
@click="() => {task.startDate = null;saveTask()}"
v-if="task.startDate && canWrite"
class="remove"
>
<span class="icon is-small">
<icon icon="times"></icon>
</span>
@ -117,7 +124,10 @@
:disabled="taskService.loading || !canWrite"
ref="endDate"
/>
<a @click="() => {task.endDate = null;saveTask()}" v-if="task.endDate && canWrite" class="remove">
<a
@click="() => {task.endDate = null;saveTask()}"
v-if="task.endDate && canWrite"
class="remove">
<span class="icon is-small">
<icon icon="times"></icon>
</span>
@ -235,94 +245,124 @@
<comments :can-write="canWrite" :task-id="taskId"/>
</div>
<div class="column is-one-third action-buttons" v-if="canWrite">
<a
:class="{'is-success': !task.done, 'has-no-shadow': !task.done}"
<x-button
:class="{'is-success': !task.done}"
:shadow="task.done"
@click="toggleTaskDone()"
class="button is-outlined has-no-border">
<span class="icon is-small"><icon icon="check-double"/></span>
<template v-if="task.done">
Mark as undone
</template>
<template v-else>
Done!
</template>
</a>
<a
class="is-outlined has-no-border"
icon="check-double"
type="secondary"
>
{{ task.done ? 'Mark as undone' : 'Done!' }}
</x-button>
<x-button
@click="setFieldActive('assignees')"
@shortkey="setFieldActive('assignees')"
class="button"
type="secondary"
v-shortkey="['a']">
<span class="icon is-small"><icon icon="users"/></span>
Assign this task to a user
</a>
<a
</x-button>
<x-button
@click="setFieldActive('labels')"
@shortkey="setFieldActive('labels')"
class="button"
v-shortkey="['l']">
<span class="icon is-small"><icon icon="tags"/></span>
type="secondary"
v-shortkey="['l']"
icon="tags"
>
Add labels
</a>
<a @click="setFieldActive('priority')" class="button">
<span class="icon is-small"><icon :icon="['far', 'star']"/></span>
</x-button>
<x-button
@click="setFieldActive('priority')"
type="secondary"
:icon="['far', 'star']"
>
Set Priority
</a>
<a
</x-button>
<x-button
@click="setFieldActive('dueDate')"
@shortkey="setFieldActive('dueDate')"
class="button"
v-shortkey="['d']">
<span class="icon is-small"><icon icon="calendar"/></span>
type="secondary"
v-shortkey="['d']"
icon="calendar"
>
Set Due Date
</a>
<a @click="setFieldActive('startDate')" class="button">
<span class="icon is-small"><icon icon="calendar-week"/></span>
</x-button>
<x-button
@click="setFieldActive('startDate')"
type="secondary"
icon="calendar-week"
>
Set a Start Date
</a>
<a @click="setFieldActive('endDate')" class="button">
<span class="icon is-small"><icon icon="calendar-week"/></span>
</x-button>
<x-button
@click="setFieldActive('endDate')"
type="secondary"
icon="calendar-week"
>
Set an End Date
</a>
<a @click="setFieldActive('reminders')" class="button">
<span class="icon is-small"><icon icon="history"/></span>
</x-button>
<x-button
@click="setFieldActive('reminders')"
type="secondary"
icon="history"
>
Set Reminders
</a>
<a @click="setFieldActive('repeatAfter')" class="button">
<span class="icon is-small"><icon :icon="['far', 'clock']"/></span>
</x-button>
<x-button
@click="setFieldActive('repeatAfter')"
type="secondary"
:icon="['far', 'clock']"
>
Set a repeating interval
</a>
<a @click="setFieldActive('percentDone')" class="button">
<span class="icon is-small"><icon icon="percent"/></span>
</x-button>
<x-button
@click="setFieldActive('percentDone')"
type="secondary"
icon="percent"
>
Set Percent Done
</a>
<a
</x-button>
<x-button
@click="setFieldActive('attachments')"
@shortkey="setFieldActive('attachments')"
class="button"
v-shortkey="['f']">
<span class="icon is-small"><icon icon="paperclip"/></span>
type="secondary"
v-shortkey="['f']"
icon="paperclip"
>
Add attachments
</a>
<a
</x-button>
<x-button
@click="setFieldActive('relatedTasks')"
@shortkey="setFieldActive('relatedTasks')"
class="button"
v-shortkey="['r']">
<span class="icon is-small"><icon icon="tasks"/></span>
type="secondary"
v-shortkey="['r']"
icon="tasks"
>
Add task relations
</a>
<a @click="setFieldActive('moveList')" class="button">
<span class="icon is-small"><icon icon="list"/></span>
</x-button>
<x-button
@click="setFieldActive('moveList')"
type="secondary"
icon="list"
>
Move task
</a>
<a @click="setFieldActive('color')" class="button">
<span class="icon is-small"><icon icon="fill-drip"/></span>
</x-button>
<x-button
@click="setFieldActive('color')"
type="secondary"
icon="fill-drip"
>
Set task color
</a>
<a @click="showDeleteModal = true" class="button is-danger is-outlined has-no-shadow has-no-border">
<span class="icon is-small"><icon icon="trash-alt"/></span>
</x-button>
<x-button
@click="showDeleteModal = true"
icon="trash-alt"
:shadow="false"
class="is-danger is-outlined has-no-border"
>
Delete task
</a>
</x-button>
<!-- Created / Updated [by] -->
<p class="created">
@ -568,13 +608,17 @@ export default {
this.activeFields[fieldName] = true
this.$nextTick(() => {
if (this.$refs[fieldName]) {
this.$refs[fieldName].$el.focus();
this.$refs[fieldName].$el.focus()
// scroll the field to the center of the screen if not in viewport already
const boundingRect = this.$refs[fieldName].$el.getBoundingClientRect();
const boundingRect = this.$refs[fieldName].$el.getBoundingClientRect()
if (boundingRect.top > (window.scrollY + window.innerHeight) || boundingRect.top < window.scrollY)
this.$refs[fieldName].$el.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
this.$refs[fieldName].$el.scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'nearest'
})
}
})
},

218
src/views/teams/EditTeam.vue
View file

@ -1,36 +1,42 @@
<template>
<div class="loader-container is-max-width-desktop" :class="{ 'is-loading': teamService.loading}">
<div class="card is-fullwidth" v-if="userIsAdmin">
<header class="card-header">
<p class="card-header-title">
Edit Team
</p>
</header>
<div class="card-content">
<div class="content">
<div
class="loader-container is-max-width-desktop"
:class="{ 'is-loading': teamService.loading }"
>
<card class="is-fullwidth" v-if="userIsAdmin" title="Edit Team">
<form @submit.prevent="save()">
<div class="field">
<label class="label" for="teamtext">Team Name</label>
<label class="label" for="teamtext"
>Team Name</label
>
<div class="control">
<input
:class="{ 'disabled': teamMemberService.loading}"
:class="{
disabled: teamMemberService.loading,
}"
:disabled="teamMemberService.loading"
class="input"
id="teamtext"
placeholder="The team text is here..."
type="text"
v-focus
v-model="team.name"/>
v-model="team.name"
/>
</div>
</div>
<p class="help is-danger" v-if="showError && team.name === ''">
<p
class="help is-danger"
v-if="showError && team.name === ''"
>
Please specify a name.
</p>
<div class="field">
<label class="label" for="teamdescription">Description</label>
<label class="label" for="teamdescription"
>Description</label
>
<div class="control">
<editor
:class="{ 'disabled': teamService.loading}"
:class="{ disabled: teamService.loading }"
:disabled="teamService.loading"
:preview-is-default="false"
id="teamdescription"
@ -43,35 +49,27 @@
<div class="field has-addons mt-4">
<div class="control is-fullwidth">
<button
<x-button
@click="save()"
:class="{ 'is-loading': teamService.loading}"
class="button is-primary is-fullwidth">
:loading="teamService.loading"
class="is-fullwidth"
>
Save
</button>
</x-button>
</div>
<div class="control">
<button
<x-button
@click="showDeleteModal = true"
:class="{ 'is-loading': teamService.loading}"
class="button is-danger">
<span class="icon">
<icon icon="trash-alt"/>
</span>
</button>
</div>
</div>
</div>
:loading="teamService.loading"
class="is-danger"
icon="trash-alt"
/>
</div>
</div>
</card>
<div class="card is-fullwidth has-overflow">
<header class="card-header">
<p class="card-header-title">
Team Members
</p>
</header>
<div class="card-content" v-if="userIsAdmin">
<card class="is-fullwidth has-overflow" title="Team Members">
<div class="p-4" v-if="userIsAdmin">
<div class="field has-addons">
<div class="control is-expanded">
<multiselect
@ -84,12 +82,9 @@
/>
</div>
<div class="control">
<button class="button is-primary" @click="addUser">
<span class="icon is-small">
<icon icon="plus"/>
</span>
<x-button @click="addUser" icon="plus">
Add To Team
</button>
</x-button>
</div>
</div>
</div>
@ -117,44 +112,55 @@
</template>
</td>
<td class="actions" v-if="userIsAdmin">
<button :class="{'is-loading': teamMemberService.loading}" @click="() => toggleUserType(m)"
class="button buttonright is-primary"
v-if="m.id !== userInfo.id">
<x-button
:loading="teamMemberService.loading"
@click="() => toggleUserType(m)"
class="mr-2"
v-if="m.id !== userInfo.id"
>
Make {{ m.admin ? 'Member' : 'Admin' }}
</button>
<button :class="{'is-loading': teamMemberService.loading}"
</x-button>
<x-button
:loading="teamMemberService.loading"
@click="() => {member = m; showUserDeleteModal = true}"
class="button is-danger"
v-if="m.id !== userInfo.id">
<span class="icon">
<icon icon="trash-alt"/>
</span>
</button>
class="is-danger"
v-if="m.id !== userInfo.id"
icon="trash-alt"
/>
</td>
</tr>
</tbody>
</table>
</div>
</card>
<!-- Team delete modal -->
<modal
@close="showDeleteModal = false"
@submit="deleteTeam()"
v-if="showDeleteModal">
v-if="showDeleteModal"
>
<span slot="header">Delete the team</span>
<p slot="text">Are you sure you want to delete this team and all of its members?<br/>
All team members will loose access to lists and namespaces shared with this team.<br/>
<b>This CANNOT BE UNDONE!</b></p>
<p slot="text">
Are you sure you want to delete this team and all of its
members?<br/>
All team members will loose access to lists and namespaces
shared with this team.<br/>
<b>This CANNOT BE UNDONE!</b>
</p>
</modal>
<!-- User delete modal -->
<modal
@close="showUserDeleteModal = false"
@submit="deleteUser()"
v-if="showUserDeleteModal">
v-if="showUserDeleteModal"
>
<span slot="header">Remove a user from the team</span>
<p slot="text">Are you sure you want to remove this user from the team?<br/>
They will loose access to all lists and namespaces this team has access to.<br/>
<b>This CANNOT BE UNDONE!</b></p>
<p slot="text">
Are you sure you want to remove this user from the team?<br/>
They will loose access to all lists and namespaces this team has
access to.<br/>
<b>This CANNOT BE UNDONE!</b>
</p>
</modal>
</div>
</template>
@ -199,7 +205,9 @@ export default {
components: {
Multiselect,
editor: () => ({
component: import(/* webpackChunkName: "editor" */ '../../components/input/editor'),
component: import(
/* webpackChunkName: "editor" */ '../../components/input/editor'
),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
@ -213,25 +221,30 @@ export default {
},
watch: {
// call again the method if the route changes
'$route': 'loadTeam',
$route: 'loadTeam',
},
computed: {
userIsAdmin() {
return this.team && this.team.maxRight && this.team.maxRight > Rights.READ
return (
this.team &&
this.team.maxRight &&
this.team.maxRight > Rights.READ
)
},
...mapState({
userInfo: state => state.auth.info,
userInfo: (state) => state.auth.info,
}),
},
methods: {
loadTeam() {
this.team = new TeamModel({id: this.teamId})
this.teamService.get(this.team)
.then(response => {
this.teamService
.get(this.team)
.then((response) => {
this.$set(this, 'team', response)
this.setTitle(`Edit Team ${this.team.name}`)
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},
@ -242,32 +255,47 @@ export default {
}
this.showError = false
this.teamService.update(this.team)
.then(response => {
this.teamService
.update(this.team)
.then((response) => {
this.team = response
this.success({message: 'The team was successfully updated.'}, this)
this.success(
{message: 'The team was successfully updated.'},
this
)
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},
deleteTeam() {
this.teamService.delete(this.team)
this.teamService
.delete(this.team)
.then(() => {
this.success({message: 'The team was successfully deleted.'}, this)
this.success(
{message: 'The team was successfully deleted.'},
this
)
router.push({name: 'teams.index'})
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},
deleteUser() {
this.teamMemberService.delete(this.member)
this.teamMemberService
.delete(this.member)
.then(() => {
this.success({message: 'The user was successfully deleted from the team.'}, this)
this.success(
{
message:
'The user was successfully deleted from the team.',
},
this
)
this.loadTeam()
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
.finally(() => {
@ -279,29 +307,42 @@ export default {
teamId: this.teamId,
username: this.newMember.username,
})
this.teamMemberService.create(newMember)
this.teamMemberService
.create(newMember)
.then(() => {
this.loadTeam()
this.success({message: 'The team member was successfully added.'}, this)
this.success(
{message: 'The team member was successfully added.'},
this
)
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},
toggleUserType(member) {
member.admin = !member.admin
member.teamId = this.teamId
this.teamMemberService.update(member)
.then(r => {
this.teamMemberService
.update(member)
.then((r) => {
for (const tm in this.team.members) {
if (this.team.members[tm].id === member.id) {
this.$set(this.team.members[tm], 'admin', r.admin)
break
}
}
this.success({message: 'The team member was successfully made ' + (member.admin ? 'admin' : 'member') + '.'}, this)
this.success(
{
message:
'The team member was successfully made ' +
(member.admin ? 'admin' : 'member') +
'.',
},
this
)
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},
@ -311,11 +352,12 @@ export default {
return
}
this.userService.getAll({}, {s: query})
.then(response => {
this.userService
.getAll({}, {s: query})
.then((response) => {
this.$set(this, 'foundUsers', response)
})
.catch(e => {
.catch((e) => {
this.error(e, this)
})
},

11
src/views/teams/ListTeams.vue
View file

@ -1,11 +1,12 @@
<template>
<div class="content loader-container is-max-width-desktop" v-bind:class="{ 'is-loading': teamService.loading}">
<router-link :to="{name:'teams.create'}" class="button is-primary button-right">
<span class="icon is-small">
<icon icon="plus"/>
</span>
<x-button
:to="{name:'teams.create'}"
class="is-pulled-right"
icon="plus"
>
New Team
</router-link>
</x-button>
<h1>Teams</h1>
<ul class="teams box" v-if="teams.length > 0">

7
src/views/teams/NewTeam.vue
View file

@ -16,12 +16,9 @@
v-model="team.name"/>
</p>
<p class="control">
<button class="button is-primary has-no-shadow" type="submit">
<span class="icon is-small">
<icon icon="plus"/>
</span>
<x-button :shadow="false" @click="newTeam" icon="plus">
Add
</button>
</x-button>
</p>
</div>
<p class="help is-danger" v-if="showError && team.name === ''">

25
src/views/user/Login.vue
View file

@ -54,12 +54,19 @@
<div class="field is-grouped login-buttons">
<div class="control is-expanded">
<button class="button is-primary" type="submit" v-bind:class="{ 'is-loading': loading}">
<x-button
@click="submit"
:loading="loading"
>
Login
</button>
<router-link :to="{ name: 'user.register' }" class="button" v-if="registrationEnabled">
</x-button>
<x-button
:to="{ name: 'user.register' }"
v-if="registrationEnabled"
type="secondary"
>
Register
</router-link>
</x-button>
</div>
<div class="control">
<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">
@ -73,9 +80,15 @@
</form>
<div v-if="openidConnect.enabled && openidConnect.providers && openidConnect.providers.length > 0" class="mt-4">
<a @click="redirectToProvider(p)" v-for="(p, k) in openidConnect.providers" :key="k" class="button is-fullwidth">
<x-button
@click="redirectToProvider(p)"
v-for="(p, k) in openidConnect.providers"
:key="k"
type="secondary"
class="is-fullwidth"
>
Log in with {{ p.name }}
</a>
</x-button>
</div>
<legal/>

13
src/views/user/PasswordReset.vue
View file

@ -35,9 +35,12 @@
<div class="field is-grouped">
<div class="control">
<button :class="{ 'is-loading': this.passwordResetService.loading}" class="button is-primary"
type="submit">Reset your password
</button>
<x-button
:loading="this.passwordResetService.loading"
@click="submit"
>
Reset your password
</x-button>
</div>
</div>
<div class="notification is-info" v-if="this.passwordResetService.loading">
@ -51,7 +54,9 @@
<div class="notification is-success">
{{ successMessage }}
</div>
<router-link :to="{ name: 'user.login' }" class="button is-primary">Login</router-link>
<x-button :to="{ name: 'user.login' }">
Login
</x-button>
</div>
<legal/>
</div>

17
src/views/user/Register.vue
View file

@ -62,10 +62,15 @@
<div class="field is-grouped">
<div class="control">
<button class="button is-primary" type="submit" :class="{ 'is-loading': loading}" id="register-submit">
<x-button
:loading="loading"
id="register-submit"
@click="submit"
class="mr-2"
>
Register
</button>
<router-link :to="{ name: 'user.login' }" class="button">Login</router-link>
</x-button>
<x-button :to="{ name: 'user.login' }" type="secondary">Login</x-button>
</div>
</div>
<div class="notification is-info" v-if="loading">
@ -136,9 +141,3 @@ export default {
},
}
</script>
<style scoped>
.button {
margin: 0 0.4em 0 0;
}
</style>

14
src/views/user/RequestPasswordReset.vue
View file

@ -20,11 +20,13 @@
<div class="field is-grouped">
<div class="control">
<button class="button is-primary" type="submit"
v-bind:class="{ 'is-loading': passwordResetService.loading}">Send me a password reset
link
</button>
<router-link :to="{ name: 'user.login' }" class="button">Login</router-link>
<x-button
@click="submit"
:loading="passwordResetService.loading"
>
Send me a password reset link
</x-button>
<x-button :to="{ name: 'user.login' }" type="secondary">Login</x-button>
</div>
</div>
<div class="notification is-danger" v-if="errorMsg">
@ -35,7 +37,7 @@
<div class="notification is-success">
Check your inbox! You should have a mail with instructions on how to reset your password.
</div>
<router-link :to="{ name: 'user.login' }" class="button is-primary">Login</router-link>
<x-button :to="{ name: 'user.login' }">Login</x-button>
</div>
<legal/>
</div>

141
src/views/user/Settings.vue
View file

@ -3,14 +3,7 @@
:class="{ 'is-loading': passwordUpdateService.loading || emailUpdateService.loading || totpService.loading }"
class="loader-container is-max-width-desktop">
<!-- Password update -->
<div class="card">
<header class="card-header">
<p class="card-header-title">
Update Your Password
</p>
</header>
<div class="card-content">
<div class="content">
<card title="Update Your Password">
<form @submit.prevent="updatePassword()">
<div class="field">
<label class="label" for="newPassword">New Password</label>
@ -50,25 +43,16 @@
</div>
</form>
<div class="bigbuttons">
<button :class="{ 'is-loading': passwordUpdateService.loading}" @click="updatePassword()"
class="button is-primary is-fullwidth">
<x-button
:loading="passwordUpdateService.loading"
@click="updatePassword()"
class="is-fullwidth mt-4">
Save
</button>
</div>
</div>
</div>
</div>
</x-button>
</card>
<!-- Update E-Mail -->
<div class="card">
<header class="card-header">
<p class="card-header-title">
Update Your E-Mail Address
</p>
</header>
<div class="card-content">
<div class="content">
<card title="Update Your E-Mail Address">
<form @submit.prevent="updateEmail()">
<div class="field">
<label class="label" for="newEmail">New Email Address</label>
@ -96,25 +80,16 @@
</div>
</form>
<div class="bigbuttons">
<button :class="{ 'is-loading': emailUpdateService.loading}" @click="updateEmail()"
class="button is-primary is-fullwidth">
<x-button
:loading="emailUpdateService.loading"
@click="updateEmail()"
class="is-fullwidth mt-4">
Save
</button>
</div>
</div>
</div>
</div>
</x-button>
</card>
<!-- General -->
<div class="card update-name">
<header class="card-header">
<p class="card-header-title">
General Settings
</p>
</header>
<div class="card-content">
<div class="content">
<card title="General Settings" class="general-settings">
<div class="field">
<label class="label" for="newName">Name</label>
<div class="control">
@ -134,35 +109,27 @@
</label>
</div>
<div class="bigbuttons">
<button :class="{ 'is-loading': userSettingsService.loading}" @click="updateSettings()"
class="button is-primary is-fullwidth">
<x-button
:loading="userSettingsService.loading"
@click="updateSettings()"
class="is-fullwidth mt-4"
>
Save
</button>
</div>
</div>
</div>
</div>
</x-button>
</card>
<!-- Avatar -->
<avatar-settings/>
<!-- TOTP -->
<div class="card" v-if="totpEnabled">
<header class="card-header">
<p class="card-header-title">
Two Factor Authentication
</p>
</header>
<div class="card-content">
<a
:class="{ 'is-loading': totpService.loading }"
<card title="Two Factor Authentication" v-if="totpEnabled">
<x-button
:loading="totpService.loading"
@click="totpEnroll()"
class="button is-primary"
v-if="!totpEnrolled && totp.secret === ''">
Enroll
</a>
<div class="content" v-else-if="totp.secret !== '' && !totp.enabled">
</x-button>
<template v-else-if="totp.secret !== '' && !totp.enabled">
<p>
To finish your setup, use this secret in your totp app (Google Authenticator or similar):
<strong>{{ totp.secret }}</strong><br/>
@ -184,14 +151,14 @@
v-model="totpConfirmPasscode"/>
</div>
</div>
<a @click="totpConfirm()" class="button is-primary">Confirm</a>
</div>
<div class="content" v-else-if="totp.secret !== '' && totp.enabled">
<x-button @click="totpConfirm()">Confirm</x-button>
</template>
<template v-else-if="totp.secret !== '' && totp.enabled">
<p>
You've sucessfully set up two factor authentication!
</p>
<p v-if="!totpDisableForm">
<a @click="totpDisableForm = true" class="button is-danger">Disable</a>
<x-button @click="totpDisableForm = true" class="is-danger">Disable</x-button>
</p>
<div v-if="totpDisableForm">
<div class="field">
@ -207,38 +174,22 @@
v-model="totpDisablePassword"/>
</div>
</div>
<a @click="totpDisable()" class="button is-danger">Disable two factor authentication</a>
</div>
</div>
</div>
<x-button @click="totpDisable()" class="is-danger">Disable two factor authentication</x-button>
</div>
</template>
</card>
<!-- Migration -->
<div class="card" v-if="migratorsEnabled">
<header class="card-header">
<p class="card-header-title">
Migrate from other services to Vikunja
</p>
</header>
<div class="card-content">
<router-link
<card title="Migrate from other services to Vikunja" v-if="migratorsEnabled">
<x-button
:to="{name: 'migrate.start'}"
class="button is-primary"
v-if="migratorsEnabled"
>
Import your data into Vikunja
</router-link>
</div>
</div>
</x-button>
</card>
<!-- Caldav -->
<div class="card" v-if="caldavEnabled">
<header class="card-header">
<p class="card-header-title">
Caldav
</p>
</header>
<div class="card-content content">
<card v-if="caldavEnabled" title="Caldav">
<p>
You can connect Vikunja to caldav clients to view and manage all tasks from different clients.
Enter this url into your client:
@ -248,11 +199,12 @@
<input type="text" v-model="caldavUrl" class="input" readonly/>
</div>
<div class="control">
<a @click="copy(caldavUrl)" class="button is-primary has-no-shadow" v-tooltip="'Copy to clipboard'">
<span class="icon">
<icon icon="paste"/>
</span>
</a>
<x-button
@click="copy(caldavUrl)"
:shadow="false"
v-tooltip="'Copy to clipboard'"
icon="paste"
/>
</div>
</div>
<p>
@ -260,8 +212,7 @@
More information about caldav in Vikunja
</a>
</p>
</div>
</div>
</card>
</div>
</template>