From 6bd7842ac6dd80caf8e86bdff46ec2f56e1efcf9 Mon Sep 17 00:00:00 2001
From: Will Sheldon <114631109+wssheldon@users.noreply.github.com>
Date: Wed, 29 Nov 2023 17:39:03 -0800
Subject: [PATCH] Add SavingState and useSavingState composable and component

---
 .../dispatch/src/components/SavingState.vue   | 51 +++++++++++++++++++
 .../src/composables/useSavingState.ts         | 25 +++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 src/dispatch/static/dispatch/src/components/SavingState.vue
 create mode 100644 src/dispatch/static/dispatch/src/composables/useSavingState.ts

diff --git a/src/dispatch/static/dispatch/src/components/SavingState.vue b/src/dispatch/static/dispatch/src/components/SavingState.vue
new file mode 100644
index 000000000000..2732da330f4c
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/components/SavingState.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <v-progress-circular
+      v-if="saving"
+      indeterminate
+      size="14"
+      color="grey-lighten-1"
+      class="pl-6"
+    />
+    <v-icon size="x-small" class="pl-4" v-else>mdi-check</v-icon>
+    <span class="pl-4 dispatch-text-subtitle">updated {{ formattedUpdatedAt }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, watchEffect } from "vue"
+import { formatDistanceToNow, parseISO } from "date-fns"
+import { useSavingState } from "@/composables/useSavingState"
+
+const { saving } = useSavingState()
+let formattedUpdatedAt = ref("")
+let updatedAtRef = ref("")
+
+watchEffect(() => {
+  if (updatedAtRef.value) {
+    formattedUpdatedAt.value = formatDistanceToNow(parseISO(updatedAtRef.value)) + " ago"
+  }
+})
+
+watch(saving, (newVal, oldVal) => {
+  if (oldVal === true && newVal === false) {
+    updatedAtRef.value = new Date().toISOString()
+  }
+})
+
+const props = defineProps({
+  updatedAt: {
+    type: String,
+    required: true,
+  },
+})
+
+watch(
+  () => props.updatedAt,
+  (newVal) => {
+    if (newVal) {
+      updatedAtRef.value = newVal
+    }
+  }
+)
+</script>
diff --git a/src/dispatch/static/dispatch/src/composables/useSavingState.ts b/src/dispatch/static/dispatch/src/composables/useSavingState.ts
new file mode 100644
index 000000000000..f8c8de3f9b52
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/composables/useSavingState.ts
@@ -0,0 +1,25 @@
+import { computed, ComputedRef } from "vue"
+import { useStore } from "vuex"
+import { Store } from "vuex"
+import { CaseState } from "@/store/case"
+
+interface UseSavingStateReturns {
+  saving: ComputedRef<boolean>
+  // eslint-disable-next-line no-unused-vars
+  setSaving: (value: boolean) => void
+}
+
+export function useSavingState(): UseSavingStateReturns {
+  const store = useStore<Store<{ case: CaseState }>>()
+
+  const saving = computed(() => store.state.case_management.selected.saving)
+
+  const setSaving = (value: boolean) => {
+    store.commit("case_management/SET_SELECTED_SAVING", value)
+  }
+
+  return {
+    saving,
+    setSaving,
+  }
+}