wip: Table view

vriteio · Dec 19, 2023 · 9a7e76b · 9a7e76b
1 parent dfeb424
commit 9a7e76b
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 50 deletions.
diff --git a/apps/web/src/views/dashboard/views/list/content-piece-list.tsx b/apps/web/src/views/dashboard/views/list/content-piece-list.tsx
@@ -5,6 +5,7 @@ import {
   mdiDotsHorizontal,
   mdiDotsHorizontalCircleOutline,
   mdiFileDocumentPlusOutline,
+  mdiFolder,
   mdiIdentifier,
   mdiTrashCan
 } from "@mdi/js";
@@ -157,7 +158,30 @@ const ContentPieceList: Component<{
   });
 
   return (
-    <div class="flex flex-col">
+    <div
+      class="flex flex-col"
+      onDragStart={(event) => {
+        const element = document.createElement("div");
+
+        setExpanded(false);
+        element.setAttribute(
+          "class",
+          "fixed left-[9999px] top-[9999px] flex justify-center items-center bg-gray-100 dark:bg-gray-800 h-9 px-2 py-1 rounded-lg"
+        );
+        element.insertAdjacentHTML(
+          "afterbegin",
+          `<svg viewBox="0 0 24 24" clip-rule="evenodd" fill-rule="evenodd" class="fill-current h-6 w-6"><path d="${mdiFolder}"/></svg><span class="pl-1 whitespace-nowrap">${props.ancestor.name}</span>`
+        );
+        document.body.appendChild(element);
+
+        const rect = element.getBoundingClientRect();
+
+        event.dataTransfer?.setDragImage(element, rect.width / 2, rect.height / 2);
+        setTimeout(() => {
+          document.body.removeChild(element);
+        });
+      }}
+    >
       <div class="flex flex-col overflow-hidden" style={{ "min-width": `${tableWidth()}px` }}>
         <div class="border-b-2 border-r-2 text-left font-500 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 w-full h-12 relative">
           <div class="h-12 flex justify-start items-center gap-3 group px-2 border-b-2 border-transparent">
@@ -222,11 +246,11 @@ const ContentPieceList: Component<{
           wrapper="div"
           wrapperProps={{
             class:
-              "flex flex-col items-start overflow-hidden transform transition-all duration-300 ease-in-out",
+              "flex flex-col items-start overflow-hidden transition-all transform duration-300 ease-in-out",
             style: {
               "max-height":
                 expanded() && !activeDraggablePiece()
-                  ? `${filteredContentPieces().length * 38}px`
+                  ? `${filteredContentPieces().length * 34}px`
                   : activeDraggablePiece()
                     ? "unset"
                     : "0px"

diff --git a/apps/web/src/views/dashboard/views/list/content-piece-row.tsx b/apps/web/src/views/dashboard/views/list/content-piece-row.tsx
@@ -3,24 +3,33 @@ import { Component, For, Show } from "solid-js";
 import clsx from "clsx";
 import { Dynamic } from "solid-js/web";
 import { mdiFileDocumentOutline } from "@mdi/js";
-import { App } from "#context";
+import { App, useLocalStorage } from "#context";
 
 interface ContentPieceRowProps {
   contentPiece: App.ContentPieceWithAdditionalData;
 }
 
 const ContentPieceRow: Component<ContentPieceRowProps> = (props) => {
   const { columns } = useDashboardListViewData();
+  const { setStorage } = useLocalStorage();
 
   return (
     <div
-      class="flex justify-center items-center border-b-2 text-left font-500 border-gray-200 dark:border-gray-700 relative w-full hover:bg-gray-200 hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40"
+      class="flex justify-center items-center border-b-2 text-left font-500 border-gray-200 dark:border-gray-700 relative w-full hover:cursor-pointer hover:bg-gray-200 hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 group"
+      onClick={() => {
+        setStorage((storage) => ({
+          ...storage,
+          sidePanelView: "contentPiece",
+          sidePanelWidth: storage.sidePanelWidth || 375,
+          contentPieceId: props.contentPiece.id
+        }));
+      }}
       onDragStart={(event) => {
         const element = document.createElement("div");
 
         element.setAttribute(
           "class",
-          "fixed left-[9999px] top-[9999px] flex justify-center items-center bg-gray-100 dark:bg-gray-800 h-9 px-2 py-1"
+          "fixed left-[9999px] top-[9999px] flex justify-center items-center bg-gray-100 dark:bg-gray-800 h-9 px-2 py-1 rounded-lg"
         );
         element.insertAdjacentHTML(
           "afterbegin",
@@ -34,15 +43,16 @@ const ContentPieceRow: Component<ContentPieceRowProps> = (props) => {
         setTimeout(() => {
           document.body.removeChild(element);
         });
+        event.stopPropagation();
       }}
     >
       <For each={columns}>
         {(column) => {
           return (
             <div
               class={clsx(
-                "border-r-2 border-gray-200 dark:border-gray-700 h-9",
-                !column && "flex-1"
+                "border-r-2 border-gray-200 dark:border-gray-700 h-8",
+                !column && "flex-1 min-w-[4rem]"
               )}
               style={{
                 "min-width": column ? `${column.width}px` : undefined,

diff --git a/apps/web/src/views/dashboard/views/list/index.tsx b/apps/web/src/views/dashboard/views/list/index.tsx
@@ -115,7 +115,7 @@ const List: Component<DashboardListViewProps> = (props) => {
           {(contentGroup) => {
             if (!contentGroup) {
               return (
-                <div class="h-12 flex justify-start items-center gap-3 group px-2 border-b-2 border-r-2 border-transparent border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700 hover:cursor-pointer">
+                <div class="h-12 flex justify-start items-center gap-3 group px-2 border-b-2 border-r-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700 hover:cursor-pointer">
                   <IconButton path={mdiPlus} class="m-0" variant="text" />
                   <Heading level={3}>Add content group</Heading>
                 </div>

diff --git a/apps/web/src/views/dashboard/views/list/list-header.tsx b/apps/web/src/views/dashboard/views/list/list-header.tsx
@@ -8,7 +8,7 @@ const DashboardListViewHeader: Component = () => {
   const { columns, setColumns } = useDashboardListViewData();
   const [resizedHeader, setResizedHeader] = createSignal("");
   const [dropdownOpened, setDropdownOpened] = createSignal("");
-  const onPointerMove = (event: PointerEvent): void => {
+  const drag = (event: PointerEvent): void => {
     const headerId = resizedHeader();
 
     if (headerId) {
@@ -26,28 +26,30 @@ const DashboardListViewHeader: Component = () => {
       event.preventDefault();
     }
   };
-  const onPointerUp = (): void => {
+  const release = (event: PointerEvent): void => {
     setResizedHeader("");
   };
 
   onMount(() => {
-    document.body.addEventListener("pointermove", onPointerMove);
-    document.body.addEventListener("pointerup", onPointerUp);
+    document.body.addEventListener("pointermove", drag);
+    document.body.addEventListener("pointerup", release);
+    document.body.addEventListener("pointerleave", release);
   });
   onCleanup(() => {
-    document.body.removeEventListener("pointermove", onPointerMove);
-    document.body.removeEventListener("pointerup", onPointerUp);
+    document.body.removeEventListener("pointermove", drag);
+    document.body.removeEventListener("pointerup", release);
+    document.body.removeEventListener("pointerleave", release);
   });
 
   return (
-    <div class="flex bg-gray-50 dark:bg-gray-900 sticky top-0 z-1 overflow-x-hidden">
+    <div class="flex bg-gray-50 dark:bg-gray-900 sticky top-0 z-1 border-b-2 border-gray-200 dark:border-gray-700">
       <For each={columns}>
         {(column, index) => {
           return (
             <div
               class={clsx(
-                "h-9 p-0.5 flex justify-center items-center border-r-2 first:border-l-0 border-b-2 text-left font-500 border-gray-200 dark:border-gray-700 relative bg-gray-200 border-gray-200 bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-30 dark:border-gray-700",
-                !column && "flex-1"
+                "h-8 flex justify-center items-center border-r-2 first:border-l-0 text-left font-500 border-gray-200 dark:border-gray-700 relative bg-gray-200 border-gray-200 bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-30 dark:border-gray-700",
+                !column && "flex-1 min-w-[4rem]"
               )}
               ref={(element) => {
                 if (column) setColumns(index(), "headerRef", element);
@@ -60,28 +62,26 @@ const DashboardListViewHeader: Component = () => {
               <Show
                 when={column}
                 fallback={
-                  <div class="flex justify-start items-center w-full">
+                  <div class="flex justify-start items-center w-full pl-0.5">
                     <Dropdown
-                      placement="bottom-end"
-                      opened={dropdownOpened() === column?.id}
+                      placement="bottom-start"
+                      opened={dropdownOpened() === "add-column"}
                       fixed
-                      class="m-0 mr-1.5"
+                      class="m-0"
                       setOpened={(opened) => {
-                        setDropdownOpened(opened ? column?.id || "" : "");
+                        setDropdownOpened(opened ? "add-column" : "");
                       }}
                       activatorButton={() => (
-                        <Tooltip text="Add column" fixed class="ml-1" side="right">
-                          <IconButton
-                            path={mdiPlus}
-                            class="m-0"
-                            variant="text"
-                            text="soft"
-                            onClick={(event) => {
-                              event.stopPropagation();
-                              setDropdownOpened(column?.id || "");
-                            }}
-                          />
-                        </Tooltip>
+                        <IconButton
+                          path={mdiPlus}
+                          class="m-0 p-0.5"
+                          variant="text"
+                          text="soft"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            setDropdownOpened("add-column");
+                          }}
+                        />
                       )}
                     >
                       <div class="w-full flex flex-col">
@@ -104,14 +104,14 @@ const DashboardListViewHeader: Component = () => {
                   placement="bottom-end"
                   opened={dropdownOpened() === column?.id}
                   fixed
-                  class="m-0"
+                  class="m-0 mr-0.5"
                   setOpened={(opened) => {
                     setDropdownOpened(opened ? column?.id || "" : "");
                   }}
                   activatorButton={() => (
                     <IconButton
                       path={mdiDotsVertical}
-                      class="m-0"
+                      class="m-0 p-0.5"
                       variant="text"
                       text="soft"
                       onClick={(event) => {

diff --git a/apps/web/src/views/dashboard/views/list/list-view-context.tsx b/apps/web/src/views/dashboard/views/list/list-view-context.tsx
@@ -15,7 +15,7 @@ import {
 import { SetStoreFunction, createStore } from "solid-js/store";
 import { Button, Icon, IconButton, Heading } from "#components/primitives";
 import { tagColorClasses } from "#lib/utils";
-import { useLocalStorage, App } from "#context";
+import { useLocalStorage, App, useAuthenticatedUserData } from "#context";
 
 interface DashboardListViewColumn {
   header: string;
@@ -37,6 +37,7 @@ type DashboardListViewContextType = {
 
 const DashboardListViewContext = createContext<DashboardListViewContextType>();
 const DashboardListViewDataProvider: ParentComponent = (props) => {
+  const {workspaceSettings} = useAuthenticatedUserData();
   const [columns, setColumns] = createStore<Array<DashboardListViewColumn | null>>([
     {
       header: "Title",
@@ -47,17 +48,7 @@ const DashboardListViewDataProvider: ParentComponent = (props) => {
         const { setStorage } = useLocalStorage();
 
         return (
-          <button
-            class="px-2 text-start min-h-9 flex justify-start items-center group hover:cursor-pointer w-full"
-            onClick={() => {
-              setStorage((storage) => ({
-                ...storage,
-                sidePanelView: "contentPiece",
-                sidePanelWidth: storage.sidePanelWidth || 375,
-                contentPieceId: props.contentPiece.id
-              }));
-            }}
-          >
+          <button class="px-2 text-start min-h-8 flex justify-start items-center w-full">
             <div class="mr-1 h-6 w-6 flex justify-center items-center">
               <Icon
                 path={mdiFileDocumentOutline}
@@ -194,7 +185,7 @@ const DashboardListViewDataProvider: ParentComponent = (props) => {
   ]);
   const tableWidth = createMemo(() => {
     return columns.reduce((total, column) => {
-      return total + (column?.width || 0);
+      return total + (column?.width || 66);
     }, 0);
   });