Add a Multiselect to select GHS Hazard

datalab-org · Oct 8, 2024 · cc60db7 · cc60db7
1 parent a4a3faf
commit cc60db7
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 1 deletion.
diff --git a/webapp/src/components/MultiselectHazardPictogram.vue b/webapp/src/components/MultiselectHazardPictogram.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <MultiSelect
+      v-model="selectedGhsCodes"
+      :options="ghsOptions"
+      option-label="label"
+      option-value="value"
+      placeholder="Select GHS codes"
+      :include-select-all-option="false"
+    >
+      <template #option="slotProps">
+        <div class="ghs-option">
+          <img :alt="slotProps.option.label" :src="slotProps.option.pictogram" class="ghs-icon" />
+          <div>{{ slotProps.option.value + ": " + slotProps.option.label }}</div>
+        </div>
+      </template>
+    </MultiSelect>
+  </div>
+</template>
+
+<script>
+import MultiSelect from "primevue/multiselect";
+import { HazardPictograms } from "@/resources.js";
+
+export default {
+  components: {
+    MultiSelect,
+  },
+  props: {
+    modelValue: {
+      type: Array,
+      required: true,
+    },
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      selectedGhsCodes: Object.values(this.modelValue),
+      ghsOptions: Object.entries(HazardPictograms).map(([code, { label, pictogram }]) => ({
+        value: code,
+        label,
+        pictogram,
+      })),
+    };
+  },
+  watch: {
+    selectedGhsArray(newArray) {
+      const newObj = newArray.reduce((acc, val, index) => {
+        acc[index] = val;
+        return acc;
+      }, {});
+      this.$emit("update:modelValue", newObj);
+    },
+    modelValue: {
+      immediate: true,
+      handler(newValue) {
+        this.selectedGhsArray = Object.values(newValue);
+      },
+    },
+  },
+};
+</script>
+
+<style scoped>
+.ghs-option {
+  display: flex;
+  align-items: center;
+}
+
+.ghs-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 8px;
+}
+</style>
diff --git a/webapp/src/components/StartingMaterialInformation.vue b/webapp/src/components/StartingMaterialInformation.vue
@@ -64,7 +64,8 @@
       </div>
       <div class="form-group col-lg-3 col-sm-4">
         <label for="startmat-hazards">GHS Hazard Codes</label>
-        <StyledInput id="startmat-hazards" v-model="GHS" :readonly="!isEditable" />
+        <!-- <StyledInput id="startmat-hazards" v-model="GHS" :readonly="!isEditable" /> -->
+        <MultiselectHazardPictogram v-model="GHS" />
       </div>
       <div class="col-lg-3 col-sm-4">
         <ToggleableCollectionFormGroup v-model="Collections" />
@@ -91,6 +92,7 @@ import TableOfContents from "@/components/TableOfContents";
 import ToggleableCollectionFormGroup from "@/components/ToggleableCollectionFormGroup";
 import FormattedRefcode from "@/components/FormattedRefcode";
 import StyledInput from "@/components/StyledInput";
+import MultiselectHazardPictogram from "@/components/MultiselectHazardPictogram";
 
 import { EDITABLE_INVENTORY } from "@/resources.js";
 
@@ -103,6 +105,7 @@ export default {
     ToggleableCollectionFormGroup,
     TableOfContents,
     FormattedRefcode,
+    MultiselectHazardPictogram,
   },
   props: {
     item_id: { type: String, required: true },

diff --git a/webapp/src/resources.js b/webapp/src/resources.js
@@ -133,3 +133,42 @@ export const cellFormats = {
   cylindrical: "cylindrical",
   other: "other",
 };
+
+export const HazardPictograms = {
+  GHS01: {
+    label: "Explosives",
+    pictogram: "https://pubchem.ncbi.nlm.nih.gov/images/ghs/GHS01.svg",
+  },
+  GHS02: {
+    label: "Flammables",
+    pictogram: "https://pubchem.ncbi.nlm.nih.gov/images/ghs/GHS02.svg",
+  },
+  GHS03: {
+    label: "Oxidizers",
+    pictogram: "https://pubchem.ncbi.nlm.nih.gov/images/ghs/GHS03.svg",
+  },
+  GHS04: {
+    label: "Compressed Gases",
+    pictogram: "https://pubchem.ncbi.nlm.nih.gov/images/ghs/GHS04.svg",
+  },
+  GHS05: {
+    label: "Corrosives",
+    pictogram: "https://pubchem.ncbi.nlm.nih.gov/images/ghs/GHS05.svg",
+  },
+  GHS06: {
+    label: "Acute Toxicity",
+    pictogram: "https://pubchem.ncbi.nlm.nih.gov/images/ghs/GHS06.svg",
+  },
+  GHS07: {
+    label: "Irritant",
+    pictogram: "https://pubchem.ncbi.nlm.nih.gov/images/ghs/GHS07.svg",
+  },
+  GHS08: {
+    label: "Health Hazard",
+    pictogram: "https://pubchem.ncbi.nlm.nih.gov/images/ghs/GHS08.svg",
+  },
+  GHS09: {
+    label: "Environment",
+    pictogram: "https://pubchem.ncbi.nlm.nih.gov/images/ghs/GHS09.svg",
+  },
+};