Merge pull request #5705 from jimchamp/5646/bug/submission-indicator

Add book tags submission indicator

openlibrary/components/ObservationForm.vue

@@ -5,7 +5,6 @@
       :work-key="work_key"
       :username="username"
       />
-
     <CategorySelector
       ref="categories"
       :observations-array="observationsArray"

openlibrary/components/ObservationForm/ObservationService.js

@@ -1,40 +1,32 @@
 /**
- * Sends a POST request to delete a patron's observation.
+ * Sends a POST request to add or delete a patron's observation.
  *
+ * @param {'add' | 'delete'} action 'add' if an observation is being created, 'delete' if an observation is being deleted.
  * @param {String} type The observation's type
  * @param {String} value The observation's value
  * @param {String} workKey Location of work, in the form `/works/<work OLID>`
- * @param {String} username Username of patron that is deleting an observation
- */
-export function deleteObservation(type, value, workKey, username) {
-    const data = constructDataObject(type, value, username, 'delete');
-
-    fetch(`${workKey}/observations`, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(data)
-    })
-}
-
-/**
- * Sends a POST request to add a new patron observation about a work.
+ * @param {String} username Username of patron that is updating an observation
  *
- * @param {String} type The observation's type
- * @param {String} value The observation's value
- * @param {String} workKey Location of work, in the form `/works/<work OLID>`
- * @param {String} username Username of patron that is adding an observation
+ * @returns A Promise representing the state of the POST request.
  */
-export function addObservation(type, value, workKey, username) {
-    const data = constructDataObject(type, value, username, 'add');
-    fetch(`${workKey}/observations`, {
+export function updateObservation(action, type, value, workKey, username) {
+    const data = constructDataObject(type, value, username, action)
+
+    return fetch(`${workKey}/observations`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
         },
         body: JSON.stringify(data)
     })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Server response was not ok')
+            }
+        })
+        .catch(error => {
+            throw error
+        })
 }
 
 /**

openlibrary/components/ObservationForm/components/CardBody.vue

@@ -18,7 +18,7 @@ import Vue from 'vue'
 
 import OLChip from './OLChip'
 
-import { deleteObservation, addObservation } from '../ObservationService'
+import { updateObservation } from '../ObservationService'
 
 export default {
     name: 'CardBody',
@@ -94,19 +94,40 @@ export default {
             if (isSelected) {
                 if (this.multiSelect) {
                     updatedValues.push(text)
+                    updateObservation('add', this.type, text, this.workKey, this.username)
+                        .catch(() => {
+                            updatedValues.pop();
+                        })
+                        .finally(() => {
+                            Vue.set(this.allSelectedValues, this.type, updatedValues);
+                        })
                 } else {
                     if (updatedValues.length) {
-                        deleteObservation(this.type, updatedValues[0], this.workKey, this.username)
+                        let deleteSuccessful = false;
+                        updateObservation('delete', this.type, updatedValues[0], this.workKey, this.username)
+                            .then(() => {
+                                deleteSuccessful = true;
+                            })
+                            .finally(() => {
+                                if (deleteSuccessful) {
+                                    updateObservation('add', this.type, text, this.workKey, this.username)
+                                        .then(() => {
+                                            updatedValues = [text]
+                                        })
+                                        .finally(() => {
+                                            Vue.set(this.allSelectedValues, this.type, updatedValues)
+                                        })
+                                }
+                            })
                     }
-                    updatedValues = [text]
                 }
-
-                addObservation(this.type, text, this.workKey, this.username);
-                Vue.set(this.allSelectedValues, this.type, updatedValues);
             } else {
                 const index = updatedValues.indexOf(text);
                 updatedValues.splice(index, 1);
-                deleteObservation(this.type, text, this.workKey, this.username)
+                updateObservation('delete', this.type, text, this.workKey, this.username)
+                    .catch(() => {
+                        updatedValues.push(text);
+                    })
             }
         }
     },

openlibrary/components/ObservationForm/components/CategorySelector.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <h3>Add your reviews:</h3>
+    <p class="subtitle">Reviews listed above have been saved.</p>
     <div class="chip-group">
       <OLChip
         v-for="o in observationsArray"
@@ -129,6 +130,15 @@ export default {
 </script>
 
 <style scoped>
+h3 {
+  margin-bottom: 0;
+}
+
+.subtitle {
+  margin-top: 5px;
+  color: #505050;
+}
+
 .chip-group {
   display: flex;
   flex-wrap: wrap;

openlibrary/components/ObservationForm/components/SavedTags.vue

@@ -39,7 +39,7 @@ import Vue from 'vue'
 
 import OLChip from './OLChip'
 
-import { deleteObservation } from '../ObservationService'
+import { updateObservation } from '../ObservationService'
 
 
 export default {
@@ -108,12 +108,16 @@ export default {
             const valueArr = this.allSelectedValues[type];
             valueArr.splice(valueIndex, 1);
 
-            if (valueArr.length === 0) {
-                delete this.allSelectedValues[type]
-                Vue.delete(this.allSelectedValues, type)
-            }
-
-            deleteObservation(type, value, this.workKey, this.username)
+            updateObservation('delete', type, value, this.workKey, this.username)
+                .catch(() => {
+                    valueArr.push(value);
+                })
+                .finally(() => {
+                    if (valueArr.length === 0) {
+                        delete this.allSelectedValues[type]
+                        Vue.delete(this.allSelectedValues, type)
+                    }
+                })
 
             // Remove hover class:
             this.removeHoverClass(chipText);