From e0116417f7012a4b2f26e6c91f62ca42f21a8de2 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sat, 15 Oct 2022 12:07:40 -0800
Subject: [PATCH] use group settings for format currency

---
 backend/app/api/v1/v1_ctrl_group.go           |  1 +
 frontend/components/global/Currency.vue       | 22 +++++++++++++++++++
 .../global/DetailsSection/DetailsSection.vue  |  9 ++++----
 .../components/global/DetailsSection/types.ts | 22 ++++++++++++++-----
 frontend/composables/use-formatters.ts        | 21 ++++++++++++++++++
 frontend/lib/data/currency.ts                 |  4 +++-
 frontend/pages/item/[id]/index.vue            | 14 +++++++-----
 frontend/pages/label/[id].vue                 |  4 ++--
 frontend/pages/location/[id].vue              |  4 ++--
 frontend/pages/profile.vue                    |  4 +++-
 10 files changed, 82 insertions(+), 23 deletions(-)
 create mode 100644 frontend/components/global/Currency.vue
 create mode 100644 frontend/composables/use-formatters.ts

diff --git a/backend/app/api/v1/v1_ctrl_group.go b/backend/app/api/v1/v1_ctrl_group.go
index ac8ce79..e8bd796 100644
--- a/backend/app/api/v1/v1_ctrl_group.go
+++ b/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)
 
diff --git a/frontend/components/global/Currency.vue b/frontend/components/global/Currency.vue
new file mode 100644
index 0000000..9a2c561
--- /dev/null
+++ b/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>
diff --git a/frontend/components/global/DetailsSection/DetailsSection.vue b/frontend/components/global/DetailsSection/DetailsSection.vue
index f8ee495..6b083e3 100644
--- a/frontend/components/global/DetailsSection/DetailsSection.vue
+++ b/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 :date="detail.text" />
-            </template>
+            <DateTime v-if="detail.type == 'date'" :date="detail.text" />
+            <Currency v-else-if="detail.type == 'currency'" :amount="detail.text" />
             <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,
     },
   });
diff --git a/frontend/components/global/DetailsSection/types.ts b/frontend/components/global/DetailsSection/types.ts
index ab4364c..6d2f702 100644
--- a/frontend/components/global/DetailsSection/types.ts
+++ b/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 = {
-  name: string;
+type DateDetail = BaseDetail & {
+  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>;
diff --git a/frontend/composables/use-formatters.ts b/frontend/composables/use-formatters.ts
new file mode 100644
index 0000000..9978e3c
--- /dev/null
+++ b/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);
+}
diff --git a/frontend/lib/data/currency.ts b/frontend/lib/data/currency.ts
index ba4fff2..8643d96 100644
--- a/frontend/lib/data/currency.ts
+++ b/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;
diff --git a/frontend/pages/item/[id]/index.vue b/frontend/pages/item/[id]/index.vue
index ae22d0c..4c3a172 100644
--- a/frontend/pages/item/[id]/index.vue
+++ b/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",
diff --git a/frontend/pages/label/[id].vue b/frontend/pages/label/[id].vue
index 414c3ed..4e207f9 100644
--- a/frontend/pages/label/[id].vue
+++ b/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",
diff --git a/frontend/pages/location/[id].vue b/frontend/pages/location/[id].vue
index 0fcf09b..a8c97ab 100644
--- a/frontend/pages/location/[id].vue
+++ b/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",
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
index 990eff2..7245cc7 100644
--- a/frontend/pages/profile.vue
+++ b/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>