Fix/table issues

src/app/publishment/[id]/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 import EditorModal from "@/components/editor/EditorModal";
+import { Toaster } from "@/components/shared/Toaster";
 import Viewport from "@/components/shared/Viewport";
 import useDashboard from "@/hooks/dashboards/useDashboard";
 import { useTheme } from "next-themes";
@@ -20,6 +21,7 @@ export default function Dashboard() {
 
   return (
     <div className="flex flex-col justify-center items-center h-screen w-full bg-background">
+      <Toaster position="bottom-right" richColors />
       <EditorModal mode="view" />
       <Viewport mode="published" />
     </div>

src/components/editor/fastboard-components/shared/ViewActionModal.tsx

@@ -13,7 +13,7 @@ import {
   Spinner,
 } from "@nextui-org/react";
 import scrollbarStyles from "@/styles/scrollbar.module.css";
-import React from "react";
+import React, { useState } from "react";
 import {
   collapseAllNested,
   JsonView,
@@ -67,6 +67,8 @@ export default function ViewActionModal({
   onClose: () => void;
 }) {
   function mapfield(item: any): React.ReactElement {
+    const [imageFailLoad, setImageFailLoad] = useState(false);
+
     if (Array.isArray(item) || typeof item === "object") {
       return <ObjectFieldView data={item} />;
     } else if (typeof item === "boolean") {
@@ -80,16 +82,34 @@ export default function ViewActionModal({
     }
 
     //check if item is an image
-    if (item.match(/^https?:\/\/.*\.(?:png|jpg|jpeg|gif)$/)) {
-      return <Image src={item} height={100} />;
+    if (
+      item.match(/^https?:\/\/.*\.(?:png|jpg|jpeg|gif)$/) ||
+      item.match(/^data:image\/.*;base64/)
+    ) {
+      return (
+        <Image src={item} height={100} fallbackSrc={"/ImageErrorImage.svg"} />
+      );
     }
 
     //check if item is an url
     if (item.match(/^https?:\/\/[^\s/$.?#].[^\s]*$/)) {
-      return (
+      return imageFailLoad ? (
         <Link href={item} isExternal showAnchorIcon>
-          {item}
+          Link
         </Link>
+      ) : (
+        <Image
+          src={item}
+          height={100}
+          fallbackSrc={
+            <Link href={item} isExternal showAnchorIcon>
+              Link
+            </Link>
+          }
+          onError={() => {
+            setImageFailLoad(true);
+          }}
+        />
       );
     }
 

src/components/editor/fastboard-components/table/FastboardTable.tsx

@@ -506,7 +506,10 @@ export default function FastboardTable({
                       return (
                         <td
                           key={cell.id}
-                          className={"p-2 text-center text-xs " + bgColor}
+                          className={
+                            "p-2 text-center text-xs truncate max-w-28 " +
+                            bgColor
+                          }
                           style={{
                             ...getCommonPinningStyles(column, isStriped),
                           }}

src/components/editor/fastboard-components/table/properties/ActionProperties.tsx

@@ -68,79 +68,83 @@ export function ActionProperties({
         </div>
       )}
 
-      <QuerySelection
-        selectedQueryId={query?.queryId || ""}
-        onQuerySelect={(query) => {
-          onChange({
-            ...action,
-            query: queryToQueryData(query),
-            parameters: query.metadata.parameters?.map(
-              (p: { name: string; preview: string }) => ({
-                name: p.name,
-                columnKey: "",
-                value: p.preview,
-              })
-            ),
-          });
-        }}
-        type={actionToQueryType(action)}
-      />
-      {parameters?.length > 0 && (
-        <div className="flex justify-between">
-          <h1 className="text-small">Parameters</h1>
-          <Tooltip
-            content={
-              <div>
-                If no column is selected for a parameter we use{" "}
-                <Code className={"text-xs"}>{"preview value"}</Code> setting on
-                queries editor.
-              </div>
-            }
-            className={"p-3 w-[275px] -translate-x-[35px] text-xs"}
-            placement={"bottom"}
-            offset={10}
-            closeDelay={0}
-          >
-            <div>
-              <RiQuestionLine className={"text-foreground-500"} size={15} />
+      {action.type !== "edit" && (
+        <>
+          <QuerySelection
+            selectedQueryId={query?.queryId || ""}
+            onQuerySelect={(query) => {
+              onChange({
+                ...action,
+                query: queryToQueryData(query),
+                parameters: query.metadata.parameters?.map(
+                  (p: { name: string; preview: string }) => ({
+                    name: p.name,
+                    columnKey: "",
+                    value: p.preview,
+                  })
+                ),
+              });
+            }}
+            type={actionToQueryType(action)}
+          />
+          {parameters?.length > 0 && (
+            <div className="flex justify-between">
+              <h1 className="text-small">Parameters</h1>
+              <Tooltip
+                content={
+                  <div>
+                    If no column is selected for a parameter we use{" "}
+                    <Code className={"text-xs"}>{"preview value"}</Code> setting
+                    on queries editor.
+                  </div>
+                }
+                className={"p-3 w-[275px] -translate-x-[35px] text-xs"}
+                placement={"bottom"}
+                offset={10}
+                closeDelay={0}
+              >
+                <div>
+                  <RiQuestionLine className={"text-foreground-500"} size={15} />
+                </div>
+              </Tooltip>
             </div>
-          </Tooltip>
-        </div>
-      )}
-      <div className="flex flex-col gap-2 px-2 w-full">
-        {parameters?.map((parameter, index) => (
-          <div className="flex flex-row items-center justify-between gap-x-2">
-            <h2 className="w-full text-sm">{parameter.name}</h2>
-            <Select
-              items={columns}
-              placeholder="Select column"
-              selectedKeys={[parameter.columnKey]}
-              onSelectionChange={(key) => {
-                const columnKey = key.currentKey as string;
-                const newParameters = parameters.map((p) => {
-                  if (p.name === parameter.name) {
-                    return {
-                      ...p,
-                      columnKey: columnKey,
-                    };
-                  }
-                  return p;
-                });
-                onChange({
-                  ...action,
-                  parameters: newParameters,
-                });
-              }}
-            >
-              {(column) => (
-                <SelectItem key={column.key} value={column.key}>
-                  {column.label}
-                </SelectItem>
-              )}
-            </Select>
+          )}
+          <div className="flex flex-col gap-2 px-2 w-full">
+            {parameters?.map((parameter, index) => (
+              <div className="flex flex-row items-center justify-between gap-x-2">
+                <h2 className="w-full text-sm">{parameter.name}</h2>
+                <Select
+                  items={columns}
+                  placeholder="Select column"
+                  selectedKeys={[parameter.columnKey]}
+                  onSelectionChange={(key) => {
+                    const columnKey = key.currentKey as string;
+                    const newParameters = parameters.map((p) => {
+                      if (p.name === parameter.name) {
+                        return {
+                          ...p,
+                          columnKey: columnKey,
+                        };
+                      }
+                      return p;
+                    });
+                    onChange({
+                      ...action,
+                      parameters: newParameters,
+                    });
+                  }}
+                >
+                  {(column) => (
+                    <SelectItem key={column.key} value={column.key}>
+                      {column.label}
+                    </SelectItem>
+                  )}
+                </Select>
+              </div>
+            ))}
           </div>
-        ))}
-      </div>
+        </>
+      )}
     </div>
   );
 }

src/components/editor/fastboard-components/table/properties/TableActionsList.tsx

@@ -179,6 +179,7 @@ export default function TableActionsList({
                   key={action.key}
                   label={action.label}
                   startIcon={<Edit size={15} />}
+                  onPress={() => onActionSelect(action)}
                   onDelete={() => removeAction(action.key, index)}
                 />
               );

src/components/editor/fastboard-components/table/properties/TableStyle.tsx

@@ -23,30 +23,26 @@ export default function TableStyle({
 
   return (
     <div className="flex flex-col gap-2">
-      <div className="flex flex-row justify-between">
-        <span>Hide header</span>
-        <Checkbox
-          isSelected={hideHeader}
-          onValueChange={(isSelected) => {
-            onValueChange({
-              ...properties,
-              hideHeader: isSelected,
-            });
-          }}
-        />
-      </div>
-      <div className="flex flex-row justify-between">
-        <span>Stripped</span>
-        <Checkbox
-          isSelected={isStriped}
-          onValueChange={(isSelected) => {
-            onValueChange({
-              ...properties,
-              isStriped: isSelected,
-            });
-          }}
-        />
-      </div>
+      <CheckBoxProperty
+        label="Hide header"
+        isSelected={hideHeader}
+        onValueChange={(isSelected) => {
+          onValueChange({
+            ...properties,
+            hideHeader: isSelected,
+          });
+        }}
+      />
+      <CheckBoxProperty
+        label="Stripped"
+        isSelected={isStriped}
+        onValueChange={(isSelected) => {
+          onValueChange({
+            ...properties,
+            isStriped: isSelected,
+          });
+        }}
+      />
       <ColorPicker
         label="Header color"
         initialColor={theme === "light" ? headerColor.light : headerColor.dark}

src/components/shared/CsvExporter.tsx

@@ -31,7 +31,7 @@ export default function CsvExporter({
       }}
       startContent={<DocumentDownload className="text-default-600" />}
     >
-      Download
+      Download all
     </Button>
   );
 }

src/components/shared/IconPicker.tsx

@@ -54,6 +54,7 @@ import {
   Folder,
   Trash,
   User,
+  SearchNormal,
 } from "iconsax-react";
 import { IoIosClose } from "react-icons/io";
 
@@ -104,6 +105,7 @@ export function Icon({
     [IconType.Edit]: <Edit size={size} />,
     [IconType.Element]: <Element size={size} />,
     [IconType.Eye]: <Eye size={size} />,
+    [IconType.Search]: <SearchNormal size={size} />,
     [IconType.Flag]: <Flag size={size} />,
     [IconType.Flash]: <Flash size={size} />,
     [IconType.Game]: <Game size={size} />,

src/types/editor/icon-types.ts

@@ -45,6 +45,7 @@ export enum IconType {
   Hierarchy = "Hierarchy",
   Home = "Home",
   Folder = "Folder",
+  Search = "Search",
   Trash = "Trash",
   User = "User",
 }