robobyte-front-builder 1.0.0

package/src/views/genericTable/ReportBuilderSaveDialog.js

@@ -0,0 +1,153 @@
+import React, {useEffect, useState} from 'react'
+import {
+  Box,
+  TextField,
+  Button,
+  DialogContent,
+  DialogActions, CircularProgress, FormControl, InputLabel, Select, MenuItem
+} from '@mui/material'
+import {useForm, Controller} from 'react-hook-form'
+import {Endpoints, Services} from "services/Endpoints";
+
+/**
+ * A form component for editing report name and description using React Hook Form.
+ * To be embedded inside a parent Dialog.
+ *
+ * Props:
+ * - builderMetadata: { name: string, description: string }
+ * - setBuilderMetadata: (updater) => void
+ * - handleSave: (data: { name: string, description: string }) => void
+ * - handleClose: () => void
+ */
+const ReportBuilderSaveForm = ({
+                                 builderMetadata = {},
+                                 setBuilderMetadata,
+                                 dialog,
+                                 handleRefresh,
+                                 handleToggleDialogs,
+                                 value = {},
+                               }) => {
+  const {control, handleSubmit, reset} = useForm({
+
+    defaultValues: {
+      name: builderMetadata.name || '',
+      description: builderMetadata.description || '',
+      type: 'Report',
+      pageId: null
+    }
+  })
+  const [isLoading, setIsLoading] = useState(false)
+  const onSubmit = async values => {
+    try {
+      console.log(values)
+      setIsLoading(true)
+      let data = {
+        name: values.name,
+        description: values.description,
+        pageId: values.pageId,
+        type: values.type,
+        value: JSON.stringify(value),
+      }
+      const response = await Services.PostService(Endpoints.ReportBuilder.Post.AddUpdate, true, data, {
+        id: builderMetadata.isNew ? 0 : builderMetadata.id,
+      });
+      if (response) {
+        setBuilderMetadata(preValue => ({
+          ...preValue,
+          name: values.name,
+          description: values.description,
+          pageId: values.type === 'Report' ? null : values.pageId,
+          type: values.type,
+          id: response.data
+        }))
+        if(!builderMetadata.isNew)
+          handleRefresh(builderMetadata.id)
+        handleToggleDialogs(dialog)
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    reset({
+      name: builderMetadata.name,
+      description: builderMetadata.description,
+      pageId: builderMetadata.pageId,
+      type: builderMetadata.type,
+    })
+  }, [])
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <DialogContent dividers>
+        <Box sx={{display: 'flex', flexDirection: 'column', gap: 2}}>
+          <Controller
+            name="name"
+            control={control}
+            render={({field}) => (
+              <TextField
+                label="name"
+                fullWidth
+                margin="dense"
+                {...field}
+              />
+            )}
+          />
+          <Controller
+            name="description"
+            control={control}
+            render={({field}) => (
+              <TextField
+                label="Description"
+                fullWidth
+                margin="dense"
+                multiline
+                rows={4}
+                {...field}
+              />
+            )}
+          />
+          <Controller
+            name="pageId"
+            control={control}
+            render={({field}) => (
+              <TextField
+                label="PageId"
+                fullWidth
+                margin="dense"
+                {...field}
+              />
+            )}
+          />
+          <Controller
+            name="type"
+            control={control}
+            render={({field}) => (
+              <FormControl fullWidth margin="dense">
+                <InputLabel>Type</InputLabel>
+                <Select {...field} label="Type">
+                  <MenuItem value="Report">Report</MenuItem>
+                  <MenuItem value="SystemPage">SystemPage</MenuItem>
+                  <MenuItem value="SystemDto">SystemDto</MenuItem>
+                </Select>
+              </FormControl>
+            )}
+          />
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={() => handleToggleDialogs(dialog)} disabled={isLoading}>
+          Cancel
+        </Button>
+        <Button type="submit" variant="contained" disabled={isLoading}>
+          {isLoading ? <CircularProgress size={24}/> : 'Save'}
+        </Button>
+      </DialogActions>
+    </form>
+  )
+}
+
+export default ReportBuilderSaveForm

package/src/views/genericTable/RoutingSettingDialog.js

