public release

resources/js/airwire.ts

@@ -0,0 +1,12 @@
+// This file is generated by Airwire
+export const componentDefaults = {"report-filter":{"search":"","assignee":null,"category":null,"status":null,"reports":[]},"create-report":{"name":null,"assignee":null,"category":null},"create-user":{"name":"","email":"","password":"","password_confirmation":""}}
+
+import Airwire from './../../vendor/archtechx/airwire/resources/js';
+
+export default window.Airwire = new Airwire(componentDefaults)
+
+declare global {
+    interface Window {
+        Airwire: Airwire
+    }
+}

resources/js/airwired.d.ts

@@ -0,0 +1,90 @@
+
+declare global {
+    type Report = { id: number, name: string, assignee_id: string, category: string, status: string, created_at: string, updated_at: string, assignee: User };
+
+type User = { id: number, name: string, email: string, email_verified_at: string, created_at: string, updated_at: string, reports: Report };
+
+
+}
+
+import './../../vendor/archtechx/airwire/resources/js/airwired'
+
+declare module 'airwire' {
+    export type TypeMap = {
+    'report-filter': ReportFilter
+    'create-report': CreateReport
+    'create-user': CreateUser
+}
+    interface ReportFilter {
+    search: string;
+    assignee: number;
+    category: number;
+    status: string;
+    reports: Report[];
+    changeStatus(report: Report|string|number): AirwirePromise<string>;
+    mount(): AirwirePromise<any>;
+    errors: {
+        [key in keyof WiredProperties<ReportFilter>]: string[];
+    }
+
+    loading: boolean;
+
+    watch(responses: (response: ComponentResponse<ReportFilter>) => void, errors?: (error: AirwireException) => void): void;
+    defer(callback: CallableFunction): void;
+    refresh(): ComponentResponse<ReportFilter>;
+    remount(...args: any): ComponentResponse<ReportFilter>;
+
+    readonly: ReportFilter;
+
+    deferred: ReportFilter;
+    $component: ReportFilter;
+}
+
+interface CreateReport {
+    name: string;
+    assignee: number;
+    category: number;
+    create(): AirwirePromise<Report>;
+    mount(): AirwirePromise<any>;
+    errors: {
+        [key in keyof WiredProperties<CreateReport>]: string[];
+    }
+
+    loading: boolean;
+
+    watch(responses: (response: ComponentResponse<CreateReport>) => void, errors?: (error: AirwireException) => void): void;
+    defer(callback: CallableFunction): void;
+    refresh(): ComponentResponse<CreateReport>;
+    remount(...args: any): ComponentResponse<CreateReport>;
+
+    readonly: CreateReport;
+
+    deferred: CreateReport;
+    $component: CreateReport;
+}
+
+interface CreateUser {
+    name: string;
+    email: string;
+    password: string;
+    password_confirmation: string;
+    create(): AirwirePromise<User>;
+    errors: {
+        [key in keyof WiredProperties<CreateUser>]: string[];
+    }
+
+    loading: boolean;
+
+    watch(responses: (response: ComponentResponse<CreateUser>) => void, errors?: (error: AirwireException) => void): void;
+    defer(callback: CallableFunction): void;
+    refresh(): ComponentResponse<CreateUser>;
+    remount(...args: any): ComponentResponse<CreateUser>;
+
+    readonly: CreateUser;
+
+    deferred: CreateUser;
+    $component: CreateUser;
+}
+
+
+}

resources/js/app.ts

@@ -0,0 +1,23 @@
+
+import Airwire from './airwire';
+
+import { createApp, reactive } from 'vue';
+
+createApp(require('./components/Main.vue').default)
+    .use(Airwire.plugin('vue')(reactive))
+    .mount('#app')
+
+Airwire.watch(response => {
+    if (response.metadata.notification) {
+        window.notify(response.metadata.notification);
+    }
+}, exception => {
+    alert(exception.message);
+})
+
+
+declare module 'vue' {
+    export interface ComponentCustomProperties {
+        $airwire: typeof window.Airwire
+    }
+}

resources/js/bootstrap.js

