Merge pull request #606 from SanDiegoCountySheriff/feature/1965-offli…

…ne-capabilities Feature/1965 offline capabilities
SanDiegoCountySheriff · Nov 2, 2022 · cbc1af7 · cbc1af7
2 parents 80e35e7 + a2f9737
commit cbc1af7
Show file tree

Hide file tree

Showing 12 changed files with 87 additions and 25 deletions.
diff --git a/UI/src/authentication/index.js b/UI/src/authentication/index.js
@@ -30,20 +30,22 @@ export default {
         apiSubscription: res.data.Configuration.Subscription,
         defaultCounty: res.data.Configuration.DefaultCounty,
         displayBeatInput:
-          res.data.Configuration.DisplayBeatsInput.toUpperCase() === 'TRUE',
+          res.data.Configuration.DisplayBeatsInput?.toUpperCase() === 'TRUE',
         displayDebugger:
-          res.data.Configuration.DisplayDebugger.toUpperCase() === 'TRUE',
+          res.data.Configuration.DisplayDebugger?.toUpperCase() === 'TRUE',
         agencyQuestions: res.data.AgencyQuestions || [],
         environmentName: environmentName.toUpperCase(),
         useOfficerUpn:
-          res.data.Configuration.UseOfficerUpn.toUpperCase() === 'TRUE',
+          res.data.Configuration.UseOfficerUpn?.toUpperCase() === 'TRUE',
         modifyBeatId:
-          res.data.Configuration.ModifyBeatId.toUpperCase() === 'TRUE',
+          res.data.Configuration.ModifyBeatId?.toUpperCase() === 'TRUE',
         beatIdNumberOfDigits:
           parseInt(res.data.Configuration.BeatIdNumberOfDigits) || 0,
         displayReportingEmail:
-          res.data.Configuration.DisplayReportingEmail.toUpperCase() === 'TRUE',
-        reportingEmailAddress: res.data.Configuration.ReportingEmailAddress,
+          res.data.Configuration.DisplayReportingEmail?.toUpperCase() ===
+          'TRUE',
+        reportingEmailAddress:
+          res.data.Configuration.ReportingEmailAddress ?? '',
       })
 
       return new Promise((resolve, reject) => {
@@ -67,6 +69,12 @@ export default {
 
   async acquireToken() {
     const account = this.authContext.getActiveAccount()
+
+    if (!account) {
+      store.dispatch('setIsAuthenticated', false)
+      return
+    }
+
     const silentRequest = {
       scopes: ['User.Read'],
       account: account,
@@ -79,10 +87,16 @@ export default {
 
   isAuthenticated() {
     const account = this.authContext.getActiveAccount()
+
     if (!account) {
+      store.dispatch('setIsAuthenticated', false)
       return false
     }
-    return new Date(account.idTokenClaims.exp * 1000) > Date.now()
+
+    const isAuthenticated =
+      new Date(account.idTokenClaims.exp * 1000) > Date.now()
+    store.dispatch('setIsAuthenticated', isAuthenticated)
+    return isAuthenticated
   },
 
   signIn() {

diff --git a/UI/src/components/features/RipaPageContainer.vue b/UI/src/components/features/RipaPageContainer.vue
@@ -12,6 +12,7 @@
     :on-update-user="handleUpdateUser"
     :on-view-stops-with-errors="handleViewStopsWithErrors"
     :stops-with-errors="mappedStopsWithErrors"
+    :api-stop-job-loading="apiStopJobLoading"
     @handleLogOut="handleLogOut"
     @handleLogIn="handleLogIn"
   >
@@ -117,7 +118,7 @@ export default {
       isDark: this.getDarkFromLocalStorage(),
       isValidCache: true,
       stopIntervalMsApi: 5000,
-      stopIntervalMsAuth: 30000,
+      stopIntervalMsAuth: 5000,
       showInvalidUserDialog: false,
       showStopsWithErrorsDialog: false,
       showUserDialog: false,
@@ -273,8 +274,9 @@ export default {
 
     checkAuthentication() {
       const token = authentication.acquireToken()
+      const authenticated = authentication.isAuthenticated()
       if (this.isOnlineAndAuthenticated) {
-        if (token === null || !authentication.isAuthenticated()) {
+        if (token === null || !authenticated) {
           this.handleLogIn()
         }
       }

diff --git a/UI/src/components/mixins/RipaApiStopJobMixin.vue b/UI/src/components/mixins/RipaApiStopJobMixin.vue
@@ -11,6 +11,7 @@ export default {
       snackbarText: '',
       snackbarNoErrorsVisible: false,
       snackbarErrorsVisible: false,
+      apiStopJobLoading: false,
     }
   },
 
@@ -45,7 +46,9 @@ export default {
         this.isLocked = true
         const apiStops = this.getApiStopsFromLocalStorage()
         if (apiStops.length > 0) {
+          this.apiStopJobLoading = true
           await this.runApiStopsJob(apiStops)
+          this.apiStopJobLoading = false
         }
         const apiStopsWithErrors = this.getApiStopsWithErrorsFromLocalStorage()
         this.setStopsWithErrors(apiStopsWithErrors)

diff --git a/UI/src/components/molecules/RipaAppBar.vue b/UI/src/components/molecules/RipaAppBar.vue
@@ -195,6 +195,16 @@
       </template>
     </v-app-bar>
 
+    <template v-if="apiStopJobLoading">
+      <v-progress-linear indeterminate></v-progress-linear>
+      <v-container class="text-center">
+        <ripa-alert alert-outlined alert-type="warning"
+          >Stops are currently uploading, please do not close the application.
+          You may continue to create stops.</ripa-alert
+        >
+      </v-container>
+    </template>
+
     <v-banner v-if="!authenticated && online" single-line :sticky="true">
       You must log into RIPA to create new stops.
       <template v-slot:actions>
@@ -210,9 +220,15 @@
 </template>
 
 <script>
+import RipaAlert from '@/components/atoms/RipaAlert'
+
 export default {
   name: 'ripa-app-bar',
 
+  components: {
+    RipaAlert,
+  },
+
   data() {
     return {
       isMobile: false,
@@ -377,6 +393,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    apiStopJobLoading: {
+      type: Boolean,
+      default: false,
+    },
   },
 }
 </script>

diff --git a/UI/src/components/molecules/RipaConfirmation.vue b/UI/src/components/molecules/RipaConfirmation.vue
@@ -9,7 +9,7 @@
     <v-card v-else class="ripa-confirmation mx-auto my-12" flat max-width="650">
       <v-card-title class="tw-uppercase">RIPA Stops</v-card-title>
 
-      <v-card-text v-if="isOnlineAndAuthenticated">
+      <v-card-text v-if="isAuthenticated">
         <div>Thank you for your submission.</div>
         <div class="tw-my-4 tw-flex tw-justify-center">
           <v-btn color="secondary" to="/stops">My Stops</v-btn>
@@ -20,7 +20,7 @@
       </v-card-text>
 
       <v-card-text v-else>
-        <div>You must be online and logged in to create more stops</div>
+        <div>You must be logged in to create more stops</div>
         <div class="tw-my-4 tw-flex tw-justify-center">
           <v-btn color="primary" @click="onGoHome">Home</v-btn>
         </div>
@@ -48,7 +48,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    isOnlineAndAuthenticated: {
+    isAuthenticated: {
       type: Boolean,
       default: false,
     },

diff --git a/UI/src/components/molecules/RipaTemplate.vue b/UI/src/components/molecules/RipaTemplate.vue
@@ -3,9 +3,12 @@
     <v-card-text>
       <div class="tw-mt-4 tw-mb-4">
         <v-container fluid>
-          <ripa-alert alert-type="error" v-if="!isOnline">
-            You are currently offline. Please connect to the internet to submit
-            stops.
+          <ripa-alert alert-type="error" v-if="!isOnline && isAuthenticated">
+            You are currently offline. You may create stops but MUST log in to
+            submit them.
+          </ripa-alert>
+          <ripa-alert alert-type="error" v-if="!isOnline && !isAuthenticated">
+            You are currently offline. You must log in to create stops.
           </ripa-alert>
           <v-row no-gutters dense>
             <v-col cols="12" sm="12" class="tw-mt-4 tw-text-center">
@@ -68,10 +71,10 @@
           AG's Website </a
         >.
       </p>
-      <p v-if="displayReportingEmail"
-        >If you experience issues please contact us at
-        <a @click="handleEmail">{{ reportingEmailAddress }}</a></p
-      >
+      <p v-if="displayReportingEmail">
+        If you experience issues please contact us at
+        <a @click="handleEmail">{{ reportingEmailAddress }}</a>
+      </p>
       <v-divider></v-divider>
     </v-card-text>
   </v-card>
@@ -132,6 +135,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isAuthenticated: {
+      type: Boolean,
+      default: false,
+    },
   },
 }
 </script>
diff --git a/UI/src/components/organisms/RipaFormWrapper.vue b/UI/src/components/organisms/RipaFormWrapper.vue
@@ -26,14 +26,15 @@
         <template v-if="stepIndex == 0">
           <ripa-template
             :is-online="isOnline"
+            :is-authenticated="isAuthenticated"
             :on-open-template="onOpenTemplate"
             :stopTemplates="stopTemplates"
             :display-reporting-email="displayReportingEmail"
             :reporting-email-address="reportingEmailAddress"
             :disable-buttons="
               isDomainDataEmptyUser ||
               isDomainDataEmptyAdministrator ||
-              !isOnlineAndAuthenticated
+              !isAuthenticated
             "
           ></ripa-template>
         </template>
@@ -287,7 +288,7 @@
           <ripa-confirmation
             :loading="loading"
             :on-start-new="handleStartNew"
-            :is-online-and-authenticated="isOnlineAndAuthenticated"
+            :is-authenticated="isAuthenticated"
             @go-home="onGoHome"
           ></ripa-confirmation>
         </template>

diff --git a/UI/src/components/organisms/RipaPageWrapper.vue b/UI/src/components/organisms/RipaPageWrapper.vue
@@ -12,6 +12,7 @@
       :on-update-user="onUpdateUser"
       :on-view-stops-with-errors="onViewStopsWithErrors"
       :stops-with-errors="stopsWithErrors"
+      :api-stop-job-loading="apiStopJobLoading"
       @handleLogOut="handleLogOut"
       @handleLogIn="handleLogIn"
     ></ripa-app-bar>
@@ -120,6 +121,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    apiStopJobLoading: {
+      type: Boolean,
+      default: false,
+    },
   },
 }
 </script>

diff --git a/UI/src/store/index.js b/UI/src/store/index.js
@@ -30,6 +30,7 @@ export default new Vuex.Store({
   state: {
     isDark: true,
     isOnline: false,
+    isAuthenticated: false,
     adminBeats: [],
     adminCities: [],
     adminSchools: [],
@@ -83,8 +84,8 @@ export default new Vuex.Store({
     isAdmin: state => {
       return state.user.isAdmin
     },
-    isAuthenticated: () => {
-      return authentication.isAuthenticated()
+    isAuthenticated: state => {
+      return state.isAuthenticated
     },
     isOnline: state => {
       return state.isOnline
@@ -563,6 +564,9 @@ export default new Vuex.Store({
     updateResetPagination(state, value) {
       state.resetPagination = value
     },
+    updateIsAuthenticated(state, value) {
+      state.isAuthenticated = value
+    },
   },
 
   actions: {
@@ -1778,6 +1782,10 @@ export default new Vuex.Store({
     setStopsWithErrors({ commit }, value) {
       commit('updateStopsWithErrors', value)
     },
+
+    setIsAuthenticated({ commit }, value) {
+      commit('updateIsAuthenticated', value)
+    },
   },
 
   modules: {},

diff --git a/UI/tests/unit/components/features/__snapshots__/RipaPageContainer.spec.js.snap b/UI/tests/unit/components/features/__snapshots__/RipaPageContainer.spec.js.snap
@@ -22,6 +22,7 @@ exports[`Ripa Page Container should match snapshot 1`] = `
       </div>
     </header>
     <!---->
+    <!---->
   </div>
   <div class="container tw-my-6 container--fluid">
     <!---->

diff --git a/UI/tests/unit/components/molecules/__snapshots__/RipaAppBar.spec.js.snap b/UI/tests/unit/components/molecules/__snapshots__/RipaAppBar.spec.js.snap
@@ -21,5 +21,6 @@ exports[`Ripa App Bar should match snapshot 1`] = `
     </div>
   </header>
   <!---->
+  <!---->
 </div>
 `;
diff --git a/UI/tests/unit/components/molecules/__snapshots__/RipaTemplate.spec.js.snap b/UI/tests/unit/components/molecules/__snapshots__/RipaTemplate.spec.js.snap
@@ -5,11 +5,11 @@ exports[`Ripa Template should match snapshot 1`] = `
   <div class="v-card__text">
     <div class="tw-mt-4 tw-mb-4">
       <div class="container container--fluid">
+        <!---->
         <div role="alert" class="v-alert v-sheet theme--dark v-alert--dense error">
           <div class="v-alert__wrapper"><i aria-hidden="true" class="v-icon notranslate v-alert__icon mdi mdi-alert theme--dark"></i>
             <div class="v-alert__content">
-              You are currently offline. Please connect to the internet to submit
-              stops.
+              You are currently offline. You must log in to create stops.
             </div>
           </div>
         </div>