Show resource type in modal (front)

CHANGELOG.md

@@ -26,6 +26,7 @@
 - Fix 404/missing css on front pages [#1709](https://github.com/opendatateam/udata/pull/1709)
 - Fix markdown max image width (front) [#1707](https://github.com/opendatateam/udata/pull/1707)
 - Adds ETag to internal avatar for efficient caching control [#1712](https://github.com/opendatateam/udata/pull/1712)
+- Show resource type in modal (front) [#1714](https://github.com/opendatateam/udata/pull/1714)
 
 ## 1.3.12 (2018-05-31)
 

js/front/dataset/index.js

@@ -24,7 +24,6 @@ import ShareButton from 'components/buttons/share.vue';
 import IntegrateButton from 'components/buttons/integrate.vue';
 import IssuesButton from 'components/buttons/issues.vue';
 import DiscussionThreads from 'components/discussions/threads.vue';
-import resource_types from 'models/resource_types';
 
 
 function parseUrl(url) {
@@ -102,6 +101,7 @@ new Vue({
                 modified: resourceJsonLd.dateModified,
                 published: resourceJsonLd.datePublished,
                 description: resourceJsonLd.description,
+                type: resourceJsonLd.type,
             };
             if (resourceJsonLd.interactionStatistic) {
                 resource.metrics = {

js/front/dataset/resource-modal.vue

@@ -9,6 +9,8 @@
           <dd><a :href="resource.url" @click="onClick">{{resource.url}}</a></dd>
           <dt>{{ _('Latest URL') }}</dt>
           <dd><a :href="resource.latest" @click="onClick">{{resource.latest}}</a></dd>
+          <dt v-if="resourceType">{{ _('Type') }}</dt>
+          <dd v-if="resourceType">{{ resourceType }}</dd>
           <dt v-if="resource.format">{{ _('Format') }}</dt>
           <dd v-if="resource.format">{{resource.format}}</dd>
           <dt v-if="resource.mime">{{ _('MimeType') }}</dt>
@@ -43,10 +45,11 @@
 </template>
 
 <script>
-import Modal from 'components/modal.vue';
-import Resource from 'models/resource';
 import Availability from './resource/availability.vue';
+import Modal from 'components/modal.vue';
 import pubsub from 'pubsub';
+import Resource from 'models/resource';
+import resource_types from 'models/resource_types';
 
 export default {
     props: {
@@ -60,11 +63,24 @@ export default {
         }
     },
     components: {Modal, Availability},
+    data() {
+        return {
+            resourceType: undefined,
+        }
+    },
     created() {
         const url = `datasets/${this.datasetId}/resources/${this.resource.id}/`;
         this.$api.get(url).then(resource => {
             Object.assign(this.resource, resource);
         });
+        // ensure this will be filled both on open from dataset page and direct open (deeplink)
+        if (resource_types.has_data) {
+            this.fillResourceType();
+        } else {
+            resource_types.$on('updated', (res) => {
+                this.fillResourceType();
+            });
+        }
     },
     methods: {
         onClick() {
@@ -76,7 +92,12 @@ export default {
             }
             pubsub.publish(eventName);
             this.$refs.modal.close();
-        }
+        },
+        fillResourceType() {
+            if (this.resource.type) {
+                this.resourceType = resource_types.by_id(this.resource.type).label;
+            }
+        },
     }
 };
 </script>