@wix/patterns 1.459.0 → 1.461.0

package/dist/docs/NestedTable/flat-mode-search.tsx

@@ -0,0 +1,92 @@
+import { Page } from '@wix/design-system';
+import React from 'react';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import {
+  PageWrapper,
+  NestedTable,
+  useNestedTable,
+  createNestedTableSingleEntityLevels,
+  useCreateCollection,
+  Filter,
+  stringsArrayFilter,
+} from '@wix/patterns';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+type ContactFilters = {
+  parentId: Filter<string[]>;
+};
+
+function SingleEntityNestedTable() {
+  const httpClient = useHttpClient();
+
+  const createCollection = useCreateCollection();
+
+  const state = useNestedTable({
+    columns: [
+      {
+        id: 'lastSeen',
+        title: 'Last Seen',
+      },
+    ],
+    levels: createNestedTableSingleEntityLevels(5, {
+      createCollection: () => {
+        const collection = createCollection<Contact, ContactFilters>({
+          queryName: 'SingleEntityNestedTableFlatMode',
+          filters: {
+            parentId: stringsArrayFilter(),
+          },
+          fetchData: (query) => {
+            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),
+        });
+
+        return {
+          collection,
+          parentFilter: collection.filters.parentId,
+        };
+      },
+      parentKey: (item) => item.parentId,
+      breadcrumbs: (item) => item.breadcrumbs,
+      columns: {
+        lastSeen: (item) => String(item.lastSeen),
+      },
+      renderMainColumn: (item) => ({
+        subtitle: item.level,
+      }),
+    }),
+  });
+
+  React.useState(() => {
+    state.query.search.setValue('que');
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header title="Contacts" />
+
+        <Page.Content>
+          <NestedTable state={state} />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}

package/dist/docs/NestedTable/node-api-usage.tsx

@@ -0,0 +1,188 @@
+import { Page, ToggleSwitch } from '@wix/design-system';
+import React from 'react';
+import {
+  queryContacts,
+  bulkUpdateContacts,
+  updateContact,
+  deleteContact,
+} from '@wix/ambassador-contacts-v4-contact/http';
+import {
+  Contact,
+  SubscriptionStatus,
+} from '@wix/ambassador-contacts-v4-contact/types';
+import {
+  PageWrapper,
+  NestedTable,
+  useNestedTable,
+  createNestedTableSingleEntityLevels,
+  useCreateCollection,
+  Filter,
+  stringsArrayFilter,
+} from '@wix/patterns';
+import { CollectionPage } from '@wix/patterns/page';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+import { Delete } from '@wix/wix-ui-icons-common';
+
+type ContactFilters = {
+  parentId: Filter<string[]>;
+};
+
+type ContactColumns = 'subscriptionStatus' | 'email';
+
+function AccessNodeDescendants() {
+  const httpClient = useHttpClient();
+
+  const createCollection = useCreateCollection();
+
+  const state = useNestedTable<ContactColumns>({
+    columns: [
+      {
+        id: 'subscriptionStatus',
+        title: 'Subscription Status',
+        align: 'center',
+      },
+      {
+        id: 'email',
+        title: 'Email',
+      },
+    ],
+    levels: createNestedTableSingleEntityLevels<
+      ContactColumns,
+      Contact,
+      ContactFilters
+    >(5, {
+      createCollection: (params) => {
+        const collection = createCollection<Contact, ContactFilters>({
+          queryName: 'AccessNodeDescendants',
+          filters: {
+            parentId: stringsArrayFilter(),
+          },
+          fetchData: (query) => {
+            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),
+        });
+
+        return {
+          collection,
+          parentFilter: collection.filters.parentId,
+        };
+      },
+      parentKey: (item) => item.parentId,
+      actionCell: (item, _rowNum, api) => ({
+        secondaryActions: [
+          {
+            icon: <Delete />,
+            text: 'Delete',
+            onClick: () => {
+              const node = state.getNode<Contact, ContactFilters>(
+                item.id as string,
+              );
+              node
+                ?.getParent<Contact, ContactFilters>()
+                ?.optimisticActions?.deleteOne(item, {
+                  submit: (contacts) =>
+                    Promise.all(
+                      contacts.map((contact) =>
+                        deleteContact({
+                          contactId: contact.id as string,
+                        }),
+                      ),
+                    ),
+                });
+            },
+          },
+        ],
+      }),
+      columns: {
+        email: (item) => item.primaryEmail?.email as string,
+        subscriptionStatus: (item) => (
+          <div
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <ToggleSwitch
+              onChange={(e) => {
+                const node = state.getNode<Contact, ContactFilters>(
+                  item.id as string,
+                );
+
+                const primaryEmail = {
+                  subscriptionStatus: e.target.checked
+                    ? ('SUBSCRIBED' as SubscriptionStatus)
+                    : ('UNSUBSCRIBED' as SubscriptionStatus),
+                };
+
+                node?.getParent()?.optimisticActions?.updateOne(
+                  item,
+                  {
+                    propagate: true,
+                    patch: {
+                      primaryEmail,
+                    },
+                    keepPosition: true,
+                    submit: async () => {
+                      await httpClient.request(
+                        updateContact({
+                          ...item,
+                          contactId: item.id as string,
+                          revision: item.revision ? item.revision + 1 : 1,
+                          info: {
+                            ...item.info,
+                            primaryEmail,
+                          } as {},
+                        }),
+                      );
+                      await httpClient.request(
+                        bulkUpdateContacts({
+                          filter: {
+                            ancestorId: [item.id],
+                          },
+                          info: {
+                            primaryEmail,
+                          } as {},
+                        }),
+                      );
+                    },
+                  },
+                );
+              }}
+              checked={item.primaryEmail?.subscriptionStatus === 'SUBSCRIBED'}
+            />
+          </div>
+        ),
+      },
+
+      renderMainColumn: (item) => ({
+        subtitle: item.level,
+      }),
+    }),
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+
+      <CollectionPage.Content>
+        <NestedTable state={state} />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/NestedTable/single-entity.tsx

@@ -0,0 +1,85 @@
+import { Page } from '@wix/design-system';
+import React from 'react';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import {
+  PageWrapper,
+  NestedTable,
+  useNestedTable,
+  createNestedTableSingleEntityLevels,
+  useCreateCollection,
+  Filter,
+  stringsArrayFilter,
+} from '@wix/patterns';
+import { CollectionPage } from '@wix/patterns/page';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+type ContactFilters = {
+  parentId: Filter<string[]>;
+};
+
+function SingleEntityNestedTable() {
+  const httpClient = useHttpClient();
+
+  const createCollection = useCreateCollection();
+
+  const state = useNestedTable({
+    columns: [
+      {
+        id: 'lastSeen',
+        title: 'Last Seen',
+      },
+    ],
+    levels: createNestedTableSingleEntityLevels(5, {
+      createCollection: () => {
+        const collection = createCollection<Contact, ContactFilters>({
+          queryName: 'SingleEntityNestedTable-contacts',
+          filters: {
+            parentId: stringsArrayFilter(),
+          },
+          fetchData: (query) => {
+            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),
+        });
+
+        return {
+          collection,
+          parentFilter: collection.filters.parentId,
+        };
+      },
+      parentKey: (item) => item.parentId,
+      columns: {
+        lastSeen: (item) => String(item.lastSeen),
+      },
+      renderMainColumn: (item) => ({
+        subtitle: item.level,
+      }),
+    }),
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <NestedTable state={state} />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/NestedTable/various-entities.tsx

@@ -0,0 +1,138 @@
+import { Page } from '@wix/design-system';
+import React from 'react';
+import {
+  queryContacts,
+  deleteContact,
+} from '@wix/ambassador-contacts-v4-contact/http';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import {
+  PageWrapper,
+  NestedTable,
+  useNestedTable,
+  createNestedTableLevel,
+  useCreateCollection,
+  Filter,
+  stringsArrayFilter,
+} from '@wix/patterns';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+import { Delete } from '@wix/wix-ui-icons-common';
+import { CollectionPage } from '@wix/patterns/page';
+
+type ContactFilters = {
+  level: Filter<string[]>;
+};
+
+function VariousEntitiesNestedTable() {
+  const httpClient = useHttpClient.call(300);
+
+  const createCollection = useCreateCollection();
+
+  const state = useNestedTable({
+    columns: [
+      {
+        id: 'lastSeen',
+        title: 'Last Seen',
+      },
+    ],
+    levels: [
+      createNestedTableLevel({
+        createCollection: () => {
+          const collection = createCollection<{ id: string; name: string }, {}>(
+            {
+              queryName: 'VariousEntitiesNestedTable-levels',
+              fetchData: (query) =>
+                Promise.resolve({
+                  items: [
+                    { id: 'Beginner', name: 'Beginner' },
+                    { id: 'Amateur', name: 'Amateur' },
+                    { id: 'Semi-Pro', name: 'Semi-Pro' },
+                    { id: 'Professional', name: 'Professional' },
+                    { id: 'World Class', name: 'World Class' },
+                    { id: 'Legendary', name: 'Legendary' },
+                    { id: 'Ultimate', name: 'Ultimate' },
+                  ],
+                }),
+              fetchErrorMessage: ({ err }) => String(err),
+            },
+          );
+
+          return {
+            collection,
+          };
+        },
+        parentKey: () => undefined,
+      }),
+      createNestedTableLevel({
+        createCollection: (params) => {
+          const collection = createCollection<Contact, ContactFilters>({
+            queryName: 'VariousEntitiesNestedTable-contacts',
+            filters: {
+              level: stringsArrayFilter(),
+            },
+            fetchData: (query) => {
+              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),
+          });
+
+          return {
+            collection,
+            parentFilter: collection.filters.level,
+          };
+        },
+        parentKey: (item) => item.level,
+        columns: {
+          lastSeen: (item) => String(item.lastSeen),
+        },
+        actionCell: (item, _rowNum, api) => ({
+          secondaryActions: [
+            {
+              icon: <Delete />,
+              text: 'Delete',
+              onClick: () => {
+                api.collection._optimisticActions?.deleteOne(item, {
+                  submit: (contacts) =>
+                    Promise.all(
+                      contacts.map((contact) =>
+                        deleteContact({
+                          contactId: contact.id as string,
+                        }),
+                      ),
+                    ),
+                });
+              },
+            },
+          ],
+        }),
+        renderMainColumn: (item) => ({
+          subtitle: item.level,
+        }),
+      }),
+    ],
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <NestedTable state={state} />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}