Add a search UI for Infoscience lists

epfl-si · Nov 25, 2020 · 1181a04 · 1181a04
1 parent 75727ae
commit 1181a04
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 3 deletions.
diff --git a/frontend/epfl-infoscience-search/controller.php b/frontend/epfl-infoscience-search/controller.php
@@ -76,6 +76,8 @@ function epfl_infoscience_search_block( $provided_attributes ) {
         'thumbnail' => true,
         'group_by' => '', # "", "year", "doctype"
         'group_by2' => '', # "", "year", "doctype"
+        # UI
+        'searchbox' => false,
         # Dev
         'debug' => false,
         'debugdata' => false,
@@ -205,6 +207,7 @@ function epfl_infoscience_search_block( $provided_attributes ) {
         'group_by' => $group_by,
         'group_by2' => $group_by2,
         'sort' => $attributes['sort'],
+        'searchbox' => $attributes['searchbox'],
     ];
 
     # fetch language
@@ -301,7 +304,7 @@ function epfl_infoscience_search_block( $provided_attributes ) {
                     return $page;
                 }
 
-                $page = ClassesInfoscience2018Render::render($grouped_by_publications,
+                $publications_html = ClassesInfoscience2018Render::render($grouped_by_publications,
                                                         $url,
                                                         $format,
                                                         $summary,
@@ -312,8 +315,13 @@ function epfl_infoscience_search_block( $provided_attributes ) {
                 $html_verbose_comments = '<!-- epfl_infoscience_search params : ' . var_export($before_unset_attributes, true) .  ' //-->';
                 $html_verbose_comments .= '<!-- epfl_infoscience_search used url :'. var_export($url, true) . ' //-->';
 
-                $page = '<div class="infoscienceBox container no-tex2jax_process">' . $html_verbose_comments . $page . '</div>';
+                $page = '';
 
+                if ($attributes['searchbox']) {
+                    $page .= Utils::render_php(dirname(__FILE__).'/search-box.php');
+                }
+
+                $page .= '<div class="infoscienceBox container no-tex2jax_process">' . $html_verbose_comments . $publications_html . '</div>';
                 $page .= epfl_infoscience_search_get_mathjax_config();
 
                 // cache the result if we have got some data

diff --git a/frontend/epfl-infoscience-search/search-box.php b/frontend/epfl-infoscience-search/search-box.php
@@ -0,0 +1,15 @@
+<?php
+namespace EPFL\Plugins\Gutenberg\InfoscienceSearch;
+?>
+<div class="form-group">
+  <input
+          type="text"
+          id="infsocience-search-search-input"
+          class="form-control search mb-2"
+          placeholder="<?php _e('Search', 'epfl') ?>"
+          aria-describedby="infsocience-search-input"
+  >
+
+  <button class="btn btn-secondary sort asc" data-sort="title"><?php _e('Sort by title', 'epfl') ?></button>
+  <button class="btn btn-secondary sort" data-sort="year"><?php _e('Sort by year', 'epfl') ?></button>
+</div>
diff --git a/frontend/lib/utils.php b/frontend/lib/utils.php
@@ -207,6 +207,17 @@ public static function richtext_content_exists($attributes, $name)
         return isset($attributes[$name]) && strip_tags($attributes[$name]) != "";
     }
 
+    /**
+     * When you want to render into a var
+     * set $args to get some value for your php file ($path)
+     * https://stackoverflow.com/a/34600568
+     */
+    public static function render_php($path, array $args=null) {
+        ob_start();
+        include($path);
+        $var = ob_get_contents();
+        ob_end_clean();
+        return $var;
+    }
 }
 
-?>
diff --git a/src/epfl-infoscience-search/index.js b/src/epfl-infoscience-search/index.js
@@ -92,6 +92,10 @@ registerBlockType( 'epfl/infoscience-search', {
 		debugTemplate: {
 			type: 'boolean',
 			default: null,
+		},
+		searchBox: {
+			type: 'boolean',
+			default: null,
 		}
 	}),
 	example: getTooltippedExample(),

diff --git a/src/epfl-infoscience-search/inspector.js b/src/epfl-infoscience-search/inspector.js
@@ -167,6 +167,11 @@ export default class InspectorControlsInfoscience extends Component {
                         options={ optionsSort }
 						onChange={ sort => setAttributes( { sort } ) }
 					/>
+					<ToggleControl
+						label={ __('Search box', 'epfl') }
+						checked={ attributes.searchBox }
+						onChange={ searchBox => setAttributes( { searchBox } ) }
+					/>
 				</PanelBody>
 				<PanelBody title={ __('Options', 'epfl') } >
 					<SelectControl