chore: unifiy json editor dialog (#767)

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

Author: shanghaikid

Diff for: client/src/pages/databases/collections/data/CollectionData.tsx

@@ -12,7 +12,7 @@ import Filter from '@/components/advancedSearch';
 import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
 import CustomToolBar from '@/components/grid/ToolBar';
 import InsertDialog from '@/pages/dialogs/insert/Dialog';
-import EditEntityDialog from '@/pages/dialogs/EditEntityDialog';
+import EditJSONDialog from '@/pages/dialogs/EditJSONDialog';
 import { getLabelDisplayedRows } from '@/pages/search/Utils';
 import { getQueryStyles } from './Styles';
 import {
@@ -31,6 +31,7 @@ import CollectionColHeader from '../CollectionColHeader';
 import DataView from '@/components/DataView/DataView';
 import DataListView from '@/components/DataListView/DataListView';
 import type { QueryState } from '../../types';
+import { CollectionFullObject } from '@server/types';
 
 export interface CollectionDataProps {
   queryState: QueryState;
@@ -148,7 +149,13 @@ const CollectionData = (props: CollectionDataProps) => {
     await fetchCollection(collectionName);
   };
 
-  const onEditEntity = async (id: string) => {
+  const handleEditConfirm = async (data: Record<string, any>) => {
+    const result = (await DataService.upsert(collection.collection_name, {
+      fields_data: [data],
+    })) as any;
+
+    const idField = result.IDs.id_field;
+    const id = result.IDs[idField].data;
     // deselect all
     setSelectedData([]);
     const newExpr = `${collection.schema.primaryField.name} == ${id}`;
@@ -163,6 +170,25 @@ const CollectionData = (props: CollectionDataProps) => {
     });
   };
 
+  const getEditData = (data: any, collection: CollectionFullObject) => {
+    // sort data by collection schema order
+    const schema = collection.schema;
+    let sortedData: { [key: string]: any } = {};
+    schema.fields.forEach(field => {
+      if (data[field.name] !== undefined) {
+        sortedData[field.name] = data[field.name];
+      }
+    });
+
+    // add dynamic fields if exist
+    const isDynamicSchema = collection.schema.dynamicFields.length > 0;
+    if (isDynamicSchema) {
+      sortedData = { ...sortedData, ...data[DYNAMIC_FIELD] };
+    }
+
+    return sortedData;
+  };
+
   // Toolbar settings
   const toolbarConfigs: ToolBarConfig[] = [
     {
@@ -270,10 +296,12 @@ const CollectionData = (props: CollectionDataProps) => {
           type: 'custom',
           params: {
             component: (
-              <EditEntityDialog
-                data={selectedData[0]}
-                collection={collection!}
-                cb={onEditEntity}
+              <EditJSONDialog
+                data={getEditData(selectedData[0], collection)}
+                dialogTitle={dialogTrans('editEntityTitle')}
+                dialogTip={dialogTrans('editEntityInfo')}
+                handleConfirm={handleEditConfirm}
+                handleCloseDialog={handleCloseDialog}
               />
             ),
           },

Diff for: client/src/pages/dialogs/EditEntityDialog.tsx

@@ -26,35 +26,36 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
-type EditAnalyzerDialogProps = {
+type EditJSONDialogProps = {
   data: { [key: string]: any };
   handleConfirm: (data: { [key: string]: any }) => void;
   handleCloseDialog: () => void;
+  dialogTitle: string;
+  dialogTip: string;
   cb?: () => void;
 };
 
 // json linter for cm
 const linterExtension = linter(jsonParseLinter());
 
-const EditAnalyzerDialog: FC<EditAnalyzerDialogProps> = props => {
+const EditJSONDialog: FC<EditJSONDialogProps> = props => {
+  // hooks
   const theme = useTheme();
   const themeCompartment = new Compartment();
 
   // props
   const { data, handleCloseDialog, handleConfirm } = props;
   // UI states
   const [disabled, setDisabled] = useState(true);
-  // context
   // translations
   const { t: btnTrans } = useTranslation('btn');
-  const { t: dialogTrans } = useTranslation('dialog');
   // refs
   const editorEl = useRef<HTMLDivElement>(null);
   const editor = useRef<EditorView>();
   // styles
   const classes = useStyles();
 
-  const originalData = JSON.stringify(data, null, 4) + '\n';
+  const originalData = JSON.stringify(data, null, 2) + '\n';
 
   // create editor
   useEffect(() => {
@@ -123,14 +124,14 @@ const EditAnalyzerDialog: FC<EditAnalyzerDialogProps> = props => {
 
   return (
     <DialogTemplate
-      title={dialogTrans('editAnalyzerTitle')}
+      title={props.dialogTitle}
       handleClose={handleCloseDialog}
       children={
         <>
           <div
             className={classes.tip}
             dangerouslySetInnerHTML={{
-              __html: dialogTrans('editAnalyzerInfo'),
+              __html: props.dialogTip,
             }}
           ></div>
           <div
@@ -150,4 +151,4 @@ const EditAnalyzerDialog: FC<EditAnalyzerDialogProps> = props => {
   );
 };
 
-export default EditAnalyzerDialog;
+export default EditJSONDialog;

Diff for: client/src/pages/dialogs/EditAnalyzerDialog.tsx renamed to client/src/pages/dialogs/EditJSONDialog.tsx

@@ -37,7 +37,7 @@ import {
 } from '@/consts';
 import { makeStyles } from '@mui/styles';
 import CustomIconButton from '@/components/customButton/CustomIconButton';
-import EditAnalyzerDialog from '@/pages/dialogs/EditAnalyzerDialog';
+import EditJSONDialog from '@/pages/dialogs/EditJSONDialog';
 import type {
   CreateFieldsProps,
   CreateFieldType,
@@ -171,11 +171,15 @@ const CreateFields: FC<CreateFieldsProps> = ({
   autoID,
   setFieldsValidation,
 }) => {
+  // context
   const { setDialog2, handleCloseDialog2 } = useContext(rootContext);
 
+  // i18n
   const { t: collectionTrans } = useTranslation('collection');
   const { t: warningTrans } = useTranslation('warning');
+  const { t: dialogTrans } = useTranslation('dialog');
 
+  // styles
   const classes = useStyles();
 
   const AddIcon = icons.addOutline;
@@ -628,10 +632,12 @@ const CreateFields: FC<CreateFieldsProps> = ({
               type: 'custom',
               params: {
                 component: (
-                  <EditAnalyzerDialog
+                  <EditJSONDialog
                     data={getAnalyzerParams(
                       field.analyzer_params || 'standard'
                     )}
+                    dialogTitle={dialogTrans('editAnalyzerTitle')}
+                    dialogTip={dialogTrans('editAnalyzerInfo')}
                     handleConfirm={data => {
                       changeFields(field.id!, { analyzer_params: data });
                     }}