From e6f7456027fbe110532f53110a79b4bb620c9633 Mon Sep 17 00:00:00 2001 From: xWyvernPx Date: Wed, 4 Oct 2023 20:42:36 +0700 Subject: [PATCH] HK-52 form init --- package.json | 1 + pnpm-lock.yaml | 98 ++- src/index.d.ts | 17 +- .../customer/components/AddCustomerModal.tsx | 628 +++++++++--------- src/vite-env.d.ts | 1 + tsconfig.json | 2 +- 6 files changed, 415 insertions(+), 332 deletions(-) diff --git a/package.json b/package.json index 005d526..26e324c 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@storybook/addon-postcss": "^2.0.0", "@tanstack/react-table": "^8.10.1", "@uidotdev/usehooks": "^2.3.1", + "aws-sdk": "^2.1469.0", "axios": "^1.5.1", "chance": "^1.1.11", "class-variance-authority": "^0.6.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a7909fd..fed4747 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -50,6 +50,9 @@ dependencies: '@uidotdev/usehooks': specifier: ^2.3.1 version: 2.3.1(react-dom@18.2.0)(react@18.2.0) + aws-sdk: + specifier: ^2.1469.0 + version: 2.1469.0 axios: specifier: ^1.5.1 version: 1.5.1 @@ -4762,7 +4765,22 @@ packages: /available-typed-arrays@1.0.5: resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==} engines: {node: '>= 0.4'} - dev: true + + /aws-sdk@2.1469.0: + resolution: {integrity: sha512-17X0v34mHxqfz+HhIkH1I6p0BCWsvGVSZf1KHVlVZdrzYEHFrdhpLHayYvpzq26FrbL1FvfN6sYGqrxZyvxRGg==} + engines: {node: '>= 10.0.0'} + dependencies: + buffer: 4.9.2 + events: 1.1.1 + ieee754: 1.1.13 + jmespath: 0.16.0 + querystring: 0.2.0 + sax: 1.2.1 + url: 0.10.3 + util: 0.12.5 + uuid: 8.0.0 + xml2js: 0.5.0 + dev: false /aws-sign2@0.7.0: resolution: {integrity: sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==} @@ -4886,7 +4904,6 @@ packages: /base64-js@1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} - dev: true /bcrypt-pbkdf@1.0.2: resolution: {integrity: sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==} @@ -5057,6 +5074,14 @@ packages: /buffer-from@1.1.2: resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==} + /buffer@4.9.2: + resolution: {integrity: sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==} + dependencies: + base64-js: 1.5.1 + ieee754: 1.2.1 + isarray: 1.0.0 + dev: false + /buffer@5.7.1: resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==} dependencies: @@ -5103,7 +5128,6 @@ packages: dependencies: function-bind: 1.1.1 get-intrinsic: 1.2.0 - dev: true /callsites@3.1.0: resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} @@ -6211,6 +6235,11 @@ packages: resolution: {integrity: sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==} dev: true + /events@1.1.1: + resolution: {integrity: sha512-kEcvvCBByWXGnZy6JUlgAp2gBIUjfCAV6P6TgT1/aaQKcmuAEC4OZTV1I4EWQLz2gxZw76atuVyvHhTxvi0Flw==} + engines: {node: '>=0.4.x'} + dev: false + /events@3.3.0: resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==} engines: {node: '>=0.8.x'} @@ -6506,7 +6535,6 @@ packages: resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==} dependencies: is-callable: 1.2.7 - dev: true /foreground-child@2.0.0: resolution: {integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==} @@ -6659,7 +6687,6 @@ packages: function-bind: 1.1.1 has: 1.0.3 has-symbols: 1.0.3 - dev: true /get-npm-tarball-url@2.0.3: resolution: {integrity: sha512-R/PW6RqyaBQNWYaSyfrh54/qtcnOp22FHCCiRhSSZj0FP3KQWCsxxt0DzIdVTbwTqe9CtQfvl/FPD4UIPt4pqw==} @@ -6821,7 +6848,6 @@ packages: resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==} dependencies: get-intrinsic: 1.2.0 - dev: true /graceful-fs@4.2.11: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} @@ -6897,14 +6923,12 @@ packages: /has-symbols@1.0.3: resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==} engines: {node: '>= 0.4'} - dev: true /has-tostringtag@1.0.0: resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==} engines: {node: '>= 0.4'} dependencies: has-symbols: 1.0.3 - dev: true /has-unicode@2.0.1: resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==} @@ -7040,9 +7064,12 @@ packages: postcss: 8.4.23 dev: true + /ieee754@1.1.13: + resolution: {integrity: sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==} + dev: false + /ieee754@1.2.1: resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} - dev: true /ignore@5.2.4: resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==} @@ -7135,7 +7162,6 @@ packages: dependencies: call-bind: 1.0.2 has-tostringtag: 1.0.0 - dev: true /is-array-buffer@3.0.2: resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==} @@ -7171,7 +7197,6 @@ packages: /is-callable@1.2.7: resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==} engines: {node: '>= 0.4'} - dev: true /is-ci@3.0.1: resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==} @@ -7215,7 +7240,6 @@ packages: engines: {node: '>= 0.4'} dependencies: has-tostringtag: 1.0.0 - dev: true /is-glob@4.0.3: resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==} @@ -7332,7 +7356,6 @@ packages: for-each: 0.3.3 gopd: 1.0.1 has-tostringtag: 1.0.0 - dev: true /is-typedarray@1.0.0: resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==} @@ -7367,7 +7390,6 @@ packages: /isarray@1.0.0: resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==} - dev: true /isarray@2.0.5: resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==} @@ -7508,6 +7530,11 @@ packages: hasBin: true dev: true + /jmespath@0.16.0: + resolution: {integrity: sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==} + engines: {node: '>= 0.6.0'} + dev: false + /js-sdsl@4.4.0: resolution: {integrity: sha512-FfVSdx6pJ41Oa+CF7RDaFmTnCaFhua+SNYQX74riGOpl96x+2jQCqEfQ2bnXu/5DPCqlRuiqyvTJM0Qjz26IVg==} dev: true @@ -8783,6 +8810,10 @@ packages: pump: 2.0.1 dev: true + /punycode@1.3.2: + resolution: {integrity: sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==} + dev: false + /punycode@1.4.1: resolution: {integrity: sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==} dev: true @@ -8832,6 +8863,12 @@ packages: side-channel: 1.0.4 dev: true + /querystring@0.2.0: + resolution: {integrity: sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==} + engines: {node: '>=0.4.x'} + deprecated: The querystring API is considered Legacy. new code should use the URLSearchParams API instead. + dev: false + /queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} dev: true @@ -9529,11 +9566,13 @@ packages: webpack: 5.88.2(esbuild@0.17.18) dev: true + /sax@1.2.1: + resolution: {integrity: sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA==} + dev: false + /sax@1.2.4: resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==} requiresBuild: true - dev: true - optional: true /scheduler@0.23.0: resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} @@ -10531,6 +10570,13 @@ packages: dependencies: punycode: 2.3.0 + /url@0.10.3: + resolution: {integrity: sha512-hzSUW2q06EqL1gKM/a+obYHLIO6ct2hwPuviqTTOcfFVc61UbfJ2Q32+uGL/HCPxKqrdGB5QUwIe7UqlDgwsOQ==} + dependencies: + punycode: 1.3.2 + querystring: 0.2.0 + dev: false + /use-resize-observer@9.1.0(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==} peerDependencies: @@ -10553,13 +10599,17 @@ packages: is-generator-function: 1.0.10 is-typed-array: 1.1.10 which-typed-array: 1.1.9 - dev: true /utils-merge@1.0.1: resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==} engines: {node: '>= 0.4.0'} dev: true + /uuid@8.0.0: + resolution: {integrity: sha512-jOXGuXZAWdsTH7eZLtyXMqUb9EcWMGZNbL9YcGBJl4MH4nrxHmZJhEHvyLFrkxo+28uLb/NYRcStH48fnD0Vzw==} + hasBin: true + dev: false + /uuid@8.3.2: resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==} hasBin: true @@ -10736,7 +10786,6 @@ packages: gopd: 1.0.1 has-tostringtag: 1.0.0 is-typed-array: 1.1.10 - dev: true /which@2.0.2: resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} @@ -10847,6 +10896,19 @@ packages: optional: true dev: true + /xml2js@0.5.0: + resolution: {integrity: sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==} + engines: {node: '>=4.0.0'} + dependencies: + sax: 1.2.4 + xmlbuilder: 11.0.1 + dev: false + + /xmlbuilder@11.0.1: + resolution: {integrity: sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==} + engines: {node: '>=4.0'} + dev: false + /xtend@4.0.2: resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==} engines: {node: '>=0.4'} diff --git a/src/index.d.ts b/src/index.d.ts index 96252c4..15b3497 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -1,9 +1,8 @@ -declare module 'remoteApp/Button' { - - interface ComponentProps { - name : string - } - - const Button: React.FC; - export default Button; - } \ No newline at end of file +declare module "remoteApp/Button" { + interface ComponentProps { + name: string; + } + + const Button: React.FC; + export default Button; +} diff --git a/src/modules/customer/components/AddCustomerModal.tsx b/src/modules/customer/components/AddCustomerModal.tsx index 38b5ddb..d4731d8 100644 --- a/src/modules/customer/components/AddCustomerModal.tsx +++ b/src/modules/customer/components/AddCustomerModal.tsx @@ -38,11 +38,14 @@ interface AddCustomerModalProps { customer: User; } +interface AddCustomerForm { + fullName: string; +} const AddCustomerModal = ({ customer, onCancel, - // isOpen, -}: AddCustomerModalProps) => { +}: // isOpen, +AddCustomerModalProps) => { console.log("render"); const theme = useTheme(); @@ -135,109 +138,122 @@ const AddCustomerModal = ({ // } // } // }); - const { control } = useForm(); + const { + control, + handleSubmit, + register, + formState: { errors }, + } = useForm(); // const allStatus = ["Complicated", "Single", "Relationship"]; const roles = []; // TODO: load from be - // const { errors, touched, handleSubmit, isSubmitting, getFieldProps, setFieldValue } = formik; return ( <> {/*
*/} - {customer ? "Edit Customer" : "New Customer"} - - - - - - - - { + console.log("Add customer data => ", data); + })}> + + {customer ? "Edit Customer" : "New Customer"} + + + + + + + - - + + + + + Upload + + + + + ) => + setSelectedImage(e.target.files?.[0]) + } + /> + + + + + + + Full Name + - - Upload - - - - ) => - setSelectedImage(e.target.files?.[0]) - } - /> - - - - - - - Fullname - - - - - - Email - - - - - - Phone - {/* + + + Email + + + + + + Phone + {/* */} - ( - - )} - /> - - + ( + + )} + /> + + - - - Birthday - ( - { - onChange(event); - }} + + + Birthday + ( + { + onChange(event); + }} - // renderInput={(params) => } - /> - )} - /> - - - - - - Status - - - ) => setFieldValue('orderStatus', event.target.value as string)} + input={ + + } + renderValue={(selected) => { + if (!selected) { + return ( + + Select Status + + ); + } + return ( - - Select Status + + {selected as ReactNode} ); - } - - return ( - - {selected as ReactNode} - - ); - }}> - {Object.keys(CustomerStatus) - .filter((item) => { - return isNaN(Number(item)); - }) - .map((column) => ( - - - - ))} - - - {/* {touched.orderStatus && errors.orderStatus && ( + }}> + {Object.keys(CustomerStatus) + .filter((item) => { + return isNaN(Number(item)); + }) + .map((column) => ( + + + + ))} + + + {/* {touched.orderStatus && errors.orderStatus && ( {errors.orderStatus} )} */} - - - - - Role - - ) => setFieldValue('orderStatus', event.target.value as string)} + input={ + + } + renderValue={(selected) => { + if (!selected) { + return ( + + Select Role + + ); + } + return ( - - Select Role + + {selected as ReactNode} ); - } - - return ( - - {selected as ReactNode} - - ); - }}> - {Object.keys(roles) - .filter((item) => { - return isNaN(Number(item)); - }) - .map((column) => ( - - - - ))} - - - {/* {touched.orderStatus && errors.orderStatus && ( + }}> + {Object.keys(roles) + .filter((item) => { + return isNaN(Number(item)); + }) + .map((column) => ( + + + + ))} + + + {/* {touched.orderStatus && errors.orderStatus && ( {errors.orderStatus} )} */} - - - - - - Location - - - - - - - - - Make Contact Info Public - - - Means that anyone viewing your profile will be able to - see your contacts details - - } - label="" - labelPlacement="start" - /> - - - - - - Available to hire - - - Toggling this will let your teammates know that you are - available for acquiring new projects - + + + + + Location + + - } - label="" - labelPlacement="start" - /> - + + + + + + Make Contact Info Public + + + Means that anyone viewing your profile will be able to + see your contacts details + + + } + label="" + labelPlacement="start" + /> + + + + + + Available to hire + + + Toggling this will let your teammates know that you + are available for acquiring new projects + + + } + label="" + labelPlacement="start" + /> + + - - - - - - - {!isCreating && ( - - - - - - )} - - - - - - + + + + + + {!isCreating && ( + + + + + + )} + + + + + + + - - + + + {/* */}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 11f02fe..b4ad356 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1 +1,2 @@ /// +/// diff --git a/tsconfig.json b/tsconfig.json index 8894aa7..f27b851 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,7 @@ { "compilerOptions": { "target": "ESNext", - "lib": ["DOM", "DOM.Iterable", "ESNext"], + "lib": ["DOM", "DOM.Iterable", "ESNext", "ES2015", "ES2015.Promise"], "module": "ESNext", "skipLibCheck": true, "types": ["cypress"],