decrease redundancy in templates

src/resumes/left-right.vue

@@ -13,7 +13,7 @@
   </div>
   <div class="left half">
     <div class="experience">
-      <h3>{{ terms[person.lang].headings.experience }}</h3>
+      <h3>{{ lang.headings.experience }}</h3>
       <div class="experience-block" v-for="experience in person.experience">
         <span class="company"> {{experience.company}} </span>
         <span class="job-title"> {{experience.position}} </span>
@@ -22,7 +22,7 @@
       </div>
     </div>
     <div class="contact">
-      <h3>{{ terms[person.lang].headings.contact }}</h3>
+      <h3>{{ lang.headings.contact }}</h3>
       <table>
         <tr>
           <td><a :href="'mailto:'+person.contact.email">{{person.contact.email}}</a></td>
@@ -49,13 +49,13 @@
   </div>
   <div class="right half">
     <div class="education">
-      <h3>{{ terms[person.lang].headings.education }}</h3>
+      <h3>{{ lang.headings.education }}</h3>
       <div class="education-block" v-for="education in person.education">
         <span class="degree">{{education.degree}}</span>
         <span class="degree-description">{{education.description}}</span>
       </div>
     </div>
-    <h3>{{ terms[person.lang].headings.skills }}</h3>
+    <h3>{{ lang.headings.skills }}</h3>
     <div class="skills">
       <div class="skill-block" v-for="skill in person.skills">
         <span class="skill">{{skill.name}}</span>
@@ -70,21 +70,11 @@
 </template>
 
 <script>
-import {
-  PERSON
-} from '../person';
-import { terms } from '../terms';
-
 import Vue from 'vue';
-export default Vue.component('left-right', {
-  name: 'left-right',
-  data () {
-    return {
-      person: PERSON,
-      terms: terms
-    };
-  }
-});
+import { getVueOptions } from './resumes';
+
+let name = 'left-right';
+export default Vue.component(name, getVueOptions(name));
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/resumes/material-dark.vue

@@ -5,7 +5,7 @@
     <div class="heading" id="myselfpic">
     </div>
     <div class="section-headline">
-      {{ terms[person.lang].headings.contact }}
+      {{ lang.headings.contact }}
     </div>
     <div class="item">
       <div class="icon">
@@ -77,7 +77,7 @@
 
     <div class="item last">
       <div class="section-headline">
-        {{ terms[person.lang].headings.skills }}
+        {{ lang.headings.skills }}
       </div>
       <div class="skill" v-for="skill in person.skills">
         <div class="right">
@@ -98,7 +98,7 @@
       <div>{{person.position}}</div>
     </div>
 
-    <div class="section-headline">{{ terms[person.lang].headings.experience }}</div>
+    <div class="section-headline">{{ lang.headings.experience }}</div>
     <div class="block" v-for="experience in person.experience">
       <div class="block-helper"></div>
       <div class="headline">{{experience.position}} - {{experience.company}}</h3>
@@ -108,7 +108,7 @@
         </p>
       </div>
     </div>
-    <div class="section-headline">{{ terms[person.lang].headings.education }}</div>
+    <div class="section-headline">{{ lang.headings.education }}</div>
     <div class="block" v-for="education in person.education">
       <div class="block-helper"></div>
       <div class="headline">{{education.degree}}</div>
@@ -123,21 +123,11 @@
 </template>
 
 <script>
-import {
-  PERSON
-} from '../person';
-import { terms } from '../terms';
-
 import Vue from 'vue';
-export default Vue.component('material-dark', {
-  name: 'material-dark',
-  data () {
-    return {
-      person: PERSON,
-      terms: terms
-    };
-  }
-});
+import { getVueOptions } from './resumes';
+
+let name = 'material-dark';
+export default Vue.component(name, getVueOptions(name));
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/resumes/oblique.vue

@@ -16,7 +16,7 @@
   </div>
   <div class="resume-content">
     <div class="experience">
-      <h3>{{ terms[person.lang].headings.experience }}</h3>
+      <h3>{{ lang.headings.experience }}</h3>
 
       <div class="experience-block" v-for="experience in person.experience">
         <div class="row">
@@ -32,7 +32,7 @@
       </div>
     </div>
     <div class="education">
-      <h3>{{ terms[person.lang].headings.education }}</h3>
+      <h3>{{ lang.headings.education }}</h3>
       <div class="education-block" v-for="education in person.education">
         <div class="row">
           <span class="degree">{{education.degree}}</span>
