feat: add new record dialog

src/renderer/components/modals/index.tsx

@@ -2,3 +2,4 @@ export * from './confirm-promise-modal';
 export * from './confirm-promise-delete-modal';
 export * from './confirm-promise-save-modal';
 export * from './confirm-promise-filters-modal';
+export * from './promise-new-record-modal';

src/renderer/components/modals/promise-new-record-modal.tsx

@@ -0,0 +1,36 @@
+import { Center, Icon, Spinner, Text } from '@chakra-ui/react';
+import { FaQuoteLeft, FaQuoteRight } from 'react-icons/fa';
+import { v4 } from 'uuid';
+import { FilterBuilder } from 'renderer/containers/filter-builder';
+
+import { PromiseModal } from './promise-modal';
+import { ActionButtonType } from '@electrocrud/buttons';
+import { ColumnWithMetadataAndTags } from 'renderer/defenitions/record-object';
+import { Suspense } from 'react';
+import { InlineSpinner } from '../icons';
+import { RecordFormBuilder } from 'renderer/containers/record-editor';
+
+export const PromiseNewRecordModal = (
+  columnViews: ColumnWithMetadataAndTags[]
+) => {
+  return PromiseModal({
+    keyu: v4(),
+    instanceId: v4(),
+    size: '5xl',
+    getValue: () => {},
+    actionButtons: [ActionButtonType.SAVE, ActionButtonType.CANCEL],
+    title: (
+      <Text display="inline-flex" fontWeight="medium" textTransform="uppercase">
+        Add New Record Modal
+      </Text>
+    ),
+    children: (properties) => (
+      <Suspense fallback={<InlineSpinner />}>
+        <RecordFormBuilder
+          columns={columnViews}
+          formRef={properties.formCtxRef}
+        />
+      </Suspense>
+    ),
+  });
+};

src/renderer/containers/record-editor/form-inputs/form-input-datetime.tsx

@@ -0,0 +1,28 @@
+import { Box, Icon, InputRightAddon } from '@chakra-ui/react';
+import { Field } from '@saas-ui/forms';
+import { FC } from 'react';
+import { ColumnWithMetadataAndTags } from 'renderer/defenitions/record-object';
+import { findType } from 'renderer/defenitions/record-object/data-types';
+
+export type FormInputTypeDateTime = {
+  column: ColumnWithMetadataAndTags;
+};
+
+export const FormInputDateTime: FC<FormInputTypeDateTime> = ({ column }) => {
+  const type = findType(column.data_type);
+  return (
+    <Field
+      variant="flushed"
+      type="datetime-local"
+      name={column.name}
+      label={`${column.name} (${column.alias || column.name})`}
+      defaultValue={column.default_value}
+      isDisabled={column.has_auto_increment}
+      isRequired={!column.is_nullable}
+      help={column.comment}
+      rules={{
+        required: column.is_nullable ? false : `${column.name} is required.`,
+      }}
+    />
+  );
+};

src/renderer/containers/record-editor/form-inputs/form-input-number.tsx

@@ -0,0 +1,37 @@
+import { Box, Icon, InputRightAddon } from '@chakra-ui/react';
+import { Field } from '@saas-ui/forms';
+import { FC } from 'react';
+import { ColumnWithMetadataAndTags } from 'renderer/defenitions/record-object';
+import { findType } from 'renderer/defenitions/record-object/data-types';
+
+export type FormInputTypeNumber = {
+  column: ColumnWithMetadataAndTags;
+};
+
+export const FormInputNumber: FC<FormInputTypeNumber> = ({ column }) => {
+  const type = findType(column.data_type);
+  return (
+    <Field
+      variant="flushed"
+      type="number"
+      name={column.name}
+      label={`${column.name} (${column.alias || column.name})`}
+      defaultValue={column.default_value}
+      isDisabled={column.has_auto_increment}
+      isRequired={!column.is_nullable && !column.has_auto_increment}
+      max={column.max_length || Number.POSITIVE_INFINITY}
+      help={column.comment}
+      rules={{
+        required:
+          column.is_nullable || column.has_auto_increment
+            ? false
+            : `${column.name} is required.`,
+      }}
+      rightAddon={
+        <Box flex={1} display="flex" alignItems="center">
+          <Icon as={type.icon} />
+        </Box>
+      }
+    />
+  );
+};

