From da00ab52839ea50745555dae8f7832c466f813b7 Mon Sep 17 00:00:00 2001
From: lnxcz <frnoch@pm.me>
Date: Tue, 9 Apr 2024 12:52:23 +0200
Subject: [PATCH] feat: :sparkles: form desgin

---
 src/bindings.ts                               |  14 ++
 .../Dashboard/components/Form/Dropdown.tsx    | 118 +++++++--------
 .../Dashboard/components/Form/Input.tsx       |   4 +-
 .../Dashboard/components/Form/index.tsx       |   3 +-
 .../pages/Sales/Clients/ManageClient.tsx      | 141 ++++++++++++++++++
 5 files changed, 216 insertions(+), 64 deletions(-)

diff --git a/src/bindings.ts b/src/bindings.ts
index 50260a0..6b9a741 100644
--- a/src/bindings.ts
+++ b/src/bindings.ts
@@ -132,3 +132,17 @@ export type Template = {
   html: string;
   companyId: number;
 };
+
+export interface Client {
+  id: number;
+  name: string;
+  cin?: string;
+  vatId?: string;
+  streetAddress: string;
+  city: string;
+  postalCode: string;
+  email?: string;
+  phoneNumber?: string;
+  invoices?: Invoice[];
+  companyId: number;
+}
diff --git a/src/screens/Dashboard/components/Form/Dropdown.tsx b/src/screens/Dashboard/components/Form/Dropdown.tsx
index 165eb97..df0fea3 100644
--- a/src/screens/Dashboard/components/Form/Dropdown.tsx
+++ b/src/screens/Dashboard/components/Form/Dropdown.tsx
@@ -24,71 +24,67 @@ const Dropdown: Component<DropdownProps> = (props) => {
   };
 
   return (
-    <div class="w-full">
-      <Listbox defaultOpen={false} value={selected()} onSelectChange={handleSelect}>
-        <div class="relative mt-1">
-          <ListboxButton class="relative w-full py-2 pl-3 pr-10 text-left bg-element border-default border-1 rounded-lg cursor-default focus:outline-none sm:text-sm">
-            <span class="block truncate">{selected().name}</span>
-            <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-              <TbSelector class="w-5 h-5 text-primary" aria-hidden="true" />
-            </span>
-          </ListboxButton>
-          <DisclosureStateChild>
-            {({ isOpen }): JSX.Element => (
-              <Transition
-                show={isOpen()}
-                enter="transition ease-in duration-100"
-                enterFrom="opacity-0"
-                enterTo="opacity-100"
-                leave="transition ease-out duration-100"
-                leaveFrom="opacity-100"
-                leaveTo="opacity-0"
-              >
-                <ListboxOptions
-                  unmount={false}
-                  class="absolute w-full py-1 mt-1 overflow-auto text-base bg-element border-default border-1 rounded-md shadow-lg max-h-60 focus:outline-none sm:text-sm"
-                >
-                  <For each={props.data}>
-                    {(item): JSX.Element => (
-                      <ListboxOption class="focus:outline-none group" value={item}>
-                        {({ isActive, isSelected }): JSX.Element => (
-                          <div
+    <Listbox defaultOpen={false} value={selected()} onSelectChange={handleSelect}>
+      <ListboxButton class="relative w-full py-1.5 pl-3 pr-10 text-left bg-element border-default border-1 rounded-lg cursor-default focus:outline-none text-sm">
+        <span class="block truncate">{selected().name}</span>
+        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+          <TbSelector class="w-5 h-5 text-primary" aria-hidden="true" />
+        </span>
+      </ListboxButton>
+      <DisclosureStateChild>
+        {({ isOpen }): JSX.Element => (
+          <Transition
+            show={isOpen()}
+            enter="transition ease-in duration-100"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="transition ease-out duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <ListboxOptions
+              unmount={false}
+              class="absolute w-full py-1 mt-1 overflow-auto text-base bg-element border-default border-1 rounded-md shadow-lg max-h-60 focus:outline-none sm:text-sm"
+            >
+              <For each={props.data}>
+                {(item): JSX.Element => (
+                  <ListboxOption class="focus:outline-none group" value={item}>
+                    {({ isActive, isSelected }): JSX.Element => (
+                      <div
+                        classList={{
+                          "bg-default": isActive(),
+                          "cursor-default select-none relative py-2 pl-10 pr-4": true,
+                        }}
+                      >
+                        <span
+                          classList={{
+                            "font-medium": isSelected(),
+                            "font-normal": !isSelected(),
+                            "block truncate": true,
+                          }}
+                        >
+                          {item.name}
+                        </span>
+                        {isSelected() ? (
+                          <span
                             classList={{
-                              "bg-default": isActive(),
-                              "cursor-default select-none relative py-2 pl-10 pr-4": true,
+                              "text-primary": true,
+                              "absolute inset-y-0 left-0 flex items-center pl-3": true,
                             }}
                           >
-                            <span
-                              classList={{
-                                "font-medium": isSelected(),
-                                "font-normal": !isSelected(),
-                                "block truncate": true,
-                              }}
-                            >
-                              {item.name}
-                            </span>
-                            {isSelected() ? (
-                              <span
-                                classList={{
-                                  "text-primary": true,
-                                  "absolute inset-y-0 left-0 flex items-center pl-3": true,
-                                }}
-                              >
-                                <FiCheck class="w-5 h-5" />
-                              </span>
-                            ) : null}
-                          </div>
-                        )}
-                      </ListboxOption>
+                            <FiCheck class="w-5 h-5" />
+                          </span>
+                        ) : null}
+                      </div>
                     )}
-                  </For>
-                </ListboxOptions>
-              </Transition>
-            )}
-          </DisclosureStateChild>
-        </div>
-      </Listbox>
-    </div>
+                  </ListboxOption>
+                )}
+              </For>
+            </ListboxOptions>
+          </Transition>
+        )}
+      </DisclosureStateChild>
+    </Listbox>
   );
 };
 
diff --git a/src/screens/Dashboard/components/Form/Input.tsx b/src/screens/Dashboard/components/Form/Input.tsx
index f4c9fd8..fe413b3 100644
--- a/src/screens/Dashboard/components/Form/Input.tsx
+++ b/src/screens/Dashboard/components/Form/Input.tsx
@@ -1,7 +1,7 @@
 import type { Component } from "solid-js";
 
 type TextInputProps = {
-  type: "text" | "date";
+  type: "text" | "date" | "email" | "tel";
   onChange: (value: string) => void;
   label: string;
   defaultValue?: string;
@@ -29,7 +29,7 @@ const Input: Component<InputProps> = (props) => {
   return (
     <input
       type={props.type}
-      class="w-full px-2 py-1 border border-default rounded-lg bg-element border-default"
+      class="w-full px-2 py-1.5 border border-default rounded-lg bg-element text-sm border-default"
       onInput={handleInput}
       placeholder={props.label}
       value={props.defaultValue}
diff --git a/src/screens/Dashboard/components/Form/index.tsx b/src/screens/Dashboard/components/Form/index.tsx
index f54f935..6a2ef26 100644
--- a/src/screens/Dashboard/components/Form/index.tsx
+++ b/src/screens/Dashboard/components/Form/index.tsx
@@ -3,9 +3,10 @@ import type { ParentComponent } from "solid-js";
 
 // TODO: View
 // biome-ignore lint/suspicious/noExplicitAny: idk what the form type is
-const Form: ParentComponent<{ form: FormApi<any, undefined> }> = (props) => {
+const Form: ParentComponent<{ form: FormApi<any, undefined>; class?: string }> = (props) => {
   return (
     <form
+      class={props.class}
       onSubmit={(e) => {
         e.preventDefault();
         e.stopPropagation();
diff --git a/src/screens/Dashboard/pages/Sales/Clients/ManageClient.tsx b/src/screens/Dashboard/pages/Sales/Clients/ManageClient.tsx
index 05d1a3b..0cef099 100644
--- a/src/screens/Dashboard/pages/Sales/Clients/ManageClient.tsx
+++ b/src/screens/Dashboard/pages/Sales/Clients/ManageClient.tsx
@@ -4,10 +4,30 @@ import PageHeader from "@/screens/Dashboard/components/PageHeader";
 import HeaderButton from "@/screens/Dashboard/components/PageHeader/HeaderButton";
 import { useParams } from "@solidjs/router";
 import type { Component } from "solid-js";
+import { createForm } from "@tanstack/solid-form";
+import Input from "@/screens/Dashboard/components/Form/Input";
+import Dropdown from "@/screens/Dashboard/components/Form/Dropdown";
+import type { Client } from "@/bindings";
+import Form from "@/screens/Dashboard/components/Form";
 
 const ManageClient: Component = () => {
   const params = useParams<{ readonly id?: string }>();
   const [t] = useI18n();
+  const form = createForm<Client>(() => ({
+    defaultValues: {
+      id: 0,
+      name: "",
+      cin: "",
+      vatId: "",
+      streetAddress: "",
+      city: "",
+      postalCode: "",
+      email: "",
+      phoneNumber: "",
+      companyId: 0,
+    },
+    onSubmit: (client) => alert(JSON.stringify(client)),
+  }));
 
   return (
     <Container>
@@ -19,6 +39,127 @@ const ManageClient: Component = () => {
           </HeaderButton>,
         ]}
       />
+      <Form form={form}>
+        <div class="flex flex-col gap-8">
+          <div class="flex flex-col md:flex-row gap-8">
+            <div class="flex-1">
+              <div class="flex flex-col gap-4">
+                <form.Field name="name">
+                  {(field) => (
+                    <Input
+                      type="text"
+                      label="Name"
+                      defaultValue={field().state.value}
+                      onChange={(data) => field().handleChange(data)}
+                    />
+                  )}
+                </form.Field>
+                <form.Field name="cin">
+                  {(field) => (
+                    <Input
+                      type="text"
+                      label="CIN"
+                      defaultValue={field().state.value}
+                      onChange={(data) => field().handleChange(data)}
+                    />
+                  )}
+                </form.Field>
+                <form.Field name="vatId">
+                  {(field) => (
+                    <Input
+                      type="text"
+                      label="VAT ID"
+                      defaultValue={field().state.value}
+                      onChange={(data) => field().handleChange(data)}
+                    />
+                  )}
+                </form.Field>
+              </div>
+            </div>
+            <div class="flex-1">
+              <div class="flex flex-col gap-4">
+                <form.Field name="streetAddress">
+                  {(field) => (
+                    <Input
+                      type="text"
+                      label="Street Address"
+                      defaultValue={field().state.value}
+                      onChange={(data) => field().handleChange(data)}
+                    />
+                  )}
+                </form.Field>
+                <form.Field name="city">
+                  {(field) => (
+                    <Input
+                      type="text"
+                      label="City"
+                      defaultValue={field().state.value}
+                      onChange={(data) => field().handleChange(data)}
+                    />
+                  )}
+                </form.Field>
+                <form.Field name="postalCode">
+                  {(field) => (
+                    <Input
+                      type="text"
+                      label="Postal Code"
+                      defaultValue={field().state.value}
+                      onChange={(data) => field().handleChange(data)}
+                    />
+                  )}
+                </form.Field>
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-col md:flex-row gap-8">
+            <div class="flex-1">
+              <div class="flex flex-col gap-4">
+                <form.Field name="email">
+                  {(field) => (
+                    <Input
+                      type="email"
+                      label="Email"
+                      defaultValue={field().state.value}
+                      onChange={(data) => field().handleChange(data)}
+                    />
+                  )}
+                </form.Field>
+                <form.Field name="phoneNumber">
+                  {(field) => (
+                    <Input
+                      type="tel"
+                      label="Phone Number"
+                      defaultValue={field().state.value}
+                      onChange={(data) => field().handleChange(data)}
+                    />
+                  )}
+                </form.Field>
+              </div>
+            </div>
+            <div class="flex-1">
+              <div class="flex flex-col gap-4">
+                <form.Field name="companyId">
+                  {(field) => (
+                    <Dropdown
+                      data={[
+                        { name: "Company 1", id: 1 },
+                        { name: "Company 2", id: 2 },
+                        { name: "Company 3", id: 3 },
+                      ]}
+                      onSelect={(data) => field().handleChange(data.id)}
+                    />
+                  )}
+                </form.Field>
+              </div>
+            </div>
+          </div>
+          <div class="flex justify-end">
+            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">
+              Submit
+            </button>
+          </div>
+        </div>
+      </Form>
     </Container>
   );
 };