Xstream 471 add ds to text and period fields

apps/data-studio/package.json

@@ -13,7 +13,7 @@
         "antd": "5.14.0",
         "apollo-cache-inmemory": "1.6.6",
         "apollo-upload-client": "14.1.3",
-        "aristid-ds": "2.0.0-ae6eeaa",
+        "aristid-ds": "3.0.0-66e1ba6",
         "dayjs": "1.11.10",
         "graphql": "15.0.0",
         "graphql-tag": "2.12.6",

apps/login/package.json

@@ -7,7 +7,7 @@
     "@ant-design/icons": "5.2.6",
     "@leav/ui": "workspace:libs/ui",
     "antd": "5.14.0",
-    "aristid-ds": "2.0.0-ae6eeaa",
+    "aristid-ds": "3.0.0-66e1ba6",
     "i18next": "22.5.0",
     "i18next-browser-languagedetector": "7.0.2",
     "i18next-http-backend": "2.1.1",

apps/portal/package.json

@@ -8,7 +8,7 @@
     "@leav/ui": "workspace:libs/ui",
     "@leav/utils": "workspace:libs/utils",
     "antd": "5.14.0",
-    "aristid-ds": "2.0.0-ae6eeaa",
+    "aristid-ds": "3.0.0-66e1ba6",
     "cross-fetch": "3.1.5",
     "graphql-ws": "5.12.0",
     "i18next": "22.5.0",

libs/ui/package.json

@@ -62,7 +62,7 @@
     "@ckeditor/ckeditor5-build-inline": "39.0.1",
     "@ckeditor/ckeditor5-react": "6.1.0",
     "@leav/utils": "0.0.1",
-    "aristid-ds": "2.0.0-ae6eeaa",
+    "aristid-ds": "3.0.0-66e1ba6",
     "dayjs": "1.11.10",
     "dompurify": "3.0.5",
     "html-react-parser": "4.2.2",

libs/ui/src/__mocks__/common/attribute.ts

