Issue/431 UI update checkbox instead of images

CHANGELOG.md

@@ -1,7 +1,8 @@
 # Changes to the UKHPI app by version and date
 
-## 1.7.5 - 2024-08
+## 1.7.5 - 2024-09
 
+- (Dan) Replaces the buttons for checkboxes on the property tables [GH-431](https://github.com/epimorphics/ukhpi/issues/431)
 - (Jon) Exposed `instrument_internal_error(exception)` metric to the
   `ExceptionsController` to provide a count of internal errors
   [GH-142](https://github.com/epimorphics/hmlr-linked-data/issues/142)

app/assets/stylesheets/_ukhpi-statistics.scss

@@ -25,17 +25,15 @@ $graph-colours: (
 }
 
 .o-data-view__js-options-statistics {
-  button {
-    font-size: 85%;
-    margin-right: 10px;
-    border: 0;
-    background-color: inherit;
-    cursor: pointer;
-  }
-
-  img {
-    max-height: 15px;
-    margin-bottom: -3px;
-    border: 1px solid $grey-1;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  flex-wrap: wrap;
+  .checkbox-container {
+    margin-right: 5px;
+    img {
+      max-height: 15px;
+      margin-bottom: -1px;
+    }
   }
 }

app/javascript/components/data-view-statistics.vue

@@ -3,18 +3,23 @@
     <span
       v-for='(statistic, index) in statistics'
       :key='statistic.slug'
-      class='o-data-view__js-options-statistics'>
-      <button
+      class="checkbox-container"
+    >
+      <input
+        type="checkbox"
+        :name='statistic.label'
         :data-slug='statistic.slug'
-        @click='onSelectStatistic'
-      >
+        @change='onSelectStatistic'
+        :checked='isSelectedStatistic(statistic.slug)'
+      />
+      <label :for='statistic.label'>
         <img
-          :src='imageSrcPath(statistic, index, false)'
-          :srcset='imageSrcPath(statistic, index, true)'
+          :src='imageSrcPath(index, false)'
+          :srcset='imageSrcPath(index, true)'
           :alt='`marker image for ${statistic.label}`'
         />
         {{ statistic.label }}
-      </button>
+      </label>
     </span>
   </div>
 </template>
@@ -47,22 +52,15 @@ export default {
     },
   },
 
-  getters: {
-  },
-
   mounted() {
     this.initStatistics();
   },
 
-  watch: {
-    initialStatistics() {
-      this.initStatistics();
-    },
-  },
-
   methods: {
     initStatistics() {
-      this.statistics = this.initialStatistics;
+      if (this.statistics !== this.initialStatistics) {
+        this.statistics = this.initialStatistics;
+      }
       if (!this.zoom) {
         this.syncSelectedStatisticsToStore();
       }
@@ -74,37 +72,19 @@ export default {
         store.commit(SELECT_STATISTIC, { slug: stat.slug, isSelected: stat.isSelected });
       });
     },
-
-    /**
-     * Handler for the event of the user clicking to select or deselect a statistic.
-     * Actual state change happens by propagating a change to the Vuex store.
-     * Allows the click-target to be embedded within the button element, by walking
-     * up the DOM tree until we find the element with the statistic slug.
-     */
+
     onSelectStatistic(event) {
-      let slug;
-      let { target } = event;
-      do {
-        slug = target.attributes.getNamedItem('data-slug');
-        target = target.parentElement;
-      } while (!slug);
-
-      const selected = this.isSelectedStatistic(slug.value);
-      this.$store.commit(SELECT_STATISTIC, { slug: slug.value, isSelected: !selected });
-    },
-
-    findStatistic(slug) {
-      return this.statistics.find(stat => stat.slug === slug);
+      const slug = event.target.getAttribute('data-slug');
+      const selected = this.isSelectedStatistic(slug);
+      this.$store.commit(SELECT_STATISTIC, { slug, isSelected: !selected });
     },
 
     isSelectedStatistic(slug) {
       return this.$store.state.selectedStatistics[slug];
     },
 
-    /** @return The CSS class for the status indicator */
-    imageSrcPath({ slug }, index, svg) {
-      const selected = this.isSelectedStatistic(slug);
-      const imageRoot = selected ? MARKERS[index] : 'SquareWhite';
+    imageSrcPath(index, svg) {
+      const imageRoot = MARKERS[index];
       const imagePathKey = `marker${imageRoot}${svg ? 'Svg' : ''}`;
       return serverRoutes[imagePathKey];
     },