Feat/editable fields update (#743)

* Removed console log * Used current scope as default parent scope for fields * Finished editable fields on people show page * Added stories * Console log * Lint
2023-07-19 02:43:16 +02:00
parent 5ee8eaa985
commit 7ecb098c55
30 changed files with 521 additions and 49 deletions
--- a/front/src/modules/people/components/PersonPropertyBox.tsx
+++ b/front/src/modules/people/components/PersonPropertyBox.tsx
@ -0,0 +1,84 @@
+import {
+  IconCalendar,
+  IconMail,
+  IconMap,
+  IconPhone,
+} from '@tabler/icons-react';
+
+import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
+import { DateEditableField } from '@/ui/editable-field/variants/components/DateEditableField';
+import { PhoneEditableField } from '@/ui/editable-field/variants/components/PhoneEditableField';
+import { TextEditableField } from '@/ui/editable-field/variants/components/TextEditableField';
+import { Company, Person, useUpdatePeopleMutation } from '~/generated/graphql';
+
+import { PeopleCompanyEditableField } from '../editable-field/components/PeopleCompanyEditableField';
+
+type OwnProps = {
+  person: Pick<
+    Person,
+    'id' | 'city' | 'email' | 'displayName' | 'phone' | 'createdAt'
+  > & {
+    company?: Pick<Company, 'id' | 'name' | 'domainName'> | null;
+  };
+};
+
+export function PersonPropertyBox({ person }: OwnProps) {
+  const [updatePerson] = useUpdatePeopleMutation();
+
+  return (
+    <PropertyBox extraPadding={true}>
+      <TextEditableField
+        value={person.email}
+        icon={<IconMail />}
+        placeholder={'Email'}
+        onSubmit={(newEmail) => {
+          updatePerson({
+            variables: {
+              id: person.id,
+              email: newEmail,
+            },
+          });
+        }}
+      />
+      <PhoneEditableField
+        value={person.phone}
+        icon={<IconPhone />}
+        placeholder={'Phone'}
+        onSubmit={(newPhone) => {
+          updatePerson({
+            variables: {
+              id: person.id,
+              phone: newPhone,
+            },
+          });
+        }}
+      />
+      <DateEditableField
+        value={person.createdAt}
+        icon={<IconCalendar />}
+        onSubmit={(newDate) => {
+          updatePerson({
+            variables: {
+              id: person.id,
+              createdAt: newDate,
+            },
+          });
+        }}
+      />
+      <PeopleCompanyEditableField people={person} />
+      <TextEditableField
+        value={person.city}
+        icon={<IconMap />}
+        placeholder={'City'}
+        onSubmit={(newCity) => {
+          updatePerson({
+            variables: {
+              id: person.id,
+              city: newCity,
+            },
+          });
+        }}
+      />
+    </PropertyBox>
+  );
+}