@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/common/syncWithServer/SyncWithServerDialog.jsx

@@ -0,0 +1,170 @@
+import React, { useEffect, useState } from 'react';
+
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import { syncWithServer } from '@/common/services/SyncWithServer';
+import { showToast } from '@/common/toaster/toaster';
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControlLabel,
+  FormGroup,
+  Typography,
+} from '@mui/material';
+import { SyncWithServerDialogSkeleton } from '@/common/syncWithServer/SyncWithServerDialogSkeleton';
+import PropTypes from 'prop-types';
+import { executeQuery } from '@/common/services/GlobalApis';
+
+const SyncWithServerDialog = ({ featureUUID, isOpen, handleClose, dataTestId }) => {
+  const [servers, setServers] = useState([]);
+  const [selectedServers, setSelectedServers] = useState([]);
+  const { translate } = useTranslateProvider();
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const loadServers = async () => {
+      setLoading((cur) => !cur);
+      try {
+        let serversList = servers || [];
+        if (!servers.length) {
+          const serverList = await executeQuery({
+            code: 'get_active_server_list',
+            parameters: {},
+          });
+          serversList = serverList?.data?.result;
+          setServers(() => serversList);
+        }
+        const selectedServerList = await executeQuery({
+          code: 'get_server_list_which_are_in_sync_for_auto_sync_configuration',
+          parameters: { featureUUID },
+        });
+        const selectedServerIds = selectedServerList?.data?.result.map(
+          ({ server_name }) => serversList?.find((server) => server.server_name === server_name)?.id
+        );
+
+        setSelectedServers(() => selectedServerIds);
+        // setLoading((cur) => !cur);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading((cur) => !cur);
+      }
+    };
+
+    if (isOpen) {
+      loadServers();
+    }
+  }, [featureUUID]);
+
+  const handleSelection = (e) => {
+    const { value } = e.target;
+    const serverId = parseInt(value);
+    if (selectedServers.includes(serverId)) {
+      setSelectedServers(() => [...selectedServers.filter((id) => serverId !== id)]);
+    } else {
+      setSelectedServers(() => [...selectedServers, serverId]);
+    }
+  };
+
+  const handleCancel = () => {
+    handleClose();
+  };
+
+  const handleSaveClick = async () => {
+    try {
+      const reqData = {
+        featureUUID,
+        serverlist: selectedServers,
+      };
+      handleClose();
+      await syncWithServer(reqData);
+      showToast({ message: 'Synced Successfully', type: 'success' });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <SyncWithServerDialogSkeleton isOpen={isOpen} loading={loading}>
+      <Dialog
+        open={isOpen}
+        onClose={handleCancel}
+        maxWidth="xs"
+        fullWidth
+        sx={{
+          '& .MuiDialog-paper': {
+            position: 'absolute',
+            top: '5%', // Position from the top of the screen
+            margin: 0,
+            transform: 'translate(0, 0)', // Remove centering
+          },
+        }}
+        data-testid={dataTestId}
+      >
+        <DialogTitle className="p-2.5 px-5">
+          <div>
+            <Typography variant="body1" className="flex font-medium text-lg text-customBlue" component="div">
+              {translate('Sync with Server')}
+            </Typography>
+          </div>
+        </DialogTitle>
+        <DialogContent dividers>
+          <Typography variant="body2" gutterBottom>
+            {translate('Select Server with you want to sync this feature')}
+          </Typography>
+          <FormGroup>
+            {servers?.map((server) => (
+              <FormControlLabel
+                key={server.id}
+                control={
+                  <Checkbox
+                    checked={selectedServers.includes(server.id)}
+                    value={server.id}
+                    onChange={handleSelection}
+                  />
+                }
+                label={server.server_name}
+                sx={{
+                  '& .MuiFormControlLabel-label': {
+                    fontSize: '12px',
+                  },
+                }}
+              />
+            ))}
+          </FormGroup>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            size="small"
+            variant="contained"
+            onClick={handleCancel}
+            color="secondary"
+            data-testid="syncwithserver-button-close"
+          >
+            {translate('Cancel')}
+          </Button>
+          <Button
+            size="small"
+            variant="contained"
+            onClick={handleSaveClick}
+            color="primary"
+            data-testid="syncwithserver-button-save"
+          >
+            {translate('Save')}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </SyncWithServerDialogSkeleton>
+  );
+};
+
+SyncWithServerDialog.propTypes = {
+  featureUUID: PropTypes.any,
+  isOpen: PropTypes.any,
+  handleClose: PropTypes.any,
+  dataTestId: PropTypes.any,
+};
+export default SyncWithServerDialog;

