pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web_editor, web_unsplash: do not display too many undraw images

Browse Source 
Before this commit, typing a query in the search input of the media
dialog would output a lot of undraw images (15), making some noise and
making the unsplash results (that are fetched 10 by 10) less visible.

First, the number of fetched attachments was reduced from 30 to 10 when
converted to owl in [1], for no valid reason. This commit adds a new
NUMBER_OF_RECORDS_TO_DISPLAY value for better control over the loaded
images, and reverts it to 30.

Then, the /web_editor/media_library_search endpoint does not take any
limit param. Therefore, it was loaded with all the results as they were
returned. Now, a new NUMBER_OF_MEDIA_TO_DISPLAY variable is introduced
to load the 10 first results instead of all of them.

This way, the search results are organised as following:
- NUMBER_OF_ATTACHMENTS_TO_DISPLAY (30 for now) attachments,
- NUMBER_OF_MEDIA_TO_DISPLAY (10 for now) media (undraw, ...),
- NUMBER_OF_RECORDS_TO_DISPLAY (30 for now) unsplash images.

These values can be changed to adjust the search (it may be better to
have more unsplash images than undraw images).

[1]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b

task-3060679

X-original-commit: bc4fe60bcebd3e47f206c911526784a88fd520d9
Part-of: odoo/odoo#118556
This commit is contained in:
Younn Olivier
2023-04-14 11:49:24 +02:00
committed by qsm-odoo
parent 1a5a14268d
commit 883f2e2519
3 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/components/media_dialog/file_selector.js
+1 -1
View File
@@ -146,7 +146,7 @@ export class FileSelector extends Component {
needle: '',
});
this.NUMBER_OF_ATTACHMENTS_TO_DISPLAY = 10;
this.NUMBER_OF_ATTACHMENTS_TO_DISPLAY = 30;
onWillStart(async () => {
this.state.attachments = await this.fetchAttachments(this.NUMBER_OF_ATTACHMENTS_TO_DISPLAY, 0);
addons/web_editor/static/src/components/media_dialog/image_selector.js
+3 -1
View File
@@ -53,6 +53,7 @@ export class ImageSelector extends FileSelector {
this.state.isFetchingLibrary = false;
this.state.searchService = 'all';
this.state.showOptimized = false;
this.NUMBER_OF_MEDIA_TO_DISPLAY = 10;
this.uploadText = this.env._t("Upload an image");
this.urlPlaceholder = "https://www.odoo.com/logo.png";
@@ -169,7 +170,8 @@ export class ImageSelector extends FileSelector {
}
);
this.state.isFetchingLibrary = false;
return { media: response.media || [], results: response.results };
const media = (response.media || []).slice(0, this.NUMBER_OF_MEDIA_TO_DISPLAY);
return { media, results: response.results };
} catch {
// Either API endpoint doesn't exist or is misconfigured.
console.error(`Couldn't reach API endpoint.`);
addons/web_unsplash/static/src/components/media_dialog/image_selector.js
+2 -1
View File
@@ -49,6 +49,7 @@ patch(ImageSelector.prototype, 'image_selector_unsplash', {
this.state.isMaxed = false;
this.state.unsplashError = null;
this.state.useUnsplash = true;
this.NUMBER_OF_RECORDS_TO_DISPLAY = 30;
this.errorMessages = {
'key_not_found': {
@@ -123,7 +124,7 @@ patch(ImageSelector.prototype, 'image_selector_unsplash', {
}
this.state.isFetchingUnsplash = true;
try {
const { isMaxed, images } = await this.unsplash.getImages(this.state.needle, offset, this.NUMBER_OF_ATTACHMENTS_TO_DISPLAY, this.props.orientation);
const { isMaxed, images } = await this.unsplash.getImages(this.state.needle, offset, this.NUMBER_OF_RECORDS_TO_DISPLAY, this.props.orientation);
this.state.isFetchingUnsplash = false;
this.state.unsplashError = false;
const records = images.map(record => {