From 528a9ee61b29d7bff54073b70ae41fdcbf1856c8 Mon Sep 17 00:00:00 2001 From: Edward Hibbert Date: Mon, 19 Feb 2024 12:50:01 +0000 Subject: [PATCH 1/5] Introduce SpinButton for progress indicators on group/event create/edit. --- lang/en/events.php | 1 - lang/en/groups.php | 1 - lang/fr-BE/events.php | 1 - lang/fr-BE/groups.php | 1 - lang/fr/events.php | 1 - lang/fr/groups.php | 1 - package-lock.json | 13 ++ package.json | 1 + resources/global/css/_global.scss | 5 + resources/js/app.js | 6 + resources/js/components/EventAddEdit.vue | 30 ++-- resources/js/components/GroupAddEdit.vue | 29 ++-- resources/js/components/SpinButton.vue | 186 +++++++++++++++++++++++ 13 files changed, 249 insertions(+), 27 deletions(-) create mode 100644 resources/js/components/SpinButton.vue diff --git a/lang/en/events.php b/lang/en/events.php index 98612dd44a..55457990cf 100644 --- a/lang/en/events.php +++ b/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 not be created. Please look at the reported errors, correct them, and try again.', - 'edit_succeeded' => 'Event updated!', 'edit_failed' => 'Event could not be edited.', ]; diff --git a/lang/en/groups.php b/lang/en/groups.php index 9767dafa55..d8fe111178 100644 --- a/lang/en/groups.php +++ b/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 not 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.', diff --git a/lang/fr-BE/events.php b/lang/fr-BE/events.php index 33443ae29c..41fdc37b19 100644 --- a/lang/fr-BE/events.php +++ b/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 n\'a pas pu ê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é.', ]; diff --git a/lang/fr-BE/groups.php b/lang/fr-BE/groups.php index 6698325add..7126a34f28 100644 --- a/lang/fr-BE/groups.php +++ b/lang/fr-BE/groups.php @@ -135,7 +135,6 @@ 'groups_postcode_small' => '(Optionnel)', 'postcode' => 'Code postal du Repair Café', 'create_failed' => 'Le Repair Café n\'a pas pu ê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', diff --git a/lang/fr/events.php b/lang/fr/events.php index 33443ae29c..41fdc37b19 100644 --- a/lang/fr/events.php +++ b/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 n\'a pas pu ê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é.', ]; diff --git a/lang/fr/groups.php b/lang/fr/groups.php index e3992cac67..45f98211c2 100644 --- a/lang/fr/groups.php +++ b/lang/fr/groups.php @@ -135,7 +135,6 @@ 'groups_postcode_small' => '(Optionnel)', 'postcode' => 'Code postal du Repair Café', 'create_failed' => 'Le Repair Café n\'a pas pu ê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', diff --git a/package-lock.json b/package-lock.json index 68388a2d6d..de368ab0b4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,6 +40,7 @@ "sortablejs": "^1.7.0", "text-clipper": "^2.1.0", "tokenfield": "^0.9.10", + "vue-awesome": "^4.5.0", "vue-clipboard2": "^0.3.1", "vue-cookies": "^1.7.4", "vue-google-autocomplete": "^1.1.1", @@ -20020,6 +20021,18 @@ "csstype": "^3.1.0" } }, + "node_modules/vue-awesome": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/vue-awesome/-/vue-awesome-4.5.0.tgz", + "integrity": "sha512-pbtZkRecXLm3fg0eVkwObDRM9YNU1BW5wDsL4mMoSvUXZbTnS+N2E4CahAwKJL5OPbqmhJQgZPekQoJrID7dcQ==", + "engines": { + "node": ">= 4.0.0", + "npm": ">= 3.0.0" + }, + "peerDependencies": { + "vue": "^2.4.0" + } + }, "node_modules/vue-clipboard2": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz", diff --git a/package.json b/package.json index c1e3406120..0bd9991378 100644 --- a/package.json +++ b/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", diff --git a/resources/global/css/_global.scss b/resources/global/css/_global.scss index 04d94c6ad5..9513139524 100644 --- a/resources/global/css/_global.scss +++ b/resources/global/css/_global.scss @@ -136,4 +136,9 @@ h2 { .w-33 { width: 33.33333%; +} + +.fa-fw { + width: 1rem; + height: 1rem; } \ No newline at end of file diff --git a/resources/js/app.js b/resources/js/app.js index 860b26125c..b10795bbd8 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -71,6 +71,12 @@ import LangMixin from './mixins/lang' import { Lang } from './mixins/lang' Vue.mixin(LangMixin) +const Icon = require('vue-awesome/components/Icon.vue') +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"); diff --git a/resources/js/components/EventAddEdit.vue b/resources/js/components/EventAddEdit.vue index fa768b83b2..6645f5d8aa 100644 --- a/resources/js/components/EventAddEdit.vue +++ b/resources/js/components/EventAddEdit.vue @@ -85,8 +85,7 @@
-