package/src/common/syncWithServer/SyncWithServerDialogSkeleton.jsx

@@ -0,0 +1,67 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { getUseSkeleton } from '@/store/reducers/SkeletonReducer';
+export const SyncWithServerDialogSkeleton = ({ isOpen, children, loading }) => {
+  const useSkeleton = useSelector(getUseSkeleton);
+  if (!useSkeleton) {
+    return children;
+  }
+  if (!loading) return children;
+
+  return (
+    <>
+      {isOpen && (
+        <div className="fixed inset-0 flex items-start justify-center pt-[3%] z-[1300] bg-[rgba(0,0,0,0.5)] shadow-lg ">
+          <div className="bg-white rounded-md shadow-lg w-full max-w-md">
+            <div className="p-4 border-b">
+              <div className="bg-gray-300 animate-pulse rounded-sm h-[24px] w-[150px]"></div>
+            </div>
+
+            <div className="p-4 border-b">
+              <div className="bg-gray-300 animate-pulse rounded-sm h-[20px] w-[90%] mb-4"></div>
+
+              <div className="space-y-5 mt-3">
+                <div className="flex items-center">
+                  <div className="bg-gray-300 animate-pulse rounded-sm h-[20px] w-[20px] mr-2"></div>
+                  <div className="bg-gray-300 animate-pulse rounded-sm h-[16px] w-[120px]"></div>
+                </div>
+                <div className="flex items-center">
+                  <div className="bg-gray-300 animate-pulse rounded-sm h-[20px] w-[20px] mr-2"></div>
+                  <div className="bg-gray-300 animate-pulse rounded-sm h-[16px] w-[140px]"></div>
+                </div>
+                <div className="flex items-center">
+                  <div className="bg-gray-300 animate-pulse rounded-sm h-[20px] w-[20px] mr-2"></div>
+                  <div className="bg-gray-300 animate-pulse rounded-sm h-[16px] w-[100px]"></div>
+                </div>
+                <div className="flex items-center">
+                  <div className="bg-gray-300 animate-pulse rounded-sm h-[20px] w-[20px] mr-2"></div>
+                  <div className="bg-gray-300 animate-pulse rounded-sm h-[16px] w-[130px]"></div>
+                </div>
+                <div className="flex items-center">
+                  <div className="bg-gray-300 animate-pulse rounded-sm h-[20px] w-[20px] mr-2"></div>
+                  <div className="bg-gray-300 animate-pulse rounded-sm h-[16px] w-[100px]"></div>
+                </div>
+                <div className="flex items-center">
+                  <div className="bg-gray-300 animate-pulse rounded-sm h-[20px] w-[20px] mr-2"></div>
+                  <div className="bg-gray-300 animate-pulse rounded-sm h-[16px] w-[130px]"></div>
+                </div>
+              </div>
+            </div>
+
+            <div className="p-2 flex justify-end space-x-2 border-t">
+              <div className="bg-gray-300 animate-pulse rounded-sm h-[32px] w-[70px]"></div>
+              <div className="bg-gray-300 animate-pulse rounded-sm h-[32px] w-[60px]"></div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+SyncWithServerDialogSkeleton.propTypes = {
+  isOpen: PropTypes.any,
+  children: PropTypes.any,
+  loading: PropTypes.any,
+};

package/src/common/tests/CustomWrapper.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { render } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+import store from '@/store';
+import MockTranslationProvider from '@/_tests_/__mocks__/MockTranslationProvider';
+
+const CustomWrapper = ({ children, options }) => {
+  // Extract URL and parameters from options
+  const { url, ...params } = options;
+
+  // Determine if params object is not empty
+  const hasParams = Object.keys(params).length > 0;
+
+  // Construct the initial entries for MemoryRouter
+  const initialEntries = [url];
+  if (hasParams) {
+    initialEntries[0] = `${url}/${Object.values(params)[0]}`;
+  }
+
+  // Construct the route path based on the presence of params
+  const routePath = hasParams ? `${url}/:${Object.keys(params)[0]}` : url;
+
+  return (
+    <MockTranslationProvider>
+      <Provider store={store}>
+        <MemoryRouter initialEntries={initialEntries} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+          <Routes>
+            <Route path={routePath} element={children} />
+          </Routes>
+        </MemoryRouter>
+      </Provider>
+    </MockTranslationProvider>
+  );
+};
+
+const customRender = (ui, options) => {
+  return render(<CustomWrapper options={options}>{ui}</CustomWrapper>, options);
+};
+
+CustomWrapper.propTypes = {
+  options: PropTypes.any,
+  children: PropTypes.any,
+  url: PropTypes.any,
+};
+
+export { customRender };

package/src/common/tests/TranslationWrapper.jsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { I18nextProvider } from 'react-i18next';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { initializeI18n } from '@/common/languageTranslator/i18n';
+import PropTypes from 'prop-types';
+import TranslationProvider from '../languageTranslator/TranslationProvider';
+
+function TranslationWrapper({ children }) {
+  const translations = useSelector((state) => state.Translation); // Get translations from Redux store
+  const [i18nInstance, setI18nInstance] = useState(null);
+
+  useEffect(() => {
+    if (translations) {
+      const preferredLanguage = translations?.translationLanguage || 'en';
+      const i18n = initializeI18n(translations, preferredLanguage); // Dynamically initialize i18n with translations
+      setI18nInstance(i18n); // Mark i18n as initialized
+    }
+  }, [translations]);
+
+  if (!i18nInstance) {
+    return null; // Render nothing until i18n is ready
+  }
+
+  return (
+    <I18nextProvider i18n={i18nInstance}>
+      <TranslationProvider>
+        <Router>{children}</Router>
+      </TranslationProvider>
+    </I18nextProvider>
+  );
+}
+
+TranslationWrapper.propTypes = {
+  children: PropTypes.any,
+};
+
+export default TranslationWrapper;

package/src/common/themeProvider/ColorInputs.jsx

@@ -0,0 +1,97 @@
+import { Box, Typography, FormControl, FormLabel } from '@mui/material';
+import PropTypes from 'prop-types';
+import EditableColorInput from './EditableColorInput';
+
+const ColorInputs = ({ updatedConfig, handleColorChange, themeStyle }) => {
+  if (themeStyle !== 'palette') {
+    return null;
+  }
+  const config = updatedConfig[themeStyle];
+
+  // Only show these palette groups in the UI
+  const allowedGroups = ['primary', 'text', 'custom'];
+
+  return (
+    <Box
+      sx={{
+        mb: 4,
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 3,
+        '& > *': {
+          flex: '1 1 calc(33.33% - 24px)',
+          minWidth: 380,
+        },
+      }}
+    >
+      {Object.entries(config).map(
+        ([colorGroup, colors]) =>
+          allowedGroups.includes(colorGroup) && (
+            <Box
+              key={colorGroup}
+              sx={{
+                p: 3,
+                border: '1px solid',
+                borderColor: 'divider',
+                borderRadius: 1,
+                bgcolor: 'background.paper',
+              }}
+            >
+              <Typography
+                variant="subtitle1"
+                sx={{
+                  mb: 2,
+                  fontWeight: 600,
+                  color: 'text.primary',
+                  textTransform: 'capitalize',
+                }}
+              >
+                {colorGroup}
+              </Typography>
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                {Object.entries(colors).map(([colorKey, colorValue]) => (
+                  <FormControl key={colorKey} fullWidth>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        height: 48,
+                        justifyContent: 'flex-start',
+                        flexWrap: 'nowrap',
+                      }}
+                    >
+                      <FormLabel
+                        sx={{
+                          minWidth: 140,
+                          width: 160,
+                          color: 'text.secondary',
+                          textTransform: 'none',
+                          fontSize: '13px',
+                        }}
+                      >
+                        {colorKey.replace(/([A-Z])/g, ' $1').replace(/^./, (str) => str.toUpperCase())}
+                      </FormLabel>
+                      <EditableColorInput
+                        colorGroup={colorGroup}
+                        colorKey={colorKey}
+                        colorValue={colorValue}
+                        onColorChange={handleColorChange}
+                      />
+                    </Box>
+                  </FormControl>
+                ))}
+              </Box>
+            </Box>
+          )
+      )}
+    </Box>
+  );
+};
+
+ColorInputs.propTypes = {
+  updatedConfig: PropTypes.any,
+  handleColorChange: PropTypes.any,
+  themeStyle: PropTypes.any,
+};
+
+export default ColorInputs;

package/src/common/themeProvider/EditableColorInput.jsx

@@ -0,0 +1,128 @@
+import { Box, Input, Typography, IconButton } from '@mui/material';
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFloppyDisk, faPen, faXmark } from '@fortawesome/free-solid-svg-icons';
+
+const EditableColorInput = ({ colorGroup, colorKey, colorValue, onColorChange }) => {
+  const initialHex = colorValue.startsWith('#') ? colorValue : `#${colorValue}`;
+  const [editing, setEditing] = useState(false);
+  const [localValue, setLocalValue] = useState(initialHex);
+  const [error, setError] = useState('');
+
+  const isValidHex = (value) => /^#[0-9A-Fa-f]{6}$/.test(value);
+
+  useEffect(() => {
+    if (!editing) {
+      setLocalValue(colorValue.startsWith('#') ? colorValue : `#${colorValue}`);
+    }
+  }, [colorValue, editing]);
+
+  const handleEditClick = () => {
+    setEditing(true);
+    setError('');
+  };
+
+  const handleSaveClick = () => {
+    if (isValidHex(localValue)) {
+      onColorChange(colorGroup, colorKey, localValue);
+      setEditing(false);
+    } else {
+      setError('Invalid color code');
+    }
+  };
+
+  const handleCancelClick = () => {
+    setLocalValue(colorValue.startsWith('#') ? colorValue : `#${colorValue}`);
+    setError('');
+    setEditing(false);
+  };
+
+  const handleColorPickerChange = (e) => {
+    const newColor = e.target.value;
+    if (editing) {
+      setLocalValue(newColor);
+    } else {
+      onColorChange(colorGroup, colorKey, newColor);
+    }
+  };
+
+  const pickerValue = editing && isValidHex(localValue) ? localValue : colorValue;
+
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, whiteSpace: 'nowrap' }}>
+      <Input
+        type="color"
+        value={pickerValue}
+        onChange={handleColorPickerChange}
+        sx={{
+          width: 32,
+          height: 32,
+          padding: 0,
+          cursor: 'pointer',
+          flexShrink: 0,
+          '&::-webkit-color-swatch': {
+            borderRadius: '4px',
+            border: 'none',
+          },
+        }}
+      />
+      <Input
+        type="text"
+        value={localValue}
+        onChange={(e) => {
+          const val = e.target.value;
+          if (!val.startsWith('#')) {
+            setLocalValue(`#${val}`);
+          } else {
+            setLocalValue(val);
+          }
+          if (error) setError('');
+        }}
+        disabled={!editing}
+        error={!!error}
+        sx={{
+          width: 80,
+          flexShrink: 0,
+          fontSize: '13px',
+          '& .MuiInput-input': {
+            py: '4px',
+            lineHeight: 1.2,
+            height: 32,
+            boxSizing: 'border-box',
+          },
+        }}
+      />
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+        {editing ? (
+          <>
+            <IconButton onClick={handleSaveClick} size="small" color="primary">
+              <FontAwesomeIcon icon={faFloppyDisk} className="text-md" />
+            </IconButton>
+            <IconButton onClick={handleCancelClick} size="small" color="secondary">
+              <FontAwesomeIcon icon={faXmark} className="text-md" />
+            </IconButton>
+          </>
+        ) : (
+          <IconButton onClick={handleEditClick} size="small">
+            <FontAwesomeIcon icon={faPen} className="text-md" />
+          </IconButton>
+        )}
+        {error && (
+          <Typography variant="caption" color="error" sx={{ ml: 0.5, whiteSpace: 'nowrap' }}>
+            {error}
+          </Typography>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+EditableColorInput.propTypes = {
+  colorGroup: PropTypes.any,
+  colorKey: PropTypes.any,
+  colorValue: PropTypes.any,
+  onColorChange: PropTypes.any,
+};
+
+export default EditableColorInput;