qantler-flaz-dataview 1.0.0

package/src/MdtCreateViewModal.jsx

@@ -0,0 +1,280 @@
+import React, { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Layout, Loader2, Menu, SlidersHorizontal } from "lucide-react";
+import MdtDisplayPopup from "./MdtDisplayPopup";
+import MdtDeleteViewConfirmModal from "./MdtDeleteViewConfirmModal";
+
+const VIEW_OPTIONS = [
+  { id: "list", label: "List", icon: Menu },
+  { id: "table", label: "Table", icon: Layout },
+];
+
+const MdtCreateViewModal = ({
+  open,
+  onClose,
+  onCreate,
+  onDelete,
+  mode = "create",
+  editingView = null,
+  initialViewMode = "table",
+  defaultName = "",
+  filterBar = null,
+  displayPopupProps = null,
+}) => {
+  const isEdit = mode === "edit";
+  const [name, setName] = useState(defaultName || "Untitled");
+  const [description, setDescription] = useState("");
+  const [viewMode, setViewMode] = useState(initialViewMode);
+  const [viewMenuOpen, setViewMenuOpen] = useState(false);
+  const [displayMenuOpen, setDisplayMenuOpen] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isPublic, setIsPublic] = useState(false);
+  const isBusy = isSaving || isDeleting;
+  const viewMenuRef = useRef(null);
+  const displayMenuRef = useRef(null);
+
+  useEffect(() => {
+    if (!open) {
+      setIsSaving(false);
+      setIsDeleting(false);
+      return;
+    }
+    setName(editingView?.name ?? defaultName ?? "Untitled");
+    setDescription(editingView?.description ?? "");
+    const modeValue = editingView?.viewMode ?? initialViewMode;
+    setViewMode(modeValue === "list" ? "list" : "table");
+    setIsPublic(editingView?.isPublic ?? false);
+    setViewMenuOpen(false);
+    setDisplayMenuOpen(false);
+    setShowDeleteConfirm(false);
+    setIsSaving(false);
+    setIsDeleting(false);
+  }, [open, editingView, defaultName, initialViewMode]);
+
+  useEffect(() => {
+    if (!open || showDeleteConfirm) return undefined;
+    const onKey = (e) => {
+      if (e.key === "Escape" && !isBusy) onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, showDeleteConfirm, onClose, isBusy]);
+
+  useEffect(() => {
+    if (!viewMenuOpen && !displayMenuOpen) return undefined;
+    const handleOutside = (e) => {
+      if (viewMenuOpen && viewMenuRef.current && !viewMenuRef.current.contains(e.target)) {
+        setViewMenuOpen(false);
+      }
+      if (displayMenuOpen && displayMenuRef.current && !displayMenuRef.current.contains(e.target)) {
+        setDisplayMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleOutside, true);
+    return () => document.removeEventListener("mousedown", handleOutside, true);
+  }, [viewMenuOpen, displayMenuOpen]);
+
+  if (!open) return null;
+
+  const activeView = VIEW_OPTIONS.find((v) => v.id === viewMode) || VIEW_OPTIONS[1];
+  const ActiveViewIcon = activeView.icon;
+
+  const handleSubmit = async () => {
+    if (isBusy || !onCreate) return;
+    setIsSaving(true);
+    try {
+      await onCreate({
+        name: name.trim() || "Untitled",
+        description: description.trim(),
+        viewMode,
+        isPublic,
+      });
+    } catch {
+      // Parent logs the error; keep modal open for retry.
+      setIsSaving(false);
+    }
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (isBusy || !onDelete) return;
+    setIsDeleting(true);
+    try {
+      await onDelete();
+      setShowDeleteConfirm(false);
+    } catch {
+      // Parent logs the error; keep confirm open for retry.
+      setIsDeleting(false);
+    }
+  };
+
+  return createPortal(
+    <div
+      className="mdt-cv-overlay"
+      onMouseDown={(e) => {
+        if (isBusy) return;
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        className="mdt-cv-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="mdt-cv-title"
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <h2 id="mdt-cv-title" className="mdt-cv-heading">
+          {isEdit ? "Update View" : "Create View"}
+        </h2>
+
+        <div className="mdt-cv-body">
+          <input
+            type="text"
+            className="mdt-cv-name-input"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Untitled"
+          />
+
+          <textarea
+            className="mdt-cv-description"
+            placeholder="Description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            rows={4}
+          />
+
+          <div className="mdt-cv-view-row">
+            <div className="mdt-cv-view-picker" ref={viewMenuRef}>
+              <button
+                type="button"
+                className="mdt-cv-view-btn"
+                onClick={() => {
+                  setDisplayMenuOpen(false);
+                  setViewMenuOpen((v) => !v);
+                }}
+              >
+                <ActiveViewIcon size={11} />
+                <span>{activeView.label}</span>
+              </button>
+              {viewMenuOpen && (
+                <div className="mdt-cv-view-menu">
+                  {VIEW_OPTIONS.map((opt) => {
+                    const Icon = opt.icon;
+                    const selected = viewMode === opt.id;
+                    return (
+                      <button
+                        key={opt.id}
+                        type="button"
+                        className={`mdt-cv-view-option${selected ? " mdt-cv-view-option--selected" : ""}`}
+                        onClick={() => {
+                          setViewMode(opt.id);
+                          setViewMenuOpen(false);
+                        }}
+                      >
+                        <Icon size={11} />
+                        <span>{opt.label}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+
+            {displayPopupProps && (
+              <div className="mdt-cv-view-picker mdt-cv-display-picker" ref={displayMenuRef}>
+                <button
+                  type="button"
+                  className={`mdt-cv-view-btn mdt-cv-display-btn${displayMenuOpen ? " mdt-cv-display-btn--open" : ""}`}
+                  title="Display"
+                  aria-label="Display"
+                  onClick={() => {
+                    setViewMenuOpen(false);
+                    setDisplayMenuOpen((v) => !v);
+                  }}
+                >
+                  <SlidersHorizontal size={11} />
+                </button>
+                {displayMenuOpen && (
+                  <MdtDisplayPopup
+                    {...displayPopupProps}
+                    viewMode={viewMode}
+                    className="mdt-cv-display-popup"
+                  />
+                )}
+              </div>
+            )}
+          </div>
+
+          {filterBar && (
+            <div className="mdt-cv-filter-slot">
+              {filterBar}
+            </div>
+          )}
+
+          <label className="mdt-cv-public-toggle">
+            <input
+              type="checkbox"
+              checked={isPublic}
+              onChange={(e) => setIsPublic(e.target.checked)}
+            />
+            <span>Visible to All</span>
+          </label>
+        </div>
+
+        <div className={`mdt-cv-footer${isEdit ? " mdt-cv-footer--edit" : ""}`}>
+          {isEdit && onDelete && (
+            <button
+              type="button"
+              className="mdt-cv-btn-delete"
+              disabled={isBusy}
+              onClick={() => setShowDeleteConfirm(true)}
+            >
+              Delete
+            </button>
+          )}
+          <div className="mdt-cv-footer-actions">
+            <button
+              type="button"
+              className="mdt-cv-btn-cancel"
+              disabled={isBusy}
+              onClick={onClose}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              className="mdt-cv-btn-create"
+              disabled={isBusy}
+              onClick={handleSubmit}
+            >
+              {isSaving && <Loader2 size={14} className="mdt-cv-btn-spinner" aria-hidden />}
+              {isSaving
+                ? isEdit
+                  ? "Updating..."
+                  : "Creating..."
+                : isEdit
+                  ? "Update"
+                  : "Create"}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <MdtDeleteViewConfirmModal
+        open={showDeleteConfirm}
+        viewName={editingView?.name || name}
+        isDeleting={isDeleting}
+        onCancel={() => {
+          if (isDeleting) return;
+          setShowDeleteConfirm(false);
+        }}
+        onConfirm={handleDeleteConfirm}
+      />
+    </div>,
+    document.body,
+  );
+};
+
+export default MdtCreateViewModal;

package/src/MdtDatetimeValueEditor.jsx

@@ -0,0 +1,259 @@
+import { useEffect, useRef, useState } from "react";
+import moment from "moment";
+import MdtValueEditorPopup from "./MdtValueEditorPopup";
+import { EDIT_MODE } from "./mdtColumnEditUtils";
+import { isDatetimeBetweenValue } from "./mdtDateFilterUtils";
+import "../JobApplications/JobApplications.css";
+
+const HOURS = Array.from({ length: 12 }, (_, index) =>
+  String(index + 1).padStart(2, "0"),
+);
+const MINUTES = Array.from({ length: 60 }, (_, index) =>
+  String(index).padStart(2, "0"),
+);
+
+export const parseDatetimeValue = (value) => {
+  if (!value) {
+    return { date: "", hour: "12", minute: "00", period: "AM" };
+  }
+
+  const parsed = moment(value);
+  if (!parsed.isValid()) {
+    return { date: "", hour: "12", minute: "00", period: "AM" };
+  }
+
+  return {
+    date: parsed.format("YYYY-MM-DD"),
+    hour: parsed.format("hh"),
+    minute: parsed.format("mm"),
+    period: parsed.format("A"),
+  };
+};
+
+export const buildDatetimeValue = ({ date, hour, minute, period }) => {
+  if (!date) return "";
+
+  const parsed = moment(`${date} ${hour}:${minute} ${period}`, "YYYY-MM-DD hh:mm A");
+  if (!parsed.isValid()) return "";
+
+  return parsed.format("YYYY-MM-DDTHH:mm");
+};
+
+export const formatDatetimeFilterDisplay = (value) => {
+  if (!value) return "";
+
+  const parsed = moment(value);
+  return parsed.isValid() ? parsed.format("DD MMM YYYY, h:mm A") : "";
+};
+
+const TimeColumn = ({ items, value, onChange }) => {
+  const columnRef = useRef(null);
+
+  useEffect(() => {
+    const selected = columnRef.current?.querySelector(
+      ".ja-interview-datetime-time__option--selected",
+    );
+    selected?.scrollIntoView({ block: "center" });
+  }, [value]);
+
+  return (
+    <div ref={columnRef} className="ja-interview-datetime-time__column">
+      {items.map((item) => (
+        <button
+          key={item}
+          type="button"
+          className={`ja-interview-datetime-time__option${
+            value === item ? " ja-interview-datetime-time__option--selected" : ""
+          }`}
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={() => onChange(item)}
+        >
+          {item}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+const MdtDatetimeValueEditor = ({
+  value,
+  onApply,
+  onCancel,
+  className = "",
+  columnLabel = "Date & Time",
+  filterOperator = "is",
+  isFilterMode = false,
+  min,
+}) => {
+  const isRangeFilter = isFilterMode && filterOperator === "between";
+  const [rangeStart, setRangeStart] = useState(null);
+  const [pickingEnd, setPickingEnd] = useState(false);
+  const [draft, setDraft] = useState(parseDatetimeValue(""));
+  const [saveError, setSaveError] = useState("");
+
+  useEffect(() => {
+    if (isRangeFilter && isDatetimeBetweenValue(value)) {
+      setRangeStart(value[0]);
+      setPickingEnd(true);
+      setDraft(parseDatetimeValue(value[1]));
+      setSaveError("");
+      return;
+    }
+
+    if (isRangeFilter && value) {
+      setRangeStart(Array.isArray(value) ? value[0] : value);
+      setPickingEnd(true);
+      setDraft(parseDatetimeValue(""));
+      setSaveError("");
+      return;
+    }
+
+    setRangeStart(null);
+    setPickingEnd(false);
+    const nextValue = Array.isArray(value) ? value[0] : value;
+    setDraft(parseDatetimeValue(nextValue));
+    setSaveError("");
+  }, [value, isRangeFilter]);
+
+  const handleSave = () => {
+    const nextValue = buildDatetimeValue(draft);
+    if (!nextValue) {
+      setSaveError("Select a date and time.");
+      return;
+    }
+
+    const parsedNext = moment(nextValue, "YYYY-MM-DDTHH:mm", true);
+    const parsedMin = min ? moment(min, "YYYY-MM-DDTHH:mm", true) : null;
+    if (parsedMin?.isValid() && parsedNext.isBefore(parsedMin)) {
+      setSaveError("Date and time must be on or after the minimum allowed time.");
+      return;
+    }
+
+    if (isRangeFilter) {
+      if (!pickingEnd || !rangeStart) {
+        setRangeStart(nextValue);
+        setPickingEnd(true);
+        setDraft(parseDatetimeValue(""));
+        setSaveError("");
+        return;
+      }
+
+      const startMoment = moment(rangeStart, "YYYY-MM-DDTHH:mm", true);
+      const endMoment = parsedNext;
+      const [start, end] = endMoment.isBefore(startMoment)
+        ? [nextValue, rangeStart]
+        : [rangeStart, nextValue];
+
+      setSaveError("");
+      onApply?.([start, end]);
+      return;
+    }
+
+    setSaveError("");
+    onApply?.(nextValue);
+  };
+
+  const popupColumn = {
+    accessorKey: columnLabel,
+    header: columnLabel,
+    editVariant: "date",
+  };
+
+  const primaryLabel = isRangeFilter
+    ? pickingEnd && rangeStart
+      ? "Apply"
+      : "Next"
+    : isFilterMode
+      ? "Apply"
+      : "Save";
+
+  return (
+    <div
+      className={`ja-interview-datetime-popup mdt-datetime-value-editor ${className}`.trim()}
+      onMouseDown={(event) => event.stopPropagation()}
+      onClick={(event) => event.stopPropagation()}
+    >
+      {isRangeFilter ? (
+        <p className="ja-interview-datetime-range-hint">
+          {pickingEnd && rangeStart
+            ? `End: after ${formatDatetimeFilterDisplay(rangeStart)}`
+            : "Start date and time"}
+        </p>
+      ) : null}
+      <div className="ja-interview-datetime-body">
+        <div className="ja-interview-datetime-calendar">
+          <MdtValueEditorPopup
+            className="cand-edit-popup-override"
+            column={popupColumn}
+            mode={EDIT_MODE.INLINE}
+            value={draft.date}
+            showActions={false}
+            onApply={(dateStr) => {
+              setDraft((prev) => ({ ...prev, date: dateStr || "" }));
+            }}
+          />
+        </div>
+        <div className="ja-interview-datetime-time">
+          <TimeColumn
+            items={HOURS}
+            value={draft.hour}
+            onChange={(hour) => {
+              setDraft((prev) => ({ ...prev, hour }));
+            }}
+          />
+          <TimeColumn
+            items={MINUTES}
+            value={draft.minute}
+            onChange={(minute) => {
+              setDraft((prev) => ({ ...prev, minute }));
+            }}
+          />
+          <TimeColumn
+            items={["AM", "PM"]}
+            value={draft.period}
+            onChange={(period) => {
+              setDraft((prev) => ({ ...prev, period }));
+            }}
+          />
+        </div>
+      </div>
+      <div className="ja-interview-datetime-footer">
+        {saveError ? (
+          <p className="ja-interview-datetime-footer__error">{saveError}</p>
+        ) : null}
+        <div className="ja-interview-datetime-footer__actions">
+          <button
+            type="button"
+            className="mdt-ghost"
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={() => {
+              if (isFilterMode) {
+                onApply?.(null);
+              } else {
+                onCancel?.();
+              }
+            }}
+          >
+            {isFilterMode ? "Clear" : "Cancel"}
+          </button>
+          <button
+            type="button"
+            className="mdt-primary"
+            disabled={!draft.date}
+            onMouseDown={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              if (draft.date) {
+                handleSave();
+              }
+            }}
+          >
+            {primaryLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MdtDatetimeValueEditor;

package/src/MdtDeleteViewConfirmModal.jsx

@@ -0,0 +1,83 @@
+import React, { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Loader2, TriangleAlert } from "lucide-react";
+
+const MdtDeleteViewConfirmModal = ({
+  open,
+  viewName = "",
+  isDeleting = false,
+  onCancel,
+  onConfirm,
+}) => {
+  useEffect(() => {
+    if (!open) return undefined;
+    const onKey = (e) => {
+      if (e.key === "Escape" && !isDeleting) onCancel?.();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onCancel, isDeleting]);
+
+  if (!open) return null;
+
+  const displayName = viewName?.trim() || "Untitled";
+
+  return createPortal(
+    <div
+      className="mdt-del-confirm-overlay"
+      onMouseDown={(e) => {
+        if (isDeleting) return;
+        if (e.target === e.currentTarget) onCancel?.();
+      }}
+    >
+      <div
+        className="mdt-del-confirm-modal"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="mdt-del-confirm-title"
+        aria-describedby="mdt-del-confirm-desc"
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <div className="mdt-del-confirm-body">
+          <span className="mdt-del-confirm-icon-wrap" aria-hidden="true">
+            <TriangleAlert size={20} strokeWidth={2} />
+          </span>
+          <div className="mdt-del-confirm-content">
+            <h2 id="mdt-del-confirm-title" className="mdt-del-confirm-title">
+              Delete View
+            </h2>
+            <p id="mdt-del-confirm-desc" className="mdt-del-confirm-desc">
+              Are you sure you want to delete view{" "}
+              <strong>{displayName}</strong>? All filters and display settings for
+              this view will be permanently removed. This action cannot be undone.
+            </p>
+          </div>
+        </div>
+        <div className="mdt-del-confirm-footer">
+          <button
+            type="button"
+            className="mdt-del-confirm-btn-cancel"
+            disabled={isDeleting}
+            onClick={onCancel}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="mdt-del-confirm-btn-delete"
+            disabled={isDeleting}
+            onClick={onConfirm}
+          >
+            {isDeleting && (
+              <Loader2 size={14} className="mdt-cv-btn-spinner" aria-hidden />
+            )}
+            {isDeleting ? "Deleting..." : "Delete"}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+};
+
+export default MdtDeleteViewConfirmModal;