major claude changes

src/pages/customer/tank/edit.vue

@@ -85,8 +85,9 @@
   <Footer />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import axios from 'axios'
 import authHeader from '../../../services/auth.header'
 import Footer from '../../../layouts/footers/footer.vue'
@@ -100,88 +101,89 @@ interface TankFormData {
   fill_location: string;
 }
 
-export default defineComponent({
-  name: 'TankEdit',
-  components: {
-    Footer,
-  },
-  data() {
-    return {
-      user: null as any,
-      customer: {} as any,
-      // --- REFACTORED: Simplified, flat form object ---
-      TankForm: {
-        last_tank_inspection: null,
-        tank_status: true,
-        outside_or_inside: true,
-        tank_size: 0,
-        fill_location: '',
-      } as TankFormData,
-    }
-  },
-  created() {
-    this.userStatus();
-    const customerId = this.$route.params.id;
-    this.getCustomer(customerId);
-    this.getCustomerDescription(customerId);
-    this.getTank(customerId);
-  },
-  methods: {
-    userStatus() {
-      const path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
-      axios.get(path, { withCredentials: true, headers: authHeader() })
-        .then((response: any) => {
-          if (response.data.ok) {
-            this.user = response.data.user;
-          }
-        })
-        .catch(() => { this.user = null; });
-    },
-    getCustomer(userid: any) {
-      const path = `${import.meta.env.VITE_BASE_URL}/customer/${userid}`;
-      axios.get(path, { headers: authHeader() })
-        .then((response: any) => {
-          this.customer = response.data;
-        });
-    },
-    getCustomerDescription(userid: any) {
-      const path = `${import.meta.env.VITE_BASE_URL}/customer/description/${userid}`;
-      axios.get(path, { headers: authHeader() })
-        .then((response: any) => {
-          // Only update fill_location if the response has it
-          if (response.data && response.data.fill_location) {
-            this.TankForm.fill_location = response.data.fill_location;
-          }
-        });
-    },
-    getTank(customer_id: any) {
-      const path = `${import.meta.env.VITE_BASE_URL}/customer/tank/${customer_id}`;
-      axios.get(path, { withCredentials: true, headers: authHeader() })
-        .then((response: any) => {
-          if (response.data) {
-            // Update the form model with data from the tank endpoint
-            this.TankForm.last_tank_inspection = response.data.last_tank_inspection;
-            this.TankForm.tank_status = response.data.tank_status;
-            this.TankForm.outside_or_inside = response.data.outside_or_inside;
-            this.TankForm.tank_size = response.data.tank_size;
-          }
-        });
-    },
-    editTank(payload: TankFormData) {
-      const path = `${import.meta.env.VITE_BASE_URL}/customer/edit/tank/${this.$route.params.id}`;
-      axios.put(path, payload, { withCredentials: true, headers: authHeader() })
-        .then((response: any) => {
-          if (response.data.ok) {
-            this.$router.push({ name: "customerProfile", params: { id: this.customer.id } });
-          } else {
-            console.error("Failed to edit tank:", response.data.error);
-          }
-        });
-    },
-    onSubmit() {
-      // The payload is simply the entire form object now
-      this.editTank(this.TankForm);
-    },
-  },
+const route = useRoute()
+const router = useRouter()
+
+// Reactive data
+const user = ref(null as any)
+const customer = ref({} as any)
+// --- REFACTORED: Simplified, flat form object ---
+const TankForm = ref({
+  last_tank_inspection: null,
+  tank_status: true,
+  outside_or_inside: true,
+  tank_size: 0,
+  fill_location: '',
+} as TankFormData)
+
+// Functions
+const userStatus = () => {
+  const path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+  axios.get(path, { withCredentials: true, headers: authHeader() })
+    .then((response: any) => {
+      if (response.data.ok) {
+        user.value = response.data.user;
+      }
+    })
+    .catch(() => { user.value = null; });
+}
+
+const getCustomer = (userid: any) => {
+  const path = `${import.meta.env.VITE_BASE_URL}/customer/${userid}`;
+  axios.get(path, { headers: authHeader() })
+    .then((response: any) => {
+      customer.value = response.data;
+    });
+}
+
+const getCustomerDescription = (userid: any) => {
+  const path = `${import.meta.env.VITE_BASE_URL}/customer/description/${userid}`;
+  axios.get(path, { headers: authHeader() })
+    .then((response: any) => {
+      // Only update fill_location if the response has it
+      if (response.data && response.data.fill_location) {
+        TankForm.value.fill_location = response.data.fill_location;
+      }
+    });
+}
+
+const getTank = (customer_id: any) => {
+  const path = `${import.meta.env.VITE_BASE_URL}/customer/tank/${customer_id}`;
+  axios.get(path, { withCredentials: true, headers: authHeader() })
+    .then((response: any) => {
+      if (response.data) {
+        // Update the form model with data from the tank endpoint
+        TankForm.value.last_tank_inspection = response.data.last_tank_inspection;
+        TankForm.value.tank_status = response.data.tank_status;
+        TankForm.value.outside_or_inside = response.data.outside_or_inside;
+        TankForm.value.tank_size = response.data.tank_size;
+      }
+    });
+}
+
+const editTank = (payload: TankFormData) => {
+  const path = `${import.meta.env.VITE_BASE_URL}/customer/edit/tank/${route.params.id}`;
+  axios.put(path, payload, { withCredentials: true, headers: authHeader() })
+    .then((response: any) => {
+      if (response.data.ok) {
+        router.push({ name: "customerProfile", params: { id: customer.value.id } });
+      } else {
+        console.error("Failed to edit tank:", response.data.error);
+      }
+    });
+}
+
+const onSubmit = () => {
+  // The payload is simply the entire form object now
+  editTank(TankForm.value);
+}
+
+// Lifecycle
+onMounted(() => {
+  userStatus();
+  const customerId = route.params.id;
+  getCustomer(customerId);
+  getCustomerDescription(customerId);
+  getTank(customerId);
 })
 </script>