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

See Configuration Reference.