@wix/patterns 1.459.0 → 1.460.0

package/dist/docs/Views/basic-view.tsx

@@ -0,0 +1,134 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  Table,
+  Views,
+  CollectionToolbarFilters,
+  MultiInlineCheckboxFilter,
+  useTableCollection,
+  OffsetQuery,
+  stringsArrayFilter,
+  Filter,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+};
+
+function ViewsExample() {
+
+  const state = useTableCollection<contacts.Contact, ContactsFilters>({
+    queryName: 'contacts-Views',
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      if (filters.level) {
+        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {
+      level: stringsArrayFilter(),
+    },
+  });
+
+  const collection = state.collection;
+
+  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 }}
+                />
+              ),
+            },
+            {
+              id: 'info.name.first',
+              title: 'Name',
+              width: '250px',
+              sortable: true,
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+            {
+              title: 'Level',
+              render: (contact) => contact.info?.jobTitle,
+            },
+            {
+              id: 'lastActivity',
+              title: 'Last Activity',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+              defaultHidden: true,
+            },
+          ]}
+          filters={
+            <CollectionToolbarFilters
+              inline={0}
+              panelTitle="Filter you contacts"
+              useNewFilters
+            >
+              <MultiInlineCheckboxFilter
+                filter={collection.filters.level}
+                accordionItemProps={{ label: 'Level' }}
+                data={[
+                  'Beginner',
+                  'Amateur',
+                  'Semi-Pro',
+                  'Professional',
+                  'World Class',
+                  'Legendary',
+                  'Ultimate',
+                ]}
+                renderItem={(level, idx) => ({ id: `${idx}`, name: level })}
+              />
+            </CollectionToolbarFilters>
+          }
+          views={
+            <Views
+              allItemsViewProps={{ hidden: true }}
+              presets={[
+                {
+                  id: 'views-example-preset',
+                  name: 'Advanced',
+                  isDefaultView: true,
+                  sortDirections: [
+                    { columnId: 'name', direction: 'Descending' },
+                  ],
+                  filters: {
+                    level: {
+                      value: ['World Class', 'Legendary', 'Ultimate'],
+                    },
+                  },
+                },
+              ]}
+            />
+          }
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/Views/view-with-selected-columns.tsx

