Move Vue into the vuejs directory

vuejs/src/App.vue

@@ -0,0 +1,78 @@
+<template>
+  <div id="app" class="antialiased min-h-screen font-sans bg-gray-100 text-black p-12">
+    <div class="w-full max-w-2xl mx-auto">
+      <accepted-sessions-list :sessions="sortedSessions" />
+      <session-form @submitted="addSession($event)"></session-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import AcceptedSessionsList from '@/components/AcceptedSessionsList'
+import SessionForm from '@/components/SessionForm'
+
+const axios = require('axios')
+
+export default {
+  components: {
+    AcceptedSessionsList,
+    SessionForm
+  },
+
+  data () {
+    return {
+      loaded: false,
+      sessions: []
+    }
+  },
+
+  mounted () {
+    const baseUrl = process.env.VUE_APP_DRUPAL_URL
+
+    axios.get(`${baseUrl}/jsonapi/node/session`)
+      .then(({ data }) => {
+        this.loaded = true
+        this.sessions = data.data
+      })
+  },
+
+  methods: {
+    addSession: function (session) {
+      this.sessions.push(session)
+    }
+  },
+
+  computed: {
+    sortedSessions: function () {
+      return _(this.sessions).sortBy(({ attributes }) => attributes.title)
+    }
+  }
+}
+</script>
+
+<style>
+@tailwind base;
+
+h1,
+h2 {
+  @apply font-semibold
+}
+
+input,
+textarea {
+  @apply w-full border border-gray-400 p-2 mt-1
+}
+
+input[type=submit] {
+  @apply w-full;
+
+  @screen sm {
+    @apply w-auto
+  }
+}
+
+@tailwind components;
+
+@tailwind utilities;
+</style>

vuejs/src/components/AcceptedSessionsList.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <h1 class="text-4xl mb-2">Sessions</h1>
+
+    <div v-if="acceptedSessions.length" class="bg-white p-6 rounded-lg border">
+      <ul class="-mb-3">
+        <li v-for="{ attributes } in acceptedSessions" :key="attributes.drupal_internal__nid" class="mb-3">
+          {{ attributes.title }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    sessions: {
+      type: Object,
+      required: true
+    }
+  },
+
+  computed: {
+    acceptedSessions: function () {
+      return this.sessions
+        .filter(session => this.isAccepted(session))
+        .value()
+    }
+  },
+
+  methods: {
+    isAccepted: function ({ attributes }) {
+      return attributes.field_session_status === 'accepted'
+    }
+  }
+}
+</script>

vuejs/src/components/SessionForm.vue

@@ -0,0 +1,100 @@
+<template>
+  <section class="mt-8">
+    <h2 class="text-2xl mb-4">Submit a Session</h2>
+
+    <session-form-message :messages="messages" class="bg-green-100 border-green-300"></session-form-message>
+
+    <session-form-message :messages="errors" class="bg-red-100 border-red-300"></session-form-message>
+
+    <form action="" @submit.prevent="submit">
+      <label class="block mb-4">
+        Title
+        <input name="title" type="text" v-model="form.title" required/>
+      </label>
+
+      <label class="block mb-4">
+        Abstract
+        <textarea name="title" rows="5" v-model="form.body" required/>
+      </label>
+
+      <input class="cursor-pointer bg-blue-500 hover:bg-blue-700 focus:bg-blue-700 text-gray-100 px-4 py-2 rounded" type="submit" value="Submit session">
+    </form>
+  </section>
+</template>
+
+<script>
+import axios from 'axios'
+import _ from 'lodash'
+import SessionFormMessage from '@/components/SessionFormMessage'
+
+export default {
+  components: {
+    SessionFormMessage
+  },
+
+  data () {
+    return {
+      errors: [],
+      form: {
+        body: '',
+        field_session_status: 'accepted',
+        field_session_type: 'full',
+        title: ''
+      },
+      messages: []
+    }
+  },
+
+  methods: {
+    submit () {
+      const adminUuid = '11dad4c2-baa8-4fb2-97c6-12e1ce925806'
+      const apiUuid = '63936126-87cd-4166-9cb4-63b61a210632'
+
+      const data = {
+        type: 'node--session',
+        attributes: this.form,
+        relationships: {
+          'field_speakers': {
+            'data': {
+              'id': adminUuid,
+              'type': 'user--user'
+            }
+          },
+          'uid': {
+            'data': {
+              'id': apiUuid,
+              'type': 'user--user'
+            }
+          }
+        }
+      }
+
+      const baseUrl = process.env.VUE_APP_DRUPAL_URL
+
+      axios({
+        method: 'post',
+        url: `${baseUrl}/jsonapi/node/session`,
+        data: { data },
+        headers: {
+          'Accept': 'application/vnd.api+json',
+          'Authorization': 'Basic YXBpOmFwaQ==',
+          'Content-Type': 'application/vnd.api+json'
+        }
+      }).then(({ data: { data: { attributes } } }) => {
+        const title = attributes.title
+        this.messages.push(`Session ${title} has been created.`)
+
+        this.$emit('submitted', data)
+
+        this.form.body = ''
+        this.form.title = ''
+
+        this.errors = []
+        this.messages = []
+      }).catch(({ response: { data } }) => {
+        this.errors = _(data.errors).map('detail').value()
+      })
+    }
+  }
+}
+</script>

vuejs/src/components/SessionFormMessage.vue

@@ -0,0 +1,19 @@
+<template>
+  <div v-if="messages.length" class="border p-4 mb-6">
+    <ul class="list-disc list-inside ml-3">
+      <li v-for="message in messages" :key="message">{{ message }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    messages: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  }
+}
+</script>

vuejs/src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')