feat: add file when the mimeType is not geoJSON

Author: eran-pinhas

src/common/ComplexInputs.js

@@ -0,0 +1,36 @@
+import {
+ UploadNonLayerFile,
+ GetLayerUrlFromId
+} from "../components/Layers/RemoteStorage";
+
+export class Input {
+ constructor(mimeType) {
+ this.mimeType = mimeType;
+ }
+
+ getData() {
+ throw new Error("Non Implemented");
+ }
+}
+
+export class LayerInput extends Input {
+ constructor(mimeType, layerId) {
+ super(mimeType);
+ this.layerId = layerId;
+ }
+
+ getData() {
+ return GetLayerUrlFromId(this.layerId);
+ }
+}
+
+export class FileInput extends Input {
+ constructor(mimeType, file) {
+ super(mimeType);
+ this.file = file;
+ }
+
+ getData() {
+ return UploadNonLayerFile(this.file).then(GetLayerUrlFromId);
+ }
+}

src/common/FileFormats.js

@@ -0,0 +1,17 @@
+export default {
+ "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": {
+ ext: ".xlsx",
+ displayName: "Excel File",
+ isLayer: false
+ },
+ "application/json": {
+ ext: ".json",
+ displayName: "Map Layer",
+ isLayer: true
+ },
+ "application/vnd.geo+json": {
+ ext: ".json",
+ displayName: "Map Layer",
+ isLayer: true
+ }
+};

src/common/utils/wpsjs.js

@@ -113,35 +113,37 @@ export function ExecuteProcess(
  });
 
  // Array of arrays of WPS inputs
+ // Denote: Some of data is promises, some is literal
  const inputsByIdentifier = inputs.map(input =>
  input.values.map(value => {
  if (input.type === InputTypes.COMPLEX) {
- const format = input.formats.filter(f =>
- layerMimeTypeProdicate(f.mimeType)
- )[0];
- if (!format)
- throw new Error(`No valid input mimetype for input: ${input.id}`);
- return GenerateComplexInput(
- input.id,
- layerFromIdFetcher(value),
- format.mimeType,
- complexAsReference
+ return Promise.resolve(value.getData()).then(data =>
+ GenerateComplexInput(
+ input.id,
+ data,
+ value.mimeType,
+ complexAsReference
+ )
  );
  } else return GenerateLiteralInput(input.id, value);
  })
  );
 
- const flatInputs = Array.prototype.concat.apply([], inputsByIdentifier);
-
- wpsInstance.execute(
- resolve,
- identifier,
- "document",
- "sync",
- false,
- flatInputs,
- outputs
+ const flatInputsPromises = Array.prototype.concat.apply(
+ [],
+ inputsByIdentifier
  );
+ Promise.all(flatInputsPromises).then(flatInputs => {
+ wpsInstance.execute(
+ resolve,
+ identifier,
+ "document",
+ "sync",
+ false,
+ flatInputs,
+ outputs
+ );
+ });
  }).then(response => {
  return resolveResponse(response, response => response.executeResponse);
  });

src/components/LayerInput/index.js

@@ -2,37 +2,40 @@ import React from "react";
 import PropTypes from "prop-types";
 import Select from "react-select";
 
-class LayerInput extends React.Component {
+class LayerSelector extends React.Component {
  constructor(props) {
  super(props);
 
  this.handleSelect = this.handleSelect.bind(this);
  }
 
  handleSelect({ value }) {
- this.props.onSelect(value, this.props.id);
+ this.props.onSelect(value);
  }
 
  render() {
  const { layers, className } = this.props;
- const layerId = this.props.value;
+ const layerInput = this.props.value;
  const selectableLayers = layers.map(layer => ({
  value: layer.id,
  label: layer.displayName
  }));
+
+ const selectedLayer = layerInput ? selectableLayers.filter(l => l.value === layerInput.layerId) : null
+
  return (
  <Select
  className={className}
- value={selectableLayers.filter(l => l.value === layerId)}
+ value={selectedLayer}
  onChange={this.handleSelect}
  options={selectableLayers}
  />
  );
  }
 }
 
-LayerInput.propTypes = {
+LayerSelector.propTypes = {
  onSelect: PropTypes.func
 };
 
-export default LayerInput;
+export default LayerSelector;

src/components/LayerInput/LayerInput.js renamed to src/components/LayerSelector/LayerSelector.js

@@ -0,0 +1 @@
+export { default } from './LayerSelector';

src/components/LayerSelector/index.js

@@ -15,6 +15,18 @@ export function UploadFromUrl(url) {
  .then(res => res.data.id);
 }
 
+export function UploadNonLayerFile(file) {
+ const formData = new FormData();
+ formData.append("file", file);
+ return axios
+ .post(`${layerServerPath}/api/uploadNonLayer`, formData, {
+ headers: {
+ "Content-Type": "multipart/form-data"
+ }
+ })
+ .then(res => res.data.id);
+}
+
 export function UploadFromFiles(element) {
  const formData = new FormData();
 
@@ -28,6 +40,5 @@ export function UploadFromFiles(element) {
  "Content-Type": "multipart/form-data"
  }
  })
- .then(res => res.data.ids)
- ;
+ .then(res => res.data.ids);
 }

