Merge branch 'feature/10261-download-page-datatype-filter' into 'modi…

…s_master' #75 - GUI - Download page - added datatype filter See merge request datalake/docker_datalake!80
vincentnam · Jul 12, 2021 · 7fa8302 · 7fa8302
2 parents 2bfa841 + 7221134
commit 7fa8302
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 38 deletions.
diff --git a/service_zone/backend/flask/neocampus/services/mongo.py b/service_zone/backend/flask/neocampus/services/mongo.py
@@ -35,9 +35,8 @@ def get_metadata(db_name, params):
     dict_query = {"$and": []}
 
     if(params['filetype'] != ""):
-        filetype_query = {"content_type": {'$regex': params['filetype'], '$options': 'i'}}
-        for item in [filetype_query]: 
-            dict_query['$and'].append(item) 
+        filetype_query = {"content_type": {'$in': params['filetype']}} 
+        dict_query['$and'].append(filetype_query)
 
     if(params['beginDate'] != "" and params['endDate'] != ""):
         dates_query = {'creation_date': {'$gte': start_date, '$lt': end_date}}

diff --git a/service_zone/frontend/datalake-react-front/.env.sample b/service_zone/frontend/datalake-react-front/.env.sample
@@ -0,0 +1 @@
+REACT_APP_SERVER_NAME="http://"
diff --git a/service_zone/frontend/datalake-react-front/README.md b/service_zone/frontend/datalake-react-front/README.md
@@ -2,6 +2,22 @@
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
+# Environment variables
+
+You can also create temporary environment variables using the terminal or by creating necessary file.
+
+The 1st method consists of launching these commands below, depending of your Operating System.
+
+For Windows:
+
+Command : set "REACT_APP_SERVER_NAME=server_name" (replace server_name by the real server name).
+
+For Linux:
+
+Command : set "REACT_APP_SERVER_NAME=server_name" (replace server_name by the real server name).
+
+The 2nd method consists of creating .env at the root of React project on the same model as .env.sample . You will have to reboot React project if its container is launched yet.
+
 ## Available Scripts
 
 In the project directory, you can run:

