@solidstarters/solid-core-ui 1.1.210 → 1.1.211

package/src/components/core/kanban/KanbanCard.tsx

@@ -0,0 +1,279 @@
+// @ts-nocheck
+'use client';
+import React, { useRef } from "react";
+import { SolidKanbanViewFields } from "./SolidKanbanViewFields";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Button } from "primereact/button";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { Draggable, DraggableProvided } from "@hello-pangea/dnd";
+
+// Define the types for the data and props
+interface Data {
+  id: string;
+  title: string;
+  content: string;
+}
+
+interface KanbanCardProps {
+  data: Data;
+  solidKanbanViewMetaData: any;
+  index: number;
+}
+
+// Render columns dynamically based on metadata
+const renderFieldsDynamically = (field: any, data: any, solidKanbanViewMetaData: any, setLightboxUrls?: any, setOpenLightbox?: any, groupedView: boolean) => {
+  if (!solidKanbanViewMetaData) {
+    return;
+  }
+
+  const solidView = solidKanbanViewMetaData.solidView;
+  const solidFieldsMetadata = solidKanbanViewMetaData.solidFieldsMetadata;
+  if (!solidView || !solidFieldsMetadata) {
+    return;
+  }
+  const fieldMetadata = solidFieldsMetadata[field.attrs.name];
+  const fieldLayout = field;
+  return SolidKanbanViewFields({ solidKanbanViewMetaData, fieldMetadata, fieldLayout, data, setLightboxUrls, setOpenLightbox, groupedView });
+  // return solidView.layout.children?.map((column: any) => {
+  //   const fieldMetadata = solidFieldsMetadata[column.attrs.name];
+  //   if (!fieldMetadata) {
+  //     return;
+  //   }
+
+  //   return SolidKanbanViewFields({ solidKanbanViewMetaData, fieldMetadata, column });
+
+  // });
+};
+
+const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidKanbanViewMetaData, index, setLightboxUrls, setOpenLightbox, editButtonUrl, groupedView }) => {
+  const router = useRouter()
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const SolidRow = ({ children, attrs }: any) => {
+    const className = attrs.className;
+    return (
+      // <div className={`row ${className}`}>
+      //   <div className="s_group">
+      //     <div>
+      //       {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
+      //       <div className="grid">{children}</div>
+      //     </div>
+      //   </div>
+      // </div>
+      <>
+        {attrs.label && <p className="">{attrs.label}</p>}
+        <div className={`row ${className}`}>
+          {children}
+        </div>
+      </>
+    );
+  };
+  const SolidColumn = ({ children, attrs }: any) => {
+    const className = attrs.className;
+    return (
+      // <div className={`${className}`}>
+      //   <div className="s_group">
+      //     <div>
+      //       {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
+      //       <div className="grid">{children}</div>
+      //     </div>
+      //   </div>
+      // </div>
+      <div className={`${className}`}>
+        {attrs.label && <p className="">{attrs.label}</p>}
+        {children}
+      </div>
+    );
+  };
+  const SolidImage = ({ children, attrs }: any) => {
+    const className = attrs.className;
+    return (
+      // <div className={`${className}`}>
+      //   <div className="s_group">
+      //     <div>
+      //       {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
+      //       <div className="grid">{children}</div>
+      //     </div>
+      //   </div>
+      // </div>
+      <div className={`${className}`}>
+        {attrs.label && <p className="">{attrs.label}</p>}
+        {children}
+      </div>
+    );
+  };
+
+  const SolidField = ({ field, data, solidKanbanViewMetaData }: any) => {
+
+    return renderFieldsDynamically(field, data, solidKanbanViewMetaData, setLightboxUrls, setOpenLightbox, groupedView)
+    // switch (solidKanbanViewMetaData[field.attrs.name].type) {
+    //   case "mediaSingle":
+    //     return <img src=""></img>
+    //   default:
+    //     return <p>{initialEntityData[field.attrs.name]}</p>
+
+    // }
+  };
+
+  const SolidCard = ({ children }: any) => (
+    <div className="p-fluid p-grid">
+      {children}
+    </div>
+  );
+
+  // Now render the form dynamically...
+  const renderFormElementDynamically: any = (element: any, solidKanbanViewMetaData: any) => {
+    let { type, attrs, body, children } = element;
+    // const key = attrs?.name ?? generateRandomKey();
+    const key = attrs?.name;
+    switch (type) {
+      case "div":
+        if (!children)
+          children = [];
+        return <div key={key} {...attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidFormViewMetaData, formik))}</div>
+      case "span":
+        return <span key={key} {...attrs}>{body}</span>
+      case "p":
+        return <p key={key} className={attrs?.className} {...attrs}>{body}</p>
+      case "h1":
+        return <h1 key={key} {...attrs}>{body}</h1>
+      case "h2":
+        return <h2 key={key} {...attrs}>{body}</h2>
+      case "ul":
+        if (!children)
+          children = [];
+        return <ul key={key} {...attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidFormViewMetaData, formik))}</ul>
+      case "li":
+        return <li key={key} {...attrs}>{body}</li>
+      case "card":
+        return <SolidCard key={key}>{children.map((element: any) => renderFormElementDynamically(element, solidKanbanViewMetaData))}</SolidCard>;
+      case "row":
+        return <SolidRow key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidKanbanViewMetaData))}</SolidRow>;
+      case "column":
+        return <SolidColumn key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidKanbanViewMetaData))}</SolidColumn>;
+      case "image":
+        return <SolidImage key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidKanbanViewMetaData))}</SolidImage>;
+
+      case "field": {
+        // const fieldMetadata = solidFieldsMetadata[attrs.name];
+        const fieldMetadata = solidKanbanViewMetaData.solidFieldsMetadata[attrs.name];
+        return <SolidField key={key} field={element} fieldMetadata={fieldMetadata} data={data ? data : null} solidKanbanViewMetaData={solidKanbanViewMetaData} />;
+      }
+      default:
+        return null;
+    }
+  };
+
+  const renderFormDynamically = (solidKanbanViewMetaData: any) => {
+    if (!solidKanbanViewMetaData) {
+      return;
+    }
+    const solidView = solidKanbanViewMetaData.solidView;
+    const solidFieldsMetadata = solidKanbanViewMetaData.solidFieldsMetadata;
+    if (!solidView || !solidFieldsMetadata) {
+      return;
+    }
+    if (!solidView || !solidFieldsMetadata) {
+      return;
+    }
+    const updatedLayout = solidView.layout.children;
+    const dynamicForm = updatedLayout.map((element: any) => renderFormElementDynamically(element, solidKanbanViewMetaData));
+    return dynamicForm;
+  };
+
+  const kanbanActionRef = useRef(null);
+
+  const renderKanbanAction = (data, groupedView) => {
+    return (
+      <div className="solid-kanban-action" onClick={(e) => e.stopPropagation()}>
+        <Button
+          size="small"
+          text
+          className="text-sm p-0"
+          icon="pi pi-ellipsis-v"
+          onClick={(e) => kanbanActionRef.current.toggle(e)}
+          style={{ width: 25, height: 25 }}
+        />
+        <OverlayPanel ref={kanbanActionRef} className="solid-custom-overlay">
+          <div className="flex flex-column">
+            <Button
+              type="button"
+              className="w-8rem text-left gap-1"
+              label="Edit"
+              size="small"
+              iconPos="left"
+              text
+              icon={"pi pi-pencil"}
+              onClick={() => router.push(`${editButtonUrl}/${data?.id}`)}
+            />
+            {!groupedView &&
+              <a
+                href={data?.relativeUri}
+                download={data?.originalFileName}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Button
+                  type="button"
+                  className="w-8rem text-left gap-1"
+                  label="Download"
+                  size="small"
+                  iconPos="left"
+                  icon={"pi pi-download"}
+                />
+              </a>
+            }
+          </div>
+        </OverlayPanel>
+      </div>
+    )
+  }
+
+  return (
+    <Draggable draggableId={String(data.id)} index={index} isDragDisabled={!groupedView}>
+      {(provided: DraggableProvided, snapshot) => (
+        <div
+          className=""
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+          style={{ marginTop: "1rem", ...provided.draggableProps.style }}
+          className="kanban-card-container"
+        >
+          {/* <p className="kanban-card-heading">{data.title}</p> */}
+          {/* <p className="kanban-card-content">{data.content}</p> */}
+          <div
+            style={{
+              opacity: snapshot.isDragging ? 0.9 : 1,
+              transform: snapshot.isDragging ? "rotate(-2deg)" : "",
+              cursor: 'pointer'
+            }}
+            elevation={snapshot.isDragging ? 3 : 1}
+            className={`${!groupedView ? 'solid-media-card' : 'solid-kanban-card'}`}
+            onClick={() => {
+              if (typeof window !== "undefined") {
+                // const queryString = searchParams.toString();
+                // const finalUrl = queryString ? `${pathname}?${queryString}` : pathname;
+                // sessionStorage.setItem("fromView", finalUrl);
+                sessionStorage.setItem("fromView", "kanban");
+
+              }
+              router.push(`${editButtonUrl}/${data?.id}`)
+            }}
+          >
+            {renderKanbanAction(data, groupedView)}
+            {renderFormDynamically(solidKanbanViewMetaData)}
+            {/* {solidKanbanViewMetaData?.solidView?.layout?.layoutData &&
+              Object.entries(solidKanbanViewMetaData?.solidView?.layout?.layoutData).map(([key, value]) => (
+                <p className="kanban-card-heading" key={key}>{data[value]}</p>
+              ))
+            } */}
+            {/* <p className="kanban-card-content">{data.content}</p> */}
+          </div>
+        </div>
+      )}
+    </Draggable>
+  );
+};
+
+export default KanbanCard;

