Fake base data and init for app navigation

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

package-lock.json

@@ -4354,12 +4354,14 @@
 				"balanced-match": {
 					"version": "1.0.0",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"brace-expansion": {
 					"version": "1.1.11",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"balanced-match": "^1.0.0",
 						"concat-map": "0.0.1"
@@ -4374,17 +4376,20 @@
 				"code-point-at": {
 					"version": "1.1.0",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"concat-map": {
 					"version": "0.0.1",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"console-control-strings": {
 					"version": "1.1.0",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"core-util-is": {
 					"version": "1.0.2",
@@ -4501,7 +4506,8 @@
 				"inherits": {
 					"version": "2.0.3",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"ini": {
 					"version": "1.3.5",
@@ -4513,6 +4519,7 @@
 					"version": "1.0.0",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"number-is-nan": "^1.0.0"
 					}
@@ -4527,6 +4534,7 @@
 					"version": "3.0.4",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"brace-expansion": "^1.1.7"
 					}
@@ -4534,12 +4542,14 @@
 				"minimist": {
 					"version": "0.0.8",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"minipass": {
 					"version": "2.2.4",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"safe-buffer": "^5.1.1",
 						"yallist": "^3.0.0"
@@ -4558,6 +4568,7 @@
 					"version": "0.5.1",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"minimist": "0.0.8"
 					}
@@ -4638,7 +4649,8 @@
 				"number-is-nan": {
 					"version": "1.0.1",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"object-assign": {
 					"version": "4.1.1",
@@ -4650,6 +4662,7 @@
 					"version": "1.4.0",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"wrappy": "1"
 					}
@@ -4771,6 +4784,7 @@
 					"version": "1.0.2",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"code-point-at": "^1.0.0",
 						"is-fullwidth-code-point": "^1.0.0",
@@ -9912,6 +9926,12 @@
 				"safe-buffer": "^5.1.0"
 			}
 		},
+		"raw-loader": {
+			"version": "0.5.1",
+			"resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
+			"integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao=",
+			"dev": true
+		},
 		"read-pkg": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -12462,8 +12482,7 @@
 		"uuid": {
 			"version": "3.3.2",
 			"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
-			"integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
-			"dev": true
+			"integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
 		},
 		"v8-compile-cache": {
 			"version": "2.0.0",
@@ -12539,6 +12558,11 @@
 			"resolved": "https://registry.npmjs.org/vue/-/vue-2.5.16.tgz",
 			"integrity": "sha512-/ffmsiVuPC8PsWcFkZngdpas19ABm5mh2wA7iDqcltyCTwlgZjHGeJYOXkBMo422iPwIcviOtrTCUpSfXmToLQ=="
 		},
+		"vue-click-outside": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.0.7.tgz",
+			"integrity": "sha1-zdKxYF48SUR4TheU6uShKg9wC9Y="
+		},
 		"vue-eslint-parser": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",

package.json

@@ -16,7 +16,9 @@
 	},
 	"dependencies": {
 		"ical.js": "^1.2.2",
+		"uuid": "^3.3.2",
 		"vue": "^2.5.16",
+		"vue-click-outside": "^1.0.7",
 		"vue-router": "^3.0.1",
 		"vuex": "^3.0.1",
 		"vuex-router-sync": "^5.0.0"
@@ -50,6 +52,7 @@
 		"jest-serializer-vue": "^2.0.2",
 		"node-sass": "^4.9.0",
 		"prettier-eslint": "^8.8.2",
+		"raw-loader": "^0.5.1",
 		"sass-loader": "^7.0.3",
 		"stylelint": "^8.4.0",
 		"stylelint-config-recommended-scss": "^3.2.0",

src/App.vue

@@ -29,4 +29,3 @@ export default {
 	name: 'App'
 }
 </script>
-

src/components/appNavigation.vue

@@ -50,6 +50,27 @@ export default {
 	components: {
 		navigationItem
 	},
-	props: ['menu']
+	props: {
+		menu: {
+			type: Object,
+			required: true,
+			default: () => {
+				return {
+					new: {
+						id: 'new-item',
+						action: () => alert('Success!'),
+						icon: 'icon-add',
+						text: 'New item'
+					},
+					menu: {
+						id: 'navigation',
+						items: [
+
+						]
+					}
+				}
+			}
+		}
+	}
 }
 </script>

src/components/appNavigation/navigationItem.vue

@@ -107,7 +107,12 @@ export default {
 	directives: {
 		ClickOutside
 	},
-	props: ['item'],
+	props: {
+		item: {
+			type: Object,
+			required: true
+		}
+	},
 	data() {
 		return {
 			openedMenu: false

src/components/popoverMenu.vue

@@ -34,6 +34,18 @@ export default {
 	components: {
 		popoverItem
 	},
-	props: ['menu']
+	props: {
+		menu: {
+			type: Array,
+			default: () => {
+				return [{
+					href: 'https://nextcloud.com',
+					icon: 'icon-links',
+					text: 'Nextcloud'
+				}]
+			},
+			required: true
+		}
+	}
 }
 </script>

src/components/popoverMenu/popoverItem.vue

@@ -46,6 +46,18 @@
 
 <script>
 export default {
-	props: ['item']
+	props: {
+		item: {
+			type: Object,
+			default: () => {
+				return {
+					href: 'https://nextcloud.com',
+					icon: 'icon-links',
+					text: 'Nextcloud'
+				}
+			},
+			required: true
+		}
+	}
 }
 </script>

src/store/addressbooks.js

@@ -19,10 +19,73 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+// import uuid from 'uuid'
+import ical from 'ical.js'
+/* eslint-disable-next-line import/no-webpack-loader-syntax */
+import vcfFile from '!raw-loader!./FakeName.vcf'
 
-const state = {}
-const mutations = {}
-const getters = {}
-const actions = {}
+const state = {
+	addressbooks: []
+}
+const mutations = {
+	/**
+	 * Store addressbooks into state
+	 * @param {Object} state Default state
+	 * @param {Array} addressbooks Addressbooks
+	 */
+	appendAddressbooks(state, addressbooks) {
+		state.addressbooks = addressbooks
+	},
+	appendContactsToAddressbook(state, { addressbook, contacts }) {
+		addressbook = state.addressbooks.filter(adb => adb === addressbook)
+		addressbook.contacts = contacts
+	}
+}
+const getters = {
+	getAddressbooks(state) {
+		return state.addressbooks
+	}
+}
+const actions = {
+	/**
+	 * Retrieve and commit addressbooks
+	 * @param {Object} context Current context
+	 */
+	getAddressbooks(context) {
+		// Fake data before using real dav requests
+		let addressbooks = [
+			{
+				id: 'ab1',
+				displayName: 'Addressbook 1',
+				enabled: true,
+				owner: 'admin'
+			},
+			{
+				id: 'ab2',
+				displayName: 'Addressbook 2',
+				enabled: false,
+				owner: 'admin'
+			},
+			{
+				id: 'ab3',
+				displayName: 'Addressbook 3',
+				enabled: true,
+				owner: 'User1'
+			}
+		]
+		// fake request
+		return new Promise((resolve, reject) => {
+			return setTimeout(() => {
+				context.commit('appendAddressbooks', addressbooks)
+				resolve()
+				return addressbooks
+			}, 1000)
+		})
+	},
+	getContactsFromAddressBook(context, addressbook) {
+		let contacts = ical.parse(vcfFile)
+		context.commit('appendContactsToAddressbook', { addressbook, contacts })
+	}
+}
 
 export default { state, mutations, getters, actions }

src/views/Contacts.vue

@@ -22,9 +22,37 @@
 
 <template>
 	<div id="content" class="app-contacts">
-		Test
+		<appNavigation :menu="menu" />
 	</div>
 </template>
 
 <script>
+import appNavigation from '../components/appNavigation'
+
+export default {
+	components: {
+		appNavigation
+	},
+	data() {
+		return {
+		}
+	},
+	computed: {
+		addressbooks() {
+			return this.$store.getters.getAddressbooks
+		},
+		menu() {
+			return {}
+		}
+	},
+	beforeMount() {
+		// get addressbooks then get contacts
+		this.$store.dispatch('getAddressbooks')
+			.then(() => {
+				this.addressbooks.forEach(addressbook => {
+					this.$store.dispatch('getContactsFromAddressBook', addressbook)
+				})
+			})
+	}
+}
 </script>