Implement admin danations info show checkbox

webapp/locales/de.json

@@ -30,6 +30,7 @@
       "goal": "Monatlich benötigte Spenden",
       "name": "Spendeninfo",
       "progress": "Bereits gesammelte Spenden",
+      "showDonationsCheckboxLabel": "Spendenfortschritt anzeigen",
       "successfulUpdate": "Spenden-Info erfolgreich aktualisiert!"
     },
     "hashtags": {

webapp/locales/en.json

@@ -30,6 +30,7 @@
       "goal": "Monthly donations needed",
       "name": "Donations info",
       "progress": "Donations collected so far",
+      "showDonationsCheckboxLabel": "Show donations progress bar",
       "successfulUpdate": "Donations info updated successfully!"
     },
     "hashtags": {

webapp/pages/admin/donations.vue

@@ -2,14 +2,39 @@
   <base-card>
     <h2 class="title">{{ $t('admin.donations.name') }}</h2>
     <ds-form v-model="formData" @submit="submit">
-      <ds-input model="goal" :label="$t('admin.donations.goal')" placeholder="15000" icon="money" />
+      <ds-text class="show-donations-checkbox">
+        <input
+          id="showDonations"
+          type="checkbox"
+          v-model="showDonations"
+          :checked="showDonations"
+        />
+        <label for="showDonations">
+          {{ $t('admin.donations.showDonationsCheckboxLabel') }}
+        </label>
+      </ds-text>
       <ds-input
+        class="donations-data"
+        model="goal"
+        :label="$t('admin.donations.goal')"
+        placeholder="15000"
+        icon="money"
+        :disabled="!showDonations"
+      />
+      <ds-input
+        class="donations-data"
         model="progress"
         :label="$t('admin.donations.progress')"
         placeholder="1200"
         icon="money"
+        :disabled="!showDonations"
       />
-      <base-button filled type="submit" :disabled="!formData.goal || !formData.progress">
+      <base-button
+        class="donations-info-button"
+        filled
+        type="submit"
+        :disabled="!formData.goal || !formData.progress"
+      >
         {{ $t('actions.save') }}
       </base-button>
     </ds-form>
@@ -26,6 +51,10 @@ export default {
         goal: null,
         progress: null,
       },
+      // TODO: Our styleguide does not support checkmarks.
+      // Integrate showDonations into `this.formData` once we
+      // have checkmarks available.
+      showDonations: null,
     }
   },
   methods: {
@@ -62,3 +91,18 @@ export default {
   },
 }
 </script>
+
+<style lang="scss" scoped>
+.show-donations-checkbox {
+  margin-top: $space-base;
+  margin-bottom: $space-small;
+}
+
+.donations-data {
+  margin-left: $space-small;
+}
+
+.donations-info-button {
+  margin-top: $space-small;
+}
+</style>