Feature/search form

package.json

@@ -1,18 +1,28 @@
 {
-    "name": "winthrop-django",
-    "description": "Django web application for the Winthrop Family on the Page Project",
-    "repository": "https://github.com/Princeton-CDH/winthrop-django.git",
-    "author": "The Center for Digital Humanities at Princeton <cdhdevteam@princeton.edu>",
-    "license": "Apache-2.0",
-    "main": "sitemedia/js/index.js",
-    "dependencies": {
-      "autoprefixer": "^8.5.0",
-      "babel-core": "^6.26.3",
-      "babel-preset-es2015": "^6.24.1",
-      "babelify": "^8.0.0",
-      "browserify": "^16.2.2",
-      "node-sass": "^4.9.0",
-      "postcss-cli": "^5.0.0"
-    }
+  "name": "winthrop-django",
+  "description": "Django web application for the Winthrop Family on the Page Project",
+  "repository": "https://github.com/Princeton-CDH/winthrop-django.git",
+  "author": "The Center for Digital Humanities at Princeton <cdhdevteam@princeton.edu>",
+  "license": "Apache-2.0",
+  "main": "sitemedia/js/index.js",
+  "dependencies": {
+    "babel-polyfill": "^6.26.0",
+    "lodash": "^4.17.10",
+    "rxjs": "^6.2.2",
+    "rxjs-compat": "^6.2.2",
+    "semantic-ui-vue": "^0.2.11",
+    "vue-router": "^3.0.1",
+    "vue2-filters": "^0.3.0",
+    "vuex": "^3.0.1",
+    "vuex-router-sync": "^5.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-beta.54",
+    "@babel/preset-env": "^7.0.0-beta.54",
+    "autoprefixer": "^8.5.0",
+    "babelify": "^9.0.0",
+    "browserify": "^16.2.2",
+    "node-sass": "^4.9.0",
+    "postcss-cli": "^5.0.0"
   }
-  
+}

sitemedia/js/components/FilterChoice.js

@@ -0,0 +1,25 @@
+export default Vue.component ('FilterChoice', {
+    template: `
+    <label :active="active" is="sui-button" role="checkbox" basic circular compact>
+        {{ label }}
+        <input
+            type="checkbox"
+            :value="value"
+            @input="$emit('input', $event.target.value)"
+            :name="name"
+            v-model="active"
+            hidden
+        >
+    </label>
+    `,
+    props: {
+        name: String,
+        label: String,
+        value: String
+    },
+    data() {
+        return {
+            active: false
+        }
+    }
+})

sitemedia/js/components/RangeFacet.js

@@ -0,0 +1,38 @@
+import { mapActions } from 'vuex'
+
+export default Vue.component('RangeFacet', {
+    template: `
+    <div class="range-facet">
+        <div class="inputs">
+            <sui-input :placeholder="minVal" />
+            <label>to</label>
+            <sui-input :placeholder="maxVal" />
+        </div>
+        <div class="histogram">
+        </div>
+    </div>
+    `,
+    props: {
+        label: String,
+        name: String,
+        width: Number,
+        choices: Array
+    },
+    computed: {
+        minVal() {
+            return this.choices
+                .map(choice => parseInt(choice.value))
+                .reduce((acc, cur) => cur < acc ? cur : acc, Infinity)
+        },
+        maxVal() {
+            return this.choices
+                .map(choice => parseInt(choice.value))
+                .reduce((acc, cur) => cur > acc ? cur : acc, -Infinity)
+        }
+    },
+    methods: {
+        ...mapActions([
+            'setRangeFacet',
+        ]),
+    },
+})

sitemedia/js/components/SearchFacet.js

