From 5879a1b6cad8783be1ca34650d0024b1e8b92843 Mon Sep 17 00:00:00 2001
From: Elizabeth Danzberger <lizzy7128@tutanota.de>
Date: Fri, 1 Mar 2024 16:17:41 -0500
Subject: [PATCH] made ImportResults into reusable component

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>
---
 lib/AppInfo/Application.php             |   4 +-
 lib/Listener/LoadAdditionalListener.php |  13 ++-
 src/file-actions.js                     |   2 +-
 src/modules/modals/FileActionImport.vue |  53 +++++++----
 src/modules/modals/ImportResults.vue    | 116 +++++++++++-------------
 5 files changed, 99 insertions(+), 89 deletions(-)

diff --git a/lib/AppInfo/Application.php b/lib/AppInfo/Application.php
index 6c8c9aaba..5e3d40c24 100644
--- a/lib/AppInfo/Application.php
+++ b/lib/AppInfo/Application.php
@@ -6,6 +6,7 @@
 use OCA\Analytics\Datasource\DatasourceEvent;
 use OCA\Tables\Capabilities;
 use OCA\Tables\Listener\AnalyticsDatasourceListener;
+use OCA\Tables\Listener\LoadAdditionalListener;
 use OCA\Tables\Listener\TablesReferenceListener;
 use OCA\Tables\Listener\UserDeletedListener;
 use OCA\Tables\Reference\ContentReferenceProvider;
@@ -22,9 +23,8 @@
 use OCP\Server;
 use OCP\User\Events\BeforeUserDeletedEvent;
 use Psr\Container\ContainerExceptionInterface;
-use Psr\Container\NotFoundExceptionInterface;
 
-use OCA\Tables\Listener\LoadAdditionalListener;
+use Psr\Container\NotFoundExceptionInterface;
 
 class Application extends App implements IBootstrap {
 	public const APP_ID = 'tables';
diff --git a/lib/Listener/LoadAdditionalListener.php b/lib/Listener/LoadAdditionalListener.php
index b59188166..6978f047b 100644
--- a/lib/Listener/LoadAdditionalListener.php
+++ b/lib/Listener/LoadAdditionalListener.php
@@ -10,12 +10,11 @@
 
 /** @template-implements IEventListener<LoadAdditionalScriptsEvent> */
 class LoadAdditionalListener implements IEventListener {
-    public function handle(Event $event): void {
-        if (!($event instanceof LoadAdditionalScriptsEvent)) {
-            return;
-        }
+	public function handle(Event $event): void {
+		if (!($event instanceof LoadAdditionalScriptsEvent)) {
+			return;
+		}
 
-        Util::addScript(Application::APP_ID, 'tables-files', 'files');
-    }
+		Util::addScript(Application::APP_ID, 'tables-files', 'files');
+	}
 }
-
diff --git a/src/file-actions.js b/src/file-actions.js
index 6d57aacc6..6bd2b24a7 100644
--- a/src/file-actions.js
+++ b/src/file-actions.js
@@ -26,7 +26,7 @@ const fileAction = new FileAction({
 	},
 
 	exec: async (file) => {
-		spawnDialog(FileActionImport, { t, file })
+		spawnDialog(FileActionImport, { file })
 		return null
 	},
 })
diff --git a/src/modules/modals/FileActionImport.vue b/src/modules/modals/FileActionImport.vue
index 2d8aacec6..e73983a72 100644
--- a/src/modules/modals/FileActionImport.vue
+++ b/src/modules/modals/FileActionImport.vue
@@ -1,5 +1,5 @@
 <template>
-	<NcModal :show="modal">
+	<NcModal v-if="!importResults">
 		<div class="modal__content">
 			<h2>{{ t('tables', 'Import file into Tables') }}</h2>
 
@@ -80,14 +80,37 @@
 			</div>
 		</div>
 	</NcModal>
+
+	<NcDialog v-else
+		:name="t('tables', 'Import successful')"
+		:open.sync="showResultsDialog"
+		size="small">
+		<template #actions>
+			<NcButton :aria-label="t('tables', 'Close')" @click="closeResultsDialog()">
+				{{ t('tables', 'Close') }}
+			</NcButton>
+		</template>
+
+		<ImportResults :results="importResults" />
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcButton, NcSelect, NcCheckboxRadioSwitch, NcEmojiPicker, NcLoadingIcon } from '@nextcloud/vue'
+import {
+	NcModal,
+	NcDialog,
+	NcButton,
+	NcSelect,
+	NcCheckboxRadioSwitch,
+	NcEmojiPicker,
+	NcLoadingIcon,
+} from '@nextcloud/vue'
+
 import { generateUrl } from '@nextcloud/router'
 import { Node } from '@nextcloud/files'
-import { showError, showSuccess, spawnDialog } from '@nextcloud/dialogs'
+import { showError } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
+import { translate as t } from '@nextcloud/l10n'
 import RowFormWrapper from '../../shared/components/ncTable/partials/rowTypePartials/RowFormWrapper.vue'
 import ImportResults from './ImportResults.vue'
 