src/components/Layers/RemoteStorage.js

@@ -0,0 +1,83 @@
+import React from "react";
+import MimetypeDropdown from "./MimetypeDropdown";
+import LayerSelector from "../LayerSelector";
+import FileFormats from "../../common/FileFormats";
+import { LayerInput, FileInput } from "../../common/ComplexInputs";
+
+export default class ComplexInput extends React.Component {
+ setFormat = ({ mimeType }) => {
+ if (mimeType !== this.state.currentMimeType) {
+ this.changeValue(null);
+ }
+ this.setState({ currentMimeType: mimeType });
+ };
+
+ state = {
+ currentMimeType: null
+ };
+
+ // in case the input has changed (for example: other process loaded) we will take the new input first format.
+ // will set the first format in initializing too.
+ static getDerivedStateFromProps(props, state) {
+ const { currentMimeType } = state;
+ const format = props.formInput.formats.filter(
+ ({ mimeType }) => mimeType === currentMimeType
+ )[0];
+
+ if (!format) {
+ return { currentMimeType: props.formInput.formats[0].mimeType };
+ } else {
+ return null;
+ }
+ }
+
+ changeValue(value) {
+ this.props.onChange(value ? [value] : [], this.props.index);
+ }
+
+ onLayerChange = layerId => {
+ this.changeValue(new LayerInput(this.state.currentMimeType, layerId));
+ };
+ onFileChange = e => {
+ this.changeValue(
+ new FileInput(this.state.currentMimeType, e.target.files[0])
+ );
+ };
+
+ onInputFileRef = element => {
+ this.inputFileRef = element;
+ };
+
+ render() {
+ const { layers, index, formInput } = this.props;
+ const { currentMimeType } = this.state;
+ const isLayer =
+ FileFormats.hasOwnProperty(currentMimeType) &&
+ FileFormats[currentMimeType].isLayer;
+ return (
+ <div>
+ <MimetypeDropdown
+ index={index}
+ onChange={this.setFormat}
+ options={formInput.formats}
+ />
+ {isLayer ? (
+ <LayerSelector
+ className="layer-select"
+ layers={layers}
+ key={index}
+ value={formInput.values[0]}
+ onSelect={this.onLayerChange}
+ />
+ ) : (
+ <input
+ onChange={this.onFileChange}
+ ref={this.onInputFileRef}
+ type="file"
+ name="file"
+ />
+ )}
+ </div>
+ );
+ }
+}

src/components/ProcessForm/ComplexInput.js

@@ -0,0 +1,73 @@
+.mimetype-menu .arrow {
+ width: 0;
+ height: 0;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-top: 4px solid #000;
+ display: inline-block;
+}
+
+.mimetype-menu.active .arrow {
+ border-bottom: 5px solid black;
+ border-top: none;
+}
+
+.mimetype-menu {
+ outline: none;
+ display: inline-block;
+ position: relative;
+}
+
+.mimetype-menu .mimetype-menu-button {
+ position: relative;
+ display: inline-block;
+ border: 1px solid rgba(0, 0, 0, 0);
+ border-radius: 5px;
+ padding: 0 5px;
+}
+.mimetype-menu.active .mimetype-menu-button {
+ position: relative;
+ display: inline-block;
+ border: 1px solid rgba(0, 0, 0, 0);
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+ padding: 0 5px;
+ cursor: pointer;
+}
+
+.mimetype-menu .mimetype-menu-button:hover {
+ box-shadow: #bbb 0px 2px 2px;
+ border: 1px solid #ccc;
+}
+
+.mimetype-menu.active .mimetype-menu-button {
+ box-shadow: initial !important;
+ border: 1px solid #ccc;
+ border-bottom: 1px solid white;
+ z-index: 11;
+}
+
+.mimetype-menu .mimetype-menu-content {
+ display: none;
+ position: absolute;
+ z-index: 10;
+ background-color: white;
+ padding: 3px;
+ border: 1px solid #ddd;
+ border-radius: 6px;
+ border-top-left-radius: 0;
+ width: 170px;
+ top: calc(100% - 1px);
+}
+.mimetype-menu.active .mimetype-menu-content {
+ display: block;
+}
+
+
+.mimetype-menu .mimetype-menu-item{
+ cursor: pointer;
+ transition: background-color 0.25s ease;
+}
+.mimetype-menu .mimetype-menu-item:hover{
+ background-color: #e0e0e0;
+}