@akemona-org/strapi-plugin-content-manager 3.7.0

package/admin/src/components/FilterPickerOption/index.js

@@ -0,0 +1,101 @@
+import React, { memo } from 'react';
+import { get, isEmpty } from 'lodash';
+import PropTypes from 'prop-types';
+import { CircleButton, getFilterType } from 'strapi-helper-plugin';
+import { Select } from '@buffetjs/core';
+
+import { InputWrapper, Wrapper } from './components';
+import Input from './Input';
+import Option from './Option';
+
+const styles = {
+  select: {
+    minWidth: '170px',
+    maxWidth: '200px',
+  },
+  selectMiddle: {
+    minWidth: '130px',
+    maxWidth: '200px',
+    marginLeft: '10px',
+    marginRight: '10px',
+  },
+};
+
+function FilterPickerOption({
+  allowedAttributes,
+  modifiedData,
+  index,
+  onChange,
+  onClickAddFilter,
+  onRemoveFilter,
+  value,
+  showAddButton,
+  type,
+}) {
+  const filtersOptions = getFilterType(type);
+  const currentFilterName = get(modifiedData, [index, 'name'], '');
+  const currentFilterData = allowedAttributes.find(attr => attr.name === currentFilterName);
+  const options = get(currentFilterData, ['options'], null) || ['true', 'false'];
+
+  return (
+    <Wrapper borderLeft={!isEmpty(value)}>
+      <InputWrapper>
+        <CircleButton type="button" isRemoveButton onClick={() => onRemoveFilter(index)} />
+        <Select
+          onChange={e => {
+            // Change the attribute
+            onChange(e);
+            // Change the default filter so it reset to the common one which is '='
+            onChange({ target: { name: `${index}.filter`, value: '=' } });
+          }}
+          name={`${index}.name`}
+          value={currentFilterName}
+          options={allowedAttributes.map(attr => attr.name)}
+          style={styles.select}
+        />
+        <Select
+          onChange={onChange}
+          name={`${index}.filter`}
+          options={filtersOptions.map(option => (
+            <Option {...option} key={option.value} />
+          ))}
+          style={styles.selectMiddle}
+          value={get(modifiedData, [index, 'filter'], '')}
+        />
+        <Input
+          type={type}
+          name={`${index}.value`}
+          value={get(modifiedData, [index, 'value'], '')}
+          options={options}
+          onChange={onChange}
+        />
+        {showAddButton && <CircleButton type="button" onClick={onClickAddFilter} />}
+      </InputWrapper>
+    </Wrapper>
+  );
+}
+
+FilterPickerOption.defaultProps = {
+  allowedAttributes: [],
+  modifiedData: [],
+  index: -1,
+  onChange: () => {},
+  onClickAddFilter: () => {},
+  onRemoveFilter: () => {},
+  value: null,
+  type: 'string',
+};
+
+FilterPickerOption.propTypes = {
+  allowedAttributes: PropTypes.array,
+  modifiedData: PropTypes.array,
+  index: PropTypes.number,
+  onChange: PropTypes.func,
+  onClickAddFilter: PropTypes.func,
+  onRemoveFilter: PropTypes.func,
+  showAddButton: PropTypes.bool.isRequired,
+  type: PropTypes.string,
+  value: PropTypes.any,
+};
+
+export default memo(FilterPickerOption);

package/admin/src/components/FormTitle/index.js

@@ -0,0 +1,26 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+const FormTitle = ({ description, title }) => (
+  <>
+    {!!title && <FormattedMessage id={title} />}
+    {!!description && (
+      <FormattedMessage id={description}>
+        {msg => <p>{msg}</p>}
+      </FormattedMessage>
+    )}
+  </>
+);
+
+FormTitle.propTypes = {
+  description: PropTypes.string,
+  title: PropTypes.string,
+};
+
+FormTitle.defaultProps = {
+  description: null,
+  title: null,
+};
+
+export default memo(FormTitle);

package/admin/src/components/FormWrapper/index.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const FormWrapper = styled.div`
+  padding: 22px 10px 0 10px;
+  background: #ffffff;
+  border-radius: 2px;
+  box-shadow: 0 2px 4px #e3e9f3;
+  margin-bottom: 17px;
+  > div {
+    margin-right: 0;
+    margin-left: 0;
+  }
+  .row {
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+`;
+
+export default FormWrapper;

