@7365admin1/layer-common 4.2.2-staging.266 → 4.2.2-staging.268

package/components/Input/DateTimePicker.vue

@@ -1,42 +1,54 @@
 <template>
-  <div class="d-flex flex-column">
-    <v-text-field
-      v-bind="$attrs"
-      class="filter-field"
-      ref="dateTimePickerRef"
-      :model-value="dateTimeFormattedReadOnly"
-      autocomplete="off"
-      :placeholder="inputPlaceholder"
-      :rules="rules"
-      style="z-index: 10"
-      @click="openDatePicker"
-    >
-      <template #append-inner>
-        <v-icon icon="mdi-calendar" @click.stop="openDatePicker" />
-      </template>
-    </v-text-field>
-    <div class="w-100 d-flex align-end ga-3 hidden-input">
-      <input
-        ref="dateInput"
-        :type="inputType"
-        v-model="dateTime"
-        :min="minValue"
-      />
-    </div>
-  </div>
+  <v-text-field
+    v-bind="$attrs"
+    ref="dateTimePickerRef"
+    class="filter-field"
+    v-model="fieldValue"
+    :type="inputType"
+    :label="placeholder || undefined"
+    :min="minValue"
+    :rules="rules"
+    persistent-placeholder
+    autocomplete="off"
+  />
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { ref, computed } from "vue";
+
+/*
+ * The field the user edits IS the native date input now.
+ *
+ * It used to be two elements: a read-only Vuetify text field for show, and a
+ * zero-height `opacity: 0` native input behind it that `showPicker()` was
+ * called on. That arrangement broke every way a user can enter a date:
+ *
+ *  - TYPING went into Vuetify's own internal copy of the value (the text field
+ *    was bound with `:model-value` and nothing listened for the update), so the
+ *    typed date DISPLAYED and PASSED the required-rule while both models here
+ *    stayed empty - `startDate: ""` went to the API, and nothing could ever be
+ *    Upcoming.
+ *  - PICKING a date drove the invisible input. A partly-filled
+ *    `datetime-local` has an empty value until every segment is set, and the
+ *    segments were invisible, so the picker closed and set nothing.
+ *  - An End Date that was typed stayed invalid for the same reason as the
+ *    first point, so an announcement with a real end date could not be created
+ *    at all.
+ *
+ * One visible native input has the browser's own picker, its own typing, and a
+ * real `v-model`, which is all three fixes.
+ */
 
 const prop = defineProps({
   rules: {
     type: Array as PropType<Array<any>>,
     default: () => [],
   },
+  // Rendered as the field's label: a native date input always draws its own
+  // dd/mm/yyyy segments, so a placeholder would never be seen.
   placeholder: {
     type: String,
-    default: "DD/MM/YYYY, HH:MM AM/PM",
+    default: "",
   },
   dateOnly: {
     type: Boolean,
@@ -48,11 +60,10 @@ const prop = defineProps({
   },
 });
 
-const { formatDateISO8601 } = useUtils();
-const dateTime = defineModel<string | null>({ default: null }); //2025-10-10T13:09 format
-const dateTimeUTC = defineModel<string | null>("utc", { default: null }); // UTC format
+const dateTime = defineModel<string | null>({ default: null }); // 2025-10-10T13:09, local
+const dateTimeUTC = defineModel<string | null>("utc", { default: null }); // ISO 8601, UTC
 
-const dateTimeFormattedReadOnly = ref<string | null>(null);
+const dateTimePickerRef = ref<HTMLInputElement | null>(null);
 const inputType = computed(() => (prop.dateOnly ? "date" : "datetime-local"));
 
 const minValue = computed(() => {
@@ -62,148 +73,49 @@ const minValue = computed(() => {
   }
   return prop.min;
 });
-const inputPlaceholder = computed(
-  () =>
-    prop.placeholder ||
-    (prop.dateOnly ? "MM/DD/YYYY" : "DD/MM/YYYY, HH:MM AM/PM")
-);
-
-const dateInput = ref<HTMLInputElement | null>(null);
-const dateTimePickerRef = ref<HTMLInputElement | null>(null);
-let nativeInput: HTMLInputElement | null = null;
-
-const isInitialLoad = ref(true);
-
-function handleNativeInputClick(e: MouseEvent) {
-  e.stopPropagation();
-  openDatePicker();
-}
-
-function openDatePicker() {
-  setTimeout(() => {
-    dateInput.value?.showPicker?.();
-  }, 0);
-}
 
 function validate() {
   (dateTimePickerRef.value as any)?.validate();
 }
 
-function convertToReadableFormat(dateStr: string): string {
-  if (!dateStr) return "";
-
-  const date = new Date(dateStr);
-  if (Number.isNaN(date.getTime())) return "";
-
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  const year = date.getFullYear();
+const pad = (n: number) => String(n).padStart(2, "0");
 
-  if (prop.dateOnly) {
-    return `${day}/${month}/${year}`;
+// What the native input accepts: `YYYY-MM-DD` or `YYYY-MM-DDTHH:mm`, local time.
+function toInputValue(value: string | null): string {
+  if (!value) return "";
+  if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    return prop.dateOnly ? value : `${value}T00:00`;
   }
-
-  let hours = date.getHours();
-  const minutes = String(date.getMinutes()).padStart(2, "0");
-
-  const ampm = hours >= 12 ? "PM" : "AM";
-  hours = hours % 12;
-  hours = hours ? hours : 12;
-
-  const formattedTime = `${String(hours).padStart(2, "0")}:${minutes} ${ampm}`;
-
-  return `${day}/${month}/${year}, ${formattedTime}`;
-}
-
-function toDateOnlyInputValue(dateStr: string): string {
-  if (!dateStr) return "";
-  if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) return dateStr;
-  const date = new Date(dateStr);
+  const date = new Date(value);
   if (Number.isNaN(date.getTime())) return "";
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
+  const day = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+  return prop.dateOnly
+    ? day
+    : `${day}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
 }
 
-function handleInitialDate() {
-  const dateDefault = dateTime.value;
-  const dateUTC = dateTimeUTC.value;
-  if (dateDefault) {
-    dateTimeFormattedReadOnly.value = convertToReadableFormat(dateDefault);
-    if (prop.dateOnly) {
-      dateTimeUTC.value = toDateOnlyInputValue(dateDefault);
-    } else {
-      const localDate = new Date(dateDefault);
-      dateTimeUTC.value = localDate.toISOString();
-    }
-  } else if (dateUTC) {
-    dateTimeFormattedReadOnly.value = convertToReadableFormat(dateUTC);
-    if (prop.dateOnly) {
-      dateTime.value = toDateOnlyInputValue(dateUTC);
-    } else {
-      const localDate = new Date(dateUTC);
-      dateTime.value = formatDateISO8601(localDate);
-    }
-  } else {
-    dateTimeFormattedReadOnly.value = null;
-  }
+// What the API stores: a date-only field stays `YYYY-MM-DD`, everything else
+// becomes UTC.
+function toUTCValue(value: string | null): string | null {
+  if (!value) return null;
+  if (prop.dateOnly) return toInputValue(value).slice(0, 10) || null;
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  return date.toISOString();
 }
 
-watch(
-  dateTime,
-  (dateVal) => {
-    if (isInitialLoad.value) return; // ignore the first run
-    if (!dateVal) {
-      dateTimeFormattedReadOnly.value = null;
-      dateTimeUTC.value = null;
-      return;
-    }
-
-    dateTimeFormattedReadOnly.value = convertToReadableFormat(dateVal);
-    if (prop.dateOnly) {
-      dateTimeUTC.value = toDateOnlyInputValue(dateVal);
-    } else {
-      const localDate = new Date(dateVal);
-      dateTimeUTC.value = localDate.toISOString();
-    }
-  },
-  { immediate: false }
-);
-
-watch(
-  dateTimeUTC,
-  () => {
-    handleInitialDate();
+// The one value the field is bound to. A getter and a setter instead of a pair
+// of watchers: no initial-load flag, no chance of the two models fighting each
+// other, and it behaves the same on the server as in the browser.
+const fieldValue = computed({
+  get: () => toInputValue(dateTime.value || dateTimeUTC.value),
+  set: (value: string | null) => {
+    dateTime.value = value || null;
+    dateTimeUTC.value = toUTCValue(value);
   },
-  { immediate: true }
-);
-
-onMounted(async () => {
-  await nextTick();
-  isInitialLoad.value = false;
-  // Wait until Vuetify renders its internal input
-  nativeInput = (dateTimePickerRef.value as any)?.$el?.querySelector(
-    "input"
-  );
-  if (nativeInput) {
-    nativeInput.addEventListener("click", handleNativeInputClick);
-  }
-});
-
-onBeforeUnmount(() => {
-  nativeInput?.removeEventListener("click", handleNativeInputClick);
-  nativeInput = null;
 });
 
 defineExpose({
   validate,
 });
 </script>
-
-<style scoped>
-.hidden-input {
-  opacity: 0;
-  height: 0;
-}
-</style>

package/components/VehicleForm.vue

@@ -411,6 +411,7 @@
 </template>
 
 <script setup lang="ts">
+import { errorConverter } from "../utils/data";
 const prop = defineProps({
   type: {
     type: String as PropType<TVehicleType | "seasonpass">,
@@ -865,12 +866,11 @@ async function submit() {
     // A refused create is fail-closed on the server and its message names the
     // camera that would not take the plate. `$fetch` puts it on `data`, `ofetch`
     // on `response._data`; reading only one of them dropped the reason.
-    errorMessage.value =
-      error?.data?.message ||
-      error?.response?._data?.message ||
-      `Failed to ${
-        prop.mode === "add" ? "add" : "update"
-      } vehicle. Please try again.`;
+    // `errorConverter` reads both shapes and, when the failure never reached
+    // the API at all (a gateway 502 answers with HTML, a dropped connection
+    // with nothing), returns a plain sentence instead of ofetch's
+    // `[POST] "/api/vehicles": 502`.
+    errorMessage.value = errorConverter(error);
   } finally {
     processing.value = false;
   }

package/components/VehicleManagement.vue

@@ -210,6 +210,11 @@ import {
   vehiclePlateActions,
   type VehicleActionKey,
 } from '../utils/vehicle-actions';
+// The app-wide error mapper. A gateway 502 answers with an HTML page, not a
+// JSON API error, so reading `_data.message` and then falling back to
+// `error.message` put ofetch's own developer string in the delete dialog:
+// `[PUT] "/api/vehicles/6a9691f25648d7633171c9e3": 502`.
+import { errorConverter } from '../utils/data';
 
 
 
@@ -289,21 +294,6 @@ function closeActionDialog(key: "approveVehicle" | "restoreVehicle" | "updateVeh
   actionError.value = "";
 }
 
-/**
- * The server's own sentence, or a plain fallback.
- *
- * `error.response._data` is undefined on a network failure, so reading it
- * unguarded threw out of the catch and the operator saw nothing at all.
- */
-function readServerMessage(error: any, fallback: string) {
-  return (
-    error?.response?._data?.message ||
-    error?.data?.message ||
-    error?.message ||
-    fallback
-  );
-}
-
 function showMessage(msg: string, color: string) {
   message.value = msg;
   messageColor.value = color;
@@ -566,7 +556,7 @@ async function submitDelete() {
     // request is refused. Say so. This used to assign to `message` WITHOUT
     // raising the snackbar - and `error.response._data` throws on a network
     // error - so a refused delete showed the operator nothing at all.
-    deleteError.value = readServerMessage(error, "Failed to delete vehicle.");
+    deleteError.value = errorConverter(error);
     // The dialog stays open and the row stays in the table - nothing is removed
     // optimistically, so what is on screen still matches the database.
   } finally {
@@ -595,7 +585,7 @@ async function submitRestore() {
     showMessage(res.message, "success");
     await getVehiclesRefresh();
   } catch (error: any) {
-    actionError.value = readServerMessage(error, "Failed to restore vehicle.");
+    actionError.value = errorConverter(error);
   } finally {
     restoringVehicle.value = false;
   }
@@ -642,7 +632,7 @@ async function submitUpdateType() {
     showMessage(res.message, "success");
     await getVehiclesRefresh();
   } catch (error: any) {
-    actionError.value = readServerMessage(error, "Failed to update vehicle type.");
+    actionError.value = errorConverter(error);
   } finally {
     updatingType.value = false;
   }
@@ -667,7 +657,7 @@ async function submitApprove() {
     showMessage(res.message, "success");
     await getVehiclesRefresh();
   } catch (error: any) {
-    actionError.value = readServerMessage(error, "Failed to approve vehicle.");
+    actionError.value = errorConverter(error);
   } finally {
     approvingVehicle.value = false;
   }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.2.2-staging.266",
+  "version": "4.2.2-staging.268",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/data.ts

@@ -1,33 +1,113 @@
+/**
+ * The app-wide "turn a failed request into a sentence" helper. 29 call sites in
+ * this layer alone, so every module gets whatever this returns.
+ *
+ * It only ever understood a JSON API error - `{ message: "..." }` from our own
+ * Express error handler. Anything else fell through to a developer string. A
+ * gateway 502 put this in front of an operator, verbatim, inside the delete
+ * dialog:
+ *
+ *     [PUT] "/api/vehicles/6a9691f25648d7633171c9e3": 502
+ *
+ * That is ofetch's own `error.message`. It names an internal route and a record
+ * id, and tells the person nothing they can do. nginx and Cloudflare answer
+ * with HTML, not JSON, so `_data` has no `.message` at all - and on a dropped
+ * connection there is no `response` either.
+ *
+ * The rules below, in order:
+ *   1. our own API said something -> say exactly that, unchanged. This is the
+ *      path every working screen already takes and it must not move.
+ *   2. otherwise -> a plain sentence chosen from the status.
+ *   3. never -> HTML, a JSON dump, an ofetch `[METHOD] "url": status` string,
+ *      or a raw object.
+ */
+
+/** ofetch builds `[GET] "/api/thing": 502 Bad Gateway`. Never show it. */
+const OFETCH_MESSAGE = /^\[[A-Z]+\]\s+"/;
+
+/** A body that is a document, not an API error. */
+const LOOKS_LIKE_HTML = /^\s*(<!doctype|<html|<)/i;
+
+const GENERIC =
+  "Something went wrong. Please try again or contact support if the problem persists.";
+
+/**
+ * The server's own sentence, if there is one that is safe to show.
+ *
+ * Returns `""` when the body is not one of ours - an HTML error page, a JSON
+ * object with no `message`, or an empty response.
+ */
+function apiMessage(error: any): string {
+  const data = error?.response?._data ?? error?.data ?? error?._data;
+
+  const candidate =
+    typeof data === "string" ? data : (data?.message ?? data?.error);
+
+  if (typeof candidate !== "string") return "";
+
+  const text = candidate.trim();
+  if (!text) return "";
+  if (LOOKS_LIKE_HTML.test(text)) return "";
+  // A whole HTML page that starts with whitespace/JSON-ish noise still has no
+  // business on screen; anything this long is a document, not a message.
+  if (text.length > 400) return "";
+
+  return text;
+}
+
+/** A plain sentence for a request that failed without telling us anything. */
+function sentenceForStatus(status: number | null): string {
+  if (status === null) {
+    // No response at all: DNS, a dropped connection, a cancelled request.
+    return "Could not reach the server. Check your internet connection and try again.";
+  }
+  if (status === 401) return "Your session has expired. Please sign in again.";
+  if (status === 403) {
+    return "You do not have permission to do this. Ask your iService365 administrator for access.";
+  }
+  if (status === 404) return "That record no longer exists. Refresh the page and try again.";
+  if (status === 408 || status === 504) {
+    return "The server took too long to answer. Please try again in a few moments.";
+  }
+  if (status === 429) return "Too many attempts in a short time. Please wait a moment and try again.";
+  if (status === 502 || status === 503) {
+    return "The server is temporarily unavailable. Please try again in a few moments.";
+  }
+  if (status >= 500) {
+    return "The server could not complete this request. Please try again, and contact support if it keeps happening.";
+  }
+  return GENERIC;
+}
+
 export const errorConverter = (data: any): string => {
-  let error =
-    "Something went wrong. Please try again or contact support if the problem persists.";
-
-  if (data?.response) {
-    console.log("errorConverter response: ", data.response);
-    if (
-      data.response.status == 400 ||
-      data.response.status == 500 ||
-      data.response.status == 502 ||
-      (data.response.status == 404 && data.response._data.message)
-    ) {
-      if (data.response._data) {
-        return (error = data.response._data.message || data.response._data);
-      }
-    } else if (data.response._data) {
-      return (error = data.response._data.message || data.response._data);
-    } else if (data.response.status == 404) {
-      return "Server Endpoint Not Found";
-    } else if (data.response.status == 502) {
-      return "The server is temporarily unavailable. Please try again in a few moments.";
-    }
-    error = `Error ${data.response.status}: ${JSON.stringify(
-      data.response._data
-    )}`;
-  } else if (data?.message) {
-    console.log("converter: ", data);
-    error = data?.message;
+  // 1. Our own API's sentence wins, whatever the status is. Unchanged
+  //    behaviour for every screen that works today.
+  const fromApi = apiMessage(data);
+  if (fromApi) return fromApi;
+
+  // 2. No usable body. Decide from the status alone.
+  const status =
+    data?.response?.status ?? data?.statusCode ?? data?.status ?? null;
+
+  if (typeof status === "number") return sentenceForStatus(status);
+
+  // 3. No status either. An ofetch error with no response means the request
+  //    never completed at all - DNS, a dropped connection, a cancelled
+  //    request - and its `message` is the developer string that leaked.
+  const message = typeof data?.message === "string" ? data.message.trim() : "";
+
+  if (OFETCH_MESSAGE.test(message) || data?.name === "FetchError") {
+    return sentenceForStatus(null);
+  }
+
+  // 4. A plain `throw new Error("...")` from our own code. Several of those are
+  //    written FOR the toast (see `findServiceProviderIdBySite` below), so they
+  //    still pass through unchanged.
+  if (message && message.length <= 400 && !LOOKS_LIKE_HTML.test(message)) {
+    return message;
   }
-  return error;
+
+  return GENERIC;
 };
 
 /**