From ccb7ba94f62612062a4cc5c4b9a80902e6d803e5 Mon Sep 17 00:00:00 2001 From: Tim Cadman <41470917+timcadman@users.noreply.github.com> Date: Thu, 20 Jun 2024 13:25:05 +0200 Subject: [PATCH 1/8] refactor: made component name more descriptive --- .../components/{SimpleTable.vue => DataPreviewTable.vue} | 2 +- ui/src/views/ProjectsExplorer.vue | 8 ++++---- .../{SimpleTable.spec.ts => DataPreviewTable.ts} | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) rename ui/src/components/{SimpleTable.vue => DataPreviewTable.vue} (99%) rename ui/tests/unit/components/{SimpleTable.spec.ts => DataPreviewTable.ts} (96%) diff --git a/ui/src/components/SimpleTable.vue b/ui/src/components/DataPreviewTable.vue similarity index 99% rename from ui/src/components/SimpleTable.vue rename to ui/src/components/DataPreviewTable.vue index 5c3d0050a..7aa8cd92a 100644 --- a/ui/src/components/SimpleTable.vue +++ b/ui/src/components/DataPreviewTable.vue @@ -41,7 +41,7 @@ import { defineComponent, PropType } from "vue"; import { isIntArray, transformTable, truncate } from "@/helpers/utils"; export default defineComponent({ - name: "SimpleTable", + name: "DataPreviewTable", props: { data: { type: Array as PropType<{ [key: string]: string }[]>, diff --git a/ui/src/views/ProjectsExplorer.vue b/ui/src/views/ProjectsExplorer.vue index b6c23e2b2..1718f9090 100644 --- a/ui/src/views/ProjectsExplorer.vue +++ b/ui/src/views/ProjectsExplorer.vue @@ -182,13 +182,13 @@ :viewTable="selectedFile" :onSave="doCreateLinkFile" > - + >
@@ -228,7 +228,7 @@ import { StringArray, ProjectsExplorerData } from "@/types/types"; import { useRoute, useRouter } from "vue-router"; import FileUpload from "@/components/FileUpload.vue"; import FileExplorer from "@/components/FileExplorer.vue"; -import SimpleTable from "@/components/SimpleTable.vue"; +import DataPreviewTable from "@/components/DataPreviewTable.vue"; import { processErrorMessages } from "@/helpers/errorProcessing"; import ViewEditor from "@/components/ViewEditor.vue"; @@ -244,7 +244,7 @@ export default defineComponent({ FileUpload, FileExplorer, FolderInput, - SimpleTable, + DataPreviewTable, ViewEditor, }, setup() { diff --git a/ui/tests/unit/components/SimpleTable.spec.ts b/ui/tests/unit/components/DataPreviewTable.ts similarity index 96% rename from ui/tests/unit/components/SimpleTable.spec.ts rename to ui/tests/unit/components/DataPreviewTable.ts index 5ca2ff4d8..636a9fec9 100644 --- a/ui/tests/unit/components/SimpleTable.spec.ts +++ b/ui/tests/unit/components/DataPreviewTable.ts @@ -1,5 +1,5 @@ import { shallowMount, VueWrapper } from "@vue/test-utils"; -import SimpleTable from "@/components/SimpleTable.vue"; +import DataPreviewTable from "@/components/DataPreviewTable.vue"; function getListOfColumnValues( data: { @@ -18,7 +18,7 @@ function getListOfColumnValues( }); } -describe("SimpleTable", () => { +describe("DataPreviewTable", () => { const data = [ { firstName: "Bofke", From 1fa62c5bf9cfb481979debdc7a70e436243c937e Mon Sep 17 00:00:00 2001 From: Tim Cadman <41470917+timcadman@users.noreply.github.com> Date: Thu, 20 Jun 2024 14:49:07 +0200 Subject: [PATCH 2/8] feat: show extra column names below table --- ui/src/components/ColumnNamesPreview.vue | 42 ++++++++++++++++++++++++ ui/src/components/DataPreviewTable.vue | 16 --------- ui/src/types/types.d.ts | 1 + ui/src/views/ProjectsExplorer.vue | 20 ++++++++++- 4 files changed, 62 insertions(+), 17 deletions(-) create mode 100644 ui/src/components/ColumnNamesPreview.vue diff --git a/ui/src/components/ColumnNamesPreview.vue b/ui/src/components/ColumnNamesPreview.vue new file mode 100644 index 000000000..394db3133 --- /dev/null +++ b/ui/src/components/ColumnNamesPreview.vue @@ -0,0 +1,42 @@ + + + diff --git a/ui/src/components/DataPreviewTable.vue b/ui/src/components/DataPreviewTable.vue index 7aa8cd92a..fd873eca9 100644 --- a/ui/src/components/DataPreviewTable.vue +++ b/ui/src/components/DataPreviewTable.vue @@ -9,8 +9,6 @@ {{ key }} - - ... @@ -20,16 +18,6 @@ {{ value }} - - - {{ `+ ${nCols - 10} more` }} - - - - - - {{ `+ ${nRows - 10} more rows` }} - @@ -55,10 +43,6 @@ export default defineComponent({ type: Number, required: true, }, - nCols: { - type: Number, - required: true, - }, }, computed: { maxNumberCharacters() { diff --git a/ui/src/types/types.d.ts b/ui/src/types/types.d.ts index 9c55eb589..8cbd11beb 100644 --- a/ui/src/types/types.d.ts +++ b/ui/src/types/types.d.ts @@ -57,6 +57,7 @@ export type ProjectsExplorerData = { selectedFolder: string; createLinkFromTarget: boolean; createLinkFromSrc: boolean; + columnNames: Array; }; export type ProjectsData = { diff --git a/ui/src/views/ProjectsExplorer.vue b/ui/src/views/ProjectsExplorer.vue index 1718f9090..0c411eb45 100644 --- a/ui/src/views/ProjectsExplorer.vue +++ b/ui/src/views/ProjectsExplorer.vue @@ -187,8 +187,12 @@ :data="filePreview" :maxWidth="previewContainerWidth" :n-rows="fileInfo.dataSizeRows" - :n-cols="fileInfo.dataSizeColumns" > + +
@@ -209,12 +213,14 @@ import FolderInput from "@/components/FolderInput.vue"; import ListGroup from "@/components/ListGroup.vue"; import LoadingSpinner from "@/components/LoadingSpinner.vue"; import FeedbackMessage from "@/components/FeedbackMessage.vue"; +import ColumnNamesPreview from "@/components/ColumnNamesPreview.vue"; import { getProject, deleteObject, previewObject, getFileDetails, createLinkFile, + getTableVariables, } from "@/api/api"; import { isEmptyObject, @@ -246,6 +252,7 @@ export default defineComponent({ FolderInput, DataPreviewTable, ViewEditor, + ColumnNamesPreview, }, setup() { const project: Ref = ref([]); @@ -301,6 +308,7 @@ export default defineComponent({ }, createLinkFromTarget: false, createLinkFromSrc: false, + columnNames: [], }; }, watch: { @@ -329,6 +337,16 @@ export default defineComponent({ this.clearFilePreview(); this.loading_preview = false; }); + getTableVariables( + this.projectId, + `${this.selectedFolder}/${this.selectedFile}` + ) + .then((data) => { + this.columnNames = data; + }) + .catch((error) => { + this.errorMessage = `Cannot load column names for [${this.selectedFolder}/${this.selectedFile}] of project [${this.projectId}]. Because: ${error}.`; + }); } getFileDetails( this.projectId, From afaee7ae8b269f7f040d5aa42fb4fe7197ce122f Mon Sep 17 00:00:00 2001 From: Tim Cadman <41470917+timcadman@users.noreply.github.com> Date: Mon, 1 Jul 2024 15:38:55 +0200 Subject: [PATCH 3/8] test: added test for col names component --- .../components/ColumnNamesPreview.spec.ts | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 ui/tests/unit/components/ColumnNamesPreview.spec.ts diff --git a/ui/tests/unit/components/ColumnNamesPreview.spec.ts b/ui/tests/unit/components/ColumnNamesPreview.spec.ts new file mode 100644 index 000000000..92a524943 --- /dev/null +++ b/ui/tests/unit/components/ColumnNamesPreview.spec.ts @@ -0,0 +1,23 @@ +import { shallowMount, VueWrapper } from "@vue/test-utils"; +import ColumnNamesPreview from "@/components/ColumnNamesPreview.vue"; + +describe("ColumnNamesPreview", () => { + let wrapper: VueWrapper; + beforeEach(function () { + wrapper = shallowMount(ColumnNamesPreview, { + props: { + columnNames: ["col1", "col2"], + buttonName: "+ 2 more columns", + }, + }); + }); + + test("Toggle column names", () => { + expect(wrapper.vm.isCollapsed).toBe(false) + wrapper.vm.toggleColumnNames() + expect(wrapper.vm.isCollapsed).toBe(true) + }); + test("Join column names with comma", () => { + expect(wrapper.vm.columnNamesString).toBe("col1, col2") + }); +}); From a505ffce8d354a0151771c78e214d2cab4c36407 Mon Sep 17 00:00:00 2001 From: Tim Cadman <41470917+timcadman@users.noreply.github.com> Date: Tue, 2 Jul 2024 14:33:43 +0200 Subject: [PATCH 4/8] test: mocked getTableVariables --- ui/tests/unit/views/ProjectExplorer.spec.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ui/tests/unit/views/ProjectExplorer.spec.ts b/ui/tests/unit/views/ProjectExplorer.spec.ts index 4001da142..92d81c2a4 100644 --- a/ui/tests/unit/views/ProjectExplorer.spec.ts +++ b/ui/tests/unit/views/ProjectExplorer.spec.ts @@ -142,6 +142,9 @@ describe("ProjectsExplorer", () => { api.getFileDetails.mockImplementation(() => { return Promise.resolve({}); }); + api.getTableVariables.mockImplementation(() => { + return Promise.resolve({}); + }); // Important: selectedFolder before selectedFile, since watcher for selectedFolder resets selectedFile to "" expect(wrapper.vm.fileToDelete).toBe(""); expect(wrapper.vm.folderToDeleteFrom).toBe(""); From 5d92463faa2606efe6da75e45caf9fccbb06b62d Mon Sep 17 00:00:00 2001 From: mkslofstra Date: Mon, 2 Sep 2024 15:21:06 +0200 Subject: [PATCH 5/8] fix: column view doesnt work for linkfile --- ui/src/views/ProjectsExplorer.vue | 49 +++++++++++++++++++------------ 1 file changed, 30 insertions(+), 19 deletions(-) diff --git a/ui/src/views/ProjectsExplorer.vue b/ui/src/views/ProjectsExplorer.vue index 0c411eb45..d3c08ab9f 100644 --- a/ui/src/views/ProjectsExplorer.vue +++ b/ui/src/views/ProjectsExplorer.vue @@ -326,31 +326,21 @@ export default defineComponent({ this.loading_preview = true; previewObject( this.projectId, - `${this.selectedFolder}/${this.selectedFile}` + `${this.selectedObject}` ) .then((data) => { this.filePreview = data; this.loading_preview = false; }) .catch((error) => { - this.errorMessage = `Cannot load preview for [${this.selectedFolder}/${this.selectedFile}] of project [${this.projectId}]. Because: ${error}.`; + this.errorMessage = `Cannot load preview for [${this.selectedObject}] of project [${this.projectId}]. Because: ${error}.`; this.clearFilePreview(); this.loading_preview = false; }); - getTableVariables( - this.projectId, - `${this.selectedFolder}/${this.selectedFile}` - ) - .then((data) => { - this.columnNames = data; - }) - .catch((error) => { - this.errorMessage = `Cannot load column names for [${this.selectedFolder}/${this.selectedFile}] of project [${this.projectId}]. Because: ${error}.`; - }); - } - getFileDetails( + + getFileDetails( this.projectId, - `${this.selectedFolder}/${this.selectedFile}` + `${this.selectedObject}` ) .then((data) => { this.fileInfo.fileSize = data["size"]; @@ -358,10 +348,16 @@ export default defineComponent({ this.fileInfo.dataSizeColumns = parseInt(data["columns"]); this.fileInfo.sourceLink = data["sourceLink"]; this.fileInfo.variables = data["variables"]; + if (isLinkFileType(this.selectedFile)) { + this.columnNames = this.fileInfo.variables + } else { + this.getTableColumnNames( this.projectId, `${this.selectedObject}`) + } }) .catch((error) => { - this.errorMessage = `Cannot load details for [${this.selectedFolder}/${this.selectedFile}] of project [${this.projectId}]. Because: ${error}.`; - }); + this.errorMessage = `Cannot load details for [${this.selectedObject}] of project [${this.projectId}]. Because: ${error}.`; + }); + } } }, project() { @@ -376,6 +372,9 @@ export default defineComponent({ projectFolders(): StringArray { return Object.keys(this.projectContent) as StringArray; }, + selectedObject(): String { + return `${this.selectedFolder}/${this.selectedFile}` + } }, methods: { isTableType, @@ -418,6 +417,18 @@ export default defineComponent({ this.errorMessage = "Folder name cannot be empty"; } }, + getTableColumnNames (project: string, object: string) { + getTableVariables( + project, + object + ) + .then((data) => { + this.columnNames = data; + }) + .catch((error) => { + this.errorMessage = `Cannot load column names for [${object}] of project [${project}]. Because: ${error}.`; + }); + }, cancelNewFolder() { this.createNewFolder = false; }, @@ -449,7 +460,7 @@ export default defineComponent({ const folder = splittedFileAndFolder[0]; const response = deleteObject( this.projectId, - `${this.selectedFolder}/${this.selectedFile}` + `${this.selectedObject}` ); response .then(() => { @@ -573,7 +584,7 @@ export default defineComponent({ this.editView = false; if (this.projectId !== "" && this.selectedFolder !== "") { this.router.push( - `/projects-explorer/${this.projectId}/${this.selectedFolder}/${this.selectedFile}` + `/projects-explorer/${this.projectId}/${this.selectedObject}` ); } }) From bb90d1d58dd603293bc5dd550654a57514a94c09 Mon Sep 17 00:00:00 2001 From: mkslofstra Date: Mon, 2 Sep 2024 15:28:20 +0200 Subject: [PATCH 6/8] don't show additional columns if they're not there --- ui/src/views/ProjectsExplorer.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/src/views/ProjectsExplorer.vue b/ui/src/views/ProjectsExplorer.vue index d3c08ab9f..995afd2be 100644 --- a/ui/src/views/ProjectsExplorer.vue +++ b/ui/src/views/ProjectsExplorer.vue @@ -189,6 +189,7 @@ :n-rows="fileInfo.dataSizeRows" > From 6ab5288bda2ae1629011d540b1b0b9b05dceb3e2 Mon Sep 17 00:00:00 2001 From: mkslofstra Date: Mon, 2 Sep 2024 16:15:37 +0200 Subject: [PATCH 7/8] fix: table runs out of div because of value width --- ui/src/components/DataPreviewTable.vue | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/ui/src/components/DataPreviewTable.vue b/ui/src/components/DataPreviewTable.vue index fd873eca9..e820843b2 100644 --- a/ui/src/components/DataPreviewTable.vue +++ b/ui/src/components/DataPreviewTable.vue @@ -15,8 +15,13 @@ - - {{ value }} + + + {{ value.toString().slice(0, tableHeader[index].length - 2 ) }}.. + + + {{ value }} + From e2c7a69158e5789fb6e9267c27be1a653ddac5f7 Mon Sep 17 00:00:00 2001 From: mkslofstra Date: Tue, 3 Sep 2024 08:57:08 +0200 Subject: [PATCH 8/8] change text when less than 10 columns and dont show when editing view --- ui/src/views/ProjectsExplorer.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/views/ProjectsExplorer.vue b/ui/src/views/ProjectsExplorer.vue index 995afd2be..b2c04193d 100644 --- a/ui/src/views/ProjectsExplorer.vue +++ b/ui/src/views/ProjectsExplorer.vue @@ -189,9 +189,9 @@ :n-rows="fileInfo.dataSizeRows" >