@@ -0,0 +1,41 @@
+window._ = require('lodash');
+
+/**
+ * We'll load jQuery and the Bootstrap jQuery plugin which provides support
+ * for JavaScript based Bootstrap features such as modals and tabs. This
+ * code may be modified to fit the specific needs of your application.
+ */
+
+try {
+    window.Popper = require('popper.js').default;
+    window.$ = window.jQuery = require('jquery');
+
+    require('bootstrap');
+} catch (e) {}
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+window.axios = require('axios');
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo';
+
+// window.Pusher = require('pusher-js');
+
+// window.Echo = new Echo({
+//     broadcaster: 'pusher',
+//     key: process.env.MIX_PUSHER_APP_KEY,
+//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+//     forceTLS: true
+// });

resources/js/components/CreateReport.vue

@@ -0,0 +1,66 @@
+<template>
+    <form class="flex flex-col space-y-6 w-full" @submit.prevent="submit" :class="{
+        'opacity-60': component.loading,
+    }">
+        <h2 class="text-xl font-medium">Create Report</h2>
+
+        <form-group label="Assignee" :errors="component.errors.assignee">
+            <select class="form-input" v-model.lazy="component.assignee">
+                <option :value="user.id" v-for="user in component.users" :key="user.id">{{ user.name }}</option>
+            </select>
+        </form-group>
+
+        <form-group label="Name" :errors="component.errors.name">
+            <input type="text" class="form-input" v-model.lazy="component.name">
+        </form-group>
+
+        <form-group label="Category" :errors="component.errors.category">
+            <select class="form-input" v-model.lazy="component.category">
+                <option :value="category" v-for="category in categories" :key="category">{{ category }}</option>
+            </select>
+        </form-group>
+
+        <button type="submit" class="bg-blue-500 text-blue-50 px-2 py-1.5 shadow rounded">Create Report</button>
+    </form>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import Errors from './Errors.vue'
+import FormGroup from './FormGroup.vue'
+export default defineComponent({
+    props: {
+        categories: {
+            type: Object as PropType<number[]>,
+            required: true,
+        },
+    },
+
+    components: { Errors, FormGroup },
+
+    data() {
+        return {
+            component: this.$airwire.component('create-report', {
+                name: 'Report ...',
+            }),
+        }
+    },
+
+    mounted() {
+        this.component.mount().then(data => {
+            this.component.defer(() => {
+                this.component.category = this.categories[0];
+                this.component.assignee = (Object.values(data.users)[0] as any).id as number;
+            });
+        })
+    },
+
+    methods: {
+        submit() {
+            this.component.create().then(_ => {
+                window.Airwire.remount(['report-filter']);
+            });
+        }
+    }
+})
+</script>

resources/js/components/CreateUser.vue

@@ -0,0 +1,50 @@
+<template>
+    <form class="flex flex-col space-y-6 w-full" @submit.prevent="submit" :class="{
+        'opacity-60': component.loading,
+    }">
+        <h2 class="text-xl font-medium">Create User</h2>
+
+        <form-group label="Name" :errors="component.errors.name">
+            <input type="text" class="form-input" v-model.lazy="component.deferred.name">
+        </form-group>
+
+        <form-group label="Email" :errors="component.errors.email">
+            <input type="email" class="form-input" v-model.lazy="component.deferred.email">
+        </form-group>
+
+        <form-group label="Password" :errors="component.errors.password">
+            <input type="password" class="form-input" v-model.lazy="component.deferred.password">
+        </form-group>
+
+        <form-group label="Confirm password" :errors="component.errors.password_confirmation">
+            <input type="password" class="form-input" v-model.lazy="component.deferred.password_confirmation">
+        </form-group>
+
+        <button type="submit" class="bg-blue-500 text-blue-50 px-2 py-1.5 shadow rounded">Create User</button>
+    </form>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Errors from './Errors.vue'
+import FormGroup from './FormGroup.vue'
+export default defineComponent({
+    components: { Errors, FormGroup },
+
+    data() {
+        return {
+            component: this.$airwire.component('create-user', {
+                name: 'John Doe',
+            }),
+        }
+    },
+
+    methods: {
+        submit() {
+            this.component.create().then(_ => {
+                window.Airwire.remount(['report-filter', 'create-report']);
+            });
+        }
+    }
+})
+</script>

resources/js/components/Errors.vue

