Automated commit

Signed-off-by: Oliver Davies <oliver@oliverdavies.uk>

decoupling-drupal-vuejs/demo/blue-conf/vuejs/src/App.vue

@@ -0,0 +1,57 @@
+<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">
+      <AcceptedSessionsList :sessions="sessions"/>
+      <SessionForm/>
+    </div>
+  </div>
+</template>
+
+<script>
+import AcceptedSessionsList from '@/components/AcceptedSessionsList'
+import axios from 'axios'
+import qs from 'qs'
+import saveState from 'vue-save-state'
+import SessionForm from '@/components/SessionForm'
+
+export default {
+  mixins: [saveState],
+
+  components: {
+    AcceptedSessionsList,
+    SessionForm
+  },
+
+  data () {
+    return {
+      loaded: false,
+      sessions: []
+    }
+  },
+
+  mounted () {
+    const baseUrl = process.env.VUE_APP_DRUPAL_URL
+
+    const params = qs.stringify({
+      'fields[node--session]': 'title',
+      'filter[field_session_status]': 'accepted'
+    })
+
+    axios.get(`${baseUrl}/jsonapi/node/session?${params}`)
+      .then(({ data }) => {
+        this.loaded = true
+        this.sessions = data.data
+      })
+  },
+
+  methods: {
+    getSaveStateConfig () {
+      return {
+        cacheKey: 'app'
+      }
+    }
+  }
+}
+</script>
+
+<style src="./assets/css/tailwind.css"></style>

decoupling-drupal-vuejs/demo/blue-conf/vuejs/src/assets/css/base.css

@@ -0,0 +1,17 @@
+h1,
+h2 {
+  @apply font-semibold
+}
+
+input,
+textarea {
+  @apply mt-1 p-2 w-full border border-gray-400
+}
+
+input[type=submit] {
+  @apply w-full;
+
+  @screen sm {
+    @apply w-auto
+  }
+}

decoupling-drupal-vuejs/demo/blue-conf/vuejs/src/assets/css/tailwind.css

@@ -0,0 +1,6 @@
+@import 'tailwindcss/base';
+@import './base.css';
+
+@import 'tailwindcss/components';
+
+@import 'tailwindcss/utilities';

decoupling-drupal-vuejs/demo/blue-conf/vuejs/src/components/AcceptedSessionsList.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <h1 class="text-4xl">Accepted Sessions</h1>
+
+    <div v-if="sessions.length" class="mt-2 p-6 bg-white rounded-lg border">
+      <ul>
+        <li v-for="{ attributes } in sortedSessions" :key="attributes.drupal_internal__nid" class="mt-3 first:mt-0">
+          {{ attributes.title }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import sortBy from 'lodash/sortBy'
+
+export default {
+  props: {
+    sessions: {
+      type: Array,
+      required: true
+    }
+  },
+
+  computed: {
+    sortedSessions: function () {
+      return sortBy(this.sessions, 'attributes.title')
+    }
+  }
+}
+</script>

decoupling-drupal-vuejs/demo/blue-conf/vuejs/src/components/SessionForm.vue

@@ -0,0 +1,97 @@
+<template>
+  <section class="mt-8">
+    <h2 class="text-2xl mb-4">Submit a Session</h2>
+
+    <SessionFormMessage :messages="messages" class="bg-green-100 border-green-300"/>
+    <SessionFormMessage :messages="errors" class="bg-red-100 border-red-300"/>
+
+    <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 map from 'lodash/map'
+import SessionFormMessage from '@/components/SessionFormMessage'
+
+export default {
+  components: {
+    SessionFormMessage
+  },
+
+  data () {
+    return {
+      errors: [],
+      form: {
+        body: '',
+        field_session_status: 'submitted',
+        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 }) => {
+        this.errors = []
+        this.messages = []
+
+        const title = data.data.attributes.title
+        this.messages.push(`Session ${title} has been created.`)
+
+        this.form.body = ''
+        this.form.title = ''
+      }).catch(({ response: { data } }) => {
+        this.errors = map(data.errors, 'detail')
+      })
+    }
+  }
+}
+</script>

decoupling-drupal-vuejs/demo/blue-conf/vuejs/src/components/SessionFormMessage.vue

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

decoupling-drupal-vuejs/demo/blue-conf/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')