From c5008f8259b9f240bbbb69aa9f2805d49b973d40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ja=CC=81n=20Mikla=CC=81s=CC=8C?= Date: Wed, 9 Sep 2020 16:03:47 +0200 Subject: [PATCH] Redesign form/fields/selection component [MAILPOET-2787] --- assets/js/src/form/fields/date.jsx | 3 +- assets/js/src/form/fields/selection.jsx | 99 +++++++++++-------- .../js/src/newsletters/send/notification.jsx | 5 +- assets/js/src/newsletters/send/standard.jsx | 5 +- assets/js/src/subscribers/form.jsx | 5 +- 5 files changed, 72 insertions(+), 45 deletions(-) diff --git a/assets/js/src/form/fields/date.jsx b/assets/js/src/form/fields/date.jsx index 890071ae92..a8699742f8 100644 --- a/assets/js/src/form/fields/date.jsx +++ b/assets/js/src/form/fields/date.jsx @@ -1,8 +1,7 @@ import React from 'react'; import moment from 'moment'; import PropTypes from 'prop-types'; -import classnames from 'classnames'; -import Select from "../../common/form/select/select"; +import Select from '../../common/form/select/select'; function FormFieldDateYear(props) { const yearsRange = 100; diff --git a/assets/js/src/form/fields/selection.jsx b/assets/js/src/form/fields/selection.jsx index daddce700c..d8d7fb3ead 100644 --- a/assets/js/src/form/fields/selection.jsx +++ b/assets/js/src/form/fields/selection.jsx @@ -2,7 +2,7 @@ import React from 'react'; import jQuery from 'jquery'; import _ from 'underscore'; import 'react-dom'; -import 'select2'; +import 'select2/dist/js/select2.full'; import PropTypes from 'prop-types'; class Selection extends React.Component { @@ -99,10 +99,35 @@ class Selection extends React.Component { return item.id; }; + getCount = (item) => { + if (this.props.field.getCount !== undefined) { + return this.props.field.getCount(item, this.props.item); + } + return null; + }; + + getTag = (item) => { + if (this.props.field.getTag !== undefined) { + return this.props.field.getTag(item, this.props.item); + } + return null; + }; + setupSelect2 = () => { if (this.isSelect2Initialized()) { return; } + const templateRendered = (option) => { + let tpl = ''; + if (option.tag) { + tpl += `${option.tag}`; + } + tpl += `${option.text}`; + if (option.count) { + tpl += `${option.count}`; + } + return tpl; + }; let select2Options = { disabled: this.props.disabled || false, @@ -111,15 +136,10 @@ class Selection extends React.Component { id: '', // the value of the option text: this.props.field.placeholder, }, - templateResult: function templateResult(item) { - if (item.element && item.element.selected) { - return null; - } - if (item.title) { - return item.title; - } - return item.text; - }, + dropdownCssClass: 'mailpoet-form-select2-dropdown', + escapeMarkup: (markup) => markup, + templateResult: templateRendered, + templateSelection: templateRendered, }; const remoteQuery = this.props.field.remoteQuery || null; @@ -158,6 +178,20 @@ class Selection extends React.Component { }, minimumInputLength: remoteQuery.minimumInputLength || 2, }); + } else { + const items = this.getItems(this.props.field); + const selectedValues = this.getSelectedValues() || []; + const data = items.map((item) => { + const id = this.getValue(item); + return { + id, + tag: this.getTag(item), + text: this.getLabel(item), + count: this.getCount(item), + selected: selectedValues.indexOf(id) > -1, + }; + }); + select2Options = Object.assign(select2Options, { data }); } if (this.props.field.extendSelect2Options !== undefined) { @@ -252,38 +286,21 @@ class Selection extends React.Component { }; render() { - const items = this.getItems(this.props.field); const selectedValues = this.getSelectedValues(); - const options = items.map((item) => { - const label = this.getLabel(item); - const searchLabel = this.getSearchLabel(item); - const value = this.getValue(item); - - return ( - - ); - }); - return ( - +
+ +
); } } @@ -303,6 +320,8 @@ Selection.propTypes = { filter: PropTypes.func, getSearchLabel: PropTypes.func, getValue: PropTypes.func, + getCount: PropTypes.func, + getTag: PropTypes.func, placeholder: PropTypes.string, remoteQuery: PropTypes.object, extendSelect2Options: PropTypes.object, diff --git a/assets/js/src/newsletters/send/notification.jsx b/assets/js/src/newsletters/send/notification.jsx index b7ce5a5f38..670f69ab4c 100644 --- a/assets/js/src/newsletters/send/notification.jsx +++ b/assets/js/src/newsletters/send/notification.jsx @@ -36,7 +36,10 @@ let fields = [ return !segment.deleted_at; }, getLabel: function getLabel(segment) { - return `${segment.name} (${parseInt(segment.subscribers, 10).toLocaleString()})`; + return segment.name; + }, + getCount: function getCount(segment) { + return parseInt(segment.subscribers, 10).toLocaleString(); }, transformChangedValue: function transformChangedValue(segmentIds) { const allSegments = this.getItems(); diff --git a/assets/js/src/newsletters/send/standard.jsx b/assets/js/src/newsletters/send/standard.jsx index d98a819214..34fd8763bc 100644 --- a/assets/js/src/newsletters/send/standard.jsx +++ b/assets/js/src/newsletters/send/standard.jsx @@ -134,7 +134,10 @@ let fields = [ return !segment.deleted_at; }, getLabel: function getLabel(segment) { - return `${segment.name} (${parseInt(segment.subscribers, 10).toLocaleString()})`; + return segment.name; + }, + getCount: function getCount(segment) { + return parseInt(segment.subscribers, 10).toLocaleString(); }, transformChangedValue: function transformChangedValue(segmentIds) { const allSegments = this.getItems(); diff --git a/assets/js/src/subscribers/form.jsx b/assets/js/src/subscribers/form.jsx index fc182fb830..54d3c426fd 100644 --- a/assets/js/src/subscribers/form.jsx +++ b/assets/js/src/subscribers/form.jsx @@ -67,7 +67,10 @@ const fields = [ return (!segment.deleted_at && segment.type === 'default'); }, getLabel: function getLabel(segment) { - return `${segment.name} (${segment.subscribers})`; + return segment.name; + }, + getCount: function getCount(segment) { + return segment.subscribers; }, getSearchLabel: function getSearchLabel(segment, subscriber) { let label = '';