From 55f7d330140f10e3e20c4f5e923520f6f97302da Mon Sep 17 00:00:00 2001
From: Michael Johnson <michael@icefoganalytics.com>
Date: Thu, 7 Nov 2024 11:42:17 -0700
Subject: [PATCH] Investigation and Inspection

---
 web/src/components/incident/DetailsPage.vue   |  43 +++-
 .../components/incident/InvestigationForm.vue | 220 ++++++++++++++++++
 web/src/components/incident/OperationMenu.vue |  12 +-
 .../inspection/CreateInspectionPage.vue       | 177 ++++++++++++++
 web/src/routes.ts                             |   7 +
 web/src/store/ReportStore.ts                  |  13 +-
 web/src/views/Home.vue                        |   2 +
 7 files changed, 455 insertions(+), 19 deletions(-)
 create mode 100644 web/src/components/incident/InvestigationForm.vue
 create mode 100644 web/src/components/inspection/CreateInspectionPage.vue

diff --git a/web/src/components/incident/DetailsPage.vue b/web/src/components/incident/DetailsPage.vue
index 424a144..f471b5d 100644
--- a/web/src/components/incident/DetailsPage.vue
+++ b/web/src/components/incident/DetailsPage.vue
@@ -30,7 +30,7 @@
         <v-stepper-vertical-item
           v-for="(step, idx) of selectedReport.steps"
           :value="idx + 1"
-          :complete="step.complete_date"
+          :complete="!isNil(step.complete_date)"
           :title="step.step_title"
           :color="step.complete_date ? 'success' : ''"
           :subtitle="step.complete_date ? `${formatDate(step.complete_date)} by ${step.complete_name}` : ''">
@@ -49,7 +49,7 @@
           <v-stepper-item
             v-for="(step, idx) of selectedReport.steps"
             :value="idx + 1"
-            :complete="step.complete_date"
+            :complete="!isNil(step.complete_date)"
             :title="step.step_title"
             :color="step.complete_date ? 'success' : ''"
             :subtitle="step.complete_date ? `${formatDate(step.complete_date)} by ${step.complete_name}` : ''">
@@ -147,10 +147,13 @@
               </v-col>
 
               <v-col cols="12" md="12">
-                <v-label>Investigation</v-label>
+                <!-- <v-label>Investigation</v-label>
                 <v-textarea v-model="selectedReport.investigation_notes" hide-details />
-
+ -->
                 <v-btn color="primary" class="mb-0 mt-6" @click="saveClick">Save</v-btn>
+                <v-btn v-if="investigationIsActive" color="primary" class="mb-0 mt-6 ml-6" @click="investigationClick">
+                  Start Investigation
+                </v-btn>
               </v-col>
             </v-row>
           </v-card>
@@ -173,6 +176,11 @@
         </v-col>
       </v-row>
     </section>
+
+    <InvestigationForm
+      v-model="showInvestigationDialog"
+      @complete="completeInvestigation"
+      @close="showInvestigationDialog = false" />
   </div>
 </template>
 
@@ -181,6 +189,7 @@ import { computed, ref } from "vue";
 import { storeToRefs } from "pinia";
 import { DateTime } from "luxon";
 import { useRoute } from "vue-router";
+import { isNil } from "lodash";
 
 import { useDisplay } from "vuetify";
 const { smAndDown } = useDisplay();
@@ -190,12 +199,13 @@ import ActionList from "@/components/action/ActionList.vue";
 import HazardList from "@/components/hazard/HazardList.vue";
 import ActionCreate from "@/components/action/ActionCreate.vue";
 import ActionEdit from "@/components/action/ActionEdit.vue";
+import InvestigationForm from "./InvestigationForm.vue";
 
 import { useReportStore } from "@/store/ReportStore";
 
 const reportStore = useReportStore();
-const { initialize, loadReport, updateReport, openAttachment } = reportStore;
-const { locations, urgencies, selectedReport } = storeToRefs(reportStore);
+const { initialize, loadReport, updateReport, openAttachment, completeStep } = reportStore;
+const { currentStep, selectedReport } = storeToRefs(reportStore);
 
 const router = useRoute();
 const reportId = router.params.id;
@@ -203,10 +213,20 @@ const reportId = router.params.id;
 await initialize();
 await loadReport(reportId);
 
+const showInvestigationDialog = ref(false);
+
 const showActionAdd = ref(false);
 const showActionEdit = ref(false);
 const actionToEdit = ref(null);
 
