feat: display all projects when no skill is selected

src/components/SkillPicker.vue

@@ -39,6 +39,7 @@
 			</div>
 
 			<input type='button' v-show='this.sel != null' :value="$t('skills.browse')" @click='browse()'/>
+			<input type='button' v-show='this.sel == null' :value="$t('skills.browse-all')" @click='browse()'/>
 		</div>
 
 		<div class='spacer'></div>
@@ -74,7 +75,7 @@ export default class SkillPicker extends Vue {
 	// list of available skills
 	public readonly ids: tID[] = skills.available();
 	// currently selected skill
-	private sel: tID|null = tID.Vue;
+	private sel: tID|null = null;
 
 	// list of ids to display according to the current tag
 	private filtered: tID[] = [];

src/components/Timeline.vue

@@ -4,7 +4,7 @@
 		<div id='search-header' ref='header'>
 			<img src='../assets/timeline/logo.svg'/>
 			<span>
-				<h3>{{ $t('timeline.title') }}</h3> <SkillCard :id='skill' :active='true'/>
+				<h3>{{ $t( (skill == null) ? 'timeline.title-all' : 'timeline.title') }}</h3> <SkillCard v-show='skill != null' :id='skill' :active='true'/>
 			</span>
 			<input type='button' :value="$t('timeline.back')" @click='$event.preventDefault(); scrollBack()'/>
 		</div>
@@ -137,25 +137,27 @@ export default class Timeline extends Vue {
 	private skill: tID|null  = null;
 	private projects: Project[] = [];
 
+	private sort_projects(a: Project, b: Project): number {
+		if ( b.stopped_at == null && a.stopped_at == null ) {
+			return b.started_at.getTime() - a.started_at.getTime();
+		}
+		if ( a.stopped_at != null && b.stopped_at == null ) {
+			return 1;
+		}
+		if ( b.stopped_at != null && a.stopped_at == null ) {
+			return -1;
+		}
+		return b.started_at.getTime() - a.started_at.getTime();
+	}
+
 
 	public filter(skill: tID|null) {
 		this.skill = skill;
 		if ( skill == null ) {
-			this.projects = [];
+			this.projects = projects.all().sort(this.sort_projects);
 			return;
 		}
-		this.projects = projects.bySkill(skill).sort( (a, b) => {
-			if ( b.stopped_at == null && a.stopped_at == null ) {
-				return b.started_at.getTime() - a.started_at.getTime();
-			}
-			if ( a.stopped_at != null && b.stopped_at == null ) {
-				return 1;
-			}
-			if ( b.stopped_at != null && a.stopped_at == null ) {
-				return -1;
-			}
-			return b.started_at.getTime() - a.started_at.getTime();
-		});
+		this.projects = projects.bySkill(skill).sort(this.sort_projects);
 	}
 
 	protected short_date(date: Date): string {

src/locales/en.json

@@ -10,13 +10,15 @@
 	"home.line5-2": "and",
 	"home.line5-3": "(Arduino, Raspberry).",
 
-	"timeline.title": "Timeline of projects featuring",
-	"timeline.back": "Change skill",
+	"timeline.title":     "Timeline of projects featuring",
+	"timeline.title-all": "Timeline of all projects",
+	"timeline.back":      "Change skill",
 
 	"skills.featured-before":  "Featured in",
 	"skills.featured-after-1": "project",
 	"skills.featured-after-n": "projects",
 	"skills.browse":           "Browse projects",
+	"skills.browse-all":       "Browse all projects",
 
 	"tag.all": "All",
 	"tag.web": "Web",

src/locales/fr.json

@@ -10,13 +10,15 @@
 	"home.line5-2": "et l'",
 	"home.line5-3": "(Arduino, Raspberry).",
 
-	"timeline.title": "Chronologie des projets avec",
-	"timeline.back": "Choisir compétence",
+	"timeline.title":     "Chronologie des projets avec",
+	"timeline.title-all": "Chronologie des tous les projets",
+	"timeline.back":      "Choisir compétence",
 
 	"skills.featured-before":  "Apparaît dans",
 	"skills.featured-after-1": "projet",
 	"skills.featured-after-n": "projets",
 	"skills.browse":           "Parcourir les projets",
+	"skills.browse-all":       "Parcourir tous les projets",
 
 	"tag.all": "Tout",
 	"tag.web": "Web",

src/service/projects.ts

@@ -1,6 +1,10 @@
 import { Projects, Project } from '@/model/projects';
 import { tID } from '@/model/skills';
 
+export function all(): Project[] {
+	return Projects;
+}
+
 // returns all projects featuring a specified skill. Keeping the order of the
 // projects model
 export function bySkill(skill: tID): Project[] {