src/renderer/containers/record-editor/form-inputs/form-input-text.tsx

@@ -0,0 +1,34 @@
+import { Box, Icon, InputRightAddon } from '@chakra-ui/react';
+import { Field } from '@saas-ui/forms';
+import { FC } from 'react';
+import { ColumnWithMetadataAndTags } from 'renderer/defenitions/record-object';
+import { findType } from 'renderer/defenitions/record-object/data-types';
+
+export type FormInputTypeText = {
+  column: ColumnWithMetadataAndTags;
+};
+
+export const FormInputText: FC<FormInputTypeText> = ({ column }) => {
+  const type = findType(column.data_type);
+  return (
+    <Field
+      variant="flushed"
+      type="text"
+      name={column.name}
+      label={`${column.name} (${column.alias || column.name})`}
+      defaultValue={column.default_value}
+      isDisabled={column.has_auto_increment}
+      isRequired={!column.is_nullable}
+      maxLength={column.max_length}
+      help={column.comment}
+      rules={{
+        required: column.is_nullable ? false : `${column.name} is required.`,
+      }}
+      rightAddon={
+        <Box flex={1} display="flex" alignItems="center">
+          <Icon as={type.icon} />
+        </Box>
+      }
+    />
+  );
+};

src/renderer/containers/record-editor/form-inputs/index.tsx

@@ -0,0 +1,25 @@
+import { ColumnWithMetadataAndTags } from 'renderer/defenitions/record-object';
+import { findType } from 'renderer/defenitions/record-object/data-types';
+import { FormInputDateTime } from './form-input-datetime';
+import { FormInputNumber } from './form-input-number';
+import { FormInputText } from './form-input-text';
+
+export * from './form-input-text';
+
+export const InputFormFactory = (column: ColumnWithMetadataAndTags) => {
+  switch (findType(column.data_type).name) {
+    case 'string': {
+      return FormInputText;
+      break;
+    }
+    case 'number': {
+      return FormInputNumber;
+      break;
+    }
+    case 'datetime': {
+      return FormInputDateTime;
+      break;
+    }
+  }
+  return FormInputText;
+};

src/renderer/containers/record-editor/index.tsx

@@ -0,0 +1 @@
+export * from './record-form-builder';

src/renderer/containers/record-editor/record-form-builder.tsx

@@ -0,0 +1,25 @@
+import { Form, FormLayout } from '@saas-ui/forms';
+import { FC } from 'react';
+import { ColumnWithMetadataAndTags } from 'renderer/defenitions/record-object';
+import { InputFormFactory } from './form-inputs';
+
+export type RecordFormBuilderProperties = {
+  columns: ColumnWithMetadataAndTags[];
+  formRef: any;
+};
+export const RecordFormBuilder: FC<RecordFormBuilderProperties> = ({
+  columns,
+  formRef,
+}) => {
+  return (
+    // @ts-ignore
+    <Form ref={formRef}>
+      <FormLayout>
+        {columns?.map((column: ColumnWithMetadataAndTags) => {
+          const Component = InputFormFactory(column);
+          return <Component key={column.name} column={column} />;
+        })}
+      </FormLayout>
+    </Form>
+  );
+};

src/renderer/ipc/index.ts

@@ -4,3 +4,4 @@ export * from './use-ipc-table-info';
 export * from './use-ipc-read-data';
 export * from './use-ipc-delete-data';
 export * from './use-ipc-update-data';
