@innovaccer/design-system 2.9.0 → 2.10.0

package/core/components/organisms/table/__stories__/ResourceTable.story.jsx

@@ -0,0 +1,328 @@
+import * as React from 'react';
+import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema';
+import { Card, Table, Dropdown, Avatar, Button } from '@/index';
+import { AsyncTable, SyncTable } from './_common_/types';
+import { action } from '@/utils/action';
+
+const data = [
+  {
+    name: 'Asthma Outreach',
+    firstName: 'Brooke',
+    lastName: 'Heeran',
+    status: 'In Progress',
+    lastUpdated: 'June 20, 2020',
+    recipients: 11846,
+  },
+  {
+    firstName: 'Frazer',
+    lastName: 'Cathro',
+    status: 'Scheduled',
+    lastUpdated: 'June 19, 2020',
+    name: 'HbA1c Test due',
+    recipients: 12846,
+  },
+  {
+    firstName: 'Lemmie',
+    name: 'ER Education',
+    lastName: 'Ciric',
+    status: 'Draft',
+    lastUpdated: 'May 19, 2020',
+    recipients: 118467,
+  },
+  {
+    firstName: 'Randy',
+    lastName: 'Boatwright',
+    name: 'Flu Vaccination',
+    status: 'Failed',
+    lastUpdated: 'March 19, 2020',
+    recipients: 10846,
+  },
+  {
+    firstName: 'Rolando',
+    lastName: 'Cyples',
+    name: 'Well-child Visit',
+    status: 'In Progress',
+    lastUpdated: 'April 19, 2020',
+    recipients: 11847,
+  },
+  {
+    firstName: 'Lem',
+    lastName: 'Males',
+    name: 'Annual wellness Visit',
+    status: 'In Progress',
+    lastUpdated: 'June 16, 2020',
+    recipients: 118100,
+  },
+  {
+    firstName: 'Sayres',
+    lastName: 'Adelberg',
+    name: 'Flu Vaccination',
+    status: 'Draft',
+    lastUpdated: 'Dec 19, 2020',
+    recipients: 11848,
+  },
+  {
+    firstName: 'Murray',
+    lastName: 'Bravington',
+    name: 'Well-child Visit',
+    status: 'Draft',
+    lastUpdated: 'April 19, 2020',
+    recipients: 11890,
+  },
+];
+
+export const resourceTable = () => {
+  const statusAppearance = {
+    'In Progress': 'info',
+    Scheduled: 'warning',
+    Draft: 'default',
+    Failed: 'alert',
+  };
+
+  const schema = [
+    {
+      name: 'name',
+      displayName: 'Name',
+      width: '30%',
+      cellType: 'WITH_META_LIST',
+      translate: (a) => ({
+        title: a.name,
+        metaList: [`${a.recipients} recipients`],
+      }),
+      sorting: false,
+    },
+    {
+      name: 'status',
+      displayName: 'Status',
+      width: '20%',
+      cellType: 'STATUS_HINT',
+      sorting: false,
+      filters: [
+        { label: 'In Progress', value: 'In Progress' },
+        { label: 'Scheduled', value: 'Scheduled' },
+        { label: 'Draft', value: 'Draft' },
+        { label: 'Failed', value: 'Failed' },
+      ],
+      onFilterChange: (a, filters) => {
+        for (const filter of filters) {
+          if (a.status === filter) return true;
+        }
+        return false;
+      },
+      translate: (a) => {
+        const status = a.status;
+        return {
+          title: status,
+          statusAppearance: statusAppearance[status],
+        };
+      },
+    },
+    {
+      name: 'lastUpdated',
+      displayName: 'Last Updated on',
+      width: '30%',
+      sorting: false,
+    },
+    {
+      name: 'user',
+      displayName: '',
+      sorting: false,
+      width: '20%',
+      cellRenderer: (props) => (
+        <div className="d-flex align-items-center justify-content-end flex-grow-1">
+          <Avatar firstName={props.data.firstName} lastName={props.data.lastName} />
+          <div style={{ width: 'var(--spacing-3)' }} className="ml-6">
+            <Dropdown
+              triggerOptions={{
+                customTrigger: () => <Button icon="more_horiz" appearance="transparent" />,
+              }}
+              menu={true}
+              align="left"
+              options={[
+                { label: 'Edit', value: 'Edit' },
+                { label: 'Delete', value: 'Delete' },
+              ]}
+            />
+          </div>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <Card>
+      <Table
+        loaderSchema={loaderSchema}
+        showMenu={false}
+        type="resource"
+        data={data}
+        schema={schema}
+        withHeader={true}
+        filterPosition="HEADER"
+        filterList={{
+          status: ['In Progress', 'Scheduled', 'Draft', 'Failed'],
+        }}
+        onSelect={(rowIndex, selected, selectedList, selectAll) =>
+          action(
+            `on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify(
+              selectedList
+            )} selectAll: ${selectAll}`
+          )()
+        }
+        headerOptions={{
+          withSearch: true,
+        }}
+        onSearch={(currData, searchTerm) => {
+          return currData.filter(
+            (d) =>
+              d.firstName.toLowerCase().match(searchTerm.toLowerCase()) ||
+              d.lastName.toLowerCase().match(searchTerm.toLowerCase()) ||
+              d.name.toLowerCase().match(searchTerm.toLowerCase())
+          );
+        }}
+        withPagination={true}
+        paginationType="basic"
+        pageSize={4}
+        onPageChange={(newPage) => action(`on-page-change:- ${newPage}`)()}
+      />
+    </Card>
+  );
+};
+
+const customCode = `
+() => {
+  const data = ${JSON.stringify(data.slice(0, 10), null, 4)};
+
+  const statusAppearance = {
+    'In Progress': 'info',
+    'Scheduled': 'warning',
+    'Draft': 'default',
+    'Failed': 'alert'
+  };
+
+  const schema = [
+    {
+      name: 'name',
+      displayName: 'Name',
+      width: '30%',
+      cellType: 'WITH_META_LIST',
+      sorting: false,
+      translate: a => ({
+        title: a.name,
+        metaList: [\`\${a.recipients} recipients\`]
+      }),
+    },
+    {
+      name: 'status',
+      displayName: 'Status',
+      width: '20%',
+      cellType: 'STATUS_HINT',
+      sorting: false,
+      filters: [
+        { label: 'In Progress', value: 'In Progress' },
+        { label: 'Scheduled', value: 'Scheduled' },
+        { label: 'Draft', value: 'Draft' },
+        { label: 'Failed', value: 'Failed' }
+      ],
+      onFilterChange: (a, filters) => {
+        for (const filter of filters) {
+          if (a.status === filter) return true;
+        }
+        return false;
+      },
+      translate: a => {
+        const status = a.status;
+        return ({
+          title: status,
+          statusAppearance: statusAppearance[status]
+        });
+      }
+    },
+    {
+      name: 'lastUpdated',
+      displayName: 'Last Updated on',
+      width: '30%',
+      sorting: false,
+    },
+    {
+      name: 'user',
+      displayName: '',
+      sorting: false,
+      width: '20%',
+      cellRenderer: (props) => {
+        const { data } = props;
+        return (
+          <div className="d-flex align-items-center justify-content-end flex-grow-1">
+            <Avatar firstName={data.firstName} lastName={data.lastName} />
+            <div style={{ width: 'var(--spacing-3)' }} className="ml-6">
+              <Dropdown
+                triggerOptions={{
+                  customTrigger: () => (
+                    <Button icon="more_horiz" appearance="transparent" />
+                  )
+                }}
+                menu={true}
+                align="left"
+                options={[
+                  { label: 'Edit', value: 'Edit' },
+                  { label: 'Delete', value: 'Delete' }
+                ]}
+                popoverOptions={{appendToBody:false}}
+              />
+            </div>
+          </div>
+        );
+      }
+    }
+  ];
+
+  return (
+    <Card>
+      <Table
+        showMenu={false}
+        type="resource"
+        data={data}
+        schema={schema}
+        withHeader={true}
+        filterPosition="HEADER"
+        onSelect={(rowIndex, selected, selectedList, selectAll) =>
+          console.log(\`on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`)
+        }
+        headerOptions={{
+          withSearch: true
+        }}
+        filterList={{
+          status: ['In Progress', 'Scheduled', 'Draft', 'Failed']
+        }}
+        onSearch={(currData, searchTerm) => {
+          return currData.filter(d =>
+            d.firstName.toLowerCase().match(searchTerm.toLowerCase())
+            || d.lastName.toLowerCase().match(searchTerm.toLowerCase())
+            || d.name.toLowerCase().match(searchTerm.toLowerCase())
+          );
+        }}
+        withPagination={true}
+        paginationType="basic"
+        pageSize={4}
+        onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)}
+      />
+    </Card>
+  );
+};
+`;
+
+export default {
+  title: 'Components/Table/Resource Table',
+  component: Table,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        props: {
+          components: { AsyncTable, SyncTable },
+          exclude: ['showHead'],
+        },
+      },
+    },
+  },
+};

package/core/components/organisms/table/__stories__/Selection.story.jsx

@@ -0,0 +1,275 @@
+import * as React from 'react';
+import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema';
+import { Card, Table } from '@/index';
+import { AsyncTable, SyncTable } from './_common_/types';
+import { action } from '@/utils/action';
+
+const data = [
+  {
+    firstName: 'Brooke',
+    lastName: 'Heeran',
+    email: 'bheeran0@altervista.org',
+    role: 'Administrator',
+    manager: 'Seb Grant',
+    last_login: 'May 5',
+    status: 'Active',
+  },
+  {
+    firstName: 'Frazer',
+    lastName: 'Cathro',
+    email: 'fcathro1@ucla.edu',
+    role: 'Healthcoaches',
+    manager: 'Mike Page',
+    last_login: 'May 4',
+    status: 'Active',
+  },
+  {
+    firstName: 'Lemmie',
+    lastName: 'Ciric',
+    email: {
+      title: 'lciric2@dmoz.org',
+      metaList: ['First', 'Second'],
+    },
+    role: 'Administrator',
+    manager: 'Seb Grant',
+    last_login: 'April 5',
+    status: 'Inactive',
+  },
+  {
+    firstName: 'Randy',
+    lastName: 'Boatwright',
+    email: 'rboatwright3@arstechnica.com',
+    role: 'Healthcoaches',
+    manager: 'William Estrada',
+    last_login: 'March 5',
+    status: 'Active',
+  },
+  {
+    firstName: 'Rolando',
+    lastName: 'Cyples',
+    email: 'rcyples4@biglobe.ne.jp',
+    role: 'Administrator',
+    manager: 'Seb Grant',
+    last_login: 'May 10',
+    status: 'Inactive',
+  },
+  {
+    firstName: 'Lem',
+    lastName: 'Males',
+    email: 'lmales5@admin.ch',
+    role: 'PCP Staff',
+    manager: 'Seb Grant',
+    last_login: 'June 5',
+    status: 'Inactive',
+  },
+  {
+    firstName: 'Sayres',
+    lastName: 'Adelberg',
+    email: 'sadelberg6@uol.com.br',
+    role: 'Leadership',
+    manager: 'William Estrada',
+    last_login: 'May 5',
+    status: 'Active',
+  },
+  {
+    firstName: 'Murray',
+    lastName: 'Bravington',
+    email: 'mbravington7@drupal.org',
+    role: 'Healthcoaches',
+    manager: 'William Estrada',
+    last_login: 'May 9',
+    status: 'Active',
+  },
+  {
+    firstName: 'Jena',
+    lastName: 'Swatheridge',
+    email: 'jswatheridge8@npr.org',
+    role: 'Leadership',
+    manager: 'Mike Page',
+    last_login: 'Jan 5',
+    status: 'Active',
+  },
+  {
+    firstName: 'Annabel',
+    lastName: 'Nelsey',
+    email: 'anelsey9@google.com',
+    role: 'Healthcoaches',
+    manager: 'Mike Page',
+    last_login: 'April 27',
+    status: 'Inactive',
+  },
+];
+
+export const selection = () => {
+  const schema = [
+    {
+      name: 'name',
+      displayName: 'Name',
+      width: '30%',
+      separator: true,
+      translate: (a) => ({
+        title: `${a.lastName}, ${a.firstName}`,
+        firstName: a.firstName,
+        lastName: a.lastName,
+      }),
+      cellType: 'AVATAR_WITH_TEXT',
+      sorting: false,
+    },
+    {
+      name: 'role',
+      displayName: 'Role',
+      width: 250,
+      sorting: false,
+    },
+    {
+      name: 'manager',
+      displayName: 'Manager',
+      width: 180,
+      sorting: false,
+    },
+    {
+      name: 'last_login',
+      displayName: 'Last Login',
+      width: 100,
+      sorting: false,
+    },
+    {
+      name: 'status',
+      displayName: 'Status',
+      width: 200,
+      cellType: 'STATUS_HINT',
+      sorting: false,
+      translate: (a) => ({
+        title: a.status,
+        statusAppearance: a.status === 'Inactive' ? 'default' : 'success',
+      }),
+    },
+  ];
+  return (
+    <Card>
+      <Table
+        loaderSchema={loaderSchema}
+        type="resource"
+        data={data}
+        schema={schema}
+        showMenu={false}
+        withHeader={true}
+        withCheckbox={true}
+        onSelect={(rowIndex, selected, selectedList, selectAll) =>
+          action(
+            `on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify(
+              selectedList
+            )} selectAll: ${selectAll}`
+          )()
+        }
+        headerOptions={{
+          withSearch: true,
+        }}
+        onSearch={(currData, searchTerm) => {
+          return currData.filter(
+            (d) =>
+              d.firstName.toLowerCase().match(searchTerm.toLowerCase()) ||
+              d.lastName.toLowerCase().match(searchTerm.toLowerCase())
+          );
+        }}
+        withPagination={true}
+        pageSize={5}
+        onPageChange={(newPage) => action(`on-page-change:- ${newPage}`)()}
+      />
+    </Card>
+  );
+};
+
+const customCode = `
+() => {
+  const data = ${JSON.stringify(data.slice(0, 10), null, 4)};
+
+  const schema = [
+    {
+      name: 'name',
+      displayName: 'Name',
+      width: '30%',
+      separator: true,
+      translate: a => ({
+        title: \`\${a.lastName}, \${a.firstName}\`,
+        firstName: a.firstName,
+        lastName: a.lastName
+      }),
+      cellType: 'AVATAR_WITH_TEXT',
+      sorting: false
+    },
+    {
+      name: 'role',
+      displayName: 'Role',
+      width: 250,
+      sorting: false
+    },
+    {
+      name: 'manager',
+      displayName: 'Manager',
+      width: 180,
+      sorting: false
+    },
+    {
+      name: 'last_login',
+      displayName: 'Last Login',
+      width: 100,
+      sorting: false
+    },
+    {
+      name: 'status',
+      displayName: 'Status',
+      width: 200,
+      cellType: 'STATUS_HINT',
+      sorting: false,
+      translate: a => ({
+        title: a.status,
+        statusAppearance: (a.status === 'Inactive') ? 'default' : 'success'
+      }),
+    },
+  ];
+  return (
+      <Card>
+        <Table
+          type="resource"
+          data={data}
+          schema={schema}
+          showMenu={false}
+          withHeader={true}
+          withCheckbox={true}
+          onSelect={(rowIndex, selected, selectedList, selectAll) =>
+            console.log(\`on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`)
+          }
+          headerOptions={{
+            withSearch: true
+          }}
+          onSearch={(currData, searchTerm) => {
+            return currData.filter(d =>
+              d.firstName.toLowerCase().match(searchTerm.toLowerCase())
+              || d.lastName.toLowerCase().match(searchTerm.toLowerCase())
+            );
+          }}
+          withPagination={true}
+          pageSize={5}
+          onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)}
+        />
+      </Card>
+  );
+};
+`;
+
+export default {
+  title: 'Components/Table/Selection',
+  component: Table,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        props: {
+          components: { AsyncTable, SyncTable },
+          exclude: ['showHead'],
+        },
+      },
+    },
+  },
+};