Merge branch 'comments' into 'master'

Release 1.1

See merge request bi40resu/vue-letters!3

app.js

@@ -213,6 +213,15 @@ app.get('/api/letters/:letter?', function (req, res) {
   }
 })
 
+app.get('/api/metadata/table', function (req, res) {
+  // Document Metadata Endpoint in Table Format
+
+  console.time('> Table Letters')
+  res.send(lib.table(loadDocuments(DIR)))
+  console.timeEnd('> Table Letters')
+
+})
+
 // Where the magic happens
 loadDocumentsToCache(DIR)
 

lib.js

@@ -143,6 +143,34 @@ function searchFeaturesInDocument (document, query) {
   return document
 }
 
+function metadataTable (objs) {
+  /*
+   * Turn list of documents objects into metadata table format
+   */
+
+  let items = []
+
+  for (let item of objs) {
+    let meta = item.object.TEI.teiHeader.fileDesc.titleStmt
+    try {
+      items.push({
+        title: meta.title._text,
+        collection: meta.collection._text,
+        author: meta.author._text,
+        recipient: meta.recipient._text,
+        gender: meta.gender._text,
+        date: meta.date._text,
+        place: meta.place._text
+      })
+    } catch (err) {
+      console.log(arguments.callee) // eslint-disable-line no-caller
+      console.log('>> Error while table formating' + meta.title._text)
+    }
+  }
+
+  return items
+}
+
 module.exports = {
   features: function (obj, query) {
     return searchFeaturesInDocument(obj, query)
@@ -150,6 +178,9 @@ module.exports = {
   search: function (obj, query) {
     return searchInDocument(obj, query)
   },
+  table: function (objs) {
+    return metadataTable(objs)
+  },
   compare: function (a, b) {
     if (a.hits > b.hits) { return -1 }
     if (a.hits < b.hits) { return 1 }

src/App.vue

@@ -65,6 +65,11 @@
           active: false,
           text: 'Letters',
           icon: 'local_post_office'
+        }, {
+          href: '/metadata',
+          active: false,
+          text: 'Metadata',
+          icon: 'grid_on'
         }, {
           href: '/features',
           active: false,

src/components/Letter.vue

@@ -39,9 +39,10 @@
     <v-flex xs5>
       <v-card>
         <v-card-text>
+          <v-checkbox label="Show Comments" v-model="showComments"></v-checkbox>
           <ul style="list-style-type:none;" class="letter-text">
-            <li v-for="(value, key) in letter.text.body.l" :class="value._attributes.no">
-              {{value._attributes.no }}: {{ value._text }}
+            <li v-for="(value, key) in letter.text.body.l" :class="value._attributes.no" v-if="hasText(formatText(value._text))">
+              {{value._attributes.no }}: {{ formatText(value._text) }}
             </li>
           </ul>
         </v-card-text>
@@ -81,10 +82,22 @@ export default {
       lettername: '',
       letter: null,
       images: [],
+      showComments: true,
       features: []
     }
   },
   methods: {
+    hasText (text) {
+      // Check if string is empty
+      return text.length !== 0
+    },
+    formatText (text) {
+      // Remove [Stuff] from text
+      if (!this.showComments) {
+        text = text.replace(/\[.*\]/, '')
+      }
+      return text
+    },
     capitalize (word) {
       // Capitalize first letter of a String
       return word.charAt(0).toUpperCase() + word.slice(1)
@@ -103,6 +116,7 @@ export default {
     this.lettername = this.$route.params.letter
     this.$http.get('http://localhost:3000/api/letters/' + this.lettername).then(function (data) {
       // If there's only one element xml-js makes no array... great stuff -.-
+
       if (data.body.TEI.text.head.graphic instanceof Array) {
         this.images = data.body.TEI.text.head.graphic
       } else {

src/components/Metadata.vue

+<template>
+<v-container grid-list-md>
+  <v-layout row wrap>
+    <v-flex xs12>
+      <h3>{{header}}</h3>
+    </v-flex>
+
+    <v-flex xs12>
+      <v-card-title>
+        <v-text-field
+          append-icon="search"
+          label="Search"
+          single-line
+          hide-details
+          v-model="search"
+          ></v-text-field>
+      </v-card-title>
+    </v-flex>
+
+    <v-flex xs12 v-if="items">
+      <v-data-table
+        v-bind:headers="headers"
+        v-bind:items="items"
+        v-bind:search="search"
+        hide-actions
+        class="elevation-1"
+        >
+        <template slot="items" slot-scope="props">
+          <td>
+            <v-edit-dialog
+              lazy
+              > {{ props.item.title }}
+              <v-text-field
+                slot="input"
+                label="Edit"
+                v-model="props.item.title"
+                single-line
+                counter
+                :rules="[max25chars]"
+                ></v-text-field>
+          </v-edit-dialog>
+          </td>
+          <td class="text-xs-right">{{ props.item.collection }}</td>
+          <td class="text-xs-right">{{ props.item.author }}</td>
+          <td class="text-xs-right">{{ props.item.recipient }}</td>
+          <td class="text-xs-right">{{ props.item.gender }}</td>
+          <td class="text-xs-right">{{ props.item.place }}</td>
+          <td class="text-xs-right">{{ props.item.date }}</td>
+        </template>
+      </v-data-table>
+    </v-flex>
+
+    <!-- Progress Bar -->
+    <v-flex xs12 v-else>
+      <v-progress-linear indeterminate color="primary"></v-progress-linear>
+    </v-flex>
+
+  </v-layout>
+ </v-container>
+</template>
+
+<script>
+export default {
+  data () {
+    // Metadata Overview in Letters
+    return {
+      header: 'Metadata',
+      max25chars: (v) => v.length <= 25 || 'Input too long!',
+      tmp: '',
+      search: '',
+      pagination: {},
+      headers: [
+        {
+          text: 'Document Metadata',
+          align: 'left',
+          sortable: false,
+          value: 'title'
+        },
+        { text: 'Collection', value: 'collection' },
+        { text: 'Author', value: 'author' },
+        { text: 'Recipient', value: 'recipient' },
+        { text: 'Gender', value: 'gender' },
+        { text: 'Place', value: 'place' },
+        { text: 'Date', value: 'date' }
+      ],
+      items: null
+    }
+  },
+  created () {
+    this.$http.get('http://localhost:3000/api/metadata/table').then(function (data) {
+      this.items = data.body
+    })
+  }
+}
+</script>

src/router/index.js

@@ -5,6 +5,7 @@ import Letters from '@/components/Letters'
 import Letter from '@/components/Letter'
 import Search from '@/components/Search'
 import Features from '@/components/Features'
+import Metadata from '@/components/Metadata'
 
 Vue.use(Router)
 
@@ -31,6 +32,11 @@ export default new Router({
       name: 'Features',
       path: '/features'
     },
+    {
+      component: Metadata,
+      name: 'Metadata',
+      path: '/metadata'
+    },
     {
       component: Search,
       name: 'Search',