add currency setting support (UI)

backend/app/api/v1/v1_ctrl_group.go

@@ -2,6 +2,7 @@ package v1
 
 import (
 	"net/http"
+	"strings"
 	"time"
 
 	"github.com/hay-kot/homebox/backend/internal/repo"
@@ -36,7 +37,7 @@ func (ctrl *V1Controller) HandleGroupGet() http.HandlerFunc {
 
 		group, err := ctrl.svc.Group.Get(ctx)
 		if err != nil {
-			log.Error().Err(err).Msg("failed to get group")
+			log.Err(err).Msg("failed to get group")
 			server.RespondError(w, http.StatusInternalServerError, err)
 			return
 		}
@@ -67,10 +68,11 @@ func (ctrl *V1Controller) HandleGroupUpdate() http.HandlerFunc {
 
 		group, err := ctrl.svc.Group.UpdateGroup(ctx, data)
 		if err != nil {
+			log.Err(err).Msg("failed to update group")
 			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)
 	}
 }

backend/internal/services/service_group.go

@@ -2,6 +2,7 @@ package services
 
 import (
 	"errors"
+	"strings"
 	"time"
 
 	"github.com/hay-kot/homebox/backend/internal/repo"
@@ -25,6 +26,8 @@ func (svc *GroupService) UpdateGroup(ctx Context, data repo.GroupUpdate) (repo.G
 		return repo.Group{}, errors.New("currency cannot be empty")
 	}
 
+	data.Currency = strings.ToLower(data.Currency)
+
 	return svc.repos.Groups.GroupUpdate(ctx.Context, ctx.GID, data)
 }
 

frontend/pages/profile.vue

@@ -11,6 +11,60 @@
     title: "Homebox | Profile",
   });
 
+  const api = useUserApi();
+  const confirm = useConfirm();
+  const notify = useNotifier();
+
+  // Currency Selection
+  const currency = ref<Currency>(currencies[0]);
+
+  watch(currency, () => {
+    if (group.value) {
+      group.value.currency = currency.value.code;
+    }
+
+    console.log(group.value);
+  });
+
+  const currencyExample = computed(() => {
+    const formatter = new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: currency.value ? currency.value.code : "USD",
+    });
+
+    return formatter.format(1000);
+  });
+
+  const { data: group } = useAsyncData(async () => {
+    const { data } = await api.group.get();
+    return data;
+  });
+
+  // Sync Initial Currency
+  watch(group, () => {
+    if (group.value) {
+      const found = currencies.find(c => c.code === group.value.currency);
+      if (found) {
+        currency.value = found;
+      }
+    }
+  });
+
+  async function updateGroup() {
+    const { data, error } = await api.group.update({
+      name: group.value.name,
+      currency: group.value.currency,
+    });
+
+    if (error) {
+      notify.error("Failed to update group");
+      return;
+    }
+
+    group.value = data;
+    notify.success("Group updated");
+  }
+
   const pubApi = usePublicApi();
   const { data: status } = useAsyncData(async () => {
     const { data } = await pubApi.status();
@@ -35,10 +89,6 @@
     ] as Detail[];
   });
 
-  const api = useUserApi();
-  const confirm = useConfirm();
-  const notify = useNotifier();
-
   async function deleteProfile() {
     const result = await confirm.open(
       "Are you sure you want to delete your account? If you are the last member in your group all your data will be deleted. This action cannot be undone."
@@ -113,18 +163,6 @@
     passwordChange.current = "";
     passwordChange.loading = false;
   }
-
-  // Currency Selection
-  const currency = ref<Currency>(currencies[1]);
-
-  const currencyExample = computed(() => {
-    const formatter = new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: currency.value ? currency.value.code : "USD",
-    });
-
-    return formatter.format(1000);
-  });
 </script>
 
 <template>
@@ -185,9 +223,13 @@
           </BaseSectionHeader>
         </template>
 
-        <div class="p-5 pt-0 max-w-lg">
+        <div v-if="group" class="p-5 pt-0">
-          <FormSelect v-model="currency" label="Currency Format" :items="currencies" />
+          <FormSelect v-model="currency" value="code" label="Currency Format" :items="currencies" />
           <p class="m-2 text-sm">Example: {{ currencyExample }}</p>
+
+          <div class="mt-4 flex justify-end">
+            <BaseButton @click="updateGroup"> Update Group </BaseButton>
+          </div>
         </div>
       </BaseCard>