@@ -0,0 +1,99 @@
+import { mapActions } from 'vuex'
+import RangeFacet from './RangeFacet'
+
+export default Vue.component('SearchFacet', {
+    template: `
+    <sui-grid-column :width="width" class="field">
+        <label :for="label">{{ label }}</label>
+        <template v-if="type === 'text'">
+            <sui-input v-if="search" iconPosition="left" icon="search" placeholder="Search or select" v-model="filter" />
+            <div v-if="search" class="rolodex">
+                <button
+                    v-for="letter in alphabet"
+                    :key="letter"
+                    class="letter"
+                    :class="{active: alphaFilter == letter}"
+                    @click.prevent="alphaFilter = alphaFilter == letter ? '' : letter"
+                >
+                {{ letter }}
+                </button>
+            </div>
+            <div class="facets">
+                <label v-if="availableChoices.length == 0">No results</label>
+                <div
+                    class="ui checkbox"
+                    v-for="choice of choices"
+                    v-show="availableChoices.includes(choice.value)"
+                    :key="choice.value"
+                >
+                    <input
+                        type="checkbox"
+                        @input="toggleFacetChoice(choice)"
+                        :name="choice.facet"
+                        :value="choice.value"
+                        :checked="choice.active"
+                    >
+                    <label>{{ choice.value }} <span class="count">{{ choice.count }}</span></label>
+                </div>
+            </div>
+        </template>
+        <range-facet v-if="type === 'range'" :label="label" :name="name" :width="width" :choices="choices">
+        </range-facet>
+    </sui-grid-column>
+    `,
+    components: {
+        RangeFacet
+    },
+    data() {
+        return {
+            filter: '',
+            alphaFilter: '',
+            alphabet: String.fromCharCode(...Array(91).keys()).slice(65)
+        }
+    },
+    computed: {
+        availableChoices() {
+            return this.choices
+                .map(choice => choice.value)
+                .filter(value => this.normalize(value).startsWith(this.alphaFilter))
+                .filter(value => this.match(value, this.filter))
+        }
+    },
+    props: {
+        type: String,
+        label: String,
+        name: String,
+        search: {
+            type: Boolean,
+            default: false
+        },
+        width: Number,
+        choices: Array
+    },
+    methods: {
+        ...mapActions([
+            'toggleFacetChoice',
+        ]),
+        /**
+         * Utility that normalizes strings for simple comparison.
+         * Removes special characters, trims whitespace, and uppercases.
+         *
+         * @param {String} str
+         * @returns {String}
+         */
+        normalize(str) {
+            return str.replace(/[^\w\s]/gi, '').trim().toUpperCase()
+        },
+        /**
+         * Compares two strings using normalize().
+         * Return true if str2 matches str1.
+         *
+         * @param {String} str1
+         * @param {String} str2
+         * @returns {Boolean}
+         */
+        match(str1, str2) {
+            return this.normalize(str1).includes(this.normalize(str2))
+        },
+    }
+})

sitemedia/js/components/SearchFilter.js

@@ -0,0 +1,31 @@
+import FilterChoice from './FilterChoice'
+
+export default Vue.component('SearchFilter', {
+    template: `
+    <sui-segment>
+        <label :for="label">{{ label }}</label>
+            <filter-choice
+                v-for="choice in choices"
+                @input="$emit('input')"
+                :key="choice"
+                :name="label"
+                :label="fieldLabels[choice]"
+                :value="choice"
+            />
+        <label>books</label>
+    </sui-segment>
+    `,
+    components: {
+        FilterChoice
+    },
+    props: {
+        label: String,
+        fieldLabels: Object,
+        choices: Array
+    },
+    data() {
+        return {
+            activeFilters: []
+        }
+    }
+})

sitemedia/js/components/SearchResults.js

@@ -0,0 +1,11 @@
+import { mapState } from 'vuex'
+
+export default Vue.component('SearchResults', {
+    template: `<div class="search-results" v-html="results" />`,
+    computed: {
+        ...mapState([
+            'results',
+            'totalResults',
+        ]),
+    }
+})

sitemedia/js/components/SearchSort.js

@@ -0,0 +1,51 @@
+import { mapState, mapActions } from 'vuex'
+
+export default Vue.component('SearchSort', {
+    template: `
+    <div class="search-sort">
+        <label>Sort By</label>
+        <sui-dropdown
+            :value="activeSort"
+            :options="options"
+            @input="changeSort($event)"
+            selection
+        />
+    </div>
+    `,
+    computed: {
+        ...mapState([
+            'activeSort',
+            'query'
+        ]),
+        options() {
+            return [
+                {
+                    text: 'Author A-Z',
+                    value: 'author_asc'
+                },
+                {
+                    text: 'Author Z-A',
+                    value: 'author_desc'
+                },
+                {
+                    text: 'Year Oldest-Newest',
+                    value: 'pub_year_asc'
+                },
+                {
+                    text: 'Year Newest-Oldest',
+                    value: 'pub_year_desc'
+                },
+                {
+                    text: 'Relevance',
+                    value: 'relevance',
+                    disabled: this.query ? false : true
+                }
+            ]
+        },
+    },
+    methods: {
+        ...mapActions([
+            'changeSort'
+        ]),
+    },
+})