@wix/patterns 1.459.0 → 1.461.0

package/dist/docs/CollectionOptimisticActions/update-many.tsx

@@ -0,0 +1,119 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  BulkActionButton,
+  BulkActionToolbar,
+  Table,
+  OffsetQuery,
+  useTableCollection,
+  useOptimisticActions,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function UpdateMany() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-UpdateMany',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+  });
+
+  const collection = state.collection;
+
+  const optimisticActions = useOptimisticActions(collection);
+
+  const _updateContacts = (contactsToUpdate: contacts.Contact[]) => {
+    const updatedContacts = contactsToUpdate.map((c) => ({
+      ...c,
+      info: {
+        ...c.info,
+        jobTitle: 'Ultimate',
+      },
+    }));
+
+    optimisticActions.updateMany(updatedContacts, {
+      successToast: `${contactsToUpdate.length} contacts updated`,
+      submit: async (_contacts) => {
+        const response = (await Promise.all(
+          _contacts.map((contact) =>
+            contacts.updateContact(
+              contact._id as string,
+              contact.info as contacts.ContactInfo,
+              contact.revision as number,
+            ),
+          ),
+        )) as contacts.UpdateContactResponse[];
+
+        return response.map(({ contact }) => contact as contacts.Contact);
+      },
+    });
+  };
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          state={collection}
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+            {
+              title: 'Level',
+              render: (contact) => contact.info?.jobTitle,
+            },
+            {
+              title: 'Last Activity',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+            },
+          ]}
+          showSelection
+          maxSelection={2}
+          bulkActionToolbar={({ selectedValues, clearSelection, total }) => (
+            <BulkActionToolbar
+              actionButton={
+                <BulkActionButton
+                  onClick={() => {
+                    _updateContacts(selectedValues);
+                    clearSelection();
+                  }}
+                >
+                  Update to Ultimate
+                </BulkActionButton>
+              }
+            />
+          )}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/CollectionOptimisticActions/update-one.tsx

@@ -0,0 +1,108 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  Table,
+  OffsetQuery,
+  useTableCollection,
+  useOptimisticActions,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function UpdateOne() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-UpdateOne',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+  });
+
+  const collection = state.collection;
+
+  const optimisticActions = useOptimisticActions(collection);
+
+  const _updateContact = (contact: contacts.Contact) => {
+    const updatedContact = {
+      ...contact,
+      info: {
+        ...contact.info,
+        jobTitle: 'Ultimate',
+      },
+    };
+
+    optimisticActions.updateOne(updatedContact, {
+      submit: async (_contacts) => {
+        const response = (await Promise.all(
+          _contacts.map((contact) =>
+            contacts.updateContact(
+              contact._id as string,
+              contact.info as contacts.ContactInfo,
+              contact.revision as number,
+            ),
+          ),
+        )) as contacts.UpdateContactResponse[];
+
+        return response.map(({ contact }) => contact as contacts.Contact);
+      },
+    });
+  };
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          state={collection}
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+            {
+              title: 'Level',
+              render: (contact) => contact.info?.jobTitle,
+            },
+            {
+              title: 'Last Activity',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+            },
+          ]}
+          actionCell={(contact) => ({
+            primaryAction: {
+              text: 'Update to Ultimate',
+              onClick: () => {
+                _updateContact(contact);
+              },
+            },
+          })}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}