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

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

@ -4,132 +4,112 @@
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">
<form @submit.prevent="submit()">
<div class="field">
<label class="label" for="listtext">List Name</label>
<div class="control">
<input
:class="{ 'disabled': listService.loading}"
:disabled="listService.loading"
@keyup.enter="submit"
class="input"
id="listtext"
placeholder="The list title goes here..."
type="text"
v-focus
v-model="list.title"/>
</div>
</div>
<div class="field">
<label
class="label"
for="listtext"
v-tooltip="'The list identifier can be used to uniquely identify a task across lists. You can set it to empty to disable it.'">
List Identifier
</label>
<div class="control">
<input
:class="{ 'disabled': listService.loading}"
:disabled="listService.loading"
@keyup.enter="submit"
class="input"
id="listtext"
placeholder="The list identifier goes here..."
type="text"
v-focus
v-model="list.identifier"/>
</div>
</div>
<div class="field">
<label class="label" for="listdescription">Description</label>
<div class="control">
<editor
:class="{ 'disabled': listService.loading}"
:disabled="listService.loading"
:preview-is-default="false"
id="listdescription"
placeholder="The lists description goes here..."
v-model="list.description"
/>
</div>
</div>
<div class="field">
<label class="label" for="isArchivedCheck">Is Archived</label>
<div class="control">
<fancycheckbox
v-model="list.isArchived"
v-tooltip="'If a list is archived, you cannot create new tasks or edit the list or existing tasks.'">
This list is archived
</fancycheckbox>
</div>
</div>
<div class="field">
<label class="label">Color</label>
<div class="control">
<color-picker v-model="list.hexColor"/>
</div>
</div>
</form>
<div class="field has-addons mt-4">
<div class="control is-fullwidth">
<button
@click="submit()"
:class="{ 'is-loading': listService.loading}"
class="button is-primary is-fullwidth">
Save
</button>
</div>
<div class="control">
<button
@click="showDeleteModal = true"
:class="{ 'is-loading': listService.loading}"
class="button is-danger">
<span class="icon">
<icon icon="trash-alt"/>
</span>
</button>
</div>
<card title="Edit List">
<form @submit.prevent="submit()">
<div class="field">
<label class="label" for="listtext">List Name</label>
<div class="control">
<input
:class="{ 'disabled': listService.loading}"
:disabled="listService.loading"
@keyup.enter="submit"
class="input"
id="listtext"
placeholder="The list title goes here..."
type="text"
v-focus
v-model="list.title"/>
</div>
</div>
</div>
</div>
<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">
<p>Select a namespace which should hold the duplicated list:</p>
<div class="field has-addons">
<div class="control is-expanded">
<namespace-search @selected="selectNamespace"/>
</div>
<div class="control">
<button
:class="{'is-loading': listDuplicateService.loading}"
@click="duplicateList"
class="button is-primary"
type="submit">
Duplicate
</button>
</div>
<div class="field">
<label
class="label"
for="listtext"
v-tooltip="'The list identifier can be used to uniquely identify a task across lists. You can set it to empty to disable it.'">
List Identifier
</label>
<div class="control">
<input
:class="{ 'disabled': listService.loading}"
:disabled="listService.loading"
@keyup.enter="submit"
class="input"
id="listtext"
placeholder="The list identifier goes here..."
type="text"
v-focus
v-model="list.identifier"/>
</div>
</div>
<div class="field">
<label class="label" for="listdescription">Description</label>
<div class="control">
<editor
:class="{ 'disabled': listService.loading}"
:disabled="listService.loading"
:preview-is-default="false"
id="listdescription"
placeholder="The lists description goes here..."
v-model="list.description"
/>
</div>
</div>
<div class="field">
<label class="label" for="isArchivedCheck">Is Archived</label>
<div class="control">
<fancycheckbox
v-model="list.isArchived"
v-tooltip="'If a list is archived, you cannot create new tasks or edit the list or existing tasks.'">
This list is archived
</fancycheckbox>
</div>
</div>
<div class="field">
<label class="label">Color</label>
<div class="control">
<color-picker v-model="list.hexColor"/>
</div>
</div>
</form>
<div class="field has-addons mt-4">
<div class="control is-fullwidth">
<x-button
@click="submit()"
:loading="listService.loading"
class="is-fullwidth">
Save
</x-button>
</div>
<div class="control">
<x-button
@click="showDeleteModal = true"
:locading="listService.loading"
icon="trash-alt"
class="is-danger"
/>
</div>
</div>
</div>
</card>
<!-- 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">
<div class="control is-expanded">
<namespace-search @selected="selectNamespace"/>
</div>
<div class="control">
<x-button
:loading="listDuplicateService.loading"
@click="duplicateList"
>
Duplicate
</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 === ''">

67
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">
Add a task
</span>
<span v-else>
Add another task
</span>
</a>
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
</template>
<template v-else>
Add another task
</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>
Create a new bucket
</span>
</a>
:shadow="false"
class="is-transparent is-fullwidth has-text-centered"
v-if="!showNewBucketInput"
type="secondary"
icon="plus"
>
Create a new bucket
</x-button>
</div>
</div>
@ -269,7 +270,7 @@ import {applyDrag} from '@/helpers/applyDrag'
import {mapState} from 'vuex'
import {saveListView} from '@/helpers/saveListView'
import Rights from '../../../models/rights.json'
import { LOADING, LOADING_MODULE } from '../../../store/mutation-types'
import {LOADING, LOADING_MODULE} from '../../../store/mutation-types'
import FilterPopup from '@/components/list/partials/filter-popup'
export default {

66
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">
<edit-task :task="taskEditTask"/>
</div>
</div>
</div>
<card class="taskedit" title="Edit Task" :has-close="true" @close="() => isTaskEdit = false">
<edit-task :task="taskEditTask"/>
</card>
</div>
</div>

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

@ -2,39 +2,37 @@
<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">
<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>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.priority">Priority</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.labels">Labels</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.assignees">Assignees</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.dueDate">Due Date</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.startDate">Start Date</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.endDate">End Date</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.percentDone">% Done</fancycheckbox>
<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 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>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.priority">Priority</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.labels">Labels</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.assignees">Assignees</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.dueDate">Due Date</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.startDate">Start Date</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.endDate">End Date</fancycheckbox>
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.percentDone">% Done</fancycheckbox>
<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>
</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>