Merge pull request #28 from icefoganalytics/main

More offline fixes

api/src/routes/offline-report-router.ts

@@ -2,7 +2,7 @@ import express, { Request, Response } from "express";
 import { isArray } from "lodash";
 
 import { db as knex } from "../data";
-import { DepartmentService, DirectoryService, EmailService, IncidentService } from "../services";
+import { DepartmentService, DirectoryService, EmailService, IncidentService, UserService } from "../services";
 import {
   Hazard,
   HazardStatuses,
@@ -21,30 +21,45 @@ export const offlineReportRouter = express.Router();
 const db = new IncidentService();
 const emailService = new EmailService();
 const directoryService = new DirectoryService();
+const userService = new UserService();
 
 offlineReportRouter.post("/", async (req: Request, res: Response) => {
   const {} = req.body;
 
-  let currentUserEmail = "offline-user@yukon.ca";
+  let currentUserEmail = req.body.email;
   let currentUserId = 1;
-  let currentUserName = "Offline User Testing";
+  let currentUserName = req.body.email;
+
+  const existingUser = await userService.getByEmail(currentUserEmail);
+
+  if (existingUser) {
+    currentUserId = existingUser.id;
+    currentUserEmail = existingUser.email;
+    currentUserName = existingUser.display_name;
+  } else {
+    const createdUser = await userService.create({
+      department: "",
+      division: "",
+      branch: "",
+      unit: "",
+      display_name: currentUserEmail,
+      email: currentUserEmail,
+      first_name: "Offline",
+      last_name: "Submission",
+      title: "",
+      is_active: true,
+      auth_subject: "SUB_MISSING",
+    });
+
+    currentUserId = createdUser[0].id;
+  }
 
   req.body.email = currentUserEmail;
   req.body.status = "Initial Report";
 
-  let {
-    date,
-    eventType,
-    description,
-    location_code,
-    location_detail,
-    supervisor_email,
-    on_behalf,
-    on_behalf_email,
-    urgency,
-  } = req.body;
+  let { date, eventType, description, location_code, location_detail, supervisor_email, urgency } = req.body;
 
-  const reporting_person_email = on_behalf == "Yes" ? on_behalf_email : currentUserEmail;
+  const reporting_person_email = req.body.email;
 
   const defaultHazardType = await knex("hazard_types").orderBy("id").select("id").first();
   const defaultIncidentType = await knex("incident_types").where({ name: eventType }).select("id").first();
@@ -89,7 +104,6 @@ offlineReportRouter.post("/", async (req: Request, res: Response) => {
       supervisor_email,
       incident_type_id: defaultIncidentType.id,
       reporting_person_email,
-      proxy_user_id: currentUserId,
       urgency_code: urgency,
     } as Incident;
 
@@ -181,7 +195,7 @@ offlineReportRouter.post("/", async (req: Request, res: Response) => {
     }
 
     await trx.commit();
-    console.log("ALL GOOD!")
+    console.log("ALL GOOD!");
     return res.status(200).json({ data: {} });
   } catch (error) {
     trx.rollback();

api/src/services/user-service.ts

@@ -34,7 +34,7 @@ export class UserService {
   }
 
   async create(item: User_Create): Promise<any> {
-    return db("users").insert(item);
+    return db("users").insert(item).returning("*");
   }
 
   async update(id: number | string, item: User_Update): Promise<User> {

web/src/components/DirectorySelector.vue

@@ -89,6 +89,7 @@ watch(search, async (nv) => {
 
 watch(model, async (nv) => {
   if (!nv) {
+    doSelect();
     return;
   }
 

web/src/components/incident/CreatePage.vue

@@ -6,7 +6,7 @@
     Wellbeing at 867-332-5974
   </p>
 
-  <v-form class="mt-6">
+  <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">
@@ -100,36 +100,31 @@
 
               <v-col cols="12" sm="6">
                 <v-label class="mb-1" style="white-space: inherit">Urgency level</v-label>
-                <v-select
-                  hide-details
-                  v-model="report.urgency"
-                  :items="urgencies"
-                  item-title="name"
-                  item-value="code"></v-select>
+                <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">
+          <v-col cols="12" md="12" class="py-0">
             <v-label class="mb-1" style="white-space: inherit">General location where the event occurred</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" md="12">
+          <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" hide-details />
+            <v-text-field v-model="report.location_detail" :rules="[requiredRule]" />
           </v-col>
-          <v-col cols="12" md="12">
+          <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" hide-details />
+            <v-textarea v-model="report.description" :rules="[requiredRule]" />
           </v-col>
         </v-row>
       </v-card>
@@ -182,12 +177,14 @@
 <script setup>
 import { computed, ref, watch } 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 DirectorySelector from "@/components/DirectorySelector.vue";
+import { requiredRule } from "@/utils/validation";
 
 const reportStore = useReportStore();
 const { initialize, addReport } = reportStore;
@@ -196,12 +193,18 @@ const { locations, urgencies } = storeToRefs(reportStore);
 const interfaceStore = useInterfaceStore();
 const { showOverlay, hideOverlay } = interfaceStore;
 
+const isValid = ref(false);
+
 await initialize();
 
 const report = ref({ eventType: null, date: new Date(), urgency: "Medium" });
 
 const canSave = computed(() => {
-  return report.value.eventType;
+  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;
 });
 
 async function saveReport() {
@@ -215,9 +218,11 @@ async function saveReport() {
 }
 
 function handleSupervisorSelect(value) {
-  report.value.supervisor_email = value.email;
+  if (value) report.value.supervisor_email = value.email;
+  else report.value.supervisor_email = null;
 }
 function handleBehalfSelect(value) {
-  report.value.on_behalf_email = value.email;
+  if (value) report.value.on_behalf_email = value.email;
+  else report.value.on_behalf_email = null;
 }
 </script>

web/src/components/incident/CreatePageOffline.vue

@@ -6,7 +6,7 @@
     Wellbeing at 867-332-5974.
   </p>
 
-  <v-form class="mt-6">
+  <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">
@@ -52,7 +52,7 @@
           <h4 class="text-h6">What Happened?</h4>
         </v-card-item>
 
-        <v-row class="pa-5 pb-6">
+        <v-row class="pa-5 pb-0">
           <v-col cols="12" md="12">
             <v-row>
               <v-col cols="12" sm="6">
@@ -62,36 +62,31 @@
 
               <v-col cols="12" sm="6">
                 <v-label class="mb-1" style="white-space: inherit">Urgency level</v-label>
-                <v-select
-                  hide-details
-                  v-model="report.urgency"
-                  :items="urgencies"
-                  item-title="name"
-                  item-value="code"></v-select>
+                <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">
+          <v-col cols="12" md="12" class="py-0">
             <v-label class="mb-1" style="white-space: inherit">General location where the event occurred</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" md="12">
+          <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" hide-details />
+            <v-text-field v-model="report.location_detail" :rules="[requiredRule]" />
           </v-col>
-          <v-col cols="12" md="12">
+          <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" hide-details />
+            <v-textarea v-model="report.description" :rules="[requiredRule]" />
           </v-col>
         </v-row>
       </v-card>
@@ -105,17 +100,24 @@
           <h4 class="text-h6">Submit Report</h4>
         </v-card-item>
         <v-card-text class="pt-5">
-          <v-label>Supervisor's email</v-label>
-          <v-text-field v-model="report.supervisor_email" />
-
-          <v-alert type="warning">
-            You are submitting this report offline. When your device reconnects to the internet, this report will be
-            uploaded.
-          </v-alert>
+          <v-row>
+            <v-col cols="12" sm="6" class="py-0">
+              <v-label>Your email</v-label>
+              <v-text-field v-model="report.email" :rules="[requiredRule, emailRule]" type="email" />
+            </v-col>
+            <v-col cols="12" sm="6" class="py-0">
+              <v-label>Supervisor's email</v-label>
+              <v-text-field v-model="report.supervisor_email" :rules="[requiredRule, emailRule]" type="email" />
+            </v-col>
+          </v-row>
 
           <div class="d-flex">
             <v-btn color="primary" @click="saveReport" class="mb-0" :disabled="!canSave">Submit </v-btn>
           </div>
+          <v-alert type="warning" class="mt-3 mb-2">
+            You are submitting this report offline. When your device reconnects to the internet, this report will be
+            uploaded.
+          </v-alert>
         </v-card-text>
       </v-card>
     </section>
@@ -128,24 +130,25 @@ import { storeToRefs } from "pinia";
 import { router } from "@/routes";
 import { useReportStore } from "@/store/ReportStore";
 import DateTimeSelector from "@/components/DateTimeSelector.vue";
+import { requiredRule, emailRule } from "@/utils/validation";
 
 const reportStore = useReportStore();
 const { initialize, addReportOffline } = reportStore;
 const { locations, urgencies } = storeToRefs(reportStore);
 
+const isValid = ref(false);
+
 await initialize();
 
 const report = ref({ eventType: null, date: new Date(), urgency: "Medium" });
 
 const canSave = computed(() => {
-  return report.value.eventType;
+  return report.value.eventType && isValid.value;
 });
 
 async function saveReport() {
   report.value.createDate = new Date();
 
-  console.log("SAVING OFFLINE REPORT", report.value);
-
   await addReportOffline(report.value).then(() => {
     router.push("/report-an-incident-offline/complete");
   });

web/src/routes.ts

@@ -70,11 +70,11 @@ const routes: RouteRecordRaw[] = [
 
 import { useUserStore } from "@/store/UserStore";
 
-/* export async function waitForUserToLoad(): Promise<any> {
+export async function waitForUserToLoad(): Promise<any> {
   let u = useUserStore();
   await u.initialize();
   return u;
-} */
+}
 
 export const router = createRouter({
   history: createWebHistory(),
@@ -91,24 +91,18 @@ router.beforeEach(async (to) => {
   }
 
   console.log("Await authGuard");
-
   const isAuthenticated = await authGuard(to);
 
   if (isAuthenticated) {
     console.log("You are authenticated");
 
     if (to.meta.requireSystemAdmin) {
-      /* const u = await waitForUserToLoad();
-
-      console.log("User Is", u.isSystemAdmin);
-
-      console.log("requires Admin");
-      return u.isSystemAdmin; */
-      return false;
+      const u = await waitForUserToLoad();
+      console.log("User Is Admin", u.isSystemAdmin);
+      return u.isSystemAdmin;
     }
 
     console.log(" route allowed");
-
     return true;
   }
 

web/src/utils/validation.ts

@@ -0,0 +1,10 @@
+export const requiredRule = (value: string) => {
+  if (value) return true;
+  return "This field is required.";
+};
+
+export const emailRule = (value: string) => {
+  if (/.+@.+\..+/.test(value)) return true;
+
+  return "E-mail must be valid.";
+};