Merge pull request #77 from open-contracting/feature/ui-previews

feat: ui for previews
open-contracting · Apr 13, 2021 · e04eaf6 · e04eaf6
2 parents 6fda881 + 847896a
commit e04eaf6
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 8 deletions.
diff --git a/frontend/src/components/App/AppTable.vue b/frontend/src/components/App/AppTable.vue
@@ -22,7 +22,13 @@
                 </thead>
                 <tbody>
                     <tr v-for="(row, rowIndex) in data" :key="rowIndex">
-                        <td v-for="(col, colIndex) in row" :key="colIndex">{{ col }}</td>
+                        <td
+                            v-for="(col, colIndex) in row"
+                            :class="{ highlighted: highlightedCols.includes(colIndex) }"
+                            :key="colIndex"
+                        >
+                            {{ col }}
+                        </td>
                     </tr>
                 </tbody>
             </template>
@@ -55,14 +61,28 @@ export default {
             type: Boolean,
             default: false,
         },
+        additionalColumns: {
+            type: Array,
+            required: true,
+        },
+    },
+
+    computed: {
+        highlightedCols() {
+            return this.headers.reduce((acc, header, idx) => {
+                if (this.additionalColumns.includes(header)) {
+                    acc.push(idx);
+                }
+                return acc;
+            }, []);
+        },
     },
 };
 </script>
 
 <style scoped lang="scss">
 .app-table {
-    &__name {
-    }
+    max-width: 100%;
 
     ::v-deep table {
         border-collapse: collapse !important;
@@ -75,9 +95,12 @@ export default {
             color: map-get($colors, 'darkest') !important;
         }
         th {
-            max-width: 100px;
+            min-width: 100px;
             background-color: #facd91;
         }
+        td.highlighted {
+            background-color: #b6bafd;
+        }
     }
 }
 </style>
diff --git a/frontend/src/components/CustomizeTables/CustomizeTablesTable.vue b/frontend/src/components/CustomizeTables/CustomizeTablesTable.vue
@@ -42,6 +42,7 @@
                 :data="table.data"
                 :include="table.include"
                 :allow-actions="idx !== 0"
+                :additional-columns="additionalColumns"
                 @remove="changeIncludeStatus(table, false)"
                 @restore="changeIncludeStatus(table, true)"
             />
@@ -139,6 +140,10 @@ export default {
             return res;
         },
 
+        additionalColumns() {
+            return this.additionalInfo.available_data?.columns?.additional || [];
+        },
+
         availableData() {
             const res = [];
             const availableColumns = this.additionalInfo.available_data?.columns?.available;
@@ -150,8 +155,8 @@ export default {
                 );
                 res.push(this.$gettextInterpolate(translated, { n: availableColumns }));
             }
-            const additionalColumns = this.additionalInfo.available_data?.additional;
-            if (additionalColumns) {
+            const additionalColumns = this.additionalInfo.available_data?.columns?.additional;
+            if (additionalColumns?.length) {
                 let translated = this.$ngettext(
                     'There is %{ n } column with additional data not part of OCDS',
                     'There are %{ n } columns with additional data not part of OCDS',
@@ -206,7 +211,9 @@ export default {
             );
             this.tables = await Promise.all(
                 data.map(async (preview) => {
-                    const parsed = await Papa.parse(data[0].preview);
+                    const parsed = await Papa.parse(data[0].preview, {
+                        skipEmptyLines: true,
+                    });
                     return {
                         id: preview.id,
                         name: preview.name,

diff --git a/frontend/tests/unit/components/App/AppTable.spec.js b/frontend/tests/unit/components/App/AppTable.spec.js
@@ -0,0 +1,17 @@
+import { mount } from '@vue/test-utils';
+import AppTable from '@/components/App/AppTable';
+
+describe('AppTable.vue', () => {
+    test("'highlightedCols' returns indexes of additional columns", () => {
+        const wrapper = mount(AppTable, {
+            propsData: {
+                name: 'Test',
+                headers: ['h1', 'h2', 'h3', 'h4', 'h5'],
+                data: [['d1', 'd2', 'd3', 'd4', 'd5']],
+                additionalColumns: ['h2', 'h3'],
+            },
+        });
+
+        expect(wrapper.vm.highlightedCols).toStrictEqual([1, 2]);
+    });
+});
diff --git a/frontend/tests/unit/components/CustomizeTables/CustomizeTablesTable.spec.js b/frontend/tests/unit/components/CustomizeTables/CustomizeTablesTable.spec.js
@@ -85,7 +85,7 @@ describe('CustomizeTablesTable.vue', () => {
                     name: 'documents',
                 },
             });
-            expect(wrapper.vm.availableData.length).toBe(2);
+            expect(wrapper.vm.availableData.length).toBe(0);
             expect(wrapper.vm.arrays.length).toBe(0);
         });