From ab65caa64692dfdbb750ecdb879227d76a92fc51 Mon Sep 17 00:00:00 2001 From: Oak McIlwain Date: Mon, 26 Aug 2024 16:04:00 +0800 Subject: [PATCH] Further work configuring the component. --- .../occurrence/bulk_import_schema.vue | 723 +++++++++++++----- 1 file changed, 541 insertions(+), 182 deletions(-) diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue index 1b73e03c..d123533d 100644 --- a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue +++ b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue @@ -1,6 +1,6 @@ @@ -215,31 +391,210 @@ export default { name: 'OccurrenceReportBulkImportSchema', data() { return { - + schema: null, + djangoContentTypes: null, + selectedColumn: null, + selectedContentType: null, + selectedField: null, + addEditMode: false, + newColumn: null, + saving: false, } }, components: { alert }, computed: { - + showValidationFields() { + return this.selectedColumn && + this.selectedColumn.xlsx_column_header_name && + this.selectedColumn.django_import_content_type && + this.selectedColumn.django_import_field_name && this.selectedField && this.selectedField.type === 'ForeignKey'; + }, }, methods: { + fetchBulkImportSchema() { + this.$http.get(`${api_endpoints.occurrence_report_bulk_import_schemas}${this.$route.params.bulk_import_schema_id}/`) + .then(response => { + this.schema = response.data + }) + .catch(error => { + console.error(error) + }) + }, + fetchContentTypes() { + this.$http.get(`${api_endpoints.content_types}`, { + params: { + app_label: 'boranga', + search: 'occurrencereport' + } + }) + .then(response => { + this.djangoContentTypes = response.data.results + this.$http.get(`${api_endpoints.content_types}`, { + params: { + app_label: 'boranga', + search: 'ocr' + } + }) + .then(response => { + this.djangoContentTypes.push(...response.data.results) + // this.removeAlreadySelectedFields(); + }) + .catch(error => { + console.error(error) + }) + }) + .catch(error => { + console.error(error) + }) + }, + removeAlreadySelectedFields() { + this.schema.columns.forEach(column => { + this.djangoContentTypes.forEach(djangoContentType => { + if (column.django_import_content_type == djangoContentType.id) { + djangoContentType.model_fields = djangoContentType.model_fields.filter( + modelField => modelField.name !== column.django_import_field_name + ) + } + }) + }) + }, + selectDjangoImportContentType() { + if (!this.selectedColumn.django_import_content_type) { + this.selectedField = null + this.selectedContentType = null + this.$refs['django-import-field'].focus() + return + } + this.selectedContentType = this.djangoContentTypes.filter( + djangoContentType => djangoContentType.id == this.selectedColumn.django_import_content_type + )[0] + this.$nextTick(() => { + this.enablePopovers(); + this.$refs['django-import-field'].focus() + }) + }, + selectDjangoImportField() { + if (!this.selectedColumn.django_import_field_name) { + this.selectedField = null + this.$refs['django-import-field'].focus() + return + } + this.selectedField = this.selectedContentType.model_fields.filter( + modelField => modelField.name == this.selectedColumn.django_import_field_name + )[0] + this.$nextTick(() => { + this.enablePopovers(); + if (!this.selectedColumn.id) { + this.selectedColumn.xlsx_column_header_name = this.selectedField.display_name + } + this.$refs['column-name'].focus() + }) + }, + getNewColumnData() { + return { + id: null, + schema: this.schema.id, + django_import_content_type: '', + django_import_field_name: '', + xlsx_column_header_name: '', + import_validations: [] + } + }, + addNewColumn() { + this.newColumn = Object.assign({}, this.getNewColumnData()) + this.schema.columns.push(this.newColumn) + this.selectedColumn = this.newColumn + this.addEditMode = true + // this.removeAlreadySelectedFields(); + this.$nextTick(() => { + this.enablePopovers(); + this.$refs['django-import-model'].focus() + }) + }, + selectColumn(column) { + this.addEditMode = true + this.selectedColumn = column + this.$nextTick(() => { + this.enablePopovers(); + if (this.selectedColumn.django_import_content_type) { + this.selectedContentType = this.djangoContentTypes.filter( + djangoContentType => djangoContentType.id == this.selectedColumn.django_import_content_type + )[0] + if (this.selectedColumn.django_import_field_name) { + this.selectedField = this.selectedContentType.model_fields.filter( + modelField => modelField.name == this.selectedColumn.django_import_field_name + )[0] + } + } + this.$refs['django-import-model'].focus() + }) + }, + cancelAddingColumn(column) { + this.schema.columns = this.schema.columns.filter(col => col !== column) + this.selectedColumn = null + this.addEditMode = false + }, + removeColumn(column) { + let columnTitle = column.xlsx_column_header_name ? `Are you sure you want to delete column: ${column.xlsx_column_header_name}?` : `Are you sure you want to delete this column?` + swal.fire({ + title: `Delete Column ${column.xlsx_column_header_name}`, + text: columnTitle, + icon: 'question', + showCancelButton: true, + confirmButtonText: 'Confirm Delete', + cancelButtonText: 'Cancel', + customClass: { + confirmButton: 'btn btn-primary', + cancelButton: 'btn btn-secondary me-2' + }, + reverseButtons: true + }).then((result) => { + if (result.isConfirmed) { + this.schema.columns = this.schema.columns.filter(column => column !== this.selectedColumn) + this.selectedColumn = null + this.addEditMode = false + if (column.id) { + this.save() + } + this.fetchContentTypes(); + } else { + if (this.selectedColumn) { + this.$refs['django-import-model'].focus() + } + } + }) + }, + save() { + this.saving = true; + this.$http.put(`${api_endpoints.occurrence_report_bulk_import_schemas}${this.schema.id}/`, this.schema) + .then(response => { + this.saving = false; + this.schema = response.data + }) + .catch(error => { + this.saving = false; + console.error(error) + }) + }, + saveAndExit() { + this.save() + this.$router.push(`/internal/occurrence_report/bulk_import_schema/`) + }, + enablePopovers() { + // enable all bootstrap 5 popovers + var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) + popoverTriggerList.map(function (popoverTriggerEl) { + return new bootstrap.Popover(popoverTriggerEl) + }) + } }, created() { - - }, - mounted() { - // enable all bootstrap 5 popovers - var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) - var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { - return new bootstrap.Popover(popoverTriggerEl) - }) + this.fetchBulkImportSchema() + this.fetchContentTypes() }, - beforeDestroy() { - - } } @@ -252,4 +607,8 @@ div.scroll { overflow-y: hidden; white-space: nowrap; } + +tr.active { + background: rgba(51, 170, 51, .4) +}