package/admin/src/components/InputJSON/components.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+  margin-bottom: 3px;
+  line-height: 18px;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'initial')};
+
+  .CodeMirror {
+    font-size: 13px !important;
+  }
+
+  > div {
+    border-radius: 3px;
+
+    > div:last-of-type {
+      min-height: 315px;
+      max-height: 635px;
+      font-weight: 500;
+      font-size: 1.3rem !important;
+    }
+  }
+
+  .colored {
+    background-color: yellow;
+    color: black !important;
+  }
+`;
+
+export default Wrapper;

package/admin/src/components/InputJSON/index.js

@@ -0,0 +1,184 @@
+/**
+ *
+ * InputJSON
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import cm from 'codemirror';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/addon/lint/lint';
+import 'codemirror/addon/lint/javascript-lint';
+import 'codemirror/addon/edit/closebrackets';
+import 'codemirror/addon/selection/mark-selection';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/theme/solarized.css';
+
+import { trimStart } from 'lodash';
+import jsonlint from './jsonlint';
+import Wrapper from './components';
+
+const WAIT = 600;
+const stringify = JSON.stringify;
+const DEFAULT_THEME = 'solarized dark';
+
+class InputJSON extends React.Component {
+  timer = null;
+
+  constructor(props) {
+    super(props);
+    this.editor = React.createRef();
+    this.state = { error: false, markedText: null };
+  }
+
+  componentDidMount() {
+    // Init codemirror component
+    this.codeMirror = cm.fromTextArea(this.editor.current, {
+      autoCloseBrackets: true,
+      lineNumbers: true,
+      matchBrackets: true,
+      mode: 'application/json',
+      readOnly: this.props.disabled,
+      smartIndent: true,
+      styleSelectedText: true,
+      tabSize: 2,
+      theme: DEFAULT_THEME,
+      fontSize: '13px',
+    });
+    this.codeMirror.on('change', this.handleChange);
+    this.codeMirror.on('blur', this.handleBlur);
+
+    this.setSize();
+    this.setInitValue();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.value !== this.props.value && !this.codeMirror.state.focused) {
+      this.setInitValue();
+    }
+  }
+
+  setInitValue = () => {
+    const { value } = this.props;
+
+    try {
+      if (value === null) return this.codeMirror.setValue('');
+
+      const nextValue = typeof value !== 'string' ? stringify(value, null, 2) : value;
+
+      return this.codeMirror.setValue(nextValue);
+    } catch (err) {
+      return this.setState({ error: true });
+    }
+  };
+
+  setSize = () => this.codeMirror.setSize('100%', 'auto');
+
+  getContentAtLine = line => this.codeMirror.getLine(line);
+
+  getEditorOption = opt => this.codeMirror.getOption(opt);
+
+  getValue = () => this.codeMirror.getValue();
+
+  markSelection = ({ message }) => {
+    let line = parseInt(message.split(':')[0].split('line ')[1], 10) - 1;
+    let content = this.getContentAtLine(line);
+
+    if (content === '{') {
+      line += 1;
+      content = this.getContentAtLine(line);
+    }
+    const chEnd = content.length;
+    const chStart = chEnd - trimStart(content, ' ').length;
+    const markedText = this.codeMirror.markText(
+      { line, ch: chStart },
+      { line, ch: chEnd },
+      { className: 'colored' }
+    );
+    this.setState({ markedText });
+  };
+
+  handleBlur = ({ target }) => {
+    const { name, onBlur } = this.props;
+
+    if (target === undefined) {
+      // codemirror catches multiple events
+      onBlur({
+        target: {
+          name,
+          type: 'json',
+          value: this.getValue(),
+        },
+      });
+    }
+  };
+
+  handleChange = (doc, change) => {
+    if (change.origin === 'setValue') {
+      return;
+    }
+
+    const { name, onChange } = this.props;
+    let value = doc.getValue();
+
+    if (value === '') {
+      value = null;
+    }
+
+    // Update the parent
+    onChange({
+      target: {
+        name,
+        value,
+        type: 'json',
+      },
+    });
+
+    // Remove higlight error
+    if (this.state.markedText) {
+      this.state.markedText.clear();
+      this.setState({ markedText: null, error: null });
+    }
+
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => this.testJSON(doc.getValue()), WAIT);
+  };
+
+  testJSON = value => {
+    try {
+      jsonlint.parse(value);
+    } catch (err) {
+      this.markSelection(err);
+    }
+  };
+
+  render() {
+    if (this.state.error) {
+      return <div>error json</div>;
+    }
+
+    return (
+      <Wrapper disabled={this.props.disabled}>
+        <textarea ref={this.editor} autoComplete="off" id={this.props.name} defaultValue="" />
+      </Wrapper>
+    );
+  }
+}
+
+InputJSON.defaultProps = {
+  disabled: false,
+  onBlur: () => {},
+  onChange: () => {},
+  value: null,
+};
+
+InputJSON.propTypes = {
+  disabled: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  value: PropTypes.any,
+};
+
+export default InputJSON;