phaidra-vue-components v0.9.0
phaidra-vue-components
Example usage
Create a new Vue project
vue create test-phaidra-components
Install additional dependencies
npm install --save-dev stylus
npm install --save-dev stylus-loader
npm install --save vuetify
npm install --save vuex
npm install --save vue-i18n
npm install --save phaidra-vue-components
main.js
import Vue from 'vue'
import './plugins/vuetify'
import Vuetify from 'vuetify'
import VueI18n from 'vue-i18n'
import store from 'phaidra-vue-components/src/store'
import eng from 'phaidra-vue-components/src/i18n/eng'
import deu from 'phaidra-vue-components/src/i18n/deu'
import ita from 'phaidra-vue-components/src/i18n/ita'
import PhaidraVueComponents from 'phaidra-vue-components'
import App from './App.vue'
Vue.config.productionTip = false
Vue.use(Vuetify)
Vue.use(VueI18n)
Vue.use(PhaidraVueComponents)
const messages = { eng, deu, ita }
const i18n = new VueI18n({
locale: 'deu',
messages: messages
})
new Vue({
store,
i18n,
render: h => h(App),
}).$mount('#app')
Add material icons and font to public/index.html
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
Create src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'
Vue.use(Vuetify, {
iconfont: 'md',
})
Copy the template of App.vue from phaidra-vue-components library, in the template remove {{version}}
from heading, as for the js part, use this js instead:
import fields from 'phaidra-vue-components/src/utils/fields'
export default {
name: 'app',
computed: {
user: function() {
return this.$store.state.user.lastname ? this.$store.state.user.firstname + ' ' + this.$store.state.user.lastname : null
}
},
data () {
return {
alerts: [],
window: 0,
loadedform: {},
form: {
sections: [
{
title: 'General metadata',
id: 1,
fields: []
},
{
title: 'Digitized object',
type: 'phaidra:DigitizedObject',
id: 2,
fields: []
},
{
title: 'Subject',
type: 'phaidra:Subject',
id: 3,
multiplicable: true,
fields: []
}
]
},
pid: '',
solrbaseurl: 'https://app01.cc.univie.ac.at:8983/solr/phaidra_sandbox',
apibaseurl: 'https://services.phaidra-sandbox.univie.ac.at/api',
credentials: {
username: '',
password: ''
},
contentmodel: 'unknown',
contentmodels: [ { text: 'Data', value: 'unknown' }, { text: 'Picture', value: 'picture' } ],
psvis: true
}
},
methods: {
loadDisplay: function() {
this.$refs.display.loadMetadata(this.pid)
},
loadEdit: function() {
this.$refs.edit.loadMetadata(this.pid)
},
login: function () {
this.$store.dispatch('login', this.credentials)
},
logout: function () {
this.$store.dispatch('logout')
},
objectCreated: function (event) {
alert('Object ' + event + ' created')
},
objectSaved: function (event) {
alert('Metadata for object ' + event + ' saved')
},
toggleVisibility: function () {
this.psvis = !this.psvis
},
dismiss: function (alert) {
this.$store.commit('clearAlert', alert)
}
},
mounted: function () {
this.$store.commit('setInstanceApi', this.apibaseurl)
this.$store.commit('setInstanceSolr', this.solrbaseurl)
this.form.sections[0].fields.push(fields.getField('file'))
this.form.sections[0].fields.push(fields.getField('resource-type'))
this.form.sections[0].fields.push(fields.getField('title'))
this.form.sections[0].fields.push(fields.getField('language'))
this.form.sections[0].fields.push(fields.getField('description'))
this.form.sections[0].fields.push(fields.getField('keyword'))
this.form.sections[0].fields.push(fields.getField('project'))
this.form.sections[0].fields.push(fields.getField('funder'))
this.form.sections[0].fields.push(fields.getField('role'))
this.form.sections[0].fields.push(fields.getField('license'))
this.form.sections[1].fields.push(fields.getField('title'))
this.form.sections[1].fields.push(fields.getField('description'))
this.form.sections[1].fields.push(fields.getField('inscription'))
this.form.sections[1].fields.push(fields.getField('height'))
this.form.sections[1].fields.push(fields.getField('shelf-mark'))
this.form.sections[1].fields.push(fields.getField('technique-getty-aat-select'))
this.form.sections[1].fields.push(fields.getField('digitization-note'))
this.form.sections[1].fields.push(fields.getField('reproduction-note'))
this.form.sections[2].fields.push(fields.getField('title'))
this.form.sections[2].fields.push(fields.getField('description'))
this.form.sections[2].fields.push(fields.getField('temporal-coverage'))
this.form.sections[2].fields.push(fields.getField('spatial-text'))
}
}
If you are using a store in your app, you need to add the necessary phaidra-vue-components store modules to your store: store/index.js
import vocabulary from 'phaidra-vue-components/src/store/modules/vocabulary'
...
export default new Vuex.Store({
...
modules: {
... ,
vocabulary
}
})
Issue
npm run serve
or use 'vue ui' to start your application.
dev
Prerequisities
You might need more watchers, see Webpack documentation
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Run your tests
npm run test
Lints and fixes files
npm run lint
Customize configuration
10 months ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago