FEATURE: Consult attributes whilst doing a search (see #572).

Co-authored-by: Callista Spiteri <spitericallista@gmail.com>
Co-authored-by: Maxime Macrez <maxime.macrez@utt.fr>

Author: 3 people

src/components/portfolioPage/AttributeSearch.jsx

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import { Items } from '../../model.js';
+import Selection from '../../Selection.js';
+import { withRouter } from 'react-router-dom';
+
+class AttributeSearch extends Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.state = {
+      selectedValue: '',
+    };
+  }
+  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 !== '') {
+          selection.removeTopic(this.state.selectedValue);
+        }
+        selection.addTopic(e.target.value);
+      } else {
+        selection.removeTopic(this.state.selectedValue);
+      }
+      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="">Choisir</option>
+          {options}
+        </select>
+      </div>
+    );
+  }
+
+  _getValues() {
+    let attributesValues = new Items(this.props.items)
+      .getAttributeValues(this.props.name);
+    attributesValues = new Set(attributesValues);
+    attributesValues = Array.from(attributesValues);
+    return attributesValues;
+  }
+
+  _getOptions(attributeValues) {
+    return attributeValues.map(value => {
+      let optVal = this.props.name + ' : ' + value;
+      return <option key={optVal} value={optVal}>{value}</option>;
+    });
+  }
+
+  handleChange(e) {
+    e.preventDefault();
+    console.log(this.props.query.toURI());
+  }
+
+}
+
+export default withRouter(AttributeSearch);

src/components/portfolioPage/Portfolio.jsx

@@ -5,6 +5,7 @@ import queryString from 'query-string';
 import Hypertopic from 'hypertopic';
 import conf from '../../config.js';
 import Viewpoint from './Viewpoint.jsx';
+import AttributeSearch from './AttributeSearch.jsx';
 import Corpora from './Corpora.jsx';
 import Header from '../Header.jsx';
 import Status from './Status.jsx';
@@ -20,6 +21,7 @@ class Portfolio extends Component {
     super();
     this.state = {
       viewpoints: [],
+      attributes: [],
       corpora: [],
       items: [],
       selectedItems: [],
@@ -42,6 +44,7 @@ class Portfolio extends Component {
       .map(([key, value]) => key.concat(' : ', value))
       .map(x => ({[x]: {name: x}}));
     let candidates = this.state.viewpoints.concat(attributes);
+    let attributesSearch = this._getAttributes();
     const urlParams = new URLSearchParams(window.location.search);
     const selectionJSON = JSON.parse(urlParams.get('t'));
     // Normal items have numbers in their names, but building maps don't,
@@ -70,6 +73,12 @@ class Portfolio extends Component {
         <div className="container-fluid">
           <div className="App-content row">
             <div className="col-md-4 p-4 d-none d-sm-block">
+              <div className="AttributesSearch">
+                <h2 className="h4 font-weight-bold text-center"><Trans>Attributs</Trans></h2>
+                <div className="p-3">
+                  {attributesSearch}
+                </div>
+              </div>
               <div className="Description">
                 <h2 className="h4 font-weight-bold text-center"><Trans>Points de vue</Trans></h2>
                 <div className="p-3">
@@ -252,6 +261,12 @@ class Portfolio extends Component {
     );
   }
 
+  _getAttributes() {
+    let attributesKeys = new Items(this.state.items)
+      .getAttributeKeys();
+    return attributesKeys.map(key => <AttributeSearch key={key} name={key} items={this.state.items} query={this.query} history={this.history} />);
+  }
+
   _getCorpora() {
     let ids = this.state.corpora.map(c => c.id);
     return (

src/styles/App.css

@@ -48,11 +48,12 @@ h1 a, h1 a:hover {
   min-height: 100vh;
 }
 
-.Subject, .Description {
+.Subject, .Description, .AttributesSearch {
   background: #fff;
+  margin-bottom: 2rem;
 }
 
-.Subject h2, .Description h2 {
+.Subject h2, .Description h2, .AttributesSearch h2 {
   color: ivory;
   margin: 0;
   padding: .5rem;
@@ -62,7 +63,7 @@ h1 a, h1 a:hover {
   background-color: dimgrey;
 }
 
-.Description h2 {
+.Description h2, .AttributesSearch h2 {
   background-color: #8b0000;
 }
 
@@ -457,6 +458,12 @@ ul.Outliner,
   padding: 20px 30px 20px 30px;
 }
 
-button {
-  margin-top: 2%;
+.selectValue {
+  width: 18em;
+  float: right;
+}
+
+.AttributesList {
+  flex-direction: column;
+  text-align: left;
 }