@wix/patterns 1.459.0 → 1.461.0

package/dist/docs/TableDragAndDrop.md

@@ -29,215 +29,13 @@ import { TableDragAndDrop } from '@wix/patterns';
 
 Drag and drop items in a table.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Table,
-  useTableCollection,
-  CursorQuery,
-  TableDragAndDrop,
-  useOptimisticActions,
-} from '@wix/patterns';
-import { tasks } from '@wix/crm';
-
-function TableExample() {
-  const { queryTasks, moveTaskAfter, countTasks } = tasks;
-
-  const state = useTableCollection<tasks.Task>({
-    queryName: 'tasks-Table',
-    paginationMode: 'cursor',
-    fetchData: async (query: CursorQuery) => {
-      const { limit, cursor } = query;
-
-      let queryBuilder = queryTasks().limit(limit);
-
-      if (cursor) {
-        queryBuilder = queryBuilder.skipTo(cursor);
-      }
-
-      return queryBuilder.find().then((res) => {
-        const { items = [], cursors } = res;
-        return {
-          items,
-          cursor: cursors.next,
-        };
-      });
-    },
-    fetchTotal: async (_query: CursorQuery) => {
-      const filter = {};
-      return countTasks({ filter }).then((res) => res.count as number);
-    },
-    itemKey: (item) => item._id as string,
-    itemName: (item) => item.title as string,
-    fetchErrorMessage: () => 'Error fetching tasks',
-  });
-
-  const collection = state.collection;
-  useOptimisticActions(collection);
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Tasks' }} />
-      <CollectionPage.Content>
-        <Table
-          dragAndDrop={TableDragAndDrop}
-          dragAndDropSubmit={(event) =>
-            moveTaskAfter(event.from.item._id as string, {
-              beforeTaskId: event.after
-                ? (event.after.item._id as string)
-                : null,
-            })
-          }
-          search={false}
-          state={state}
-          columns={[
-            {
-              title: '',
-              width: '32px',
-              render: (task) => <Avatar size="size24" name={task.title!} />,
-            },
-            {
-              title: 'Title',
-              width: '250px',
-              render: (task) => task.title,
-            },
-            {
-              title: 'Due Date',
-              render: (task) => task.dueDate?.toLocaleString(),
-            },
-          ]}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/TableDragAndDrop/table.tsx`
 
 ### Specific tabs
 
 Drag and drop items in all tabs except the first tab (All Levels). To do this, leave out the first array (represented by an empty array) in the `dragAndDropCategories` prop.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Filter,
-  Table,
-  TabsFilter,
-  useTableCollection,
-  TableDragAndDrop,
-  useOptimisticActions,
-  CursorQuery,
-} from '@wix/patterns';
-import { useTranslation } from '@wix/yoshi-flow-bm';
-import { idNameArrayFilter } from '@wix/bex-core';
-import { tasks } from '@wix/crm';
-
-type TasksFilters = {
-  status: Filter<{ id: string; name: string }[]>;
-};
-
-function Tabs() {
-  const { queryTasks, moveTaskAfter, countTasks } = tasks;
-  const { t } = useTranslation();
-
-  const state = useTableCollection<tasks.Task, TasksFilters>({
-    queryName: 'tasks-Table',
-    paginationMode: 'cursor',
-    fetchData: async (query: CursorQuery<TasksFilters>) => {
-      const { limit, cursor, filters } = query;
-
-      let queryBuilder = queryTasks().limit(limit);
-
-      if (cursor) {
-        queryBuilder = queryBuilder.skipTo(cursor);
-      }
-
-      if (filters.status) {
-        queryBuilder = queryBuilder.in(
-          'status',
-          filters.status.map(({ id }) => id),
-        );
-      }
-
-      return queryBuilder.find().then((res) => {
-        const { items = [], cursors } = res;
-        return {
-          items,
-          cursor: cursors.next,
-        };
-      });
-    },
-    fetchTotal: async ({ filters }: CursorQuery<TasksFilters>) => {
-      const filter: tasks.CountTasksOptions['filter'] = {};
-      if (filters.status) {
-        filter.status = filters.status.map(({ id }) => id);
-      }
-      return countTasks({ filter }).then((res) => res.count as number);
-    },
-    itemKey: (item) => item._id as string,
-    itemName: (item) => item.title as string,
-    fetchErrorMessage: () => 'Error fetching tasks',
-    filters: {
-      status: idNameArrayFilter(),
-    },
-  });
-
-  const collection = state.collection;
-  useOptimisticActions(collection);
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Tasks' }} />
-      <CollectionPage.Content>
-        <Table
-          state={state}
-          search={false}
-          dragAndDrop={TableDragAndDrop}
-          dragAndDropSubmit={(event) =>
-            moveTaskAfter(event.from.item._id as string, {
-              beforeTaskId: event.after
-                ? (event.after.item._id as string)
-                : null,
-            })
-          }
-          dragAndDropCategories={[['status']]}
-          tabs={
-            <TabsFilter
-              filter={collection.filters.status}
-              data={[
-                { id: 'ACTION_NEEDED', name: t('Action Needed') },
-                { id: 'COMPLETED', name: t('Completed') },
-                { id: 'UNKNOWN_STATUS', name: t('Unknown Status') },
-              ]}
-              all="All Statuses"
-            />
-          }
-          columns={[
-            {
-              title: '',
-              width: '50px',
-              render: (task) => <Avatar name={task.title!} />,
-            },
-            {
-              title: 'Title',
-              width: '250px',
-              render: (task) => task.title,
-            },
-            {
-              title: 'Due Date',
-              render: (task) => task.dueDate?.toLocaleString(),
-            },
-          ]}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/TableDragAndDrop/specific-tabs.tsx`
 
 ### Specific filters
 
@@ -245,235 +43,13 @@ When filters are applied, Drag&Drop isn't supported.
  Saying that, in some use cases (e.g Bookings Services Categories), we want to support Drag&Drop inside a categorty.
  You can define table filters that represent a category and support Drag&Drop.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Table,
-  useTableCollection,
-  TableDragAndDrop,
-  CollectionToolbarFilters,
-  MultiSelectCheckboxFilter,
-  useOptimisticActions,
-  idNameArrayFilter,
-  useStaticListFilterCollection,
-  Filter,
-  CursorQuery,
-} from '@wix/patterns';
-import { tasks } from '@wix/crm';
-
-type TasksFilters = {
-  status: Filter<{ id: string; name: string }[]>;
-};
-
-function CategoryFilters() {
-  const { queryTasks, moveTaskAfter, countTasks } = tasks;
-
-  const state = useTableCollection<tasks.Task, TasksFilters>({
-    queryName: 'tasks-CategoryFilters',
-    paginationMode: 'cursor',
-    fetchData: async (query: CursorQuery<TasksFilters>) => {
-      const { limit, cursor, filters } = query;
-
-      let queryBuilder = queryTasks().limit(limit);
-
-      if (cursor) {
-        queryBuilder = queryBuilder.skipTo(cursor);
-      }
-
-      if (filters.status) {
-        queryBuilder = queryBuilder.in(
-          'status',
-          filters.status.map(({ id }) => id),
-        );
-      }
-
-      return queryBuilder.find().then((res) => {
-        const { items = [], cursors } = res;
-        return {
-          items,
-          cursor: cursors.next,
-        };
-      });
-    },
-    fetchTotal: async ({ filters }: CursorQuery<TasksFilters>) => {
-      const filter: tasks.CountTasksOptions['filter'] = {};
-      if (filters.status) {
-        filter.status = filters.status.map(({ id }) => id);
-      }
-      return countTasks({ filter }).then((res) => res.count as number);
-    },
-    itemKey: (item) => item._id as string,
-    itemName: (item) => item.title as string,
-    fetchErrorMessage: () => 'Error fetching tasks',
-    filters: {
-      status: idNameArrayFilter(),
-    },
-  });
-  const collection = state.collection;
-
-  const statusCollection = useStaticListFilterCollection(
-    collection.filters.status,
-    [
-      {
-        id: 'ACTION_NEEDED',
-        name: 'Action Needed',
-      },
-      {
-        id: 'COMPLETED',
-        name: 'Completed',
-      },
-      {
-        id: 'UNKNOWN_STATUS',
-        name: 'Unknown Status',
-      },
-    ],
-  );
-
-  useOptimisticActions(collection);
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Tasks' }} />
-      <CollectionPage.Content>
-        <Table
-          dragAndDrop={TableDragAndDrop}
-          dragAndDropSubmit={(event) =>
-            moveTaskAfter(event.from.item._id as string, {
-              beforeTaskId: event.after
-                ? (event.after.item._id as string)
-                : null,
-            })
-          }
-          dragAndDropCategories={[[], ['status']]}
-          search={false}
-          state={state}
-          columns={[
-            {
-              title: '',
-              width: '50px',
-              render: (task) => <Avatar size="size24" name={task.title!} />,
-            },
-            {
-              title: 'Title',
-              width: '250px',
-              render: (task) => task.title,
-            },
-            {
-              title: 'Status',
-              render: (task) => task.status,
-            },
-          ]}
-          filters={
-            <CollectionToolbarFilters useNewFilters>
-              <MultiSelectCheckboxFilter
-                accordionItemProps={{ label: 'Status' }}
-                popoverProps={{ appendTo: 'window' }}
-                filter={collection.filters.status!}
-                collection={statusCollection}
-                renderItem={(status) => ({ title: status.name })}
-              />
-            </CollectionToolbarFilters>
-          }
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/TableDragAndDrop/specific-filters.tsx`
 
 ### Save order mode
 
 Pass the `dragAndDropReorderModeToolbar` prop to the `dragAndDropReorderModeToolbar` component to enable **Save Order** mode. This mode gives you the option to save the order your items after dragging and dropping. The order of the items is only updated when the **Save Order** button is clicked.
 
-```tsx
-import { Avatar } from '@wix/design-system';
-import React from 'react';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Table,
-  useTableCollection,
-  TableDragAndDrop,
-  useOptimisticActions,
-  ReorderModeToolbar,
-  CursorQuery,
-} from '@wix/patterns';
-import { tasks } from '@wix/crm';
-
-function ReorderMode() {
-  const { queryTasks, moveTaskAfter, countTasks } = tasks;
-
-  const state = useTableCollection<tasks.Task, {}>({
-    queryName: 'tasks-ReorderMode',
-    fetchData: async (query: CursorQuery) => {
-      const { limit, cursor, filters } = query;
-
-      let queryBuilder = queryTasks().limit(limit);
-
-      if (cursor) {
-        queryBuilder = queryBuilder.skipTo(cursor);
-      }
-
-      return queryBuilder.find().then((res) => {
-        const { items = [], cursors } = res;
-        return {
-          items,
-          cursor: cursors.next,
-        };
-      });
-    },
-    fetchTotal: async (_query: CursorQuery) => {
-      const filter = {};
-      return countTasks({ filter }).then((res) => res.count as number);
-    },
-    itemKey: (item) => item._id as string,
-    itemName: (item) => item.title as string,
-    fetchErrorMessage: () => 'Error fetching tasks',
-  });
-  const collection = state.collection;
-  useOptimisticActions(collection);
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Tasks' }} />
-      <CollectionPage.Content>
-        <Table
-          dragAndDrop={TableDragAndDrop}
-          dragAndDropReorderModeToolbar={<ReorderModeToolbar />}
-          dragAndDropBulkSubmit={(events, snapshot) =>
-            events.reduce(async (promise, event) => {
-              await moveTaskAfter(event.from.item._id as string, {
-                beforeTaskId: event.after
-                  ? (event.after.item._id as string)
-                  : null,
-              });
-            }, Promise.resolve())
-          }
-          search={false}
-          state={state}
-          columns={[
-            {
-              title: '',
-              width: '32px',
-              render: (task) => <Avatar size="size24" name={task.title!} />,
-            },
-            {
-              title: 'Title',
-              width: '250px',
-              render: (task) => task.title,
-            },
-            {
-              title: 'Status',
-              render: (task) => task.status,
-            },
-          ]}
-        />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-```
+Example code: read `dist/docs/TableDragAndDrop/save-order-mode.tsx`
 
 ## BI
 

package/dist/docs/TableFolders/demo.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import {
+  OffsetQuery,
+  useCollection,
+  TableFolders,
+  PageWrapper,
+  useTableFolders,
+} from '@wix/patterns';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+import { Page } from '@wix/design-system';
+
+function Basic() {
+  const httpClient = useHttpClient();
+
+  const collection = useCollection<Contact>({
+    queryName: 'tableitems',
+    itemKey: (item) => item.id as string,
+    itemName: (item) => item.name as string,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then((res) => {
+          const {
+            data: { contacts = [], pagingMetadata },
+          } = res;
+          return {
+            items: contacts,
+            total: pagingMetadata?.total,
+          };
+        });
+    },
+    fetchErrorMessage: ({ err }) => String(err),
+  });
+
+  const foldersCollection = useCollection<Contact>({
+    queryName: 'tablefolders',
+    paginationMode: 'offset',
+    itemName: (item) => item.name as string,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit: 20, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then((res) => {
+          const {
+            data: { contacts = [], pagingMetadata },
+          } = res;
+          return {
+            items: contacts,
+            total: 20,
+          };
+        });
+    },
+    fetchErrorMessage: ({ err }) => String(err),
+  });
+
+  const componentState = useTableFolders({
+    items: collection,
+    folders: foldersCollection,
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header title="Folders and items" />
+
+        <Page.Content>
+          <TableFolders
+            state={componentState}
+            columns={[
+              {
+                title: 'Name',
+                width: '250px',
+                render: (contact) => contact.name,
+                renderFolder: (folder) => folder.name,
+              },
+              {
+                title: 'Last Seen',
+                width: '250px',
+                render: (contact) => contact.lastSeen?.toLocaleString(),
+                renderFolder: (folder) => folder.lastSeen?.toLocaleString(),
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}

package/dist/docs/TableFolders/table-folders.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import {
+  OffsetQuery,
+  useCollection,
+  TableFolders,
+  PageWrapper,
+  useTableFolders,
+} from '@wix/patterns';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+import { Page } from '@wix/design-system';
+
+function Basic() {
+  const httpClient = useHttpClient();
+
+  const collection = useCollection<Contact>({
+    queryName: 'tableitems',
+    itemKey: (item) => item.id as string,
+    itemName: (item) => item.name as string,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then((res) => {
+          const {
+            data: { contacts = [], pagingMetadata },
+          } = res;
+          return {
+            items: contacts,
+            total: pagingMetadata?.total,
+          };
+        });
+    },
+    fetchErrorMessage: ({ err }) => String(err),
+  });
+
+  const foldersCollection = useCollection<Contact>({
+    queryName: 'tablefolders',
+    paginationMode: 'offset',
+    itemName: (item) => item.name as string,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit: 20, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then((res) => {
+          const {
+            data: { contacts = [], pagingMetadata },
+          } = res;
+          return {
+            items: contacts,
+            total: 20,
+          };
+        });
+    },
+    fetchErrorMessage: ({ err }) => String(err),
+  });
+
+  const componentState = useTableFolders({
+    items: collection,
+    folders: foldersCollection,
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header title="Folders and items" />
+
+        <Page.Content>
+          <TableFolders
+            state={componentState}
+            columns={[
+              {
+                title: 'Name',
+                width: '250px',
+                render: (contact) => contact.name,
+                renderFolder: (folder) => folder.name,
+              },
+              {
+                title: 'Last Seen',
+                width: '250px',
+                render: (contact) => contact.lastSeen?.toLocaleString(),
+                renderFolder: (folder) => folder.lastSeen?.toLocaleString(),
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}