robobyte-front-builder 1.0.0

package/src/views/genericTable/GenericForm.js

@@ -0,0 +1,301 @@
+// ** React Imports
+
+// ** MUI Imports
+import { yupResolver } from '@hookform/resolvers/yup'
+import * as yup from 'yup'
+import {
+  Autocomplete,
+  Avatar,
+  Button,
+  Card, Checkbox,
+  CircularProgress,
+  DialogActions,
+  DialogContent,
+  DialogTitle, FormControl, FormControlLabel,
+  FormHelperText,
+  Grid,
+  Paper,
+  TextField,
+  Typography
+} from '@mui/material'
+import Box from '@mui/material/Box'
+import { Close } from 'mdi-material-ui'
+import { useContext, useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { Endpoints, Services } from 'src/services/Endpoints'
+import {forEach} from "list";
+// ** Third Party Imports
+
+// ** Icons Imports
+
+// ** Styled Components
+
+const defaultItem = {
+  id: 0,
+  name: '',
+  icon: '',
+  localImage: null,
+  priority: 0,
+  isPublic: false,
+}
+
+const GenericFormDialog = props => {
+  // ** Props
+  const { handleToggleDialogs, endpoint,dialog, setRefresh } = props
+  const [IsSubmitting, setIsSubmitting] = useState(false)
+  const [localImage, setLocalImage] = useState(null)
+  const [className,setClassName] = useState(null)
+  const [fields, setFields] = useState({})
+  const [fieldData,setFieldData] = useState({})
+  const validFileExtensions = { image: ['jpg', 'gif', 'png', 'jpeg', 'svg', 'tiff'] }
+  const MAX_FILE_SIZE = 256000 //100KB
+  // let schema = yup.object().shape({
+  //   name: yup.string().required(),
+  //   priority: yup.number().required()
+  // })
+
+  const {
+    register,
+    handleSubmit,
+    clearErrors,
+    setValue,
+    reset,
+    watch,
+    formState: { errors }
+  } = useForm({
+    mode: 'onChange',
+    reValidateMode: 'onBlur',
+    // resolver: yupResolver(schema),
+    defaultValues: defaultItem
+  })
+  // ** States
+  async function handleSave(values) {
+
+    try {
+      let response = null
+      setIsSubmitting(true)
+      let data = {
+        name: values?.name,
+        priority: values?.priority,
+        isPublic: values?.isPublic
+        // imageUrl : values?.imageUrl
+      }
+      // if (localImage != null) {
+      //   const imageResponse = await uploadFileToBunnyCDN(localImage, MazajakValues.bunny.fileStorageZone, 'Image', `${section}Categories`);
+      //   data.imageUrl = imageResponse.fileName
+      // }
+      //
+      // let formData = new FormData()
+      // for (const key in data) {
+      //   formData.append(key, data[key])
+      // }
+
+
+
+      if (values.id == 0) {
+        response = await Services.PostService(Endpoints.ShopCategory.Post.Add, true, data)
+      }
+      else {
+        response = await Services.UpdateService(Endpoints.ShopCategory.Put.Update, true, data, {
+          id: values?.id
+        })
+      }
+      if (!response.error) {
+        setRefresh(prev => !prev)
+        handleDialogClose()
+      }
+    } catch (error) {
+      setIsSubmitting(false)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+  const handleSetDefaults = () => {
+    reset(defaultItem)
+  }
+  async function handleGetClassName() {
+    try {
+      let response = null
+
+      response = await Services.GetService(endpoint, false, {
+        type : "Add"
+      });
+
+      if(response) {
+        setClassName(response)
+      }
+    }
+    catch (error) {
+      console.log(error)
+    }
+  }
+  async function handleGetData(field){
+    try {
+      console.log(field)
+      let response = null
+
+      let genericFilter = {
+        tFilter : []
+      }
+
+      if(field.isRelated) {
+        let filter = {
+          path : "",
+          method : "Equals",
+          value : watch(field.relatedTo)
+        }
+        genericFilter.tFilter.push(filter)
+      }
+
+      response = await Services.PostService(Endpoints.FilterEndpoints.Post.GetMinDynamics, false, {},{
+        modelName : field.modelType
+      })
+      if(response) {
+        return response.data
+      }
+      else {
+        setFieldData(preValue => ({
+          ...preValue,
+          [field.registerField] : []
+        }))
+      }
+    }
+    catch (error) {
+      console.log(error)
+    }
+  }
+  async function handleGetField() {
+    try {
+      let response = null
+
+      response = await Services.PostService(Endpoints.FilterEndpoints.Post.GetFormFields, false, {
+        type : className
+      })
+      if(response) {
+        setFields(response?.fileds)
+        const fieldDefaults = {};
+      }
+      else
+        setFields([])
+    }catch (error) {
+      console.log(error)
+    }
+  }
+  const handleDialogClose = async () => {
+    clearErrors()
+    handleSetDefaults()
+    handleToggleDialogs('shopCategory')
+  }
+
+  useEffect(()=>{
+    handleGetClassName()
+  },[])
+  useEffect(() => {
+    if(className != null)
+      handleGetField()
+  },[className])
+
+  useEffect(() => {
+    console.log(fieldData)
+  }, [fieldData]);
+  return (
+    <>
+      <DialogTitle id='confirmation-dialog-title' sx={{ padding: 0, marginBottom: 5 }}>
+        <Box
+          className='sidebar-header'
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            backgroundColor: 'background.default',
+            p: theme => theme.spacing(3, 3.255, 3, 5.255)
+          }}
+        >
+          <Typography variant='h6'>{'اضافة'}</Typography>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Close fontSize='small' onClick={handleDialogClose} sx={{ cursor: 'pointer' }} />
+          </Box>
+        </Box>
+      </DialogTitle>
+
+      <DialogContent className='dialog-body'>
+        <form
+          onSubmit={handleSubmit(values => {
+            handleSave(values)
+          })}
+        >
+          <Grid container spacing={6} mt={2}>
+            {Object.entries(fields).map(([i, field]) => (
+                <Grid key={i} item size={field.grid}>
+                {/* STRING / TEXT / INT / DOUBLE */}
+                {["String", "Int", "Double"].includes(field.type) && (
+                  <TextField
+                    {...register(field.registerField)}
+                    type="text"
+                    fullWidth
+                    label={field.field}
+                    placeholder={field.field}
+                    value={watch(field.registerField)}
+                    onChange={(e) => setValue(field.registerField, e.target.value)}
+                  />
+                )}
+
+                {/* BOOLEAN */}
+                {field.type === "Bool" && (
+                  <FormControlLabel
+                    control={
+                      <Checkbox
+                        checked={watch(field.registerField) || false}
+                        onChange={(e) => setValue(field.registerField, e.target.checked)}
+                      />
+                    }
+                    label={field.field}
+                  />
+                )}
+
+                {/* CLASS / AUTOCOMPLETE */}
+                {field.type === "Class" && (
+                  <FormControl fullWidth>
+                    <Autocomplete
+                      value={watch(field.registerField)}
+                      options={handleGetData(field)}
+                      isOptionEqualToValue={(option, value) => option?.id === value?.id}
+                      onChange={(e, value) => setValue(field.registerField, value)}
+                      getOptionLabel={(option) => option?.name || ""}
+                      renderInput={(params) => (
+                        <TextField
+                          {...params}
+                          label={field.field}
+                          onMouseDown={() => handleGetData(field)}
+                        />
+                      )}
+                    />
+                  </FormControl>
+                )}
+              </Grid>
+            ))}
+          </Grid>
+          <DialogActions sx={{ pb: { xs: 8 }, justifyContent: 'center' }}>
+            <Button type='submit' variant='contained' sx={{ mr: 2 }} disabled={IsSubmitting}>
+              {IsSubmitting ? (
+                <CircularProgress
+                  sx={{
+                    color: 'common.white',
+                    width: '20px !important',
+                    height: '20px !important',
+                    mr: theme => theme.spacing(2)
+                  }}
+                />
+              ) : null}
+              حفظ
+            </Button>
+            <Button variant='outlined' color='secondary' onClick={() => handleDialogClose()}>
+              الغاء
+            </Button>
+          </DialogActions>
+        </form>
+      </DialogContent>
+    </>
+  )
+}
+
+export default GenericFormDialog

package/src/views/genericTable/QueryEditor.js

@@ -0,0 +1,99 @@
+import React, {useState, useEffect} from 'react';
+import {Editor, EditorState, CompositeDecorator, ContentState} from 'draft-js';
+import 'draft-js/dist/Draft.css';
+
+// Strategy to find tokens starting with @ or #
+const findAtHashEntities = (contentBlock, callback) => {
+  const text = contentBlock.getText();
+  const regex = /[@#]\w+/g;
+  let matchArr;
+  while ((matchArr = regex.exec(text)) !== null) {
+    callback(matchArr.index, matchArr.index + matchArr[0].length);
+  }
+};
+
+// Strategy to find plain double-quote characters
+const findQuoteEntities = (contentBlock, callback) => {
+  const text = contentBlock.getText();
+  const regex = /"/g;
+  let matchArr;
+  while ((matchArr = regex.exec(text)) !== null) {
+    callback(matchArr.index, matchArr.index + 1);
+  }
+};
+
+// Component to style @ and # tokens in primary color
+const AtHashSpan = (props) => (
+  <span style={{color: '#e91e63', fontWeight: 'bold'}}>{props.children}</span>
+);
+
+// Component to style double quotes in blue
+const QuoteSpan = (props) => (
+  <span style={{color: '#2196f3'}}>
+    {props.children}
+  </span>
+);
+
+// Composite decorator for Draft.js
+const decorator = new CompositeDecorator([
+  {strategy: findAtHashEntities, component: AtHashSpan},
+  {strategy: findQuoteEntities, component: QuoteSpan}
+]);
+
+/**
+ * SqlEditor component
+ * Props:
+ * - builderModel: object containing rawSql field
+ * - setBuilderModel: setter to update builderModel
+ */
+export default function SqlEditor({builderModel, setBuilderModel}) {
+  // Initialize editor state from builderModel.rawSql or empty
+  const [editorState, setEditorState] = useState(() => {
+    const text = builderModel.rawSql || '';
+    const contentState = ContentState.createFromText(text);
+    return text
+      ? EditorState.createWithContent(contentState, decorator)
+      : EditorState.createEmpty(decorator);
+  });
+
+  // Sync external changes to rawSql into editor
+  useEffect(() => {
+    const currentText = editorState.getCurrentContent().getPlainText();
+    if (builderModel.rawSql !== currentText) {
+      const contentState = ContentState.createFromText(builderModel.rawSql || '');
+      const newState = builderModel.rawSql
+        ? EditorState.createWithContent(contentState, decorator)
+        : EditorState.createEmpty(decorator);
+      setEditorState(newState);
+    }
+  }, [builderModel.rawSql]);
+
+  // Central change handler
+  const handleEditorChange = (newState) => {
+    setEditorState(newState);
+    const text = newState.getCurrentContent().getPlainText();
+    setBuilderModel({...builderModel, rawSql: text});
+  };
+
+  // Container inline styles
+  const containerStyle = {
+    border: '2px solid #e91e63', // pink primary
+    borderRadius: '6px',
+    backgroundColor: '#fafafa',
+    padding: '12px',
+    minHeight: '240px',
+    fontFamily: 'Source Code Pro, monospace',
+    fontSize: '14px',
+    overflowY: 'auto'
+  };
+
+  return (
+    <div style={containerStyle}>
+      <Editor
+        editorState={editorState}
+        onChange={handleEditorChange}
+        placeholder="Write your SQL query here..."
+      />
+    </div>
+  );
+}

package/src/views/genericTable/RegexTextEditor.js

@@ -0,0 +1,182 @@
+import React, {useEffect, useState, useRef} from 'react';
+import {
+  Box,
+  Typography,
+  Paper,
+  Button,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  Select,
+  TextField,
+  useTheme
+} from '@mui/material';
+import DynamicValueList from "views/genericTable/BuilderExpressionParams";
+import {Editor, EditorState, CompositeDecorator} from 'draft-js';
+import 'draft-js/dist/Draft.css';
+import {TreeView, TreeItem} from '@mui/lab';
+import {ExpandMore, ChevronRight} from '@mui/icons-material';
+import Divider from "@mui/material/Divider";
+
+const propertyTypes = ['Int', 'Double', 'String', 'Bool', 'Enum','DateTime'];
+
+// Match @word
+const AT_REGEX = /@\w+/g;
+
+function findAtEntities(contentBlock, callback, contentState) {
+  const text = contentBlock.getText();
+  let matchArr, start;
+  while ((matchArr = AT_REGEX.exec(text)) !== null) {
+    start = matchArr.index;
+    callback(start, start + matchArr[0].length);
+  }
+}
+
+const AtSpan = (props) => {
+  const theme = useTheme();
+  return (
+    <strong style={{color: theme.palette.primary.main, fontWeight: 'bold'}}>
+      {props.children}
+    </strong>
+  );
+};
+
+const decorator = new CompositeDecorator([
+  {
+    strategy: findAtEntities,
+    component: AtSpan,
+  },
+]);
+
+const ExpressionEditor = ({
+                            addComputedField,
+                            handleUpdateComputedField,
+                            oldValue,
+                            selectionParams,
+                            setSelectionParams
+                          }) => {
+  const [headerName, setHeaderName] = useState('');
+  const [editorState, setEditorState] = useState(() => EditorState.createEmpty(decorator));
+  const [propertyType, setPropertyType] = useState('');
+  const [oldHeaderName, setOldHeaderName] = useState('');
+  const [title, setTitle] = useState('');
+  const editorRef = useRef(null);
+
+  const handleHeaderChange = (e) => {
+    const sanitized = e.target.value.replace(/[^a-zA-Z0-9_]/g, '');
+    setHeaderName(sanitized);
+  };
+
+  useEffect(() => {
+    if (oldValue) {
+      setHeaderName(oldValue.headerName);
+      setOldHeaderName(oldValue.headerName);
+      setEditorState(EditorState.createWithText(oldValue.expression || '', decorator));
+      setPropertyType(oldValue.propertyType);
+      setTitle(oldValue.title || '');
+    }
+  }, [oldValue]);
+
+  const getPlainText = () => editorState.getCurrentContent().getPlainText();
+
+  return (
+    <Box sx={{p: 3, direction: 'ltr', textAlign: 'left', minHeight: 525}}>
+      <Typography variant="h6" gutterBottom>
+        Computed Field
+      </Typography>
+
+      <Box sx={{display: 'flex', gap: 3, alignItems: 'flex-start'}}>
+        {/* Left Section - Field Configuration */}
+        <Box sx={{flex: 2}}>
+          <TextField
+            label="Field Name (Header)"
+            value={headerName}
+            onChange={handleHeaderChange}
+            fullWidth
+            variant="outlined"
+            size="small"
+            helperText="Only letters, numbers, and underscores are allowed"
+            sx={{mb: 2}}
+            inputProps={{style: {direction: 'ltr', textAlign: 'left'}}}
+          />
+          <TextField
+            label="Title (Display Name)"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            fullWidth
+            variant="outlined"
+            size="small"
+            sx={{mb: 2}}
+            inputProps={{style: {direction: 'ltr', textAlign: 'left'}}}
+          />
+
+          <FormControl fullWidth sx={{mb: 2}} size="small">
+            <InputLabel>Property Type</InputLabel>
+            <Select
+              value={propertyType}
+              label="Property Type"
+              onChange={(e) => setPropertyType(e.target.value)}
+            >
+              {propertyTypes.map((type) => (
+                <MenuItem key={type} value={type}>
+                  {type}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+
+          <Paper variant="outlined" sx={{p: 2}}>
+            <div style={{minHeight: 120, cursor: 'text'}} onClick={() => editorRef.current.focus()}>
+              <Editor
+                editorState={editorState}
+                onChange={setEditorState}
+                placeholder="e.g. Items.Sum(UnitPrice * Quantity) / @Discount"
+                ref={editorRef}
+              />
+            </div>
+          </Paper>
+
+          <Paper variant="outlined" sx={{p: 2, mt: 2}}>
+            <Button
+              variant="contained"
+              disabled={
+                headerName.trim().length === 0 ||
+                getPlainText().trim().length === 0 ||
+                propertyType.length === 0
+              }
+              onClick={() => {
+                const expression = getPlainText();
+                if (oldValue) {
+                  handleUpdateComputedField(
+                    oldHeaderName,
+                    expression,
+                    headerName,
+                    propertyType,
+                    title
+                  );
+                  setOldHeaderName(headerName);
+                } else {
+                  addComputedField(expression, headerName, propertyType, title);
+                }
+              }}
+            >
+              {oldValue ? 'Update' : 'Add'}
+            </Button>
+          </Paper>
+        </Box>
+        {/* Right Section - Parameters */}
+        <Divider orientation="vertical" flexItem sx={{ mx: 2 }} />
+
+        <Box sx={{flex: 1, pl: 2, height: '100%'}}>
+          <DynamicValueList
+            items={selectionParams}
+            onChange={setSelectionParams}
+            isView = {true}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default ExpressionEditor;