@@ -97,6 +120,8 @@ export default {
 	components: {
 		NcModal,
 		NcButton,
+		NcDialog,
+		ImportResults,
 		NcLoadingIcon,
 		NcSelect,
 		NcCheckboxRadioSwitch,
@@ -105,10 +130,6 @@ export default {
 	},
 
 	props: {
-		t: {
-			type: Function,
-			default: null,
-		},
 		file: {
 			type: Node,
 			default: null,
@@ -117,18 +138,21 @@ export default {
 
 	data() {
 		return {
-			modal: true,
 			importAsNew: true,
 			createMissingColumns: true,
+
 			loadingTables: false,
 			importingFile: false,
+
 			newTable: {
 				emoji: '🔧',
 				title: this.file.basename,
 			},
-			importResults: null,
 			existingTables: [],
 			selectedTable: null,
+
+			importResults: null,
+			showResultsDialog: true,
 		}
 	},
 
@@ -162,12 +186,16 @@ export default {
 	},
 
 	methods: {
+		t,
 		selectIcon(icon) {
 			this.newTable.emoji = icon
 		},
 		setNewTableTitle(title) {
 			this.newTable.title = title.srcElement.value
 		},
+		closeResultsDialog() {
+			this.showResultsDialog = false
+		},
 		async importFile() {
 			this.importingFile = true
 
@@ -176,8 +204,6 @@ export default {
 
 				if (!this.importResults) {
 					showError(t('tables', 'Could not create table'))
-				} else {
-					showSuccess(t('tables', 'Created table "{emoji} {table}"', { emoji: this.newTable.emoji, table: this.newTable.title }))
 				}
 			} else {
 				if (!this.selectedTable) {
@@ -189,15 +215,10 @@ export default {
 
 				if (!this.importResults) {
 					showError(t('tables', 'Could not import data to table'))
-				} else {
-					showSuccess(t('tables', 'Imported to table "{table}"', { table: this.selectedTable.label }))
 				}
 			}
 
 			this.importingFile = false
-			this.modal = false
-
-			spawnDialog(ImportResults, { t, results: this.importResults })
 		},
 	},
 }
diff --git a/src/modules/modals/ImportResults.vue b/src/modules/modals/ImportResults.vue
index 904916a01..5c6fb5754 100644
--- a/src/modules/modals/ImportResults.vue
+++ b/src/modules/modals/ImportResults.vue
@@ -1,90 +1,80 @@
 <template>
-	<NcDialog :name="t('tables', 'Result')" :open.sync="show" size="small">
-		<template #actions>
-			<NcButton :aria-label="t('tables', 'Close')" @click="hideDialog">
-				{{ t('tables', 'Close') }}
-			</NcButton>
-		</template>
+	<table class="file_import__results">
+		<caption>
+			{{ t('tables', 'Result') }}
+		</caption>
 
-		<table class="import_modal__results">
-			<tbody>
-				<tr>
-					<td>{{ t('tables', 'Found columns') }}</td>
-					<td>{{ results.found_columns_count }}</td>
-				</tr>
+		<tbody>
+			<tr>
+				<td>{{ t('tables', 'Found columns') }}</td>
+				<td>{{ results.found_columns_count }}</td>
+			</tr>
 
-				<tr>
-					<td>{{ t('tables', 'Matching columns') }}</td>
-					<td>{{ results.matching_columns_count }}</td>
-				</tr>
+			<tr>
+				<td>{{ t('tables', 'Matching columns') }}</td>
+				<td>{{ results.matching_columns_count }}</td>
+			</tr>
 
-				<tr>
-					<td>{{ t('tables', 'Created columns') }}</td>
-					<td>{{ results.created_columns_count }}</td>
-				</tr>
+			<tr>
+				<td>{{ t('tables', 'Created columns') }}</td>
+				<td>{{ results.created_columns_count }}</td>
+			</tr>
 
-				<tr>
-					<td>{{ t('tables', 'Inserted rows') }}</td>
-					<td>{{ results.inserted_rows_count }}</td>
-				</tr>
+			<tr>
+				<td>{{ t('tables', 'Inserted rows') }}</td>
+				<td>{{ results.inserted_rows_count }}</td>
+			</tr>
 
-				<tr>
-					<td>{{ t('tables', 'Value parsing errors') }}</td>
-					<td>{{ results.errors_parsing_count }}</td>
-				</tr>
+			<tr>
+				<td>{{ t('tables', 'Value parsing errors') }}</td>
+				<td>{{ results.errors_parsing_count }}</td>
+			</tr>
 
-				<tr>
-					<td>{{ t('tables', 'Row creation errors') }}</td>
-					<td>{{ results.errors_count }}</td>
-				</tr>
-			</tbody>
-		</table>
-	</NcDialog>
+			<tr>
+				<td>{{ t('tables', 'Row creation errors') }}</td>
+				<td>{{ results.errors_count }}</td>
+			</tr>
+		</tbody>
+	</table>
 </template>
 
 <script>
-import { NcDialog, NcButton } from '@nextcloud/vue'
+import { translate as t } from '@nextcloud/l10n'
 
 export default {
 	name: 'ImportResults',
 
-	components: {
-		NcDialog,
-		NcButton,
-	},
-
 	props: {
-		t: {
-			type: Function,
-			default: null,
-		},
 		results: {
-			found_columns_count: 0,
-			matching_columns_count: 0,
-			created_columns_count: 0,
-			inserted_rows_count: 0,
-			errors_parsing_count: 0,
-			errors_count: 0,
+			type: Object,
+			default() {
+				return {
+					found_columns_count: 0,
+					matching_columns_count: 0,
+					created_columns_count: 0,
+					inserted_rows_count: 0,
+					errors_parsing_count: 0,
+					errors_count: 0,
+				}
+			},
 		},
 	},
 
-	data() {
-		return {
-			show: true,
-		}
-	},
-
 	methods: {
-		hideDialog() {
-			this.show = false
-		},
+		t,
 	},
 }
 </script>
 
 <style scoped>
-.import_modal__results {
-	width: 100%;
-	margin-bottom: 10px;
+.file_import__results {
+	margin: auto;
+	min-width: 350px;
+	max-width: 600px;
+
+	& caption {
+		font-weight: bold;
+		margin: calc(var(--default-grid-baseline) * 2) auto;
+	}
 }
 </style>