Kanban Board
Kanban Board is a tool for managing tasks and workflow. It is a visual way to manage tasks and workflow.
App.vue
1<script>2import yorkie from 'yorkie-js-sdk';34const defaultLists = [5 {6 title: 'Todo',7 cards: [8 {9 title: 'Pruning document',10 },11 {12 title: 'Clean up codes'13 }14 ]15 },16 {17 title: 'Doing',18 cards: [19 {20 title: 'Array operations',21 }22 ]23 },24 {25 title: 'Done',26 cards: [27 {28 title: 'Create a sample page',29 },30 {31 title: 'Launch demo site'32 }33 ]34 },35];3637const client = new yorkie.Client(import.meta.env.VITE_YORKIE_API_ADDR, {38 apiKey: import.meta.env.VITE_YORKIE_API_KEY,39});40const doc = new yorkie.Document(41 `vuejs-kanban-${(new Date()).toISOString().substring(0, 10).replace(/-/g, '')}`42);4344export default {45 data() {46 return {47 lists: [],48 title: '',49 opened: null,50 };51 },52 created() {53 this.fetchDoc();54 },55 beforeUnmount(){56 this.disconnect();57 },58 watch: {59 opened(index) {60 this.$nextTick(function () {61 if (index === 0) {62 // Open add list form63 this.$refs['addListForm'].querySelector('input').focus();64 } else if (index) {65 // Or open add card form66 this.$refs['addCardForm'][index - 1].querySelector('input').focus();67 }68 this.title = ''69 });70 },71 },72 methods: {73 async fetchDoc() {74 await client.activate();75 await client.attach(doc);767778 doc.update((root) => {79 if (!root.lists) {80 root.lists = defaultLists;81 }82 }, 'create default list if not exists');8384 doc.subscribe((event) => {85 this.lists = doc.getRoot().lists;86 });87 await client.sync();8889 this.lists = doc.getRoot().lists;90 },9192 async disconnect(){93 await client.deactivate();94 },9596 isOpened(index) {97 return this.opened === index;98 },99100 openForm(index) {101 this.opened = index;102 },103104 closeForm() {105 this.opened = null;106 },107108 addCard(list) {109 if (this.title === '') return;110111 doc.update((root) => {112 root.lists.getElementByID(list.getID()).cards.push({113 title: this.title,114 });115 this.title = '';116 }, `add new card by ${client.getID()}`);117 },118119 deleteCard(list, card) {120 doc.update((root) => {121 root.lists.getElementByID(list.getID()).cards.deleteByID(card.getID());122 }, `delete a card by ${client.getID()}`);123 },124125 addList() {126 if (this.title === '') return;127128 doc.update((root) => {129 root.lists.push({130 title: this.title,131 cards: [],132 });133 this.title = '';134 }, `add new list by ${client.getID()}`);135 },136137 deleteList(list) {138 doc.update((root) => {139 root.lists.deleteByID(list.getID());140 }, `delete a list by ${client.getID()}`);141 },142 },143}144</script>145146<template>147 <div v-cloak class="list" v-for="(list, index) in lists">148 <span class="delete" v-on:click="deleteList(list)">❌</span>149 <div class="title">{{ list.title }}</div>150 <div class="card" v-for="card in list.cards">151 <span class="delete" v-on:click="deleteCard(list, card)">❌</span>152 {{ card.title }}153 </div>154 <div class="add-card" ref="addCardForm">155 <div v-if="isOpened(index + 1)" class="add-form">156 <input type="text" placeholder="Enter card title" v-model="title" v-on:keyup.enter="addCard(list)"157 v-on:keyup.esc="closeForm()">158 <div class="buttons">159 <input type="button" value="Add" v-on:click="addCard(list)">160 <input type="button" value="Close" class="pull-right" v-on:click="closeForm()">161 </div>162 </div>163 <div v-else class="add-card-opener" v-on:click="openForm(index + 1)">Add another card</div>164 </div>165 </div>166 <div class="add-list" ref="addListForm">167 <div v-if="isOpened(0)" class="add-form">168 <input type="text" placeholder="Enter list title" v-model="title" v-on:keyup.enter="addList()"169 v-on:keyup.esc="closeForm()">170 <div class="buttons">171 <input type="button" value="Add" v-on:click="addList()">172 <input type="button" value="Close" class="pull-right" v-on:click="closeForm()">173 </div>174 </div>175 <div v-else class="add-list-opener" v-on:click="openForm(0)">Add another list</div>176 </div>177</template>
export type KanbanDoc = {lists: Array<List>;};export type List = {title: string;cards: Array<Card>;};export type Card = {title: string;};
- User 1
- User 2
- User 1
- User 2
Event Log