feat: new-card-design (#196)

* card option 1

* UI updates for item card

* fix test error

* fix pagination issues on backend

* add integer support

* remove date from cards

* implement pagination for search page

* resolve search state problems

* other fixes

* fix broken datetime

* attempt to fix scroll behavior

frontend/composables/use-formatters.ts

@@ -2,12 +2,12 @@ const cache = {
   currency: "",
 };
 
-export function ResetCurrency() {
+export function resetCurrency() {
   cache.currency = "";
 }
 
 export async function useFormatCurrency() {
-  if (!cache.currency) {
+  if (cache.currency === "") {
     const client = useUserApi();
 
     const { data: group } = await client.group.get();
@@ -19,3 +19,59 @@ export async function useFormatCurrency() {
 
   return (value: number | string) => fmtCurrency(value, cache.currency);
 }
+
+export type DateTimeFormat = "relative" | "long" | "short" | "human";
+
+function ordinalIndicator(num: number) {
+  if (num > 3 && num < 21) return "th";
+  switch (num % 10) {
+    case 1:
+      return "st";
+    case 2:
+      return "nd";
+    case 3:
+      return "rd";
+    default:
+      return "th";
+  }
+}
+
+export function fmtDate(value: string | Date, fmt: DateTimeFormat = "human"): string {
+  const months = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+
+  const dt = typeof value === "string" ? new Date(value) : value;
+  if (!dt) {
+    return "";
+  }
+
+  if (!validDate(dt)) {
+    return "";
+  }
+
+  switch (fmt) {
+    case "relative":
+      return useTimeAgo(dt).value + useDateFormat(dt, " (MM-DD-YYYY)").value;
+    case "long":
+      return useDateFormat(dt, "MM-DD-YYYY (dddd)").value;
+    case "short":
+      return useDateFormat(dt, "MM-DD-YYYY").value;
+    case "human":
+      // January 1st, 2021
+      return `${months[dt.getMonth()]} ${dt.getDate()}${ordinalIndicator(dt.getDate())}, ${dt.getFullYear()}`;
+    default:
+      return "";
+  }
+}

frontend/composables/use-route-params.ts

@@ -1,20 +1,35 @@
+import { useRouteQuery as useRouteQueryBase } from "@vueuse/router";
+
 /* eslint no-redeclare: 0 */
 import { WritableComputedRef } from "vue";
 
 export function useRouteQuery(q: string, def: string[]): WritableComputedRef<string[]>;
 export function useRouteQuery(q: string, def: string): WritableComputedRef<string>;
 export function useRouteQuery(q: string, def: boolean): WritableComputedRef<boolean>;
+export function useRouteQuery(q: string, def: number): WritableComputedRef<number>;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useRouteQuery(q: string, def: any): WritableComputedRef<any> {
   const route = useRoute();
   const router = useRouter();
 
+  const v = useRouteQueryBase(q, def);
+
+  const first = computed<string>(() => {
+    const qv = route.query[q];
+    if (Array.isArray(qv)) {
+      return qv[0]?.toString() || def;
+    }
+    return qv?.toString() || def;
+  });
+
+  onMounted(() => {
+    if (route.query[q] === undefined) {
+      v.value = def;
+    }
+  });
+
   switch (typeof def) {
     case "string":
-      if (route.query[q] === undefined) {
-        router.push({ query: { ...route.query, [q]: def } });
-      }
-
       return computed({
         get: () => {
           const qv = route.query[q];
@@ -45,16 +60,21 @@ export function useRouteQuery(q: string, def: any): WritableComputedRef<any> {
     case "boolean":
       return computed({
         get: () => {
-          const qv = route.query[q];
-          if (Array.isArray(qv)) {
-            return qv[0] === "true";
-          }
-          return qv === "true";
+          return first.value === "true";
         },
         set: v => {
           const query = { ...route.query, [q]: `${v}` };
           router.push({ query });
         },
       });
+    case "number":
+      return computed({
+        get: () => parseInt(first.value, 10),
+        set: nv => {
+          v.value = nv.toString();
+        },
+      });
   }
+
+  throw new Error("Invalid type");
 }