new: show linked datasets on form overview page (#715)

* new: show linked datasets on form overview page * moved publishedAttachment request to FormOverview component * revert whitespace changes * add loading component in FormOverview
getodk · Jan 26, 2023 · c3ddb1b · c3ddb1b
1 parent 4de6d5c
commit c3ddb1b
Show file tree

Hide file tree

Showing 17 changed files with 174 additions and 37 deletions.
diff --git a/src/components/dataset/summary.vue b/src/components/dataset/summary.vue
@@ -10,15 +10,15 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <summary-item v-if="datasetDiff.dataExists && datasetDiff.length > 0" icon="link">
+  <summary-item v-if="datasetDiff.dataExists && datasetDiff.length > 0" icon="magic-wand">
     <template #heading>
       {{ datasetDiff.length }}
     </template>
     <template #body>
       <p>{{ $tc('datasetUpdates', datasetDiff.length) }}</p>
       <template v-for="(dataset, index) in datasetDiff" :key="dataset.name">
         <!-- TODO replace it with expandable-row -->
-        <dataset-summary-row :dataset="dataset"/>
+        <dataset-summary-row :dataset="dataset" :project-id="projectId"/>
         <hr v-if="index < datasetDiff.length - 1">
       </template>
     </template>

diff --git a/src/components/dataset/summary/row.vue b/src/components/dataset/summary/row.vue
@@ -11,16 +11,20 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <div class="dataset-summary-row">
-    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/interactive-supports-focus -->
-    <div class="row" role="button" @click.prevent="toggleExpanded">
+    <div class="row">
       <div class="col-xs-6 dataset-name-wrap">
-        <div class="dataset-name text-overflow-ellipsis" v-tooltip.text>{{ dataset.name }}</div>
+        <div class="dataset-name text-overflow-ellipsis" v-tooltip.text>
+          <router-link :to="datasetPath(projectId, dataset.name)" v-tooltip.text>
+            {{ dataset.name }}
+          </router-link>
+        </div>
         <div v-if="dataset.isNew" class="dataset-new">
           <span class="icon-plus-circle"></span>
           {{ $t('new') }}
         </div>
       </div>
-      <div class="col-xs-6 properties-count">
+      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/interactive-supports-focus -->
+      <div class="col-xs-6 properties-count" role="button" @click.prevent="toggleExpanded">
         {{ $tcn('common.propertiesCount', dataset.properties.length, { inform: $n(inFormProperties.length, 'default') }) }}
         <!-- eslint-disable-next-line vuejs-accessibility/anchor-has-content -->
         <a href="javascript:void(0)" class="expand-button">
@@ -42,14 +46,20 @@ except according to the terms contained in the LICENSE file.
 
 <script>
 import SentenceSeparator from '../../sentence-separator.vue';
+import routes from '../../../mixins/routes';
 
 export default {
   name: 'DatasetSummaryRow',
   components: { SentenceSeparator },
+  mixins: [routes()],
   props: {
     dataset: {
       type: Object,
       required: true
+    },
+    projectId: {
+      type: Number,
+      required: true
     }
   },
   data() {
@@ -110,7 +120,7 @@ export default {
         line-height: 28px;
     }
 
-    a {
+    a.expand-button {
         color: #666;
         font-size: 20px;
         vertical-align: middle;

diff --git a/src/components/form-draft/status.vue b/src/components/form-draft/status.vue
@@ -136,8 +136,8 @@ export default {
   },
   emits: ['fetch-project', 'fetch-form', 'fetch-draft'],
   setup() {
-    const { form, formVersions, formDraft, formDatasetDiff, formDraftDatasetDiff } = useRequestData();
-    return { form, formVersions, formDraft, formDatasetDiff, formDraftDatasetDiff };
+    const { form, publishedAttachments, formVersions, formDraft, formDatasetDiff, formDraftDatasetDiff } = useRequestData();
+    return { form, publishedAttachments, formVersions, formDraft, formDatasetDiff, formDraftDatasetDiff };
   },
   data() {
     return {
@@ -181,6 +181,7 @@ export default {
       this.$emit('fetch-form');
       this.formDraftDatasetDiff.reset();
       this.formDatasetDiff.reset();
+      this.publishedAttachments.reset();
       afterNextNavigation(this.$router, () => {
         // Re-request the project in case its `datasets` property has changed.
         this.$emit('fetch-project', true);

diff --git a/src/components/form/overview.vue b/src/components/form/overview.vue
@@ -13,7 +13,8 @@ except according to the terms contained in the LICENSE file.
   <div id="form-overview">
     <div class="row">
       <div class="col-xs-6">
-        <form-overview-right-now v-if="form.dataExists"
+        <loading :state="initiallyLoading"/>
+        <form-overview-right-now v-if="dataExists"
           @view-xml="showModal('viewXml')"/>
       </div>
       <div v-if="formDraft.dataExists" id="form-overview-draft" class="col-xs-6">
@@ -64,10 +65,13 @@ import FormVersionStandardButtons from '../form-version/standard-buttons.vue';
 import FormVersionString from '../form-version/string.vue';
 import PageSection from '../page/section.vue';
 import SummaryItem from '../summary-item.vue';
+import Loading from '../loading.vue';
 
 import modal from '../../mixins/modal';
 import { loadAsync } from '../../util/load-async';
 import { useRequestData } from '../../request-data';
+import { apiPaths } from '../../util/request';
+import { noop } from '../../util/util';
 
 export default {
   name: 'FormOverview',
@@ -78,7 +82,8 @@ export default {
     FormVersionString,
     FormVersionViewXml: defineAsyncComponent(loadAsync('FormVersionViewXml')),
     PageSection,
-    SummaryItem
+    SummaryItem,
+    Loading
   },
   mixins: [modal({ viewXml: 'FormVersionViewXml' })],
   props: {
@@ -92,8 +97,8 @@ export default {
     }
   },
   setup() {
-    const { form, formDraft } = useRequestData();
-    return { form, formDraft };
+    const { form, publishedAttachments, formDraft, resourceStates } = useRequestData();
+    return { form, publishedAttachments, formDraft, ...resourceStates([form, publishedAttachments]) };
   },
   data() {
     return {
@@ -102,6 +107,17 @@ export default {
         state: false
       }
     };
+  },
+  created() {
+    this.fetchData();
+  },
+  methods: {
+    fetchData() {
+      this.publishedAttachments.request({
+        url: apiPaths.publishedAttachments(this.projectId, this.xmlFormId),
+        resend: false
+      }).catch(noop);
+    }
   }
 };
 </script>

diff --git a/src/components/form/overview/right-now.vue b/src/components/form/overview/right-now.vue
@@ -27,8 +27,7 @@ except according to the terms contained in the LICENSE file.
             </template>
           </i18n-t>
           <div>
-            <form-version-standard-buttons :version="form"
-              @view-xml="$emit('view-xml')"/>
+            <form-version-standard-buttons :version="form" @view-xml="$emit('view-xml')"/>
           </div>
         </template>
       </summary-item>
@@ -41,8 +40,27 @@ except according to the terms contained in the LICENSE file.
         </template>
       </summary-item>
       <dataset-summary v-if="form.dataExists && form.entityRelated"
-          :project-id="form.projectId"
-          :xml-form-id="form.xmlFormId"/>
+        :project-id="form.projectId"
+        :xml-form-id="form.xmlFormId"/>
+      <summary-item v-if="linkedDatasets.length > 0" id="form-overview-right-now-linked-datasets" icon="link">
+        <template #heading>
+          {{ linkedDatasets.length }}
+        </template>
+        <template #body>
+          <p>{{ $tc('datasetsLinked', linkedDatasets.length) }}</p>
+          <table v-if="linkedDatasets.length > 0" class="table">
+            <tbody>
+              <tr v-for="(dataset) in linkedDatasets" :key="dataset">
+                <td>
+                  <router-link :to="datasetPath(form.projectId, dataset)" v-tooltip.text>
+                    {{ dataset }}
+                  </router-link>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </template>
+      </summary-item>
       <summary-item id="form-overview-right-now-submissions"
         :to="formPath('submissions')" icon="inbox">
         <template #heading>
@@ -85,8 +103,8 @@ export default {
   setup() {
     // The component assumes that this data will exist when the component is
     // created.
-    const { form, formDatasetDiff } = useRequestData();
-    return { form, formDatasetDiff };
+    const { form, publishedAttachments, formDatasetDiff } = useRequestData();
+    return { form, publishedAttachments, formDatasetDiff };
   },
   computed: {
     stateIcon() {
@@ -98,16 +116,41 @@ export default {
         default: // 'closed'
           return 'ban';
       }
+    },
+    linkedDatasets() {
+      return this.publishedAttachments.dataExists ? this.publishedAttachments.filter(a => a.datasetExists).map(a => a.name.replace(/.csv$/i, '')) : [];
     }
   }
 };
 </script>
 
 <style lang="scss">
-#form-overview-right-now.open-form {
-  .icon-file-o, .icon-inbox {
-    margin-left: 4px;
-    margin-right: 4px;
+#form-overview-right-now {
+
+  .open-form {
+    .icon-file-o,
+    .icon-inbox {
+      margin-left: 4px;
+      margin-right: 4px;
+    }
+  }
+
+  #form-overview-right-now-linked-datasets {
+    p {
+      margin: 0;
+    }
+
+    td {
+      padding-left: 0px;
+    }
+
+    .table > tbody > tr:first-child > td {
+      border-top: none;
+    }
+    a {
+      font-size: 18px;
+      font-weight: bold;
+    }
   }
 }
 </style>
@@ -128,7 +171,9 @@ export default {
       // The count of Submissions is shown separately above this text.
       "full": "{submissions} has been saved for this Form. | {submissions} have been saved for this Form.",
       "submissions": "Submission | Submissions"
-    }
+    },
+    // The count of Dataset(s) is shown separately above this text.
+    "datasetsLinked": "Dataset attaches data into this Form: | Datasets attach data into this Form:"
   }
 }
 </i18n>

diff --git a/src/request-data/form.js b/src/request-data/form.js
@@ -21,7 +21,9 @@ export default () => {
   const publicLinks = createResource('publicLinks');
   const formDraftDatasetDiff = createResource('formDraftDatasetDiff');
   const formDatasetDiff = createResource('formDatasetDiff');
+  const publishedAttachments = createResource('publishedAttachments'); // Published Form attachments
+
   return {
-    form, formDraft, attachments, formVersions, formVersionXml, publicLinks, formDraftDatasetDiff, formDatasetDiff
+    form, formDraft, attachments, formVersions, formVersionXml, publicLinks, formDraftDatasetDiff, formDatasetDiff, publishedAttachments
   };
 };
diff --git a/src/request-data/resources.js b/src/request-data/resources.js
@@ -67,6 +67,7 @@ export default ({ i18n }, createResource) => {
 
   const formDraft = createResource('formDraft', () =>
     setupOption(data => shallowReactive(transformForm(data))));
+
   // Form draft attachments
   const attachments = createResource('attachments', () => ({
     ...setupOption((data) => data.reduce(

diff --git a/src/util/request.js b/src/util/request.js
@@ -86,6 +86,7 @@ export const apiPaths = {
     return `/v1/test/${token}/projects/${projectId}/forms/${encodedFormId}/draft`;
   },
   publishFormDraft: formPath('/draft/publish'),
+  publishedAttachments: formPath('/attachments'),
   formDraftAttachments: formPath('/draft/attachments'),
   formDraftAttachment: (projectId, xmlFormId, attachmentName) => {
     const encodedFormId = encodeURIComponent(xmlFormId);

diff --git a/test/components/dataset-summary/row.spec.js b/test/components/dataset-summary/row.spec.js
@@ -1,8 +1,10 @@
+import { RouterLinkStub } from '@vue/test-utils';
 import Row from '../../../src/components/dataset/summary/row.vue';
 import Property from '../../util/ds-property-enum';
 
 import testData from '../../data';
 import { mount } from '../../util/lifecycle';
+import { mockRouter } from '../../util/router';
 
 describe('Dataset summary row', () => {
   const theories = [
@@ -17,9 +19,13 @@ describe('Dataset summary row', () => {
       const dataset = testData.formDraftDatasetDiffs.createPast(1, options).last();
       const inFormProperties = dataset.properties.filter(p => p.inForm);
       const component = mount(Row, {
-        props: { dataset }
+        props: { dataset, projectId: 1 },
+        container: {
+          router: mockRouter('/')
+        }
       });
       component.get('.dataset-name').text().should.be.equal(dataset.name);
+      component.getComponent(RouterLinkStub).props().to.should.be.equal(`/projects/1/datasets/${dataset.name}`);
       component.find('.dataset-new').exists().should.be.equal(data.isNew);
       component.get('.properties-count').text().should.be.equal(`${inFormProperties.length} of ${dataset.properties.length} ${dataset.properties.length === 1 ? 'property' : 'properties'}`);
 

diff --git a/test/components/form-draft/abandon.spec.js b/test/components/form-draft/abandon.spec.js
@@ -126,7 +126,8 @@ describe('FormDraftAbandon', () => {
           await app.get('#form-draft-status-abandon-button').trigger('click');
           return app.get('#form-draft-abandon .btn-danger').trigger('click');
         })
-        .respondWithSuccess();
+        .respondWithSuccess()
+        .respondWithData(() => testData.standardFormAttachments.sorted());
     };
 
     it('shows a success alert', () =>

diff --git a/test/components/form-draft/publish.spec.js b/test/components/form-draft/publish.spec.js
@@ -337,14 +337,16 @@ describe('FormDraftPublish', () => {
           return { success: true };
         })
         .respondWithData(() => testData.extendedForms.last())
-        .respondWithData(() => testData.extendedProjects.last());
+        .respondWithData(() => testData.extendedProjects.last())
+        .respondWithData(() => testData.standardFormAttachments.sorted());
     };
 
     it('sends requests for the project and form', () =>
       publish().testRequests([
         null,
         { url: '/v1/projects/1/forms/f', extended: true },
-        { url: '/v1/projects/1', extended: true }
+        { url: '/v1/projects/1', extended: true },
+        { url: '/v1/projects/1/forms/f/attachments' }
       ]));
 
     it('shows a success alert', () =>
@@ -391,6 +393,7 @@ describe('FormDraftPublish', () => {
         })
         .respondWithData(() => testData.extendedForms.last())
         .respondWithData(() => testData.extendedProjects.last())
+        .respondWithData(() => testData.standardFormAttachments.sorted())
         .complete()
         .route('/projects/1/forms/f/versions')
         .respondWithData(() => testData.extendedFormVersions.sorted())

diff --git a/test/components/form/head.spec.js b/test/components/form/head.spec.js
@@ -248,6 +248,7 @@ describe('FormHead', () => {
           .respondFor('/projects/1/forms/f/draft', {
             project: false,
             form: false,
+            formAttachments: false,
             formDraft: () =>
               testData.extendedFormDrafts.createNew({ draft: true })
           })