From 678f6add5ee9803ab14a78731cf3edec5bb73aaf Mon Sep 17 00:00:00 2001
From: Rasta <hudak.rastislav@gmail.com>
Date: Fri, 17 May 2019 12:03:20 +0200
Subject: [PATCH] add and manage container members

---
 package-lock.json               |  11 +-
 package.json                    |   2 +-
 src/components/AddMember.vue    | 222 ++++++++++++++++++++++++++++++++
 src/components/Detail.vue       |  33 ++++-
 src/components/SubmitEmpty.vue  |  20 ++-
 src/components/SubmitKsaEda.vue |  13 ++
 src/router/index.js             |   6 +
 7 files changed, 288 insertions(+), 19 deletions(-)
 create mode 100644 src/components/AddMember.vue

diff --git a/package-lock.json b/package-lock.json
index d532af6..a678184 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7673,9 +7673,9 @@
       "dev": true
     },
     "phaidra-vue-components": {
-      "version": "0.3.33",
-      "resolved": "https://registry.npmjs.org/phaidra-vue-components/-/phaidra-vue-components-0.3.33.tgz",
-      "integrity": "sha512-/Z6v5AIj1jQ4JTQPAWk/P7EoN/0uDFMm5vnylknrf4cjRM/2tVLQdH8la6XN29MhrrUFOidZUGAkCgx+lRubpA==",
+      "version": "0.3.34",
+      "resolved": "https://registry.npmjs.org/phaidra-vue-components/-/phaidra-vue-components-0.3.34.tgz",
+      "integrity": "sha512-t9pCq10fCHizS3cl7n5eurhnFqMw/9wSpBudkGPB9/4pM3sV6XdD8zOKd+gS5w5Owerk8j/vpmLN7j0FVBoGkw==",
       "requires": {
         "base-64": "^0.1.0",
         "moment": "^2.24.0",
@@ -7691,11 +7691,6 @@
           "version": "8.11.2",
           "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.11.2.tgz",
           "integrity": "sha512-STcpmxqBrG77SyWi7e0Yn/B3DjKR6mSDwYS4F/V7zoi+e/+CPbVb2TaBqFwnrkoDcPmRfjM7nTwsiRQQOGdifw=="
-        },
-        "vuetify": {
-          "version": "1.5.14",
-          "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.5.14.tgz",
-          "integrity": "sha512-7iM+TfghR/wu/Gl+k37lKr0N8Ddr6SxzqHtoK1dIyHgCH6SJRkpaXPw2MC5/FsAg9aUDJbYNWrzSeu5eHw+Q/w=="
         }
       }
     },
diff --git a/package.json b/package.json
index 43f0e38..6a2c995 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "es6-promise": "^4.2.5",
     "growl": "^1.10.5",
     "moment": "^2.24.0",
-    "phaidra-vue-components": "^0.3.33",
+    "phaidra-vue-components": "^0.3.34",
     "qs": "^6.6.0",
     "vue": "^2.6.6",
     "vue-i18n": "^7.8.1",