package/src/components/core/kanban/KanbanColumn.tsx

@@ -0,0 +1,139 @@
+// @ts-nocheck
+'use client';
+
+
+import React, { useRef } from "react";
+import { Droppable, DroppableProvided } from "@hello-pangea/dnd";
+import { Button } from "primereact/button";
+import KanbanCard from "./KanbanCard";
+import { OverlayPanel } from "primereact/overlaypanel";
+
+// Define types for props
+interface Group {
+  label: string;
+  count: number;
+  folded: boolean;
+  limit: number;
+  currentPage: number;
+}
+
+interface GroupData {
+  id: string;
+  title: string;
+  groupByField: string;
+}
+
+interface KanbanColumnProps {
+  groupedView: boolean;
+  groupByField: string;
+  group: Group;
+  groupData: GroupData[];
+  toggleFold: (groupByField: string) => void;
+  handleLoadMore: (groupByField: string) => void;
+  setLightboxUrls: any,
+  setOpenLightbox: any
+}
+
+const KanbanColumn = ({ groupedView, groupByField, solidKanbanViewMetaData, group, groupData, toggleFold, handleLoadMore, setLightboxUrls, setOpenLightbox, editButtonUrl }: KanbanColumnProps) => {
+  const op = useRef<any>(null);
+
+
+  return (
+    <div className={group.folded ? (groupedView === false ? "kanban-column kanban-ungrouped-column kanban-column-folded" : "kanban-column kanban-column-folded") : (groupedView === false ? "kanban-column kanban-ungrouped-column" : "kanban-column")}>
+      {groupedView !== false &&
+        <div className="kaban-heading-area">
+          {group.folded &&
+            <a onClick={e => toggleFold(groupByField)}>
+              <div className="flex align-items-center">
+                <div className="kanban-arrow-icon-container">
+                  <i className="pi pi-sort-up-fill"></i>
+                  <i className="pi pi-sort-down-fill"></i>
+                </div>
+                <p className="kanban-group-heading">{`${group.label}`}<span className="kanban-count-badge">{group.count}</span></p>
+              </div>
+            </a>
+          }
+
+          {!group.folded &&
+            <div className="flex align-items-center">
+              <p className="kanban-group-heading">{`${group.label}`}<span className="kanban-count-badge">{group.count}</span></p>
+            </div>
+          }
+          {!group.folded &&
+            <Button
+              onClick={(e: any) => op?.current?.toggle(e)}
+              icon='pi pi-cog'
+              text
+              className="p-0 kanban-column-cogwheel"
+              rounded
+              severity="secondary"
+            />
+          }
+          <OverlayPanel ref={op} className="kanban-options-panel">
+
+            <div
+              className="w-full md:w-10rem p-menu p-component"
+              data-pc-name="menu"
+              data-pc-section="root"
+            >
+              <ul
+                className="p-menu-list p-reset"
+                id="pr_id_11_list"
+                role="menu"
+                data-pc-section="menu"
+              >
+                <li
+                  className="p-menuitem"
+                  role="menuitem"
+                  data-pc-section="menuitem"
+                  data-p-focused="false"
+                  data-p-disabled="false"
+                >
+                  <button className="p-menuitem-link w-full p-link flex align-items-center md:pl-2 text-color hover:surface-200 border-noround">
+                    <div
+                      className="mr-2 p-avatar p-component p-avatar-image p-avatar-circle hidden md:flex"
+                      data-pc-name="avatar"
+                      data-pc-section="root"
+                    >
+                    </div>
+                    <div className="flex flex-column align px-4 md:px-0 ">
+
+                      <a className="flex align-items-center p-menuitem-link" onClick={e => { toggleFold(groupByField); op?.current?.toggle(e) }}>
+                        <span className="">Fold</span>
+                      </a>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </OverlayPanel>
+        </div>
+      }
+      {!group.folded && (
+        <Droppable droppableId={groupByField} isDropDisable={!groupedView}>
+          {(provided: DroppableProvided) => (
+            <div
+              ref={provided.innerRef}
+              {...provided.droppableProps}
+              style={{ minHeight: "100px" }}
+              className={groupedView === false && "kanban-ungrouped-column-content"}
+            >
+              {groupData.map((data, index) => (
+                <KanbanCard groupedView={groupedView} key={data.id} data={data} solidKanbanViewMetaData={solidKanbanViewMetaData} index={index} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox} editButtonUrl={editButtonUrl} />
+              ))}
+              {provided.placeholder}
+              {group.count > 0 && (group.count > (group.limit * group.currentPage)) &&
+                <Button text className="kaban-load-more" size="small"
+                  onClick={() => handleLoadMore(groupByField)}
+                  label={`Load more data... ( ${group.count - (group.limit * group.currentPage)} remaining)`}
+                />
+              }
+            </div>
+          )}
+        </Droppable>
+      )}
+    </div>
+  );
+};
+
+export default KanbanColumn;

