Migrated to custom gulp setup and conintue search interface

.gitignore

@@ -7,7 +7,6 @@ Homestead.yaml
 /public/plugins
 /public/css
 /public/js
-/public/fonts
 /public/bower
 /storage/images
 _ide_helper.php

gulpfile.js

@@ -0,0 +1,63 @@
+const argv = require('yargs').argv;
+const gulp = require('gulp'),
+    plumber = require('gulp-plumber');
+const autoprefixer = require('gulp-autoprefixer');
+const uglify = require('gulp-uglify');
+const minifycss = require('gulp-clean-css');
+const sass = require('gulp-sass');
+const browserify = require("browserify");
+const source = require('vinyl-source-stream');
+const buffer = require('vinyl-buffer');
+const babelify = require("babelify");
+const watchify = require("watchify");
+const envify = require("envify");
+const gutil = require("gulp-util");
+
+if (argv.production) process.env.NODE_ENV = 'production';
+
+gulp.task('styles', () => {
+    let chain = gulp.src(['resources/assets/sass/**/*.scss'])
+        .pipe(plumber({
+            errorHandler: function (error) {
+                console.log(error.message);
+                this.emit('end');
+            }}))
+        .pipe(sass())
+        .pipe(autoprefixer('last 2 versions'));
+    if (argv.production) chain = chain.pipe(minifycss());
+    return chain.pipe(gulp.dest('public/css/'));
+});
+
+
+function scriptTask(watch=false) {
+
+    let props = {
+        basedir: 'resources/assets/js',
+        debug: true,
+        entries: ['global.js']
+    };
+
+    let bundler = watch ? watchify(browserify(props), { poll: true }) : browserify(props);
+    bundler.transform(envify, {global: true}).transform(babelify, {presets: ['es2015']});
+    function rebundle() {
+        let stream = bundler.bundle();
+        stream = stream.pipe(source('common.js'));
+        if (argv.production) stream = stream.pipe(buffer()).pipe(uglify());
+        return stream.pipe(gulp.dest('public/js/'));
+    }
+    bundler.on('update', function() {
+        rebundle();
+        gutil.log('Rebundle...');
+    });
+    bundler.on('log', gutil.log);
+    return rebundle();
+}
+
+gulp.task('scripts', () => {scriptTask(false)});
+gulp.task('scripts-watch', () => {scriptTask(true)});
+
+gulp.task('default', ['styles', 'scripts-watch'], () => {
+    gulp.watch("resources/assets/sass/**/*.scss", ['styles']);
+});
+
+gulp.task('build', ['styles', 'scripts']);

package.json