@@ -0,0 +1,13 @@
+<template>
+    <ul class="flex flex-col list-style-none gap-2 text-red-400 text-sm font-bold">
+        <li v-for="error in errors" :key="error">{{ error }}</li>
+    </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    props: ['errors'],
+})
+</script>

resources/js/components/FormGroup.vue

@@ -0,0 +1,16 @@
+<template>
+    <label class="flex flex-col space-y-1" :key="label">
+        <span class="text-sm font-semibold text-gray-600">{{ label }}</span>
+        <slot />
+        <errors :errors="errors" :key="label" />
+    </label>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Errors from './Errors.vue'
+export default defineComponent({
+  components: { Errors },
+    props: ['label', 'errors']
+})
+</script>

resources/js/components/Main.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="flex space-x-16 p-8 w-3/4 mx-auto">
+
+        <div class="w-2/3">
+            <report-filter :categories="categories" :statuses="statuses" />
+        </div>
+        <div class="w-1/3 flex flex-col">
+            <create-report :categories="categories" />
+            <div class="my-6"></div>
+            <create-user />
+        </div>
+
+        <notification />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import CreateReport from './CreateReport.vue'
+import CreateUser from './CreateUser.vue'
+import Notification from './Notification.vue'
+import ReportFilter from './ReportFilter.vue'
+
+export default defineComponent({
+    components: { CreateReport, Notification, ReportFilter, CreateUser },
+
+    data: _ => ({
+        categories: [1, 2, 3],
+        statuses: {
+            pending: {
+                code: 'pending',
+                name: 'Pending',
+                color: 'yellow', // bg-yellow-100 text-yellow-800
+            },
+            resolved: {
+                code: 'resolved',
+                name: 'Resolved',
+                color: 'green', // bg-green-100 text-green-800
+            },
+            invalid: {
+                code: 'invalid',
+                name: 'Invalid',
+                color: 'gray', // bg-gray-100 text-gray-800
+            },
+        }
+    })
+})
+</script>

resources/js/components/Notification.vue

@@ -0,0 +1,52 @@
+<template>
+  <div aria-live="assertive" class="fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start">
+    <div class="w-full flex flex-col items-center space-y-4 sm:items-end">
+      <transition v-for="notification in notifications" :key="notification" enter-active-class="transform ease-out duration-300 transition" enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2" enter-to-class="translate-y-0 opacity-100 sm:translate-x-0" leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
+        <div class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
+          <div class="p-4">
+            <div class="flex items-center">
+              <div class="w-0 flex-1 flex justify-between">
+                <p class="w-0 flex-1 text-sm font-medium text-gray-900">
+                  {{ notification }}
+                </p>
+              </div>
+              <div class="ml-4 flex-shrink-0 flex">
+                <button @click="remove(notification)" class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                  <span class="sr-only">Close</span>
+                  <XIcon class="h-5 w-5" aria-hidden="true" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { XIcon } from '@heroicons/vue/solid'
+import { defineComponent } from '@vue/runtime-core'
+
+export default defineComponent({
+    components: {
+        XIcon,
+    },
+
+    data: () => ({
+        notifications: [] as string[],
+    }),
+
+    mounted() {
+        window.notify = (notification: string) => {
+            this.notifications.push(notification);
+        }
+    },
+
+    methods: {
+        remove(notification: string) {
+            this.notifications = this.notifications.filter(n => n !== notification);
+        }
+    },
+})
+</script>

resources/js/components/Report.vue

@@ -0,0 +1,62 @@
+<template>
+    <a href="#" class="block hover:bg-gray-50">
+        <div class="px-4 py-4 sm:px-6">
+            <div class="flex items-center justify-between">
+                <p class="text-sm font-medium text-indigo-600 truncate">
+                    {{ report.name }}
+                </p>
+                <div class="ml-2 flex-shrink-0 flex">
+                    <p :class="`px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-${color}-100 text-${color}-800`">
+                        {{ status }}
+                    </p>
+                </div>
+            </div>
+            <div class="mt-2 sm:flex sm:justify-between">
+                <div class="sm:flex">
+                    <p class="flex items-center text-sm text-gray-500">
+                        <UsersIcon class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" aria-hidden="true" />
+                        {{ report.assignee.name }}
+                    </p>
+                    <p class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:ml-6">
+                        <LocationMarkerIcon class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" aria-hidden="true" />
+                        {{ report.category }}
+                    </p>
+                </div>
+                <div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
+                    <CalendarIcon class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" aria-hidden="true" />
+                    <p>
+                        Reported on
+                        {{ ' ' }}
+                        {{ report.created_at }}
+                    </p>
+                </div>
+            </div>
+        </div>
+    </a>
+</template>
+
+<script lang="ts">
+import { CalendarIcon, LocationMarkerIcon, UsersIcon } from '@heroicons/vue/solid'
+import { defineComponent, PropType } from 'vue';
+
+export default defineComponent({
+    components: { CalendarIcon, LocationMarkerIcon, UsersIcon },
+
+    props: {
+        report: {
+            type: Object as PropType<Report>,
+            required: true,
+        },
+
+        status: {
+            type: String,
+            required: true,
+        },
+
+        color: {
+            type: String,
+            required: true,
+        },
+    }
+})
+</script>

