Feat/featws conditions

.env.development

@@ -2,4 +2,7 @@ JAMIE_UI_BASE_URL=http://localhost:3000
 
 JAMIE_KEYCLOAK_BASE_URL=http://localhost:8080
 
-JAMIE_API_BASE_URL=https://api.jamie.g6tech.com.br
+JAMIE_API_BASE_URL=https://api.jamie.g6tech.com.br
+
+# The conditions feature requires FeatWS to be installed and configured.
+# JAMIE_FEATURE_CONDITIONS=true

src/api/services/MenuService.ts

@@ -4,6 +4,8 @@ export const ALL_MENU_PROPERTIES = `
 id
 name
 mustDeferChanges
+hasConditions
+parameters
 createdAt
 updatedAt
 version
@@ -64,6 +66,7 @@ items {
   createdAt
   updatedAt
   version
+  rules
 }
 `;
 

src/components/Menu/Form/Form.tsx

@@ -26,7 +26,7 @@ import { useTranslation } from 'react-i18next';
 import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
 import { DateTime } from 'luxon';
-import { MENU_VALIDATION } from '../../../constants';
+import { JAMIE_FEATURE_CONDITIONS, MENU_VALIDATION } from '../../../constants';
 import { EnumInputAction, FormAction, IMenuMetaWithErrors, MenuMetaType } from '../../../types';
 import './styles.css';
 
