adrinux
/
frontend
forked from vikunja/frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Move all content to cards (#387) 

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: vikunja/frontend#387
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad 2021-01-24 13:00:21 +00:00
parent e0d120da5d
commit 8828426c91
13 changed files with 277 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
cypress/integration/list/list.spec.js
View File

@ -156,7 +156,7 @@ describe('Lists', () => {
TaskFactory.create(1) TaskFactory.create(1)
cy.visit('/lists/1/gantt') cy.visit('/lists/1/gantt')
cy.get('.gantt-chart-container .gantt-chart.box .tasks') cy.get('.gantt-chart-container .gantt-chart .tasks')
.should('be.empty') .should('be.empty')
}) })
@ -164,7 +164,7 @@ describe('Lists', () => {
const now = new Date() const now = new Date()
cy.visit('/lists/1/gantt') cy.visit('/lists/1/gantt')
cy.get('.gantt-chart-container .gantt-chart.box .months') cy.get('.gantt-chart-container .gantt-chart .months')
.should('contain', format(now, 'MMMM')) .should('contain', format(now, 'MMMM'))
.should('contain', format(now.setMonth(now.getMonth() + 1), 'MMMM')) .should('contain', format(now.setMonth(now.getMonth() + 1), 'MMMM'))
}) })
@ -177,9 +177,9 @@ describe('Lists', () => {
}) })
cy.visit('/lists/1/gantt') cy.visit('/lists/1/gantt')
cy.get('.gantt-chart-container .gantt-chart.box .tasks') cy.get('.gantt-chart-container .gantt-chart .tasks')
.should('not.be.empty') .should('not.be.empty')
cy.get('.gantt-chart-container .gantt-chart.box .tasks') cy.get('.gantt-chart-container .gantt-chart .tasks')
.should('contain', tasks[0].title) .should('contain', tasks[0].title)
}) })
@ -194,9 +194,9 @@ describe('Lists', () => {
.contains('Show tasks which don\'t have dates set') .contains('Show tasks which don\'t have dates set')
.click() .click()
cy.get('.gantt-chart-container .gantt-chart.box .tasks') cy.get('.gantt-chart-container .gantt-chart .tasks')
.should('not.be.empty') .should('not.be.empty')
cy.get('.gantt-chart-container .gantt-chart.box .tasks .task.nodate') cy.get('.gantt-chart-container .gantt-chart .tasks .task.nodate')
.should('exist') .should('exist')
}) })
@ -208,7 +208,7 @@ describe('Lists', () => {
}) })
cy.visit('/lists/1/gantt') cy.visit('/lists/1/gantt')
cy.get('.gantt-chart-container .gantt-chart.box .tasks .task') cy.get('.gantt-chart-container .gantt-chart .tasks .task')
.first() .first()
.trigger('mousedown', {which: 1}) .trigger('mousedown', {which: 1})
.trigger('mousemove', {clientX: 500, clientY: 0}) .trigger('mousemove', {clientX: 500, clientY: 0})

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

@ -11,7 +11,7 @@
</a> </a>
</header> </header>
<div class="card-content" :class="{'p-0': !padding}"> <div class="card-content" :class="{'p-0': !padding}">
<div class="content"> <div :class="{'content': hasContent}">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
@ -42,6 +42,10 @@ export default {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
hasContent: {
type: Boolean,
default: true,
},
}, },
} }
</script> </script>

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

@ -1,5 +1,5 @@
<template> <template>
<div class="gantt-chart box"> <div class="gantt-chart">
<div class="filter-container"> <div class="filter-container">
<div class="items"> <div class="items">
<x-button <x-button

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