resources/js/components/ReportFilter.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="flex flex-col space-y-6 w-full" :class="{
+        'opacity-60': component.loading,
+    }">
+        <h2 class="text-xl font-medium">Reports</h2>
+
+        <form-group label="Search" :errors="component.errors.search">
+            <input type="text" class="form-input" v-model.lazy="component.search">
+        </form-group>
+
+        <form-group label="Assignee" :errors="component.errors.assignee">
+            <select class="form-input" v-model.lazy="component.assignee">
+                <option :value="null">Any</option>
+                <option :value="user.id" v-for="user in component.users" :key="user.id">{{ user.name }}</option>
+            </select>
+        </form-group>
+
+        <form-group label="Category" :errors="component.errors.category">
+            <select class="form-input" v-model.lazy="component.category">
+                <option :value="null">Any</option>
+                <option :value="category" v-for="category in component.categories" :key="category">{{ category }}</option>
+            </select>
+        </form-group>
+
+        <form-group label="Status" :errors="component.errors.status">
+            <select class="form-input" v-model.lazy="component.status">
+                <option :value="null">Any</option>
+                <option :value="code" v-for="(status, code) in component.statuses" :key="code">{{ status.name }}</option>
+            </select>
+        </form-group>
+
+        <div class="bg-white shadow overflow-hidden sm:rounded-md" v-if="component.reports.length">
+            <ul class="divide-y divide-gray-200">
+                <li v-for="report in component.reports" :key="report.id">
+                    <div @click="component.changeStatus(report.id)">
+                        <report :report="report" :status="statuses[report.status].name" :color="statuses[report.status].color" />
+                    </div>
+                </li>
+            </ul>
+        </div>
+
+        <div v-else>No reports found.</div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from '@vue/runtime-core'
+import Errors from './Errors.vue'
+import FormGroup from './FormGroup.vue'
+import Report from './Report.vue'
+
+export default defineComponent({
+    props: {
+        categories: {
+            type: Object as PropType<number[]>,
+            required: true,
+        },
+        statuses: {
+            type: Object as PropType<{ [key: string]: { name: string, color: string, code: string } }>,
+            required: true,
+        }
+    },
+
+    components: { Errors, Report, FormGroup },
+
+    data() {
+        let storedState = JSON.parse(window.localStorage.getItem('report-filters') ?? '{}');
+
+        return {
+            component: this.$airwire.component('report-filter', {
+                readonly: {
+                    categories: this.categories,
+                    statuses: this.statuses,
+                },
+
+                ...storedState
+            }),
+        };
+    },
+
+    mounted() {
+        this.component.mount().then(data => {
+            // Load last filters
+            this.component.defer(() => {
+                this.component.status = Object.keys(this.statuses)[0];
+                this.component.category = this.categories[0];
+                this.component.assignee = (Object.values(data.users)[0] as any).id;
+            });
+
+            // Commit the changes
+            this.component.refresh();
+        })
+
+        this.component.watch(response => {
+            window.localStorage.setItem('report-filters', JSON.stringify({
+                search: response.data.search,
+                category: response.data.category,
+                assignee: response.data.assignee,
+                status: response.data.status,
+            }));
+        })
+    }
+})
+</script>

resources/js/types.d.ts

@@ -0,0 +1,11 @@
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}
+
+declare module '@heroicons/*';
+
+interface Window {
+    notify(notification: string): void;
+}