@@ -103,7 +103,7 @@ export const mockAttributeVersionable: AttributeDetailsFragment = {
 export const mockFormAttribute: RecordFormAttributeFragment = {
     id: 'test_attribute',
     type: AttributeType.simple,
-    format: AttributeFormat.text,
+    format: AttributeFormat.extended,
     label: {
         fr: 'test',
         en: 'test'

libs/ui/src/_queries/attributes/attributeDetailsFragment.ts

@@ -11,6 +11,7 @@ export const attributeDetailsFragment = gql`
         system
         readonly
         label
+        required
         description
         multiple_values
         metadata_fields {

libs/ui/src/components/RecordEdition/EditRecord/EditRecord.test.tsx

@@ -66,7 +66,6 @@ describe('EditRecord', () => {
                         record={mockRecord}
                         onClose={_handleClose}
                         buttonsRefs={{
-                            submit: submitButtonRef,
                             close: closeButtonRef
                         }}
                     />
@@ -96,7 +95,6 @@ describe('EditRecord', () => {
                         record={mockRecord}
                         onClose={_handleClose}
                         buttonsRefs={{
-                            submit: submitButtonRef,
                             close: closeButtonRef
                         }}
                     />

libs/ui/src/components/RecordEdition/EditRecord/EditRecord.tsx

@@ -58,7 +58,6 @@ interface IEditRecordProps {
     // Here we're not in charge of buttons position. It might on a modal footer or pretty much anywhere.
     // We're using refs to still be able to handle the click on the buttons
     buttonsRefs: {
-        submit?: React.RefObject<HTMLButtonElement>;
         close?: React.RefObject<HTMLButtonElement>;
         refresh?: React.RefObject<HTMLButtonElement>;
         valuesVersions?: React.RefObject<HTMLButtonElement>;
@@ -108,7 +107,6 @@ export const EditRecord: FunctionComponent<IEditRecordProps> = ({
     containerStyle,
     buttonsRefs
 }) => {
-    const {t} = useSharedTranslation();
     const isCreationMode = !record;
 
     const [state, dispatch] = useReducer(editRecordReducer, {
@@ -126,7 +124,7 @@ export const EditRecord: FunctionComponent<IEditRecordProps> = ({
         record?.id
     );
 
-    const {saveValues, loading: saveValuesLoading} = useSaveValueBatchMutation();
+    const {saveValues} = useSaveValueBatchMutation();
     const {deleteValue} = useExecuteDeleteValueMutation(record);
     const [createRecord] = useCreateRecordMutation();
 
@@ -163,15 +161,6 @@ export const EditRecord: FunctionComponent<IEditRecordProps> = ({
         };
     }, [buttonsRefs]);
 
-    // Handle state (disabled or not) of submit button
-    useEffect(() => {
-        if (!buttonsRefs?.submit?.current) {
-            return;
-        }
-
-        buttonsRefs.submit.current.disabled = !hasPendingValues;
-    }, [hasPendingValues, buttonsRefs.submit]);
-
     // Keep pendingValuesRef in sync with the state
     useEffect(() => {
         pendingValuesRef.current = pendingValues;
@@ -439,7 +428,6 @@ export const EditRecord: FunctionComponent<IEditRecordProps> = ({
     };
 
     const listenersByButtonsName: Record<keyof IEditRecordProps['buttonsRefs'], () => void> = {
-        submit: _handleRecordSubmit,
         close: onClose,
         refresh: () => {
             dispatch({
@@ -466,6 +454,7 @@ export const EditRecord: FunctionComponent<IEditRecordProps> = ({
                                 <EditRecordContent
                                     record={record}
                                     library={library}
+                                    onRecordSubmit={_handleRecordSubmit}
                                     onValueSubmit={_handleValueSubmit}
                                     onValueDelete={_handleDeleteValue}
                                     onDeleteMultipleValues={_handleDeleteAllValues}

libs/ui/src/components/RecordEdition/EditRecordContent/EditRecordContent.test.tsx

@@ -89,6 +89,7 @@ describe('EditRecordContent', () => {
             <EditRecordContent
                 record={mockRecord}
                 library={mockRecord.library.id}
+                onRecordSubmit={jest.fn()}
                 onValueDelete={jest.fn()}
                 onValueSubmit={jest.fn()}
                 onDeleteMultipleValues={jest.fn()}
@@ -121,6 +122,7 @@ describe('EditRecordContent', () => {
             <EditRecordContent
                 record={mockRecord}
                 library={mockRecord.library.id}
+                onRecordSubmit={jest.fn()}
                 onValueDelete={jest.fn()}
                 onValueSubmit={jest.fn()}
                 onDeleteMultipleValues={jest.fn()}

libs/ui/src/components/RecordEdition/EditRecordContent/EditRecordContent.tsx

@@ -1,26 +1,32 @@
 // Copyright LEAV Solutions 2017
 // This file is released under LGPL V3
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {FormUIElementTypes, FORM_ROOT_CONTAINER_ID, simpleStringHash} from '@leav/utils';
+import {FormUIElementTypes, FORM_ROOT_CONTAINER_ID, simpleStringHash, IDateRangeValue} from '@leav/utils';
 import {useEffect, useMemo} from 'react';
 import {ErrorDisplay} from '_ui/components';
-import useGetRecordForm from '_ui/hooks/useGetRecordForm';
+import useGetRecordForm, {RecordFormElementsValueStandardValue} from '_ui/hooks/useGetRecordForm';
 import {useGetRecordUpdatesSubscription} from '_ui/hooks/useGetRecordUpdatesSubscription';
 import useRecordsConsultationHistory from '_ui/hooks/useRecordsConsultationHistory';
 import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
 import {IRecordIdentityWhoAmI} from '_ui/types/records';
-import {FormElementTypes} from '_ui/_gqlTypes';
+import {AttributeFormat, FormElementTypes} from '_ui/_gqlTypes';
 import {EditRecordReducerActionsTypes} from '../editRecordReducer/editRecordReducer';
 import {useEditRecordReducer} from '../editRecordReducer/useEditRecordReducer';
 import EditRecordSkeleton from './EditRecordSkeleton';
 import extractFormElements from './helpers/extractFormElements';
 import {RecordEditionContext} from './hooks/useRecordEditionContext';
 import {formComponents} from './uiElements';
 import {DeleteMultipleValuesFunc, DeleteValueFunc, FormElement, SubmitValueFunc} from './_types';
+import {Form} from 'antd';
+import {useForm} from 'antd/lib/form/Form';
+import {Store} from 'antd/lib/form/interface';
+import dayjs from 'dayjs';
+import {EDIT_OR_CREATE_RECORD_FORM_ID} from './formConstants';
 
 interface IEditRecordContentProps {
     record: IRecordIdentityWhoAmI | null;
     library: string;
+    onRecordSubmit: () => void;
     onValueSubmit: SubmitValueFunc;
     onValueDelete: DeleteValueFunc;
     onDeleteMultipleValues: DeleteMultipleValuesFunc;
@@ -30,6 +36,7 @@ interface IEditRecordContentProps {
 function EditRecordContent({
     record,
     library,
+    onRecordSubmit,
     onValueSubmit,
     onValueDelete,
     onDeleteMultipleValues,
@@ -38,6 +45,7 @@ function EditRecordContent({
     const formId = record ? 'edition' : 'creation';
     const {t} = useSharedTranslation();
     const {state, dispatch} = useEditRecordReducer();
+    const [antForm] = useForm();
 
     useRecordsConsultationHistory(record?.library?.id ?? null, record?.id ?? null);
 
@@ -123,17 +131,60 @@ function EditRecordContent({
         uiElement: formComponents[FormUIElementTypes.FIELDS_CONTAINER]
     };
 
+    const hasDateRangeValues = (dateRange: unknown): dateRange is IDateRangeValue =>
+        (dateRange as IDateRangeValue).from !== undefined && (dateRange as IDateRangeValue).to !== undefined;
+
+    const antdFormInitialValues = recordForm.elements.reduce<Store>((acc, {attribute, values}) => {
+        if (!attribute) {
+            return acc;
+        }
+
+        const fieldValue = values[0] as RecordFormElementsValueStandardValue;
+
+        if (attribute.format === AttributeFormat.text) {
+            acc[attribute.id] = fieldValue?.raw_value ?? '';
+        }
+
+        if (attribute.format === AttributeFormat.date_range) {
+            if (!fieldValue?.raw_value) {
+                return acc;
+            }
+
+            if (hasDateRangeValues(fieldValue.raw_value)) {
+                acc[attribute.id] = [
+                    dayjs.unix(Number(fieldValue.raw_value.from)),
+                    dayjs.unix(Number(fieldValue.raw_value.to))
+                ];
+            } else if (typeof fieldValue.raw_value === 'string') {
+                const convertedFieldValue = JSON.parse(fieldValue.raw_value);
+                acc[attribute.id] = [
+                    dayjs.unix(Number(convertedFieldValue.from)),
+                    dayjs.unix(Number(convertedFieldValue.to))
+                ];
+            }
+        }
+
+        return acc;
+    }, {});
+
     // Use a hash of record form as a key to force a full re-render when the form changes
     return (
-        <RecordEditionContext.Provider value={{elements: elementsByContainer, readOnly: readonly, record}}>
-            <rootElement.uiElement
-                key={recordFormHash}
-                element={rootElement}
-                onValueSubmit={_handleValueSubmit}
-                onValueDelete={_handleValueDelete}
-                onDeleteMultipleValues={onDeleteMultipleValues}
-            />
-        </RecordEditionContext.Provider>
+        <Form
+            id={EDIT_OR_CREATE_RECORD_FORM_ID}
+            form={antForm}
+            initialValues={antdFormInitialValues}
+            onFinish={onRecordSubmit}
+        >
+            <RecordEditionContext.Provider value={{elements: elementsByContainer, readOnly: readonly, record}}>
+                <rootElement.uiElement
+                    key={recordFormHash}
+                    element={rootElement}
+                    onValueSubmit={_handleValueSubmit}
+                    onValueDelete={_handleValueDelete}
+                    onDeleteMultipleValues={onDeleteMultipleValues}
+                />
+            </RecordEditionContext.Provider>
+        </Form>
     );
 }
 

libs/ui/src/components/RecordEdition/EditRecordContent/_types.ts

@@ -5,7 +5,7 @@ import {
     AnyPrimitive,
     FormFieldTypes,
     FormUIElementTypes,
-    ICommonFieldsSettings,
+    IRequiredFieldsSettings,
     IDateRangeValue,
     IKeyValue,
     Override
@@ -126,7 +126,7 @@ export interface IStandardInputProps {
     onChange: (value: string) => void;
     onSubmit: (valueToSave: StandardValueTypes) => void;
     onPressEnter?: () => void;
-    settings: ICommonFieldsSettings;
+    settings: IRequiredFieldsSettings;
     inputRef: MutableRefObject<InputRefPossibleTypes>;
 }
 
@@ -141,7 +141,7 @@ export enum FieldScope {
 
 export interface ICommonFieldsReducerState<ValuesType> {
     record: IRecordIdentityWhoAmI;
-    formElement: FormElement<ICommonFieldsSettings>;
+    formElement: FormElement<IRequiredFieldsSettings>;
     attribute: IRecordPropertyAttribute;
     isReadOnly: boolean;
     activeScope: FieldScope;

libs/ui/src/components/RecordEdition/EditRecordContent/formConstants.ts

@@ -0,0 +1 @@
+export const EDIT_OR_CREATE_RECORD_FORM_ID = 'EDIT_OR_CREATE_RECORD_FORM_ID';