@visns-studio/visns-components 5.15.10 → 5.15.12

package/src/components/MultiCheckbox.jsx

@@ -0,0 +1,335 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Plus, Edit3, X, Check } from 'lucide-react';
+import CustomFetch from './Fetch';
+import { toast } from 'react-toastify';
+import styles from './styles/MultiCheckbox.module.scss';
+
+function MultiCheckbox({
+    className,
+    inputValue = [],
+    onChange,
+    options = [],
+    placeholder,
+    settings,
+    style,
+    isCreatable = false,
+    isEditable = false,
+    creatableConfig = {},
+    editableConfig = {},
+}) {
+    const [checkboxOptions, setCheckboxOptions] = useState([]);
+    const [selectedValues, setSelectedValues] = useState([]);
+    const [isCreating, setIsCreating] = useState(false);
+    const [isEditing, setIsEditing] = useState(null);
+    const [newTagName, setNewTagName] = useState('');
+    const [editTagName, setEditTagName] = useState('');
+    const prevInputValueRef = useRef();
+
+    // Transform options to checkbox format
+    useEffect(() => {
+        const _options = Array.isArray(options) && options.length > 0
+            ? options.map((item) => {
+                if (item && typeof item === 'object') {
+                    return {
+                        id: item.id || 'unknown-id',
+                        label: item.label || item.name || item.description || 'Unknown',
+                        value: item.id || 'unknown-id',
+                        ...item,
+                    };
+                }
+                return {
+                    id: 'unknown-id',
+                    label: 'Unknown',
+                    value: 'unknown-id',
+                };
+            })
+            : [];
+        setCheckboxOptions(_options);
+    }, [options]);
+
+    // Transform inputValue to selected values
+    useEffect(() => {
+        if (JSON.stringify(prevInputValueRef.current) !== JSON.stringify(inputValue)) {
+            const _selected = Array.isArray(inputValue)
+                ? inputValue.map((item) => ({
+                    id: item.id,
+                    label: item.label || item.name || item.description || 'Unknown',
+                    value: item.id,
+                    ...item,
+                }))
+                : inputValue && typeof inputValue === 'object'
+                ? [{
+                    id: inputValue.id,
+                    label: inputValue.label || inputValue.name || inputValue.description || 'Unknown',
+                    value: inputValue.id,
+                    ...inputValue,
+                }]
+                : [];
+            
+            setSelectedValues(_selected);
+            prevInputValueRef.current = inputValue;
+        }
+    }, [inputValue, checkboxOptions]);
+
+    // Use all options since search is removed
+    const filteredOptions = checkboxOptions;
+
+    const handleCheckboxChange = (option, isChecked) => {
+        let newSelected;
+        
+        if (isChecked) {
+            // Add to selection
+            newSelected = [...selectedValues, option];
+        } else {
+            // Remove from selection
+            newSelected = selectedValues.filter(item => item.id !== option.id);
+        }
+        
+        setSelectedValues(newSelected);
+        
+        // Call parent onChange with the new selection
+        if (onChange) {
+            onChange(newSelected, { action: isChecked ? 'select-option' : 'deselect-option' }, settings.id);
+        }
+    };
+
+    const handleCreateTag = async () => {
+        if (!newTagName.trim() || !creatableConfig.url) return;
+
+        try {
+            const response = await CustomFetch(
+                creatableConfig.url,
+                creatableConfig.method || 'POST',
+                { label: newTagName.trim() }
+            );
+
+            if (response && response.data) {
+                const newOption = {
+                    id: response.data.id,
+                    label: response.data.label || newTagName.trim(),
+                    value: response.data.id,
+                    ...response.data,
+                };
+
+                // Add to options
+                setCheckboxOptions(prev => [...prev, newOption]);
+                
+                // Auto-select the new tag
+                const newSelected = [...selectedValues, newOption];
+                setSelectedValues(newSelected);
+                
+                if (onChange) {
+                    onChange(newSelected, { action: 'create-option' }, settings.id);
+                }
+
+                setNewTagName('');
+                setIsCreating(false);
+                toast.success('Tag created successfully');
+            }
+        } catch (error) {
+            toast.error('Failed to create tag');
+            console.error('Error creating tag:', error);
+        }
+    };
+
+    const handleEditTag = async (tagId) => {
+        if (!editTagName.trim() || !editableConfig.url) return;
+
+        console.log('Editing tag:', { tagId, editableConfig, editTagName });
+
+        try {
+            const url = editableConfig.url.replace('{id}', tagId);
+            console.log('Edit URL:', url);
+            
+            const response = await CustomFetch(
+                url,
+                editableConfig.method || 'PUT',
+                { label: editTagName.trim() }
+            );
+
+            if (response && response.data) {
+                // Update in options
+                setCheckboxOptions(prev => 
+                    prev.map(opt => 
+                        opt.id === tagId 
+                            ? { ...opt, label: response.data.label || editTagName.trim() }
+                            : opt
+                    )
+                );
+
+                // Update in selected values
+                setSelectedValues(prev => 
+                    prev.map(sel => 
+                        sel.id === tagId 
+                            ? { ...sel, label: response.data.label || editTagName.trim() }
+                            : sel
+                    )
+                );
+
+                setEditTagName('');
+                setIsEditing(null);
+                toast.success('Tag updated successfully');
+            }
+        } catch (error) {
+            toast.error('Failed to update tag');
+            console.error('Error updating tag:', error);
+        }
+    };
+
+    const isSelected = (optionId) => {
+        return selectedValues.some(selected => selected.id === optionId);
+    };
+
+    const maxColumns = settings.maxColumns || 3;
+
+    return (
+        <div className={`${styles.multiCheckbox} ${className || ''}`} style={style}>
+
+            {/* Create new tag section */}
+            {isCreatable && (
+                <div className={styles.createSection}>
+                    {!isCreating ? (
+                        <button
+                            type="button"
+                            onClick={() => setIsCreating(true)}
+                            className={styles.createButton}
+                        >
+                            <Plus size={16} />
+                            Create New Tag
+                        </button>
+                    ) : (
+                        <div className={styles.createForm}>
+                            <input
+                                type="text"
+                                placeholder="Enter tag name..."
+                                value={newTagName}
+                                onChange={(e) => setNewTagName(e.target.value)}
+                                onKeyDown={(e) => {
+                                    if (e.key === 'Enter') {
+                                        e.preventDefault();
+                                        handleCreateTag();
+                                    } else if (e.key === 'Escape') {
+                                        e.preventDefault();
+                                        setIsCreating(false);
+                                        setNewTagName('');
+                                    }
+                                }}
+                                className={styles.createInput}
+                                autoFocus
+                            />
+                            <button
+                                type="button"
+                                onClick={handleCreateTag}
+                                className={styles.saveButton}
+                                disabled={!newTagName.trim()}
+                                title="Save tag"
+                            >
+                                <Check size={16} />
+                            </button>
+                            <button
+                                type="button"
+                                onClick={() => {
+                                    setIsCreating(false);
+                                    setNewTagName('');
+                                }}
+                                className={styles.cancelButton}
+                            >
+                                <X size={16} />
+                            </button>
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {/* Checkbox grid */}
+            <div 
+                className={styles.checkboxGrid}
+                style={{
+                    gridTemplateColumns: `repeat(${maxColumns}, 1fr)`
+                }}
+            >
+                {filteredOptions.map((option, index) => (
+                    <div key={option.id || `option-${index}`} className={styles.checkboxItem}>
+                        {isEditing === option.id ? (
+                            <div className={styles.editForm}>
+                                <input
+                                    type="text"
+                                    value={editTagName}
+                                    onChange={(e) => setEditTagName(e.target.value)}
+                                    onKeyPress={(e) => {
+                                        if (e.key === 'Enter') {
+                                            handleEditTag(option.id);
+                                        } else if (e.key === 'Escape') {
+                                            setIsEditing(null);
+                                            setEditTagName('');
+                                        }
+                                    }}
+                                    className={styles.editInput}
+                                    autoFocus
+                                />
+                                <button
+                                    type="button"
+                                    onClick={() => handleEditTag(option.id)}
+                                    className={styles.saveButton}
+                                    disabled={!editTagName.trim()}
+                                    title="Save changes"
+                                >
+                                    <Check size={16} />
+                                </button>
+                                <button
+                                    type="button"
+                                    onClick={() => {
+                                        setIsEditing(null);
+                                        setEditTagName('');
+                                    }}
+                                    className={styles.cancelButton}
+                                >
+                                    <X size={16} />
+                                </button>
+                            </div>
+                        ) : (
+                            <label className={styles.checkboxLabel}>
+                                <input
+                                    type="checkbox"
+                                    checked={isSelected(option.id)}
+                                    onChange={(e) => handleCheckboxChange(option, e.target.checked)}
+                                    className={styles.checkbox}
+                                />
+                                <span className={styles.labelText}>{option.label}</span>
+                                {isEditable && (
+                                    <button
+                                        type="button"
+                                        onClick={(e) => {
+                                            e.preventDefault();
+                                            console.log('Starting edit for option:', option);
+                                            setIsEditing(option.id);
+                                            setEditTagName(option.label);
+                                        }}
+                                        className={styles.editButton}
+                                    >
+                                        <Edit3 size={12} />
+                                    </button>
+                                )}
+                            </label>
+                        )}
+                    </div>
+                ))}
+            </div>
+
+            {/* No options message */}
+            {filteredOptions.length === 0 && (
+                <div className={styles.noOptions}>
+                    No tags available
+                    {isCreatable && (
+                        <div style={{ marginTop: '8px', fontSize: '12px', color: '#64748b' }}>
+                            Click "Create New Tag" above to add your first tag
+                        </div>
+                    )}
+                </div>
+            )}
+
+        </div>
+    );
+}
+
+export default MultiCheckbox;

package/src/components/MultiSelect.jsx

@@ -112,6 +112,27 @@ const CustomMultiValueRemove = (props) => {
     );
 };
 
+// Custom NoOptionsMessage component to guide users about creation capability
+const CustomNoOptionsMessage = (props) => {
+    const { isCreatable, inputValue } = props.selectProps;
+    
+    if (isCreatable && inputValue) {
+        return (
+            <components.NoOptionsMessage {...props}>
+                <div style={{ textAlign: 'center', padding: '8px' }}>
+                    Press Enter to create "<strong>{inputValue}</strong>"
+                </div>
+            </components.NoOptionsMessage>
+        );
+    }
+    
+    return (
+        <components.NoOptionsMessage {...props}>
+            No options found
+        </components.NoOptionsMessage>
+    );
+};
+
 function MultiSelect({
     className,
     inputValue = [], // Default to an empty array
@@ -275,12 +296,14 @@ function MultiSelect({
             isClearable
             isSearchable={isSearchable}
             isMulti={multi}
+            isCreatable={isCreatable}
             filterOption={createFilter({ ignoreAccents: false })}
             components={{
                 SelectList,
                 Option: CustomOption,
                 MultiValue: (props) => <CustomMultiValue {...props} settings={settings} />,
                 MultiValueRemove: CustomMultiValueRemove,
+                NoOptionsMessage: CustomNoOptionsMessage,
             }}
             options={selectOptions}
             menuPortalTarget={document.body}
@@ -411,7 +434,13 @@ function MultiSelect({
             }}
             value={selectValue}
             onCreateOption={handleCreate}
-            placeholder={placeholder ? placeholder : 'Select...'}
+            placeholder={
+                placeholder 
+                    ? placeholder 
+                    : isCreatable 
+                        ? 'Select or type to create new...' 
+                        : 'Select...'
+            }
             isOptionDisabled={
                 settings.limit && multi && settings.limit > 1
                     ? () => selectValue.length >= settings.limit

package/src/components/columns/ColumnRenderers.jsx

@@ -1255,25 +1255,7 @@ export const renderRelationColumn = ({
     );
 
     // Log sorting analysis in development
-    if (
-        intelligentSortingConfig.logAnalysis &&
-        process.env.NODE_ENV === 'development'
-    ) {
-        const relationshipPath = getRelationshipPath(column);
-        console.log(
-            `Relationship sorting analysis for "${relationshipPath}":`,
-            {
-                sortable: isSortable,
-                fieldName: column.nameFrom,
-                relationshipDepth: Array.isArray(column.id)
-                    ? column.id.length
-                    : 1,
-                explicitSortable: column.hasOwnProperty('sortable')
-                    ? column.sortable
-                    : 'not specified',
-            }
-        );
-    }
+    // Debug logging removed for cleaner console output
 
     return {
         ...commonProps,
@@ -1386,25 +1368,7 @@ export const renderRelationArrayColumn = ({
     );
 
     // Log sorting analysis in development
-    if (
-        intelligentSortingConfig.logAnalysis &&
-        process.env.NODE_ENV === 'development'
-    ) {
-        const relationshipPath = getRelationshipPath(column);
-        console.log(
-            `Relationship array sorting analysis for "${relationshipPath}":`,
-            {
-                sortable: isSortable,
-                fieldName: column.nameFrom,
-                relationshipDepth: Array.isArray(column.id)
-                    ? column.id.length
-                    : 1,
-                explicitSortable: column.hasOwnProperty('sortable')
-                    ? column.sortable
-                    : 'not specified',
-            }
-        );
-    }
+    // Debug logging removed for cleaner console output
 
     return {
         ...commonProps,

package/src/components/generic/GenericDetail.jsx

@@ -243,16 +243,6 @@ function GenericDetail({
     /** Fileupload states */
     const [files, setFiles] = useState([]);
 
-    // Debug logging for files state changes
-    useEffect(() => {
-        console.log('GenericDetail: Files state changed:', {
-            files,
-            filesCount: files ? files.length : 0,
-            filesType: typeof files,
-            isArray: Array.isArray(files),
-            firstFile: files && files.length > 0 ? files[0] : null,
-        });
-    }, [files]);
     const [loadingProgress, setLoadingProgress] = useState(0);
 
     /** General States */