@plusscommunities/pluss-core-web 1.7.3-beta.0 → 1.7.3-beta.1

package/src/components/ExportCsvPopup.js

@@ -0,0 +1,222 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import moment from 'moment';
+import FontAwesome from 'react-fontawesome';
+import { CSVLink } from 'react-csv';
+import { Popup } from './Popup';
+import { CheckBox } from './CheckBox';
+import { GenericInput } from './GenericInput';
+import { DatePicker } from './DatePicker';
+import { Text } from './Text';
+
+class ExportCsvPopup extends Component {
+  constructor(props) {
+    super(props);
+
+    const state = {
+      columns: props.columns,
+      selectedHeaders: props.columns.filter((c) => c.key && c.selected),
+      selectedSource: [],
+      saving: false,
+    };
+
+    if (props.timestampFilter) {
+      state.filterDateStart = props.timestampFilter.startDate;
+      state.filterDateEnd = props.timestampFilter.endDate;
+    }
+
+    this.state = state;
+  }
+
+  canSave = () => {
+    return _.some(this.state.columns, (c) => c.selected);
+  };
+
+  onConfirm = () => {
+    return this.canSave();
+  };
+
+  onClose = () => {
+    if (this.props.onClose) this.props.onClose();
+  };
+
+  onToggleColumn = (key) => {
+    const columns = _.cloneDeep(this.state.columns);
+    const column = columns.find((c) => c.key === key);
+    if (column) {
+      column.selected = !column.selected;
+      if (!column.key) columns.map((c) => (c.selected = column.selected)); // Toggle all
+      const selectedHeaders = columns.filter((c) => c.key && c.selected);
+      this.setState({ columns, selectedHeaders });
+    }
+  };
+
+  onToggleStartDateFilter = () => {
+    const { filterDateStartVisible } = this.state;
+    if (filterDateStartVisible) {
+      setTimeout(() => this.setState({ filterDateStartVisible: false }), 200);
+    } else {
+      this.setState({ filterDateStartVisible: true });
+    }
+  };
+
+  onToggleEndDateFilter = () => {
+    const { filterDateEndVisible } = this.state;
+    if (filterDateEndVisible) {
+      setTimeout(() => this.setState({ filterDateEndVisible: false }), 200);
+    } else {
+      this.setState({ filterDateEndVisible: true });
+    }
+  };
+
+  onDateFilterStartChanged = (date) => {
+    const { filterDateEnd } = this.state;
+    const start = moment(date);
+    if (start.isSameOrBefore(filterDateEnd)) {
+      this.setState({ filterDateStart: start.startOf('day'), filterDateStartVisible: false });
+    }
+  };
+
+  onDateFilterEndChanged = (date) => {
+    const { filterDateStart } = this.state;
+    const end = moment(date);
+    if (end.isSameOrAfter(filterDateStart)) {
+      this.setState({ filterDateEnd: end.endOf('day'), filterDateEndVisible: false });
+    }
+  };
+
+  getSelectedSource = () => {
+    const { source } = this.props;
+    const { selectedHeaders } = this.state;
+
+    let result = source;
+
+    // apply timestamp filter
+    if (this.props.timestampFilter) {
+      const { filterDateStart, filterDateEnd } = this.state;
+      const { filterKey } = this.props.timestampFilter;
+      const minDate = filterDateStart.valueOf();
+      const maxDate = filterDateEnd.valueOf();
+      result = _.filter(source, (item) => {
+        return item[filterKey] >= minDate && item[filterKey] <= maxDate;
+      });
+    }
+
+    // map result to columns
+    const selectedheaderKeys = selectedHeaders.map((h) => h.key);
+    return result.map((i) => _.pick(i, selectedheaderKeys));
+  };
+
+  renderTimestampFilter = () => {
+    if (!this.props.timestampFilter) {
+      return null;
+    }
+    return (
+      <div>
+        <GenericInput
+          id="dateStart"
+          label="Start Date"
+          alwaysShowLabel
+          placeholder={'Select start date'}
+          value={this.state.filterDateStart.format('DD/MM/YYYY')}
+          onClick={this.onToggleStartDateFilter}
+          readOnly
+        />
+        {this.state.filterDateStartVisible ? (
+          <DatePicker hideTop selectedDate={this.state.filterDateStart} selectDate={this.onDateFilterStartChanged} />
+        ) : null}
+        <GenericInput
+          id="dateEnd"
+          label="End Date"
+          alwaysShowLabel
+          placeholder={'Select end date'}
+          value={this.state.filterDateEnd.format('DD/MM/YYYY')}
+          onClick={this.onToggleEndDateFilter}
+          readOnly
+        />
+        {this.state.filterDateEndVisible ? (
+          <DatePicker hideTop selectedDate={this.state.filterDateEnd} selectDate={this.onDateFilterEndChanged} />
+        ) : null}
+      </div>
+    );
+  };
+
+  renderContent = () => {
+    const { saving, columns } = this.state;
+
+    if (saving) {
+      return (
+        <div className="marginTop-32" style={{ maxWidth: 500, textAlign: 'center' }}>
+          <FontAwesome style={{ fontSize: 30 }} name="spinner fa-pulse fa-fw" />
+        </div>
+      );
+    }
+
+    if (!columns) return null;
+    return (
+      <div className="marginTop-16">
+        {columns.map((c) => {
+          return (
+            <CheckBox
+              key={c.key}
+              label={c.label}
+              isActive={c.selected}
+              onChange={() => this.onToggleColumn(c.key)}
+              style={{ marginBottom: 8 }}
+            />
+          );
+        })}
+      </div>
+    );
+  };
+
+  render() {
+    const { selectedHeaders } = this.state;
+    const { filename } = this.props;
+
+    const buttons = [
+      {
+        type: 'primary',
+        isActive: this.canSave(),
+        text: (
+          <CSVLink
+            headers={selectedHeaders}
+            data={this.getSelectedSource()}
+            style={{ textDecoration: 'none', color: '#fff' }}
+            filename={filename || 'export.csv'}
+            onClick={this.onConfirm}
+          >
+            Confirm
+          </CSVLink>
+        ),
+      },
+      {
+        type: 'tertiary',
+        onClick: this.onClose,
+        isActive: true,
+        text: 'Close',
+      },
+    ];
+
+    return (
+      <Popup
+        title="Confirm Export"
+        boxClasses="flex flex-column"
+        innerClasses="flex flex-column fillSpace flex-1"
+        minWidth={500}
+        maxWidth={500}
+        minHeight={'50vh'}
+        maxHeight={'100vh'}
+        hasPadding
+        onClose={this.onClose}
+        buttons={buttons}
+      >
+        {this.renderTimestampFilter()}
+        <Text type="bodyLarge">Select which columns to include in the export</Text>
+        {this.renderContent()}
+      </Popup>
+    );
+  }
+}
+
+export { ExportCsvPopup };