+const investigationIsActive = computed(() => {
+  if (currentStep.value) {
+    return currentStep.value.step_title.indexOf("Investig") >= 0;
+  }
+
+  return false;
+});
+
 const tickLabels = {
   0: "Low",
   1: "Medium",
@@ -284,6 +304,17 @@ async function saveClick() {
   await updateReport();
 }
 
+function investigationClick() {
+  showInvestigationDialog.value = true;
+}
+
+async function completeInvestigation() {
+  if (currentStep.value) {
+    await completeStep(currentStep.value);
+    showInvestigationDialog.value = false;
+  }
+}
+
 function openAttachmentClick(attachment) {
   openAttachment(attachment);
 }
diff --git a/web/src/components/incident/InvestigationForm.vue b/web/src/components/incident/InvestigationForm.vue
new file mode 100644
index 0000000..4599d82
--- /dev/null
+++ b/web/src/components/incident/InvestigationForm.vue
@@ -0,0 +1,220 @@
+<template>
+  <v-dialog max-width="600px" persistent>
+    <v-card>
+      <v-toolbar color="info">
+        <v-toolbar-title class="d-flex"> Investigation </v-toolbar-title>
+        <v-spacer />
+        <v-btn icon="mdi-close" @click="close"></v-btn>
+      </v-toolbar>
+      <v-window v-model="step" style="max-height: 550px; overflow-y: scroll">
+        <v-window-item :value="0">
+          <v-card-text>
+            <p>How did the natural conditions affect the event? Only check those that apply, if any.</p>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Congestion" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Weather" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Temperature" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Visibility" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Ventilation" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+          </v-card-text>
+        </v-window-item>
+        <v-window-item :value="1">
+          <v-card-text>
+            <p>How did external energy sources affect the event? Only check those that apply, if any.</p>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Noise / Sound" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Lighting" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Vibration" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Radiation" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Other (please explain)" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+          </v-card-text>
+        </v-window-item>
+        <v-window-item :value="2">
+          <v-card-text>
+            <p>How did the worker's circumstance affect the event? Only check those that apply, if any.</p>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Not Physically Capable" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Lack of Knowledge" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Lack of Skill" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Improper Motivation" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Other (please explain)" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+          </v-card-text>
+        </v-window-item>
+        <v-window-item :value="3">
+          <v-card-text>
+            <p>
+              What processes are missing or not sufficient enough and how did they contribute to the event? Only check
+              those that apply, if any.
+            </p>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Leadership" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Supervision" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Engineering" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Purchasing" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Maintenance" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Tools / Equip / Material" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Work Standards" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Wear & Tear" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Abuse or Misuse" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-checkbox label="Other (please explain)" hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+          </v-card-text>
+        </v-window-item>
+
+        <v-window-item :value="4">
+          <v-card-text>
+            <p>
+              Root causes are essential system failures that are responsible for starting the series of unsafe acts or
+              conditions that lead to the event. Examples of a root cause are that a training program or safe work
+              practice doesn't exist to help the worker complete the activity, or there is no preventative maintenance
+              program to keep equipment operating properly. There can be more than one root cause.
+            </p>
+            <v-divider />
+            <v-row class="mt-2">
+              <v-col cols="4">Root Cause</v-col>
+              <v-col>Describe the inadequate process or program that lead to the event</v-col>
+            </v-row>
+            <v-row class="">
+              <v-col cols="4"><v-text-field hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-text-field hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-text-field hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4"><v-text-field hide-details /></v-col>
+              <v-col><v-textarea rows="2" hide-details /></v-col>
+            </v-row>
+          </v-card-text>
+        </v-window-item>
+      </v-window>
+
+      <v-card-text class="d-flex">
+        <v-btn :disabled="!isPrev" color="primary" @click="step--">Prev</v-btn>
+        <v-spacer />
+        <div class="pt-1">Step {{ step + 1 }}: {{ stepName }}</div>
+        <v-spacer />
+        <v-btn v-if="!isDone" :disabled="!isNext" color="primary" @click="step++">Next</v-btn>
+        <v-btn v-else color="success" @click="save">Save</v-btn>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+
+const emits = defineEmits(["complete", "close"]);
+
+const step = ref(0);
+const stepName = computed(() => {
+  return steps.value[step.value].name;
+});
+
+const steps = ref([
+  { name: "Environmental Causes" },
+  { name: "Physical Causes" },
+  { name: "Personal Causes" },
+  { name: "Job or System" },
+  { name: "Root Causes" },
+  /*   { name: "Corrective Actions" },
+  { name: "Substitution" },
+  { name: "Engineering" },
+  { name: "Administration" },
+  { name: "Personal Protective Equipment (PPE)" }, */
+]);
+
+const isPrev = computed(() => {
+  return step.value > 0;
+});
+const isNext = computed(() => {
+  return step.value < steps.value.length - 1;
+});
+const isDone = computed(() => {
+  return step.value == steps.value.length - 1;
+});
+
+function close() {
+  emits("close");
+  step.value = 0;
+}
+function save() {
+  emits("complete");
+  step.value = 0;
+}
+</script>
diff --git a/web/src/components/incident/OperationMenu.vue b/web/src/components/incident/OperationMenu.vue
index 7c79550..88f3086 100644
--- a/web/src/components/incident/OperationMenu.vue
+++ b/web/src/components/incident/OperationMenu.vue
@@ -36,17 +36,7 @@ import { useReportStore } from "@/store/ReportStore";
 
 const reportStore = useReportStore();
 const { completeStep, revertStep } = reportStore;
-const { selectedReport } = storeToRefs(reportStore);
-
-const currentStep = computed(() => {
-  if (selectedReport.value) {
-    for (const step of selectedReport.value.steps) {
-      if (step.complete_date) continue;
-      return step;
-    }
-  }
-  return {};
-});
+const { currentStep, selectedReport } = storeToRefs(reportStore);
 
 const previousStep = computed(() => {
   if (selectedReport.value) {
diff --git a/web/src/components/inspection/CreateInspectionPage.vue b/web/src/components/inspection/CreateInspectionPage.vue
new file mode 100644
index 0000000..3ef45b5
--- /dev/null
+++ b/web/src/components/inspection/CreateInspectionPage.vue
@@ -0,0 +1,177 @@
+<template>
+  <h1 class="text-h4">Inspection</h1>
+  <!-- <p class="text-body-2">
+    Inspections are 
+  </p> -->
+
+  <v-form class="mt-6" v-model="isValid">
+    <section>
+      <v-card class="default">
+        <v-card-item class="py-4 px-6 mb-2 bg-sun">
+          <h4 class="text-h6">Inspection Details</h4>
+        </v-card-item>
+
+        <v-row class="pa-5 pb-6">
+          <v-col cols="12" md="12">
+            <v-row>
+              <v-col cols="12" sm="6">
+                <v-label class="mb-1" style="white-space: inherit">Date and time of inspection</v-label>
+                <DateTimeSelector v-model="report.date" hide-details></DateTimeSelector>
+              </v-col>
+
+              <v-col cols="12" sm="6">
+                <v-label class="mb-1" style="white-space: inherit">General location of inspection</v-label>
+                <v-autocomplete
+                  v-model="report.location_code"
+                  :items="locations"
+                  item-title="name"
+                  item-value="code"
+                  hide-details
+                  :rules="[requiredRule]" />
+              </v-col>
+
+              <v-col cols="12" sm="6">
+                <v-label class="mb-1" style="white-space: inherit">Department responsible</v-label>
+                <v-autocomplete
+                  v-model="report.location_code"
+                  :items="locations"
+                  item-title="name"
+                  item-value="code"
+                  hide-details
+                  :rules="[requiredRule]" />
+              </v-col>
+              <!--  <v-col cols="12" sm="6">
+                <v-label class="mb-1" style="white-space: inherit">Urgency level</v-label>
+                <v-select v-model="report.urgency" :items="urgencies" item-title="name" item-value="code"></v-select>
+              </v-col> -->
+            </v-row>
+          </v-col>
+          <!-- <v-col cols="12" md="12" class="py-0">
+            <v-label class="mb-1" style="white-space: inherit"
+              >Specific location where the event occurred (such as a spot in a building)</v-label
+            >
+            <v-text-field v-model="report.location_detail" :rules="[requiredRule]" />
+          </v-col>
+          <v-col cols="12" md="12" class="pt-0">
+            <v-label class="mb-1" style="white-space: inherit"
+              >Describe the event in your own words. Please include any details or thoughts that may be helpful to know
+              such as weather or time of day</v-label
+            >
+            <v-textarea v-model="report.description" :rules="[requiredRule]" />
+          </v-col> -->
+        </v-row>
+      </v-card>
+    </section>
+
+    <v-divider class="my-3" />
+
+    <v-row>
+      <v-col> Previously Identified Hazards for this location show here </v-col>
+      <v-col>
+        <div v-for="(hazard, index) of hazards">
+          <section>
+            <v-card class="default">
+              <v-card-item class="py-4 px-6 mb-2 bg-sun">
+                <h4 class="text-h6">Identified Hazard {{ index + 1 }}</h4>
+              </v-card-item>
+              <v-card-text class="pt-5 pb-6">
+                <v-row>
+                  <v-col cols="12" sm="6">
+                    <v-label class="mb-1" style="white-space: inherit">Hazard type</v-label>
+                    <v-select hide-details />
+                  </v-col>
+                  <v-col cols="12" sm="6">
+                    <v-label class="mb-1" style="white-space: inherit">Urgency</v-label>
+                    <v-select hide-details></v-select>
+                  </v-col>
+
+                  <v-col cols="12" sm="6">
+                    <v-label class="mb-1" style="white-space: inherit">Description</v-label>
+                    <v-text-field hide-details />
+                  </v-col>
+                  <v-col cols="12" sm="6">
+                    <v-label class="mb-1" style="white-space: inherit">Specific location</v-label>
+                    <v-text-field hide-details />
+                  </v-col>
+                </v-row>
+              </v-card-text>
+            </v-card>
+          </section>
+          <v-divider class="my-3" />
+        </div>
+        <v-btn color="info" class="mt-0" @click="addHazard">Add Identified Hazard</v-btn>
+      </v-col>
+    </v-row>
+
+    <section>
+      <v-card class="default">
+        <v-card-item class="py-4 px-6 mb-2 bg-sun">
+          <h4 class="text-h6">Submit Inspection</h4>
+        </v-card-item>
+        <v-card-text class="pt-5">
+          <v-label>Attach supporting images</v-label>
+          <v-file-input
+            v-model="report.files"
+            prepend-icon=""
+            prepend-inner-icon="mdi-camera"
+            chips
+            multiple
+            accept="image/*"></v-file-input>
+
+          <div class="d-flex">
+            <v-btn color="primary" @click="saveReport" class="mb-0" :disabled="!canSave">Submit </v-btn>
+          </div>
+        </v-card-text>
+      </v-card>
+    </section>
+  </v-form>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import { storeToRefs } from "pinia";
+import { isNil } from "lodash";
+import { router } from "@/routes";
+import { useReportStore } from "@/store/ReportStore";
+import { useInterfaceStore } from "@/store/InterfaceStore";
+
+import DateTimeSelector from "@/components/DateTimeSelector.vue";
+import { requiredRule } from "@/utils/validation";
+
+const reportStore = useReportStore();
+const { initialize, addReport } = reportStore;
+const { locations, urgencies } = storeToRefs(reportStore);
+
+const interfaceStore = useInterfaceStore();
+const { showOverlay, hideOverlay } = interfaceStore;
+
+const isValid = ref(false);
+
+const hazards = ref([]);
+
+await initialize();
+
+const report = ref({ eventType: null, date: new Date(), urgency: "Medium" });
+
+const canSave = computed(() => {
+  if (report.value.on_behalf == "Yes") {
+    if (isNil(report.value.on_behalf_email)) return false;
+  }
+
+  return report.value.eventType && isValid.value && report.value.supervisor_email && report.value.on_behalf;
+});
+
+function addHazard() {
+  hazards.value.push({});
+}
+
+async function saveReport() {
+  report.value.createDate = new Date();
+  showOverlay();
+
+  await addReport(report.value).then(() => {
+    hideOverlay();
+    router.push("/report-an-incident/complete");
+  });
+}
+</script>
diff --git a/web/src/routes.ts b/web/src/routes.ts
index 7e6b949..c9d9a1e 100644
--- a/web/src/routes.ts
+++ b/web/src/routes.ts
@@ -46,6 +46,13 @@ const routes: RouteRecordRaw[] = [
         component: () => import("@/components/incident/DetailsPage.vue"),
       },
 
+      {
+        path: "inspection",
+        component: () => import("@/components/inspection/CreateInspectionPage.vue"),
+      },
+
+
+
       {
         path: "sign-in",
         component: () => import("@/modules/authentication/views/SignIn.vue"),
diff --git a/web/src/store/ReportStore.ts b/web/src/store/ReportStore.ts
index b0e391c..5932d94 100644
--- a/web/src/store/ReportStore.ts
+++ b/web/src/store/ReportStore.ts
@@ -11,6 +11,17 @@ export const useReportStore = defineStore("reports", {
     selectedReport: undefined as Incident | undefined,
     isLoading: false,
   }),
+  getters: {
+    currentStep(state) {
+      if (state.selectedReport && state.selectedReport.steps) {
+        for (const step of state.selectedReport.steps) {
+          if (step.complete_date) continue;
+          return step;
+        }
+      }
+      return {};
+    },
+  },
   actions: {
     async initialize() {
       console.log("Initializing Report Store");
@@ -66,7 +77,6 @@ export const useReportStore = defineStore("reports", {
     },
 
     async addReport(report: Incident) {
-      console.log("ADDREPORT", report);
       this.myReports.push(report);
       const api = useApiStore();
 
@@ -89,7 +99,6 @@ export const useReportStore = defineStore("reports", {
     },
 
     async addReportOffline(report: Incident) {
-      console.log("ADDREPORTOFFLINE", report);
       this.isLoading = true;
 
       const api = useApiStore();
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index d758e9f..79fd96e 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -16,6 +16,8 @@
       </p>
 
       <CreateIncidentButton />
+
+      <v-btn v-if="user" color="info" to="/inspection">Start Inspection </v-btn>
     </v-col>
     <!-- <v-divider vertical /> -->