release 5.3.2

2016-09-02 16:43:20 +01:00
parent 5a8da199c2
commit 68ba430896
18 changed files with 156 additions and 13 deletions
--- a/src-standard/SkillsFilter.jsx
+++ b/src-standard/SkillsFilter.jsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import RefData from './RefData';
+
+// the skills filter component. this can be laid out much better in a 'React'
+// way. there are design patterns you can apply to layout out your React classes.
+// however, i'm not worried, as the intention here is to show you ag-Grid
+// working with React, and that's all. i'm not looking for any awards for my
+// React design skills.
+export default class SkillsFilter extends React.Component {
+
+    constructor() {
+        super();
+        this.state = {
+            skills: RefData.IT_SKILLS,
+            skillNames: RefData.IT_SKILLS_NAMES,
+            android: false,
+            css: false,
+            html5: false,
+            mac: false,
+            windows: false
+        };
+    }
+
+    // called by agGrid
+    init(params) {
+        this.filterChangedCallback = params.filterChangedCallback;
+    }
+
+    // called by agGrid
+    doesFilterPass(params) {
+
+        var rowSkills = params.data.skills;
+        var passed = true;
+
+        this.state.skills.forEach( (skill) => {
+            if (this.state[skill]) {
+                if (!rowSkills[skill]) {
+                    passed = false;
+                }
+            }
+        });
+
+        return passed;
+    };
+
+    // called by agGrid
+    isFilterActive() {
+        var somethingSelected = this.state.android || this.state.css ||
+            this.state.html5 || this.state.mac || this.state.windows;
+        return somethingSelected;
+    };
+
+    onSkillChanged(skill, event) {
+        var newValue = event.target.checked;
+        var newModel = {};
+        newModel[skill] = newValue;
+        this.setState(newModel, ()=> {this.filterChangedCallback();} );
+    }
+
+    render() {
+
+        var skillsTemplates = [];
+        this.state.skills.forEach( (skill, index) => {
+
+            var skillName = this.state.skillNames[index];
+            var template = (
+                <label key={skill} style={{border: '1px solid lightgrey', margin: 4, padding: 4, display: 'inline-block'}}>
+                    <span>
+                        <div style={{textAlign: 'center'}}>{skillName}</div>
+                        <div>
+                            <input type="checkbox" onClick={this.onSkillChanged.bind(this, skill)}/>
+                            <img src={'images/skills/'+skill+'.png'} width={30}/>
+                        </div>
+                    </span>
+                </label>
+            );
+
+            skillsTemplates.push(template);
+        });
+
+        return (
+            <div style={{width: 380}}>
+                <div style={{textAlign: 'center', background: 'lightgray', width: '100%', display: 'block', borderBottom: '1px solid grey'}}>
+                    <b>Custom Skills Filter</b>
+                </div>
+                {skillsTemplates}
+            </div>
+        );
+    }
+
+    // these are other method that agGrid calls that we
+    // could of implemented, but they are optional and
+    // we have no use for them in this particular filter.
+    //getApi() {}
+    //afterGuiAttached(params) {}
+    //onNewRowsLoaded() {}
+    //onAnyFilterChanged() {}
+}