@@ -59,6 +59,10 @@ interface Props {
   setMustDeferChanges: (mustDeferChanges: boolean) => void;
   meta: IMenuMetaWithErrors[];
   setMeta: (meta: IMenuMetaWithErrors[]) => void;
+  hasConditions: boolean;
+  setHasConditions: (hasConditions: boolean) => void;
+  parameters: string;
+  setParameters: (parameters: string) => void;
   loadingSubmit: boolean;
   onSubmit: () => void;
   onBack: () => void;
@@ -74,6 +78,10 @@ export const MenuForm = ({
   setMustDeferChanges,
   meta,
   setMeta,
+  hasConditions,
+  setHasConditions,
+  parameters,
+  setParameters,
   loadingSubmit,
   onSubmit,
   onBack,
@@ -425,6 +433,52 @@ export const MenuForm = ({
         )}
       </Draggable>
     ));
+
+  const renderHasConditionCheckbox = () => {
+    if (!JAMIE_FEATURE_CONDITIONS) return null;
+    return (
+      <Box sx={{ mt: '1rem' }}>
+        <FormControlLabel
+          control={
+            <Checkbox
+              id="hasConditions"
+              checked={hasConditions}
+              disabled={action === FormAction.UPDATE}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                const { checked } = e.target;
+                setHasConditions(checked);
+              }}
+              color="primary"
+            />
+          }
+          label={`${t('menu.fields.hasConditions')}?`}
+        />
+      </Box>
+    );
+  };
+
+  const renderParameters = () => {
+    if (!hasConditions) return null;
+    return (
+      <TextField
+        id="parameters"
+        label="Parameters"
+        multiline
+        minRows={3}
+        value={parameters}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          const { value } = e.target;
+          setParameters(value);
+        }}
+        InputLabelProps={{
+          shrink: true,
+        }}
+        sx={{ width: '16rem' }}
+        className="bg-white"
+      />
+    );
+  };
+
   return (
     <Form onSubmit={handleFormSubmit}>
       <Box sx={{ flex: '0 1 auto', flexDirection: 'column' }}>
@@ -469,6 +523,8 @@ export const MenuForm = ({
             label={t('menu.fields.mustDeferChanges')}
           />
         </Box>
+        {renderHasConditionCheckbox()}
+        {renderParameters()}
         <Typography variant="h3" sx={{ mt: '1rem' }}>
           {t('menu.fields.meta.title', { count: 2 })}
         </Typography>

src/components/Menu/Items/OperationScreen.tsx

@@ -111,6 +111,7 @@ export const OperationScreen = ({
             menuId,
             defaultTemplate,
             action,
+            rules,
             ...rest
           } = node;
           let meta = Object.keys(rest.meta).reduce((acc, key) => {
@@ -166,6 +167,7 @@ export const OperationScreen = ({
             startPublication,
             endPublication,
             meta,
+            rules,
             children: children && formatNodes(children),
             id: id === -1 ? undefined : id,
           };
@@ -487,6 +489,31 @@ export const OperationScreen = ({
       ));
   };
 
+  const renderConditions = () => {
+    if (!data.menu.hasConditions) return null;
+    return (
+      <Box sx={{ mt: '2rem', width: '100%' }}>
+        <Typography variant="h3">{t('menu.preview.inputs.conditions.title')}</Typography>
+        <TextField
+          type="text"
+          label="Rules"
+          multiline
+          minRows={3}
+          InputLabelProps={{ shrink: true }}
+          value={editingNode.rules}
+          onChange={e => {
+            setLabelError('');
+            setEditingNode({ ...editingNode, rules: e.target.value });
+          }}
+          sx={{
+            mt: '2rem',
+            width: '100%',
+          }}
+        />
+      </Box>
+    );
+  };
+
   switch (operationScreen) {
     case EnumInputActionScreen.SELECTING_ACTION:
       return (
@@ -912,6 +939,7 @@ export const OperationScreen = ({
               <Divider sx={{ mt: '1.5rem' }} />
             </Box>
           )}
+          {renderConditions()}
           <Box
             sx={{
               display: 'flex',
@@ -1205,6 +1233,7 @@ export const OperationScreen = ({
               <Divider sx={{ mt: '1.5rem' }} />
             </Box>
           )}
+          {renderConditions()}
           <Box
             sx={{
               display: 'flex',

src/constants/env.ts

@@ -9,3 +9,6 @@ const getConfig = varname => {
 export const JAMIE_UI_BASE_URL = getConfig('${JAMIE_UI_BASE_URL}');
 export const JAMIE_KEYCLOAK_BASE_URL = getConfig('${JAMIE_KEYCLOAK_BASE_URL}');
 export const JAMIE_API_BASE_URL = getConfig('${JAMIE_API_BASE_URL}');
+
+// The conditions feature requires FeatWS to be installed and configured.
+export const JAMIE_FEATURE_CONDITIONS = getConfig('${JAMIE_FEATURE_CONDITIONS}');

src/i18n/locales/en/translation.json

@@ -201,6 +201,7 @@
     "fields": {
       "name": "Name",
       "mustDeferChanges": "Mandatory deferral",
+      "hasConditions": "Has Conditions",
       "items": "Items",
       "template": "Template",
       "templateFormat": {
@@ -268,6 +269,9 @@
         },
         "meta": {
           "placeholder": "Enter the menu item's {{meta}}..."
+        },
+        "conditions": {
+          "title": "Conditions"
         }
       },
       "buttons": {

src/i18n/locales/pt-BR/translation.json

@@ -201,6 +201,7 @@
     "fields": {
       "name": "Nome",
       "mustDeferChanges": "Deferimento obrigatório",
+      "hasConditions": "Tem Condições",
       "items": "Itens",
       "template": "Template",
       "templateFormat": {
@@ -268,6 +269,9 @@
         },
         "meta": {
           "placeholder": "Digite o valor do {{meta}}..."
+        },
+        "conditions": {
+          "title": "Condições"
         }
       },
       "buttons": {

src/pages/Menu/Create/Create.tsx

@@ -30,6 +30,10 @@ export const CreateMenu = () => {
 
   const [loadingSubmit, setLoadingSubmit] = React.useState<boolean>(false);
 
+  const [hasConditions, setHasConditions] = React.useState<boolean>(false);
+
+  const [parameters, setParameters] = React.useState<string>();
+
   const [createMenu] = useMutation(MenuService.CREATE_MENU);
 
   const onBackClickHandler = () => {
@@ -46,7 +50,7 @@ export const CreateMenu = () => {
       return rest;
     });
     createMenu({
-      variables: { menu: { name, mustDeferChanges, meta } },
+      variables: { menu: { name, mustDeferChanges, meta, hasConditions, parameters } },
       onCompleted: data => {
         setLoadingSubmit(false);
         dispatch({
@@ -92,6 +96,10 @@ export const CreateMenu = () => {
         setMustDeferChanges={setMustDeferChanges}
         meta={metaWithErrors}
         setMeta={setMetaWithErrors}
+        hasConditions={hasConditions}
+        setHasConditions={setHasConditions}
+        parameters={parameters}
+        setParameters={setParameters}
         loadingSubmit={loadingSubmit}
         onSubmit={onSubmit}
         onBack={onBackClickHandler}

src/pages/Menu/Edit/Edit.tsx

@@ -35,6 +35,10 @@ export const EditMenu = () => {
 
   const [mustDeferChanges, setMustDeferChanges] = React.useState<boolean>(false);
 
+  const [hasConditions, setHasConditions] = React.useState<boolean>(false);
+
+  const [parameters, setParameters] = React.useState<string>();
+
   const [metaWithErrors, setMetaWithErrors] = React.useState<IMenuMetaWithErrors[]>([]);
 
   const [loadingSubmit, setLoadingSubmit] = React.useState<boolean>(false);
@@ -45,6 +49,8 @@ export const EditMenu = () => {
     if (loaded || !data) return;
     setName(data.menu.name);
     setMustDeferChanges(data.menu.mustDeferChanges);
+    setHasConditions(data.menu.hasConditions);
+    setParameters(data.menu.parameters);
     setMetaWithErrors(
       data?.menu.meta
         .map(m => {
@@ -83,7 +89,9 @@ export const EditMenu = () => {
       });
     const updatedName = name !== data.menu.name ? name : undefined;
     updateMenu({
-      variables: { menu: { id: Number(id), name: updatedName, mustDeferChanges, meta } },
+      variables: {
+        menu: { id: Number(id), name: updatedName, mustDeferChanges, meta, parameters },
+      },
       onCompleted: data => {
         setLoadingSubmit(false);
         dispatch({
@@ -148,6 +156,10 @@ export const EditMenu = () => {
         setNameError={setNameError}
         mustDeferChanges={mustDeferChanges}
         setMustDeferChanges={setMustDeferChanges}
+        hasConditions={hasConditions}
+        setHasConditions={setHasConditions}
+        parameters={parameters}
+        setParameters={setParameters}
         meta={metaWithErrors}
         setMeta={setMetaWithErrors}
         loadingSubmit={loadingSubmit}

src/pages/Menu/Show/Show.tsx

@@ -14,6 +14,7 @@ import {
   NotificationContext,
   openDefaultErrorNotification,
 } from '../../../contexts/NotificationContext';
+import { JAMIE_FEATURE_CONDITIONS } from '../../../constants';
 
 export const ShowMenu = () => {
   const { t, i18n } = useTranslation();
@@ -124,6 +125,21 @@ export const ShowMenu = () => {
         </Box>
       ));
   };
+
+  const renderHasConditions = () => {
+    if (!JAMIE_FEATURE_CONDITIONS) return null;
+    return (
+      <Box className="space-x-1.5 flex flex-row items-center">
+        <Typography variant="h5" component="h5" className="mb-2">
+          {t('menu.fields.hasConditions')}?
+        </Typography>
+        <Typography variant="body1" component="p">
+          <b>{data?.menu.hasConditions ? t('common.yes') : t('common.no')}</b>
+        </Typography>
+      </Box>
+    );
+  };
+
   if (loading) return <Loading />;
 
   if (error)
@@ -216,6 +232,7 @@ export const ShowMenu = () => {
             <b>{data?.menu.mustDeferChanges ? t('common.yes') : t('common.no')}</b>
           </Typography>
         </Box>
+        {renderHasConditions()}
       </Box>
       <Divider />
       <Typography variant="h3" component="h3" sx={{ py: '1rem' }}>

src/types/model.ts

@@ -6,6 +6,8 @@ export interface IMenu {
   id: number;
   name: string;
   mustDeferChanges: boolean;
+  hasConditions: boolean;
+  parameters?: string;
   meta: IMenuMeta[];
   items: IMenuItem[];
   template?: string;
@@ -22,6 +24,7 @@ export interface IMenu {
 
 export interface IMenuItem {
   id: number;
+  menuId?: number;
   label: string;
   order: number;
   meta: IMenuItemMeta;
@@ -39,7 +42,7 @@ export interface IMenuItem {
     [EnumTemplateFormat.XML]: string;
     [EnumTemplateFormat.PLAIN]: string;
   };
-  menuId?: number;
+  rules?: string;
   createdAt?: string;
   updatedAt?: string;
   version?: number;