CHANGESET: twelve-pets-lay. Added contact field - different from memb…

…er field - WIP #56
uidu-org · Dec 5, 2019 · 822e37a · 822e37a
1 parent aec4069
commit 822e37a
Show file tree

Hide file tree

Showing 34 changed files with 525 additions and 279 deletions.
diff --git a/.changeset/twelve-pets-lay.md b/.changeset/twelve-pets-lay.md
@@ -0,0 +1,9 @@
+---
+'@uidu/data-controls': patch
+'@uidu/data-fields': patch
+'@uidu/data-manager': patch
+'@uidu/table': patch
+'@uidu/select': patch
+---
+
+Added contact field - different from member field - WIP #56
diff --git a/packages/data/data-controls/src/components/Filterer/form.tsx b/packages/data/data-controls/src/components/Filterer/form.tsx
@@ -2,6 +2,7 @@ import { byName } from '@uidu/data-fields';
 import Form from '@uidu/form';
 import Select from '@uidu/select';
 import React, { PureComponent } from 'react';
+import { X } from 'react-feather';
 import { FormattedMessage } from 'react-intl';
 import PickField from '../../utils/PickField';
 import { FiltererProps } from './types';
@@ -27,13 +28,17 @@ export default class FiltererForm extends PureComponent<FiltererProps> {
 
   handleSubmit = async model => {
     const { onChange } = this.props;
+    console.log(model);
     onChange(model.filters || []);
   };
 
   render() {
-    const { filters, columnDefs, addFilter } = this.props;
+    const { filters, columnDefs, addFilter, removeFilter } = this.props;
+
+    console.log(columnDefs);
 
     const filterableColumnDefs = columnDefs.filter(c => !c.hide && !!c.filter);
+    console.log(filterableColumnDefs);
 
     return (
       <Form
@@ -49,12 +54,33 @@ export default class FiltererForm extends PureComponent<FiltererProps> {
             return (
               <div className="list-group-item px-3 px-xl-4" key={filter.colId}>
                 <div className="form-group mb-2">
-                  <label htmlFor="" className="d-flex align-items-center">
-                    <FormattedMessage
-                      id="guidu.data_controls.filterer.where"
-                      defaultMessage="Where"
-                    />
-                  </label>
+                  <div className="form-group mb-0">
+                    <label htmlFor="" className="d-flex align-items-center">
+                      <FormattedMessage
+                        id="guidu.data_controls.filterer.where"
+                        defaultMessage={`{index, plural,
+                      =0 {Where}
+                      other {Then where}
+                    }`}
+                        values={{
+                          index,
+                        }}
+                      />
+                      <button
+                        type="button"
+                        className="btn btn-sm p-0 ml-auto d-flex align-items-center"
+                        onClick={e => {
+                          e.preventDefault();
+                          removeFilter(filter);
+                          // setTimeout(() => {
+                          //   (this.form.current as any).submit();
+                          // }, 300);
+                        }}
+                      >
+                        <X size={13} />
+                      </button>
+                    </label>
+                  </div>
                   <Select
                     layout="elementOnly"
                     value={filter.colId}

diff --git a/packages/data/data-controls/src/components/Filterer/types.ts b/packages/data/data-controls/src/components/Filterer/types.ts
@@ -6,6 +6,7 @@ export type FilterModel = ISimpleFilterModel;
 export type FiltererProps = {
   onChange: (filters: Array<any>) => void;
   addFilter: (filter: any) => void;
+  removeFilter: (filter: any) => void;
   filterModel: FilterModel;
   filters?: Array<any>;
   columnDefs: Column[];

diff --git a/packages/data/data-controls/src/components/Grouper/form.tsx b/packages/data/data-controls/src/components/Grouper/form.tsx
@@ -119,7 +119,7 @@ export default class Grouper extends Component<any> {
                 (this.form.current as any).submit();
               }, 300);
             }}
-            isDefaultOpen={false}
+            isDefaultOpen={groupers.length === 0}
             columnDefs={groupableColumnDefs.filter(
               f => groupers.map(s => s.colId).indexOf(f.colId) < 0,
             )}

diff --git a/packages/data/data-fields/package.json b/packages/data/data-fields/package.json
@@ -15,6 +15,7 @@
     "@loadable/component": "^5.10.1",
     "@uidu/downshift": "^0.1.4",
     "@uidu/field-color-picker": "^0.1.3",
+    "@uidu/field-date": "^0.1.10",
     "@uidu/field-number": "^0.1.21",
     "@uidu/field-text": "^0.1.23",
     "@uidu/field-toggle": "^0.1.22",

diff --git a/packages/data/data-fields/src/components/contact/index.tsx b/packages/data/data-fields/src/components/contact/index.tsx
@@ -0,0 +1,23 @@
+import { faUsers } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import loadable from '@loadable/component';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Field } from '../../types';
+
+const FilterForm = loadable(() => import('../../filters/TextFilterForm'));
+
+const Contact: Field = {
+  kind: 'contact',
+  name: <FormattedMessage id="field.contact.name" defaultMessage="Contact" />,
+  icon: <FontAwesomeIcon icon={faUsers} />,
+  description: (
+    <FormattedMessage
+      id="field.contact.description"
+      defaultMessage="A contact field represents a person or an organization - a contact"
+    />
+  ),
+  filterForm: FilterForm,
+};
+
+export default Contact;
diff --git a/packages/data/data-fields/src/components/country/index.tsx b/packages/data/data-fields/src/components/country/index.tsx
@@ -1,9 +1,12 @@
 import { faGlobe } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import loadable from '@loadable/component';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Field } from '../../types';
 
+const FilterForm = loadable(() => import('../../filters/SelectFilterForm'));
+
 const Country: Field = {
   kind: 'country',
   name: <FormattedMessage id="field.country.name" defaultMessage="Country" />,
@@ -14,6 +17,7 @@ const Country: Field = {
       defaultMessage="Add a Country select list to your record"
     />
   ),
+  filterForm: FilterForm,
 };
 
 export default Country;
diff --git a/packages/data/data-fields/src/components/date/index.tsx b/packages/data/data-fields/src/components/date/index.tsx
@@ -1,9 +1,12 @@
 import { faCalendarDay } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import loadable from '@loadable/component';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Field } from '../../types';
 
