FEATURE: Search for items from a range of attribute values (see Hypertopic#573 ).

Co-Authored-By: Thibault P. <[email protected]>
Co-Authored-By: MaximeMZ <[email protected]>

Author: 3 people

public/config.yml

@@ -9,3 +9,6 @@ services:
 portfolio:
   vitraux:
     visitMap: true
+  dessins:
+    slider:
+     - année

src/Selection.js

@@ -125,6 +125,22 @@ export default class Selection {
     }
   }
 
+  addTopicArray = (arrayAttributes) => {
+    const data = this.selectionJSON.data;
+    try {
+      for (let i = 0; i < data.length; i++) {
+        if (data[i].selection[0].includes(':')) {
+          if (data[i].selection[0].split(':')[0] === arrayAttributes[0].split(':')[0]) {
+            data.splice(i, 1);
+          }
+        }
+      }
+      this.selectionJSON.data.push({type: 'union', selection: arrayAttributes, exclusion: []});
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
   /**
    * Remove topic from selection.
    *

src/components/portfolioPage/AttributeSearch.jsx

@@ -2,39 +2,135 @@ import React, { Component } from 'react';
 import { Items } from '../../model.js';
 import Selection from '../../Selection.js';
 import { withRouter } from 'react-router-dom';
+import Slider from 'rc-slider';
+import 'rc-slider/assets/index.css';
+import conf from '../../config.js';
 
 class AttributeSearch extends Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
     this.state = {
       selectedValue: '',
+      slider: [],
+      value: [2010, 2021],
+      min: 2010,
+      max: 2021,
     };
+    conf.then(settings => {
+      if (settings.portfolio && settings.portfolio[settings.user])
+        this.setState({
+          slider: settings.portfolio[settings.user].slider || false,
+        });
+    }).then(valeur => {
+      if (this.state.slider.includes(this.props.name)) {
+
+        let dates = new Set();
+        this._getValues().forEach(value => {
+          dates.add((parseInt(value.substring(0, 4)) || 0));
+        });
+        this.setState({min: Math.min(...dates)});
+        var today = new Date();
+        this.setState({max: today.getFullYear()});
+        this.setState({value: [this.state.min, this.state.max]});
+      }
+    }
+    );
   }
+
   render() {
     let attributeValues = this._getValues();
     let options = this._getOptions(attributeValues);
     let handleChange = (e) => {
       const selection = Selection.fromURI();
-      if (e.target.value !== '') {
-        if (this.state.selectedValue !== '') {
+      console.log(selection.selectionJSON);
+      if (!this.state.slider.includes(this.props.name)) {
+        if (e.target.value !== '') {
+          if (this.state.selectedValue !== '') {
+            selection.removeTopic(this.state.selectedValue);
+          }
+          selection.addTopic(e.target.value);
+        } else {
           selection.removeTopic(this.state.selectedValue);
         }
-        selection.addTopic(e.target.value);
+        console.log(selection.toURI());
+        this.props.history.push(selection.toURI());
+        this.setState({selectedValue: e.target.value});
       } else {
-        selection.removeTopic(this.state.selectedValue);
+        console.log(selection.toURI());
+
       }
-      console.log(selection.toURI());
-      this.props.history.push(selection.toURI());
-      this.setState({selectedValue: e.target.value});
     };
+
     return (
       <div className={'AttributesList ' + this.props.name}>
         {this.props.name}
-        <select id={this.props.name} onChange={handleChange} className="selectValue">
-          <option value="" />
-          {options}
-        </select>
+        {(this.state.slider.includes(this.props.name))
+          ? ' : ' + this.state.value[0] + ' - ' + this.state.value[1]
+          : null
+        }
+        {(this.state.slider.includes(this.props.name)
+          ? <div>
+            <div>{}</div>
+            <div>{}</div>
+            <Slider
+              range
+              min={this.state.min}
+              max={this.state.max}
+              value={this.state.value}
+              count={1}
+              onChange={value => {
+                this.setState(
+                  {
+                    value
+                  },
+                );
+                let todelete = [];
+                const selection = Selection.fromURI();
+                selection.selectionJSON.data.forEach((element) => {
+                  if (element.selection[0] && element.selection[0].includes(this.props.name)) {
+                    todelete.push(element.selection[0]);
+                  }
+                  if (element.exclusion[0] && element.exclusion[0].includes(this.props.name)) {
+                    todelete.push(element.exclusion[0]);
+                  }
+                });
+                for (const item of todelete) {
+                  selection.removeTopic(item);
+                }
+                let values = this._getValues();
+                let valuesParsed = [];
+                let realValues = [];
+
+                for (let value of values) {
+                  valuesParsed.push(parseInt(value));
+                }
+                for (let i = this.state.value[0]; i <= this.state.value[1]; i++) {
+                  if (valuesParsed.includes(i)) {
+                    realValues.push(this.props.name + ' : ' + valuesParsed[valuesParsed.indexOf(i)]);
+                  }
+                }
+                selection.addTopicArray(realValues);
+                this.props.history.push(selection.toURI());
+              }}
+              railStyle={{
+                height: 4,
+              }}
+              handleStyle={{
+                height: 10,
+                width: 10,
+                marginLeft: -5,
+                marginTop: -3,
+                backgroundColor: 'blue',
+                border: 0
+              }}
+            />
+          </div>
+          : <select id={this.props.name} onChange={handleChange} className="selectValue">
+            <option value="">Choisir</option>
+            {options}
+          </select>)
+        }
       </div>
     );
   }