Frontend setup; event search

.editorconfig

@@ -1,15 +1,18 @@
+; This file is for unifying the coding style for different editors and IDEs.
+; More information at http://editorconfig.org
+
 root = true
 
 [*]
 charset = utf-8
+indent_size = 4
+indent_style = space
 end_of_line = lf
 insert_final_newline = true
-indent_style = space
-indent_size = 4
 trim_trailing_whitespace = true
 
+[{package.json,tailwind.js}]
+indent_size = 2
+
 [*.md]
 trim_trailing_whitespace = false
-
-[*.yml]
-indent_size = 2

.prettierignore

@@ -0,0 +1,3 @@
+public/
+vendor/
+resources/assets/js/back/redactor/

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "printWidth": 100,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "es5"
+}

package.json

@@ -1,26 +1,29 @@
 {
     "private": true,
     "scripts": {
-        "dev": "npm run development",
+        "dev": "$npm_execpath run development",
         "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "npm run development -- --watch",
-        "watch-poll": "npm run watch -- --watch-poll",
+        "watch": "$npm_execpath run development -- --watch",
+        "watch-poll": "$npm_execpath run watch -- --watch-poll",
         "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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "prod": "$npm_execpath run production",
+        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "format": "prettier --write 'resources/**/*.{css,js}'"
     },
     "devDependencies": {
-        "axios": "^0.18",
-        "bootstrap": "^4.0.0",
+        "@babel/plugin-proposal-class-properties": "^7.3.3",
+        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
         "cross-env": "^5.1",
-        "jquery": "^3.2",
         "laravel-mix": "^4.0.7",
-        "lodash": "^4.17.5",
-        "popper.js": "^1.12",
-        "resolve-url-loader": "^2.3.1",
-        "sass": "^1.15.2",
-        "sass-loader": "^7.1.0",
-        "vue": "^2.5.17",
-        "vue-template-compiler": "^2.5.22"
+        "laravel-mix-purgecss": "^4.1.0",
+        "postcss-easy-import": "^3.0.0",
+        "prettier": "^1.16.4",
+        "stimulus": "^1.1.1",
+        "tailwindcss": "^0.7.4",
+        "turbolinks": "^5.2.0",
+        "vue-template-compiler": "^2.6.6"
+    },
+    "dependencies": {
+        "qs": "^6.6.0"
     }
 }

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js",
-    "/css/app.css": "/css/app.css"
+    "/js/app.js": "/js/app.js?id=8863c392fce974dd4090",
+    "/css/app.css": "/css/app.css?id=c2cb9f02c2b6f30cf1a7"
 }

resources/css/app.css

@@ -0,0 +1,7 @@
+@charset 'UTF-8';
+
+@import './bootstrap.css';
+@import './components/*';
+@import './utilities/*';
+
+@tailwind utilities;

resources/css/bootstrap.css

@@ -0,0 +1,38 @@
+@tailwind preflight;
+
+* {
+    position: relative;
+    box-sizing: inherit;
+    margin: 0;
+    padding: 0;
+    color: inherit;
+    font: inherit;
+}
+
+*:after,
+*:before {
+    box-sizing: inherit;
+}
+
+html {
+    box-sizing: border-box;
+}
+
+h1 {
+    font-size: inherit; /* Reset normalize 2em */
+}
+
+a {
+    text-decoration: none;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+img,
+svg {
+    display: block;
+    vertical-align: middle;
+}

resources/css/components/.gitkeep

@@ -0,0 +1 @@
+

resources/js/app.js

@@ -1,33 +1,9 @@
+import Turbolinks from 'turbolinks';
+import { Application } from 'stimulus';
+import { definitionsFromContext } from 'stimulus/webpack-helpers';
 
-/**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
+Turbolinks.start();
 
-require('./bootstrap');
-
-window.Vue = require('vue');
-
-/**
- * The following block of code may be used to automatically register your
- * Vue components. It will recursively scan this directory for the Vue
- * components and automatically register them with their "basename".
- *
- * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
- */
-
-// const files = require.context('./', true, /\.vue$/i)
-// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
-
-Vue.component('example-component', require('./components/ExampleComponent.vue').default);
-
-/**
- * Next, we will create a fresh Vue application instance and attach it to
- * the page. Then, you may begin adding components to this application
- * or customize the JavaScript scaffolding to fit your unique needs.
- */
-
-const app = new Vue({
-    el: '#app'
-});
+const application = Application.start();
+const context = require.context('./controllers', true, /\.js$/);
+application.load(definitionsFromContext(context));

resources/js/controllers/search-controller.js

@@ -0,0 +1,31 @@
+import qs from "qs";
+import { debounce } from "../util";
+import Turbolinks from "turbolinks";
+import { Controller } from 'stimulus';
+
+export default class QueryController extends Controller {
+    static targets = ['input'];
+
+    submit(e) {
+        e.preventDefault();
+
+        this.search(this.inputTarget.value);
+    }
+
+    reset(e) {
+        e.preventDefault();
+
+        this.search(undefined);
+    }
+
+    search(query) {
+        const currentQuery = qs.parse(window.location.search.substr(1));
+
+        const newQueryString = qs.stringify({
+            ...currentQuery,
+            query,
+        });
+
+        Turbolinks.visit(`?${newQueryString}`);
+    }
+}

resources/js/util.js

@@ -0,0 +1,10 @@
+// Source: https://medium.com/@_jh3y/throttling-and-debouncing-in-javascript-b01cad5c8edf
+export function debounce(callback, delay) {
+    let inDebounce;
+    return function() {
+        const context = this;
+        const args = arguments;
+        clearTimeout(inDebounce);
+        inDebounce = setTimeout(() => callback.apply(context, args), delay);
+    };
+}

resources/views/front/events/partials/filter-bar.blade.php

@@ -1,11 +1,28 @@
-<ul>
-    <a @php( print request()->has('past') ? '' : 'active') href="?upcoming=1">Upcoming</a>
-    <a @php( print request()->has('past') ? 'active' : '') href="?past=1">Past</a>
-
-    <form action="{{ route('search') }}">
-        <input type="text" name="query" />
-
-        <button>Search</button>
+<nav class="flex">
+    <ul class="flex">
+        <li {!! request()->has('past') ? '' : 'class="font-bold"' !!}>
+            <a href="?">Upcoming</a>
+        </li>
+        <li {!! request()->has('past') ? 'class="font-bold"' : '' !!}>
+            <a href="?past=1">Past</a>
+        </li>
+    </ul>
+    <form
+        data-controller="search"
+        data-action="search#submit"
+    >
+        <input
+            type="text"
+            name="query"
+            placeholder="Search..."
+            value="{{ request()->query('query') }}"
+            data-target="search.input"
+        >
+        <button type="submit">
+            Search
+        </button>
+        <button data-action="search#reset">
+            Reset
+        </button>
     </form>
-
-</ul>
+</nav>