Hide edit buttons on non-editable form elements

aleksis/apps/alsijil/static/js/vue/components/alsijil/LessonDocumentation.js

@@ -6,7 +6,7 @@ export default {
             valid: false,
             datePick: "2030-09-29",
             showPicker: false,
-            // period: 5,
+            dateAndPeriodEditable: false,
         }
     },
     template: `
@@ -25,28 +25,34 @@ export default {
                 >
                   <template v-slot:activator="{ on, attrs }">
                     <v-card-title>
-                      <span v-text="new Date(datePick).toLocaleDateString()"></span>
-                      <v-btn right disabled v-bind="attrs" v-on="on" icon><v-icon>mdi-pencil-outline</v-icon></v-btn>
+                      <span v-text="new Date(datePick).toLocaleDateString()" class="ma-1"></span>
+                      <v-btn right v-bind="attrs" v-on="on" icon v-if="hover && dateAndPeriodEditable">
+                        <v-icon>mdi-pencil-outline</v-icon>
+                      </v-btn>
                     </v-card-title>
                   </template>
                   <v-date-picker
-                  scrollable
-                  no-title 
-                  @input="showPicker = false; $emit('change-date', $event)"
-                  v-model="datePick"
+                    scrollable
+                    no-title 
+                    @input="showPicker = false; $emit('change-date', $event)"
+                    v-model="datePick"
                   ></v-date-picker>
                 </v-menu>
+              </div>
+            </v-hover>
+            <v-hover v-slot="{ hover }"> 
+              <div>
                 <v-menu offset-y>
                   <template v-slot:activator="{ on, attrs }">
                     <v-card-title>
-                      <span v-text="period"></span>
+                      <span v-text="period" class="ma-1"></span>
 <!--                      (this.$root.django.gettext('%s. Period'), period)-->
                       <v-btn
                         right
                         v-bind="attrs"
                         v-on="on"
                         icon
-                        disabled
+                        v-if="hover && dateAndPeriodEditable"
                       >
                         <v-icon>mdi-pencil-outline</v-icon>
                       </v-btn>