diff --git a/src/components/AddMember.vue b/src/components/AddMember.vue
new file mode 100644
index 0000000..10d4a27
--- /dev/null
+++ b/src/components/AddMember.vue
@@ -0,0 +1,222 @@
+<template>
+  <v-flex>
+    <v-flex>
+      <v-breadcrumbs :items="breadcrumbs" divider="/"></v-breadcrumbs>
+    </v-flex>
+    <v-card>
+      <v-toolbar flat>
+        <v-toolbar-title>{{ $t('Add member of') }} {{this.parentpid}}</v-toolbar-title>        
+        <v-divider class="mx-3" inset vertical></v-divider>
+        <v-checkbox class="pt-4 pl-4" v-model="isthumbnail" :label="$t('Container thumbnail')"></v-checkbox>
+        <v-spacer></v-spacer>
+      </v-toolbar>
+      <v-card-text>
+        <p-i-form
+          :form="form"
+          :templating="false"
+          v-on:object-created="objectCreated($event)"
+          v-on:load-form="form = $event"
+          v-on:form-input-p-select="handleSelect($event)"
+        ></p-i-form>
+      </v-card-text>
+    </v-card>
+  </v-flex>
+</template>
+
+<script>
+import fields from 'phaidra-vue-components/src/utils/fields'
+
+export default {
+  name: 'add-member',
+  data () {
+    return {
+      parentpid: '',
+      memberpid: '',
+      isthumbnail: false,
+      form: {
+        sections: [
+          {
+            title: '',
+            id: 1,
+            type: 'digitalobject',
+            fields: []
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    breadcrumbs () {
+      let bc = [
+        {
+          text: this.$t('Search'),
+          to: { name: 'search', path: '/' }
+        },
+        {
+          text: this.$t('Detailpage') + ' ' + this.parentpid,
+          to: { name: 'detail', params: { pid: this.parentpid } }
+        },
+        {
+          text: this.$t('Add member of') + ' ' + this.parentpid,
+          disabled: true
+        }
+      ]
+      return bc
+    },
+    vocabularies: function () {
+      return this.$store.state.vocabulary.vocabularies
+    }
+  },
+  methods: {
+    getResourceTypeFromMimeType: function (mime) {
+      switch (mime) {
+        case 'image/jpeg':
+        case 'image/tiff':
+        case 'image/gif':
+        case 'image/png':
+        case 'image/x-ms-bmp':
+          // picture
+          return 'https://pid.phaidra.org/vocabulary/44TN-P1S0'
+
+        case 'audio/wav':
+        case 'audio/mpeg':
+        case 'audio/flac':
+        case 'audio/ogg':
+          // audio
+          return 'https://pid.phaidra.org/vocabulary/8YB5-1M0J'
+
+        case 'application/pdf':
+          // document
+          return 'https://pid.phaidra.org/vocabulary/69ZZ-2KGX'
+
+        case 'video/mpeg':
+        case 'video/avi':
+        case 'video/mp4':
+        case 'video/quicktime':
+        case 'video/x-matroska':
+          // video
+          return 'https://pid.phaidra.org/vocabulary/B0Y6-GYT8'
+
+        // eg application/x-iso9660-image
+        default:
+          // data
+          return 'https://pid.phaidra.org/vocabulary/7AVS-Y482'
+      }
+    },
+    handleSelect: function (val) {
+      var i
+      var j
+      var k
+      if (val.predicate === 'ebucore:hasMimeType') {
+        for (i = 0; i < this.form.sections.length; i++) {
+          var mime
+          if (this.form.sections[i].fields) {
+            for (j = 0; j < this.form.sections[i].fields.length; j++) {
+              if (this.form.sections[i].fields[j].predicate === 'ebucore:hasMimeType') {
+                mime = this.form.sections[i].fields[j].value
+              }
+            }
+          }
+          var resourcetype = this.getResourceTypeFromMimeType(mime)
+          if (this.form.sections[i].fields) {
+            for (j = 0; j < this.form.sections[i].fields.length; j++) {
+              if (this.form.sections[i].fields[j].predicate === 'dcterms:type') {
+                var rt = this.form.sections[i].fields[j]
+                rt.value = resourcetype
+                var preflabels
+                for (k = 0; k < this.vocabularies['resourcetype'].terms.length; k++) {
+                  if (this.vocabularies['resourcetype'].terms[k]['@id'] === rt.value) {
+                    preflabels = this.vocabularies['resourcetype'].terms[k]['skos:prefLabel']
+                  }
+                }
+                rt['skos:prefLabel'] = []
+                Object.entries(preflabels).forEach(([key, value]) => {
+                  rt['skos:prefLabel'].push({ '@value': value, '@language': key })
+                })
+              }
+            }
+          }
+          this.form.sections.splice(i, 1, this.form.sections[i])
+        }
+      }
+    },
+    objectCreated: function (event) {
+      this.memberpid = event
+      this.$store.commit('setAlerts', [{ type: 'success', msg: this.$t('Upload successful') + ' ' + event }])
+      // add membership relation
+      var self = this
+      var httpFormData = new FormData()
+      this.loading = true
+      httpFormData.append('predicate', 'http://pcdm.org/models#hasMember')
+      httpFormData.append('object', 'info:fedora/' + self.memberpid)
+      var url = self.$store.state.settings.instance.api + '/object/' + self.parentpid + '/relationship/add'
+      var promise = fetch(url, {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+          'X-XSRF-TOKEN': self.$store.state.user.token
+        },
+        body: httpFormData
+      })
+      .then(function (response) { return response.json() })
+      .then(function (json) {
+        if (self.isthumbnail) {
+          httpFormData = new FormData()
+          httpFormData.append('predicate', 'http://phaidra.org/XML/V1.0/relations#isThumbnailFor')
+          httpFormData.append('object', 'info:fedora/' + self.parentpid)
+          url = self.$store.state.settings.instance.api + '/object/' + self.memberpid + '/relationship/add'
+          var promise2 = fetch(url, {
+            method: 'POST',
+            mode: 'cors',
+            headers: {
+              'X-XSRF-TOKEN': self.$store.state.user.token
+            },
+            body: httpFormData
+          })
+          .then(function (response) { return response.json() })
+          .then(function (json) {
+            self.loading = false
+            self.$router.push({ name: 'detail', params: { pid: self.parentpid } })
+          })
+          .catch(function (error) {
+            console.log(error)
+          })
+
+          return promise2
+        } else {
+          self.loading = false
+          self.$router.push({ name: 'detail', params: { pid: self.parentpid } })
+        }
+      })
+      .catch(function (error) {
+        console.log(error)
+      })
+      return promise
+    }
+  },
+  mounted: function () {
+    var rt = fields.getField('resource-type')
+    rt.value = 'https://pid.phaidra.org/vocabulary/7AVS-Y482'
+    this.form.sections[0].fields.push(rt)
+    this.form.sections[0].fields.push(fields.getField('file'))
+    this.form.sections[0].fields.push(fields.getField('title'))
+    this.form.sections[0].fields.push(fields.getField('description'))
+    var mt = fields.getField('mime-type')
+    mt.required = true
+    this.form.sections[0].fields.push(mt)
+    this.form.sections[0].fields.push(fields.getField('digitization-note'))
+    this.form.sections[0].fields.push(fields.getField('role'))
+    this.form.sections[0].fields.push(fields.getField('license'))
+    this.form.sections[0].fields.push(fields.getField('rights'))
+  },
+  beforeRouteEnter: function (to, from, next) {
+    next(vm => {
+      vm.parentpid = from.params.pid
+    })
+  },
+  beforeRouteUpdate: function (to, from, next) {
+    this.parentpid = from.params.pid
+  }
+}
+</script>
+
diff --git a/src/components/Detail.vue b/src/components/Detail.vue
index d68b7bf..df439b1 100644
--- a/src/components/Detail.vue
+++ b/src/components/Detail.vue
@@ -28,7 +28,7 @@
 
           <v-flex v-if="dshash['JSON-LD']">
             <p-d-jsonld
-              :jsonld="displayjsonld[doc.pid]"
+              :jsonld="displayjsonld[doc.pid]" :pid="doc.pid"
             ></p-d-jsonld>
           </v-flex>
 
@@ -53,9 +53,28 @@
               </center>
               <v-card-text class="ma-2">
                 <p-d-jsonld
-                  :jsonld="displayjsonld[member.pid]"
+                  :jsonld="displayjsonld[member.pid]" :pid="member.pid"
                 ></p-d-jsonld>
               </v-card-text>
+              <v-divider light v-if="canRead"></v-divider>
+              <v-card-actions class="pa-3" v-if="canRead">
+                <v-spacer></v-spacer>
+                <v-btn v-if="member.cmodel === 'Picture'" target="_blank" :href="'https://' + instance.baseurl + '/imageserver/' + member.pid" primary>{{ $t('View') }}</v-btn>
+                <v-btn :href="getMemberDownloadUrl(member)" primary>{{ $t('Download') }}</v-btn>
+                <v-menu offset-y v-if="canWrite">
+                  <template v-slot:activator="{ on }">
+                    <v-btn color="primary" dark v-on="on">{{ $t('Edit') }}<v-icon right dark>arrow_drop_down</v-icon></v-btn>
+                  </template>
+                  <v-list>
+                    <v-list-tile :to="{ name: 'metadataeditor', params: { pid: member.pid } }">
+                      <v-list-tile-title>{{ $t('Edit metadata') }}</v-list-tile-title>
+                    </v-list-tile>
+                    <v-list-tile :to="{ name: 'manage', params: { pid: member.pid } }">
+                      <v-list-tile-title>{{ $t('Manage object') }}</v-list-tile-title>
+                    </v-list-tile>
+                  </v-list>
+                </v-menu>
+              </v-card-actions>
             </v-card>
           </v-flex>
 
@@ -219,7 +238,7 @@
             <v-divider></v-divider>
           </v-card>
 
-          <v-card flat  v-if="canWrite">
+          <v-card flat v-if="canWrite">
             <v-card-text>
               <v-layout column>
                 <v-flex>
@@ -229,6 +248,7 @@
                   <v-layout column>
                     <router-link class="mb-1" :to="{ name: 'metadataeditor' }">{{ $t('Edit metadata') }}</router-link>
                     <router-link class="mb-1" :to="{ name: 'manage' }">{{ $t('Manage object') }}</router-link>
+                    <router-link class="mb-1" :to="{ name: 'addmember' }">{{ $t('Upload container member') }}</router-link>
                   </v-layout>
                 </v-flex>
               </v-layout>
@@ -505,6 +525,13 @@ export default {
       .catch(function (error) {
         console.log(error)
       })
+    },
+    getMemberDownloadUrl: function (member) {
+      if (member.cmodel === 'Asset' || member.cmodel === 'Video') {
+        return this.instance.fedora + '/objects/' + member.pid + '/methods/bdef:Content/download'
+      } else {
+        return this.instance.api + '/object/' + member.pid + '/diss/Content/download'
+      }
     }
   },
   beforeRouteEnter: function (to, from, next) {
diff --git a/src/components/SubmitEmpty.vue b/src/components/SubmitEmpty.vue
index 28564f1..b2ea800 100644
--- a/src/components/SubmitEmpty.vue
+++ b/src/components/SubmitEmpty.vue
@@ -19,6 +19,7 @@
           :form="form"
           v-on:load-form="form = $event" 
           v-on:object-created="objectCreated($event)"
+          v-on:add-phaidrasubject-section="addPhaidrasubjectSection($event)"
         ></p-i-form>
       </v-card-text>
     </v-card>
@@ -127,6 +128,17 @@ export default {
           return 'https://pid.phaidra.org/vocabulary/7AVS-Y482'
       }
     },
+    addPhaidrasubjectSection: function (afterSection) {
+      let s = {
+        title: 'Subject',
+        type: 'phaidra:Subject',
+        id: this.form.sections.length + 1,
+        removable: true,
+        multiplicable: true,
+        fields: []
+      }
+      this.form.sections.splice(this.form.sections.indexOf(afterSection) + 1, 0, s)
+    },
     objectCreated: function (event) {
       this.$store.commit('setAlerts', [{ type: 'success', msg: 'Object ' + event + ' created' }])
       this.$router.push({ name: 'detail', params: { pid: event } })
@@ -137,15 +149,9 @@ export default {
         sections: [
           {
             title: 'Digital object',
+            type: 'digitalobject',
             id: 1,
             fields: []
-          },
-          {
-            title: 'Subject',
-            type: 'phaidra:Subject',
-            id: 2,
-            multiplicable: true,
-            fields: []
           }
         ]
       }
diff --git a/src/components/SubmitKsaEda.vue b/src/components/SubmitKsaEda.vue
index 78631d2..d7ae76f 100644
--- a/src/components/SubmitKsaEda.vue
+++ b/src/components/SubmitKsaEda.vue
@@ -22,6 +22,7 @@
           v-on:load-form="form = $event" 
           v-on:object-created="objectCreated($event)"
           v-on:form-input-p-select="handleSelect($event)"
+          v-on:add-phaidrasubject-section="addPhaidrasubjectSection($event)"
         ></p-i-form>
       </v-card-text>
     </v-card>
@@ -203,6 +204,7 @@ export default {
         sections: [
           {
             title: 'General metadata',
+            type: 'digitalobject',
             id: 1,
             fields: []
           },
@@ -314,6 +316,17 @@ export default {
       this.form.sections[3].fields.push(fields.getField('role'))
       this.form.sections[3].fields.push(fields.getField('license'))
       this.form.sections[3].fields.push(fields.getField('rights'))
+    },
+    addPhaidrasubjectSection: function (afterSection) {
+      let s = {
+        title: 'Subject',
+        type: 'phaidra:Subject',
+        id: this.form.sections.length + 1,
+        removable: true,
+        multiplicable: true,
+        fields: []
+      }
+      this.form.sections.splice(this.form.sections.indexOf(afterSection) + 1, 0, s)
     }
   },
   mounted: function () {
diff --git a/src/router/index.js b/src/router/index.js
index 429c943..be1b421 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@ import MetadataEditor from '@/components/MetadataEditor'
 import Submit from '@/components/Submit'
 import SubmitKsaEda from '@/components/SubmitKsaEda'
 import SubmitEmpty from '@/components/SubmitEmpty'
+import AddMember from '@/components/AddMember'
 
 Vue.use(Router)
 
@@ -64,6 +65,11 @@ export default new Router({
       path: '/submit/empty',
       name: 'submit-empty',
       component: SubmitEmpty
+    },
+    {
+      path: '/addmember/:pid',
+      name: 'addmember',
+      component: AddMember
     }
   ]
 })