+const FilterForm = loadable(() => import('../../filters/DateFilterForm'));
+
 const Date: Field = {
   kind: 'date',
   name: <FormattedMessage id="field.date.name" defaultMessage="Date" />,
@@ -14,6 +17,7 @@ const Date: Field = {
       defaultMessage="Enter a date (e.g. 11/12/2013) or pick one from a calendar."
     />
   ),
+  filterForm: FilterForm,
 };
 
 export default Date;
diff --git a/packages/data/data-fields/src/components/index.ts b/packages/data/data-fields/src/components/index.ts
@@ -3,6 +3,7 @@ import addressField from './address';
 import attachmentsField from './attachments';
 import avatarField from './avatar';
 import checkboxField from './checkbox';
+import contactField from './contact';
 import countryField from './country';
 import coverField from './cover';
 import currencyField from './currency';
@@ -28,6 +29,7 @@ export { default as addressField } from './address';
 export { default as attachmentsField } from './attachments';
 export { default as avatarField } from './avatar';
 export { default as checkboxField } from './checkbox';
+export { default as contactField } from './contact';
 export { default as countryField } from './country';
 export { default as coverField } from './cover';
 export { default as currencyField } from './currency';
@@ -54,6 +56,7 @@ export const byName = {
   attachments: attachmentsField,
   avatar: avatarField,
   checkbox: checkboxField,
+  contact: contactField,
   country: countryField,
   cover: coverField,
   currency: currencyField,
@@ -81,6 +84,7 @@ export default [
   attachmentsField,
   avatarField,
   checkboxField,
+  contactField,
   countryField,
   coverField,
   currencyField,

diff --git a/packages/data/data-fields/src/components/member/index.tsx b/packages/data/data-fields/src/components/member/index.tsx
@@ -1,9 +1,12 @@
 import { faUsers } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import loadable from '@loadable/component';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Field } from '../../types';
 
+const FilterForm = loadable(() => import('../../filters/SelectFilterForm'));
+
 const Member: Field = {
   kind: 'member',
   name: <FormattedMessage id="field.member.name" defaultMessage="Member" />,
@@ -14,6 +17,7 @@ const Member: Field = {
       defaultMessage="A collaborator field lets you add collaborators to your records. Collaborators can optionally be notified when they're added."
     />
   ),
+  // filterForm: FilterForm,
 };
 
 export default Member;
diff --git a/packages/data/data-fields/src/components/paymentMethod/index.tsx b/packages/data/data-fields/src/components/paymentMethod/index.tsx
@@ -1,9 +1,12 @@
 import { faCashRegister } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import loadable from '@loadable/component';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Field } from '../../types';
 
