RES-1967 Introduce SpinButton for progress indicators on group/event create/edit

lang/en/events.php

@@ -146,6 +146,5 @@
   'delete_success' => 'Event has been deleted.',
   'geocode_failed' => 'Location not found. If you are unable to find the location of your event, please try a more general location (such as village/town), or a specific street address, rather than a building name.',
   'create_failed' => 'Event could <strong>not</strong> be created. Please look at the reported errors, correct them, and try again.',
-  'edit_succeeded' => 'Event updated!',
   'edit_failed' => 'Event could not be edited.',
 ];

lang/en/groups.php

@@ -135,7 +135,6 @@
   'groups_postcode_small' => '(Optional)',
   'duplicate' => 'That group name (:name) already exists.  If it\'s yours, please go to the Groups page using the menu and edit it.',
   'create_failed' => 'Group could <strong>not</strong> be created. Please look at the reported errors, correct them, and try again.',
-  'edit_succeeded' => 'Group updated!',
   'edit_failed' => 'Group could not be edited.',
   'delete_group' => 'Delete group',
   'delete_group_confirm' => 'Please confirm that you want to delete :name.',

lang/fr-BE/events.php

@@ -143,6 +143,5 @@
   'delete_success' => 'L\'événement a été supprimé.',
   'geocode_failed' => 'Lieu non trouvé. Si vous ne parvenez pas à trouver le lieu où se trouve votre événement, essayez d\'indiquer un lieu plus général (tel qu\'un village ou une ville) ou une adresse spécifique, plutôt qu\'un nom de bâtiment.',
   'create_failed' => 'L\'événement <strong>n\'a pas pu</strong> être créé. Veuillez regarder les erreurs, les corriger, et essayer à nouveau.',
-  'edit_succeeded' => 'L\'édition du l\'événement Café a réussi',
   'edit_failed' => 'L\'événement n\'a pas pu être édité.',
 ];

lang/fr-BE/groups.php

@@ -135,7 +135,6 @@
   'groups_postcode_small' => '(Optionnel)',
   'postcode' => 'Code postal du Repair Café',
   'create_failed' => 'Le Repair Café <strong>n\'a pas pu</strong> être créé. Veuillez regarder les erreurs, les corriger, et essayer à nouveau.',
-  'edit_succeeded' => 'L\'édition du Repair Café a réussi',
   'edit_failed' => 'Le Repair Café n\'a pas pu être édité.',
   'delete_group' => 'Supprimer Repair Café',
   'delete_group_confirm' => 'Veuillez confirmer que vous voulez supprimer :name',

lang/fr/events.php

@@ -143,6 +143,5 @@
   'delete_success' => 'L\'événement a été supprimé.',
   'geocode_failed' => 'Lieu non trouvé. Si vous ne parvenez pas à trouver le lieu où se trouve votre événement, essayez d\'indiquer un lieu plus général (tel qu\'un village ou une ville) ou une adresse spécifique, plutôt qu\'un nom de bâtiment.',
   'create_failed' => 'L\'événement <strong>n\'a pas pu</strong> être créé. Veuillez regarder les erreurs, les corriger, et essayer à nouveau.',
-  'edit_succeeded' => 'L\'édition du l\'événement Café a réussi',
   'edit_failed' => 'L\'événement n\'a pas pu être édité.',
 ];

lang/fr/groups.php

@@ -135,7 +135,6 @@
   'groups_postcode_small' => '(Optionnel)',
   'postcode' => 'Code postal du Repair Café',
   'create_failed' => 'Le Repair Café <strong>n\'a pas pu</strong> être créé. Veuillez regarder les erreurs, les corriger, et essayer à nouveau.',
-  'edit_succeeded' => 'L\'édition du Repair Café a réussi',
   'edit_failed' => 'Le Repair Café n\'a pas pu être édité.',
   'delete_group' => 'Supprimer Repair Café',
   'delete_group_confirm' => 'Veuillez confirmer que vous voulez supprimer :name',

package.json

@@ -81,6 +81,7 @@
         "sortablejs": "^1.7.0",
         "text-clipper": "^2.1.0",
         "tokenfield": "^0.9.10",