package/src/components/FileInput.js

@@ -0,0 +1,389 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import _ from "lodash";
+import Dropzone from "react-dropzone";
+import FontAwesome from "react-fontawesome";
+import { Button } from "./Button";
+import { fileActions } from "../apis";
+import { getFileName } from "../helper";
+
+const DEFAULT_INPUT = {
+  uploadingFile: false,
+  value: "",
+};
+
+class FileInputComponent extends Component {
+  state = {
+    inputs: [
+      {
+        uploadingFile: false,
+        value: "",
+      },
+    ],
+  };
+
+  componentDidMount() {
+    setTimeout(() => {
+      if (this.props.hasDefault) {
+        this.setState({
+          inputs: [
+            {
+              uploadingFile: false,
+              value: this.props.hasDefault,
+            },
+          ],
+        });
+        if (this.props.refreshCallback) {
+          this.props.refreshCallback(this.props.hasDefault);
+        }
+      }
+    }, 100);
+  }
+
+  setValue(val) {
+    if (typeof val === "string") {
+      this.setState({
+        inputs: [
+          {
+            uploadingImage: false,
+            value: val,
+          },
+        ],
+      });
+    } else {
+      const inputs = [];
+      _.forEach(val, (str) => {
+        inputs.push({
+          uploadingImage: false,
+          value: str,
+        });
+      });
+      if (!this.props.limit || this.props.limit > inputs.length)
+        inputs.push(DEFAULT_INPUT);
+      this.setState({ inputs });
+    }
+  }
+
+  getClassNames(input, inputsLength) {
+    let classes = "clearfix imageInput";
+    if (input.uploadingFile) {
+      classes += " imageInput-uploading";
+    } else if (!_.isEmpty(input.value) && !this.props.onlyAllowUpload) {
+      classes += " imageInput-hasImage";
+    }
+    if (inputsLength === 1) {
+      classes += " imageInput-only";
+    }
+    if (
+      this.props.style &&
+      this.props.style.height &&
+      this.props.style.height < 150
+    ) {
+      classes += " imageInput-condensed";
+    }
+    return classes;
+  }
+
+  getErrorState() {
+    if (!_.isUndefined(this.props.showError) && this.props.showError()) {
+      return " imageInput_upload--error";
+    }
+    return "";
+  }
+
+  getAccept = () => {
+    if (typeof this.props.accept === "object") {
+      return this.props.accept;
+    }
+    if (typeof this.props.accept === "string") {
+      const accept = {
+        [this.props.accept]: [`.${_.last(this.props.accept.split("/"))}`],
+      };
+      return accept;
+    }
+    return null;
+  };
+
+  checkRefreshCallback = (inputs) => {
+    if (_.isUndefined(this.props.refreshCallback)) {
+      return;
+    }
+    if (!this.props.multiple) {
+      const file = _.find(inputs, (i) => {
+        return !i.uploadingFile && !_.isEmpty(i.value);
+      });
+      this.props.refreshCallback(file ? file.value : undefined);
+    } else {
+      const files = _.filter(inputs, (i) => {
+        return !i.uploadingFile && !_.isEmpty(i.value);
+      }).map((i) => {
+        return i.value;
+      });
+      this.props.refreshCallback(files);
+    }
+  };
+
+  checkSetDisplayValue(input, value) {
+    input.value = value;
+    input.uploadingFile = false;
+    const newInputs = _.clone(this.state.inputs);
+    this.setState({ inputs: newInputs });
+    this.checkRefreshCallback(newInputs);
+  }
+
+  onDrop = (files) => {
+    if (this.props.multiple) {
+      const newInputs = _.clone(this.state.inputs);
+      files.forEach((file) => {
+        if (this.props.limit && newInputs.length === this.props.limit) {
+          // hit limit - replace last input if it's empty
+          if (_.isEmpty(newInputs[newInputs.length - 1].value)) {
+            const newInput = newInputs[newInputs.length - 1];
+            this.handleFile(newInput, file);
+          }
+        } else {
+          const newInput = {
+            ...DEFAULT_INPUT,
+          };
+          newInputs.splice(newInputs.length - 1, 0, newInput);
+          this.handleFile(newInput, file);
+        }
+      });
+      this.setState({
+        inputs: newInputs,
+      });
+      this.checkRefreshCallback(newInputs);
+    } else {
+      this.handleFile(this.state.inputs[0], files[0]);
+    }
+  };
+
+  handleFile = async (input, file) => {
+    if (!file || input.uploadingFile) {
+      return;
+    }
+    input.uploadingFile = true;
+    const newInputs = _.clone(this.state.inputs);
+    this.setState({
+      inputs: newInputs,
+    });
+    this.checkRefreshCallback(newInputs);
+    if (this.props.handleFile) {
+      await this.props.handleFile(file, newInputs);
+      this.checkSetDisplayValue(input, "");
+    } else {
+      try {
+        let uploadFile = file;
+        const url = await fileActions.uploadMediaAsync(
+          uploadFile,
+          uploadFile.name,
+        );
+        this.checkSetDisplayValue(input, url);
+      } catch (error) {
+        console.log("handleFile error", error);
+        this.setState({ uploadingFile: false });
+      }
+    }
+  };
+
+  removeFile(input) {
+    const newState = {};
+
+    input.value = "";
+
+    const newInputs = _.clone(this.state.inputs);
+
+    if (newInputs.length > 1) {
+      newInputs.splice(newInputs.indexOf(input), 1);
+      if (
+        newInputs.length === this.props.limit - 1 &&
+        !_.isEmpty(newInputs[newInputs.length - 1].value)
+      ) {
+        // was full
+        newInputs.push(DEFAULT_INPUT);
+      }
+    }
+
+    newState.inputs = newInputs;
+
+    this.setState(newState);
+    // for single item
+    if (!_.isUndefined(this.props.refreshCallback)) {
+      this.props.refreshCallback();
+    }
+  }
+
+  renderInput(input, index, inputsLength) {
+    const renderContent = () => {
+      if (this.props.onlyAllowUpload) {
+        return null;
+      }
+      if (!_.isEmpty(input.value) && !input.uploadingFile) {
+        return (
+          <div className="imageInput_simpleContainer">
+            <div
+              className="imageInput_image"
+              style={{
+                ...this.props.style,
+                height:
+                  this.props.style && this.props.style.height
+                    ? this.props.style.height - 62
+                    : 80,
+              }}
+            >
+              <img
+                src="https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg"
+                className="imageInput_icon"
+                alt="file"
+              />
+              <p className="imageInput_text">{getFileName(input.value)}</p>
+            </div>
+            <Dropzone
+              accept={this.getAccept()}
+              onDrop={(files) => this.onDrop(files, true)}
+            >
+              {(state) => {
+                const { getRootProps, getInputProps } = state;
+                return (
+                  <div style={{ padding: 10 }} {...getRootProps()}>
+                    <input {...getInputProps()} />
+                    <Button
+                      buttonType="secondary"
+                      className="imageInput_button"
+                      disabled
+                    >
+                      Change file
+                    </Button>
+                  </div>
+                );
+              }}
+            </Dropzone>
+          </div>
+        );
+      }
+      return (
+        <div className="imageInput_image" style={{ ...this.props.style }}></div>
+      );
+    };
+
+    const renderRemove = () => {
+      return (
+        !this.props.disableRemove &&
+        !this.props.disabled &&
+        (this.props.simpleStyle ? (
+          <FontAwesome
+            name="remove"
+            className="imageInput_removeIcon"
+            onClick={this.removeFile.bind(this, input)}
+          />
+        ) : (
+          <p
+            className="imageInput_remove"
+            onClick={this.removeFile.bind(this, input)}
+          >
+            remove
+          </p>
+        ))
+      );
+    };
+
+    const renderDownload = () => {
+      if (this.props.noDownload) return null;
+      return (
+        <a href={input.value} target="_blank" className="imageInput_download">
+          <img
+            alt=""
+            className="dlicon"
+            src="https://pluss60-dev-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:efbab8db-136a-446e-b14a-d00af0067841/public/025971e94153af280049fdf3e3/downloadicon.png"
+          ></img>
+        </a>
+      );
+    };
+
+    return (
+      <div
+        key={index}
+        className={this.getClassNames(input, inputsLength)}
+        style={{ ...this.props.style }}
+      >
+        <Dropzone accept={this.getAccept()} onDrop={this.onDrop}>
+          {(state) => {
+            const { getRootProps, getInputProps, isDragActive } = state;
+            return (
+              <div
+                className={`imageInput_upload ${this.getErrorState()}`}
+                style={{ ...this.props.style }}
+                {...getRootProps()}
+              >
+                <input {...getInputProps()} />
+                <div
+                  className={`${isDragActive ? "imageInput_dropZoneActive" : ""}`}
+                >
+                  {!this.props.simpleStyle && (
+                    <img
+                      src="https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg"
+                      className="imageInput_icon"
+                      alt="file"
+                    />
+                  )}
+                  <p className="imageInput_helpText">
+                    {isDragActive ? `Drop file here` : `Drag and drop file or`}
+                  </p>
+                  {!isDragActive && (
+                    <Button
+                      buttonType="secondary"
+                      className="imageInput_button"
+                      disabled
+                    >
+                      {this.props.multiple ? `Upload files` : `Upload a file`}
+                    </Button>
+                  )}
+                </div>
+              </div>
+            );
+          }}
+        </Dropzone>
+        <div className="imageInput_uploading" style={{ ...this.props.style }}>
+          <FontAwesome
+            className="spinner imageInput_spinner"
+            name="spinner fa-pulse fa-fw"
+          />
+        </div>
+        {renderContent()}
+        {renderRemove()}
+        {renderDownload()}
+      </div>
+    );
+  }
+
+  renderUploadFiles(inputs) {
+    return (
+      <div
+        className={`imageInputContainer clearfix ${inputs.length === 1 ? "imageInputContainer-noPadding" : ""} ${this.props.simpleStyle ? "imageInputContainer-simple" : ""
+          }`}
+        style={{ ...this.props.style }}
+      >
+        {inputs.map((input, index) => {
+          return this.renderInput(input, index, inputs.length);
+        })}
+      </div>
+    );
+  }
+
+  renderContent() {
+    return this.renderUploadFiles(this.state.inputs);
+  }
+
+  render() {
+    return <div style={this.props.containerStyle}>{this.renderContent()}</div>;
+  }
+}
+
+const mapStateToProps = () => {
+  return {};
+};
+
+const FileInput = connect(mapStateToProps, {}, null, { forwardRef: true })(
+  FileInputComponent,
+);
+export { FileInput };