leumas-universal-crud-react/src/LMS-WildCard-Helpers/UniversalCrud/CustomDropdown.jsx

Leumas Universal CRUD to a dynamic Endpoint, Setup your own Dynamic Endpoint and Use Leumas API to send to your MONGO clusters

import React, { useEffect, useState } from 'react';
import { getAllItems } from './UniversalCrudHelpers';
import ToggleStatus from './ToggleStatus';
import DeleteItem from "./DeleteItem";

import useAuthUser from 'react-auth-kit/hooks/useAuthUser';
import { useTheme } from "../../Theme/ThemeContext";

const lightThemeColors = {
  background: '#FAFAFA',
  primary: '#0077C0',
  secondary: '#C7EEFF',
  text: '#1D242B',
};

const darkThemeColors = {
  background: '#1D242B',
  primary: '#0077C0',
  secondary: '#2A3B4D',
  text: '#FAFAFA',
  cardText: '#E0E0E0',
};

const useColors = (theme) => {
  return theme === 'dark' ? darkThemeColors : lightThemeColors;
};

const CustomDropdown = ({ model, modelArray, endpoint, token, onSelectedChange, color = "blue" }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [selected, setSelected] = useState("--Select a boilerplate--");
  const [models, setModels] = useState([]);
  const auth = useAuthUser();
  const { theme } = useTheme();
  const colors = useColors(theme);

  useEffect(() => {
    const fetchItems = async () => {
      try {
        const items = await getAllItems(model, endpoint, token);
        setModels(items);
      } catch (error) {
        console.error("Error fetching boilerplates:", error);
      }
    };

    if (!modelArray) {
      fetchItems();
    } else {
      setModels(modelArray);
    }
  }, [model, endpoint, token, modelArray]);

  const handleSelect = (item) => {
    setSelected(item?.title || item?.name);
    setIsOpen(false);
    onSelectedChange(item);
  };

  const containerStyle = {
    backgroundColor: colors.background,
    color: colors.text,
    border: `1px solid ${colors.primary}`,
  };

  const dropdownStyle = {
    backgroundColor: colors.background,
    color: colors.text,
    border: `1px solid ${colors.primary}`,
  };

  const itemStyle = {
    backgroundColor: colors.secondary,
    color: colors.text,
    border: `1px solid ${colors.primary}`,
  };

  return (
    <div className={`relative w-full`}>
      <fieldset
        className={`w-full p-2 cursor-pointer rounded-lg px-4`}
        style={containerStyle}
        onClick={() => setIsOpen(!isOpen)}
      >
        <legend className='text-xl font-bold'>{model}(s)</legend>
        {selected}
      </fieldset>
      {isOpen && (
        <div className={`absolute top-full left-0 w-full border  z-50 rounded-lg max-h-[150px] overflow-y-scroll`} style={dropdownStyle}>
          {models?.map((modelItem, index) => (
            <div
              key={index}
              className="p-2 rounded-lg flex justify-between cursor-pointer hover:bg-blue-100"
              style={itemStyle}
              onClick={() => handleSelect(modelItem)}
            >
              <div className='flex flex-col gap-2'>
                {modelItem?.title || modelItem?.name || modelItem?.collectionName || modelItem?.gptPrompt?.substring(0, 10) || modelItem?.endpoint?.endpoint}...
                {modelItem?.owner?._id === auth?.id && (
                  <ToggleStatus
                    model={model}
                    isPublished={modelItem?.isPublished || modelItem?.public}
                    endpoint={endpoint}
                    itemId={modelItem._id}
                    token={token}
                    onToggleChange={() => { }}
                  />
                )}
              </div>
              {modelItem?.owner?._id === auth?.id && (
                <DeleteItem
                  model={model}
                  endpoint={endpoint}
                  id={modelItem._id}
                  token={token}
                  onToggleChange={() => { }}
                />
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default CustomDropdown;