From c97c24201a1e64891221f3809dd1e7b24b8235dc Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Tue, 13 Dec 2022 10:01:48 -0500
Subject: [PATCH 1/3] Convert Admin/JobLock to composition+ts

---
 client/src/components/admin/JobLock.vue | 64 +++++++++++--------------
 1 file changed, 27 insertions(+), 37 deletions(-)

diff --git a/client/src/components/admin/JobLock.vue b/client/src/components/admin/JobLock.vue
index 0ec380e2926..96b0fa4227b 100644
--- a/client/src/components/admin/JobLock.vue
+++ b/client/src/components/admin/JobLock.vue
@@ -1,3 +1,30 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from "vue";
+import axios, { type AxiosError, type AxiosPromise, type AxiosResponse } from "axios";
+import { getAppRoot } from "@/onload/loadConfig";
+
+const jobLock = ref(false);
+const jobLockDisplay = ref(false);
+
+watch(jobLock, (newVal) => {
+    handleJobLock(axios.put(`${getAppRoot()}api/job_lock`, { active: jobLock.value }));
+});
+
+onMounted(() => {
+    handleJobLock(axios.get(`${getAppRoot()}api/job_lock`));
+});
+
+function handleJobLock(axiosPromise: AxiosPromise) {
+    axiosPromise
+        .then((response: AxiosResponse) => {
+            jobLock.value = response.data.active;
+            jobLockDisplay.value = response.data.active;
+        })
+        .catch((error: AxiosError) => {
+            console.error(error);
+        });
+}
+</script>
 <template>
     <b-form-group>
         <b-form-checkbox id="prevent-job-dispatching" v-model="jobLock" switch size="lg">
@@ -6,40 +33,3 @@
         </b-form-checkbox>
     </b-form-group>
 </template>
-
-<script>
-import { getAppRoot } from "onload/loadConfig";
-import axios from "axios";
-
-export default {
-    data() {
-        return {
-            jobLock: false,
-            jobLockDisplay: false,
-        };
-    },
-    watch: {
-        jobLock(newVal) {
-            this.handleJobLock(axios.put(`${getAppRoot()}api/job_lock`, { active: this.jobLock }));
-        },
-    },
-    created() {
-        this.initJobLock();
-    },
-    methods: {
-        initJobLock() {
-            this.handleJobLock(axios.get(`${getAppRoot()}api/job_lock`));
-        },
-        handleJobLock(axiosPromise) {
-            axiosPromise
-                .then((response) => {
-                    this.jobLock = response.data.active;
-                    this.jobLockDisplay = response.data.active;
-                })
-                .catch((error) => {
-                    console.error(error);
-                });
-        },
-    },
-};
-</script>

From e0f4e6064357d42c17b453ad31d76d2a4376f81c Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Tue, 13 Dec 2022 11:17:23 -0500
Subject: [PATCH 2/3] Swap JobLock to use api bindings; bonus fix of disabling
 the form component while the request is happening.

---
 client/src/components/admin/JobLock.vue | 39 ++++++++++++-------------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/client/src/components/admin/JobLock.vue b/client/src/components/admin/JobLock.vue
index 96b0fa4227b..d867519e22e 100644
--- a/client/src/components/admin/JobLock.vue
+++ b/client/src/components/admin/JobLock.vue
@@ -1,35 +1,34 @@
 <script setup lang="ts">
 import { ref, watch, onMounted } from "vue";
-import axios, { type AxiosError, type AxiosPromise, type AxiosResponse } from "axios";
-import { getAppRoot } from "@/onload/loadConfig";
+import { fetcher } from "@/schema";
+import type { FetchArgType } from "openapi-typescript-fetch";
 
 const jobLock = ref(false);
-const jobLockDisplay = ref(false);
+const jobLockUpdating = ref(true);
 
-watch(jobLock, (newVal) => {
-    handleJobLock(axios.put(`${getAppRoot()}api/job_lock`, { active: jobLock.value }));
+const jobLockStatus = fetcher.path("/api/job_lock").method("get").create();
+const jobLockUpdate = fetcher.path("/api/job_lock").method("put").create();
+
+watch(jobLock, async (newVal) => {
+    jobLockUpdating.value = true;
+    const { data } = await jobLockUpdate({ active: jobLock.value } as FetchArgType<typeof jobLockUpdate>);
+    jobLock.value = data.active;
+    jobLockUpdating.value = false;
 });
 
-onMounted(() => {
-    handleJobLock(axios.get(`${getAppRoot()}api/job_lock`));
+onMounted(async () => {
+    // TODO: see if we can upstream an optional arg when no params are required?
+    // i.e. jobLockStatus() instead of jobLockStatus({})
+    const response = await jobLockStatus({});
+    jobLock.value = response.data.active;
+    jobLockUpdating.value = false;
 });
-
-function handleJobLock(axiosPromise: AxiosPromise) {
-    axiosPromise
-        .then((response: AxiosResponse) => {
-            jobLock.value = response.data.active;
-            jobLockDisplay.value = response.data.active;
-        })
-        .catch((error: AxiosError) => {
-            console.error(error);
-        });
-}
 </script>
 <template>
     <b-form-group>
-        <b-form-checkbox id="prevent-job-dispatching" v-model="jobLock" switch size="lg">
+        <b-form-checkbox id="prevent-job-dispatching" v-model="jobLock" :disabled="jobLockUpdating" switch size="lg">
             Job dispatching is currently
-            <strong>{{ jobLockDisplay ? "locked" : "unlocked" }}</strong>
+            <strong>{{ jobLock ? "locked" : "unlocked" }}</strong>
         </b-form-checkbox>
     </b-form-group>
 </template>

From a0c5a6b9afa0c7e10e5ff132b531d6c8ac39274b Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Tue, 13 Dec 2022 11:23:42 -0500
Subject: [PATCH 3/3] Unnecessary; left this in tinkering.

---
 client/src/components/admin/JobLock.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/components/admin/JobLock.vue b/client/src/components/admin/JobLock.vue
index d867519e22e..237231bdd96 100644
--- a/client/src/components/admin/JobLock.vue
+++ b/client/src/components/admin/JobLock.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, onMounted } from "vue";
 import { fetcher } from "@/schema";
-import type { FetchArgType } from "openapi-typescript-fetch";
 
 const jobLock = ref(false);
 const jobLockUpdating = ref(true);
@@ -11,7 +10,7 @@ const jobLockUpdate = fetcher.path("/api/job_lock").method("put").create();
 
 watch(jobLock, async (newVal) => {
     jobLockUpdating.value = true;
-    const { data } = await jobLockUpdate({ active: jobLock.value } as FetchArgType<typeof jobLockUpdate>);
+    const { data } = await jobLockUpdate({ active: jobLock.value });
     jobLock.value = data.active;
     jobLockUpdating.value = false;
 });