@@ -43,7 +43,7 @@
       </div>
     </div>
     <div class="skill-section">
-      <h3>{{ terms[person.lang].headings.skills }}</h3>
+      <h3>{{ lang.headings.skills }}</h3>
       <div class="skills" v-for="skill in person.skills">
         <div class="skill-block">
           <i class="material-icons">details</i>
@@ -55,7 +55,7 @@
       <span>{{person.skillDescription}} </span>
     </div>
     <div class="contact">
-      <h3>{{ terms[person.lang].headings.contact }}</h3>
+      <h3>{{ lang.headings.contact }}</h3>
       <a :href="'mailto:'+person.contact.email"> {{person.contact.email}}</a>
       <span>;&nbsp;</span>
       <a :href="'tel:'+person.contact.phone">{{person.contact.phone}}</a>
@@ -73,21 +73,11 @@
 </template>
 
 <script>
-import {
-  PERSON
-} from '../person';
-import { terms } from '../terms';
-
 import Vue from 'vue';
-export default Vue.component('oblique', {
-  name: 'oblique',
-  data () {
-    return {
-      person: PERSON,
-      terms: terms
-    };
-  }
-});
+import { getVueOptions } from './resumes';
+
+let name = 'oblique';
+export default Vue.component(name, getVueOptions(name));
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/resumes/resumes.js

@@ -3,3 +3,27 @@ import '../resumes/material-dark.vue';
 import '../resumes/left-right.vue';
 import '../resumes/oblique.vue';
 import '../resumes/side-bar.vue';
+
+import { PERSON } from '../person';
+import { terms } from '../terms';
+
+// Called by templates to decrease redundancy
+function getVueOptions (name) {
+  let opt = {
+    name: name,
+    data () {
+      return {
+        person: PERSON,
+        terms: terms
+      };
+    },
+    computed: {
+      lang () {
+        return this.terms[this.person.lang];
+      }
+    }
+  };
+  return opt;
+}
+
+export { getVueOptions };

src/resumes/side-bar.vue

@@ -15,7 +15,7 @@
               </div>
           </div>
           <div class="contact">
-              <h3>{{ terms[person.lang].headings.contact }}</h3>
+              <h3>{{ lang.headings.contact }}</h3>
               <div class="contact-row">
                   <a :href="'mailto:'+person.contact.email">{{person.contact.email}}</a>
               </div>
@@ -47,7 +47,7 @@
       </div>
       <div class="right-col">
           <div class="experience">
-              <h3>{{ terms[person.lang].headings.experience }}</h3>
+              <h3>{{ lang.headings.experience }}</h3>
                   <div class="experience-block" v-for="experience in person.experience">
                       <div class="row">
                           <span class="company"> {{experience.company}} -</span>
@@ -62,7 +62,7 @@
                   </div>
           </div>
           <div class="education">
-              <h3>{{ terms[person.lang].headings.education }}</h3>
+              <h3>{{ lang.headings.education }}</h3>
                   <div class="education-block" v-for="education in person.education">
                       <div class="row">
                           <span class="degree">{{education.degree}}</span>
@@ -73,7 +73,7 @@
                   </div>
           </div>
           <div class="skills-block">
-              <h3>{{ terms[person.lang].headings.skills }}</h3>
+              <h3>{{ lang.headings.skills }}</h3>
               <div class="skills">
                       <div class="skill" v-for="skill in person.skills">
                           <span class="skill-name">{{skill.name}}</span>
@@ -88,21 +88,11 @@
 </template>
 
 <script>
-import {
-  PERSON
-} from '../person';
-import { terms } from '../terms';
-
 import Vue from 'vue';
-export default Vue.component('side-bar', {
-  name: 'side-bar',
-  data () {
-    return {
-      person: PERSON,
-      terms: terms
-    };
-  }
-});
+import { getVueOptions } from './resumes';
+
+let name = 'side-bar';
+export default Vue.component(name, getVueOptions(name));
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/resumes/template.vue

@@ -5,19 +5,11 @@
 </template>
 
 <script>
-import { PERSON as person } from '../person';
-import { terms } from '../terms';
-
 import Vue from 'vue';
-// TODO rename vue component
-export default Vue.component('template', {
-  name: 'template',
-  data () {
-    return {
-      person, terms
-    };
-  }
-});
+import { getVueOptions } from './resumes';
+
+let name = 'TEMPLATE-NAME'; // TODO change name
+export default Vue.component(name, getVueOptions(name));
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->