@devcustrom/strapi-plugin-api-select 1.2.0 → 1.3.0

package/admin/src/plugin/test.jsx

@@ -0,0 +1,817 @@
+import React, { useState, useEffect, useMemo, useRef, useCallback } from "react";
+import {
+  Field,
+  Loader,
+  Box,
+  Typography,
+  Flex,
+  TextInput,
+  Tag,
+  IconButton,
+} from "@strapi/design-system";
+import { Cross, Search, CaretDown, CheckCircle } from "@strapi/icons";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const getNestedValue = (obj, path) => {
+  if (!path) return obj;
+  return path.split(".").reduce((current, key) => {
+    if (current === null || current === undefined) return null;
+    return current[key] !== undefined ? current[key] : null;
+  }, obj);
+};
+
+const toStringValue = (val) => {
+  if (val === null || val === undefined) return "";
+  if (typeof val === "object") return JSON.stringify(val);
+  return String(val);
+};
+
+const mapResponseData = (item, mapping, fallbackLabelKey, fallbackValueKey) => {
+  let mapped = { label: "", value: "", iconUrl: null, item };
+
+  if (mapping && typeof mapping === "object") {
+    mapped.label =
+      getNestedValue(item, mapping.label || mapping.text || mapping.name) ||
+      getNestedValue(item, fallbackLabelKey) ||
+      item.label || item.name || item.text || "Unknown";
+
+    mapped.value =
+      getNestedValue(item, mapping.value || mapping.id) ||
+      getNestedValue(item, fallbackValueKey) ||
+      item.value || item.id || mapped.label;
+
+    Object.keys(mapping).forEach((key) => {
+      if (key !== "label" && key !== "value") {
+        mapped[key] = getNestedValue(item, mapping[key]);
+      }
+    });
+  } else {
+    mapped.label =
+      getNestedValue(item, fallbackLabelKey) ||
+      item.label || item.name || item.text || item.title ||
+      item.displayName || item.description || "Unknown Option";
+
+    mapped.value =
+      getNestedValue(item, fallbackValueKey) ||
+      item.value || item.id || item.identifier || item.uuid || mapped.label;
+  }
+
+  // Always pull iconUrl from the raw item if present
+  mapped.iconUrl = item.iconUrl || item.icon_url || item.imageUrl || null;
+
+  if (!mapped.label || typeof mapped.label !== "string") {
+    mapped.label = `Option ${mapped.value || "Unknown"}`;
+  }
+  if (!mapped.value) {
+    mapped.value = mapped.label || `option_${Date.now()}`;
+  }
+
+  mapped.value = toStringValue(mapped.value);
+  return mapped;
+};
+
+// ---------------------------------------------------------------------------
+// SVG Sprite Icon
+// Handles URLs in format: "https://host/sprite.svg#iconname"
+// ---------------------------------------------------------------------------
+
+const SpriteIcon = ({ iconUrl, size = 18 }) => {
+  if (!iconUrl) return null;
+  const hashIdx = iconUrl.lastIndexOf("#");
+  const spriteFile = hashIdx !== -1 ? iconUrl.slice(0, hashIdx) : iconUrl;
+  const iconId = hashIdx !== -1 ? iconUrl.slice(hashIdx) : "";
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      focusable="false"
+      aria-hidden="true"
+      style={{ flexShrink: 0, display: "block" }}
+    >
+      <use href={`${spriteFile}${iconId}`} />
+    </svg>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Inline styles
+// ---------------------------------------------------------------------------
+
+const styles = {
+  wrapper: {
+    position: "relative",
+  },
+  trigger: (disabled, open) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 8,
+    minHeight: 40,
+    padding: "0 12px",
+    border: `1px solid ${open ? "var(--strapi-colors-primary600)" : "var(--strapi-colors-neutral200)"}`,
+    borderRadius: "var(--strapi-radii-sm, 4px)",
+    background: disabled
+      ? "var(--strapi-colors-neutral150)"
+      : "var(--strapi-colors-neutral0)",
+    cursor: disabled ? "not-allowed" : "pointer",
+    outline: "none",
+    width: "100%",
+    boxSizing: "border-box",
+    boxShadow: open ? "0 0 0 2px var(--strapi-colors-primary200)" : "none",
+    transition: "border-color 0.15s, box-shadow 0.15s",
+  }),
+  dropdown: {
+    position: "absolute",
+    top: "calc(100% + 4px)",
+    left: 0,
+    right: 0,
+    zIndex: 999,
+    background: "var(--strapi-colors-neutral0)",
+    border: "1px solid var(--strapi-colors-neutral200)",
+    borderRadius: "var(--strapi-radii-sm, 4px)",
+    boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
+    overflow: "hidden",
+  },
+  searchBox: {
+    padding: "8px",
+    borderBottom: "1px solid var(--strapi-colors-neutral150)",
+  },
+  optionsList: {
+    maxHeight: 260,
+    overflowY: "auto",
+  },
+  option: (isSelected, isFocused) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "8px 12px",
+    cursor: "pointer",
+    background: isSelected
+      ? "var(--strapi-colors-primary100)"
+      : isFocused
+      ? "var(--strapi-colors-neutral100)"
+      : "transparent",
+    borderLeft: isSelected
+      ? "2px solid var(--strapi-colors-primary600)"
+      : "2px solid transparent",
+    transition: "background 0.1s",
+  }),
+  optionLabel: (isSelected) => ({
+    flex: 1,
+    fontSize: 14,
+    color: isSelected
+      ? "var(--strapi-colors-primary700)"
+      : "var(--strapi-colors-neutral800)",
+    fontWeight: isSelected ? 600 : 400,
+  }),
+  placeholder: {
+    color: "var(--strapi-colors-neutral500)",
+    fontSize: 14,
+  },
+  selectedLabel: {
+    fontSize: 14,
+    color: "var(--strapi-colors-neutral800)",
+    flex: 1,
+    textAlign: "left",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  tagsWrap: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 4,
+    padding: "4px 0",
+    flex: 1,
+    minWidth: 0,
+  },
+  controls: {
+    display: "flex",
+    alignItems: "center",
+    gap: 2,
+    flexShrink: 0,
+  },
+  checkMark: {
+    color: "var(--strapi-colors-primary600)",
+    flexShrink: 0,
+    display: "flex",
+    alignItems: "center",
+  },
+  emptyMsg: {
+    padding: "16px 12px",
+    textAlign: "center",
+    color: "var(--strapi-colors-neutral500)",
+    fontSize: 13,
+  },
+  caretIcon: (open) => ({
+    color: "var(--strapi-colors-neutral500)",
+    width: 16,
+    height: 16,
+    transform: open ? "rotate(180deg)" : "none",
+    transition: "transform 0.2s",
+    display: "block",
+  }),
+};
+
+// ---------------------------------------------------------------------------
+// IconSelect — custom combobox with search + SVG sprite icons
+// ---------------------------------------------------------------------------
+
+const IconSelect = ({
+  options,
+  value,        // string (single) | string[] (multi)
+  onChange,
+  onClear,
+  placeholder,
+  disabled,
+  isMulti,
+  forwardedRef,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [focusedIdx, setFocusedIdx] = useState(-1);
+  const wrapperRef = useRef(null);
+  const searchRef = useRef(null);
+  const listRef = useRef(null);
+
+  // Close on outside click
+  useEffect(() => {
+    const handler = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false);
+        setSearch("");
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+
+  // Focus search input when dropdown opens
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => searchRef.current?.focus(), 50);
+      setFocusedIdx(-1);
+    }
+  }, [open]);
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) return options;
+    const q = search.toLowerCase();
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [options, search]);
+
+  const isSelected = useCallback(
+    (optVal) => {
+      if (isMulti) return Array.isArray(value) && value.includes(optVal);
+      return value === optVal;
+    },
+    [value, isMulti]
+  );
+
+  const handleToggle = (optVal) => {
+    if (isMulti) {
+      const current = Array.isArray(value) ? value : [];
+      const next = current.includes(optVal)
+        ? current.filter((v) => v !== optVal)
+        : [...current, optVal];
+      onChange(next);
+      // Keep dropdown open for multi-select
+    } else {
+      onChange(optVal);
+      setOpen(false);
+      setSearch("");
+    }
+  };
+
+  const handleRemoveTag = (optVal, e) => {
+    e.stopPropagation();
+    const next = (Array.isArray(value) ? value : []).filter((v) => v !== optVal);
+    onChange(next);
+  };
+
+  const handleKeyDown = (e) => {
+    if (!open) {
+      if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+        e.preventDefault();
+        setOpen(true);
+      }
+      return;
+    }
+    if (e.key === "Escape") {
+      setOpen(false);
+      setSearch("");
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setFocusedIdx((i) => Math.min(i + 1, filtered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setFocusedIdx((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter" && focusedIdx >= 0) {
+      e.preventDefault();
+      handleToggle(filtered[focusedIdx].value);
+    }
+  };
+
+  // Scroll focused item into view
+  useEffect(() => {
+    if (focusedIdx >= 0 && listRef.current) {
+      const el = listRef.current.children[focusedIdx];
+      el?.scrollIntoView({ block: "nearest" });
+    }
+  }, [focusedIdx]);
+
+  const optionByValue = useCallback(
+    (val) => options.find((o) => o.value === val),
+    [options]
+  );
+
+  const hasValue = isMulti
+    ? Array.isArray(value) && value.length > 0
+    : Boolean(value);
+
+  // ---- Trigger content ----
+  const renderTriggerContent = () => {
+    if (isMulti) {
+      const selected = Array.isArray(value) ? value : [];
+      if (selected.length === 0) {
+        return <span style={styles.placeholder}>{placeholder}</span>;
+      }
+      return (
+        <div style={styles.tagsWrap}>
+          {selected.map((val) => {
+            const opt = optionByValue(val);
+            return (
+              <Tag
+                key={val}
+                icon={
+                  opt?.iconUrl
+                    ? <SpriteIcon iconUrl={opt.iconUrl} size={14} />
+                    : undefined
+                }
+                onClick={(e) => handleRemoveTag(val, e)}
+              >
+                {opt?.label || val}
+              </Tag>
+            );
+          })}
+        </div>
+      );
+    }
+
+    const opt = optionByValue(value);
+    if (!opt && !value) {
+      return <span style={styles.placeholder}>{placeholder}</span>;
+    }
+    return (
+      <Flex gap={2} alignItems="center" style={{ flex: 1, minWidth: 0 }}>
+        {opt?.iconUrl && <SpriteIcon iconUrl={opt.iconUrl} size={18} />}
+        <span style={styles.selectedLabel}>{opt?.label || value}</span>
+      </Flex>
+    );
+  };
+
+  return (
+    <div ref={wrapperRef} style={styles.wrapper}>
+      {/* Trigger button */}
+      <div
+        ref={forwardedRef}
+        role="combobox"
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        tabIndex={disabled ? -1 : 0}
+        style={styles.trigger(disabled, open)}
+        onClick={() => !disabled && setOpen((v) => !v)}
+        onKeyDown={handleKeyDown}
+      >
+        {renderTriggerContent()}
+
+        <div style={styles.controls}>
+          {hasValue && onClear && (
+            <IconButton
+              label="Clear"
+              size="S"
+              variant="ghost"
+              onClick={(e) => {
+                e.stopPropagation();
+                onClear();
+              }}
+            >
+              <Cross />
+            </IconButton>
+          )}
+          <CaretDown style={styles.caretIcon(open)} />
+        </div>
+      </div>
+
+      {/* Dropdown */}
+      {open && (
+        <div style={styles.dropdown} role="listbox" aria-multiselectable={isMulti}>
+          {/* Search input */}
+          <div style={styles.searchBox}>
+            <TextInput
+              ref={searchRef}
+              placeholder="Search..."
+              value={search}
+              onChange={(e) => {
+                setSearch(e.target.value);
+                setFocusedIdx(-1);
+              }}
+              onKeyDown={handleKeyDown}
+              startAction={
+                <Search
+                  style={{
+                    color: "var(--strapi-colors-neutral400)",
+                    width: 16,
+                    height: 16,
+                  }}
+                />
+              }
+              size="S"
+            />
+          </div>
+
+          {/* Options list */}
+          <div style={styles.optionsList} ref={listRef}>
+            {filtered.length === 0 ? (
+              <div style={styles.emptyMsg}>No options found</div>
+            ) : (
+              filtered.map((option, idx) => {
+                const selected = isSelected(option.value);
+                const focused = idx === focusedIdx;
+                return (
+                  <div
+                    key={option.value || idx}
+                    role="option"
+                    aria-selected={selected}
+                    style={styles.option(selected, focused)}
+                    onMouseEnter={() => setFocusedIdx(idx)}
+                    onMouseDown={(e) => {
+                      // preventDefault keeps focus on the search input
+                      e.preventDefault();
+                      handleToggle(option.value);
+                    }}
+                  >
+                    {option.iconUrl && (
+                      <SpriteIcon iconUrl={option.iconUrl} size={20} />
+                    )}
+                    <span style={styles.optionLabel(selected)}>
+                      {option.label}
+                    </span>
+                    {selected && (
+                      <span style={styles.checkMark}>
+                        <CheckCircle style={{ width: 16, height: 16 }} />
+                      </span>
+                    )}
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+const ApiSelectInput = ({
+  name,
+  value,
+  onChange,
+  attribute,
+  placeholder,
+  error,
+  required,
+  disabled,
+  label,
+  description,
+  intlLabel,
+  forwardedRef,
+  ...props
+}) => {
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState(null);
+
+  const configValues = useMemo(() => {
+    const config = attribute?.options || {};
+    return config.options || config;
+  }, [attribute]);
+
+  const {
+    optionsApi,
+    optionLabelKey = "name",
+    optionValueKey = "id",
+    selectMode = "single",
+    authMode = "public",
+    placeholder: configPlaceholder,
+    httpMethod = "GET",
+    requestPayload = "",
+    customHeaders = "",
+    responseDataPath = "",
+    responseMappingConfig = "",
+  } = configValues;
+
+  const getAuthToken = () => {
+    try {
+      return (
+        localStorage.getItem("jwtToken")?.replaceAll('"', "") ||
+        localStorage.getItem("strapi_jwt")?.replaceAll('"', "") ||
+        localStorage.getItem("token")?.replaceAll('"', "")
+      );
+    } catch {
+      return null;
+    }
+  };
+
+  useEffect(() => {
+    if (!optionsApi) return;
+    const controller = new AbortController();
+
+    const fetchOptions = async () => {
+      setLoading(true);
+      setFetchError(null);
+
+      try {
+        let url = optionsApi;
+        const token = getAuthToken();
+
+        const fetchOpts = {
+          method: httpMethod,
+          signal: controller.signal,
+          credentials: authMode === "proxy" ? "include" : "omit",
+          headers: {
+            "Content-Type": "application/json",
+            ...(token && { Authorization: `Bearer ${token}` }),
+          },
+        };
+
+        if (customHeaders?.trim()) {
+          try {
+            Object.assign(fetchOpts.headers, JSON.parse(customHeaders));
+          } catch (e) {
+            console.warn("[ApiSelect] Invalid customHeaders JSON:", e.message);
+          }
+        }
+
+        if (httpMethod === "POST" && requestPayload?.trim()) {
+          fetchOpts.body = requestPayload;
+        }
+
+        if (authMode === "proxy") {
+          const params = new URLSearchParams({
+            api: optionsApi,
+            labelKey: optionLabelKey,
+            valueKey: optionValueKey,
+            method: httpMethod,
+          });
+          if (requestPayload) params.append("payload", requestPayload);
+          if (customHeaders) params.append("headers", customHeaders);
+          if (responseDataPath) params.append("dataPath", responseDataPath);
+
+          url = `${window.strapi.backendURL}/api-select/fetch?${params}`;
+          fetchOpts.method = "GET";
+          delete fetchOpts.body;
+        }
+
+        const response = await fetch(url, fetchOpts);
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+        const data = await response.json();
+
+        let itemsArray = data;
+        if (responseDataPath) {
+          itemsArray = getNestedValue(data, responseDataPath);
+        } else {
+          itemsArray =
+            data.data || data.results || data.items || data.response || data;
+        }
+
+        if (!Array.isArray(itemsArray)) {
+          setOptions([]);
+          return;
+        }
+
+        let customMapping = null;
+        if (responseMappingConfig?.trim()) {
+          try {
+            customMapping = JSON.parse(responseMappingConfig);
+          } catch (e) {
+            console.warn(
+              "[ApiSelect] Invalid responseMappingConfig JSON:",
+              e.message
+            );
+          }
+        }
+
+        const mappedOptions = itemsArray.map((item) =>
+          mapResponseData(item, customMapping, optionLabelKey, optionValueKey)
+        );
+
+        setOptions(mappedOptions);
+      } catch (err) {
+        if (err.name === "AbortError") return;
+        setFetchError(err.message);
+        setOptions([]);
+      } finally {
+        if (!controller.signal.aborted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    fetchOptions();
+    return () => controller.abort();
+  }, [
+    optionsApi,
+    optionLabelKey,
+    optionValueKey,
+    authMode,
+    httpMethod,
+    requestPayload,
+    customHeaders,
+    responseDataPath,
+    responseMappingConfig,
+  ]);
+
+  // -------------------------------------------------------------------------
+  // Value storage
+  //
+  // Field type is "json" → must store object/array, never a bare string.
+  //
+  // Single → { value: "sprite:address", label: "address", iconUrl: "https://..." }
+  // Multi  → [{ value, label, iconUrl }, ...]
+  // Empty  → null
+  //
+  // Storing full option objects means consumers can render icons immediately
+  // without re-fetching the API.
+  // -------------------------------------------------------------------------
+
+  const optionByValue = useCallback(
+    (val) => options.find((o) => o.value === val),
+    [options]
+  );
+
+  const handleSingleChange = (val) => {
+    if (!val) {
+      onChange({ target: { name, value: null, type: "json" } });
+      return;
+    }
+    const opt = optionByValue(val);
+    const stored = opt
+      ? { value: opt.value, label: opt.label, iconUrl: opt.iconUrl }
+      : { value: val };
+    onChange({ target: { name, value: stored, type: "json" } });
+  };
+
+  const handleSingleClear = () => {
+    onChange({ target: { name, value: null, type: "json" } });
+  };
+
+  const handleMultiChange = (vals) => {
+    if (!vals?.length) {
+      onChange({ target: { name, value: null, type: "json" } });
+      return;
+    }
+    const stored = vals.map((val) => {
+      const opt = optionByValue(val);
+      return opt
+        ? { value: opt.value, label: opt.label, iconUrl: opt.iconUrl }
+        : { value: val };
+    });
+    onChange({ target: { name, value: stored, type: "json" } });
+  };
+
+  const handleMultiClear = () => {
+    onChange({ target: { name, value: null, type: "json" } });
+  };
+
+  // -------------------------------------------------------------------------
+  // Normalize stored value → plain string(s) for IconSelect widget
+  //
+  // DB single: { value, label, iconUrl } → "value-string"
+  // DB multi:  [{ value, ... }, ...]     → ["val1", "val2"]
+  // Legacy bare string                   → pass through
+  // -------------------------------------------------------------------------
+
+  const normalizedSingleValue = useMemo(() => {
+    if (!value) return "";
+    if (typeof value === "string") return value; // legacy bare string
+    if (typeof value === "object" && !Array.isArray(value) && value.value != null)
+      return String(value.value);
+    return "";
+  }, [value]);
+
+  const normalizedMultiValue = useMemo(() => {
+    if (!value) return [];
+    if (Array.isArray(value)) {
+      return value.map((v) =>
+        typeof v === "object" && v?.value != null ? String(v.value) : String(v)
+      );
+    }
+    return [];
+  }, [value]);
+
+  // -------------------------------------------------------------------------
+  // Display helpers
+  // -------------------------------------------------------------------------
+
+  const displayLabel =
+    label || intlLabel?.defaultMessage || name || "Select Option";
+
+  const getPlaceholder = () => {
+    if (loading) return "Loading...";
+    if (fetchError) return "Error loading options";
+    return (
+      placeholder ||
+      configPlaceholder ||
+      (selectMode === "single" ? "Select option..." : "Select options...")
+    );
+  };
+
+  const renderFeedback = () => {
+    if (loading) {
+      return (
+        <Flex padding={2} gap={2} alignItems="center">
+          <Loader small />
+          <Typography variant="pi" textColor="neutral600">
+            Loading options...
+          </Typography>
+        </Flex>
+      );
+    }
+    if (fetchError) {
+      return (
+        <Box
+          padding={2}
+          background="danger100"
+          borderColor="danger600"
+          borderStyle="solid"
+          borderWidth="1px"
+          hasRadius
+        >
+          <Typography variant="pi" textColor="danger600">
+            Failed to load options: {fetchError}
+          </Typography>
+        </Box>
+      );
+    }
+    return null;
+  };
+
+  // -------------------------------------------------------------------------
+  // Render
+  // -------------------------------------------------------------------------
+
+  return (
+    <Box padding={2}>
+      <Field.Root name={name} error={error} required={required}>
+        <Field.Label>{displayLabel}</Field.Label>
+        {renderFeedback()}
+        <IconSelect
+          forwardedRef={forwardedRef}
+          options={options}
+          value={
+            selectMode === "multiple"
+              ? normalizedMultiValue
+              : normalizedSingleValue
+          }
+          onChange={
+            selectMode === "multiple" ? handleMultiChange : handleSingleChange
+          }
+          onClear={
+            selectMode === "multiple" ? handleMultiClear : handleSingleClear
+          }
+          placeholder={getPlaceholder()}
+          disabled={disabled || loading}
+          isMulti={selectMode === "multiple"}
+        />
+        {description && <Field.Hint>{description}</Field.Hint>}
+        <Field.Error />
+      </Field.Root>
+    </Box>
+  );
+};
+
+ApiSelectInput.defaultProps = {
+  value: null,
+  placeholder: null,
+  error: null,
+  required: false,
+  disabled: false,
+  label: null,
+  description: null,
+  intlLabel: null,
+  forwardedRef: null,
+  attribute: {},
+};
+
+export default ApiSelectInput;