Changeset 7219

Timestamp:

10/21/18 18:20:13 (6 years ago)

Author:

Leif-Jöran

Message:

Applying updates to corpus view component.

File:

• SRUAggregator/trunk/src/main/resources/assets/js/components/corpusview.jsx (modified) (9 diffs)

SRUAggregator/trunk/src/main/resources/assets/js/components/corpusview.jsx

@@ -13 +13 @@
                 languageMap: PT.object.isRequired,
         },
+        
+        getInitialState() {
+            return {
+                viewSelected: false, // only show the selected collections
+                //showDisabled: false, // dont hide items with {visible = false} // implemented, but out commented feature...
+            }
+        },
 
         toggleSelection: function (corpus, e) {
@@ -20 +27 @@
                 this.stop(e);
         },
-
+        
+        toggleViewSelected(evt) {
+            this.setState( (st)=> ({viewSelected:!st.viewSelected}) );
+        },
+        toggleShowDisabled(evt) {
+            this.setState( (st)=> ({showDisabled:!st.showDisabled}) );
+        },
+
+        toggleDescExpansion: function (corpus) {
+                corpus.descExpanded = !corpus.descExpanded;
+                this.props.corpora.update();
+        },
+        
         toggleExpansion: function (corpus) {
                 corpus.expanded = !corpus.expanded;
@@ -27 +46 @@
 
         selectAll: function(value) {
-                this.props.corpora.recurse(function(c) { c.selected = value; });
+            // select all _visible_
+                this.props.corpora.recurse(function(c) { c.visible ? c.selected = value : false });
                 this.props.corpora.update();
         },
@@ -128 +148 @@
                         return false;
                 }
-                return  <div className="expansion-handle" style={{}}>
+                return  <div className="expansion-handle" onClick={this.toggleExpansion.bind(this, corpus)}>
                                         <a>
                                                 {corpus.expanded ?
@@ -145 +165 @@
                                 .join(", ");
         },
-
-        renderFilteredMessage: function() {
+        
+        shouldShowItem(level, corpus) {
+            if (this.state.viewSelected && !corpus.selected) {
+                return false;
+            }
+            if (!this.state.showDisabled && !corpus.visible) {
+                   return false;
+            }
+        // normal search filter.
+        if (level === 0 && corpus.priority <= 0) {
+                    return false;
+            }
+            
+            return true;
+        },
+
+        renderFilteredMessage() {
                 var total = 0;
                 var visible = 0;
-                this.props.corpora.recurse(function(corpus){
-                        if (corpus.visible) {
+                this.props.corpora.recurse((corpus) => {
+                        if (corpus.visible || this.state.showDisabled) {
                                 total ++;
-                                if (corpus.priority > 0) {
+                                if (this.shouldShowItem(0, corpus)) {
                                         visible++;
                                 }
@@ -160 +195 @@
                         return false;
                 }
+                if (visible === 0) {
+                        return false; // we do have an "empty" message anyway
+                }
                 return  <div> Showing {visible} out of {total} (sub)collections. </div>;
         },
 
         renderCorpus: function(level, minmaxp, corpus) {
-                if (!corpus.visible || corpus.priority <= 0) {
-                        return false;
+                if (!this.shouldShowItem(level, corpus)) {
+                    return;
                 }
 
@@ -174 +212 @@
                 var color = minmaxp[0] === minmaxp[1] ? 'transparent' : 'hsl('+hue+', 50%, 50%)';
                 var priorityStyle = {paddingBottom: 4, paddingLeft: 2, borderBottom: '3px solid '+color };
-                var expansive = corpus.expanded ? {overflow:'hidden'} 
+                var expansive = corpus.descExpanded ? {overflow:'hidden'} 
                         : {whiteSpace:'nowrap', overflow:'hidden', textOverflow: 'ellipsis'};
                 return  <div className={corpusContainerClass} key={corpus.id}>
-                                        <div className="row corpus" onClick={this.toggleExpansion.bind(this, corpus)}>
+                                        <div className="row corpus" onClick={this.toggleDescExpansion.bind(this, corpus)}>
                                                 <div className="col-sm-1 vcenter">
                                                                 <div className="inline" style={priorityStyle} onClick={this.toggleSelection.bind(this,corpus)}>
@@ -211 +249 @@
                                 </div>;
         },
-
-        render: function() {
-                var minmaxp = this.getMinMaxPriority();
+        
+        renderCorpList() {
+            var minmaxp = this.getMinMaxPriority();
+            
+            const corpListRender = [];
+               
+            // this is so we get a non-undefined items .length in corpListRender.
+            this.props.corpora.corpora.forEach( c => {
+                var rend = this.renderCorpus(0, minmaxp, c);
+                if (rend) corpListRender.push(rend);
+           });
+           
+           return <div className="corpusview-corpora">
+                    { corpListRender.length > 0 ? corpListRender :
+                <h3 className="aligncenter">{
+                    this.state.viewSelected ? "No collections selected yet!" : "No collections found."
+                }</h3>
+            }
+                </div>
+                
+        },
+        
+        render() {
+            var selectedCount = 0;
+            //var disabledCount = 0;
+            this.props.corpora.recurse( c => {
+                if (c.selected && c.visible) selectedCount++;
+                //if (c.selected) selectedCount++;
+                //if (!c.visible) disabledCount++;
+            });
+            
+
                 return  <div style={{margin: "0 30px"}}>
                                         <div className="row">
+                                        {/*
                                                 <div className="float-left inline">
-                                                        <h3 style={{marginTop:10}}>
+                                                        <h3 style={{marginTop: 0}}>
                                                                 {this.props.corpora.getSelectedMessage()}
                                                         </h3>
                                                 </div>
+                                        */}
+                                                
+                                                <div className="float-left inline corpusview-filter-buttons">
+                                                    <div className="btn-group btn-group-toggle" >
+                                                    
+                              <label className={"btn btn-light btn " + (this.state.viewSelected ? 'active':'inactive')} onClick={this.toggleViewSelected} title="View selected collections">
+                                <span className={this.state.viewSelected ? "glyphicon glyphicon-check" : "glyphicon glyphicon-unchecked"} /> View selected ({selectedCount})
+                              </label>
+                              {/*
+                              <label className={"btn btn-light btn-sm " + (this.state.showDisabled ? 'active':'inactive')} onClick={this.toggleShowDisabled} label="Toggle showing of collections disabled in this search mode">
+                                <span className={this.state.showDisabled ? "glyphicon glyphicon-check" : "glyphicon glyphicon-unchecked"} />  Show disabled ({disabledCount})
+                              </label>
+                              */}
+                            </div>
+                                                </div>
+                                                
                                                 <div className="float-right inline">
                                                         <button className="btn btn-default" style={{ marginRight: 10 }} onClick={this.selectAll.bind(this,true)}>
@@ -234 +318 @@
                                                 </div>
                                         </div>
-                                        
-                                        {this.props.corpora.corpora.map(this.renderCorpus.bind(this, 0, minmaxp))}
+                                        {this.renderCorpList()}
                                 </div>;
         }