+        "vue-awesome": "^4.1.0",
         "vue-clipboard2": "^0.3.1",
         "vue-cookies": "^1.7.4",
         "vue-google-autocomplete": "^1.1.1",

resources/global/css/_global.scss

@@ -136,4 +136,9 @@ h2 {
 
 .w-33 {
   width: 33.33333%;
+}
+
+.fa-fw {
+  width: 1rem;
+  height: 1rem;
 }

resources/js/app.js

@@ -72,6 +72,12 @@ import LangMixin from './mixins/lang'
 import { Lang } from './mixins/lang'
 Vue.mixin(LangMixin)
 
+const Icon = require('vue-awesome/components/Icon')
+require('vue-awesome/icons/sync')
+require('vue-awesome/icons/save')
+require('vue-awesome/icons/check')
+Vue.component('v-icon', Icon)
+
 window.Dropzone = require('dropzone');
 window.Tokenfield = require("tokenfield");
 
@@ -1293,7 +1299,6 @@ jQuery(document).ready(function () {
   // resources/js/components.  Lower level components can be included from within those as normal;
   // they don't need listing here.
   $(".vue").each(function(index) {
-    console.log('Create vue', $(this).get(0))
     new Vue({
       el: $(this).get(0),
       store: store,

resources/js/components/EventAddEdit.vue

@@ -85,8 +85,7 @@
         </b-form-group>
       </div>
       <div class="event-result text-right">
-        <p v-if="showEditedMessage" class="mt-2 text-primary font-weight-bold" v-html="'<div>' + __('events.edit_succeeded') + '</div>'" />
-        <div v-else-if="failed">
+        <div v-if="failed">
           <p v-if="creating" class="mt-2 text-danger font-weight-bold" v-html="'<div>' + __('events.create_failed') + '</div>'"/>
           <p v-else class="mt-2 text-danger font-weight-bold" v-html="'<div>' + __('events.edit_failed') + '</div>'"/>
         </div>
@@ -104,9 +103,12 @@
           </span>
         </div>
         <div class="col-lg-2 d-flex align-items-center justify-content-end mt-2 mt-lg-0">
-          <b-btn variant="primary" class="break" type="submit" @click="submit">
-            {{ __('events.create_event') }}
-          </b-btn>
+          <SpinButton
+              icon-name="save"
+              :label="__('events.create_event')"
+              variant="primary"
+              @handle="submit"
+          />
         </div>
       </div>
       <div class="event-buttons button-group d-flex align-items-center justify-content-between" v-else>
@@ -115,7 +117,7 @@
             <span v-if="autoApprove">
               {{ __('events.before_submit_text_autoapproved') }}
             </span>
-              <span v-else-if="!canApprove && moderate !== 'approve'">
+            <span v-else-if="!canApprove && moderate !== 'approve'">
               {{ __('events.before_submit_text') }}
             </span>
           </div>
@@ -124,9 +126,12 @@
           <b-btn :href="'/party/duplicate/' + idevents" variant="primary" size="md" class="mr-2 duplicate">
             {{ __('events.duplicate_event') }}
           </b-btn>
-          <b-btn variant="primary" class="break submit" type="submit" @click="submit">
-            {{ __('events.save_event') }}
-          </b-btn>
+          <SpinButton
+              icon-name="save"
+              :label="__('events.save_event')"
+              variant="primary"
+              @handle="submit"
+          />
         </div>
       </div>
     </div>
@@ -146,6 +151,7 @@ import { required, url, helpers } from 'vuelidate/lib/validators'
 import validationHelpers from '../mixins/validationHelpers'
 import moment from 'moment-timezone'
 import NetworkData from './NetworkData'
+import SpinButton from "./SpinButton.vue";
 
 function geocodeableValidation() {
   return this.lat !== null && this.lng !== null
@@ -154,7 +160,7 @@ function geocodeableValidation() {
 const timeValidator = helpers.regex('timeValidator', /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/)
 
 export default {
-  components: {EventGroup, EventVenue, EventLink, VenueAddress, EventTimeRangePicker, EventDatePicker, RichTextEditor, NetworkData},
+  components: {EventGroup, EventVenue, EventLink, VenueAddress, EventTimeRangePicker, EventDatePicker, RichTextEditor, NetworkData, SpinButton,},
   mixins: [event, auth, validationHelpers],
   props: {
     duplicateFrom: {
@@ -330,15 +336,14 @@ export default {
     }
   },
   methods: {
-    async submit() {
+    async submit(callback) {
       // Check the form is valid.
       this.$v.$touch()
+      let success = false
 
       if (this.$v.$invalid) {
         // It's not - prevent the submit.
-        console.log("Not valid", this.$v)
-        e.preventDefault()
-
+        console.log("Not valid event", this.$v)
         this.validationFocusFirstError()
       } else {
         if (this.creating) {
@@ -358,6 +363,7 @@ export default {
           if (id) {
             // Success.  Emitting this event will cause the parent to re-render us in the edit view
             this.$emit('created', id)
+            success = true
           } else {
             this.failed = true
           }
@@ -393,12 +399,16 @@ export default {
               if (this.moderate == 'approve') {
                 this.eventApproved = true
               }
+
+              success = true
             } else {
               this.failed = true
             }
           }
         }
       }
+
+      callback(success)
     }
   }
 }

resources/js/components/GroupAddEdit.vue

@@ -148,8 +148,7 @@
       </b-card>
 
       <div class="group-buttons text-right">
-        <p v-if="edited" class="mt-2 text-primary font-weight-bold" v-html="'<div>' + __('groups.edit_succeeded') + '</div>'" />
-        <div v-else-if="failed">
+        <div v-if="failed">
           <p v-if="creating" class="mt-2 text-danger font-weight-bold" v-html="'<div>' + __('groups.create_failed') + '</div>'"/>
           <p v-else class="mt-2 text-danger font-weight-bold" v-html="'<div>' + __('groups.edit_failed') + '</div>'"/>
         </div>
@@ -158,14 +157,20 @@
           <div class="text-right flex-grow-1 mr-4">
             {{ __('groups.groups_approval_text') }}
           </div>
-          <b-btn variant="primary" class="break" type="submit" @click="submit">
-            {{ __('groups.create_group') }}
-          </b-btn>
+          <SpinButton
+              icon-name="save"
+              :label="__('groups.create_group')"
+              variant="primary"
+              @handle="submit"
+          />
         </div>
         <div class="d-flex justify-content-end" v-else>
-          <b-btn variant="primary" class="break submit" type="submit" @click="submit">
-            {{ __('groups.edit_group_save_changes') }}
-          </b-btn>
+          <SpinButton
+              icon-name="save"
+              :label="__('groups.edit_group_save_changes')"
+              variant="primary"
+              @handle="submit"
+          />
         </div>
       </div>
     </div>
@@ -186,6 +191,7 @@ import GroupTimeZone from './GroupTimeZone'
 import GroupPhone from './GroupPhone'
 import GroupImage from './GroupImage'
 import NetworkData from './NetworkData'
+import SpinButton from "./SpinButton.vue";
 
 function geocodeableValidation () {
   return this.lat !== null && this.lng !== null
@@ -202,7 +208,8 @@ export default {
     GroupLocation,
     GroupLocationMap,
     GroupPhone,
-    GroupImage
+    GroupImage,
+    SpinButton,
   },
   mixins: [group, auth, validationHelpers],
   props: {
@@ -362,11 +369,12 @@ export default {
     this.ready = true
   },
   methods: {
-    async submit () {
+    async submit (callback) {
       // Events are created via form submission - we don't yet have an API call to do this over AJAX.  Therefore
       // this page and the subcomponents have form inputs with suitable names.
       this.failed = false
       this.edited = false
+      let success = false
 
       this.$v.$touch()
 
@@ -394,6 +402,7 @@ export default {
             if (id) {
               // Success.  Go to the edit page.
               window.location = '/group/edit/' + id
+              success = true
             } else {
               this.failed = true
             }
@@ -425,13 +434,16 @@ export default {
                 // group approval status might not have been updated yet.  Handle this locally.
                 this.approved = this.approved || this.moderate === 'approve'
                 this.edited = true
+                success = true
               } else {
                 this.failed = true
               }
             }
           }
         }
       }
+
+      callback(success)
     }
   }
 }