@visns-studio/visns-components 5.10.2 → 5.10.4

package/src/components/crm/controls/AudioPlayer.jsx

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react';
+
+const AudioPlayer = ({ audioSource }) => {
+    const audioRef = useRef(null);
+
+    useEffect(() => {
+        if (audioSource) {
+            audioRef.current.play();
+        }
+    }, [audioSource]);
+
+    if (!audioSource) {
+        return null;
+    }
+
+    return <audio src={audioSource} ref={audioRef} />;
+};
+
+export default AudioPlayer;

package/src/components/crm/controls/AutoRefreshControls.jsx

@@ -0,0 +1,37 @@
+import styles from '../styles/DataGrid.module.scss';
+
+const AutoRefreshControls = ({
+    ajaxSetting,
+    autoRefreshEnabled,
+    setAutoRefreshEnabled,
+    refreshInterval,
+    isRelocated = false,
+}) => {
+    // Only show auto-refresh if the setting is present in ajaxSetting
+    if (!ajaxSetting || ajaxSetting.autoRefresh === undefined) {
+        return null;
+    }
+
+    const containerClass = isRelocated
+        ? styles.autoRefreshContainerRelocated
+        : styles.autoRefreshContainer;
+
+    return (
+        <div className={containerClass}>
+            <label className={styles.autoRefreshLabel}>
+                <input
+                    type="checkbox"
+                    checked={autoRefreshEnabled}
+                    onChange={() =>
+                        setAutoRefreshEnabled(!autoRefreshEnabled)
+                    }
+                    className={styles.autoRefreshCheckbox}
+                />
+                Auto Refresh{' '}
+                {refreshInterval && `(${refreshInterval}s)`}
+            </label>
+        </div>
+    );
+};
+
+export default AutoRefreshControls;

package/src/components/crm/controls/DataGridSearch.jsx

