Move all content to cards (#387)
Co-authored-by: kolaente <k@knt.li> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/387 Co-authored-by: konrad <konrad@kola-entertainments.de> Co-committed-by: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="gantt-chart-container">
|
||||
<div class="gantt-options">
|
||||
<card :padding="false" class="has-overflow">
|
||||
<div class="gantt-options p-4">
|
||||
<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
|
||||
Show tasks which don't have dates set
|
||||
</fancycheckbox>
|
||||
@ -56,6 +57,7 @@
|
||||
<router-view/>
|
||||
</transition>
|
||||
|
||||
</card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -51,46 +51,48 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field task-add" v-if="!list.isArchived && canWrite && list.id > 0">
|
||||
<div class="field is-grouped">
|
||||
<p :class="{ 'is-loading': taskService.loading}" class="control has-icons-left is-expanded">
|
||||
<input
|
||||
:class="{ 'disabled': taskService.loading}"
|
||||
@keyup.enter="addTask()"
|
||||
class="input"
|
||||
placeholder="Add a new task..."
|
||||
type="text"
|
||||
v-focus
|
||||
v-model="newTaskText"
|
||||
ref="newTaskInput"
|
||||
/>
|
||||
<span class="icon is-small is-left">
|
||||
<card :padding="false" :has-content="false">
|
||||
<div class="field task-add p-4 mb-0" v-if="!list.isArchived && canWrite && list.id > 0">
|
||||
<div class="field is-grouped">
|
||||
<p :class="{ 'is-loading': taskService.loading}" class="control has-icons-left is-expanded">
|
||||
<input
|
||||
:class="{ 'disabled': taskService.loading}"
|
||||
@keyup.enter="addTask()"
|
||||
class="input"
|
||||
placeholder="Add a new task..."
|
||||
type="text"
|
||||
v-focus
|
||||
v-model="newTaskText"
|
||||
ref="newTaskInput"
|
||||
/>
|
||||
<span class="icon is-small is-left">
|
||||
<icon icon="tasks"/>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<x-button
|
||||
:disabled="newTaskText.length === 0"
|
||||
@click="addTask()"
|
||||
icon="plus"
|
||||
>
|
||||
Add
|
||||
</x-button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<x-button
|
||||
:disabled="newTaskText.length === 0"
|
||||
@click="addTask()"
|
||||
icon="plus"
|
||||
>
|
||||
Add
|
||||
</x-button>
|
||||
</p>
|
||||
</div>
|
||||
<p class="help is-danger" v-if="showError && newTaskText === ''">
|
||||
Please specify a list title.
|
||||
</p>
|
||||
</div>
|
||||
<p class="help is-danger" v-if="showError && newTaskText === ''">
|
||||
Please specify a list title.
|
||||
|
||||
<p
|
||||
class="has-text-centered has-text-grey is-italic p-4 mb-4"
|
||||
v-if="ctaVisible && tasks.length === 0 && !taskCollectionService.loading">
|
||||
This list is currently empty.
|
||||
<a @click="$refs.newTaskInput.focus()">Create a new task.</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="has-text-centered has-text-grey is-italic" v-if="ctaVisible && tasks.length === 0 && !taskCollectionService.loading">
|
||||
This list is currently empty.
|
||||
<a @click="$refs.newTaskInput.focus()">Create a new task.</a>
|
||||
</p>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div :class="{'short': isTaskEdit}" class="tasks" v-if="tasks && tasks.length > 0">
|
||||
<div class="tasks-container">
|
||||
<div :class="{'short': isTaskEdit}" class="tasks mt-0" v-if="tasks && tasks.length > 0">
|
||||
<single-task-in-list
|
||||
:disabled="!canWrite"
|
||||
:key="t.id"
|
||||
@ -104,48 +106,49 @@
|
||||
</div>
|
||||
</single-task-in-list>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4" v-if="isTaskEdit">
|
||||
<card class="taskedit" title="Edit Task" :has-close="true" @close="() => isTaskEdit = false">
|
||||
<card
|
||||
v-if="isTaskEdit"
|
||||
class="taskedit mt-0" title="Edit Task" :has-close="true" @close="() => isTaskEdit = false"
|
||||
:shadow="false">
|
||||
<edit-task :task="taskEditTask"/>
|
||||
</card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
aria-label="pagination"
|
||||
class="pagination is-centered"
|
||||
role="navigation"
|
||||
v-if="taskCollectionService.totalPages > 1">
|
||||
<router-link
|
||||
:disabled="currentPage === 1"
|
||||
:to="getRouteForPagination(currentPage - 1)"
|
||||
class="pagination-previous"
|
||||
tag="button">
|
||||
Previous
|
||||
</router-link>
|
||||
<router-link
|
||||
:disabled="currentPage === taskCollectionService.totalPages"
|
||||
:to="getRouteForPagination(currentPage + 1)"
|
||||
class="pagination-next"
|
||||
tag="button">
|
||||
Next page
|
||||
</router-link>
|
||||
<ul class="pagination-list">
|
||||
<template v-for="(p, i) in pages">
|
||||
<li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">…</span></li>
|
||||
<li :key="'page'+i" v-else>
|
||||
<router-link
|
||||
:aria-label="'Goto page ' + p.number"
|
||||
:class="{'is-current': p.number === currentPage}"
|
||||
:to="getRouteForPagination(p.number)"
|
||||
class="pagination-link">
|
||||
{{ p.number }}
|
||||
</router-link>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav
|
||||
aria-label="pagination"
|
||||
class="pagination is-centered p-4"
|
||||
role="navigation"
|
||||
v-if="taskCollectionService.totalPages > 1">
|
||||
<router-link
|
||||
:disabled="currentPage === 1"
|
||||
:to="getRouteForPagination(currentPage - 1)"
|
||||
class="pagination-previous"
|
||||
tag="button">
|
||||
Previous
|
||||
</router-link>
|
||||
<router-link
|
||||
:disabled="currentPage === taskCollectionService.totalPages"
|
||||
:to="getRouteForPagination(currentPage + 1)"
|
||||
class="pagination-next"
|
||||
tag="button">
|
||||
Next page
|
||||
</router-link>
|
||||
<ul class="pagination-list">
|
||||
<template v-for="(p, i) in pages">
|
||||
<li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">…</span></li>
|
||||
<li :key="'page'+i" v-else>
|
||||
<router-link
|
||||
:aria-label="'Goto page ' + p.number"
|
||||
:class="{'is-current': p.number === currentPage}"
|
||||
:to="getRouteForPagination(p.number)"
|
||||
class="pagination-link">
|
||||
{{ p.number }}
|
||||
</router-link>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</nav>
|
||||
</card>
|
||||
|
||||
<!-- This router view is used to show the task popup while keeping the kanban board itself -->
|
||||
<transition name="modal">
|
||||
|
||||
@ -41,144 +41,146 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<table class="table is-hoverable is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-if="activeColumns.id">
|
||||
#
|
||||
<sort :order="sortBy.id" @click="sort('id')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.done">
|
||||
Done
|
||||
<sort :order="sortBy.done" @click="sort('done')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.title">
|
||||
Name
|
||||
<sort :order="sortBy.title" @click="sort('title')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.priority">
|
||||
Priority
|
||||
<sort :order="sortBy.priority" @click="sort('priority')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.labels">
|
||||
Labels
|
||||
</th>
|
||||
<th v-if="activeColumns.assignees">
|
||||
Assignees
|
||||
</th>
|
||||
<th v-if="activeColumns.dueDate">
|
||||
Due Date
|
||||
<sort :order="sortBy.due_date" @click="sort('due_date')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.startDate">
|
||||
Start Date
|
||||
<sort :order="sortBy.start_date" @click="sort('start_date')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.endDate">
|
||||
End Date
|
||||
<sort :order="sortBy.end_date" @click="sort('end_date')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.percentDone">
|
||||
% Done
|
||||
<sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.created">
|
||||
Created
|
||||
<sort :order="sortBy.created" @click="sort('created')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.updated">
|
||||
Updated
|
||||
<sort :order="sortBy.updated" @click="sort('updated')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.createdBy">
|
||||
Created By
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr :key="t.id" v-for="t in tasks">
|
||||
<td v-if="activeColumns.id">
|
||||
<router-link :to="{name: 'task.detail', params: { id: t.id }}">
|
||||
<template v-if="t.identifier === ''">
|
||||
#{{ t.index }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ t.identifier }}
|
||||
</template>
|
||||
</router-link>
|
||||
</td>
|
||||
<td v-if="activeColumns.done">
|
||||
<div class="is-done" v-if="t.done">Done</div>
|
||||
</td>
|
||||
<td v-if="activeColumns.title">
|
||||
<router-link :to="{name: 'task.detail', params: { id: t.id }}">{{ t.title }}</router-link>
|
||||
</td>
|
||||
<td v-if="activeColumns.priority">
|
||||
<priority-label :priority="t.priority" :show-all="true"/>
|
||||
</td>
|
||||
<td v-if="activeColumns.labels">
|
||||
<labels :labels="t.labels"/>
|
||||
</td>
|
||||
<td v-if="activeColumns.assignees">
|
||||
<user
|
||||
:avatar-size="27"
|
||||
:is-inline="true"
|
||||
:key="t.id + 'assignee' + a.id + i"
|
||||
:show-username="false"
|
||||
:user="a"
|
||||
v-for="(a, i) in t.assignees"
|
||||
/>
|
||||
</td>
|
||||
<date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/>
|
||||
<date-table-cell :date="t.startDate" v-if="activeColumns.startDate"/>
|
||||
<date-table-cell :date="t.endDate" v-if="activeColumns.endDate"/>
|
||||
<td v-if="activeColumns.percentDone">{{ t.percentDone * 100 }}%</td>
|
||||
<date-table-cell :date="t.created" v-if="activeColumns.created"/>
|
||||
<date-table-cell :date="t.updated" v-if="activeColumns.updated"/>
|
||||
<td v-if="activeColumns.createdBy">
|
||||
<user
|
||||
:avatar-size="27"
|
||||
:show-username="false"
|
||||
:user="t.createdBy"/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<nav
|
||||
aria-label="pagination"
|
||||
class="pagination is-centered"
|
||||
role="navigation"
|
||||
v-if="taskCollectionService.totalPages > 1">
|
||||
<router-link
|
||||
:disabled="currentPage === 1"
|
||||
:to="getRouteForPagination(currentPage - 1, 'table')"
|
||||
class="pagination-previous"
|
||||
tag="button">
|
||||
Previous
|
||||
</router-link>
|
||||
<router-link
|
||||
:disabled="currentPage === taskCollectionService.totalPages"
|
||||
:to="getRouteForPagination(currentPage + 1, 'table')"
|
||||
class="pagination-next"
|
||||
tag="button">
|
||||
Next page
|
||||
</router-link>
|
||||
<ul class="pagination-list">
|
||||
<template v-for="(p, i) in pages">
|
||||
<li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">…</span></li>
|
||||
<li :key="'page'+i" v-else>
|
||||
<router-link
|
||||
:aria-label="'Goto page ' + p.number"
|
||||
:class="{'is-current': p.number === currentPage}"
|
||||
:to="getRouteForPagination(p.number, 'table')"
|
||||
class="pagination-link">
|
||||
{{ p.number }}
|
||||
<card :padding="false" :has-content="false">
|
||||
<table class="table is-hoverable is-fullwidth mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-if="activeColumns.id">
|
||||
#
|
||||
<sort :order="sortBy.id" @click="sort('id')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.done">
|
||||
Done
|
||||
<sort :order="sortBy.done" @click="sort('done')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.title">
|
||||
Name
|
||||
<sort :order="sortBy.title" @click="sort('title')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.priority">
|
||||
Priority
|
||||
<sort :order="sortBy.priority" @click="sort('priority')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.labels">
|
||||
Labels
|
||||
</th>
|
||||
<th v-if="activeColumns.assignees">
|
||||
Assignees
|
||||
</th>
|
||||
<th v-if="activeColumns.dueDate">
|
||||
Due Date
|
||||
<sort :order="sortBy.due_date" @click="sort('due_date')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.startDate">
|
||||
Start Date
|
||||
<sort :order="sortBy.start_date" @click="sort('start_date')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.endDate">
|
||||
End Date
|
||||
<sort :order="sortBy.end_date" @click="sort('end_date')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.percentDone">
|
||||
% Done
|
||||
<sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.created">
|
||||
Created
|
||||
<sort :order="sortBy.created" @click="sort('created')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.updated">
|
||||
Updated
|
||||
<sort :order="sortBy.updated" @click="sort('updated')"/>
|
||||
</th>
|
||||
<th v-if="activeColumns.createdBy">
|
||||
Created By
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr :key="t.id" v-for="t in tasks">
|
||||
<td v-if="activeColumns.id">
|
||||
<router-link :to="{name: 'task.detail', params: { id: t.id }}">
|
||||
<template v-if="t.identifier === ''">
|
||||
#{{ t.index }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ t.identifier }}
|
||||
</template>
|
||||
</router-link>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</nav>
|
||||
</td>
|
||||
<td v-if="activeColumns.done">
|
||||
<div class="is-done" v-if="t.done">Done</div>
|
||||
</td>
|
||||
<td v-if="activeColumns.title">
|
||||
<router-link :to="{name: 'task.detail', params: { id: t.id }}">{{ t.title }}</router-link>
|
||||
</td>
|
||||
<td v-if="activeColumns.priority">
|
||||
<priority-label :priority="t.priority" :show-all="true"/>
|
||||
</td>
|
||||
<td v-if="activeColumns.labels">
|
||||
<labels :labels="t.labels"/>
|
||||
</td>
|
||||
<td v-if="activeColumns.assignees">
|
||||
<user
|
||||
:avatar-size="27"
|
||||
:is-inline="true"
|
||||
:key="t.id + 'assignee' + a.id + i"
|
||||
:show-username="false"
|
||||
:user="a"
|
||||
v-for="(a, i) in t.assignees"
|
||||
/>
|
||||
</td>
|
||||
<date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/>
|
||||
<date-table-cell :date="t.startDate" v-if="activeColumns.startDate"/>
|
||||
<date-table-cell :date="t.endDate" v-if="activeColumns.endDate"/>
|
||||
<td v-if="activeColumns.percentDone">{{ t.percentDone * 100 }}%</td>
|
||||
<date-table-cell :date="t.created" v-if="activeColumns.created"/>
|
||||
<date-table-cell :date="t.updated" v-if="activeColumns.updated"/>
|
||||
<td v-if="activeColumns.createdBy">
|
||||
<user
|
||||
:avatar-size="27"
|
||||
:show-username="false"
|
||||
:user="t.createdBy"/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<nav
|
||||
aria-label="pagination"
|
||||
class="pagination is-centered p-4"
|
||||
role="navigation"
|
||||
v-if="taskCollectionService.totalPages > 1">
|
||||
<router-link
|
||||
:disabled="currentPage === 1"
|
||||
:to="getRouteForPagination(currentPage - 1, 'table')"
|
||||
class="pagination-previous"
|
||||
tag="button">
|
||||
Previous
|
||||
</router-link>
|
||||
<router-link
|
||||
:disabled="currentPage === taskCollectionService.totalPages"
|
||||
:to="getRouteForPagination(currentPage + 1, 'table')"
|
||||
class="pagination-next"
|
||||
tag="button">
|
||||
Next page
|
||||
</router-link>
|
||||
<ul class="pagination-list">
|
||||
<template v-for="(p, i) in pages">
|
||||
<li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">…</span></li>
|
||||
<li :key="'page'+i" v-else>
|
||||
<router-link
|
||||
:aria-label="'Goto page ' + p.number"
|
||||
:class="{'is-current': p.number === currentPage}"
|
||||
:to="getRouteForPagination(p.number, 'table')"
|
||||
class="pagination-link">
|
||||
{{ p.number }}
|
||||
</router-link>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</nav>
|
||||
</card>
|
||||
|
||||
<!-- This router view is used to show the task popup while keeping the table view itself -->
|
||||
<transition name="modal">
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
Show tasks without dates
|
||||
</fancycheckbox>
|
||||
<h3 v-if="showAll && tasks.length > 0">Current tasks</h3>
|
||||
<h3 v-else-if="!showAll">
|
||||
<h3 v-else-if="!showAll" class="mb-2">
|
||||
Tasks from
|
||||
<flat-pickr
|
||||
:class="{ 'disabled': taskService.loading}"
|
||||
@ -29,25 +29,28 @@
|
||||
v-model="cEndDate"
|
||||
/>
|
||||
</h3>
|
||||
<div v-if="!showAll">
|
||||
<x-button type="secondary" @click="showTodaysTasks()" :shadow="false" class="mr-2">Today</x-button>
|
||||
<x-button type="secondary" @click="setDatesToNextWeek()" :shadow="false" class="mr-2">Next Week</x-button>
|
||||
<x-button type="secondary" @click="setDatesToNextMonth()" :shadow="false">Next Month</x-button>
|
||||
<div v-if="!showAll" class="mb-4">
|
||||
<x-button type="secondary" @click="showTodaysTasks()" class="mr-2">Today</x-button>
|
||||
<x-button type="secondary" @click="setDatesToNextWeek()" class="mr-2">Next Week</x-button>
|
||||
<x-button type="secondary" @click="setDatesToNextMonth()">Next Month</x-button>
|
||||
</div>
|
||||
<template v-if="!taskService.loading && (!hasUndoneTasks || !tasks || tasks.length === 0)">
|
||||
<template v-if="!taskService.loading && (!hasUndoneTasks || !tasks || tasks.length === 0) && showNothingToDo">
|
||||
<h3 class="nothing">Nothing to do - Have a nice day!</h3>
|
||||
<img alt="" src="/images/cool.svg"/>
|
||||
</template>
|
||||
<div :class="{ 'is-loading': taskService.loading}" class="spinner"></div>
|
||||
<div class="tasks" v-if="tasks && tasks.length > 0">
|
||||
<single-task-in-list
|
||||
:key="t.id"
|
||||
class="task"
|
||||
v-for="t in tasks"
|
||||
:show-list="true"
|
||||
:the-task="t"
|
||||
@taskUpdated="updateTasks"/>
|
||||
</div>
|
||||
|
||||
<card :padding="false" :has-content="false" v-if="tasks && tasks.length > 0">
|
||||
<div class="tasks">
|
||||
<single-task-in-list
|
||||
:key="t.id"
|
||||
class="task"
|
||||
v-for="t in tasks"
|
||||
:show-list="true"
|
||||
:the-task="t"
|
||||
@taskUpdated="updateTasks"/>
|
||||
</div>
|
||||
</card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -78,6 +81,8 @@ export default {
|
||||
cStartDate: null,
|
||||
cEndDate: null,
|
||||
|
||||
showNothingToDo: false,
|
||||
|
||||
flatPickerConfig: {
|
||||
altFormat: 'j M Y H:i',
|
||||
altInput: true,
|
||||
@ -98,6 +103,9 @@ export default {
|
||||
this.cEndDate = this.endDate
|
||||
this.loadPendingTasks()
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => this.showNothingToDo = true, 100)
|
||||
},
|
||||
watch: {
|
||||
'$route': 'loadPendingTasks',
|
||||
startDate(newVal) {
|
||||
|
||||
Reference in New Issue
Block a user