Merge pull request #915 from nextcloud/feature/create-new-table-from-…

…import

feat: create new table from import

cypress/e2e/tables-table.cy.js

@@ -24,14 +24,36 @@ describe('Manage a table', () => {
 		cy.get('.modal__content').should('be.visible')
 		cy.get('.modal__content input[type="text"]').clear().type('to do list')
 		cy.get('.modal__content #description-editor .tiptap.ProseMirror').type('to Do List description')
-		cy.contains('button', 'Create table').click()
+		cy.contains('button', 'Create table').scrollIntoView().click()
 
 		cy.contains('button', 'Create row').should('be.visible')
 		cy.contains('h1', 'to do list').should('be.visible')
 		cy.contains('table th', 'Task').should('exist')
 		cy.contains('.paragraph-content', 'to Do List description').should('be.visible')
 	})
 
+	it('Create with import', () => {
+		cy.uploadFile('test-import.csv', 'text/csv')
+		cy.contains('.app-menu-entry--label', 'Tables').click()
+		cy.contains('button', 'Create new table').click()
+		cy.get('.tile').contains('Import').click({ force: true })
+		cy.get('.modal__content').should('be.visible')
+		cy.get('.modal__content input[type="text"]').clear().type('import list')
+		cy.contains('button', 'Create table').scrollIntoView().click()
+		cy.contains('h2', 'Import').should('be.visible')
+
+		cy.get('.modal__content button').contains('Select from Files').click()
+		cy.get('.file-picker__files').contains('test-import').click()
+		cy.get('.file-picker button span').contains('Choose test-import.csv').click()
+		cy.get('.modal__content button').contains('Import').click()
+		cy.get('[data-cy="importResultColumnsFound"]').should('contain.text', '4')
+		cy.get('[data-cy="importResultColumnsMatch"]').should('contain.text', '0')
+		cy.get('[data-cy="importResultColumnsCreated"]').should('contain.text', '4')
+		cy.get('[data-cy="importResultRowsInserted"]').should('contain.text', '3')
+		cy.get('[data-cy="importResultParsingErrors"]').should('contain.text', '0')
+		cy.get('[data-cy="importResultRowErrors"]').should('contain.text', '0')
+	})
+
 	it('Update title And Description', () => {
 		cy.get('.app-navigation__list').contains('to do list').click({ force: true })
 		cy.get('[data-cy="customTableAction"] button').click()

src/modules/modals/CreateTable.vue

@@ -45,6 +45,14 @@
 						:tabbable="true"
 						@set-template="setTemplate('custom')" />
 				</div>
+				<div class="col-2 block space-R space-B">
+					<NcTile
+						:title="t('tables', '📄 Import table')"
+						:body="t('tables', 'Import table from file.')"
+						:active="templateChoice === 'import'"
+						:tabbable="true"
+						@set-template="setTemplate('import')" />
+				</div>
 				<div v-for="template in templates" :key="template.name" class="col-2 block space-R space-B">
 					<NcTile
 						:title="template.icon + ' ' + template.title"
@@ -74,6 +82,7 @@ import { generateUrl } from '@nextcloud/router'
 import NcTile from '../../shared/components/ncTile/NcTile.vue'
 import displayError from '../../shared/utils/displayError.js'
 import TableDescription from '../../modules/main/sections/TableDescription.vue'
+import { emit } from '@nextcloud/event-bus'
 
 export default {
 	name: 'CreateTable',
@@ -132,14 +141,16 @@ export default {
 			if (!this.customIconChosen) {
 				if (name === 'custom') {
 					this.icon = '🔧'
+				} else if (name === 'import') {
+					this.icon = '📄'
 				} else {
 					const templateObject = this.templates?.find(item => item.name === name) || ''
 					this.icon = templateObject?.icon
 				}
 			}
 
 			if (!this.customTitleChosen) {
-				if (name === 'custom') {
+				if (name === 'custom' || name === 'import') {
 					this.title = ''
 				} else {
 					const templateObject = this.templates?.find(item => item.name === name) || ''
@@ -163,6 +174,9 @@ export default {
 				const newTableId = await this.sendNewTableToBE(this.templateChoice)
 				if (newTableId) {
 					await this.$router.push('/table/' + newTableId)
+					if (this.templateChoice === 'import') {
+						emit('tables:modal:import', { element: { tableId: newTableId, id: newTableId }, isView: false })
+					}
 					this.actionCancel()
 				}
 			}