Skip to content

Commit

Permalink
IP-262: task completed
Browse files Browse the repository at this point in the history
  • Loading branch information
papandrk committed Nov 13, 2024
1 parent 534cfb6 commit 1ddb3a5
Show file tree
Hide file tree
Showing 5 changed files with 43 additions and 25 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ class CrowdSourcingProjectProblemManager {
protected LanguageRepository $languageRepository;
protected CrowdSourcingProjectManager $crowdSourcingProjectManager;

const DEFAULT_IMAGE_PATH = '/images/problem_default_image.png';

public function __construct(
CrowdSourcingProjectProblemRepository $crowdSourcingProjectProblemRepository,
CrowdSourcingProjectTranslationManager $crowdSourcingProjectTranslationManager,
Expand Down Expand Up @@ -84,6 +86,8 @@ public function getCreateEditProblemViewModel(?int $id = null): CreateEditProble
public function storeProblem(array $attributes): int {
if (isset($attributes['problem-image']) && $attributes['problem-image']->isValid()) {
$imgPath = FileUploader::uploadAndGetPath($attributes['problem-image'], 'problem_image');
} else {
$imgPath = self::DEFAULT_IMAGE_PATH;
}

$crowdSourcingProjectProblem = CrowdSourcingProjectProblem::create([
Expand Down
Binary file added public/images/problem_default_image.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 17 additions & 17 deletions resources/assets/js/project/problem/manage-problem.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,22 +51,22 @@ import $ from "jquery";
// el.val(el.summernote("code"));
// };

// const initializeImgFileChangePreviewHandlers = function () {
// $(".image-input").each(function (i, obj) {
// $(obj).change(function () {
// const event = this;
// if (event.files && event.files[0]) {
// const parent = $(obj).closest(".image-input-container");
// const imgPreview = parent.find(".selected-image-preview");
// const reader = new FileReader();
// reader.onload = function (e) {
// imgPreview.attr("src", e.target.result);
// };
// reader.readAsDataURL(event.files[0]);
// }
// });
// });
// };
const initializeImgFileChangePreviewHandlers = function () {
$(".js-image-input").each(function (i, obj) {
$(obj).change(function () {
const event = this;
if (event.files && event.files[0]) {
const parent = $(obj).closest(".js-image-input-container");
const imgPreview = parent.find(".js-selected-image-preview");
const reader = new FileReader();
reader.onload = function (e) {
imgPreview.attr("src", e.target.result);
};
reader.readAsDataURL(event.files[0]);
}
});
});
};

// const initializeCommunicationResourcesHandlers = function () {
// initializeSummernoteAndUpdateElementOnKeyup($("#questionnaire_response_email_intro_text"), $("#intro_text"));
Expand Down Expand Up @@ -105,7 +105,7 @@ import $ from "jquery";

const init = function () {
// initializeSubmitFormListener();
// initializeImgFileChangePreviewHandlers();
initializeImgFileChangePreviewHandlers();
// initializeSummernote();
// initializeSocialMediaKeywordsTags();
checkURLAndActivateTranslationsTab();
Expand Down
15 changes: 15 additions & 0 deletions resources/assets/sass/project/problem/create-edit-problem.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
@import "../../variables";

.input-file-wrapper {
overflow: hidden;
}

.image-preview-container {
text-align: center;

.selected-image-preview {
max-height: 200px;
max-width: 100%;
padding: 20px 0;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -138,33 +138,32 @@ class="form-control {{ $errors->has('problem-default-language') ? 'is-invalid' :
class="form-control {{ $errors->has('problem-slug') ? 'is-invalid' : '' }}"
required
placeholder="Problem Slug"
{{-- value="{{ old('problem-slug') ? old('problem-slug') : $viewModel->problem->slug }}" bookmark2 --}}
value="{{ old('problem-slug') ? old('problem-slug') : '' }}"
value="{{ old('problem-slug') ? old('problem-slug') : $viewModel->problem->slug }}"
>
<div id="problem-slug-feedback" class="invalid-feedback"><strong>{{ $errors->first('problem-slug') }}</strong></div>
</div>
</div>
@endif

<div class="form-row js-bookmark3-image-input-container">
<div class="form-row js-image-input-container">
<div class="col-sm-12">
<div class="form-group css-bookmark3-input-file-wrapper">
<div class="form-group input-file-wrapper">
<label for="problem-image">Problem Image (max-size: 2MB)</label></label>
<small>In order to update the currently selected image, please choose a new image by clicking the button below.</small><br>
<input type="file"
id="problem-image"
name="problem-image"
class="form-control p-2 h-auto {{ $errors->has('problem-image') ? 'is-invalid' : '' }} js-bookmark3-image-input"
class="form-control p-2 h-auto {{ $errors->has('problem-image') ? 'is-invalid' : '' }} js-image-input"
accept="image/png,image/jpeg,image/jpg"
placeholder="Problem Image"
>
<div id="problem-image-feedback" class="invalid-feedback"><strong>{{ $errors->first('problem-image') }}</strong></div>
</div>
<div class="css-bookmark3-image-preview-container">
<div class="image-preview-container">
<img
loading="lazy"
class="css-js-bookmark3-selected-image-preview"
src="{{ asset($viewModel->problem->img_url) }}"
class="selected-image-preview js-selected-image-preview"
src="{{ $viewModel->problem->img_url ? asset($viewModel->problem->img_url) : '/images/problem_default_image.png' }}"
alt="">
</div>
</div>
Expand Down

0 comments on commit 1ddb3a5

Please sign in to comment.