From 671cf4a755266674d92da4576781183c3caaf785 Mon Sep 17 00:00:00 2001 From: Betsy Castro <5490820+betsyecastro@users.noreply.github.com> Date: Mon, 11 Nov 2024 16:48:52 -0600 Subject: [PATCH 01/11] Adds method to submit form after selecting an image for upload Automatically submit form after image selection, eliminating the need to manually click 'Replace Image' --- public/js/app.js | 14 +++++++++++++- public/mix-manifest.json | 2 +- resources/assets/js/app.js | 16 +++++++++++++++- 3 files changed, 29 insertions(+), 3 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index 8b9b4d0a..fead4a92 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -84,6 +84,16 @@ var profiles = function ($, undefined) { $(file_input).siblings('.invalid-feedback').removeClass('d-block'); }; + /** + * Submits img update + * + * @param {Event} event the triggered event + */ + var submit_img_update = function submit_img_update(event) { + var file_input = event.target; + $(file_input).closest('form').submit(); + }; + /** * Reindex numbers in field ids, names, and labels to match sort order, * e.g. if the first item's name is "thing[3]", rename it to "thing[0]" @@ -610,6 +620,7 @@ var profiles = function ($, undefined) { deobfuscate_mail_links: deobfuscate_mail_links, on_list_updated: on_list_updated, preview_selected_image: preview_selected_image, + submit_img_update: submit_img_update, replace_icon: replace_icon, registerTagEditors: registerTagEditors, registerProfilePickers: registerProfilePickers, @@ -629,7 +640,8 @@ $(function () { //show preview of uploaded image $('input[type="file"]').on('change', function (e) { - return profiles.preview_selected_image(e); + profiles.preview_selected_image(e); + profiles.submit_img_update(e); }); // enable drag and drop sorting for items with sortable class diff --git a/public/mix-manifest.json b/public/mix-manifest.json index de5f1463..b550576d 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -1,5 +1,5 @@ { - "/js/app.js": "/js/app.js?id=24be537863fbbe2259218dfb56ecef72", + "/js/app.js": "/js/app.js?id=d764e6cb74d3a3a53a24d6b53f91e9c0", "/js/manifest.js": "/js/manifest.js?id=dc9ead3d7857b522d7de22d75063453c", "/css/app.css": "/css/app.css?id=bff46e69abe7a97b008296b99e4abadd", "/js/vendor.js": "/js/vendor.js?id=4d3313683b3a2faf8ca0278ce47f3880" diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js index c187b44f..e69e522c 100644 --- a/resources/assets/js/app.js +++ b/resources/assets/js/app.js @@ -74,6 +74,16 @@ var profiles = (function ($, undefined) { $(file_input).siblings('.invalid-feedback').removeClass('d-block'); }; + /** + * Submits img update + * + * @param {Event} event the triggered event + */ + const submit_img_update = function (event) { + const file_input = event.target; + $(file_input).closest('form').submit(); + }; + /** * Reindex numbers in field ids, names, and labels to match sort order, * e.g. if the first item's name is "thing[3]", rename it to "thing[0]" @@ -547,6 +557,7 @@ var profiles = (function ($, undefined) { deobfuscate_mail_links: deobfuscate_mail_links, on_list_updated: on_list_updated, preview_selected_image: preview_selected_image, + submit_img_update : submit_img_update, replace_icon: replace_icon, registerTagEditors: registerTagEditors, registerProfilePickers: registerProfilePickers, @@ -569,7 +580,10 @@ $(function() { $('.datepicker.month').datepicker(profiles.config.datepicker.month); //show preview of uploaded image - $('input[type="file"]').on('change', (e) => profiles.preview_selected_image(e)); + $('input[type="file"]').on('change', function(e) { + profiles.preview_selected_image(e); + profiles.submit_img_update(e); + }); // enable drag and drop sorting for items with sortable class if ($('.sortable').length > 0) { From 5a62b1be0ad620ff89f252e34ab404a4c6f2f4a6 Mon Sep 17 00:00:00 2001 From: Betsy Castro <5490820+betsyecastro@users.noreply.github.com> Date: Tue, 19 Nov 2024 10:30:36 -0600 Subject: [PATCH 02/11] =?UTF-8?q?=F0=9F=9A=B8=20Refactor=20profile=20pictu?= =?UTF-8?q?re=20upload=20process=20to=20use=20a=20Livewire=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/Http/Controllers/ProfilesController.php | 2 +- .../Livewire/ProfilePictureEditorModal.php | 40 +++++++++++++++++++ public/js/app.js | 12 ------ public/mix-manifest.json | 2 +- resources/assets/js/app.js | 12 ------ .../profile-picture-editor-modal.blade.php | 36 +++++++++++++++++ .../views/profiles/edit/information.blade.php | 22 +++------- resources/views/profiles/show.blade.php | 4 ++ 8 files changed, 87 insertions(+), 43 deletions(-) create mode 100644 app/Http/Livewire/ProfilePictureEditorModal.php create mode 100644 resources/views/livewire/profile-picture-editor-modal.blade.php diff --git a/app/Http/Controllers/ProfilesController.php b/app/Http/Controllers/ProfilesController.php index 34caee05..768043dd 100644 --- a/app/Http/Controllers/ProfilesController.php +++ b/app/Http/Controllers/ProfilesController.php @@ -272,7 +272,7 @@ public function update(Profile $profile, string $section, ProfileUpdateRequest $ public function updateImage(Profile $profile, ProfileImageRequest $request): RedirectResponse { - return redirect()->route('profiles.edit', [$profile->slug, 'information'])->with('flash_message', $profile->processImage($request->file('image'), 'images')); + return redirect()->route('profiles.show', [$profile->slug, 'information'])->with('flash_message', $profile->processImage($request->file('image'), 'images')); } /** diff --git a/app/Http/Livewire/ProfilePictureEditorModal.php b/app/Http/Livewire/ProfilePictureEditorModal.php new file mode 100644 index 00000000..3f08f052 --- /dev/null +++ b/app/Http/Livewire/ProfilePictureEditorModal.php @@ -0,0 +1,40 @@ +user = auth()->user(); + } + + public function updatedImage() + { + $this->validate([ + 'image' => $this->uploadedImageRules(), + ]); + } + + public function submit() + { + $msg = $this->profile->processImage($this->image); + return redirect(route('profiles.show', $this->profile))->with('flash_message', $msg, 'images'); + } + + public function render() + { + return view('livewire.profile-picture-editor-modal'); + } +} diff --git a/public/js/app.js b/public/js/app.js index fead4a92..e35ff256 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -84,16 +84,6 @@ var profiles = function ($, undefined) { $(file_input).siblings('.invalid-feedback').removeClass('d-block'); }; - /** - * Submits img update - * - * @param {Event} event the triggered event - */ - var submit_img_update = function submit_img_update(event) { - var file_input = event.target; - $(file_input).closest('form').submit(); - }; - /** * Reindex numbers in field ids, names, and labels to match sort order, * e.g. if the first item's name is "thing[3]", rename it to "thing[0]" @@ -620,7 +610,6 @@ var profiles = function ($, undefined) { deobfuscate_mail_links: deobfuscate_mail_links, on_list_updated: on_list_updated, preview_selected_image: preview_selected_image, - submit_img_update: submit_img_update, replace_icon: replace_icon, registerTagEditors: registerTagEditors, registerProfilePickers: registerProfilePickers, @@ -641,7 +630,6 @@ $(function () { //show preview of uploaded image $('input[type="file"]').on('change', function (e) { profiles.preview_selected_image(e); - profiles.submit_img_update(e); }); // enable drag and drop sorting for items with sortable class diff --git a/public/mix-manifest.json b/public/mix-manifest.json index b550576d..4fada57e 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -1,5 +1,5 @@ { - "/js/app.js": "/js/app.js?id=d764e6cb74d3a3a53a24d6b53f91e9c0", + "/js/app.js": "/js/app.js?id=f1170fe3e2888e47851541584fd2b3e9", "/js/manifest.js": "/js/manifest.js?id=dc9ead3d7857b522d7de22d75063453c", "/css/app.css": "/css/app.css?id=bff46e69abe7a97b008296b99e4abadd", "/js/vendor.js": "/js/vendor.js?id=4d3313683b3a2faf8ca0278ce47f3880" diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js index e69e522c..bbaca78e 100644 --- a/resources/assets/js/app.js +++ b/resources/assets/js/app.js @@ -74,16 +74,6 @@ var profiles = (function ($, undefined) { $(file_input).siblings('.invalid-feedback').removeClass('d-block'); }; - /** - * Submits img update - * - * @param {Event} event the triggered event - */ - const submit_img_update = function (event) { - const file_input = event.target; - $(file_input).closest('form').submit(); - }; - /** * Reindex numbers in field ids, names, and labels to match sort order, * e.g. if the first item's name is "thing[3]", rename it to "thing[0]" @@ -557,7 +547,6 @@ var profiles = (function ($, undefined) { deobfuscate_mail_links: deobfuscate_mail_links, on_list_updated: on_list_updated, preview_selected_image: preview_selected_image, - submit_img_update : submit_img_update, replace_icon: replace_icon, registerTagEditors: registerTagEditors, registerProfilePickers: registerProfilePickers, @@ -582,7 +571,6 @@ $(function() { //show preview of uploaded image $('input[type="file"]').on('change', function(e) { profiles.preview_selected_image(e); - profiles.submit_img_update(e); }); // enable drag and drop sorting for items with sortable class diff --git a/resources/views/livewire/profile-picture-editor-modal.blade.php b/resources/views/livewire/profile-picture-editor-modal.blade.php new file mode 100644 index 00000000..f8468b8a --- /dev/null +++ b/resources/views/livewire/profile-picture-editor-modal.blade.php @@ -0,0 +1,36 @@ + \ No newline at end of file diff --git a/resources/views/profiles/edit/information.blade.php b/resources/views/profiles/edit/information.blade.php index 422ebe09..09cb6787 100644 --- a/resources/views/profiles/edit/information.blade.php +++ b/resources/views/profiles/edit/information.blade.php @@ -2,24 +2,12 @@
@foreach($data as $info)
- {!! Form::open(['url' => route('profiles.update-image', [$profile->slug]), 'method' => 'POST', 'files' => true]) !!} - -
-
-
-
- {!! Form::file('image', ['id' => 'file', 'name' => 'image', 'required' => 'true', 'accept' => 'image/*', 'class' => 'd-none form-control']) !!} - - {!! Form::inlineErrors('image') !!} -
-
- - {!! Form::close() !!} -
-
+ {{ $profile->full_name }} + + Edit + + {!! Form::open(['url' => route('profiles.update-banner', [$profile->slug]), 'method' => 'POST', 'files' => true]) !!} diff --git a/resources/views/profiles/show.blade.php b/resources/views/profiles/show.blade.php index 117af383..3a7db13f 100644 --- a/resources/views/profiles/show.blade.php +++ b/resources/views/profiles/show.blade.php @@ -37,6 +37,10 @@ @if(!$information->fancy_header)
{{ $profile->full_name }} + + Edit + +
@endif
From 3bff28d309ad6225dd136641059b5a4be397625e Mon Sep 17 00:00:00 2001 From: Betsy Castro <5490820+betsyecastro@users.noreply.github.com> Date: Wed, 20 Nov 2024 08:31:29 -0600 Subject: [PATCH 03/11] Add style for edit button position --- public/css/app.css | 5 +++++ public/mix-manifest.json | 2 +- resources/assets/sass/_profile.scss | 5 +++++ resources/views/profiles/edit/information.blade.php | 2 +- resources/views/profiles/show.blade.php | 2 +- 5 files changed, 13 insertions(+), 3 deletions(-) diff --git a/public/css/app.css b/public/css/app.css index 48bc5819..89cc481c 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -10633,6 +10633,11 @@ button.video-control .fa-play { width: 100%; } +a.edit_photo_button { + position: relative; + top: -31px; +} + .student-card-img-overlay { position: absolute; top: 0; diff --git a/public/mix-manifest.json b/public/mix-manifest.json index 4fada57e..46b1bd3b 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -1,6 +1,6 @@ { "/js/app.js": "/js/app.js?id=f1170fe3e2888e47851541584fd2b3e9", "/js/manifest.js": "/js/manifest.js?id=dc9ead3d7857b522d7de22d75063453c", - "/css/app.css": "/css/app.css?id=bff46e69abe7a97b008296b99e4abadd", + "/css/app.css": "/css/app.css?id=1bea9b088efbcac3627a45b3941195e0", "/js/vendor.js": "/js/vendor.js?id=4d3313683b3a2faf8ca0278ce47f3880" } diff --git a/resources/assets/sass/_profile.scss b/resources/assets/sass/_profile.scss index 073cdb46..78d6cf36 100644 --- a/resources/assets/sass/_profile.scss +++ b/resources/assets/sass/_profile.scss @@ -240,3 +240,8 @@ .profile_photo{ width: 100% } + +a.edit_photo_button { + position: relative; + top: -31px; +} \ No newline at end of file diff --git a/resources/views/profiles/edit/information.blade.php b/resources/views/profiles/edit/information.blade.php index 09cb6787..00d8fdb5 100644 --- a/resources/views/profiles/edit/information.blade.php +++ b/resources/views/profiles/edit/information.blade.php @@ -4,7 +4,7 @@
{{ $profile->full_name }} - + Edit diff --git a/resources/views/profiles/show.blade.php b/resources/views/profiles/show.blade.php index 3a7db13f..6f950897 100644 --- a/resources/views/profiles/show.blade.php +++ b/resources/views/profiles/show.blade.php @@ -37,7 +37,7 @@ @if(!$information->fancy_header)
{{ $profile->full_name }} - + Edit From 71a1561a334c0c8b011b6ea8a9092bc3c222788b Mon Sep 17 00:00:00 2001 From: Betsy Castro <5490820+betsyecastro@users.noreply.github.com> Date: Wed, 20 Nov 2024 09:01:51 -0600 Subject: [PATCH 04/11] Add authorization checks for profile editing and updates --- app/Http/Livewire/ProfilePictureEditorModal.php | 5 +++++ .../views/livewire/profile-picture-editor-modal.blade.php | 2 +- resources/views/profiles/show.blade.php | 2 ++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/app/Http/Livewire/ProfilePictureEditorModal.php b/app/Http/Livewire/ProfilePictureEditorModal.php index 3f08f052..340f1a69 100644 --- a/app/Http/Livewire/ProfilePictureEditorModal.php +++ b/app/Http/Livewire/ProfilePictureEditorModal.php @@ -6,11 +6,13 @@ use Livewire\Component; use Livewire\WithFileUploads; use App\Http\Requests\Concerns\HasImageUploads; +use Illuminate\Foundation\Auth\Access\AuthorizesRequests; class ProfilePictureEditorModal extends Component { use WithFileUploads; use HasImageUploads; + use AuthorizesRequests; public Profile $profile; public $image; public $user; @@ -29,7 +31,10 @@ public function updatedImage() public function submit() { + $this->authorize('update', $this->user, $this->profile); + $msg = $this->profile->processImage($this->image); + return redirect(route('profiles.show', $this->profile))->with('flash_message', $msg, 'images'); } diff --git a/resources/views/livewire/profile-picture-editor-modal.blade.php b/resources/views/livewire/profile-picture-editor-modal.blade.php index f8468b8a..7db99c67 100644 --- a/resources/views/livewire/profile-picture-editor-modal.blade.php +++ b/resources/views/livewire/profile-picture-editor-modal.blade.php @@ -3,7 +3,7 @@
Update Profile Picture
-
diff --git a/resources/views/profiles/show.blade.php b/resources/views/profiles/show.blade.php index 6f950897..2980e3e6 100644 --- a/resources/views/profiles/show.blade.php +++ b/resources/views/profiles/show.blade.php @@ -37,9 +37,11 @@ @if(!$information->fancy_header)
{{ $profile->full_name }} + @if($editable) Edit + @endif
@endif From 347cda03e8fbed4372e9fa5aa15b31d001ab0426 Mon Sep 17 00:00:00 2001 From: Betsy Castro <5490820+betsyecastro@users.noreply.github.com> Date: Wed, 27 Nov 2024 12:44:07 -0600 Subject: [PATCH 05/11] Add Livewire component to edit banner image --- .../Livewire/BannerPictureEditorModal.php | 87 +++++++++++++++++++ .../Livewire/ProfilePictureEditorModal.php | 15 ++-- public/css/app.css | 6 ++ public/mix-manifest.json | 2 +- resources/assets/sass/_profile.scss | 6 ++ .../banner-picture-editor-modal.blade.php | 71 +++++++++++++++ .../profile-picture-editor-modal.blade.php | 33 ++++--- .../views/profiles/edit/information.blade.php | 4 - resources/views/profiles/show.blade.php | 14 ++- 9 files changed, 207 insertions(+), 31 deletions(-) create mode 100644 app/Http/Livewire/BannerPictureEditorModal.php create mode 100644 resources/views/livewire/banner-picture-editor-modal.blade.php diff --git a/app/Http/Livewire/BannerPictureEditorModal.php b/app/Http/Livewire/BannerPictureEditorModal.php new file mode 100644 index 00000000..58e05ad5 --- /dev/null +++ b/app/Http/Livewire/BannerPictureEditorModal.php @@ -0,0 +1,87 @@ +fancy_header = $this->info->fancy_header; + $this->fancy_header_right = $this->info->fancy_header_right; + } + + public function updatedBannerImage() + { + $this->validate([ + 'banner_image' => $this->uploadedImageRules(), + 'fancy_header_right' => 'boolean', + ]); + } + + public function submit() + { + $this->authorize('update', $this->profile); + + $message = $this->profile->processImage($this->banner_image, 'banners'); + + $profile_info = $this->profile->information->first(); + + $profile_info->data = array_merge($profile_info->data ?? [], [ + 'fancy_header' => true, + 'fancy_header_right' => (bool) $this->fancy_header_right, + ]); + + $updated = $profile_info->save(); + + if ($updated) { + return redirect(route('profiles.show', $this->profile))->with('flash_message', $message); + } + + return back()->withErrors(['update' => 'Failed to update profile information. Please try again.']); + + } + + public function removeFancyHeader() + { + $this->authorize('update', $this->profile); + + $profile_info = $this->profile->information->first(); + + $profile_info->data = array_merge($profile_info->data ?? [], [ + 'fancy_header' => false, + 'fancy_header_right' => false, + ]); + + $updated = $profile_info->save(); + + if ($updated) { + session()->flash('flash_message', 'Fancy header has been removed.'); + return redirect()->route('profiles.show', $this->profile); + } + + return back()->withErrors(['update' => 'Failed to update profile information. Please try again.']); + } + + + public function render() + { + return view('livewire.banner-picture-editor-modal'); + } +} diff --git a/app/Http/Livewire/ProfilePictureEditorModal.php b/app/Http/Livewire/ProfilePictureEditorModal.php index 340f1a69..250d896c 100644 --- a/app/Http/Livewire/ProfilePictureEditorModal.php +++ b/app/Http/Livewire/ProfilePictureEditorModal.php @@ -17,11 +17,6 @@ class ProfilePictureEditorModal extends Component public $image; public $user; - public function mount() - { - $this->user = auth()->user(); - } - public function updatedImage() { $this->validate([ @@ -31,11 +26,13 @@ public function updatedImage() public function submit() { - $this->authorize('update', $this->user, $this->profile); - - $msg = $this->profile->processImage($this->image); + $this->authorize('update', $this->profile); + + $this->validate(array_merge(['image' => $this->uploadedImageRules()], ['image' => 'required'])); + + $message = $this->profile->processImage($this->image, 'images'); - return redirect(route('profiles.show', $this->profile))->with('flash_message', $msg, 'images'); + return redirect(route('profiles.show', $this->profile))->with('flash_message', $message); } public function render() diff --git a/public/css/app.css b/public/css/app.css index 89cc481c..796b7bc5 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -10638,6 +10638,12 @@ a.edit_photo_button { top: -31px; } +a.edit_banner_button { + position: relative; + top: 40px; + right: -25px; +} + .student-card-img-overlay { position: absolute; top: 0; diff --git a/public/mix-manifest.json b/public/mix-manifest.json index 46b1bd3b..826f90e7 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -1,6 +1,6 @@ { "/js/app.js": "/js/app.js?id=f1170fe3e2888e47851541584fd2b3e9", "/js/manifest.js": "/js/manifest.js?id=dc9ead3d7857b522d7de22d75063453c", - "/css/app.css": "/css/app.css?id=1bea9b088efbcac3627a45b3941195e0", + "/css/app.css": "/css/app.css?id=43db783297cc7cea26ac2a0eef1f150c", "/js/vendor.js": "/js/vendor.js?id=4d3313683b3a2faf8ca0278ce47f3880" } diff --git a/resources/assets/sass/_profile.scss b/resources/assets/sass/_profile.scss index 78d6cf36..e0caa505 100644 --- a/resources/assets/sass/_profile.scss +++ b/resources/assets/sass/_profile.scss @@ -244,4 +244,10 @@ a.edit_photo_button { position: relative; top: -31px; +} + +a.edit_banner_button { + position: relative; + top: 40px; + right: -25px; } \ No newline at end of file diff --git a/resources/views/livewire/banner-picture-editor-modal.blade.php b/resources/views/livewire/banner-picture-editor-modal.blade.php new file mode 100644 index 00000000..bd2a7b04 --- /dev/null +++ b/resources/views/livewire/banner-picture-editor-modal.blade.php @@ -0,0 +1,71 @@ + \ No newline at end of file diff --git a/resources/views/livewire/profile-picture-editor-modal.blade.php b/resources/views/livewire/profile-picture-editor-modal.blade.php index 7db99c67..5101a22c 100644 --- a/resources/views/livewire/profile-picture-editor-modal.blade.php +++ b/resources/views/livewire/profile-picture-editor-modal.blade.php @@ -3,32 +3,37 @@
Update Profile Picture
-
@csrf - +

-
- {!! Form::file('image', ['id' => 'file', 'name' => 'image', 'required' => 'true', 'accept' => 'image/*', 'wire:model' => 'image', 'class' => 'd-none form-control']) !!} - @error('image') {{ $message }} @enderror - - {!! Form::inlineErrors('image') !!} + @if ($errors->any()) + + @endif + {!! Form::file('image', ['id' => 'file', 'name' => 'image', 'accept' => 'image/*', 'wire:model' => 'image', 'class' => 'd-none form-control']) !!} + +
+ +
+
+ +
- -
-
diff --git a/resources/views/profiles/edit/information.blade.php b/resources/views/profiles/edit/information.blade.php index 00d8fdb5..987c6f10 100644 --- a/resources/views/profiles/edit/information.blade.php +++ b/resources/views/profiles/edit/information.blade.php @@ -4,10 +4,6 @@
{{ $profile->full_name }} - - Edit - - {!! Form::open(['url' => route('profiles.update-banner', [$profile->slug]), 'method' => 'POST', 'files' => true]) !!} diff --git a/resources/views/profiles/show.blade.php b/resources/views/profiles/show.blade.php index 2980e3e6..c60ec746 100644 --- a/resources/views/profiles/show.blade.php +++ b/resources/views/profiles/show.blade.php @@ -38,11 +38,11 @@
{{ $profile->full_name }} @if($editable) - - Edit + + Profile @endif - +
@endif
@@ -116,6 +116,14 @@ @endif
+
+ @if($editable) + + Banner + + @endif + +
-
- @if($editable) - - Banner - - @endif - -
+ @if($editable) +
+ + Banner + +
+ @endif +