first commit

resources/client/admin/people/crupdate/person-primary-facts-form.tsx

@@ -0,0 +1,113 @@
+import React, {Fragment, useMemo} from 'react';
+import {FormImageSelector} from '@common/ui/images/image-selector';
+import {Trans} from '@common/i18n/trans';
+import {FormTextField} from '@common/ui/forms/input-field/text-field/text-field';
+import {FormDatePicker} from '@common/ui/forms/input-field/date/date-picker/date-picker';
+import {FormSelect, Option} from '@common/ui/forms/select/select';
+import {useValueLists} from '@common/http/value-lists';
+import {Item} from '@common/ui/forms/listbox/item';
+
+export function PersonPrimaryFactsForm() {
+  return (
+    <Fragment>
+      <div className="mb-24 gap-24 md:flex">
+        <FormImageSelector
+          variant="square"
+          previewSize="w-204 aspect-poster"
+          name="poster"
+          diskPrefix="person-posters"
+          label={<Trans message="Poster" />}
+          showRemoveButton
+        />
+        <div className="flex-auto max-md:mt-24">
+          <FormTextField
+            name="name"
+            label={<Trans message="Name" />}
+            className="mb-24"
+            required
+          />
+          <KnownForField />
+          <FormDatePicker
+            name="birth_date"
+            label={<Trans message="Birth date" />}
+            className="mb-24"
+            granularity="day"
+          />
+          <FormDatePicker
+            name="death_date"
+            label={<Trans message="Death date" />}
+            granularity="day"
+          />
+        </div>
+      </div>
+      <FormTextField
+        name="description"
+        label={<Trans message="Biography" />}
+        inputElementType="textarea"
+        rows={4}
+        className="mb-24"
+      />
+      <div className="mb-24 items-center gap-24 md:flex">
+        <FormTextField
+          name="birth_place"
+          label={<Trans message="Birth place" />}
+          className="flex-1 max-md:mb-24"
+        />
+      </div>
+      <div className="mb-24 items-center gap-24 md:flex">
+        <FormSelect
+          name="gender"
+          label={<Trans message="Gender" />}
+          className="flex-1 max-md:mb-24"
+          selectionMode="single"
+        >
+          <Option value="male">
+            <Trans message="Male" />
+          </Option>
+          <Option value="female">
+            <Trans message="Female" />
+          </Option>
+        </FormSelect>
+      </div>
+      <div className="mb-24 items-center gap-24 md:flex">
+        <FormTextField
+          name="popularity"
+          label={<Trans message="Popularity" />}
+          type="number"
+          min={1}
+          className="flex-1 max-md:mb-24"
+        />
+      </div>
+    </Fragment>
+  );
+}
+
+function KnownForField() {
+  const {data} = useValueLists(['tmdbDepartments']);
+  const departments = useMemo(() => {
+    return data?.tmdbDepartments.map(item => {
+      if (item.department === 'Actors') {
+        return {department: 'Acting'};
+      }
+      return {department: item.department};
+    });
+  }, [data]);
+
+  return (
+    <FormSelect
+      name="known_for"
+      label={<Trans message="Known for" />}
+      required
+      items={departments}
+      className="mb-24"
+      selectionMode="single"
+      showSearchField
+    >
+      {item => (
+        <Item value={item.department}>
+          <Trans message={item.department} />
+        </Item>
+      )}
+    </FormSelect>
+  );
+}