package/src/components/core/kanban/KanbanUserViewLayout.tsx

@@ -0,0 +1,84 @@
+"use client";
+import { useFormik } from "formik";
+import { Button } from "primereact/button";
+import { useSelector } from "react-redux";
+import React, { useRef } from "react";
+import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
+import { javascript } from "@codemirror/lang-javascript";
+import { oneDark } from "@codemirror/theme-one-dark";
+import CodeMirror, { EditorView } from "@uiw/react-codemirror";
+import { Toast } from "primereact/toast";
+import { ERROR_MESSAGES } from "../../../constants/error-messages";
+export const KanbanUserViewLayout = ({ solidKanbanViewMetaData, setLayoutDialogVisible }: any) => {
+    const toast = useRef<Toast>(null);
+    const entityApi = createSolidEntityApi("userViewMetadata");
+    const { useUpsertSolidEntityMutation } = entityApi;
+    const [upsertUserView] = useUpsertSolidEntityMutation();
+
+    if (!solidKanbanViewMetaData?.data?.solidView) return null;
+
+    const solidView = solidKanbanViewMetaData.data.solidView;
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+            ? { sticky: true }            // stays until user closes
+            : { life: 3000 }),
+        });
+    };
+
+    const formik = useFormik({
+        initialValues: {
+            layoutString: JSON.stringify(solidView.layout, null, 2),
+        },
+        onSubmit: async (values) => {
+            const parsedLayout = JSON.parse(values.layoutString);
+            try {
+                if (solidView.id) {
+                    const response = await upsertUserView({
+                        viewMetadataId: solidView.id,
+                        layout: JSON.stringify(parsedLayout),
+                    }).unwrap();
+                    if (response.statusCode === 200) {
+                        showToast("success", ERROR_MESSAGES.LAYOUT, ERROR_MESSAGES.FORM_LAYOUT_UPDATE);
+                        setLayoutDialogVisible(false);
+                        window.location.reload();
+                    }
+                }
+            } catch (error) {
+                console.error(ERROR_MESSAGES.UPDATE_FAILED, error);
+            }
+        },
+    });
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <form onSubmit={formik.handleSubmit}>
+                <CodeMirror
+                    value={formik.values.layoutString}
+                    height="500px"
+                    theme={oneDark}
+                    style={{ fontSize: '10px' }}
+                    extensions={[javascript(), EditorView.lineWrapping]}
+                    onChange={(value) => {
+                        formik.setFieldValue("layoutString", value);
+                    }}
+                />
+                <div className="pt-3 flex gap-2">
+                    <Button type="submit" label="Apply" size="small" />
+                    <Button
+                        type="button"
+                        outlined
+                        label="Cancel"
+                        size="small"
+                        onClick={() => setLayoutDialogVisible(false)}
+                    />
+                </div>
+            </form>
+        </>
+    );
+};