+const FilterForm = loadable(() => import('../../filters/SelectFilterForm'));
+
 const PaymentMethod: Field = {
   kind: 'paymentMethod',
   name: (
@@ -19,6 +22,7 @@ const PaymentMethod: Field = {
       defaultMessage="Linked record fields contain blue tokens that represent links to other records."
     />
   ),
+  filterForm: FilterForm,
 };
 
 export default PaymentMethod;
diff --git a/packages/data/data-fields/src/filters/DateFilterForm.tsx b/packages/data/data-fields/src/filters/DateFilterForm.tsx
@@ -0,0 +1,46 @@
+import FieldDate from '@uidu/field-date';
+import Select from '@uidu/select';
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import { filtersByType } from './utils';
+
+function DateFilterForm({
+  onChange,
+  filter = {} as any,
+  index = 0,
+  intl,
+  ...rest
+}) {
+  const filters = filtersByType(intl, 'date');
+  return (
+    <>
+      <div className="form-row">
+        <div className="col-4">
+          <Select
+            isClearable={false}
+            layout="elementOnly"
+            value={filter.type || filters[0].id}
+            name={`filters[${index}][type]`}
+            options={filters}
+          />
+        </div>
+        <div className="col-8">
+          <FieldDate
+            layout="elementOnly"
+            name={`filters[${index}][filter]`}
+            value={filter.filter}
+            onChange={(name, value) => {
+              console.log(value);
+              if (value !== '') {
+                onChange(name, value);
+              }
+            }}
+            autoFocus
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default injectIntl(DateFilterForm);
diff --git a/packages/data/data-fields/src/filters/SelectFilterForm.tsx b/packages/data/data-fields/src/filters/SelectFilterForm.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { injectIntl } from 'react-intl';
 import { filtersByType } from './utils';
 
-function CurrencyFilterForm({
+function SelectFilterForm({
   onChange,
   filter = {} as any,
   index = 0,
@@ -13,7 +13,7 @@ function CurrencyFilterForm({
   },
   ...rest
 }) {
-  const filters = filtersByType(intl, 'number');
+  const filters = filtersByType(intl, 'singleSelect');
   return (
     <>
       <div className="form-row">
@@ -45,4 +45,4 @@ function CurrencyFilterForm({
   );
 }
 
-export default injectIntl(CurrencyFilterForm);
+export default injectIntl(SelectFilterForm);
diff --git a/packages/data/data-fields/src/filters/index.ts b/packages/data/data-fields/src/filters/index.ts
@@ -1,3 +1,4 @@
-// export { default as DateFilterForm } from './DateFilterForm';
+export { default as DateFilterForm } from './DateFilterForm';
 export { default as NumberFilterForm } from './NumberFilterForm';
+export { default as SelectFilterForm } from './SelectFilterForm';
 export { default as TextFilterForm } from './TextFilterForm';
diff --git a/packages/data/data-fields/src/filters/utils.ts b/packages/data/data-fields/src/filters/utils.ts
@@ -1,6 +1,6 @@
 // https://www.ag-grid.com/javascript-grid-filter-provided-simple/
 
-export type FilterType = 'text' | 'number' | 'date';
+export type FilterType = 'text' | 'number' | 'date' | 'singleSelect';
 
 const allFilters = ({ intl }) => [
   { kinds: ['text', 'number', 'date'], name: '=', id: 'equals' },
@@ -22,6 +22,8 @@ const allFilters = ({ intl }) => [
   { kinds: ['number'], name: '>=', id: 'greaterThanOrEqual' },
   { kinds: ['number', 'date'], name: 'In Range', id: 'inRange' },
   { kinds: ['text', 'number', 'date'], name: 'Empty', id: 'empty' },
+  { kinds: ['singleSelect'], name: 'Is', id: 'equals' },
+  { kinds: ['singleSelect'], name: 'Is not', id: 'notEqual' },
 ];
 
 export const pickFilters = (intl, list: String[]) =>

diff --git a/packages/data/data-manager/examples/Basic.tsx b/packages/data/data-manager/examples/Basic.tsx
@@ -54,8 +54,9 @@ const dataViews = [
       'gender',
       'phone',
       'addField',
+      'createdAt',
     ],
-    groupers: [{ colId: 'country' }],
+    // groupers: [{ colId: 'country' }],
     sorters: [{ colId: 'amount', sort: 'desc' }],
   },
   {

diff --git a/packages/data/data-manager/src/components/DataManager.tsx b/packages/data/data-manager/src/components/DataManager.tsx
@@ -282,6 +282,26 @@ export default class DataManager extends PureComponent<DataManagerProps, any> {
     }));
   };
 
+  removeFilter = filter => {
+    this.setState(
+      prevState => ({
+        filterModel: Object.keys(prevState.filterModel).reduce(
+          (object, key) => {
+            if (key !== filter.colId) {
+              object[key] = prevState.filterModel[key];
+            }
+            return object;
+          },
+          {},
+        ),
+      }),
+      () => {
+        this.gridApi.setFilterModel(this.state.filterModel);
+        this.gridApi.onFilterChanged();
+      },
+    );
+  };
+
   setFilterModel = filters => {
     this.setState(
       prevState => ({
@@ -655,6 +675,7 @@ export default class DataManager extends PureComponent<DataManagerProps, any> {
               )}
               onChange={this.setFilterModel}
               addFilter={this.addFilter}
+              removeFilter={this.removeFilter}
               filterModel={filterModel}
               {...availableControls.filterer.props}
             />

diff --git a/packages/data/table/examples-utils/index.tsx b/packages/data/table/examples-utils/index.tsx
@@ -19,7 +19,7 @@ export const availableColumns = [
     field: 'avatar',
   },
   {
-    dataField: 'member',
+    dataField: 'contact',
     dataFieldParams: {
       avatar: data => (data ? data.avatar : null),
     },

diff --git a/packages/data/table/src/components/Table.tsx b/packages/data/table/src/components/Table.tsx
@@ -239,6 +239,7 @@ const Table = ({
           address: {},
           attachments: {},
           checkbox: {},
+          contact: {},
           country: {},
           cover: {},
           currency: {},