@@ -0,0 +1,142 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  Table,
+  Views,
+  CollectionToolbarFilters,
+  MultiInlineCheckboxFilter,
+  CustomColumns,
+  Filter,
+  OffsetQuery,
+  stringsArrayFilter,
+  useTableCollection,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+};
+
+function ViewsCustomColumnsExample() {
+
+  const state = useTableCollection<contacts.Contact, ContactsFilters>({
+    queryName: 'contacts-ViewsCustomColumns',
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      if (filters.level) {
+        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {
+      level: stringsArrayFilter(),
+    },
+  });
+
+  const collection = state.collection;
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          state={collection}
+          columns={[
+            {
+              id: 'avatar',
+              name: 'Avatar',
+              title: '',
+              width: '50px',
+              hideable: false,
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              id: 'name',
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+            {
+              id: 'level',
+              title: 'Level',
+              render: (contact) => contact.info?.jobTitle,
+            },
+            {
+              id: 'lastActivity',
+              title: 'Last Activity',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+              defaultHidden: true,
+            },
+          ]}
+          customColumns={<CustomColumns />}
+          filters={
+            <CollectionToolbarFilters
+              inline={0}
+              panelTitle="Filter you contacts"
+              useNewFilters
+            >
+              <MultiInlineCheckboxFilter
+                filter={collection.filters.level}
+                accordionItemProps={{ label: 'Level' }}
+                data={[
+                  'Beginner',
+                  'Amateur',
+                  'Semi-Pro',
+                  'Professional',
+                  'World Class',
+                  'Legendary',
+                  'Ultimate',
+                ]}
+                renderItem={(level, idx) => ({ id: `${idx}`, name: level })}
+              />
+            </CollectionToolbarFilters>
+          }
+          views={
+            <Views
+              allItemsViewProps={{ hidden: true }}
+              presets={[
+                {
+                  id: 'views-custom-columns-example-preset',
+                  name: 'Top',
+                  isDefaultView: true,
+                  selectedColumns: [
+                    { id: 'avatar', isSelected: true },
+                    { id: 'level', isSelected: false },
+                    { id: 'name', isSelected: true },
+                    { id: 'lastSeen', isSelected: false },
+                  ],
+                  filters: {
+                    level: {
+                      value: ['World Class', 'Legendary', 'Ultimate'],
+                    },
+                  },
+                },
+              ]}
+            />
+          }
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/Views/views-separated-by-category-in-the-dropdown.tsx

@@ -0,0 +1,209 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  Filter,
+  Table,
+  useTableCollection,
+  OffsetQuery,
+  Views,
+  CollectionToolbarFilters,
+  MultiSelectCheckboxFilter,
+  stringsArrayFilter,
+  useStaticListFilterCollection,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+  locale: Filter<string[]>;
+};
+
+function PredefinedCategories() {
+
+  const state = useTableCollection<contacts.Contact, ContactsFilters>({
+    queryName: 'contacts-ViewsPredefinedCategories',
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
+      const { limit, offset, search, sort, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      if (sort) {
+        for (const sortLevel of sort) {
+          queryBuilder =
+            sortLevel.order === 'asc'
+              ? queryBuilder.ascending(
+                  sortLevel.fieldName as 'info.name.first' | 'info.jobTitle',
+                )
+              : queryBuilder.descending(
+                  sortLevel.fieldName as 'info.name.first' | 'info.jobTitle',
+                );
+        }
+      }
+
+      if (filters.level) {
+        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
+      }
+
+      if (filters.locale) {
+        queryBuilder = queryBuilder.in('info.locale', filters.locale);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {
+      level: stringsArrayFilter(),
+      locale: stringsArrayFilter(),
+    },
+  });
+  const collection = state.collection;
+  const levelsCollection = useStaticListFilterCollection(
+    collection.filters.level,
+    [
+      'Beginner',
+      'Amateur',
+      'Semi-Pro',
+      'Professional',
+      'World Class',
+      'Legendary',
+      'Ultimate',
+    ],
+  );
+
+  const localeCollection = useStaticListFilterCollection(
+    collection.filters.locale,
+    ['en-US', 'he-IL', 'fr-FR', 'es-ES', 'de-DE'],
+  );
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          state={state}
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              id: 'info.name.first',
+              title: 'Name',
+              width: '250px',
+              sortable: true,
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+            {
+              id: 'level',
+              title: 'Level',
+              render: (contact) => contact.info?.jobTitle,
+            },
+            {
+              id: 'lastActivity',
+              title: 'Last Activity',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+            },
+            {
+              id: 'locale',
+              title: 'Locale',
+              render: (contact) => contact.info?.locale,
+            },
+          ]}
+          filters={
+            <CollectionToolbarFilters
+              useNewFilters
+              panelTitle="Filter your contacts"
+            >
+              <MultiSelectCheckboxFilter
+                popoverProps={{ appendTo: 'window' }}
+                accordionItemProps={{ label: 'Level' }}
+                filter={collection.filters.level}
+                collection={levelsCollection}
+                renderItem={(level) => ({ title: level })}
+              />
+
+              <MultiSelectCheckboxFilter
+                popoverProps={{ appendTo: 'window' }}
+                accordionItemProps={{ label: 'Locale' }}
+                filter={collection.filters.locale}
+                collection={localeCollection}
+                renderItem={(locale) => ({ title: locale })}
+              />
+            </CollectionToolbarFilters>
+          }
+          views={
+            <Views
+              presets={[
+                {
+                  id: 'contacts-level',
+                  name: 'Contacts level',
+                  views: [
+                    {
+                      id: 'beginner',
+                      name: 'Beginner',
+                      filters: {
+                        level: {
+                          value: ['Beginner'],
+                        },
+                      },
+                    },
+                    {
+                      id: 'advanced',
+                      name: 'Advanced',
+                      filters: {
+                        level: {
+                          value: ['World Class', 'Legendary', 'Ultimate'],
+                        },
+                      },
+                    },
+                  ],
+                },
+                {
+                  id: 'locale',
+                  name: 'Locale',
+                  views: [
+                    {
+                      id: 'en-US',
+                      name: 'en-US',
+                      filters: {
+                        locale: {
+                          value: ['en-US'],
+                        },
+                      },
+                    },
+                    {
+                      id: 'he-IL',
+                      name: 'he-IL',
+                      filters: {
+                        locale: {
+                          value: ['he-IL'],
+                        },
+                      },
+                    },
+                  ],
+                },
+              ]}
+            />
+          }
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}