Parameterize coursebook loading component

aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue

@@ -45,6 +45,9 @@
     </template>
     <template #loading>
       <coursebook-loader
+        :number-of-days="10"
+        :number-of-docs="5"
+      />
     </template>
 
     <template #no-data>
@@ -220,7 +223,9 @@ export default {
       });
     },
     setDate(date) {
-      this.$router.replace({ hash: date })
+      if (!(this.$route.hash.substring(1) === date)) {
+        this.$router.replace({ hash: date })
+      }
     },
     fixScrollPos(height, top) {
       console.log('fix @', top, document.documentElement.scrollTop, height, document.documentElement.scrollHeight);

aleksis/apps/alsijil/frontend/components/coursebook/CoursebookLoader.vue

 <template>
   <div>
-    <v-list-item v-for="i in 10" :key="'i-' + i">
+    <v-list-item v-for="i in numberOfDays" :key="'i-' + i">
       <v-list-item-content>
         <v-list-item-title>
           <v-skeleton-loader type="heading" />
         </v-list-item-title>
         <v-list max-width="100%">
-          <v-list-item v-for="j in 5" :key="'j-' + j">
+          <v-list-item v-for="j in numberOfDocs" :key="'j-' + j">
             <DocumentationLoader />
           </v-list-item>
         </v-list>
@@ -20,5 +20,17 @@ import DocumentationLoader from "./documentation/DocumentationLoader.vue";
 export default {
   name: "CoursebookLoader",
   components: { DocumentationLoader },
+  props: {
+    numberOfDays: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    numberOfDocs: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+  },
 };
 </script>