From d37da61b770db76c693e6edffc298f9741df7b0a Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Fri, 25 Sep 2020 17:18:04 -0300
Subject: [PATCH] Improves submitting and uploading feedback #388

---
 src/assets/css/tainacanicons.css              |  4 +-
 .../pages/item-submission-form.vue            | 39 +++++++++++++++----
 src/views/tainacan-admin-i18n.php             |  3 ++
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/assets/css/tainacanicons.css b/src/assets/css/tainacanicons.css
index 03978edbf..c05401634 100644
--- a/src/assets/css/tainacanicons.css
+++ b/src/assets/css/tainacanicons.css
@@ -560,8 +560,8 @@ font-weight: normal;
 }
 
 .tainacan-icon-spin:before {
-	-webkit-animation: mdi-spin 2s infinite linear;
-	animation: mdi-spin 2s infinite linear;
+	-webkit-animation: mdi-spin 2s infinite linear reverse !important;
+	animation: mdi-spin 2s infinite linear reverse !important;
 }
 
 @-webkit-keyframes mdi-spin {
diff --git a/src/views/item-submission/pages/item-submission-form.vue b/src/views/item-submission/pages/item-submission-form.vue
index 68fe702bd..e41190387 100644
--- a/src/views/item-submission/pages/item-submission-form.vue
+++ b/src/views/item-submission/pages/item-submission-form.vue
@@ -5,7 +5,7 @@
                 :active.sync="isLoading"
                 :can-cancel="false"/>
         <form
-                v-if="!hasSentForm"
+                v-if="!hasSentForm && !isSubmitting && !isUploading"
                 v-show="!isLoading"
                 class="tainacan-form"
                 label-width="120px">
@@ -57,7 +57,7 @@
                                         closable
                                         attached
                                         :aria-close-label="$i18n.get('delete')"
-                                        @close="form.document = null">
+                                        @close="form.document = ''">
                                     {{ form.document.name }}
                                 </b-tag>
                             </div>
@@ -333,9 +333,27 @@
             </footer>
         </form>
 
+        <!-- Message displayed when the form is being submitted -->
+        <section 
+                v-if="isSubmitting || isUploading"
+                class="section">
+            <div class="content has-text-grey has-text-centered">
+                <br>
+                <p>
+                    <span class="icon is-medium">
+                        <i class="tainacan-icon tainacan-icon-30px tainacan-icon-updating tainacan-icon-spin"/>
+                    </span>
+                </p>
+                <h2>{{ $i18n.get('label_sending_form') }}</h2>
+                <p v-if="isSubmitting">{{ $i18n.get('info_submission_processing') }}</p>
+                <p v-if="isUploading">{{ $i18n.get('info_submission_uploading') }}</p>
+                <br>
+            </div>
+        </section>
+
         <!-- Message displayed once the form is submitted -->
         <section 
-                v-else
+                v-if="hasSentForm"
                 class="section">
             <div class="content has-text-grey has-text-centered">
                 <br>
@@ -379,15 +397,17 @@ export default {
     data(){
         return {
             isLoading: false,
+            isSubmitting: false,
+            isUploading: false,
             metadataCollapses: [],
             collapseAll: true,
             form: {
                 collection_id: Number,
-                document: null,
+                document: '',
                 document_type: '',
                 comment_status: '',
                 attachments: [],
-                thumbnail: null
+                thumbnail: ''
             },
             formErrorMessage: '',
             hasSentForm: false,
@@ -451,7 +471,7 @@ export default {
         onSubmit() {
 
             // Puts loading on Item edition
-            this.isLoading = true;
+            this.isSubmitting = true;
 
             let data = this.form;
             this.fillExtraFormData(data);
@@ -463,11 +483,15 @@ export default {
 
             this.submitItemSubmission({ itemSubmission: this.itemSubmission, itemSubmissionMetadata: this.itemSubmissionMetadata })
                 .then((fakeItemId) => {
+
+                    this.isUploading = true;
+                    this.isSubmitting = false;
+
                     if (fakeItemId) {
                         this.finishItemSubmission({ itemSubmission: this.itemSubmission, fakeItemId: fakeItemId })
                             .then(() => {
                                 this.hasSentForm = true;
-                                this.isLoading = false;
+                                this.isUploading = false;
                             })
                             .catch((errors) => { 
                                 if (errors.errors) {
@@ -656,6 +680,7 @@ export default {
 
     .files-list {
         display: flex;
+        flex-wrap: wrap;
     }
 
     .form-submission-footer {
diff --git a/src/views/tainacan-admin-i18n.php b/src/views/tainacan-admin-i18n.php
index eeefae979..956992965 100644
--- a/src/views/tainacan-admin-i18n.php
+++ b/src/views/tainacan-admin-i18n.php
@@ -482,6 +482,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'label_actions_for_the_selection'				 => __( 'Actions for the selection', 'tainacan' ),
 	'label_upload_custom_thumbnail'					 => __( 'Upload custom thumbnail', 'tainacan' ),
 	'label_switch_document_type'					 => __( 'Switch document type', 'tainacan' ),
+	'label_sending_form'							 => __( 'Sending form...', 'tainacan' ),
 	
 	// Instructions. More complex sentences to guide user and placeholders
 	'instruction_delete_selected_collections'        => __( 'Delete selected collections', 'tainacan' ),
@@ -747,6 +748,8 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'info_gallery_help_end'							 => __( 'At any moment, you can also check the item metadata list by clicking on the metadata icon (%1$s)  or go directly to the item page, where you will have all its details, by clicking on the eye icon (%2$s).', 'tainacan' ),
 	'info_thumbnail_custom'							 => __( 'Upload the desired image for the thumbnail', 'tainacan'),
 	'info_thumbnail_default_from_document' 			 => __( 'A thumbnail will be automatically generated from the submitted document file', 'tainacan'),
+	'info_submission_processing'		 			 => __( 'Please, wait while the submission is being processed', 'tainacan'),
+	'info_submission_uploading'		 			 	=> __( 'Please, wait while files are uploaded', 'tainacan'),
 
 	// Datepicker months
 	'datepicker_month_january'			=> __( 'January', 'tainacan' ),