@@ -0,0 +1,238 @@
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { saveAs } from 'file-saver';
+import {
+    LinkOut,
+    Plus,
+    Search,
+    Sort,
+} from 'akar-icons';
+import Download from '../Download';
+import styles from '../styles/DataGrid.module.scss';
+
+const DataGridSearch = ({
+    form,
+    search,
+    onSearchChange,
+    onModalOpen,
+    // Export dependencies
+    dataRef,
+    filterValue,
+    paramValue,
+    // Sort dependencies  
+    pageData,
+    pageSetting,
+}) => {
+    const navigate = useNavigate();
+
+    const handleChangeSearch = (e) => {
+        const { value } = e.target;
+        onSearchChange(value);
+    };
+
+    const exportTrigger = async () => {
+        try {
+            toast.success('Starting export please wait...');
+
+            let payload;
+
+            if (form.export.useData) {
+                payload = { data: dataRef.current };
+            } else {
+                payload = {
+                    filter: filterValue,
+                    paramId: paramValue || '',
+                };
+            }
+
+            const res = await Download(form.export.url, 'POST', payload);
+
+            if (res.data.error) {
+                toast.error(res.data.error);
+            } else {
+                // Assuming the response contains a Blob or similar data
+                if (res.data && res.data instanceof Blob) {
+                    const fileName = `${form.export.filename}`;
+                    saveAs(res.data, fileName);
+                } else {
+                    // Handle the case where the response is not a Blob
+                    toast.error('Invalid file format received.');
+                }
+            }
+        } catch (error) {
+            console.info(error);
+        }
+    };
+
+    const sortTrigger = () => {
+        let baseUrl = form.url.replace('/ajax', '');
+        let sortUrl = paramValue
+            ? `${baseUrl}/${paramValue}/sort`
+            : `${baseUrl}/sort`;
+
+        if (form.sort?.url) {
+            sortUrl = form.sort.url;
+        }
+
+        const newState = {
+            form,
+            page: {
+                data: pageData,
+                setting: pageSetting,
+            },
+            paramValue,
+        };
+
+        navigate(sortUrl, { state: newState });
+    };
+
+    const renderCreateButton = () => {
+        if (form.createDisable && form.createDisable === true) {
+            return null;
+        }
+
+        const isSearchEnabled = !(form.searchDisable === true);
+        const buttonClassName = isSearchEnabled
+            ? styles.actionButtons
+            : styles.actionButtonsStandalone;
+
+        return (
+            <div className={buttonClassName}>
+                {form.export && form.export.url && (
+                    <button className={styles.btn} onClick={exportTrigger}>
+                        <LinkOut
+                            strokeWidth={2}
+                            size={16}
+                            style={{ marginRight: '10px' }}
+                        />{' '}
+                        Export
+                    </button>
+                )}
+                {form.sort && form.sort.title && (
+                    <button className={styles.btn} onClick={sortTrigger}>
+                        <Sort
+                            strokeWidth={2}
+                            size={16}
+                            style={{ marginRight: '10px' }}
+                        />{' '}
+                        Sort Order
+                    </button>
+                )}
+
+                {(form.create &&
+                    form.create.title &&
+                    form.create.title !== '') ||
+                (form.url && form.create?.title !== '') ? (
+                    <button
+                        className={styles.btn}
+                        onClick={(e) => {
+                            e.preventDefault();
+
+                            if (form.create) {
+                                if (form.create.url) {
+                                    // Check if URL is external
+                                    if (
+                                        form.create.url.startsWith(
+                                            'http://'
+                                        ) ||
+                                        form.create.url.startsWith(
+                                            'https://'
+                                        )
+                                    ) {
+                                        window.open(
+                                            form.create.url,
+                                            '_blank'
+                                        );
+                                    } else {
+                                        navigate(form.create.url);
+                                    }
+                                } else {
+                                    onModalOpen('create', 0);
+                                }
+                            } else {
+                                if (form.url) {
+                                    window.open(
+                                        form.url,
+                                        '',
+                                        'width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1'
+                                    );
+                                }
+                            }
+                        }}
+                    >
+                        <Plus
+                            strokeWidth={2}
+                            size={16}
+                            style={{ marginRight: '10px' }}
+                        />
+                        Add New
+                    </button>
+                ) : form.url && form.modal === false ? (
+                    <button
+                        className={styles.btn}
+                        onClick={(e) => {
+                            e.preventDefault();
+
+                            window.open(
+                                form.url,
+                                '',
+                                'width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1'
+                            );
+                        }}
+                    >
+                        <Plus
+                            strokeWidth={2}
+                            size={16}
+                            style={{ marginRight: '10px' }}
+                        />
+                        Add New
+                    </button>
+                ) : null}
+            </div>
+        );
+    };
+
+    const isSearchEnabled = !(form.searchDisable === true);
+    const isCreateDisabled = form.createDisable === true;
+
+    // Don't render anything if both search and create are disabled
+    if (!isSearchEnabled && isCreateDisabled) {
+        return null;
+    }
+
+    // If search is disabled but create button is enabled, render only the button with its own container
+    if (!isSearchEnabled && !isCreateDisabled) {
+        return (
+            <div className={styles.actionButtonsContainer}>
+                {renderCreateButton()}
+            </div>
+        );
+    }
+
+    // If search is enabled, render the full search container with both search and buttons
+    return (
+        <div className={styles.searchContainer}>
+            <div className={styles.searchInputWrapper}>
+                <div
+                    className={styles['icon-search']}
+                    style={{ left: 25, color: '#000' }}
+                >
+                    <Search strokeWidth={2} size={14} />
+                </div>
+                <input
+                    type="text"
+                    placeholder="Search"
+                    value={search}
+                    onChange={handleChangeSearch}
+                    style={{ borderRadius: 0, paddingLeft: 55 }}
+                    className={styles.searchInput}
+                />
+            </div>
+            <div className={styles.actionButtonsWrapper}>
+                {!isCreateDisabled && renderCreateButton()}
+            </div>
+        </div>
+    );
+};
+
+export default DataGridSearch;