ami/tl-vikunja
1
0
Fork 0
Code 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
Download Patch File Download Diff File Expand all files Collapse all files

12
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>
<icon icon="sign-out-alt"/>
</span>
</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>

11
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>
<icon icon="chevron-down"/>
</span>
</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}`"

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

@ -1,68 +1,65 @@
<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">
<input
@change="uploadBackground"
accept="image/*"
class="is-hidden"
ref="backgroundUploadInput"
type="file"
/>
<a
:class="{'is-loading': backgroundUploadService.loading}"
@click="$refs.backgroundUploadInput.click()"
class="button is-primary"
>
Choose a background from your pc
</a>
</div>
<div class="content" v-if="unsplashBackgroundEnabled">
<input
:class="{'is-loading': backgroundService.loading}"
@keyup="() => newBackgroundSearch()"
class="input is-expanded"
placeholder="Search for a background..."
type="text"
v-model="backgroundSearchTerm"
/>
<p class="unsplash-link"><a href="https://unsplash.com" target="_blank">Powered by Unsplash</a></p>
<div class="image-search-result">
<a
:key="im.id"
:style="{'background-image': `url(${backgroundThumbs[im.id]})`}"
@click="() => setBackground(im.id)"
class="image"
v-for="im in backgroundSearchResult">
<a :href="`https://unsplash.com/@${im.info.author}`" target="_blank" class="info">
{{ im.info.authorName }}
</a>
</a>
</div>
<a
:disabled="backgroundService.loading"
@click="() => searchBackgrounds(currentPage + 1)"
class="button is-centered is-load-more-button has-no-shadow mt-4"
v-if="backgroundSearchResult.length > 0"
>
<template v-if="backgroundService.loading">
Loading...
</template>
<template v-else>
Load more photos
</template>
</a>
</div>
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/*"
class="is-hidden"
ref="backgroundUploadInput"
type="file"
/>
<x-button
:loading="backgroundUploadService.loading"
@click="$refs.backgroundUploadInput.click()"
type="primary"
>
Choose a background from your pc
</x-button>
</div>
</div>
<template v-if="unsplashBackgroundEnabled">
<input
:class="{'is-loading': backgroundService.loading}"
@keyup="() => newBackgroundSearch()"
class="input is-expanded"
placeholder="Search for a background..."
type="text"
v-model="backgroundSearchTerm"
/>
<p class="unsplash-link"><a href="https://unsplash.com" target="_blank">Powered by Unsplash</a></p>
<div class="image-search-result">
<a
:key="im.id"
:style="{'background-image': `url(${backgroundThumbs[im.id]})`}"
@click="() => setBackground(im.id)"
class="image"
v-for="im in backgroundSearchResult">
<a :href="`https://unsplash.com/@${im.info.author}`" target="_blank" class="info">
{{ im.info.authorName }}
</a>
</a>
</div>
<x-button
:disabled="backgroundService.loading"
@click="() => searchBackgrounds(currentPage + 1)"
class="is-load-more-button mt-4"
:shadow="false"
type="secondary"
v-if="backgroundSearchResult.length > 0"
>
<template v-if="backgroundService.loading">
Loading...
</template>
<template v-else>
Load more photos
</template>
</x-button>
</template>
</card>
</template>
<script>

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

@ -1,182 +1,180 @@
<template>
<div class="card filters has-overflow">
<div class="card-content">
<fancycheckbox v-model="params.filter_include_nulls">
Include Tasks which don't have a value set
</fancycheckbox>
<fancycheckbox
v-model="filters.requireAllFilters"
@change="setFilterConcat()"
>
Require all filters to be true for a task to show up
</fancycheckbox>
<div class="field">
<label class="label">Show Done Tasks</label>
<div class="control">
<fancycheckbox @change="setDoneFilter" v-model="filters.done">
Show Done Tasks
</fancycheckbox>
</div>
<card class="filters has-overflow">
<fancycheckbox v-model="params.filter_include_nulls">
Include Tasks which don't have a value set
</fancycheckbox>
<fancycheckbox
v-model="filters.requireAllFilters"
@change="setFilterConcat()"
>
Require all filters to be true for a task to show up
</fancycheckbox>
<div class="field">
<label class="label">Show Done Tasks</label>
<div class="control">
<fancycheckbox @change="setDoneFilter" v-model="filters.done">
Show Done Tasks
</fancycheckbox>
</div>
<div class="field">
<label class="label">Priority</label>
<div class="control single-value-control">
<priority-select
:disabled="!filters.usePriority"
v-model.number="filters.priority"
@change="setPriority"
/>
<fancycheckbox
v-model="filters.usePriority"
@change="setPriority"
>
Enable Filter By Priority
</fancycheckbox>
</div>
</div>
<div class="field">
<label class="label">Priority</label>
<div class="control single-value-control">
<priority-select
:disabled="!filters.usePriority"
v-model.number="filters.priority"
@change="setPriority"
/>
<fancycheckbox
v-model="filters.usePriority"
@change="setPriority"
>
Enable Filter By Priority
</fancycheckbox>
</div>
<div class="field">
<label class="label">Percent Done</label>
<div class="control single-value-control">
<percent-done-select
v-model.number="filters.percentDone"
@change="setPercentDoneFilter"
:disabled="!filters.usePercentDone"
/>
<fancycheckbox
v-model="filters.usePercentDone"
@change="setPercentDoneFilter"
>
Enable Filter By Percent Done
</fancycheckbox>
</div>
</div>
<div class="field">
<label class="label">Percent Done</label>
<div class="control single-value-control">
<percent-done-select
v-model.number="filters.percentDone"
@change="setPercentDoneFilter"
:disabled="!filters.usePercentDone"
/>
<fancycheckbox
v-model="filters.usePercentDone"
@change="setPercentDoneFilter"
>
Enable Filter By Percent Done
</fancycheckbox>
</div>
<div class="field">
<label class="label">Due Date</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
@on-close="setDueDateFilter"
class="input"
placeholder="Due Date Range"
v-model="filters.dueDate"
/>
</div>
</div>
<div class="field">
<label class="label">Due Date</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
@on-close="setDueDateFilter"
class="input"
placeholder="Due Date Range"
v-model="filters.dueDate"
/>
</div>
<div class="field">
<label class="label">Start Date</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
@on-close="setStartDateFilter"
class="input"
placeholder="Start Date Range"
v-model="filters.startDate"
/>
</div>
</div>
<div class="field">
<label class="label">Start Date</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
@on-close="setStartDateFilter"
class="input"
placeholder="Start Date Range"
v-model="filters.startDate"
/>
</div>
<div class="field">
<label class="label">End Date</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
@on-close="setEndDateFilter"
class="input"
placeholder="End Date Range"
v-model="filters.endDate"
/>
</div>
</div>
<div class="field">
<label class="label">End Date</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
@on-close="setEndDateFilter"
class="input"
placeholder="End Date Range"
v-model="filters.endDate"
/>
</div>
<div class="field">
<label class="label">Reminders</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
@on-close="setReminderFilter"
class="input"
placeholder="Reminder Date Range"
v-model="filters.reminders"
/>
</div>
</div>
<div class="field">
<label class="label">Reminders</label>
<div class="control">
<flat-pickr
:config="flatPickerConfig"
@on-close="setReminderFilter"
class="input"
placeholder="Reminder Date Range"
v-model="filters.reminders"
/>
</div>
</div>
<div class="field">
<label class="label">Assignees</label>
<div class="control">
<multiselect
:loading="usersService.loading"
placeholder="Type to search for a user..."
@search="query => find('users', query)"
:search-results="foundusers"
@select="() => add('users', 'assignees')"
label="username"
:multiple="true"
@remove="() => remove('users', 'assignees')"
v-model="users"
/>
</div>
<div class="field">
<label class="label">Assignees</label>
<div class="control">
<multiselect
:loading="usersService.loading"
placeholder="Type to search for a user..."
@search="query => find('users', query)"
:search-results="foundusers"
@select="() => add('users', 'assignees')"
label="username"
:multiple="true"
@remove="() => remove('users', 'assignees')"
v-model="users"
/>
</div>
</div>
<div class="field">
<label class="label">Labels</label>
<div class="control">
<multiselect
:loading="labelService.loading"
placeholder="Type to search for a label..."
@search="findLabels"
:search-results="foundLabels"
@select="label => addLabel(label)"
label="title"
:multiple="true"
v-model="labels"
>
<template v-slot:tag="props">
<div class="field">
<label class="label">Labels</label>
<div class="control">
<multiselect
:loading="labelService.loading"
placeholder="Type to search for a label..."
@search="findLabels"
:search-results="foundLabels"
@select="label => addLabel(label)"
label="title"
:multiple="true"
v-model="labels"
>
<template v-slot:tag="props">
<span
:style="{'background': props.item.hexColor, 'color': props.item.textColor}"
class="tag ml-2 mt-2">
<span>{{ props.item.title }}</span>
<a @click="removeLabel(props.item)" class="delete is-small"></a>
</span>
</template>
</multiselect>
</template>
</multiselect>
</div>
</div>
<template v-if="$route.name === 'filters.create' || $route.name === 'list.edit'">
<div class="field">
<label class="label">Lists</label>
<div class="control">
<multiselect
:loading="listsService.loading"
placeholder="Type to search for a list..."
@search="query => find('lists', query)"
:search-results="foundlists"
@select="() => add('lists', 'list_id')"
label="title"
@remove="() => remove('lists', 'list_id')"
:multiple="true"
v-model="lists"
/>
</div>
</div>
<template v-if="$route.name === 'filters.create' || $route.name === 'list.edit'">
<div class="field">
<label class="label">Lists</label>
<div class="control">
<multiselect
:loading="listsService.loading"
placeholder="Type to search for a list..."
@search="query => find('lists', query)"
:search-results="foundlists"
@select="() => add('lists', 'list_id')"
label="title"
@remove="() => remove('lists', 'list_id')"
:multiple="true"
v-model="lists"
/>
</div>
<div class="field">
<label class="label">Namespaces</label>
<div class="control">
<multiselect
:loading="namespaceService.loading"
placeholder="Type to search for a namespace..."
@search="query => find('namespace', query)"
:search-results="foundnamespace"
@select="() => add('namespace', 'namespace')"
label="title"
@remove="() => remove('namespace', 'namespace')"
:multiple="true"
v-model="namespace"
/>
</div>
<div class="field">
<label class="label">Namespaces</label>
<div class="control">
<multiselect
:loading="namespaceService.loading"
placeholder="Type to search for a namespace..."
@search="query => find('namespace', query)"
:search-results="foundnamespace"
@select="() => add('namespace', 'namespace')"
label="title"
@remove="() => remove('namespace', 'namespace')"
:multiple="true"
v-model="namespace"
/>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
</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>

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

@ -2,71 +2,50 @@
<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">
<p>
<strong>Toggle The Menu</strong>
<span class="shortcuts">
<span>ctrl</span>
<i>+</i>
<span>e</span>
</span>
</p>
<h3>Kanban</h3>
<div class="message is-primary" v-if="$route.name === 'list.kanban'">
<div class="message-body">
These shortcuts work on the current page.
</div>
<card class="has-background-white has-no-shadow" title="Available Keyboard Shortcuts">
<p>
<strong>Toggle The Menu</strong>
<shortcut :keys="['ctrl', 'e']"/>
</p>
<h3>Kanban</h3>
<div class="message is-primary" v-if="$route.name === 'list.kanban'">
<div class="message-body">
These shortcuts work on the current page.
</div>
<p>
<strong>Mark a task as done</strong>
<span class="shortcuts">
<span>ctrl</span>
<i>+</i>
<span>click</span>
</span>
</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-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>
</p>
<p>
<strong>Add labels to this task</strong>
<span class="shortcuts">
<span>l</span>
</span>
</p>
<p>
<strong>Change the due date of this task</strong>
<span class="shortcuts">
<span>d</span>
</span>
</p>
<p>
<strong>Add an attachment to this task</strong>
<span class="shortcuts">
<span>f</span>
</span>
</p>
<p>
<strong>Modify related tasks of this task</strong>
<span class="shortcuts">
<span>r</span>
</span>
</p>
</div>
</div>
<p>
<strong>Mark a task as done</strong>
<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-body">
These shortcuts work on the current page.
</div>
</div>
<p>
<strong>Assign this task to a user</strong>
<shortcut :keys="['a']"/>
</p>
<p>
<strong>Add labels to this task</strong>
<shortcut :keys="['l']"/>
</p>
<p>
<strong>Change the due date of this task</strong>
<shortcut :keys="['d']"/>
</p>
<p>
<strong>Add an attachment to this task</strong>
<shortcut :keys="['f']"/>
</p>
<p>
<strong>Modify related tasks of this task</strong>
<shortcut :keys="['r']"/>
</p>
</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)

36
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
:key="'action_'+i"
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>

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

@ -4,16 +4,28 @@
<div class="modal-container" @click.prevent.stop="$emit('close')">
<div class="modal-content">
<slot>
<div class="header">
<slot name="header"></slot>
</div>
<div class="content">
<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>
</div>
<div class="header">
<slot name="header"></slot>
</div>
<div class="content">
<slot name="text"></slot>
</div>
<div class="actions">
<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>
</div>

140
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'">
<span class="icon">
<icon icon="paste"/>
</span>
</a>
<x-button
@click="copy(getShareLink(s.hash))"
:shadow="false"
v-tooltip="'Copy to clipboard'"
>
<span class="icon">
<icon icon="paste"/>
</span>
</x-button>
</div>
</div>
</td>
@ -57,30 +62,35 @@
</td>
<td class="type">
<template v-if="s.right === rights.ADMIN">
<span class="icon is-small">
<icon icon="lock"/>
</span>
<span class="icon is-small">
<icon icon="lock"/>
</span>
Admin
</template>
<template v-else-if="s.right === rights.READ_WRITE">
<span class="icon is-small">
<icon icon="pen"/>
</span>
<span class="icon is-small">
<icon icon="pen"/>
</span>
Write
</template>
<template v-else>
<span class="icon is-small">
<icon icon="users"/>
</span>
<span class="icon is-small">
<icon icon="users"/>
</span>
Read-only
</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(() => {

264
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,84 +16,114 @@
/>
</p>
<p class="control">
<button class="button is-primary" @click="add()">
Share
</button>
<x-button @click="add()"> Share </x-button>
</p>
</div>
</div>
<table class="table is-striped is-hoverable is-fullwidth">
<tbody>
<tr :key="s.id" v-for="s in sharables">
<template v-if="shareType === 'user'">
<td>{{ s.getDisplayName() }}</td>
<td>
<template v-if="s.id === userInfo.id">
<b class="is-success">You</b>
<tr :key="s.id" v-for="s in sharables">
<template v-if="shareType === 'user'">
<td>{{ s.getDisplayName() }}</td>
<td>
<template v-if="s.id === userInfo.id">
<b class="is-success">You</b>
</template>
</td>
</template>
<template v-if="shareType === 'team'">
<td>
<router-link
:to="{
name: 'teams.edit',
params: { id: s.id },
}"
>
{{ s.name }}
</router-link>
</td>
</template>
<td class="type">
<template v-if="s.right === rights.ADMIN">
<span class="icon is-small">
<icon icon="lock" />
</span>
Admin
</template>
<template v-else-if="s.right === rights.READ_WRITE">
<span class="icon is-small">
<icon icon="pen" />
</span>
Write
</template>
<template v-else>
<span class="icon is-small">
<icon icon="users" />
</span>
Read-only
</template>
</td>
</template>
<template v-if="shareType === 'team'">
<td>
<router-link :to="{name: 'teams.edit', params: {id: s.id}}">
{{ s.name }}
</router-link>
<td class="actions" v-if="userIsAdmin">
<div class="select">
<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>
</select>
</div>
<x-button
@click="
() => {
sharable = s
showDeleteModal = true
}
"
class="is-danger"
icon="trash-alt"
/>
</td>
</template>
<td class="type">
<template v-if="s.right === rights.ADMIN">
<span class="icon is-small">
<icon icon="lock"/>
</span>
Admin
</template>
<template v-else-if="s.right === rights.READ_WRITE">
<span class="icon is-small">
<icon icon="pen"/>
</span>
Write
</template>
<template v-else>
<span class="icon is-small">
<icon icon="users"/>
</span>
Read-only
</template>
</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
</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>
</td>
</tr>
</tr>
</tbody>
</table>
<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>
import {mapState} from 'vuex'
import { mapState } from 'vuex'
import UserNamespaceService from '../../services/userNamespace'
import UserNamespaceModel from '../../models/userNamespace'
@ -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()
@ -167,11 +194,13 @@ export default {
if (this.type === 'list') {
this.typeString = `list`
this.stuffService = new UserListService()
this.stuffModel = new UserListModel({listId: this.id})
this.stuffModel = new UserListModel({ listId: this.id })
} 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)
}
@ -183,11 +212,13 @@ export default {
if (this.type === 'list') {
this.typeString = `list`
this.stuffService = new TeamListService()
this.stuffModel = new TeamListModel({listId: this.id})
this.stuffModel = new TeamListModel({ listId: this.id })
} 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)
})
},

85
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,27 +86,36 @@
<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>
<div class="field">
<label class="label">Color</label>
<div class="control">
<color-picker v-model="taskEditTask.hexColor"/>
<color-picker v-model="taskEditTask.hexColor" />
</div>
</div>
@ -109,7 +125,7 @@
<li :key="a.id" v-for="(a, index) in taskEditTask.assignees">
{{ a.getDisplayName() }}
<a @click="deleteAssigneeByIndex(index)">
<icon icon="times"/>
<icon icon="times" />
</a>
</li>
</ul>
@ -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)
})
},

248
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,19 +57,29 @@
</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,
'has-light-text': !colorIsDark(t.hexColor),
'has-dark-text': colorIsDark(t.hexColor)
}"
done: t.done,
'is-current-edit':
taskToEdit !== null && taskToEdit.id === t.id,
'has-light-text': !colorIsDark(t.hexColor),
'has-dark-text': colorIsDark(t.hexColor),
}"
:gridX="dayWidth"
:h="31"
:isActive="canWrite"
@ -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="{
'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>
<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
>
<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">
<edit-task :task="taskToEdit"/>
</div>
</div>
</div>
<card
v-if="isTaskEdit"
class="taskedit"
title="Edit Task"
@close="() => {isTaskEdit = false;taskToEdit = null}"
:has-close="true"
>
<edit-task :task="taskToEdit"/>
</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 tasks.concat(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)
})
},

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

@ -2,7 +2,7 @@
<div class="attachments">
<h3>
<span class="icon is-grey">
<icon icon="paperclip"/>
<icon icon="paperclip" />
</span>
Attachments
</h3>
@ -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
<icon icon="cloud-upload-alt" />
</div>
<div class="hint">Drop files here to upload</div>
</div>
</div>
@ -85,18 +108,27 @@
<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=""/>
<img :src="attachmentImageBlobUrl" alt="" />
</modal>
</transition>
</div>
@ -106,7 +138,7 @@
import AttachmentService from '../../../services/attachment'
import AttachmentModel from '../../../models/attachment'
import User from '../../misc/user'
import {mapState} from 'vuex'
import { mapState } from 'vuex'
export default {
name: 'attachments',
@ -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()
@ -183,32 +215,40 @@ export default {
this.uploadFiles(this.$refs.files.files)
},
uploadFiles(files) {
const attachmentModel = new AttachmentModel({taskId: this.taskId})
this.attachmentService.create(attachmentModel, files)
.then(r => {
const attachmentModel = new AttachmentModel({ taskId: this.taskId })
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,15 +256,16 @@ 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.attachmentImageBlobUrl = url
})
this.attachmentService.getBlobUrl(attachment).then((url) => {
this.attachmentImageBlobUrl = url
})
} else {
this.downloadAttachment(attachment)
}

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

@ -2,33 +2,70 @@
<div class="content details">
<h3 v-if="canWrite || comments.length > 0">
<span class="icon is-grey">
<icon :icon="['far', 'comments']"/>
<icon :icon="['far', 'comments']" />
</span>
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}"
:disabled="newComment.comment === ''"
@click="addComment()" class="button is-primary">Comment
</button>
<x-button
:loading="
taskCommentService.loading && !isCommentEdit
"
:disabled="newComment.comment === ''"
@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,
@ -140,9 +205,9 @@ export default {
},
created() {
this.taskCommentService = new TaskCommentService()
this.newComment = new TaskCommentModel({taskId: this.taskId})
this.commentEdit = new TaskCommentModel({taskId: this.taskId})
this.commentToDelete = new TaskCommentModel({taskId: this.taskId})
this.newComment = new TaskCommentModel({ taskId: this.taskId })
this.commentEdit = new TaskCommentModel({ taskId: this.taskId })
this.commentToDelete = new TaskCommentModel({ taskId: this.taskId })
this.comments = []
},
mounted() {
@ -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, [{
action: () => this.toggleDelete(c.id),
title: 'Remove',
}])
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">

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

@ -1,69 +1,64 @@
<template>
<div class="card">
<header class="card-header">
<p class="card-header-title">
Avatar
</p>
</header>
<div class="card-content">
<div class="control mb-4">
<label class="radio">
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="default"/>
Default
</label>
<label class="radio">
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="initials"/>
Initials
</label>
<label class="radio">
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="gravatar"/>
Gravatar
</label>
<label class="radio">
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="upload"/>
Upload
</label>
</div>
<template v-if="avatarProvider === 'upload'">
<input
@change="cropAvatar"
accept="image/*"
class="is-hidden"
ref="avatarUploadInput"
type="file"
/>
<a
:class="{ 'is-loading': avatarService.loading || loading}"
@click="$refs.avatarUploadInput.click()"
class="button is-primary"
v-if="!isCropAvatar">
Upload Avatar
</a>
<template v-else>
<cropper
:src="avatarToCrop"
:stencil-props="{aspectRatio: 1}"
@ready="() => loading = false"
class="mb-4"
ref="cropper"/>
<a
:class="{ 'is-loading': avatarService.loading || loading}"
@click="uploadAvatar"
class="button is-primary">
Upload Avatar
</a>
</template>
</template>
<div class="bigbuttons" v-if="avatarProvider !== 'upload'">
<button :class="{ 'is-loading': avatarService.loading || loading}" @click="updateAvatarStatus()"
class="button is-primary is-fullwidth">
Save
</button>
</div>
<card title="Avatar">
<div class="control mb-4">
<label class="radio">
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="default"/>
Default
</label>
<label class="radio">
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="initials"/>
Initials
</label>
<label class="radio">
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="gravatar"/>
Gravatar
</label>
<label class="radio">
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="upload"/>
Upload
</label>
</div>
</div>
<template v-if="avatarProvider === 'upload'">
<input
@change="cropAvatar"
accept="image/*"
class="is-hidden"
ref="avatarUploadInput"
type="file"
/>
<x-button
:loading="avatarService.loading || loading"
@click="$refs.avatarUploadInput.click()"
v-if="!isCropAvatar">
Upload Avatar
</x-button>
<template v-else>
<cropper
:src="avatarToCrop"
:stencil-props="{aspectRatio: 1}"
@ready="() => loading = false"
class="mb-4"
ref="cropper"/>
<x-button
:loading="avatarService.loading || loading"
@click="uploadAvatar"
>
Upload Avatar
</x-button>
</template>
</template>
<div class="mt-2" v-if="avatarProvider !== 'upload'">
<x-button
:loading="avatarService.loading || loading"
@click="updateAvatarStatus()"
class="is-fullwidth"
>
Save
</x-button>
</div>
</card>
</template>
<script>