[#1499] Declare vue prop types explicitly (#1852)

In the current version of RepoSense, props are declared explicitly for
Vue components as an array of strings. 

Let's declare props using the object syntax so that we can document the
prop types.

This will also show a warning in the browser console if props of the
wrong type are passed to the component. 

Let's also define classes for `Segment` and `User` for stricter type 
validation.

frontend/src/components/c-ramp.vue

@@ -35,11 +35,49 @@
 
 <script>
 import brokenLinkDisabler from '../mixin/brokenLinkMixin.ts';
+import User from '../utils/user.ts';
 
 export default {
   mixins: [brokenLinkDisabler],
   name: 'c-ramp',
-  props: ['groupby', 'user', 'tframe', 'avgsize', 'sdate', 'udate', 'mergegroup', 'fromramp', 'filtersearch'],
+  props: {
+    groupby: {
+      type: String,
+      default: 'groupByRepos',
+    },
+    user: {
+      type: User,
+      required: true,
+    },
+    tframe: {
+      type: String,
+      default: 'commit',
+    },
+    avgsize: {
+      type: [Number, String],
+      required: true,
+    },
+    sdate: {
+      type: String,
+      required: true,
+    },
+    udate: {
+      type: String,
+      required: true,
+    },
+    mergegroup: {
+      type: Boolean,
+      default: false,
+    },
+    fromramp: {
+      type: Boolean,
+      default: false,
+    },
+    filtersearch: {
+      type: String,
+      default: '',
+    },
+  },
   data() {
     return {
       rampSize: 0.01,

frontend/src/components/c-segment-collection.vue

@@ -12,7 +12,16 @@ export default {
   components: {
     cSegment,
   },
-  props: ['segments', 'path'],
+  props: {
+    segments: {
+      type: Array,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+  },
   data() {
     return {
       isRendered: false,

frontend/src/components/c-segment.vue

@@ -25,9 +25,20 @@
 </template>
 
 <script>
+import Segment from '../utils/segment.ts';
+
 export default {
   name: 'c-segment',
-  props: ['segment', 'path'],
+  props: {
+    segment: {
+      type: Segment,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+  },
   data() {
     return {
       isOpen: this.segment.authored || this.segment.lines.length < 5,

frontend/src/components/c-summary-charts.vue

@@ -193,9 +193,60 @@ export default {
   components: {
     cRamp,
   },
-  props: ['checkedFileTypes', 'filtered', 'avgContributionSize', 'filterBreakdown',
-      'filterGroupSelection', 'filterTimeFrame', 'filterSinceDate', 'filterUntilDate', 'isMergeGroup',
-      'minDate', 'maxDate', 'filterSearch', 'sortGroupSelection'],
+  props: {
+    checkedFileTypes: {
+      type: Array,
+      required: true,
+    },
+    filtered: {
+      type: Array,
+      required: true,
+    },
+    avgContributionSize: {
+      type: Number,
+      required: true,
+    },
+    filterBreakdown: {
+      type: Boolean,
+      default: false,
+    },
+    filterGroupSelection: {
+      type: String,
+      default: 'groupByRepos',
+    },
+    filterTimeFrame: {
+      type: String,
+      default: 'commit',
+    },
+    filterSinceDate: {
+      type: String,
+      required: true,
+    },
+    filterUntilDate: {
+      type: String,
+      required: true,
+    },
+    isMergeGroup: {
+      type: Boolean,
+      default: false,
+    },
+    minDate: {
+      type: String,
+      required: true,
+    },
+    maxDate: {
+      type: String,
+      required: true,
+    },
+    filterSearch: {
+      type: String,
+      default: '',
+    },
+    sortGroupSelection: {
+      type: String,
+      default: 'groupTitle',
+    },
+  },
   data() {
     return {
       drags: [],

frontend/src/utils/api.js

@@ -1,3 +1,5 @@
+import User from './user.ts';
+
 // utility functions //
 window.$ = (id) => document.getElementById(id);
 window.enquery = (key, val) => `${key}=${encodeURIComponent(val)}`;
@@ -280,7 +282,8 @@ window.api = {
         obj.repoName = `${repo.displayName}`;
         obj.location = `${repo.location.location}`;
 
-        res.push(obj);
+        const user = new User(obj);
+        res.push(user);
       }
     });
 

frontend/src/utils/segment.ts

@@ -0,0 +1,13 @@
+export default class Segment {
+  authored: boolean;
+
+  lineNumbers: Array<number>;
+
+  lines: Array<string>;
+
+  constructor(isAuthored: boolean, lineNumbers: Array<number>, lines: Array<string>) {
+    this.authored = isAuthored;
+    this.lineNumbers = lineNumbers;
+    this.lines = lines;
+  }
+}

frontend/src/utils/user.ts

@@ -0,0 +1,37 @@
+export default class User {
+  checkedFileTypeContribution : number;
+
+  commits: Array<object>;
+
+  dailyCommits: Array<object>;
+
+  displayName: string;
+
+  fileTypeContribution: object;
+
+  location: string;
+
+  name: string;
+
+  repoId: string;
+
+  repoName: string;
+
+  searchPath: string;
+
+  variance: number;
+
+  constructor(userObj: User) {
+    this.checkedFileTypeContribution = userObj.checkedFileTypeContribution || 0;
+    this.commits = userObj.commits || [];
+    this.dailyCommits = userObj.dailyCommits || [];
+    this.displayName = userObj.displayName || '';
+    this.fileTypeContribution = userObj.fileTypeContribution || {};
+    this.location = userObj.location || '';
+    this.name = userObj.name || '';
+    this.repoId = userObj.repoId || '';
+    this.repoName = userObj.repoName || '';
+    this.searchPath = userObj.searchPath || '';
+    this.variance = userObj.variance || 0;
+  }
+}

frontend/src/views/c-authorship.vue

@@ -168,6 +168,7 @@ import { mapState } from 'vuex';
 import minimatch from 'minimatch';
 import brokenLinkDisabler from '../mixin/brokenLinkMixin.ts';
 import cSegmentCollection from '../components/c-segment-collection.vue';
+import Segment from '../utils/segment.ts';
 
 const getFontColor = window.getFontColor;
 
@@ -416,11 +417,11 @@ export default {
         const authored = (line.author && isAuthorMatched);
 
         if (authored !== lastState || lastId === -1) {
-          segments.push({
-            authored,
-            lines: [],
-            lineNumbers: [],
-          });
+          segments.push(new Segment(
+              authored,
+              [],
+              [],
+          ));
 
           lastId += 1;
           lastState = authored;

frontend/src/views/c-summary.vue

@@ -142,7 +142,18 @@ export default {
   components: {
     cSummaryCharts,
   },
-  props: ['repos', 'errorMessages'],
+  props: {
+    repos: {
+      type: Array,
+      required: true,
+    },
+    errorMessages: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
   data() {
     return {
       checkedFileTypes: [],

frontend/src/views/c-zoom.vue

@@ -137,6 +137,7 @@ import { mapState } from 'vuex';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import brokenLinkDisabler from '../mixin/brokenLinkMixin.ts';
 import cRamp from '../components/c-ramp.vue';
+import User from '../utils/user.ts';
 
 const getFontColor = window.getFontColor;
 
@@ -185,7 +186,7 @@ export default {
           (commit) => commit[date] >= zSince && commit[date] <= zUntil,
       ).sort(this.sortingFunction);
 
-      return filteredUser;
+      return new User(filteredUser);
     },
     selectedCommits() {
       const commits = [];