opdavies/decoupling-drupal-vuejs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move Vue into the vuejs directory

Browse source
This commit is contained in:
Oliver Davies 2019-06-05 19:23:45 +01:00
parent a4b018204d
commit d7c864b63b
21 changed files with 13 additions and 15 deletions

2
vuejs/.browserslistrc Normal file
View file

@ -0,0 +1,2 @@
> 1%
last 2 versions

5
vuejs/.editorconfig Normal file
View file

@ -0,0 +1,5 @@
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

1
vuejs/.env Normal file
View file

@ -0,0 +1 @@
VUE_APP_DRUPAL_URL=

17
vuejs/.eslintrc.js Normal file
View file

@ -0,0 +1,17 @@
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'@vue/standard'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}

21
vuejs/.gitignore vendored Normal file
View file

@ -0,0 +1,21 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

34
vuejs/README.md Normal file
View file

@ -0,0 +1,34 @@
# blueconf
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn run serve
```
### Compiles and minifies for production
```
yarn run build
```
### Run your tests
```
yarn run test
```
### Lints and fixes files
```
yarn run lint
```
### Run your unit tests
```
yarn run test:unit
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

5
vuejs/babel.config.js Normal file
View file

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/app'
]
}

30
vuejs/jest.config.js Normal file
View file

@ -0,0 +1,30 @@
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue'
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest'
},
transformIgnorePatterns: [
'/node_modules/'
],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
testURL: 'http://localhost/',
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname'
]
}

33
vuejs/package.json Normal file
View file

@ -0,0 +1,33 @@
{
"name": "blueconf",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"axios": "^0.18.0",
"core-js": "^2.6.5",
"postcss-nested": "^4.1.2",
"tailwindcss": "^1.0.1",
"vue": "^2.6.10",
"vue-router": "^3.0.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.7.0",
"@vue/cli-plugin-eslint": "^3.7.0",
"@vue/cli-plugin-unit-jest": "^3.7.0",
"@vue/cli-service": "^3.7.0",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/test-utils": "1.0.0-beta.29",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.5.21"
}
}

7
vuejs/postcss.config.js Normal file
View file

@ -0,0 +1,7 @@
module.exports = {
plugins: {
tailwindcss: {},
'postcss-nested': {},
autoprefixer: {}
}
}

BIN
vuejs/public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width: 32px  |  Height: 32px  |  Size: 4.2 KiB

17
vuejs/public/index.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Blue Conf</title>
</head>
<body>
<noscript>
<strong>We're sorry but Blue Conf doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

78
vuejs/src/App.vue Normal file
View file

@ -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>

BIN
vuejs/src/assets/logo.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 6.7 KiB

38
vuejs/src/components/AcceptedSessionsList.vue Normal file
View file

@ -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>

100
vuejs/src/components/SessionForm.vue Normal file
View file

@ -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>

19
vuejs/src/components/SessionFormMessage.vue Normal file
View file

@ -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>

8
vuejs/src/main.js Normal file
View file

@ -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')

5
vuejs/tests/unit/.eslintrc.js Normal file
View file

@ -0,0 +1,5 @@
module.exports = {
env: {
jest: true
}
}

12
vuejs/tests/unit/example.spec.js Normal file
View file

@ -0,0 +1,12 @@
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
propsData: { msg }
})
expect(wrapper.text()).toMatch(msg)
})
})

10027
vuejs/yarn.lock Normal file
View file

File diff suppressed because it is too large Load diff