+export * from './use-ipc-insert-data';

src/renderer/ipc/use-ipc-insert-data.ts

@@ -0,0 +1,6 @@
+import { InsertRequest, InsertResponse } from '@electrocrud/shared';
+import { useBaseRequest } from './base-request';
+
+export const useIPCInsertData = (request: InsertRequest) => {
+  return useBaseRequest<InsertResponse>(request);
+};

src/renderer/views/admin/views/data/data-table/data-table-card.tsx

@@ -304,7 +304,7 @@ export const DataTableCard: FC<DataTableCardProperties> = ({
 
   return (
     <Box p={0} m={0} flex={1} display="flex" flexDirection="column" h="100%">
-      <CardHeader py={0}>
+      <CardHeader py={0} px={0}>
         <DataTableHeader
           setInternalFilter={setInternalFilter}
           setSearchValue={setSearchValue}

src/renderer/views/admin/views/data/data-table/data-table-header.tsx

@@ -11,13 +11,14 @@ import {
 } from '@chakra-ui/react';
 import { EntityState } from '@reduxjs/toolkit';
 import memoize from 'proxy-memoize';
-import { FC, useContext, useMemo } from 'react';
+import { FC, useContext, useMemo, useState } from 'react';
 import { MdSearch } from 'react-icons/md';
 import { TbFilter, TbFilterOff, TbPlaylistAdd, TbTrash } from 'react-icons/tb';
 import { useSelector } from 'react-redux';
 import {
   ActionsDropdownMenu,
   ActionsDropdownMenuItem,
+  AddButton,
   RippleButton,
 } from '@electrocrud/buttons';
 import { ConfirmPromiseDeleteModal } from 'renderer/components/modals/confirm-promise-delete-modal';
@@ -26,6 +27,10 @@ import { StrictViewFilterRO } from 'renderer/defenitions/record-object';
 import { useAppDispatch } from 'renderer/store/hooks';
 import { ViewFiltersReducer } from 'renderer/store/reducers';
 import { RootState } from 'renderer/store/store';
+import { PromiseNewRecordModal } from 'renderer/components/modals';
+import { useIPCInsertData } from 'renderer/ipc';
+import { IPCChannelEnum } from '@electrocrud/shared';
+import { useUpdateEffect } from 'usehooks-ts';
 
 type DataTableHeaderProperties = {
   setInternalFilter: (any: any) => void;
@@ -115,6 +120,41 @@ export const DataTableHeader: FC<DataTableHeaderProperties> = ({
     [thisViewFilters]
   );
 
+  const [newRecordState, setNewRecordState] = useState();
+
+  const newRecordHandler = async () => {
+    try {
+      if (viewState?.columns) {
+        const result = await PromiseNewRecordModal(viewState?.columns);
+        if (result) {
+          setNewRecordState(result);
+        }
+      }
+    } catch {
+      /* empty */
+    }
+  };
+
+  const { execute: executeInsert, isExecuted: isInsertExecuted } =
+    useIPCInsertData({
+      channel: IPCChannelEnum.INSERT_DATA,
+      body: {
+        table: viewState?.table as string,
+        data: newRecordState || {},
+      },
+    });
+
+  useUpdateEffect(() => {
+    if (newRecordState) {
+      executeInsert();
+    }
+  }, [newRecordState]);
+
+  useUpdateEffect(() => {
+    // @ts-ignore
+    setNewRecordState();
+  }, [isInsertExecuted]);
+
   return (
     <VStack pt={3}>
       <HStack justifyContent="space-between" width="100%">
@@ -145,6 +185,7 @@ export const DataTableHeader: FC<DataTableHeaderProperties> = ({
             </InputRightElement>
           </InputGroup>
           <ActionsDropdownMenu menuName="Filters" items={actions} />
+          <AddButton size="sm" onClick={newRecordHandler} />
         </HStack>
       </HStack>
     </VStack>