.notes

/*=== step 1 - install vue cli ======================================================*/
npm i @vue/cli -g

/*=== step 2 - install vuetify ======================================================*/
vue add vuetify --save-dev

/*=== step 3 - install vue cli ======================================================*/
copy configs

/*=== step 4 - Clean up the project ======================================================*/
move folders

/*=== step 5 - App new App content =======================================================*/
<template>
	<v-app :color="appColors.app">
		<div>nav goes here</div>
		<v-content>
			Woodie was here
		</v-content>
		<div>
			footer goes here
		</div>
	</v-app>
</template>

<script>

export default {
	name: 'jaxnodeKanBan',
	data: () => ({
		drawer: false,
		appColors: {
			app: '#F5F5F5'
		}
	})
};
</script>

<style scoped lang="scss">
.nav-link {
	text-decoration: none;
	color: inherit;
}
</style>


/*=== step 6 - add nav element ======================================================*/
<nav>
			<v-app-bar app dark class="primary" height="50">
				<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
				<v-toolbar-title>
						<span class="font-weight-light">Vue sKan</span>
						<span>Ban</span>
				</v-toolbar-title>
				<v-spacer></v-spacer>
			</v-app-bar>
			<v-navigation-drawer app v-model="drawer">
				<v-list nav dense>
					<!-- Home/Dashboard -->
					<v-list-item :to="{ name: 'Home' }" exact>
						<v-list-item-icon>
							<v-icon>mdi-home</v-icon>
						</v-list-item-icon>
						<v-list-item-content>
							<v-list-item-title>Home</v-list-item-title>
						</v-list-item-content>
					</v-list-item>
					<!-- KanBan Board -->
					<v-list-item :to="{ name: 'KanbanBoard' }" exact>
						<v-list-item-icon>
							<v-icon>mdi-view-dashboard-variant</v-icon>
						</v-list-item-icon>
						<v-list-item-content>
							<v-list-item-title>Kanban Board</v-list-item-title>
						</v-list-item-content>
					</v-list-item>
				</v-list>
			</v-navigation-drawer>
		</nav>

/*=== step 7 - add footer ===*/
<v-footer app dark class="primary" height="25">
	<span class="white--text caption">&copy; 2019 Jaxnode</span>
</v-footer>

/*=== step 8 - Fix vuetify theme colors ======================================================*/
theme: {
		themes: {
			light: {
				primary: '#003a63',
				secondary: '#0A3854',
				accent: '#015E84',
				error: '#D32F2F',
				info: '#50A2BF',
				success: '#4CAF50',
				warning: '#FFA000'
			},
			dark: {
				primary: '#003a63',
				secondary: '#0A3854',
				accent: '#015E84',
				error: '#D32F2F',
				info: '#50A2BF',
				success: '#4CAF50',
				warning: '#FFA000'
			},
			/* DO NOT ALTER!! */
			default: {
				primary: '#1976D2',
				secondary: '#424242',
				accent: '#82B1FF',
				error: '#FF5252',
				info: '#2196F3',
				success: '#4CAF50',
				warning: '#FFC107'
			}
		}
	}

/*=== step 9 - Home and KanBan Components ======================================================*/
add components

<template>
	<v-container grid-list-md>
		<h2>Kanban Board</h2>
		<div>
			<p>Create and modify kanban cards.</p>
		</div>
		<v-layout>
			Add a Card
		</v-layout>
	</v-container>
</template>

<script>
export default {
	name: 'KanbanBoard'
};
</script>

<style scoped></style>


/*=== step 10 - Configure routes ======================================================*/
- add routes folder
- add router.js


import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
	mode: 'history',
	routes: [
		{
		}
	]
});

export default router;


-- add routes, name, component, path.  add router-view

routes: [
		{
			name: 'HomePage',
			component: HomePage,
			path: '/'
		},
		{
			name: 'KanbanBoard',
			component: KanbanBoard,
			path: '/kanban'
		}
	]


/*=== step 11 - add and configure Vuex ======================================================*/
 - npm i vuex --save
 - add \stores
 - add \stores\store.js


 import Vue from 'vue';
 import Vuex from 'vuex';

 Vue.use(Vuex);

 export default new Vuex.Store({
 	state: {},

 });


 - register with main.js
 - add \stores\modules


 export default {
	namespaced: true,
	state: {
		items: {
			new: [],
			inProgress: [],
			done: []
		},
		nextId: 1
	},
	mutations: {
		addCard(state, newCard) {
			state.items.new.push(Object.assign(newCard, { id: state.nextId }));
			state.nextId += 1;
		},
		updateItems(state, { items, itemType }) {
			if (itemType === 'new') {
				state.items.new = items;
			}
			if (itemType === 'inProgress') {
				state.items.inProgress = items;
			}
			if (itemType === 'done') {
				state.items.done = items;
			}
		}
	}
};




/*=== step 12 - Add card Form ======================================================*/
-- add to kanbanBoard.vue

<v-container>
			<v-layout row>
				<v-flex md2 class="mr-8">
					<v-text-field label="Card Title" required v-model="cardName"></v-text-field>
				</v-flex>
				<v-flex md4 class="mr-8">
					<v-text-field label="Description" required v-model="cardDescription"></v-text-field>
				</v-flex>
				<v-flex md4>
					<v-btn @click="addCard()" color="primary">Add</v-btn>
				</v-flex>
			</v-layout>
		</v-container>

data: () => ({
		cardName: ''
	}),
	methods: {
    		addCard() {
    			if (this.cardName) {
    				this.$store.commit('kanban/addCard', {
    					text: this.cardName,
    					description: this.cardDescription
    				});

    				this.cardName = '';
    				this.cardDescription = '';
    			}
    		}
    	}


/*=== step 13 - Add a Board Column ======================================================*/
 - add column and card template
<v-flex sm4>
				<v-card class="mx-auto">
					<v-app-bar dark color="secondary">
						<v-toolbar-title>New Items</v-toolbar-title>
						<div class="flex-grow-1"></div>
					</v-app-bar>
					<v-container class="pa-2" fluid>
						<draggable v-model="newItems" :options="{ group: 'default' }">
							<v-row  v-for="item in newItems" :key="item.id" >
								<v-col>
									<v-card class="my-n2">
										<v-card-title>{{item.text}}</v-card-title>
										<v-card-text>{{ item.description }}</v-card-text>
									</v-card>
								</v-col>
							</v-row>
						</draggable>
					</v-container>
				</v-card>
			</v-flex>


import { mapState } from 'vuex';

- add store mappings
- add to computed
		...mapState('kanban', ['items']),
		newItems: {
			get() {
				return this.items.new;
			},
			set(items) {
				this.$store.commit('kanban/updateItems', {
					items,
					itemType: 'new'
				});
			}
		}

- add additional columns



/*=== step 14 - install VueDraggable ======================================================*/
- npm i vuedraggable --save
- import Draggable from 'vuedraggable';

- add tags
<draggable v-model="newItems" :options="{ group: 'default' }">

- add final arrays
inProgressItems: {
			get() {
				return this.items.inProgress;
			},
			set(items) {
				this.$store.commit('kanban/updateItems', {
					items,
					itemType: 'inProgress'
				});
			}
		},
		doneItems: {
			get() {
				return this.items.done;
			},
			set(items) {
				this.$store.commit('kanban/updateItems', {
					items,
					itemType: 'done'
				});
			}
		}