@solidxai/core-ui 0.1.1 → 0.1.2

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

@@ -1,280 +0,0 @@
-// @ts-nocheck
-import React, { useRef } from "react";
-import { SolidKanbanViewFields } from "./SolidKanbanViewFields";
-import { usePathname } from "../../../hooks/usePathname";
-import { useRouter } from "../../../hooks/useRouter";
-import { useSearchParams } from "../../../hooks/useSearchParams";
-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

@@ -1,138 +0,0 @@
-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
-}
-
-// @ts-ignore
-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} isDropDisabled={!groupedView}>
-          {(provided: DroppableProvided) => (
-            <div
-              ref={provided.innerRef}
-              {...provided.droppableProps}
-              style={{ minHeight: "100px" }}
-              // @ts-ignore
-              className={groupedView === false && "kanban-ungrouped-column-content"}
-            >
-              {groupData.map((data, index) => (
-                // @ts-ignore
-                <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

@@ -1,73 +0,0 @@
-import { useFormik } from "formik";
-import { Button } from "primereact/button";
-import { 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";
-import showToast from "../../../helpers/showToast";
-
-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 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(toast, "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>
-        </>
-    );
-};