use group settings for format currency

backend/app/api/v1/v1_ctrl_group.go

@@ -41,6 +41,7 @@ func (ctrl *V1Controller) HandleGroupGet() http.HandlerFunc {
 			server.RespondError(w, http.StatusInternalServerError, err)
 			return
 		}
+		group.Currency = strings.ToUpper(group.Currency) // TODO: Hack to fix the currency enums being lower caseÍ
 
 		server.Respond(w, http.StatusOK, group)
 

frontend/components/global/Currency.vue

@@ -0,0 +1,22 @@
+<template>
+  {{ value }}
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    amount: {
+      type: String,
+      required: true,
+    },
+  });
+
+  const fmt = await useFormatCurrency();
+
+  const value = computed(() => {
+    if (!props.amount || props.amount === "0") {
+      return "";
+    }
+
+    return fmt(props.amount);
+  });
+</script>

frontend/components/global/DetailsSection/DetailsSection.vue

@@ -7,9 +7,8 @@
         </dt>
         <dd class="mt-1 text-sm text-base-content sm:col-span-2 sm:mt-0">
           <slot :name="detail.slot || detail.name" v-bind="{ detail }">
-            <template v-if="detail.type == 'date'">
+            <DateTime v-if="detail.type == 'date'" :date="detail.text" />
-              <DateTime :date="detail.text" />
+            <Currency v-else-if="detail.type == 'currency'" :amount="detail.text" />
-            </template>
             <template v-else>
               {{ detail.text }}
             </template>
@@ -21,11 +20,11 @@
 </template>
 
 <script setup lang="ts">
-  import type { DateDetail, Detail } from "./types";
+  import type { CustomDetail, Detail } from "./types";
 
   defineProps({
     details: {
-      type: Object as () => (Detail | DateDetail)[],
+      type: Object as () => (Detail | CustomDetail)[],
       required: true,
     },
   });

frontend/components/global/DetailsSection/types.ts

@@ -1,15 +1,25 @@
 export type StringLike = string | number | boolean;
 
-export type DateDetail = {
+type BaseDetail = {
   name: string;
-  text: string | Date;
   slot?: string;
-  type: "date";
 };
 
-export type Detail = {
+type DateDetail = BaseDetail & {
-  name: string;
+  type: "date";
+  text: Date | string;
+};
+
+type CurrencyDetail = BaseDetail & {
+  type: "currency";
+  text: string;
+};
+
+export type CustomDetail = DateDetail | CurrencyDetail;
+
+export type Detail = BaseDetail & {
   text: StringLike;
-  slot?: string;
   type?: "text";
 };
+
+export type Details = Array<Detail | CustomDetail>;

frontend/composables/use-formatters.ts

@@ -0,0 +1,21 @@
+const cache = {
+  currency: "",
+};
+
+export function ResetCurrency() {
+  cache.currency = "";
+}
+
+export async function useFormatCurrency() {
+  if (!cache.currency) {
+    const client = useUserApi();
+
+    const { data: group } = await client.group.get();
+
+    if (group) {
+      cache.currency = group.currency;
+    }
+  }
+
+  return (value: number | string) => fmtCurrency(value, cache.currency);
+}

frontend/lib/data/currency.ts

@@ -1,5 +1,7 @@
+export type Codes = "USD" | "EUR" | "GBP" | "JPY";
+
 export type Currency = {
-  code: string;
+  code: Codes;
   local: string;
   symbol: string;
   name: string;

frontend/pages/item/[id]/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { DateDetail, Detail } from "~~/components/global/DetailsSection/types";
+  import { Detail, Details } from "~~/components/global/DetailsSection/types";
   import { ItemAttachment } from "~~/lib/api/types/data-contracts";
 
   definePageMeta({
@@ -145,7 +145,7 @@
   });
 
   const warrantyDetails = computed(() => {
-    const details: (Detail | DateDetail)[] = [
+    const details: Details = [
       {
         name: "Lifetime Warranty",
         text: item.value?.lifetimeWarranty ? "Yes" : "No",
@@ -180,7 +180,7 @@
     return item.value?.purchaseFrom || item.value?.purchasePrice !== "0";
   });
 
-  const purchaseDetails = computed<Array<Detail | DateDetail>>(() => {
+  const purchaseDetails = computed<Details>(() => {
     return [
       {
         name: "Purchase From",
@@ -188,7 +188,8 @@
       },
       {
         name: "Purchase Price",
-        text: item.value?.purchasePrice ? fmtCurrency(item.value.purchasePrice) : "",
+        text: item.value?.purchasePrice || "",
+        type: "currency",
       },
       {
         name: "Purchase Date",
@@ -205,7 +206,7 @@
     return item.value?.soldTo || item.value?.soldPrice !== "0";
   });
 
-  const soldDetails = computed<Array<Detail | DateDetail>>(() => {
+  const soldDetails = computed<Details>(() => {
     return [
       {
         name: "Sold To",
@@ -213,7 +214,8 @@
       },
       {
         name: "Sold Price",
-        text: item.value?.soldPrice ? fmtCurrency(item.value.soldPrice) : "",
+        text: item.value?.soldPrice || "",
+        type: "currency",
       },
       {
         name: "Sold At",

frontend/pages/label/[id].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import type { DateDetail, Detail } from "~~/components/global/DetailsSection/types";
+  import type { CustomDetail, Detail } from "~~/components/global/DetailsSection/types";
 
   definePageMeta({
     middleware: ["auth"],
@@ -23,7 +23,7 @@
     return data;
   });
 
-  const details = computed<(Detail | DateDetail)[]>(() => {
+  const details = computed<(Detail | CustomDetail)[]>(() => {
     const details = [
       {
         name: "Name",

frontend/pages/location/[id].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { Detail, DateDetail } from "~~/components/global/DetailsSection/types";
+  import { Detail, CustomDetail } from "~~/components/global/DetailsSection/types";
 
   definePageMeta({
     middleware: ["auth"],
@@ -23,7 +23,7 @@
     return data;
   });
 
-  const details = computed<(Detail | DateDetail)[]>(() => {
+  const details = computed<(Detail | CustomDetail)[]>(() => {
     const details = [
       {
         name: "Name",

frontend/pages/profile.vue

@@ -219,7 +219,9 @@
           <BaseSectionHeader class="pb-0">
             <Icon name="mdi-accounts" class="mr-2 -mt-1 text-base-600" />
             <span class="text-base-600"> Group Settings </span>
-            <template #description> Shared Group Settings </template>
+            <template #description>
+              Shared Group Settings. You may need to refresh your browser for some settings to apply.
+            </template>
           </BaseSectionHeader>
         </template>