-

+

@@ -104,9 +103,12 @@
- - {{ __('events.create_event') }} - +
@@ -115,7 +117,7 @@ {{ __('events.before_submit_text_autoapproved') }} - + {{ __('events.before_submit_text') }}
@@ -124,9 +126,12 @@ {{ __('events.duplicate_event') }} - - {{ __('events.save_event') }} - + @@ -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,7 +336,7 @@ export default { } }, methods: { - async submit() { + async submit(callback) { // Check the form is valid. this.$v.$touch() @@ -399,6 +405,8 @@ export default { } } } + + callback() } } } diff --git a/resources/js/components/GroupAddEdit.vue b/resources/js/components/GroupAddEdit.vue index 2a0bd0fc3f..d408d35e03 100644 --- a/resources/js/components/GroupAddEdit.vue +++ b/resources/js/components/GroupAddEdit.vue @@ -148,8 +148,7 @@
-

-

+

@@ -158,14 +157,20 @@
{{ __('groups.groups_approval_text') }}
- - {{ __('groups.create_group') }} - +
- - {{ __('groups.edit_group_save_changes') }} - +
@@ -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,7 +369,7 @@ 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 @@ -432,6 +439,8 @@ export default { } } } + + callback() } } } diff --git a/resources/js/components/SpinButton.vue b/resources/js/components/SpinButton.vue new file mode 100644 index 0000000000..4103e0cd93 --- /dev/null +++ b/resources/js/components/SpinButton.vue @@ -0,0 +1,186 @@ + + + From 13594b4f6bdd13ebe98b0ce588d33760d5943367 Mon Sep 17 00:00:00 2001 From: Edward Hibbert Date: Wed, 4 Sep 2024 15:53:01 +0100 Subject: [PATCH 2/5] Force button white so spinner shows properly. --- resources/js/components/SpinButton.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/resources/js/components/SpinButton.vue b/resources/js/components/SpinButton.vue index 4103e0cd93..a94ad50198 100644 --- a/resources/js/components/SpinButton.vue +++ b/resources/js/components/SpinButton.vue @@ -112,10 +112,11 @@ export default { computedIconData() { if (this.loading) { return { - class: `fa-spin fa-fw ${this.spinColorClass}`, + class: `fa-spin ${this.iconClass} ${this.spinColorClass}`, name: 'sync', } } + if (this.done && this.doneIcon) { return { class: this.iconClass, @@ -147,9 +148,6 @@ export default { this.done = true setTimeout(() => { this.done = false - - // Blur so that the button doesn't stay focused and therefore e.g. black. - this.$refs.btn.blur() }, this.timeout) } }) @@ -167,6 +165,8 @@ export default { }, onClick() { if (!this.loading) { + // Blur so that the button doesn't stay focused and therefore e.g. black. + this.$refs.btn.blur() this.done = false this.loading = true this.$emit('handle', this.finishSpinner) From 623fa3b7af9b17124ee69372dc7fbc973ada32dc Mon Sep 17 00:00:00 2001 From: Edward Hibbert Date: Wed, 4 Sep 2024 18:12:43 +0100 Subject: [PATCH 3/5] Fixes for prod build --- resources/js/app.js | 2 +- resources/js/components/SpinButton.vue | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/resources/js/app.js b/resources/js/app.js index 91c1ce7755..be7f9649ba 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -72,7 +72,7 @@ import LangMixin from './mixins/lang' import { Lang } from './mixins/lang' Vue.mixin(LangMixin) -const Icon = require('vue-awesome/components/Icon.vue') +const Icon = require('vue-awesome/components/Icon') require('vue-awesome/icons/sync') require('vue-awesome/icons/save') require('vue-awesome/icons/check') diff --git a/resources/js/components/SpinButton.vue b/resources/js/components/SpinButton.vue index a94ad50198..6677bde370 100644 --- a/resources/js/components/SpinButton.vue +++ b/resources/js/components/SpinButton.vue @@ -15,7 +15,7 @@ :type="type" @click="onClick" > - + {{ label }} @@ -24,7 +24,7 @@