@@ -1,30 +1,43 @@
 {
   "private": true,
   "scripts": {
-    "dev": "npm run development",
+    "build": "gulp build",
-    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "production": "gulp build --production",
-    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "dev": "gulp",
-    "watch-poll": "npm run watch -- --watch-poll",
+    "watch": "gulp"
-    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "prod": "npm run production",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "devDependencies": {
+    "babelify": "^7.3.0",
+    "browserify": "^14.3.0",
+    "envify": "^4.0.0",
+    "gulp": "3.9.1",
+    "gulp-autoprefixer": "3.1.1",
+    "gulp-clean-css": "^3.0.4",
+    "gulp-minify-css": "1.2.4",
+    "gulp-plumber": "1.1.0",
+    "gulp-sass": "3.1.0",
+    "gulp-uglify": "2.1.2",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0",
+    "watchify": "^3.9.0",
+    "yargs": "^7.1.0"
+  },
+  "dependencies": {
     "angular": "^1.5.5",
     "angular-animate": "^1.5.5",
     "angular-resource": "^1.5.5",
     "angular-sanitize": "^1.5.5",
-    "angular-ui-sortable": "^0.15.0",
+    "angular-ui-sortable": "^0.17.0",
-    "cross-env": "^3.2.3",
-    "dropzone": "^4.0.1",
-    "gulp": "^3.9.0",
-    "laravel-mix": "0.*",
-    "marked": "^0.3.5",
-    "moment": "^2.12.0"
-  },
-  "dependencies": {
     "axios": "^0.16.1",
+    "babel-preset-es2015": "^6.24.1",
     "clipboard": "^1.5.16",
+    "dropzone": "^4.0.1",
+    "gulp-util": "^3.0.8",
+    "marked": "^0.3.5",
+    "moment": "^2.12.0",
     "vue": "^2.2.6"
+  },
+  "browser": {
+    "vue": "vue/dist/vue.common.js"
   }
 }

public/mix-manifest.json

@@ -1,7 +0,0 @@
-{
-  "/js/common.js": "/js/common.js",
-  "/css/styles.css": "/css/styles.css",
-  "/css/print-styles.css": "/css/print-styles.css",
-  "/css/export-styles.css": "/css/export-styles.css",
-  "/js/vues.js": "/js/vues.js"
-}

resources/assets/js/controllers.js

@@ -1,12 +1,12 @@
 "use strict";
 
-import moment from 'moment';
+const moment = require('moment');
-import 'moment/locale/en-gb';
+require('moment/locale/en-gb');
-import editorOptions from "./pages/page-form";
+const editorOptions = require("./pages/page-form");
 
 moment.locale('en-gb');
 
-export default function (ngApp, events) {
+module.exports = function (ngApp, events) {
 
     ngApp.controller('ImageManagerController', ['$scope', '$attrs', '$http', '$timeout', 'imageManagerService',
         function ($scope, $attrs, $http, $timeout, imageManagerService) {

resources/assets/js/directives.js

@@ -1,8 +1,8 @@
 "use strict";
-import DropZone from "dropzone";
+const DropZone = require("dropzone");
-import markdown from "marked";
+const markdown = require("marked");
 
-export default function (ngApp, events) {
+module.exports = function (ngApp, events) {
 
     /**
      * Common tab controls using simple jQuery functions.

resources/assets/js/global.js

@@ -8,33 +8,33 @@ window.baseUrl = function(path) {
     return basePath + '/' + path;
 };
 
-// Vue and axios setup
+const Vue = require("vue");
-import vue from "vue/dist/vue.common";
+const axios = require("axios");
-import axios from "axios";
 
 let axiosInstance = axios.create({
     headers: {
         'X-CSRF-TOKEN': document.querySelector('meta[name=token]').getAttribute('content'),
-        'baseURL': baseUrl('')
+        'baseURL': window.baseUrl('')
     }
 });
 
-window.Vue = vue;
-window.axios = axiosInstance;
 Vue.prototype.$http = axiosInstance;
 
+require("./vues/vues");
+
+
 // AngularJS - Create application and load components
-import angular from "angular";
+const angular = require("angular");
-import "angular-resource";
+require("angular-resource");
-import "angular-animate";
+require("angular-animate");
-import "angular-sanitize";
+require("angular-sanitize");
-import "angular-ui-sortable";
+require("angular-ui-sortable");
 
 let ngApp = angular.module('bookStack', ['ngResource', 'ngAnimate', 'ngSanitize', 'ui.sortable']);
 
 // Translation setup
 // Creates a global function with name 'trans' to be used in the same way as Laravel's translation system
-import Translations from "./translations"
+const Translations = require("./translations");
 let translator = new Translations(window.translations);
 window.trans = translator.get.bind(translator);
 
@@ -65,9 +65,9 @@ window.Events = new EventManager();
 Vue.prototype.$events = window.Events;
 
 // Load in angular specific items
-import Services from './services';
+const Services = require('./services');
-import Directives from './directives';
+const Directives = require('./directives');
-import Controllers from './controllers';
+const Controllers = require('./controllers');
 Services(ngApp, window.Events);
 Directives(ngApp, window.Events);
 Controllers(ngApp, window.Events);
@@ -170,4 +170,4 @@ if(navigator.userAgent.indexOf('MSIE')!==-1
 }
 
 // Page specific items
-import "./pages/page-show";
+require("./pages/page-show");

resources/assets/js/pages/page-form.js

@@ -60,7 +60,7 @@ function registerEditorShortcuts(editor) {
     editor.addShortcut('meta+shift+E', '', ['FormatBlock', false, 'code']);
 }
 
-export default function() {
+module.exports = function() {
     let settings = {
         selector: '#html-editor',
         content_css: [
@@ -213,4 +213,4 @@ export default function() {
         }
     };
     return settings;
-}
+};

resources/assets/js/pages/page-show.js

@@ -1,8 +1,8 @@
 "use strict";
 // Configure ZeroClipboard
-import Clipboard from "clipboard";
+const Clipboard = require("clipboard");
 
-export default window.setupPageShow = function (pageId) {
+let setupPageShow = window.setupPageShow = function (pageId) {
 
     // Set up pointer
     let $pointer = $('#pointer').detach();
@@ -151,3 +151,5 @@ export default window.setupPageShow = function (pageId) {
     });
 
 };
+
+module.exports = setupPageShow;

resources/assets/js/translations.js

@@ -44,4 +44,4 @@ class Translator {
 
 }
 
-export default Translator
+module.exports = Translator;

resources/assets/js/vues/search.js

@@ -1,16 +1,18 @@
-
+const moment = require('moment');
-let termString = document.querySelector('[name=searchTerm]').value;
-let terms = termString.split(' ');
 
 let data = {
-    terms: terms,
+    terms: '',
-        termString : termString,
+    termString : '',
-        search: {
+    search: {
         type: {
             page: true,
             chapter: true,
             book: true
-        }
+        },
+        exactTerms: [],
+        tagTerms: [],
+        option: {},
+        dates: {}
     }
 };
 
@@ -21,8 +23,76 @@ let computed = {
 let methods = {
 
     appendTerm(term) {
-        if (this.termString.slice(-1) !== " ") this.termString += ' ';
+        this.termString += ' ' + term;
-        this.termString += term;
+        this.termString = this.termString.replace(/\s{2,}/g, ' ');
+        this.termString = this.termString.replace(/^\s+/, '');
+        this.termString = this.termString.replace(/\s+$/, '');
+    },
+
+    exactParse(searchString) {
+        this.search.exactTerms = [];
+        let exactFilter = /"(.+?)"/g;
+        let matches;
+        while ((matches = exactFilter.exec(searchString)) !== null) {
+            this.search.exactTerms.push(matches[1]);
+        }
+    },
+
+    exactChange() {
+        let exactFilter = /"(.+?)"/g;
+        this.termString = this.termString.replace(exactFilter, '');
+        let matchesTerm = this.search.exactTerms.filter(term => {
+            return term.trim() !== '';
+        }).map(term => {
+            return `"${term}"`
+        }).join(' ');
+        this.appendTerm(matchesTerm);
+    },
+
+    addExact() {
+        this.search.exactTerms.push('');
+        setTimeout(() => {
+            let exactInputs = document.querySelectorAll('.exact-input');
+            exactInputs[exactInputs.length - 1].focus();
+        }, 100);
+    },
+
+    removeExact(index) {
+        this.search.exactTerms.splice(index, 1);
+        this.exactChange();
+    },
+
+    tagParse(searchString) {
+        this.search.tagTerms = [];
+        let tagFilter = /\[(.+?)\]/g;
+        let matches;
+        while ((matches = tagFilter.exec(searchString)) !== null) {
+            this.search.tagTerms.push(matches[1]);
+        }
+    },
+
+    tagChange() {
+        let tagFilter = /\[(.+?)\]/g;
+        this.termString = this.termString.replace(tagFilter, '');
+        let matchesTerm = this.search.tagTerms.filter(term => {
+            return term.trim() !== '';
+        }).map(term => {
+            return `[${term}]`
+        }).join(' ');
+        this.appendTerm(matchesTerm);
+    },
+
+    addTag() {
+        this.search.tagTerms.push('');
+        setTimeout(() => {
+            let tagInputs = document.querySelectorAll('.tag-input');
+            tagInputs[tagInputs.length - 1].focus();
+        }, 100);
+    },
+
+    removeTag(index) {
+        this.search.tagTerms.splice(index, 1);
+        this.tagChange();
     },
 
     typeParse(searchString) {
@@ -55,14 +125,40 @@ let methods = {
         this.appendTerm(typeTerm);
     },
 
-    updateSearch() {
+    optionParse(searchString) {
+        let optionFilter = /{([a-z_-]+?)}/gi;
+        let matches;
+        while ((matches = optionFilter.exec(searchString)) !== null) {
+            this.search.option[matches[1].toLowerCase()] = true;
+        }
+    },
+
+    optionChange(optionName) {
+        let isChecked = this.search.option[optionName];
+        if (isChecked) {
+            this.appendTerm(`{${optionName}}`);
+        } else {
+            this.termString = this.termString.replace(`{${optionName}}`, '');
+        }
+    },
+
+    updateSearch(e) {
+        e.preventDefault();
         window.location = '/search?term=' + encodeURIComponent(this.termString);
+    },
+
+    enableDate(optionName) {
+        this.search.dates[optionName] = moment().format('YYYY-MM-DD');
     }
 
 };
 
 function created() {
+    this.termString = document.querySelector('[name=searchTerm]').value;
     this.typeParse(this.termString);
+    this.exactParse(this.termString);
+    this.tagParse(this.termString);
+    this.optionParse(this.termString);
 }
 
 module.exports = {

resources/assets/js/vues/vues.js

@@ -1,3 +1,4 @@
+const Vue = require("vue");
 
 function exists(id) {
     return document.getElementById(id) !== null;

resources/assets/sass/_fonts.scss

@@ -6,8 +6,8 @@
   font-style: normal;
   font-weight: 100;
   src: local('Roboto Thin'), local('Roboto-Thin'),
-  url('assets/fonts/roboto-v15-cyrillic_latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('../fonts/roboto-v15-cyrillic_latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('assets/fonts/roboto-v15-cyrillic_latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('../fonts/roboto-v15-cyrillic_latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-100italic - cyrillic_latin */
 @font-face {
@@ -15,8 +15,8 @@
   font-style: italic;
   font-weight: 100;
   src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'),
-  url('assets/fonts/roboto-v15-cyrillic_latin-100italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('../fonts/roboto-v15-cyrillic_latin-100italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('assets/fonts/roboto-v15-cyrillic_latin-100italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('../fonts/roboto-v15-cyrillic_latin-100italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-300 - cyrillic_latin */
 @font-face {
@@ -24,8 +24,8 @@
   font-style: normal;
   font-weight: 300;
   src: local('Roboto Light'), local('Roboto-Light'),
-  url('assets/fonts/roboto-v15-cyrillic_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('../fonts/roboto-v15-cyrillic_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('assets/fonts/roboto-v15-cyrillic_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('../fonts/roboto-v15-cyrillic_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-300italic - cyrillic_latin */
 @font-face {
@@ -33,8 +33,8 @@
   font-style: italic;
   font-weight: 300;
   src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
-  url('assets/fonts/roboto-v15-cyrillic_latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('../fonts/roboto-v15-cyrillic_latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('assets/fonts/roboto-v15-cyrillic_latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('../fonts/roboto-v15-cyrillic_latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-regular - cyrillic_latin */
 @font-face {
@@ -42,8 +42,8 @@
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'),
-  url('assets/fonts/roboto-v15-cyrillic_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('../fonts/roboto-v15-cyrillic_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('assets/fonts/roboto-v15-cyrillic_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('../fonts/roboto-v15-cyrillic_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-italic - cyrillic_latin */
 @font-face {
@@ -51,8 +51,8 @@
   font-style: italic;
   font-weight: 400;
   src: local('Roboto Italic'), local('Roboto-Italic'),
-  url('assets/fonts/roboto-v15-cyrillic_latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('../fonts/roboto-v15-cyrillic_latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('assets/fonts/roboto-v15-cyrillic_latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('../fonts/roboto-v15-cyrillic_latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-500 - cyrillic_latin */
 @font-face {
@@ -60,8 +60,8 @@
   font-style: normal;
   font-weight: 500;
   src: local('Roboto Medium'), local('Roboto-Medium'),
-  url('assets/fonts/roboto-v15-cyrillic_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('../fonts/roboto-v15-cyrillic_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('assets/fonts/roboto-v15-cyrillic_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('../fonts/roboto-v15-cyrillic_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-500italic - cyrillic_latin */
 @font-face {
@@ -69,8 +69,8 @@
   font-style: italic;
   font-weight: 500;
   src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
-  url('assets/fonts/roboto-v15-cyrillic_latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('../fonts/roboto-v15-cyrillic_latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('assets/fonts/roboto-v15-cyrillic_latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('../fonts/roboto-v15-cyrillic_latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-700 - cyrillic_latin */
 @font-face {
@@ -78,8 +78,8 @@
   font-style: normal;
   font-weight: 700;
   src: local('Roboto Bold'), local('Roboto-Bold'),
-  url('assets/fonts/roboto-v15-cyrillic_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('../fonts/roboto-v15-cyrillic_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('assets/fonts/roboto-v15-cyrillic_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('../fonts/roboto-v15-cyrillic_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-700italic - cyrillic_latin */
 @font-face {
@@ -87,8 +87,8 @@
   font-style: italic;
   font-weight: 700;
   src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
-  url('assets/fonts/roboto-v15-cyrillic_latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('../fonts/roboto-v15-cyrillic_latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('assets/fonts/roboto-v15-cyrillic_latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('../fonts/roboto-v15-cyrillic_latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* roboto-mono-regular - latin */
@@ -97,6 +97,6 @@
   font-style: normal;
   font-weight: 400;
   src: local('Roboto Mono'), local('RobotoMono-Regular'),
-  url('assets/fonts/roboto-mono-v4-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('../fonts/roboto-mono-v4-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('assets/fonts/roboto-mono-v4-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('../fonts/roboto-mono-v4-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }

resources/views/base.blade.php

@@ -84,7 +84,6 @@
     </div>
 @yield('bottom')
 <script src="{{ versioned_asset('js/common.js') }}"></script>
-<script src="{{ versioned_asset('js/vues.js') }}"></script>
 @yield('scripts')
 </body>
 </html>

resources/views/search/all.blade.php

@@ -33,15 +33,94 @@
             <div class="col-md-5 col-md-offset-1">
                <h3>Search Filters</h3>
 
-                <p><strong>Content Type</strong></p>
+                <form v-on:submit="updateSearch" v-cloak>
-                <div class="form-group">
+                    <p><strong>Content Type</strong></p>
-                    <label><input type="checkbox" v-on:change="typeChange" v-model="search.type.page" value="page"> Page</label>
+                    <div class="form-group">
-                    <label><input type="checkbox" v-on:change="typeChange" v-model="search.type.chapter" value="chapter"> Chapter</label>
+                        <label><input type="checkbox" v-on:change="typeChange" v-model="search.type.page" value="page"> Page</label>
-                    <label><input type="checkbox" v-on:change="typeChange" v-model="search.type.book" value="book"> Book</label>
+                        <label><input type="checkbox" v-on:change="typeChange" v-model="search.type.chapter" value="chapter"> Chapter</label>
-                </div>
+                        <label><input type="checkbox" v-on:change="typeChange" v-model="search.type.book" value="book"> Book</label>
+                    </div>
+
+                    <p><strong>Exact Matches</strong></p>
+                    <table cellpadding="0" cellspacing="0" border="0" class="no-style">
+                        <tr v-for="(term, i) in search.exactTerms">
+                            <td style="padding: 0 12px 6px 0;">
+                                <input class="exact-input" v-on:input="exactChange" type="text" v-model="search.exactTerms[i]"></td>
+                            <td>
+                                <button type="button" class="text-button" v-on:click="removeExact(i)">
+                                    <i class="zmdi zmdi-close-circle-o"></i>
+                                </button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                <button type="button" class="text-button" v-on:click="addExact">
+                                    <i class="zmdi zmdi-plus-circle-o"></i>Add exact match term
+                                </button>
+                            </td>
+                        </tr>
+                    </table>
+
+                    <p><strong>Tag Searches</strong></p>
+                    <table cellpadding="0" cellspacing="0" border="0" class="no-style">
+                        <tr v-for="(term, i) in search.tagTerms">
+                            <td style="padding: 0 12px 6px 0;">
+                                <input class="tag-input" v-on:input="tagChange" type="text" v-model="search.tagTerms[i]"></td>
+                            <td>
+                                <button type="button" class="text-button" v-on:click="removeTag(i)">
+                                    <i class="zmdi zmdi-close-circle-o"></i>
+                                </button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                <button type="button" class="text-button" v-on:click="addTag">
+                                    <i class="zmdi zmdi-plus-circle-o"></i>Add tag search
+                                </button>
+                            </td>
+                        </tr>
+                    </table>
+
+                    <p><strong>Options</strong></p>
+                    <label>
+                        <input type="checkbox" v-on:change="optionChange('viewed_by_me')"
+                               v-model="search.option.viewed_by_me" value="page">
+                        Viewed by me
+                    </label>
+                    <label>
+                        <input type="checkbox" v-on:change="optionChange('not_viewed_by_me')"
+                               v-model="search.option.not_viewed_by_me" value="page">
+                        Not viewed by me
+                    </label>
+
+                    <p><strong>Date Options</strong></p>
+                    <table cellpadding="0" cellspacing="0" border="0" class="no-style">
+                        <tr>
+                            <td>Updated After</td>
+                            <td style="padding: 0 12px 6px 0;">
+                                <input v-if="search.dates.updated_after" class="tag-input" v-on:input="tagChange" type="date" v-model="search.dates.updated_after" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
+                                <button type="button" class="text-button" v-if="!search.dates.updated_after" v-on:click="enableDate('updated_at')">Set Date</button>
+                            </td>
+                            <td>
+                                <button v-if="search.dates.updated_after" type="button" class="text-button" v-on:click="search.dates.updated_after = false">
+                                    <i class="zmdi zmdi-close-circle-o"></i>
+                                </button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                <button type="button" class="text-button" v-on:click="addTag">
+                                    <i class="zmdi zmdi-plus-circle-o"></i>Add tag search
+                                </button>
+                            </td>
+                        </tr>
+                    </table>
+
+
+                    <button type="submit" class="button pos">Update Search</button>
+                </form>
 
 
-                <button type="button" class="button pos" v-on:click="updateSearch">Update Search</button>
 
             </div>
 

webpack.mix.js

@@ -1,18 +0,0 @@
-const { mix } = require('laravel-mix');
-
-/*
- |--------------------------------------------------------------------------
- | Mix Asset Management
- |--------------------------------------------------------------------------
- |
- | Mix provides a clean, fluent API for defining some Webpack build steps
- | for your Laravel application. By default, we are compiling the Sass
- | file for the application as well as bundling up all the JS files.
- |
- */
-
-mix.js('resources/assets/js/global.js', './public/js/common.js')
-    .js('resources/assets/js/vues/vues.js', './public/js/vues.js')
-    .sass('resources/assets/sass/styles.scss', 'public/css')
-    .sass('resources/assets/sass/print-styles.scss', 'public/css')
-    .sass('resources/assets/sass/export-styles.scss', 'public/css');