+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| src | +
+
+ |
+ 100% | +110/110 | +100% | +56/56 | +100% | +18/18 | +100% | +107/107 | +
| src/components | +
+
+ |
+ 93.71% | +149/159 | +81.65% | +89/109 | +96.55% | +28/29 | +94.19% | +146/155 | +
| src/test | +
+
+ |
+ 100% | +8/8 | +100% | +0/0 | +100% | +0/0 | +100% | +8/8 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 | + + + + + + + +3x +3x +3x +3x + + + + + + +7x +4x + + + + + + + + +4x +4x +4x +4x + + + +4x +4x +4x +4x +4x +4x +4x + +4x +2x +2x +2x +2x +2x + +4x +4x +4x +4x +4x +4x + + + + + +4x + +4x +4x +4x + +4x + + +2x + +2x + + +2x + + + + + +9x +9x +8x +46x +46x +46x +46x +29x +29x +29x + +29x +16x +16x +16x +16x +63x +63x + +18x +18x +45x + +9x +9x + + + +29x +4x + +4x +7x + +7x + +3x +3x + + + + + + + +9x +9x +46x +4x + + + + + + +4x +4x + + + +6x +6x + + + + +14x +14x +14x +14x +14x +14x +14x + + + + + + + + + + + +3x +2x + + + + +3x +6x +5x + + + + +3x +2x +2x +2x +14x +14x +2x +2x + + + +2x + + + +3x +2x +2x +2x +2x +2x +2x + + + + +3x +3x +3x +3x +3x + + + | import 'rc-slider/assets/index.css';
+import 'rc-tooltip/assets/bootstrap.css';
+import './index.css';
+import React from "react";
+import fetch from "unfetch";
+import RangeFacet from "./components/RangeFacet";
+
+//Get all labels.
+const LABELS = {};
+let labels = document.getElementsByClassName("body-facet-search-label");
+for (let i = 0; i < labels.length; i++) {
+ LABELS[labels[i].id] = labels[i].value;
+}
+
+let facetSearchComponent;
+
+class FacetSearch extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ is_enable: false,
+ list_title: {},
+ list_facet: {},
+ list_order: {},
+ list_uiType: {},
+ list_isOpen: {},
+ list_displayNumber: {}
+ };
+ this.getTitleAndOrder = this.getTitleAndOrder.bind(this);
+ this.get_facet_search_list = this.get_facet_search_list.bind(this);
+ this.convertData = this.convertData.bind(this);
+ facetSearchComponent = this;
+ }
+
+ getTitleAndOrder() {
+ let titleLst = {};
+ let orderLst = {};
+ let uiTypeLst = {};
+ let isOpenLst = {};
+ let displayNumberLst = {};
+ fetch("/facet-search/get-title-and-order", {method: "POST"})
+ .then((r) => r.json())
+ .then((response) => {
+ if (response.status) {
+ titleLst = response.data.titles;
+ orderLst = response.data.order;
+ uiTypeLst = response.data.uiTypes;
+ isOpenLst = response.data.isOpens;
+ displayNumberLst = response.data.displayNumbers;
+ }
+ this.setState({ list_title: titleLst });
+ this.setState({ list_order: orderLst });
+ this.setState({ list_uiType: uiTypeLst });
+ this.setState({ list_isOpen: isOpenLst });
+ this.setState({ list_displayNumber: displayNumberLst });
+ this.setState({ is_enable: true });
+ });
+ }
+
+ get_facet_search_list() {
+
+ let search = new URLSearchParams(window.location.search);
+
+ let url = search.get('search_type') == 2 ? "/api/index/" : "/api/records/";
+ fetch(url + '?' + search.toString())
+ .then((r) => r.json())
+ .then((res) => {
+ if (search.get('search_type') == 2) {
+ // Index faceted search
+
+ let aggregations = res && res.aggregations && res.aggregations.aggregations
+ ? res.aggregations.aggregations[0] : {};
+ this.convertData(aggregations);
+ } else {
+ // default faceted search
+ this.convertData(res && res.aggregations ? res.aggregations : {});
+ }
+ });
+ }
+
+ convertData(data) {
+ let list_facet = {};
+ if (data) {
+ Object.keys(data).map(function (name, k) {
+ let val = data[name][name] ? data[name][name] : data[name];
+ let hasBuckets = val["key"] && val["key"].hasOwnProperty("buckets");
+ hasBuckets = val.hasOwnProperty("buckets") || hasBuckets;
+ if (hasBuckets) {
+ list_facet[name] = val[name] ? val[name] : val;
+ console.log(val);
+ console.log(val[name]);
+ //START:temporary fix for JDCat
+ if (name != "Time Period(s)" && name != "Data Language" && name != "Access") {
+ let e = document.getElementById('lang-code');
+ let l = e.options[e.selectedIndex].value;
+ let tmp = list_facet[name];
+ for (let i = 0; i < tmp.buckets.length; i++) {
+ let a = tmp.buckets[i];
+ if ((l == "en") && ((a.key).charCodeAt(0) > 256 || (a.key).charCodeAt(a.key.length - 1) > 256)) {
+ //delete list_facet[name].buckets[i];
+ list_facet[name].buckets.splice(i,1);
+ i--;
+ } else if ((l != "en") && ((a.key).charCodeAt(0) < 256 && (a.key).charCodeAt(a.key.length - 1) < 256)) {
+ //delete list_facet[name].buckets[i];
+ list_facet[name].buckets.splice(i,1);
+ i--;
+ }
+ }
+ }
+ if (name == "Access"){
+ let tmp = list_facet[name];
+
+ for (let i = 0; i < tmp.buckets.length; i++) {
+ let a = tmp.buckets[i];
+
+ if (((a.key).charCodeAt(0) > 256 || (a.key).charCodeAt(a.key.length - 1) > 256)) {
+ //delete list_facet[name].buckets[i];
+ list_facet[name].buckets.splice(i,1);
+ i--;
+ }
+ }
+ }
+ //END:temporary fix for JDCat
+ }
+ });
+ }
+ this.setState({list_facet: list_facet});
+ Object.keys(data).map(function (name, k) {
+ if(window.facetSearchFunctions[name + '_clearSliderValue']) {
+ window.facetSearchFunctions[name + '_clearSliderValue']();
+ }
+ });
+
+ }
+
+ componentDidMount() {
+ this.getTitleAndOrder();
+ this.get_facet_search_list();
+ }
+
+ render() {
+ const { is_enable, list_title, list_facet, list_order, list_uiType, list_isOpen, list_displayNumber} = this.state;
+ return (
+ <div>
+ {is_enable && (
+ <div className="facet-search break-word">
+ {Object.keys(list_order).map(function (order, key) {
+ const name = list_order[order];
+ const item = list_facet[name];
+ const nameshow = list_title[name];
+ const isOpen = list_isOpen[name];
+ const uiType = list_uiType[name];
+ const displayNumber = list_displayNumber[name];
+ return (
+ <RangeFacet item={item} nameshow={nameshow} name={name} key={key} labels={LABELS} isInitOpen={isOpen} uiType={uiType} displayNumber={displayNumber} />
+ );
+ })}
+ </div>
+ )}
+ </div>
+ );
+ }
+}
+
+// Allows external parties to retrieve whether or not a Facet search item is loaded on the screen.
+const useFacetSearch = () => {
+ return facetSearchComponent != null;
+}
+
+// Change Facet's search criteria.
+// The argument Data assumes Json information about Facet searches aggregated by Elasticsearch.
+const resetFacetData = (data) => {
+ if(facetSearchComponent != null) {
+ facetSearchComponent.convertData(data);
+ }
+}
+
+// Used to retrieve Facet's narrowing status from external sources.
+const getFacetSearchCondition = () => {
+ let search = new URLSearchParams(window.location.search);
+ let result = new URLSearchParams();
+ Object.keys(facetSearchComponent.state.list_order).map(function (order, k) {
+ let name = facetSearchComponent.state.list_order[order];
+ if(search.has(name)) {
+ for(var value of search.getAll(name)) {
+ result.append(name, value);
+ }
+ }
+ });
+ return result;
+}
+
+// Used to change State during testing. Do not use otherwise.
+const setStateForTest = (json_data) => {
+ facetSearchComponent.setState({ list_title: json_data.data.titles });
+ facetSearchComponent.setState({ list_order: json_data.data.order });
+ facetSearchComponent.setState({ list_uiType: json_data.data.uiTypes });
+ facetSearchComponent.setState({ list_isOpen: json_data.data.isOpens });
+ facetSearchComponent.setState({ list_displayNumber: json_data.data.displayNumbers });
+ facetSearchComponent.setState({ is_enable: true });
+}
+
+
+// Put the defined function in the key for the global variable of the window object.
+window.facetSearchFunctions = {};
+window.facetSearchFunctions.setStateForTest = setStateForTest;
+window.facetSearchFunctions.useFacetSearch = useFacetSearch;
+window.facetSearchFunctions.resetFacetData = resetFacetData;
+window.facetSearchFunctions.getFacetSearchCondition = getFacetSearchCondition;
+
+export default FacetSearch;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +10x + + +10x +10x + + + + + + + + + + +10x +36x + +16x +16x + + + + + + + + + + + +20x + + + + + + + + + + + + + + + + + + + + + + + +10x +20x + +40x +36x +36x +36x +36x + + + + + + + + + + + + + + + + + + + + +10x +10x + + + + + + + + + + + + + + + + + + + + + +2x + + +2x + + + + + + + + + +2x + + + +2x +2x + +4x + + + + + + + + +2x +2x +4x +2x + + +2x +2x + + + + + + + +2x +2x +4x +1x +3x + + + +2x +2x + + + + + + + + + +4x + +4x +3x + +4x +4x +4x +3x + +1x + + + + +10x +10x + +10x +10x + + + + + + + + + + + + + + | import "rc-slider/assets/index.css";
+import "rc-tooltip/assets/bootstrap.css";
+import React, { useState } from "react";
+//import reSearchFacet from '../App.js';
+
+/**
+ * A UI component that displays faceted items as a list of checkboxes.
+ * This part consists of a list portion and a modal portion.
+ *
+ * <List part>
+ * The List portion displays a list of checkboxes with the number of displayNumber
+ * set in the admin panel. If the number of faceted items is greater than the
+ * number of displayNumber, a link to display the Modal is displayed.
+ *
+ * The checkboxes displayed in the List section are narrowed down by facet item
+ * at the same time as Click is performed.
+ *
+ *
+ * <Modal part>
+ * In the modal section, all faceted items are displayed in a modal.
+ * Since scrolling is used, there is no limit to the number of items.
+ * The number of display columns is also changed according to the screen size to be displayed.
+ *
+ * In the modal portion, no narrowing is performed until the search button is pressed.
+ * Multiple items can be selected and narrowed down in a batch.
+ *
+ * The modal portion can be closed by pressing the Cancel button or clicking
+ * on the portion outside the modal. The facet items that were selected before
+ * the refinement are cleared when the modal is closed.
+ *
+ * @param {array} values An array consisting of faceted item names (key) and the number of items in the target (doc_count).
+ * @param {string} name English name of facet item.
+ * @param {array} labels Array of labels used in translation.
+ * @param {integer} displayNumber Number of items displayed in the list.
+ *
+ * @author knowledge labo yamada
+ */
+function RangeCheckboxList({ values, name, labels, displayNumber }) {
+ const [listCheckedItems, setListCheckedItems] = useState({});
+
+ //If there is a space in the id attribute, it cannot be searched by ID, so escape it.
+ let facet_item_id = "id_" + name + "_chkbox";
+ let facet_item_id_for_search = CSS.escape(facet_item_id);
+
+ /**
+ * Returns the DOM representing the checkbox.
+ *
+ * @param {string} id ID of the checkbox.
+ * @param {string} value Value of the checkbox.
+ * @param {boolean} checked The selected state of the checkbox.
+ * @param {function} onChange Process when the check box is clicked, which is set only when List is displayed.
+ * @returns DOM representing a checkbox.
+ */
+ const CheckBox = ({ id, value, checked, onChange}) => {
+ if(onChange !=null) {
+ //for lists
+ listCheckedItems[id] = checked;
+ return (
+ <input
+ id={id}
+ className="facet-chbox"
+ type="checkbox"
+ checked={listCheckedItems[id]}
+ onChange={onChange}
+ value={value}
+ />
+ )
+ } else {
+ //for Modal
+ return (
+ <input
+ id={id}
+ className="facet-chbox"
+ type="checkbox"
+ defaultChecked={checked}
+ value={value}
+ />
+ )
+ }
+
+ }
+
+ /**
+ * Returns the DOM of a list of checkboxes.
+ * This function is used for both List and Modal. The parameter isModal controls which use is made of this function.
+ *
+ * @param {array} values An array consisting of faceted item names (key) and the number of items in the target (doc_count).
+ * @param {string} name English name of facet item.
+ * @param {bool} isModal True for modal use. false for list use.
+ * @param {integer} displayNumber Number of items displayed in the list.
+ * @param {function} onChange Process when the check box is clicked, which is set only when List is displayed.
+ * @returns DOM representing a checkbox list.
+ */
+ const CheckBoxList = ({ values, name, isModal, displayNumber, onChange}) => {
+ return (
+ values.map((subitem,index) => {
+ if (isModal || index < displayNumber) {
+ let id = "id_" + name + (isModal ? "_chkbox_mdl_" : "_chkbox_") + index;
+ let label = subitem.key + "(" + subitem.doc_count + ")";
+ let checked = search.get(name) && search.getAll(name).includes(subitem.key);
+ return (
+ <div key={id}>
+ <label htmlFor={id} >
+ <CheckBox id={id} value={subitem.key} checked={checked} key={id} onChange={onChange} />
+ {label}
+ </label>
+ </div>
+ )
+ }
+ })
+ )
+ }
+
+ /**
+ * Returns the modal DOM.
+ *
+ * @param {array} values An array consisting of faceted item names (key) and the number of items in the target (doc_count).
+ * @param {string} name English name of facet item.
+ * @param {bool} modalId ID set for the modal.
+ * @returns Modal DOM
+ */
+ const ModalCheckboxList = ({ values, name, modalId }) => {
+ return (
+ <div key={modalId} className="chbox-mdl" id={modalId}>
+ <a className="overlay" onClick={closeModal} modalId={modalId}></a>
+ <div className="window">
+ <div className="content">
+ <div className="list">
+ <CheckBoxList values={values} name={name} isModal={true} />
+ </div>
+ <div className="footer">
+ <a onClick={closeModal} modalId={modalId}>{labels['cancel']}</a>
+ <button type="button" className="btn btn-primary" onClick={handleModalListChange} modalId={modalId}>{labels['search']}</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ )
+ };
+
+ /**
+ * Called to close the modal.
+ */
+ function closeModal(e){
+ Iif(e == null){
+ return;
+ }
+ document.getElementById(e.target.getAttribute('modalId')).classList.remove("is-active");
+ }
+
+ /**
+ * Called to open a modal.
+ * Reconfigure it to select only the checkboxes that have been narrowed down
+ * from the parameters of the URL at the time before displaying.
+ */
+ function openModal(e){
+
+ Iif(e == null){
+ console.log("event == null" );
+ return;
+ }
+ document.getElementById(e.target.getAttribute('modalId')).classList.add("is-active");
+ document.querySelector('#' + facet_item_id_for_search).querySelectorAll('.chbox-mdl input').forEach(el => {
+ //el.checked = params.indexOf(name + "=" + el.value)!= -1;
+ el.checked = search.get(name) && search.getAll(name).includes(el.value);
+ });
+ }
+
+ /**
+ * Processing when a check box is selected when the List is displayed. The search items of
+ * the newly selected check box are added to the parameter to narrow down the search.
+ */
+ function handleListChange(e) {
+ const targets = [];
+ document.querySelector('#' + facet_item_id_for_search).querySelectorAll('.chbox-mdl input').forEach(el => {
+ if((el.checked && e.target.value !== el.value) || (e.target.checked && e.target.value === el.value)){
+ targets.push({label: name, value: el.value});
+ }
+ });
+ setListCheckedItems({...listCheckedItems, [e.target.id]: e.target.checked});
+ executeSearch(targets);
+ }
+
+ /**
+ * When the search button is pressed during modal display, a callout difference srere.
+ * The search item for the newly selected check box is added to the parameters and a narrowed search is performed.
+ */
+ function handleModalListChange(e) {
+ const targets = [];
+ document.querySelector('#' + facet_item_id_for_search).querySelectorAll('.chbox-mdl input').forEach(el => {
+ if(el.checked){
+ targets.push({label: name, value: el.value});
+ }else Iif(listCheckedItems[el.id]){
+ setListCheckedItems({...listCheckedItems, [el.id]: el.checked});
+ }
+ });
+ executeSearch(targets);
+ document.getElementById(e.target.getAttribute('modalId')).classList.remove("is-active");
+ }
+
+ /**
+ * Narrowing is performed based on the narrowing target specified in this facet item.
+ * Parameters other than this facet item are used as is.
+ *
+ * @param {array} targets Parameters to be refined by this facet item.
+ */
+ function executeSearch(targets) {
+ search.delete(name);
+
+ targets.map(function (subitem, k) {
+ search.append(name, subitem.value);
+ });
+ Iif(search.get('q') === '0') search.set('q', '');
+ search.set('is_facet_search', 'true');
+ if(window.invenioSearchFunctions) {
+ window.invenioSearchFunctions.reSearchInvenio(search);
+ }else{
+ window.location.href = "/search?" + search;
+ }
+
+ }
+
+ let search = new URLSearchParams(window.location.search);
+ let modalId = "id_" + name + "_checkbox_modal";
+
+ let dp = displayNumber == null ? 5 : displayNumber;
+ return (
+ <div id={facet_item_id}>
+ <div className="chbox-container">
+ <CheckBoxList values={values} name={name} isModal={false} displayNumber={dp} onChange={handleListChange}/>
+ {values.length > dp &&
+ <a onClick={openModal} modalId={modalId} >. . . See More</a>
+ }
+ <ModalCheckboxList values={values} name={name} modalId={modalId} displayNumber={displayNumber}/>
+ </div>
+ </div>
+ );
+}
+
+export default RangeCheckboxList;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 | + + + + + + + + +28x +28x +28x +28x +28x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import "rc-slider/assets/index.css";
+import "rc-tooltip/assets/bootstrap.css";
+import React, { useState } from "react";
+import { Collapse } from "reactstrap";
+import RangeSelect from "./RangeSelect";
+import RangeSlider from "./RangeSlider";
+import RangeCheckboxList from "./RangeCheckboxList";
+
+function RangeFacet({ item, nameshow, name, key, labels, isInitOpen, uiType, displayNumber}) {
+ const toggle = () => setIsOpen(!isOpen);
+ const search = window.location.search.replace(",", "%2C");
+ const is_check = search.indexOf(encodeURIComponent(name)) >= 0 ? true : isInitOpen;
+ const [isOpen, setIsOpen] = useState(is_check);
+ return (
+ <div className="panel panel-default" key={key}>
+ <div className="panel-heading clearfix">
+ <h3 className="panel-title pull-left">{nameshow}</h3>
+ <a className="pull-right" onClick={toggle}>
+ {!isOpen && (
+ <span>
+ <i className="glyphicon glyphicon-chevron-right"></i>
+ </span>
+ )}
+ {isOpen && (
+ <span>
+ <i className="glyphicon glyphicon-chevron-down"></i>
+ </span>
+ )}
+ </a>
+ </div>
+ <Collapse isOpen={isOpen}>
+ <div className="panel-body index-body">
+ {item != null && uiType === "SelectBox" && (
+ <RangeSelect values={item.buckets} name={name} labels={labels} />
+ )}
+ {item != null && uiType === "CheckboxList" && (
+ <RangeCheckboxList values={item.buckets} name={name} labels={labels} displayNumber={displayNumber} />
+ )}
+ {item != null && uiType === "RangeSlider" && (
+ <RangeSlider value={item.buckets} name={name} labels={labels} />
+ )}
+ </div>
+ </Collapse>
+ </div>
+ );
+}
+
+export default RangeFacet;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 | + + + + + + + +3x + + +2x + +2x +3x + + +2x +2x +2x +1x + +1x + + + +3x + +3x +3x +3x +2x +4x + + + +4x +4x +1x + + + + +3x + + + + + + + + +2x + + + + + + + + + + + + + + | import "rc-slider/assets/index.css";
+import "rc-tooltip/assets/bootstrap.css";
+import React from "react";
+import Select from "react-select";
+
+function RangeSelect({ values, name, labels }) {
+
+ //If there is a space in the id attribute, it cannot be searched by ID, so escape it.
+ let facet_item_id = "id_" + name + "_select";
+
+ function handleChange(params) {
+ search.delete(name);
+
+ params.map(function (subitem, k) {
+ search.append(name, subitem.value);
+ });
+
+ if(search.get('q') === '0') search.set('q', '');
+ search.set('is_facet_search', 'true');
+ if(window.invenioSearchFunctions) {
+ window.invenioSearchFunctions.reSearchInvenio(search);
+ }else{
+ window.location.href = "/search?" + search;
+ }
+ }
+
+ let search = new URLSearchParams(window.location.search);
+
+ let defaultOptions = [];
+ let options = [];
+ if (values) {
+ values.map(function (subitem, k) {
+ let option = {
+ label: (labels[subitem.key] || subitem.key) + "(" + subitem.doc_count + ")",
+ value: subitem.key
+ };
+ options.push(option);
+ if (search.get(name) && search.getAll(name).includes(subitem.key)) {
+ defaultOptions.push(option);
+ }
+ });
+ }
+
+ return (
+ <div id={facet_item_id}>
+ <div className="select-container">
+ <Select
+ defaultValue={defaultOptions}
+ isMulti
+ name="Facet_Search"
+ ontrolShouldRenderValue={false}
+ onChange={(_selectedOption) => {
+ handleChange(_selectedOption);
+ }}
+ backspaceRemovesValue={false}
+ isClearable={false}
+ options={options}
+ className="basic-multi-select"
+ classNamePrefix="select"
+ />
+ </div>
+ </div>
+ );
+}
+
+export default RangeSelect;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 | + + + + + + +10x + + +6x +6x + + +6x +6x +6x + + +6x +1x +1x + +1x +1x + +1x +1x + + +5x +5x +5x + +5x + +1x +1x + +1x +1x + +1x +1x + + + +4x +1x +1x +1x +1x + + +3x +3x +3x +3x + + + + + + + + + + + + + +6x +3x + +3x + +3x +3x +3x +2x + +1x + + + +10x + +10x +10x +10x +9x +9x +9x +1x +1x + +4x +4x +4x +1x + +4x +4x + + + + +10x + +10x +10x +10x +10x +10x +10x + +10x + +2x +2x +2x +2x +2x +2x + +10x + +10x + + + + + + + + +2x + + + + + +2x + + + + + + + + + + + + + + + + | import Slider from 'rc-slider';
+import 'rc-slider/assets/index.css';
+import 'rc-tooltip/assets/bootstrap.css';
+import React, { useState } from "react";
+
+function RangeSlider({ value, name, labels}) {
+ //If there is a space in the id attribute, it cannot be searched by ID, so escape it.
+ let facet_item_id = "id_" + name + "_slider";
+
+ function validateInputIsOk() {
+ let headComp = document.getElementById(facet_item_id + "_input_head");
+ let tailComp = document.getElementById(facet_item_id + "_input_tail");
+
+ // Clear error information
+ setHeadStyle('form-control');
+ setTailStyle('form-control');
+ setErrMsg('');
+
+ // Required Check
+ if(!headComp.value || !tailComp.value){
+ Eif(!headComp.value) {
+ setHeadStyle('form-control range-slider-error');
+ }
+ Eif(!tailComp.value) {
+ setTailStyle('form-control range-slider-error');
+ }
+ setErrMsg(labels['facetSliderRequiredValidation']);
+ return false;
+ }
+ // Numerical input check
+ let pattern = new RegExp(/^([1-9]\d*|0)$/);
+ let headResult = pattern.exec(inputHead);
+ let tailResult = pattern.exec(inputTail);
+
+ if(headResult == null || headResult[0] != inputHead ||
+ tailResult == null || tailResult[0] != inputTail) {
+ Eif(headResult == null || headResult[0] != inputHead) {
+ setHeadStyle('form-control range-slider-error');
+ }
+ Eif(tailResult == null || tailResult[0] != inputTail) {
+ setTailStyle('form-control range-slider-error');
+ }
+ setErrMsg(labels['facetSliderValueValidation']);
+ return false;
+ }
+
+ // Correlation Check
+ if(parseFloat(inputHead) > parseFloat(inputTail)) {
+ setHeadStyle('form-control range-slider-error');
+ setTailStyle('form-control range-slider-error');
+ setErrMsg(labels['facetSliderCorrelationValidation']);
+ return false;
+ }
+ // Clear error information
+ setHeadStyle('form-control');
+ setTailStyle('form-control');
+ setErrMsg('');
+ return true;
+ }
+
+ function handleSlide(valuelog) {
+ setSliderValues([valuelog[0],valuelog[1]]);
+ if(inputHead != valuelog[0]) {
+ setInputHead(Math.round(valuelog[0]));
+ }
+ if(inputTail != valuelog[1]) {
+ setInputTail(Math.round(valuelog[1]));
+ }
+ }
+
+ function handleGo() {
+ if(!validateInputIsOk()) {
+ return;
+ }
+ search.set(name, inputHead + '--' + inputTail);
+
+ if(search.get('q') === '0') search.set('q', '');
+ search.set('is_facet_search', 'true');
+ if(window.invenioSearchFunctions) {
+ window.invenioSearchFunctions.reSearchInvenio(search);
+ }else{
+ window.location.href = "/search?" + search;
+ }
+ }
+
+ let search = new URLSearchParams(window.location.search);
+
+ let minValue = null;
+ let maxValue = null;
+ if(search.get(name) != null) {
+ const paramValues = search.get(name).split('--');
+ minValue = parseInt(paramValues[0]);
+ maxValue = parseInt(paramValues[1]);
+ } else Eif(value) {
+ value.map(function (subitem, k) {
+ let parse_Int;
+ Eif (subitem.key.length > 0) {
+ parse_Int = parseInt(subitem.key);
+ if(minValue == null || minValue > parse_Int) {
+ minValue = parse_Int;
+ }
+ Eif(maxValue == null || maxValue < parse_Int) {
+ maxValue = parse_Int;
+ }
+ }
+ });
+ }
+ let step = (maxValue - minValue)/100;
+
+ const [sliderValues, setSliderValues] = useState([minValue,maxValue]);
+ const [inputHead, setInputHead] = useState(minValue);
+ const [inputTail, setInputTail] = useState(maxValue);
+ const [headStyle, setHeadStyle] = useState('form-control');
+ const [tailStyle, setTailStyle] = useState('form-control');
+ const [errMsg, setErrMsg] = useState('');
+
+ const clearSliderValue = () => {
+ // Information reconfiguration when recalled
+ setSliderValues([minValue, maxValue]);
+ setInputHead(minValue);
+ setInputTail(maxValue);
+ setHeadStyle('form-control');
+ setTailStyle('form-control');
+ setErrMsg('');
+ }
+ window.facetSearchFunctions[name + '_clearSliderValue'] = clearSliderValue;
+
+ return (
+ <div id={facet_item_id}>
+ <div className="col-sm-11" style={{ paddingBottom: "20px", "white-space": "nowrap" }}>
+ <Slider range min={minValue} max={maxValue} step={step} onChange={handleSlide} defaultValue={sliderValues} value={sliderValues} />
+ </div>
+ <div className="form-group row">
+ <div className="col-sm-5">
+ <input type="number" id={facet_item_id + "_input_head"} className={headStyle}
+ value={inputHead}
+ onChange={e => setInputHead(e.target.value.slice(0, 4))}
+ />
+ </div>
+ <div className="col-sm-5">
+ <input type="number" id={facet_item_id + "_input_tail"} className={tailStyle}
+ value={inputTail}
+ onChange={e => setInputTail(e.target.value.slice(0, 4))}
+ />
+ </div>
+ <div className="col-sm-2">
+ <button type="button" style={{ marginLeft: "3px" }}
+ className="btn btn-primary pull-right"
+ onClick={handleGo}> {labels['Goto']}
+ </button>
+ </div>
+ </div>
+ <div className="range-slider-error-msg" id={facet_item_id + "_msg"}>{errMsg}</div>
+ </div>
+ )
+}
+
+export default RangeSlider;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| RangeCheckboxList.jsx | +
+
+ |
+ 90.56% | +48/53 | +79.41% | +27/34 | +100% | +14/14 | +92.3% | +48/52 | +
| RangeFacet.jsx | +
+
+ |
+ 100% | +6/6 | +100% | +15/15 | +100% | +2/2 | +100% | +5/5 | +
| RangeSelect.jsx | +
+
+ |
+ 100% | +21/21 | +100% | +12/12 | +100% | +5/5 | +100% | +20/20 | +
| RangeSlider.jsx | +
+
+ |
+ 93.67% | +74/79 | +72.91% | +35/48 | +87.5% | +7/8 | +93.58% | +73/78 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| App.js | +
+
+ |
+ 100% | +110/110 | +100% | +56/56 | +100% | +18/18 | +100% | +107/107 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| setup_en.js | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +0/0 | +100% | +4/4 | +
| setup_jp.js | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +0/0 | +100% | +4/4 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 | 1x +1x +1x +1x | var dom = '<div><select id="lang-code" name="lang_code" defaultValue="en"><option value="en" selected>English</option></select><input class="body-facet-search-label" id="Goto" type="hidden" value="検索"/></div>';
+var div = document.createElement('div');
+div.innerHTML = dom;
+document.body.appendChild(div); |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 | 2x +2x +2x +2x | var dom = '<div><select id="lang-code" name="lang_code" defaultValue="ja"><option value="ja" selected>日本語</option></select><input class="body-facet-search-label" id="Goto" type="hidden" value="検索"/></div>';
+var div = document.createElement('div');
+div.innerHTML = dom;
+document.body.appendChild(div); |