-
Notifications
You must be signed in to change notification settings - Fork 56
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
EZP-29104: Implemented UI for ImageAsset Field Type #580
EZP-29104: Implemented UI for ImageAsset Field Type #580
Conversation
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
@@ -37,3 +37,6 @@ system: | |||
multiple: false | |||
content_on_the_fly: | |||
allowed_content_types: ['image'] | |||
image_asset: | |||
multiple: false | |||
visible_tabs: ['browse', 'search', 'bookmarks'] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why you should not be able to create content while picking from UDW?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good question. I going to check this with PM team 😉
const SELECTOR_INPUT_FILE = 'input[type="file"]'; | ||
const SELECTOR_LABEL_WRAPPER = '.ez-field-edit__label-wrapper'; | ||
const SELECTOR_INPUT_DESTINATION_CONTENT_ID = '.ez-field-edit__destination_content_id'; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No need to separate const
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Empty lines are not needed in const
const imageAssetMapping = eZ.adminUiConfig.imageAssetMapping; | ||
|
||
class EzImageAssetPreviewField extends eZ.BasePreviewField { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please remove empty line
* @param {String} languageCode | ||
*/ | ||
createImage(file, languageCode) { | ||
const assetCreateUri = '/asset/image'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should be generate by the JS routing
}; | ||
|
||
this.toggleLoading(true); | ||
fetch(assetCreateUri, options).then((response) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please move this function to some method
canSelectContent, | ||
title, | ||
multiple: false, | ||
startingLocationId: parseInt(imageAssetMapping['parent_location_id'], 10), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This can't be moved to the config
?
super.init(); | ||
|
||
this.btnSelect = this.fieldContainer.querySelector('.ez-data-source__btn-select'); | ||
this.btnSelect.addEventListener('click', (event) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I do not see a point of this middle function which will only preventDefault
, you can do it in openUDW
} | ||
|
||
.ez-field-edit__spinner { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this can be remove
@@ -0,0 +1,78 @@ | |||
.ez-field-edit--ezimageasset { | |||
.ez-field-edit-preview { | |||
padding: 1.25rem 0 1.25rem 1.25rem; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indentation 4 spaces
} | ||
} | ||
|
||
.ez-field-edit { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This will override styles for all fields. Cannot be done like this.
PR rebased and updated according to @dew326 suggestions. |
const SELECTOR_INPUT_FILE = 'input[type="file"]'; | ||
const SELECTOR_LABEL_WRAPPER = '.ez-field-edit__label-wrapper'; | ||
const SELECTOR_INPUT_DESTINATION_CONTENT_ID = '.ez-field-edit__destination_content_id'; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Empty lines are not needed in const
const SELECTOR_FIELD = '.ez-field-edit--ezimageasset'; | ||
const SELECTOR_INPUT_FILE = 'input[type="file"]'; | ||
const SELECTOR_LABEL_WRAPPER = '.ez-field-edit__label-wrapper'; | ||
const SELECTOR_INPUT_DESTINATION_CONTENT_ID = '.ez-field-edit__destination_content_id'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
not correct BEM class: ez-field-edit__destination-content-id
method: 'POST', | ||
headers: { | ||
'Accept': 'application/json', | ||
//'X-CSRF-Token': token |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the CSRF token should be sent in POST requests .
}, | ||
body: form, | ||
mode: 'same-origin', | ||
credentials: 'same-origin' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do you have Prettier
installed? I think we have rule for trailingComma
}; | ||
|
||
this.toggleLoading(true); | ||
fetch(assetCreateUri, options) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would add empty line before this fetch
} | ||
} | ||
|
||
.ez-field-edit--ezimageasset { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This can be combined with the rules above
} | ||
|
||
.ez-field-edit--ezimageasset { | ||
&__preview-wrapper { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this will be compiled to: ez-field-edit--ezimageasset__preview-wrapper
and this is not correct usage of BEM
.ez-field-preview--ezimageasset { | ||
display: flex; | ||
|
||
.ez-imageasset__wrapper { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems like not correct BEM
{% endblock %} | ||
|
||
{% block ezplatform_fieldtype_ezimageasset_widget %} | ||
<div class="ez-data-source__message--main"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems like not correct BEM usage
</div> | ||
|
||
{% if max_file_size is defined and max_file_size > 0 %} | ||
<div class="ez-data-source__message--filesize"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The same, not correct BEM
|
||
$form = $this->formFactory->assetUpload($data, 'form'); | ||
$form->handleRequest($request); | ||
if ($form->isValid()) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I believe it's advised by Symfony to use $form->isSubmitted() && $form->isValid()
together.
use Symfony\Component\HttpFoundation\Request; | ||
use Symfony\Component\HttpFoundation\Response; | ||
|
||
class AssetController extends Controller |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I doubt it's a good idea to keep the Controller in AdminUI - what if we need this fieldtype to be available for frontend editing?
method: 'POST', | ||
headers: { | ||
'Accept': 'application/json', | ||
//'X-CSRF-Token': token |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Commented out code should not be commited.
@@ -223,3 +223,6 @@ | |||
{{- form_row(form.textRows) -}} | |||
</div> | |||
{% endblock %} | |||
|
|||
{% block ezimageasset_field_definition_edit %} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is an empty block needed?
|
||
{% set widget_container_block = block('ezplatform_fieldtype_ezimageasset_widget_container') %} | ||
|
||
{{ block('form_row_fieldtype') }} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You are duplicating a lot of variables from block binary_base_row
(defined in binary_base.html.twig
). Can't you override only some of the variables (it might require to do some changes to binary_base_row
to make it possible) and display binary_base_row
?
</tr> | ||
<tr> | ||
<td>{{ 'ezimageasset.size'|trans|desc('Size') }}:</td> | ||
<td>{{ field.value.fileSize|ez_file_size( 1 ) }}</td> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Spaces no needed: ez_file_size(1)
{ | ||
$data = new AssetUploadData(); | ||
|
||
$form = $this->formFactory->assetUpload($data, 'form'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Name form
feels too generic to me.
const assetCreateUri = global.Routing.generate('ezplatform.asset.upload'); | ||
const form = new FormData(); | ||
|
||
form.append('form[languageCode]', languageCode); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You shouldn't manually compose Data object here. Please use existing form:
const request = new Request(form.action, {
method: 'POST',
body: new FormData(form),
mode: 'same-origin',
credentials: 'same-origin',
});
I have been thinking about the whole idea of using a form in this case and this makes no sense. This should be done like this:
{
languageCode: languageCode,
file: file
}
|
Totally overlooked how it's really done yesterday, sorry. I second what @dew326 said. Using Form is convenient, especially when validation and creating data object is needed but in your case it's totally misused. It works but it will be confusing for anyone who maintains the code in the future. |
} | ||
|
||
return new JsonResponse([ | ||
'status' => 'error', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this status field really needed?
$this->languageCode = $languageCode; | ||
} | ||
|
||
public function getFile(): ?UploadedFile |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
missing docblock here and below
Ready for the second round of code review @dew326, @webhdx, @mikadamczyk. |
(function(global, doc, eZ, React, ReactDOM, Translator) { | ||
const SELECTOR_FIELD = '.ez-field-edit--ezimageasset'; | ||
const SELECTOR_INPUT_FILE = 'input[type="file"]'; | ||
const SELECTOR_INPUT_DESTINATION_CONTENT_ID = '.ez-data-source--ezimageasset__destination-content-id'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This in not correct. You shouldn't add children to class with modifier.
ez-data-source__destination-content-id
{% set imageAlias = ez_image_alias( field, versionInfo, parameters.alias|default( 'original' ) ) %} | ||
{% set src = imageAlias ? asset( imageAlias.uri ) : "//:0" %} | ||
|
||
<div class="ez-imageasset__wrapper"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ez-field-preview__image-wrapper
PR ready for the final code review @webhdx @dew326 @mikadamczyk |
</div> | ||
{% endif %} | ||
|
||
{{- form_widget(form.file, {'attr': attr}) -}} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we drop the idea of creating a form for this?
default: | ||
controller: 'EzPlatformAdminUiBundle:ContentView:locationView' | ||
template: '@ezdesign\fieldtypes\preview\ezimageasset.html.twig' | ||
match: true |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
missing empty line
@@ -20,7 +22,10 @@ | |||
{% set widget_wrapper_attr = widget_wrapper_attr|merge({'hidden': 'hidden'}) %} | |||
{% endif %} | |||
|
|||
{% set widget_container_block = block('binary_base_widget_container') %} | |||
{% if not widget_container_block_name is defined %} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why not {% if widget_container_block_name is not defined %}
? Looks better and reads better.
This comment has been minimized.
This comment has been minimized.
I Error 500 after deleting Image used in ImageAssets field
II Error 500 after editing added image in Media/Image
III Question: IV Question: V User receive error when tries to upload a file which is not an image
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
VI Permissions:
Preconditions: created CT with ImageAssets field type
- Create user Editor
- Change Editor's assignments: left only
Subtree of Location: /Home
- Log in as an Editor
- Go to Content/Content structure and click Create
- Choose CT with Image Assets field type
- Drag and drop an image
Actual result: We receive a messageError while creating image asset
- we could be more specific and display sth about permissions, because error occurs if user does't have permissions to create a CI anywhere except Home.
Thanks @barbaragr for testing. I Error 500 after deleting Image used in ImageAssets field II Error 500 after editing added image in Media/Image III Question: IV Question:
Totally agree. |
PS. I will update PR today 😉 |
I can confirm that 1 is solved just by rebasing. |
PR updated according to @barbaragr suggestions and ready to second round of QA.
When the related content item is deleted or current user doesn't have permission to see it the the following message will be display: From technical POV, I implemented AD3) No changes here. AD4) No changes here. I'm missing proper API in UDW to be able to do this. AD5) Behavior has been aligned with the When you try to force upload of non-image file the "The file is not valid image" error will be displayed: |
AD I Image is still visible after deleting Image used in ImageAssets field
|
AD II Question:
|
AD VI Question: |
VII I can't create Landing Page
|
Displaying |
VIII Error when previewing LP after sending to trash image from image asset field
|
); | ||
|
||
this.toggleLoading(false); | ||
showErrorNotification({ message }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think that these curly braces are needless. It should be:
showErrorNotification(message);
showErrorNotification
takes Error object or string
.
All right! To sum up: I didn't check DBP (blocked by: https://jira.ez.no/browse/EZEE-2308) and translations (blocked by: https://jira.ez.no/browse/EZEE-2316) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ready to merge @alongosz
Co-authored-by: Dawid Parafiński <[email protected]> Co-authored-by: Jakub Brzegowski <[email protected]>
Checklist:
$ composer fix-cs
)