@ -6,8 +6,8 @@ $gantt-vertical-border-color: $grey-100;
} }
.gantt-chart { .gantt-chart {
padding: 5px 0;
overflow-x: auto; overflow-x: auto;
border-top: 1px solid $grey-200;
.dates { .dates {
display: flex; display: flex;
@ -195,10 +195,6 @@ $gantt-vertical-border-color: $grey-100;
font-size: .68rem; font-size: .68rem;
} }
} }
.filter-container {
margin-top: -136px;
}
} }
.gantt-options { .gantt-options {

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

@ -81,7 +81,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
font-size: .85rem; font-size: .85rem;
word-break: break-word; word-break: break-word;
} }
.progress { .progress {
margin: 8px 0 0 0; margin: 8px 0 0 0;
width: 100%; width: 100%;

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

@ -144,7 +144,7 @@
.link-share-container .gantt-chart-container .filter-container, .link-share-container .gantt-chart-container .filter-container,
.gantt-chart-container .filter-container { .gantt-chart-container .filter-container {
margin-top: -136px; margin-top: calc(-138px - 2rem);
} }
.link-share-container .list-view .filter-container { .link-share-container .list-view .filter-container {

25
src/styles/components/tasks.scss
View File

@ -1,3 +1,15 @@
.tasks-container {
display: flex;
.tasks {
width: 100%;
}
.taskedit {
width: 50%;
}
}
.tasks { .tasks {
margin-top: 1rem; margin-top: 1rem;
padding: 0; padding: 0;
@ -20,14 +32,19 @@
.task { .task {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0.5rem 1rem; padding: 0.5rem;
border-bottom: 1px solid $grey-200;
transition: background-color $transition; transition: background-color $transition;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
margin: 0 .5rem;
border-radius: $radius;
&:last-child {
margin-bottom: .5rem;
}
&:hover { &:hover {
background-color: $grey-200; background-color: $grey-100;
} }
.tasktext, .tasktext,
@ -112,6 +129,7 @@
.fancycheckbox { .fancycheckbox {
height: 18px; height: 18px;
padding-top: 0; padding-top: 0;
padding-right: .5rem;
span { span {
display: none; display: none;
@ -300,7 +318,6 @@
} }
.is-max-width-desktop .tasks .task { .is-max-width-desktop .tasks .task {
width: 100%;
max-width: $desktop; max-width: $desktop;
} }

26
src/styles/theme/background.scss
View File

@ -5,28 +5,6 @@
background-attachment: fixed; background-attachment: fixed;
min-height: 100vh; min-height: 100vh;
.namespace-container {
background: $transparent-background-light;
}
.tasks {
background: $transparent-background-light;
border-radius: $radius;
.task:first-child {
border-radius: $radius $radius 0 0;
}
.task:last-child {
border-radius: 0 0 $radius $radius;
}
}
.table-view .table {
background: $transparent-background-light;
border-radius: $radius;
}
.pagination-link:not(.is-current) { .pagination-link:not(.is-current) {
background: $light-background; background: $light-background;
} }
@ -54,10 +32,6 @@
} }
} }
.navbar.has-background {
background: $transparent-background-light;
}
.link-share-container.has-background .view { .link-share-container.has-background .view {
background: transparent; background: transparent;
border: none; border: none;

1
src/styles/theme/variables/variables.scss
View File

@ -19,7 +19,6 @@ $bulmaswatch-import-font: false !default;
$light-background: $grey-100; $light-background: $grey-100;
$transition-duration: 100ms; $transition-duration: 100ms;
$flash-background-duration: 750ms; $flash-background-duration: 750ms;
$transparent-background-light: rgba($light-background, 0.9);
$vikunja-font: 'Quicksand', sans-serif; $vikunja-font: 'Quicksand', sans-serif;
$vikunja-light-text: $grey-100; $vikunja-light-text: $grey-100;

4
src/views/list/views/Gantt.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="gantt-chart-container"> <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"> <fancycheckbox class="is-block" v-model="showTaskswithoutDates">
Show tasks which don't have dates set Show tasks which don't have dates set
</fancycheckbox> </fancycheckbox>
@ -56,6 +57,7 @@
<router-view/> <router-view/>
</transition> </transition>
</card>
</div> </div>
</template> </template>

147
src/views/list/views/List.vue
View File

@ -51,46 +51,48 @@
/> />
</div> </div>
<div class="field task-add" v-if="!list.isArchived && canWrite && list.id > 0"> <card :padding="false" :has-content="false">
<div class="field is-grouped"> <div class="field task-add p-4 mb-0" v-if="!list.isArchived && canWrite && list.id > 0">
<p :class="{ 'is-loading': taskService.loading}" class="control has-icons-left is-expanded"> <div class="field is-grouped">
<input <p :class="{ 'is-loading': taskService.loading}" class="control has-icons-left is-expanded">
:class="{ 'disabled': taskService.loading}" <input
@keyup.enter="addTask()" :class="{ 'disabled': taskService.loading}"
class="input" @keyup.enter="addTask()"
placeholder="Add a new task..." class="input"
type="text" placeholder="Add a new task..."
v-focus type="text"
v-model="newTaskText" v-focus
ref="newTaskInput" v-model="newTaskText"
/> ref="newTaskInput"
<span class="icon is-small is-left"> />
<span class="icon is-small is-left">
<icon icon="tasks"/> <icon icon="tasks"/>
</span> </span>
</p> </p>
<p class="control"> <p class="control">
<x-button <x-button
:disabled="newTaskText.length === 0" :disabled="newTaskText.length === 0"
@click="addTask()" @click="addTask()"
icon="plus" icon="plus"
> >
Add Add
</x-button> </x-button>
</p>
</div>
<p class="help is-danger" v-if="showError && newTaskText === ''">
Please specify a list title.
</p> </p>
</div> </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> </p>
</div>
<p class="has-text-centered has-text-grey is-italic" v-if="ctaVisible && tasks.length === 0 && !taskCollectionService.loading"> <div class="tasks-container">
This list is currently empty. <div :class="{'short': isTaskEdit}" class="tasks mt-0" v-if="tasks && tasks.length > 0">
<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">
<single-task-in-list <single-task-in-list
:disabled="!canWrite" :disabled="!canWrite"
:key="t.id" :key="t.id"
@ -104,48 +106,49 @@
</div> </div>
</single-task-in-list> </single-task-in-list>
</div> </div>
</div> <card
<div class="column is-4" v-if="isTaskEdit"> v-if="isTaskEdit"
<card class="taskedit" title="Edit Task" :has-close="true" @close="() => isTaskEdit = false"> class="taskedit mt-0" title="Edit Task" :has-close="true" @close="() => isTaskEdit = false"
:shadow="false">
<edit-task :task="taskEditTask"/> <edit-task :task="taskEditTask"/>
</card> </card>
</div> </div>
</div>
<nav <nav
aria-label="pagination" aria-label="pagination"
class="pagination is-centered" class="pagination is-centered p-4"
role="navigation" role="navigation"
v-if="taskCollectionService.totalPages > 1"> v-if="taskCollectionService.totalPages > 1">
<router-link <router-link
:disabled="currentPage === 1" :disabled="currentPage === 1"
:to="getRouteForPagination(currentPage - 1)" :to="getRouteForPagination(currentPage - 1)"
class="pagination-previous" class="pagination-previous"
tag="button"> tag="button">
Previous Previous
</router-link> </router-link>
<router-link <router-link
:disabled="currentPage === taskCollectionService.totalPages" :disabled="currentPage === taskCollectionService.totalPages"
:to="getRouteForPagination(currentPage + 1)" :to="getRouteForPagination(currentPage + 1)"
class="pagination-next" class="pagination-next"
tag="button"> tag="button">
Next page Next page
</router-link> </router-link>
<ul class="pagination-list"> <ul class="pagination-list">
<template v-for="(p, i) in pages"> <template v-for="(p, i) in pages">
<li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">&hellip;</span></li> <li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
<li :key="'page'+i" v-else> <li :key="'page'+i" v-else>
<router-link <router-link
:aria-label="'Goto page ' + p.number" :aria-label="'Goto page ' + p.number"
:class="{'is-current': p.number === currentPage}" :class="{'is-current': p.number === currentPage}"
:to="getRouteForPagination(p.number)" :to="getRouteForPagination(p.number)"
class="pagination-link"> class="pagination-link">
{{ p.number }} {{ p.number }}
</router-link> </router-link>
</li> </li>
</template> </template>
</ul> </ul>
</nav> </nav>
</card>
<!-- This router view is used to show the task popup while keeping the kanban board itself --> <!-- This router view is used to show the task popup while keeping the kanban board itself -->
<transition name="modal"> <transition name="modal">

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

@ -41,144 +41,146 @@
/> />
</div> </div>
<table class="table is-hoverable is-fullwidth"> <card :padding="false" :has-content="false">
<thead> <table class="table is-hoverable is-fullwidth mb-0">
<tr> <thead>
<th v-if="activeColumns.id"> <tr>
# <th v-if="activeColumns.id">
<sort :order="sortBy.id" @click="sort('id')"/> #
</th> <sort :order="sortBy.id" @click="sort('id')"/>
<th v-if="activeColumns.done"> </th>
Done <th v-if="activeColumns.done">
<sort :order="sortBy.done" @click="sort('done')"/> Done
</th> <sort :order="sortBy.done" @click="sort('done')"/>
<th v-if="activeColumns.title"> </th>
Name <th v-if="activeColumns.title">
<sort :order="sortBy.title" @click="sort('title')"/> Name
</th> <sort :order="sortBy.title" @click="sort('title')"/>
<th v-if="activeColumns.priority"> </th>
Priority <th v-if="activeColumns.priority">
<sort :order="sortBy.priority" @click="sort('priority')"/> Priority
</th> <sort :order="sortBy.priority" @click="sort('priority')"/>
<th v-if="activeColumns.labels"> </th>
Labels <th v-if="activeColumns.labels">
</th> Labels
<th v-if="activeColumns.assignees"> </th>
Assignees <th v-if="activeColumns.assignees">
</th> Assignees
<th v-if="activeColumns.dueDate"> </th>
Due&nbsp;Date <th v-if="activeColumns.dueDate">
<sort :order="sortBy.due_date" @click="sort('due_date')"/> Due&nbsp;Date
</th> <sort :order="sortBy.due_date" @click="sort('due_date')"/>
<th v-if="activeColumns.startDate"> </th>
Start&nbsp;Date <th v-if="activeColumns.startDate">
<sort :order="sortBy.start_date" @click="sort('start_date')"/> Start&nbsp;Date
</th> <sort :order="sortBy.start_date" @click="sort('start_date')"/>
<th v-if="activeColumns.endDate"> </th>
End&nbsp;Date <th v-if="activeColumns.endDate">
<sort :order="sortBy.end_date" @click="sort('end_date')"/> End&nbsp;Date
</th> <sort :order="sortBy.end_date" @click="sort('end_date')"/>
<th v-if="activeColumns.percentDone"> </th>
%&nbsp;Done <th v-if="activeColumns.percentDone">
<sort :order="sortBy.percent_done" @click="sort('percent_done')"/> %&nbsp;Done
</th> <sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
<th v-if="activeColumns.created"> </th>
Created <th v-if="activeColumns.created">
<sort :order="sortBy.created" @click="sort('created')"/> Created
</th> <sort :order="sortBy.created" @click="sort('created')"/>
<th v-if="activeColumns.updated"> </th>
Updated <th v-if="activeColumns.updated">
<sort :order="sortBy.updated" @click="sort('updated')"/> Updated
</th> <sort :order="sortBy.updated" @click="sort('updated')"/>
<th v-if="activeColumns.createdBy"> </th>
Created&nbsp;By <th v-if="activeColumns.createdBy">
</th> Created&nbsp;By
</tr> </th>
</thead> </tr>
<tbody> </thead>
<tr :key="t.id" v-for="t in tasks"> <tbody>
<td v-if="activeColumns.id"> <tr :key="t.id" v-for="t in tasks">
<router-link :to="{name: 'task.detail', params: { id: t.id }}"> <td v-if="activeColumns.id">
<template v-if="t.identifier === ''"> <router-link :to="{name: 'task.detail', params: { id: t.id }}">
#{{ t.index }} <template v-if="t.identifier === ''">
</template> #{{ t.index }}
<template v-else> </template>
{{ t.identifier }} <template v-else>
</template> {{ t.identifier }}
</router-link> </template>
</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">&hellip;</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> </router-link>
</li> </td>
</template> <td v-if="activeColumns.done">
</ul> <div class="is-done" v-if="t.done">Done</div>
</nav> </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">&hellip;</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 --> <!-- This router view is used to show the task popup while keeping the table view itself -->
<transition name="modal"> <transition name="modal">

38
src/views/tasks/ShowTasks.vue
View File

@ -9,7 +9,7 @@
Show tasks without dates Show tasks without dates
</fancycheckbox> </fancycheckbox>
<h3 v-if="showAll && tasks.length > 0">Current tasks</h3> <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 Tasks from
<flat-pickr <flat-pickr
:class="{ 'disabled': taskService.loading}" :class="{ 'disabled': taskService.loading}"
@ -29,25 +29,28 @@
v-model="cEndDate" v-model="cEndDate"
/> />
</h3> </h3>
<div v-if="!showAll"> <div v-if="!showAll" class="mb-4">
<x-button type="secondary" @click="showTodaysTasks()" :shadow="false" class="mr-2">Today</x-button> <x-button type="secondary" @click="showTodaysTasks()" 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="setDatesToNextWeek()" class="mr-2">Next Week</x-button>
<x-button type="secondary" @click="setDatesToNextMonth()" :shadow="false">Next Month</x-button> <x-button type="secondary" @click="setDatesToNextMonth()">Next Month</x-button>
</div> </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> <h3 class="nothing">Nothing to do - Have a nice day!</h3>
<img alt="" src="/images/cool.svg"/> <img alt="" src="/images/cool.svg"/>
</template> </template>
<div :class="{ 'is-loading': taskService.loading}" class="spinner"></div> <div :class="{ 'is-loading': taskService.loading}" class="spinner"></div>
<div class="tasks" v-if="tasks && tasks.length > 0">
<single-task-in-list <card :padding="false" :has-content="false" v-if="tasks && tasks.length > 0">
:key="t.id" <div class="tasks">
class="task" <single-task-in-list
v-for="t in tasks" :key="t.id"
:show-list="true" class="task"
:the-task="t" v-for="t in tasks"
@taskUpdated="updateTasks"/> :show-list="true"
</div> :the-task="t"
@taskUpdated="updateTasks"/>
</div>
</card>
</div> </div>
</template> </template>
<script> <script>
@ -78,6 +81,8 @@ export default {
cStartDate: null, cStartDate: null,
cEndDate: null, cEndDate: null,
showNothingToDo: false,
flatPickerConfig: { flatPickerConfig: {
altFormat: 'j M Y H:i', altFormat: 'j M Y H:i',
altInput: true, altInput: true,
@ -98,6 +103,9 @@ export default {
this.cEndDate = this.endDate this.cEndDate = this.endDate
this.loadPendingTasks() this.loadPendingTasks()
}, },
mounted() {
setTimeout(() => this.showNothingToDo = true, 100)
},
watch: { watch: {
'$route': 'loadPendingTasks', '$route': 'loadPendingTasks',
startDate(newVal) { startDate(newVal) {