From a6e3989aeedcddee5f0cef1a7917a246fc8caf9f Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sun, 9 Oct 2022 05:03:24 -0800
Subject: [PATCH] fix: ui/ux issues (#34)

* fix select first bug for creation

* add link to header

* fix date and display errors

* drop group name requirement
---
 Taskfile.yml                              |  3 ++-
 backend/app/api/docs/docs.go              |  3 ---
 backend/app/api/docs/swagger.json         |  3 ---
 backend/app/api/docs/swagger.yaml         |  2 --
 backend/internal/services/service_user.go |  4 +---
 frontend/components/App/Header.vue        | 12 +++++++-----
 frontend/components/Item/CreateModal.vue  | 21 +++++++++++----------
 frontend/components/global/DateTime.vue   |  6 +-----
 frontend/lib/api/__test__/public.test.ts  |  1 -
 frontend/lib/api/__test__/test-utils.ts   |  2 +-
 frontend/lib/api/types/data-contracts.ts  |  1 -
 frontend/pages/index.vue                  |  5 +----
 frontend/pages/item/[id]/index.vue        | 16 +++++++++-------
 13 files changed, 33 insertions(+), 46 deletions(-)

diff --git a/Taskfile.yml b/Taskfile.yml
index 88146c3..0b8049e 100644
--- a/Taskfile.yml
+++ b/Taskfile.yml
@@ -23,7 +23,8 @@ tasks:
         python3 ./scripts/process-types.py ./frontend/lib/api/types/data-contracts.ts
     sources:
       - "./backend/app/api/**/*"
-      - "./backend/app/internal/types/**/*"
+      - "./backend/internal/repo/**/*"
+      - "./backend/internal/services/**/*"
       - "./scripts/process-types.py"
     generates:
       - "./frontend/lib/api/types/data-contracts.ts"
diff --git a/backend/app/api/docs/docs.go b/backend/app/api/docs/docs.go
index 156d845..784c591 100644
--- a/backend/app/api/docs/docs.go
+++ b/backend/app/api/docs/docs.go
@@ -1531,9 +1531,6 @@ const docTemplate = `{
                 "email": {
                     "type": "string"
                 },
-                "groupName": {
-                    "type": "string"
-                },
                 "name": {
                     "type": "string"
                 },
diff --git a/backend/app/api/docs/swagger.json b/backend/app/api/docs/swagger.json
index cec1d74..2e6dea6 100644
--- a/backend/app/api/docs/swagger.json
+++ b/backend/app/api/docs/swagger.json
@@ -1523,9 +1523,6 @@
                 "email": {
                     "type": "string"
                 },
-                "groupName": {
-                    "type": "string"
-                },
                 "name": {
                     "type": "string"
                 },
diff --git a/backend/app/api/docs/swagger.yaml b/backend/app/api/docs/swagger.yaml
index ea65a28..ae460a6 100644
--- a/backend/app/api/docs/swagger.yaml
+++ b/backend/app/api/docs/swagger.yaml
@@ -322,8 +322,6 @@ definitions:
     properties:
       email:
         type: string
-      groupName:
-        type: string
       name:
         type: string
       password:
diff --git a/backend/internal/services/service_user.go b/backend/internal/services/service_user.go
index 93008c8..688821a 100644
--- a/backend/internal/services/service_user.go
+++ b/backend/internal/services/service_user.go
@@ -28,7 +28,6 @@ type (
 		Name       string `json:"name"`
 		Email      string `json:"email"`
 		Password   string `json:"password"`
-		GroupName  string `json:"groupName"`
 	}
 	UserAuthTokenDetail struct {
 		Raw       string    `json:"raw"`
@@ -46,7 +45,6 @@ func (svc *UserService) RegisterUser(ctx context.Context, data UserRegistration)
 	log.Debug().
 		Str("name", data.Name).
 		Str("email", data.Email).
-		Str("groupName", data.GroupName).
 		Str("groupToken", data.GroupToken).
 		Msg("Registering new user")
 
@@ -57,7 +55,7 @@ func (svc *UserService) RegisterUser(ctx context.Context, data UserRegistration)
 	)
 
 	if data.GroupToken == "" {
-		group, err = svc.repos.Groups.GroupCreate(ctx, data.GroupName)
+		group, err = svc.repos.Groups.GroupCreate(ctx, "Home")
 		if err != nil {
 			log.Err(err).Msg("Failed to create group")
 			return repo.UserOut{}, err
diff --git a/frontend/components/App/Header.vue b/frontend/components/App/Header.vue
index 176aa04..9c6b552 100644
--- a/frontend/components/App/Header.vue
+++ b/frontend/components/App/Header.vue
@@ -68,11 +68,13 @@
 
   <BaseContainer cmp="header" class="py-6 max-w-none">
     <BaseContainer>
-      <h2 class="mt-1 text-4xl font-bold tracking-tight text-neutral-content sm:text-5xl lg:text-6xl flex">
-        HomeB
-        <AppLogo class="w-12 -mb-4" />
-        x
-      </h2>
+      <NuxtLink to="/home">
+        <h2 class="mt-1 text-4xl font-bold tracking-tight text-neutral-content sm:text-5xl lg:text-6xl flex">
+          HomeB
+          <AppLogo class="w-12 -mb-4" />
+          x
+        </h2>
+      </NuxtLink>
       <div class="ml-1 mt-2 text-lg text-neutral-content/75 space-x-2">
         <template v-for="link in links">
           <NuxtLink
diff --git a/frontend/components/Item/CreateModal.vue b/frontend/components/Item/CreateModal.vue
index ffc192a..e5b115d 100644
--- a/frontend/components/Item/CreateModal.vue
+++ b/frontend/components/Item/CreateModal.vue
@@ -37,13 +37,22 @@
     },
   });
 
+  const api = useUserApi();
+  const toast = useNotifier();
+
+  const locationsStore = useLocationStore();
+  const locations = computed(() => locationsStore.locations);
+
+  const labelStore = useLabelStore();
+  const labels = computed(() => labelStore.labels);
+
   const submitBtn = ref(null);
 
   const modal = useVModel(props, "modelValue");
   const loading = ref(false);
   const focused = ref(false);
   const form = reactive({
-    location: {} as LocationOut,
+    location: locations.value && locations.value.length > 0 ? locations.value[0] : ({} as LocationOut),
     name: "",
     description: "",
     color: "", // Future!
@@ -65,14 +74,6 @@
       focused.value = true;
     }
   );
-  const api = useUserApi();
-  const toast = useNotifier();
-
-  const locationsStore = useLocationStore();
-  const locations = computed(() => locationsStore.locations);
-
-  const labelStore = useLabelStore();
-  const labels = computed(() => labelStore.labels);
 
   async function create() {
     if (!form.location) {
@@ -88,7 +89,7 @@
 
     const { error } = await api.items.create(out);
     if (error) {
-      toast.error("Couldn't create label");
+      toast.error("Couldn't create item");
       return;
     }
 
diff --git a/frontend/components/global/DateTime.vue b/frontend/components/global/DateTime.vue
index 52defcf..bc57acc 100644
--- a/frontend/components/global/DateTime.vue
+++ b/frontend/components/global/DateTime.vue
@@ -19,7 +19,7 @@
       return "";
     }
 
-    if (nullDate(dt)) {
+    if (!validDate(dt)) {
       return "";
     }
 
@@ -35,10 +35,6 @@
     }
   });
 
-  function nullDate(dt: Date) {
-    return dt.getFullYear() === 1;
-  }
-
   const props = defineProps({
     date: {
       type: [Date, String],
diff --git a/frontend/lib/api/__test__/public.test.ts b/frontend/lib/api/__test__/public.test.ts
index cb3a9c3..4b07165 100644
--- a/frontend/lib/api/__test__/public.test.ts
+++ b/frontend/lib/api/__test__/public.test.ts
@@ -8,7 +8,6 @@ function userFactory(): UserRegistration {
     email: faker.internet.email(),
     password: faker.internet.password(),
     name: faker.name.firstName(),
-    groupName: faker.animal.cat(),
     token: "",
   };
 }
diff --git a/frontend/lib/api/__test__/test-utils.ts b/frontend/lib/api/__test__/test-utils.ts
index cab9b9a..2cef4a3 100644
--- a/frontend/lib/api/__test__/test-utils.ts
+++ b/frontend/lib/api/__test__/test-utils.ts
@@ -30,10 +30,10 @@ export async function sharedUserClient(): Promise<UserClient> {
     return userClient(cache.token);
   }
   const testUser = {
-    groupName: "test-group",
     email: "__test__@__test__.com",
     name: "__test__",
     password: "__test__",
+    token: "",
   };
 
   const api = client();
diff --git a/frontend/lib/api/types/data-contracts.ts b/frontend/lib/api/types/data-contracts.ts
index daa08a0..bd15e83 100644
--- a/frontend/lib/api/types/data-contracts.ts
+++ b/frontend/lib/api/types/data-contracts.ts
@@ -219,7 +219,6 @@ export interface ServerValidationError {
 
 export interface UserRegistration {
   email: string;
-  groupName: string;
   name: string;
   password: string;
   token: string;
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 5194198..eab6f4e 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -21,7 +21,6 @@
 
   const username = ref("");
   const email = ref("");
-  const groupName = ref("");
   const password = ref("");
   const canRegister = ref(false);
 
@@ -50,7 +49,6 @@
       name: username.value,
       email: email.value,
       password: password.value,
-      groupName: groupName.value,
       token: groupToken.value,
     });
 
@@ -152,8 +150,7 @@
                   </h2>
                   <FormTextField v-model="email" label="Set your email?" />
                   <FormTextField v-model="username" label="What's your name?" />
-                  <FormTextField v-if="groupToken == ''" v-model="groupName" label="Name your group" />
-                  <div v-else class="pt-4 pb-1 text-center">
+                  <div v-if="!(groupToken == '')" class="pt-4 pb-1 text-center">
                     <p>You're Joining an Existing Group!</p>
                     <button type="button" class="text-xs underline" @click="groupToken = ''">
                       Don't Want To Join a Group?
diff --git a/frontend/pages/item/[id]/index.vue b/frontend/pages/item/[id]/index.vue
index ccbc943..5028cf0 100644
--- a/frontend/pages/item/[id]/index.vue
+++ b/frontend/pages/item/[id]/index.vue
@@ -177,14 +177,14 @@
     if (preferences.value.showEmpty) {
       return true;
     }
-    return item.value?.purchaseFrom || item.value?.purchasePrice;
+    return item.value?.purchaseFrom || item.value?.purchasePrice !== "0";
   });
 
-  const purchaseDetails = computed<(Detail | DateDetail)[]>(() => {
+  const purchaseDetails = computed<Array<Detail | DateDetail>>(() => {
     return [
       {
         name: "Purchase From",
-        label: item.value?.purchaseFrom || "",
+        text: item.value?.purchaseFrom || "",
       },
       {
         name: "Purchase Price",
@@ -193,18 +193,19 @@
       {
         name: "Purchase Date",
         text: item.value.purchaseTime,
+        type: "date",
       },
-    ] as (Detail | DateDetail)[];
+    ];
   });
 
   const showSold = computed(() => {
     if (preferences.value.showEmpty) {
       return true;
     }
-    return item.value?.soldTo || item.value?.soldPrice;
+    return item.value?.soldTo || item.value?.soldPrice !== "0";
   });
 
-  const soldDetails = computed<Array<Detail>>(() => {
+  const soldDetails = computed<Array<Detail | DateDetail>>(() => {
     return [
       {
         name: "Sold To",
@@ -217,8 +218,9 @@
       {
         name: "Sold At",
         text: item.value?.soldTime || "",
+        type: "date",
       },
-    ] as Detail[];
+    ];
   });
 
   const confirm = useConfirm();