- );
- }
-}
-
-
-@withComponentMixins([
- withTranslation,
- withErrorHandling
-])
-export class ModalDialog extends Component {
- constructor(props) {
- super(props);
-
- const t = props.t;
-
- this.state = {
- buttons: this.props.buttons || [ { label: t('close'), className: 'btn-secondary', onClickAsync: null } ]
- };
- }
-
- static propTypes = {
- title: PropTypes.string,
- onCloseAsync: PropTypes.func,
- onButtonClickAsync: PropTypes.func,
- buttons: PropTypes.array,
- hidden: PropTypes.bool,
- className: PropTypes.string
- }
-
- /*
- this.props.hidden - this is the desired state of the modal
- this.hidden - this is the actual state of the modal - this is because there is no public API on Bootstrap modal to know whether the modal is shown or not
- */
-
- componentDidMount() {
- const jqModal = jQuery(this.domModal);
-
- jqModal.on('shown.bs.modal', () => jqModal.focus());
- jqModal.on('hide.bs.modal', ::this.onHide);
-
- this.hidden = this.props.hidden;
- jqModal.modal({
- show: !this.props.hidden
- });
- }
-
- componentDidUpdate() {
- if (this.props.hidden != this.hidden) {
- const jqModal = jQuery(this.domModal);
- this.hidden = this.props.hidden;
- jqModal.modal(this.props.hidden ? 'hide' : 'show');
- }
- }
-
- componentWillUnmount() {
- // We discard the modal in a hard way (without hiding it). Thus we have to take care of the backgrop too.
- jQuery('.modal-backdrop').remove();
- }
-
- onHide(evt) {
- // Hide event is emited is both when hidden through user action or through API. We have to let the API
- // calls through, otherwise the modal would never hide. The user actions, which change the desired state,
- // are capture, converted to onClose callback and prevented. It's up to the parent to decide whether to
- // hide the modal or not.
- if (!this.props.hidden) {
- // noinspection JSIgnoredPromiseFromCall
- this.onClose();
- evt.preventDefault();
- }
- }
-
- @withAsyncErrorHandler
- async onClose() {
- if (this.props.onCloseAsync) {
- await this.props.onCloseAsync();
- }
- }
-
- async onButtonClick(idx) {
- const buttonSpec = this.state.buttons[idx];
- if (buttonSpec.onClickAsync) {
- await buttonSpec.onClickAsync(idx);
- }
- }
-
- render() {
- const props = this.props;
- const t = props.t;
-
- const buttons = [];
- for (let idx = 0; idx < this.state.buttons.length; idx++) {
- const buttonSpec = this.state.buttons[idx];
- const button =
this.onButtonClick(idx)} />
- buttons.push(button);
- }
-
- return (
- { this.domModal = domElem; }}
- className={'modal fade' + (props.className ? ' ' + props.className : '')}
- tabIndex="-1" role="dialog" aria-labelledby="myModalLabel">
-
-
-
-
-
{this.props.title}
- ×
-
{this.props.children}
-
- {buttons}
-
-
-
-
+ ×
+ )
+ }
+}
+
+export class Icon extends Component {
+ static propTypes = {
+ icon: PropTypes.string.isRequired,
+ family: PropTypes.string,
+ title: PropTypes.string,
+ className: PropTypes.string
+ }
+
+ static defaultProps = {
+ family: 'fas'
+ }
+
+ render() {
+ const props = this.props;
+
+ if (props.family === 'fas' || props.family === 'far') {
+ return
+ }
+
+ let iconSpacer;
+ if (props.icon && props.label) {
+ iconSpacer = ' ';
+ }
+
+ return (
+ {icon}{iconSpacer}{props.label}
+ );
+ }
+}
+
+export class ButtonDropdown extends Component {
+ static propTypes = {
+ label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+ className: PropTypes.string,
+ buttonClassName: PropTypes.string,
+ menuClassName: PropTypes.string
+ }
+
+ render() {
+ const props = this.props;
+
+ const className = 'dropdown' + (props.className ? ' ' + props.className : '');
+ const buttonClassName = 'btn dropdown-toggle' + (props.buttonClassName ? ' ' + props.buttonClassName : '');
+ const menuClassName = 'dropdown-menu' + (props.menuClassName ? ' ' + props.menuClassName : '');
+
+ return (
+
+
+ {props.label}
+
+
+
+
{props.children}
+ );
+ }
+}
+
+
+export class DropdownActionLink extends Component {
+ static propTypes = {
+ onClickAsync: PropTypes.func,
+ className: PropTypes.string,
+ disabled: PropTypes.bool
+ }
+
+ render() {
+ const props = this.props;
+
+ let clsName = "dropdown-item ";
+ if (props.disabled) {
+ clsName += "disabled ";
+ }
+
+ clsName += props.className;
+
+ return (
+ {props.children}
+ );
+ }
+}
+
+
+export class DropdownDivider extends Component {
+ static propTypes = {
+ className: PropTypes.string
+ }
+
+ render() {
+ const props = this.props;
+
+ let className = 'dropdown-divider';
+ if (props.className) {
+ className = className + ' ' + props.className;
+ }
+
+ return (
+
+ );
+ }
+}
+
+
+@withComponentMixins([
+ withTranslation,
+ withErrorHandling
+])
+export class ModalDialog extends Component {
+ constructor(props) {
+ super(props);
+
+ const t = props.t;
+
+ this.state = {
+ buttons: this.props.buttons || [ { label: t('close'), className: 'btn-secondary', onClickAsync: null } ]
+ };
+ }
+
+ static propTypes = {
+ title: PropTypes.string,
+ onCloseAsync: PropTypes.func,
+ onButtonClickAsync: PropTypes.func,
+ buttons: PropTypes.array,
+ hidden: PropTypes.bool,
+ className: PropTypes.string
+ }
+
+ /*
+ this.props.hidden - this is the desired state of the modal
+ this.hidden - this is the actual state of the modal - this is because there is no public API on Bootstrap modal to know whether the modal is shown or not
+ */
+
+ componentDidMount() {
+ const jqModal = jQuery(this.domModal);
+
+ jqModal.on('shown.bs.modal', () => jqModal.focus());
+ jqModal.on('hide.bs.modal', ::this.onHide);
+
+ this.hidden = this.props.hidden;
+ jqModal.modal({
+ show: !this.props.hidden
+ });
+ }
+
+ componentDidUpdate() {
+ if (this.props.hidden != this.hidden) {
+ const jqModal = jQuery(this.domModal);
+ this.hidden = this.props.hidden;
+ jqModal.modal(this.props.hidden ? 'hide' : 'show');
+ }
+ }
+
+ componentWillUnmount() {
+ // We discard the modal in a hard way (without hiding it). Thus we have to take care of the backgrop too.
+ jQuery('.modal-backdrop').remove();
+ }
+
+ onHide(evt) {
+ // Hide event is emited is both when hidden through user action or through API. We have to let the API
+ // calls through, otherwise the modal would never hide. The user actions, which change the desired state,
+ // are capture, converted to onClose callback and prevented. It's up to the parent to decide whether to
+ // hide the modal or not.
+ if (!this.props.hidden) {
+ // noinspection JSIgnoredPromiseFromCall
+ this.onClose();
+ evt.preventDefault();
+ }
+ }
+
+ @withAsyncErrorHandler
+ async onClose() {
+ if (this.props.onCloseAsync) {
+ await this.props.onCloseAsync();
+ }
+ }
+
+ async onButtonClick(idx) {
+ const buttonSpec = this.state.buttons[idx];
+ if (buttonSpec.onClickAsync) {
+ await buttonSpec.onClickAsync(idx);
+ }
+ }
+
+ render() {
+ const props = this.props;
+ const t = props.t;
+
+ const buttons = [];
+ for (let idx = 0; idx < this.state.buttons.length; idx++) {
+ const buttonSpec = this.state.buttons[idx];
+ const button =
this.onButtonClick(idx)} />
+ buttons.push(button);
+ }
+
+ return (
+ { this.domModal = domElem; }}
+ className={'modal fade' + (props.className ? ' ' + props.className : '')}
+ tabIndex="-1" role="dialog" aria-labelledby="myModalLabel">
+
+
+
+
+
{this.props.title}
+ ×
+
{this.props.children}
+
+ {buttons}
+
+
+
+
- {
- value => existingInnerFn({
- ...parentProps,
- [propName]: value
- })
- }
-
- );
- }
-
- return innerFn(this.props);
- }
- }
-
- for (const fun of mixinDelegateFuns) {
- ComponentMixinsOuter.prototype[fun] = function (...args) {
- return this._decoratorInnerInstance[fun](...args);
- }
- }
-
- return ComponentMixinsOuter;
- };
-}
-
+'use strict';
+
+import React from "react";
+
+export function createComponentMixin(contexts, deps, decoratorFn) {
+ return {
+ contexts,
+ deps,
+ decoratorFn
+ };
+}
+
+export function withComponentMixins(mixins, delegateFuns) {
+ const mixinsClosure = new Set();
+ for (const mixin of mixins) {
+ mixinsClosure.add(mixin);
+ for (const dep of mixin.deps) {
+ mixinsClosure.add(dep);
+ }
+ }
+
+ const contexts = new Map();
+ for (const mixin of mixinsClosure.values()) {
+ for (const ctx of mixin.contexts) {
+ contexts.set(ctx.propName, ctx.context);
+ }
+ }
+
+ return TargetClass => {
+ const ctors = [];
+ const mixinDelegateFuns = [];
+
+ if (delegateFuns) {
+ mixinDelegateFuns.push(...delegateFuns);
+ }
+
+ function TargetClassWithCtors(props) {
+ if (!new.target) {
+ throw new TypeError();
+ }
+
+ const self = Reflect.construct(TargetClass, [props], new.target);
+
+ for (const ctor of ctors) {
+ ctor(self, props);
+ }
+
+ return self;
+ }
+
+ TargetClassWithCtors.prototype = TargetClass.prototype;
+
+ for (const attr in TargetClass) {
+ TargetClassWithCtors[attr] = TargetClass[attr];
+ }
+
+
+ class ComponentMixinsInner extends React.Component {
+ render() {
+ const props = {
+ ...this.props,
+ ref: this.props._decoratorInnerInstanceRefFn
+ };
+ delete props._decoratorInnerInstanceRefFn;
+
+ return (
+
+ {
+ value => existingInnerFn({
+ ...parentProps,
+ [propName]: value
+ })
+ }
+
+ );
+ }
+
+ return innerFn(this.props);
+ }
+ }
+
+ for (const fun of mixinDelegateFuns) {
+ ComponentMixinsOuter.prototype[fun] = function (...args) {
+ return this._decoratorInnerInstance[fun](...args);
+ }
+ }
+
+ return ComponentMixinsOuter;
+ };
+}
+
diff --git a/client/src/lib/error-handling.js b/client/src/lib/error-handling.js
index 68752e4b..d70b4f34 100644
--- a/client/src/lib/error-handling.js
+++ b/client/src/lib/error-handling.js
@@ -1,76 +1,76 @@
-'use strict';
-
-import React from "react";
-import PropTypes from 'prop-types';
-import {createComponentMixin} from "./decorator-helpers";
-
-function handleError(that, error) {
- let errorHandled;
- if (that.errorHandler) {
- errorHandled = that.errorHandler(error);
- }
-
- if (!errorHandled && that.props.parentErrorHandler) {
- errorHandled = handleError(that.props.parentErrorHandler, error);
- }
-
- if (!errorHandled) {
- throw error;
- }
-
- return errorHandled;
-}
-
-export const ParentErrorHandlerContext = React.createContext(null);
-export const withErrorHandling = createComponentMixin([{context: ParentErrorHandlerContext, propName: 'parentErrorHandler'}], [], (TargetClass, InnerClass) => {
- /* Example of use:
- this.getFormValuesFromURL(....).catch(error => this.handleError(error));
-
- It's equivalent to:
-
- @withAsyncErrorHandler
- async loadFormValues() {
- await this.getFormValuesFromURL(...);
- }
- */
-
- const originalRender = InnerClass.prototype.render;
-
- InnerClass.prototype.render = function() {
- return (
-
- {originalRender.apply(this)}
-
- );
- }
-
- InnerClass.prototype.handleError = function(error) {
- handleError(this, error);
- };
-
- return {};
-});
-
-export function withAsyncErrorHandler(target, name, descriptor) {
- let fn = descriptor.value;
-
- descriptor.value = async function () {
- try {
- await fn.apply(this, arguments)
- } catch (error) {
- handleError(this, error);
- }
- };
-
- return descriptor;
-}
-
-export function wrapWithAsyncErrorHandler(self, fn) {
- return async function () {
- try {
- await fn.apply(this, arguments)
- } catch (error) {
- handleError(self, error);
- }
- };
-}
+'use strict';
+
+import React from "react";
+import PropTypes from 'prop-types';
+import {createComponentMixin} from "./decorator-helpers";
+
+function handleError(that, error) {
+ let errorHandled;
+ if (that.errorHandler) {
+ errorHandled = that.errorHandler(error);
+ }
+
+ if (!errorHandled && that.props.parentErrorHandler) {
+ errorHandled = handleError(that.props.parentErrorHandler, error);
+ }
+
+ if (!errorHandled) {
+ throw error;
+ }
+
+ return errorHandled;
+}
+
+export const ParentErrorHandlerContext = React.createContext(null);
+export const withErrorHandling = createComponentMixin([{context: ParentErrorHandlerContext, propName: 'parentErrorHandler'}], [], (TargetClass, InnerClass) => {
+ /* Example of use:
+ this.getFormValuesFromURL(....).catch(error => this.handleError(error));
+
+ It's equivalent to:
+
+ @withAsyncErrorHandler
+ async loadFormValues() {
+ await this.getFormValuesFromURL(...);
+ }
+ */
+
+ const originalRender = InnerClass.prototype.render;
+
+ InnerClass.prototype.render = function() {
+ return (
+
+ {originalRender.apply(this)}
+
+ );
+ }
+
+ InnerClass.prototype.handleError = function(error) {
+ handleError(this, error);
+ };
+
+ return {};
+});
+
+export function withAsyncErrorHandler(target, name, descriptor) {
+ let fn = descriptor.value;
+
+ descriptor.value = async function () {
+ try {
+ await fn.apply(this, arguments)
+ } catch (error) {
+ handleError(this, error);
+ }
+ };
+
+ return descriptor;
+}
+
+export function wrapWithAsyncErrorHandler(self, fn) {
+ return async function () {
+ try {
+ await fn.apply(this, arguments)
+ } catch (error) {
+ handleError(self, error);
+ }
+ };
+}
diff --git a/client/src/lib/helpers.js b/client/src/lib/helpers.js
index f2db92e3..8c2f8e27 100644
--- a/client/src/lib/helpers.js
+++ b/client/src/lib/helpers.js
@@ -1,8 +1,8 @@
-'use strict';
-
-import ellipsize from "ellipsize";
-
-
-export function ellipsizeBreadcrumbLabel(label) {
- return ellipsize(label, 40)
+'use strict';
+
+import ellipsize from "ellipsize";
+
+
+export function ellipsizeBreadcrumbLabel(label) {
+ return ellipsize(label, 40)
}
\ No newline at end of file
diff --git a/client/src/lib/i18n.js b/client/src/lib/i18n.js
index 15b8293a..315c7a42 100644
--- a/client/src/lib/i18n.js
+++ b/client/src/lib/i18n.js
@@ -1,75 +1,75 @@
-'use strict';
-
-import React, {Component} from 'react';
-import i18n
- from 'i18next';
-import {withNamespaces} from "react-i18next";
-import LanguageDetector
- from 'i18next-browser-languagedetector';
-import mailtrainConfig
- from 'mailtrainConfig';
-
-import {convertToFake, getLang} from '../../../shared/langs';
-import {createComponentMixin} from "./decorator-helpers";
-
-import lang_en_US_common from "../../../locales/en-US/common";
-import lang_es_ES_common from "../../../locales/es-ES/common";
-
-
-const resourcesCommon = {
- 'en-US': lang_en_US_common,
- 'es-ES': lang_es_ES_common,
- 'fk-FK': convertToFake(lang_en_US_common)
-};
-
-const resources = {};
-for (const lng of mailtrainConfig.enabledLanguages) {
- const langDesc = getLang(lng);
- resources[langDesc.longCode] = {
- common: resourcesCommon[langDesc.longCode]
- };
-}
-
-i18n
- .use(LanguageDetector)
- .init({
- resources,
-
- fallbackLng: mailtrainConfig.defaultLanguage,
- defaultNS: 'common',
-
- interpolation: {
- escapeValue: false // not needed for react
- },
-
- react: {
- wait: true
- },
-
- detection: {
- order: ['querystring', 'cookie', 'localStorage', 'navigator'],
- lookupQuerystring: 'locale',
- lookupCookie: 'i18nextLng',
- lookupLocalStorage: 'i18nextLng',
- caches: ['localStorage', 'cookie']
- },
-
- whitelist: mailtrainConfig.enabledLanguages,
- load: 'currentOnly',
-
- debug: false
- });
-
-
-export default i18n;
-
-
-export const withTranslation = createComponentMixin([], [], (TargetClass, InnerClass) => {
- return {
- cls: withNamespaces()(TargetClass)
- };
-});
-
-export function tMark(key) {
- return key;
-}
+'use strict';
+
+import React, {Component} from 'react';
+import i18n
+ from 'i18next';
+import {withNamespaces} from "react-i18next";
+import LanguageDetector
+ from 'i18next-browser-languagedetector';
+import mailtrainConfig
+ from 'mailtrainConfig';
+
+import {convertToFake, getLang} from '../../../shared/langs';
+import {createComponentMixin} from "./decorator-helpers";
+
+import lang_en_US_common from "../../../locales/en-US/common";
+import lang_es_ES_common from "../../../locales/es-ES/common";
+
+
+const resourcesCommon = {
+ 'en-US': lang_en_US_common,
+ 'es-ES': lang_es_ES_common,
+ 'fk-FK': convertToFake(lang_en_US_common)
+};
+
+const resources = {};
+for (const lng of mailtrainConfig.enabledLanguages) {
+ const langDesc = getLang(lng);
+ resources[langDesc.longCode] = {
+ common: resourcesCommon[langDesc.longCode]
+ };
+}
+
+i18n
+ .use(LanguageDetector)
+ .init({
+ resources,
+
+ fallbackLng: mailtrainConfig.defaultLanguage,
+ defaultNS: 'common',
+
+ interpolation: {
+ escapeValue: false // not needed for react
+ },
+
+ react: {
+ wait: true
+ },
+
+ detection: {
+ order: ['querystring', 'cookie', 'localStorage', 'navigator'],
+ lookupQuerystring: 'locale',
+ lookupCookie: 'i18nextLng',
+ lookupLocalStorage: 'i18nextLng',
+ caches: ['localStorage', 'cookie']
+ },
+
+ whitelist: mailtrainConfig.enabledLanguages,
+ load: 'currentOnly',
+
+ debug: false
+ });
+
+
+export default i18n;
+
+
+export const withTranslation = createComponentMixin([], [], (TargetClass, InnerClass) => {
+ return {
+ cls: withNamespaces()(TargetClass)
+ };
+});
+
+export function tMark(key) {
+ return key;
+}
diff --git a/client/src/lib/namespace.js b/client/src/lib/namespace.js
index 24b0f911..40599c1c 100644
--- a/client/src/lib/namespace.js
+++ b/client/src/lib/namespace.js
@@ -1,33 +1,33 @@
-'use strict';
-
-import React, {Component} from 'react';
-import {withTranslation} from './i18n';
-import {TreeTableSelect} from './form';
-import {withComponentMixins} from "./decorator-helpers";
-
-
-@withComponentMixins([
- withTranslation
-])
-class NamespaceSelect extends Component {
- render() {
- const t = this.props.t;
-
- return (
-
-
-
,
- getFormData: rule => ({
- daysValue: Math.abs(rule.value).toString(),
- direction: rule.value >= 0 ? 'after' : 'before'
- }),
- assignRuleSettings: (rule, getter) => {
- const direction = getter('direction');
- rule.value = parseInt(getter('daysValue')) * (direction === 'before' ? -1 : 1);
- },
- validate: state => {
- const value = state.getIn(['daysValue', 'value']);
- if (!value) {
- state.setIn(['daysValue', 'error'], t('numberOfDaysMustNotBeEmpty'));
- } else if (isNaN(value)) {
- state.setIn(['daysValue', 'error'], t('numberOfDaysMustBeANumber'));
- } else {
- state.setIn(['daysValue', 'error'], null);
- }
- }
- };
-
- const optionValueSettings = {
- getForm: () => null,
- getFormData: rule => ({}),
- assignRuleSettings: (rule, getter) => {},
- validate: state => {}
- };
-
-
- function assignSettingsToRuleTypes(ruleTypes, keys, settings) {
- for (const key of keys) {
- Object.assign(ruleTypes[key], settings);
- }
- }
-
- assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes.text, ['eq', 'like', 're'], stringValueSettings(true));
- assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes.text, ['lt', 'le', 'gt', 'ge'], stringValueSettings(false));
- assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes.website, ['eq', 'like', 're'], stringValueSettings(true));
- assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes.number, ['eq', 'lt', 'le', 'gt', 'ge'], numberValueSettings);
- assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes.birthday, ['eq', 'lt', 'le', 'gt', 'ge'], birthdayValueSettings);
- assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes.date, ['eq', 'lt', 'le', 'gt', 'ge'], dateValueSettings);
- assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes.date, ['eqTodayPlusDays', 'ltTodayPlusDays', 'leTodayPlusDays', 'gtTodayPlusDays', 'geTodayPlusDays'], dateRelativeValueSettings);
- assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes.option, ['isTrue', 'isFalse'], optionValueSettings);
- assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes['dropdown-enum'], ['eq', 'like', 're'], stringValueSettings(true));
- assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes['dropdown-enum'], ['lt', 'le', 'gt', 'ge'], stringValueSettings(false));
- assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes['radio-enum'], ['eq', 'like', 're'], stringValueSettings(true));
- assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes['radio-enum'], ['lt', 'le', 'gt', 'ge'], stringValueSettings(false));
-
- ruleHelpers.primitiveRuleTypesFormDataDefaults = {
- value: '',
- date: '',
- daysValue: '',
- birthday: '',
- direction: 'before'
- };
-
-
-
- ruleHelpers.getCompositeRuleTypeOptions = () => {
- const order = ['all', 'some', 'none'];
- return order.map(key => ({ key, label: ruleHelpers.compositeRuleTypes[key].dropdownLabel }));
- };
-
- ruleHelpers.getPrimitiveRuleTypeOptions = columnType => {
- const order = {
- text: ['eq', 'like', 're', 'lt', 'le', 'gt', 'ge'],
- website: ['eq', 'like', 're'],
- number: ['eq', 'lt', 'le', 'gt', 'ge'],
- birthday: ['eq', 'lt', 'le', 'gt', 'ge'],
- date: ['eq', 'lt', 'le', 'gt', 'ge', 'eqTodayPlusDays', 'ltTodayPlusDays', 'leTodayPlusDays', 'gtTodayPlusDays', 'geTodayPlusDays'],
- option: ['isTrue', 'isFalse'],
- 'dropdown-enum': ['eq', 'like', 're', 'lt', 'le', 'gt', 'ge'],
- 'radio-enum': ['eq', 'like', 're', 'lt', 'le', 'gt', 'ge']
- };
-
- return order[columnType].map(key => ({ key, label: ruleHelpers.primitiveRuleTypes[columnType][key].dropdownLabel }));
- };
-
- const predefColumns = [
- {
- column: 'email',
- name: t('emailAddress-1'),
- type: 'text',
- key: 'EMAIL'
- },
- {
- column: 'opt_in_country',
- name: t('signupCountry'),
- type: 'text'
- },
- {
- column: 'created',
- name: t('signUpDate'),
- type: 'date'
- },
- {
- column: 'latest_open',
- name: t('latestOpen'),
- type: 'date'
- },
- {
- column: 'latest_click',
- name: t('latestClick'),
- type: 'date'
- },
- {
- column: 'is_test',
- name: t('Test user'),
- type: 'option'
- }
- ];
-
- ruleHelpers.fields = [
- ...predefColumns,
- ...fields.filter(fld => fld.type in ruleHelpers.primitiveRuleTypes)
- ];
-
- ruleHelpers.fieldsByColumn = {};
- for (const fld of ruleHelpers.fields) {
- ruleHelpers.fieldsByColumn[fld.column] = fld;
- }
-
- ruleHelpers.getColumnType = column => {
- const field = ruleHelpers.fieldsByColumn[column];
- if (field) {
- return field.type;
- }
- };
-
- ruleHelpers.getColumnName = column => {
- const field = ruleHelpers.fieldsByColumn[column];
- if (field) {
- return field.name;
- }
- };
-
- ruleHelpers.getRuleTypeSettings = rule => {
- if (ruleHelpers.isCompositeRuleType(rule.type)) {
- return ruleHelpers.compositeRuleTypes[rule.type];
- } else {
- const colType = ruleHelpers.getColumnType(rule.column);
-
- if (colType) {
- if (rule.type in ruleHelpers.primitiveRuleTypes[colType]) {
- return ruleHelpers.primitiveRuleTypes[colType][rule.type];
- }
- }
- }
- };
-
- ruleHelpers.isCompositeRuleType = ruleType => ruleType in ruleHelpers.compositeRuleTypes;
-
- return ruleHelpers;
-}
-
+'use strict';
+
+import React from 'react';
+import {DatePicker, Dropdown, InputField} from "../../lib/form";
+import { parseDate, parseBirthday, formatDate, formatBirthday, DateFormat, birthdayYear, getDateFormatString, getBirthdayFormatString } from '../../../../shared/date';
+import { tMark } from "../../lib/i18n";
+
+export function getRuleHelpers(t, fields) {
+
+ const ruleHelpers = {};
+
+ ruleHelpers.compositeRuleTypes = {
+ all: {
+ dropdownLabel: t('allRulesMustMatch'),
+ treeLabel: rule => t('allRulesMustMatch')
+ },
+ some: {
+ dropdownLabel: t('atLeastOneRuleMustMatch'),
+ treeLabel: rule => t('atLeastOneRuleMustMatch')
+ },
+ none: {
+ dropdownLabel: t('noRuleMayMatch'),
+ treeLabel: rule => t('noRuleMayMatch')
+ }
+ };
+
+ ruleHelpers.primitiveRuleTypes = {};
+
+ ruleHelpers.primitiveRuleTypes.text = {
+ eq: {
+ dropdownLabel: t('equalTo'),
+ treeLabel: rule => t('valueInColumnColNameIsEqualToValue', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ },
+ like: {
+ dropdownLabel: t('matchWithSqlLike'),
+ treeLabel: rule => t('valueInColumnColNameMatchesWithSqlLike', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ },
+ re: {
+ dropdownLabel: t('matchWithRegularExpressions'),
+ treeLabel: rule => t('valueInColumnColNameMatchesWithRegular', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ },
+ lt: {
+ dropdownLabel: t('alphabeticallyBefore'),
+ treeLabel: rule => t('valueInColumnColNameIsAlphabetically', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ },
+ le: {
+ dropdownLabel: t('alphabeticallyBeforeOrEqualTo'),
+ treeLabel: rule => t('valueInColumnColNameIsAlphabetically-1', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ },
+ gt: {
+ dropdownLabel: t('alphabeticallyAfter'),
+ treeLabel: rule => t('valueInColumnColNameIsAlphabetically-2', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ },
+ ge: {
+ dropdownLabel: t('alphabeticallyAfterOrEqualTo'),
+ treeLabel: rule => t('valueInColumnColNameIsAlphabetically-3', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ }
+ };
+
+ ruleHelpers.primitiveRuleTypes.website = {
+ eq: {
+ dropdownLabel: t('equalTo'),
+ treeLabel: rule => t('valueInColumnColNameIsEqualToValue', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ },
+ like: {
+ dropdownLabel: t('matchWithSqlLike'),
+ treeLabel: rule => t('valueInColumnColNameMatchesWithSqlLike', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ },
+ re: {
+ dropdownLabel: t('matchWithRegularExpressions'),
+ treeLabel: rule => t('valueInColumnColNameMatchesWithRegular', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ }
+ };
+
+ ruleHelpers.primitiveRuleTypes.number = {
+ eq: {
+ dropdownLabel: t('equalTo'),
+ treeLabel: rule => t('valueInColumnColNameIsEqualToValue-1', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ },
+ lt: {
+ dropdownLabel: t('lessThan'),
+ treeLabel: rule => t('valueInColumnColNameIsLessThanValue', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ },
+ le: {
+ dropdownLabel: t('lessThanOrEqualTo'),
+ treeLabel: rule => t('valueInColumnColNameIsLessThanOrEqualTo', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ },
+ gt: {
+ dropdownLabel: t('greaterThan'),
+ treeLabel: rule => t('valueInColumnColNameIsGreaterThanValue', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ },
+ ge: {
+ dropdownLabel: t('greaterThanOrEqualTo'),
+ treeLabel: rule => t('valueInColumnColNameIsGreaterThanOrEqual', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ }
+ };
+
+ // FXIME - the localization here is still wrong
+ function getRelativeDateTreeLabel(rule, variants) {
+ if (rule.value === 0) {
+ return t(variants[0], {colName: ruleHelpers.getColumnName(rule.column)})
+ } else if (rule.value > 0) {
+ return t(variants[1], {colName: ruleHelpers.getColumnName(rule.column), value: rule.value});
+ } else {
+ return t(variants[2], {colName: ruleHelpers.getColumnName(rule.column), value: -rule.value});
+ }
+ }
+
+ ruleHelpers.primitiveRuleTypes.date = {
+ eq: {
+ dropdownLabel: t('on'),
+ treeLabel: rule => t('dateInColumnColNameIsValue', {colName: ruleHelpers.getColumnName(rule.column), value: formatDate(DateFormat.INTL, rule.value)}),
+ },
+ lt: {
+ dropdownLabel: t('before'),
+ treeLabel: rule => t('dateInColumnColNameIsBeforeValue', {colName: ruleHelpers.getColumnName(rule.column), value: formatDate(DateFormat.INTL, rule.value)}),
+ },
+ le: {
+ dropdownLabel: t('beforeOrOn'),
+ treeLabel: rule => t('dateInColumnColNameIsBeforeOrOnValue', {colName: ruleHelpers.getColumnName(rule.column), value: formatDate(DateFormat.INTL, rule.value)}),
+ },
+ gt: {
+ dropdownLabel: t('after'),
+ treeLabel: rule => t('dateInColumnColNameIsAfterValue', {colName: ruleHelpers.getColumnName(rule.column), value: formatDate(DateFormat.INTL, rule.value)}),
+ },
+ ge: {
+ dropdownLabel: t('afterOrOn'),
+ treeLabel: rule => t('dateInColumnColNameIsAfterOrOnValue', {colName: ruleHelpers.getColumnName(rule.column), value: formatDate(DateFormat.INTL, rule.value)}),
+ },
+ eqTodayPlusDays: {
+ dropdownLabel: t('onXthDayBeforeafterCurrentDate'),
+ treeLabel: rule => getRelativeDateTreeLabel(rule, [tMark('dateInColumnColNameIsTheCurrentDate'), tMark('dateInColumnColNameIsTheValuethDayAfter'), tMark('dateInColumnColNameIsTheValuethDayBefore')]),
+ },
+ ltTodayPlusDays: {
+ dropdownLabel: t('beforeXthDayBeforeafterCurrentDate'),
+ treeLabel: rule => getRelativeDateTreeLabel(rule, [tMark('dateInColumnColNameIsBeforeTheCurrent'), tMark('dateInColumnColNameIsBeforeTheValuethDay'), tMark('dateInColumnColNameIsBeforeTheValuethDay-1')]),
+ },
+ leTodayPlusDays: {
+ dropdownLabel: t('beforeOrOnXthDayBeforeafterCurrentDate'),
+ treeLabel: rule => getRelativeDateTreeLabel(rule, [tMark('dateInColumnColNameIsBeforeOrOnThe'), tMark('dateInColumnColNameIsBeforeOrOnThe-1'), tMark('dateInColumnColNameIsBeforeOrOnThe-2')]),
+ },
+ gtTodayPlusDays: {
+ dropdownLabel: t('afterXthDayBeforeafterCurrentDate'),
+ treeLabel: rule => getRelativeDateTreeLabel(rule, [tMark('dateInColumnColNameIsAfterTheCurrentDate'), tMark('dateInColumnColNameIsAfterTheValuethDay'), tMark('dateInColumnColNameIsAfterTheValuethDay-1')]),
+ },
+ geTodayPlusDays: {
+ dropdownLabel: t('afterOrOnXthDayBeforeafterCurrentDate'),
+ treeLabel: rule => getRelativeDateTreeLabel(rule, [tMark('dateInColumnColNameIsAfterOrOnTheCurrent'), tMark('dateInColumnColNameIsAfterOrOnTheValueth'), tMark('dateInColumnColNameIsAfterOrOnTheValueth-1')]),
+ }
+ };
+
+ ruleHelpers.primitiveRuleTypes.birthday = {
+ eq: {
+ dropdownLabel: t('on'),
+ treeLabel: rule => t('dateInColumnColNameIsValue', {colName: ruleHelpers.getColumnName(rule.column), value: formatBirthday(DateFormat.INTL, rule.value)}),
+ },
+ lt: {
+ dropdownLabel: t('before'),
+ treeLabel: rule => t('dateInColumnColNameIsBeforeValue', {colName: ruleHelpers.getColumnName(rule.column), value: formatBirthday(DateFormat.INTL, rule.value)}),
+ },
+ le: {
+ dropdownLabel: t('beforeOrOn'),
+ treeLabel: rule => t('dateInColumnColNameIsBeforeOrOnValue', {colName: ruleHelpers.getColumnName(rule.column), value: formatBirthday(DateFormat.INTL, rule.value)}),
+ },
+ gt: {
+ dropdownLabel: t('after'),
+ treeLabel: rule => t('dateInColumnColNameIsAfterValue', {colName: ruleHelpers.getColumnName(rule.column), value: formatBirthday(DateFormat.INTL, rule.value)}),
+ },
+ ge: {
+ dropdownLabel: t('afterOrOn'),
+ treeLabel: rule => t('dateInColumnColNameIsAfterOrOnValue', {colName: ruleHelpers.getColumnName(rule.column), value: formatBirthday(DateFormat.INTL, rule.value)}),
+ }
+ };
+
+ ruleHelpers.primitiveRuleTypes.option = {
+ isTrue: {
+ dropdownLabel: t('isSelected'),
+ treeLabel: rule => t('valueInColumnColNameIsSelected', {colName: ruleHelpers.getColumnName(rule.column)}),
+ },
+ isFalse: {
+ dropdownLabel: t('isNotSelected'),
+ treeLabel: rule => t('valueInColumnColNameIsNotSelected', {colName: ruleHelpers.getColumnName(rule.column)}),
+ }
+ };
+
+ ruleHelpers.primitiveRuleTypes['dropdown-enum'] = ruleHelpers.primitiveRuleTypes['radio-enum'] = {
+ eq: {
+ dropdownLabel: t('keyEqualTo'),
+ treeLabel: rule => t('theSelectedKeyInColumnColNameIsEqualTo', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ },
+ like: {
+ dropdownLabel: t('keyMatchWithSqlLike'),
+ treeLabel: rule => t('theSelectedKeyInColumnColNameMatchesWith', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ },
+ re: {
+ dropdownLabel: t('keyMatchWithRegularExpressions'),
+ treeLabel: rule => t('theSelectedKeyInColumnColNameMatchesWith-1', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ },
+ lt: {
+ dropdownLabel: t('keyAlphabeticallyBefore'),
+ treeLabel: rule => t('theSelectedKeyInColumnColNameIs', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ },
+ le: {
+ dropdownLabel: t('keyAlphabeticallyBeforeOrEqualTo'),
+ treeLabel: rule => t('theSelectedKeyInColumnColNameIs-1', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ },
+ gt: {
+ dropdownLabel: t('keyAlphabeticallyAfter'),
+ treeLabel: rule => t('theSelectedKeyInColumnColNameIs-2', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ },
+ ge: {
+ dropdownLabel: t('keyAlphabeticallyAfterOrEqualTo'),
+ treeLabel: rule => t('theSelectedKeyInColumnColNameIs-3', {colName: ruleHelpers.getColumnName(rule.column), value: rule.value}),
+ }
+ };
+
+
+ const stringValueSettings = allowEmpty => ({
+ getForm: () =>
+
+
,
+ getFormData: rule => ({
+ daysValue: Math.abs(rule.value).toString(),
+ direction: rule.value >= 0 ? 'after' : 'before'
+ }),
+ assignRuleSettings: (rule, getter) => {
+ const direction = getter('direction');
+ rule.value = parseInt(getter('daysValue')) * (direction === 'before' ? -1 : 1);
+ },
+ validate: state => {
+ const value = state.getIn(['daysValue', 'value']);
+ if (!value) {
+ state.setIn(['daysValue', 'error'], t('numberOfDaysMustNotBeEmpty'));
+ } else if (isNaN(value)) {
+ state.setIn(['daysValue', 'error'], t('numberOfDaysMustBeANumber'));
+ } else {
+ state.setIn(['daysValue', 'error'], null);
+ }
+ }
+ };
+
+ const optionValueSettings = {
+ getForm: () => null,
+ getFormData: rule => ({}),
+ assignRuleSettings: (rule, getter) => {},
+ validate: state => {}
+ };
+
+
+ function assignSettingsToRuleTypes(ruleTypes, keys, settings) {
+ for (const key of keys) {
+ Object.assign(ruleTypes[key], settings);
+ }
+ }
+
+ assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes.text, ['eq', 'like', 're'], stringValueSettings(true));
+ assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes.text, ['lt', 'le', 'gt', 'ge'], stringValueSettings(false));
+ assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes.website, ['eq', 'like', 're'], stringValueSettings(true));
+ assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes.number, ['eq', 'lt', 'le', 'gt', 'ge'], numberValueSettings);
+ assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes.birthday, ['eq', 'lt', 'le', 'gt', 'ge'], birthdayValueSettings);
+ assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes.date, ['eq', 'lt', 'le', 'gt', 'ge'], dateValueSettings);
+ assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes.date, ['eqTodayPlusDays', 'ltTodayPlusDays', 'leTodayPlusDays', 'gtTodayPlusDays', 'geTodayPlusDays'], dateRelativeValueSettings);
+ assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes.option, ['isTrue', 'isFalse'], optionValueSettings);
+ assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes['dropdown-enum'], ['eq', 'like', 're'], stringValueSettings(true));
+ assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes['dropdown-enum'], ['lt', 'le', 'gt', 'ge'], stringValueSettings(false));
+ assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes['radio-enum'], ['eq', 'like', 're'], stringValueSettings(true));
+ assignSettingsToRuleTypes(ruleHelpers.primitiveRuleTypes['radio-enum'], ['lt', 'le', 'gt', 'ge'], stringValueSettings(false));
+
+ ruleHelpers.primitiveRuleTypesFormDataDefaults = {
+ value: '',
+ date: '',
+ daysValue: '',
+ birthday: '',
+ direction: 'before'
+ };
+
+
+
+ ruleHelpers.getCompositeRuleTypeOptions = () => {
+ const order = ['all', 'some', 'none'];
+ return order.map(key => ({ key, label: ruleHelpers.compositeRuleTypes[key].dropdownLabel }));
+ };
+
+ ruleHelpers.getPrimitiveRuleTypeOptions = columnType => {
+ const order = {
+ text: ['eq', 'like', 're', 'lt', 'le', 'gt', 'ge'],
+ website: ['eq', 'like', 're'],
+ number: ['eq', 'lt', 'le', 'gt', 'ge'],
+ birthday: ['eq', 'lt', 'le', 'gt', 'ge'],
+ date: ['eq', 'lt', 'le', 'gt', 'ge', 'eqTodayPlusDays', 'ltTodayPlusDays', 'leTodayPlusDays', 'gtTodayPlusDays', 'geTodayPlusDays'],
+ option: ['isTrue', 'isFalse'],
+ 'dropdown-enum': ['eq', 'like', 're', 'lt', 'le', 'gt', 'ge'],
+ 'radio-enum': ['eq', 'like', 're', 'lt', 'le', 'gt', 'ge']
+ };
+
+ return order[columnType].map(key => ({ key, label: ruleHelpers.primitiveRuleTypes[columnType][key].dropdownLabel }));
+ };
+
+ const predefColumns = [
+ {
+ column: 'email',
+ name: t('emailAddress-1'),
+ type: 'text',
+ key: 'EMAIL'
+ },
+ {
+ column: 'opt_in_country',
+ name: t('signupCountry'),
+ type: 'text'
+ },
+ {
+ column: 'created',
+ name: t('signUpDate'),
+ type: 'date'
+ },
+ {
+ column: 'latest_open',
+ name: t('latestOpen'),
+ type: 'date'
+ },
+ {
+ column: 'latest_click',
+ name: t('latestClick'),
+ type: 'date'
+ },
+ {
+ column: 'is_test',
+ name: t('Test user'),
+ type: 'option'
+ }
+ ];
+
+ ruleHelpers.fields = [
+ ...predefColumns,
+ ...fields.filter(fld => fld.type in ruleHelpers.primitiveRuleTypes)
+ ];
+
+ ruleHelpers.fieldsByColumn = {};
+ for (const fld of ruleHelpers.fields) {
+ ruleHelpers.fieldsByColumn[fld.column] = fld;
+ }
+
+ ruleHelpers.getColumnType = column => {
+ const field = ruleHelpers.fieldsByColumn[column];
+ if (field) {
+ return field.type;
+ }
+ };
+
+ ruleHelpers.getColumnName = column => {
+ const field = ruleHelpers.fieldsByColumn[column];
+ if (field) {
+ return field.name;
+ }
+ };
+
+ ruleHelpers.getRuleTypeSettings = rule => {
+ if (ruleHelpers.isCompositeRuleType(rule.type)) {
+ return ruleHelpers.compositeRuleTypes[rule.type];
+ } else {
+ const colType = ruleHelpers.getColumnType(rule.column);
+
+ if (colType) {
+ if (rule.type in ruleHelpers.primitiveRuleTypes[colType]) {
+ return ruleHelpers.primitiveRuleTypes[colType][rule.type];
+ }
+ }
+ }
+ };
+
+ ruleHelpers.isCompositeRuleType = ruleType => ruleType in ruleHelpers.compositeRuleTypes;
+
+ return ruleHelpers;
+}
+
diff --git a/client/src/lists/styles.scss b/client/src/lists/styles.scss
index 240b7158..afeba690 100644
--- a/client/src/lists/styles.scss
+++ b/client/src/lists/styles.scss
@@ -1,7 +1,7 @@
-.mapping {
- margin-top: 30px;
-}
-
-.erased {
- color: #808080;
+.mapping {
+ margin-top: 30px;
+}
+
+.erased {
+ color: #808080;
}
\ No newline at end of file
diff --git a/client/src/lists/subscriptions/helpers.js b/client/src/lists/subscriptions/helpers.js
index 0539a3b3..754c4e71 100644
--- a/client/src/lists/subscriptions/helpers.js
+++ b/client/src/lists/subscriptions/helpers.js
@@ -1,212 +1,212 @@
-'use strict';
-
-import React from "react";
-import {SubscriptionStatus} from "../../../../shared/lists";
-import {
- ACEEditor,
- CheckBox,
- CheckBoxGroup,
- DatePicker,
- Dropdown,
- InputField,
- RadioGroup,
- TextArea
-} from "../../lib/form";
-import {formatBirthday, formatDate, parseBirthday, parseDate} from "../../../../shared/date";
-import {getFieldColumn} from '../../../../shared/lists';
-import 'brace/mode/json';
-
-export function getSubscriptionStatusLabels(t) {
-
- const subscriptionStatusLabels = {
- [SubscriptionStatus.SUBSCRIBED]: t('subscribed'),
- [SubscriptionStatus.UNSUBSCRIBED]: t('unubscribed'),
- [SubscriptionStatus.BOUNCED]: t('bounced'),
- [SubscriptionStatus.COMPLAINED]: t('complained'),
- };
-
- return subscriptionStatusLabels;
-}
-
-export function getFieldTypes(t) {
-
- const groupedFieldTypes = {};
-
- const stringFieldType = long => ({
- form: groupedField => long ?