@@ -0,0 +1,189 @@
+import React, { useEffect, useState } from 'react'
+import {
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TextField,
+  Box,
+  Typography,
+  Stack,
+  Button,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem
+} from '@mui/material'
+
+// ------------------------------------
+// Preview component that highlights {{params}}
+// ------------------------------------
+function ClickableField({ value = '' }) {
+  const regex = /\{\{(.*?)\}\}/g
+  const parts = []
+  let lastIndex = 0
+  let match
+
+  while ((match = regex.exec(value)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push({ text: value.slice(lastIndex, match.index), isParam: false })
+    }
+    parts.push({ text: match[1], isParam: true })
+    lastIndex = regex.lastIndex
+  }
+  if (lastIndex < value.length) {
+    parts.push({ text: value.slice(lastIndex), isParam: false })
+  }
+
+  return (
+    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 2 }} dir="ltr">
+      {parts.map((part, idx) =>
+        part.isParam ? (
+          <Typography
+            key={idx}
+            sx={{
+              cursor: 'pointer',
+              bgcolor: 'primary.light',
+              px: 1,
+              borderRadius: 1,
+              fontWeight: 600
+            }}
+          >
+            {`{{${part.text}}}`}
+          </Typography>
+        ) : (
+          <Typography key={idx}>{part.text}</Typography>
+        )
+      )}
+    </Box>
+  )
+}
+
+// ------------------------------------
+// Helper to extract param names from {{param}}
+// ------------------------------------
+function extractParams(pattern = '') {
+  const regex = /\{\{(.*?)\}\}/g
+  const params = []
+  let match
+  while ((match = regex.exec(pattern)) !== null) {
+    params.push(match[1])
+  }
+  return params
+}
+
+// ------------------------------------
+// Main Dialog
+// ------------------------------------
+export default function RoutingSettingDialog({ open, value, onChange, onClose }) {
+  const emptyRouting = { fieldName: '', pattern: '', params: [], type: 'Route', pageId: null, externalFilterJson: '' }
+  const [localValue, setLocalValue] = useState(emptyRouting)
+
+  // Sync when editing
+  useEffect(() => {
+    if (value) {
+      setLocalValue(value)
+    } else {
+      setLocalValue(emptyRouting)
+    }
+  }, [value, open]) // reset on open/close toggle
+
+  const handleSave = () => {
+    const params = extractParams(localValue.pattern)
+    onChange({ ...localValue, params }) // commit with params
+    onClose?.()
+  }
+
+  return (
+    <>
+      <DialogTitle sx={{ direction: 'ltr', textAlign: 'left' }}>
+        {value?.index != null ? 'Update Routing' : 'Add Routing'}
+      </DialogTitle>
+
+      <DialogContent dir="ltr">
+        <Stack spacing={2}>
+          {/* Field Name */}
+          <TextField
+            fullWidth
+            label="Field Name"
+            value={localValue.fieldName}
+            onChange={(e) => setLocalValue({ ...localValue, fieldName: e.target.value })}
+            placeholder="e.g. userId"
+            inputProps={{ style: { textAlign: 'left', direction: 'ltr' } }}
+          />
+
+          {/* Type Selector */}
+          <FormControl fullWidth>
+            <InputLabel>Type</InputLabel>
+            <Select
+              label="Type"
+              value={localValue.type || 'Route'}
+              onChange={(e) => setLocalValue({ ...localValue, type: e.target.value })}
+            >
+              <MenuItem value="Route">Route</MenuItem>
+              <MenuItem value="Filter">Filter</MenuItem>
+            </Select>
+          </FormControl>
+
+          {/* Route-specific inputs */}
+          {(!localValue.type || localValue.type === 'Route') && (
+            <>
+              <TextField
+                fullWidth
+                label="Route Pattern"
+                value={localValue.pattern}
+                onChange={(e) => setLocalValue({ ...localValue, pattern: e.target.value })}
+                placeholder="/profile/{{id}}/details/{{tab}}"
+                inputProps={{ style: { textAlign: 'left', direction: 'ltr' } }}
+              />
+
+              <TextField
+                fullWidth
+                label="Custom Route Script (JS)"
+                value={localValue.script || ""}
+                onChange={(e) => setLocalValue({ ...localValue, script: e.target.value })}
+                placeholder={`// Example:\nswitch(row.status) {\n  case "active": return "/active/" + row.id;\n  case "archived": return "/archived/" + row.id;\n  default: return "/profile/" + row.id;\n}`}
+                multiline
+                minRows={6}
+                inputProps={{ style: { fontFamily: "monospace", direction: "ltr", textAlign: "left" } }}
+              />
+
+              {/* Live Preview */}
+              <ClickableField value={localValue.pattern} />
+            </>
+          )}
+
+          {/* Filter-specific inputs */}
+          {localValue.type === 'Filter' && (
+            <>
+              <TextField
+                fullWidth
+                label="Page ID"
+                value={localValue.pageId ?? ''}
+                onChange={(e) => setLocalValue({ ...localValue, pageId: e.target.value })}
+                placeholder="Target pageId"
+                inputProps={{ style: { textAlign: 'left', direction: 'ltr' } }}
+              />
+              <TextField
+                fullWidth
+                label="External Filter (JSON with {{placeholders}})"
+                value={localValue.externalFilterJson || ''}
+                onChange={(e) => setLocalValue({ ...localValue, externalFilterJson: e.target.value })}
+                placeholder='{"Tfilter":[{"path":"OrderId","value":"{{id}}","compare":"Equal"}]}'
+                multiline
+                minRows={6}
+                inputProps={{ style: { fontFamily: "monospace", direction: "ltr", textAlign: "left" } }}
+              />
+            </>
+          )}
+        </Stack>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button variant="contained" onClick={handleSave}>
+          Save
+        </Button>
+      </DialogActions>
+    </>
+  )
+}