Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3221bbb
commit 30e306d
Showing
6 changed files
with
161 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 3 additions & 3 deletions
6
src/components/TaskList.stories.js → src/components/PureTaskList.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| <template> | ||
| <div class="list-items"> | ||
| <template v-if="loading"> | ||
| <div v-for="n in 6" :key="n" class="loading-item"> | ||
| <span class="glow-checkbox" /> | ||
| <span class="glow-text"> <span>Loading</span> <span>cool</span> <span>state</span> </span> | ||
| </div> | ||
| </template> | ||
|
|
||
| <div v-else-if="isEmpty" class="list-items"> | ||
| <div class="wrapper-message"> | ||
| <span class="icon-check" /> | ||
| <p class="title-message">You have no tasks</p> | ||
| <p class="subtitle-message">Sit back and relax</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <template v-else> | ||
| <Task | ||
| v-for="task in tasksInOrder" | ||
| :key="task.id" | ||
| :task="task" | ||
| @archive-task="onArchiveTask" | ||
| @pin-task="onPinTask" | ||
| /> | ||
| </template> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import Task from './Task.vue'; | ||
| import { reactive, computed } from 'vue'; | ||
| export default { | ||
| name: 'TaskList', | ||
| components: { Task }, | ||
| props: { | ||
| tasks: { type: Array, required: true, default: () => [] }, | ||
| loading: { type: Boolean, default: false }, | ||
| }, | ||
| emits: ['archive-task', 'pin-task'], | ||
| setup(props, { emit }) { | ||
| props = reactive(props); | ||
| return { | ||
| isEmpty: computed(() => props.tasks.length === 0), | ||
| tasksInOrder: computed(() => { | ||
| return [ | ||
| ...props.tasks.filter((t) => t.state === 'TASK_PINNED'), | ||
| ...props.tasks.filter((t) => t.state !== 'TASK_PINNED'), | ||
| ]; | ||
| }), | ||
| /** | ||
| * Event handler for archiving tasks | ||
| */ | ||
| onArchiveTask(taskId) { | ||
| emit('archive-task', taskId); | ||
| }, | ||
| /** | ||
| * Event handler for pinning tasks | ||
| */ | ||
| onPinTask(taskId) { | ||
| emit('pin-task', taskId); | ||
| }, | ||
| }; | ||
| }, | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| /* A simple Pinia store/actions implementation. | ||
| * A true app would be more complex and separated into different files. | ||
| */ | ||
| import { defineStore } from 'pinia'; | ||
|
|
||
| /* | ||
| * The initial state of our store when the app loads. | ||
| * Usually, you would fetch this from a server. Let's not worry about that now | ||
| */ | ||
| const defaultTasks = [ | ||
| { id: '1', title: 'Something', state: 'TASK_INBOX' }, | ||
| { id: '2', title: 'Something more', state: 'TASK_INBOX' }, | ||
| { id: '3', title: 'Something else', state: 'TASK_INBOX' }, | ||
| { id: '4', title: 'Something again', state: 'TASK_INBOX' }, | ||
| ]; | ||
|
|
||
| /* | ||
| * The store is created here. | ||
| * You can read more about Pinia defineStore in the docs: | ||
| * https://pinia.vuejs.org/core-concepts/ | ||
| */ | ||
| export const useTaskStore = defineStore({ | ||
| id: 'taskbox', | ||
| state: () => ({ | ||
| tasks: defaultTasks, | ||
| status: 'idle', | ||
| error: null, | ||
| }), | ||
| actions: { | ||
| archiveTask(id) { | ||
| const task = this.tasks.find((task) => task.id === id); | ||
| if (task) { | ||
| task.state = 'TASK_ARCHIVED'; | ||
| } | ||
| }, | ||
| pinTask(id) { | ||
| const task = this.tasks.find((task) => task.id === id); | ||
| if (task) { | ||
| task.state = 'TASK_PINNED'; | ||
| } | ||
| }, | ||
| }, | ||
| getters: { | ||
| getFilteredTasks: (state) => { | ||
| const filteredTasks = state.tasks.filter( | ||
| (t) => t.state === 'TASK_INBOX' || t.state === 'TASK_PINNED', | ||
| ); | ||
| return filteredTasks; | ||
| }, | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters