feat: filter the timeline according to the picker

src/App.vue

@@ -1,17 +1,19 @@
 <template>
 	<div id="app">
 		<Home/>
-		<SkillPicker/>
+		<SkillPicker @pick='onPick($event)'/>
-		<Timeline/>
+		<Timeline ref='timeline'/>
 	</div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
+import { tID } from '@/model/skills';
 import Home from './components/Home.vue';
 import Timeline from './components/Timeline.vue';
 import SkillPicker from './components/SkillPicker.vue';
 
+
 @Component({
 	components: {
 		Home,
@@ -20,6 +22,15 @@ import SkillPicker from './components/SkillPicker.vue';
 	},
 })
 export default class App extends Vue {
+	private selected: tID|null = null;
+
+	protected onPick(id: tID|null) {
+		const timeline = this.$refs.timeline as Timeline;
+		if( timeline == null ){
+			return;
+		}
+		timeline.filter(id);
+	}
 }
 </script>
 

src/components/SkillPicker.vue

@@ -27,8 +27,8 @@
 				<h1 v-html='details.title'></h1>
 				<h2>Featured in <b>{{ details.projects.length }}</b> {{ details.projects.length > 1 ? 'projects' : 'project' }}</h2>
 				<h3>
-					<template v-for='(proj, i) of details.projects'>
+					<template v-for='(proj) of details.projects'>
-						<a :key='proj.name' :href='"#p-" + proj.name'>
+						<a :key='"pick-" + proj.name' :href='"#p-" + proj.name'>
 							{{ proj.name }}
 						</a>
 						<span :key='proj.name'>, </span>
@@ -90,11 +90,13 @@
 			if( picked ){ // select
 				this.sel = id;
 				this.loadDetails(id);
+				this.$emit('pick', id);
 				return;
 			}
 			// deselect
 			this.sel = null;
 			this.details = null;
+				this.$emit('pick', null);
 		}
 
 		protected onTag(t: string, picked: boolean){

src/components/Timeline.vue

@@ -145,6 +145,14 @@
 				header.classList.remove('fixed');
 			}
 		}
+
+		public filter(skill: tID|null) {
+			if( skill == null ){
+				this.projects = [];
+				return;
+			}
+			this.projects = projects.bySkill(skill);
+		}
 	}
 </script>