diff --git a/service_zone/frontend/datalake-react-front/src/api/api.js b/service_zone/frontend/datalake-react-front/src/api/api.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 export default axios.create({
-    baseURL: `http://neocampus-datalake-mongodb.dev.modiscloud.net/`,
+    baseURL: process.env.REACT_APP_SERVER_NAME,
     headers: {
         'Accept': "application/json",
         'Access-Control-Allow-Origin': "*",

diff --git a/service_zone/frontend/datalake-react-front/src/components/download-page/Download.js b/service_zone/frontend/datalake-react-front/src/components/download-page/Download.js
@@ -9,7 +9,7 @@ import { Paginate } from "./Paginate";
 import { LoadingSpinner } from "./LoadingSpinner";
 
 export class Download extends React.Component {
-    url = 'http://neocampus-datalake-mongodb.dev.modiscloud.net/'
+    url = process.env.REACT_APP_SERVER_NAME
     perPage = 6
 
     constructor(props) {
@@ -190,6 +190,7 @@ export class Download extends React.Component {
     }
 
     render() {
+
         let elts = []
         if(this.state.elements){
             elts = this.state.elements

diff --git a/service_zone/frontend/datalake-react-front/src/components/download-page/Filters.js b/service_zone/frontend/datalake-react-front/src/components/download-page/Filters.js
@@ -1,7 +1,9 @@
 import React from "react";
 import { FormGroup, FormLabel, Form, Button } from "react-bootstrap";
+import { config } from '../../configmeta/config';
 
 export class Filters extends React.Component {
+
     constructor(props) {
         super(props);
         this.props = props
@@ -11,6 +13,11 @@ export class Filters extends React.Component {
         this.setDatatype = this.setDatatype.bind(this);
         this.setBeginDate = this.setBeginDate.bind(this);
         this.setEndDate = this.setEndDate.bind(this);
+        this.handleChange = this.handleChange.bind(this);
+
+        this.state = {
+            type: 0
+        }
     }
 
     validateFilters(event) {
@@ -42,46 +49,78 @@ export class Filters extends React.Component {
         this.props.setEndDate(endDate)
     }
 
+    // retrieve filetype by id in conf file
+    getFiletypeById(datatypeConf, id) {
+        let filetypesResult = ""
+
+        datatypeConf.map((type) => (
+            // loop in config file
+            type.map((t) => {
+                // if selected data type corresponds with current data type
+                if (t.id === parseInt(id)) {
+                    filetypesResult = t.type_file_accepted
+                }
+            })
+        ));
+
+        return filetypesResult
+    }
+
+    // when data type has changed
+    handleChange(event) {
+        const target = event.target;
+        const value = target.type === 'checkbox' ? target.checked : target.value;
+        const name = target.name;
+
+        let filetypesResult = this.getFiletypeById( [config.types], value)
+        this.props.setFiletype(filetypesResult) 
+
+        this.setState({
+            [name]: value
+        });
+    }
+
     render() {
+        // data type field
+        const SelectDatatype = () => {
+            const types = [config.types];
+            // loop into conf to get all data types
+            const listTypes = types.map((type) => (
+                type.map((t) => 
+                    <option value={t.id}>{t.label}</option>
+                )
+            ));
+            return (
+                <select value={this.state.type} onChange={this.handleChange} name="type" class="form-control">
+                    {listTypes}
+                </select>
+            );
+        }
+
+
         return (
             <div class="p-4">
                 <div class="jumbotron">
                     <h2 class="display-4 text-center">Affichage des données brutes</h2>
                     <Form onSubmit={this.validateFilters}>
                         <div class="form-row">
-                            <div class="form-group required col-md-6">
-                                <label for="inputCity control-label">Type de fichier</label>
-                                <Form.Control as="select" custom value={this.props.data.filetype} onChange={this.setFiletype} required>
-                                    <option selected value=''>Veuillez sélectionner un type</option>
-                                    <option value="application/vnd.ms-excel">CSV</option>
-                                    <option value="application/json">JSON</option>
-                                    <option value="text/plain">Texte</option>
-                                    <option value="image">Images</option>
-                                </Form.Control>
-                            </div>
-                            <div class="form-group col-md-6">
-                                <label for="inputCity">Type de donnée</label>
-                                <Form.Control as="select" custom value={this.props.data.dataType} onChange={this.setDatatype}>
-                                    <option selected value=''>Veuillez sélectionner un type</option>
-                                    <option value="neOCampus">neOCampus</option>
-                                </Form.Control>
-                            </div>
-                            <div class="form-group col-md-6">
-                                <FormGroup>
-                                    <FormLabel>Date de début</FormLabel>
-                                    <Form.Control type="date" name='beginDate' value={this.props.data.beginDate} onChange={this.setBeginDate} required/>
-                                </FormGroup>
-                            </div>
-                            <div class="form-group col-md-6">
-                                <FormGroup>
-                                    <FormLabel>Date de fin</FormLabel>
-                                    <Form.Control type="date" name='endDate' value={this.props.data.endDate} onChange={this.setEndDate} required/>
-                                </FormGroup>
-                            </div>
-
-                            <div class="form-group col-md-12 text-center">
-                                <Button type="submit" variant="outline-primary">Filtrer</Button>
-                            </div>
+                        <SelectDatatype />
+                        <div class="form-group col-md-6">
+                            <FormGroup>
+                                <FormLabel>Date de début</FormLabel>
+                                <Form.Control type="date" name='beginDate' value={this.props.data.beginDate} onChange={this.setBeginDate} required/>
+                            </FormGroup>
+                        </div>
+                        <div class="form-group col-md-6">
+                            <FormGroup>
+                                <FormLabel>Date de fin</FormLabel>
+                                <Form.Control type="date" name='endDate' value={this.props.data.endDate} onChange={this.setEndDate} required/>
+                            </FormGroup>
+                        </div>
+
+                        <div class="form-group col-md-12 text-center">
+                            <Button type="submit" variant="outline-primary">Filtrer</Button>
+                        </div>
                         </div>
                     </Form>
                 </div>