From 1f66e4235c7f19720aceabbde5e3391780322efc Mon Sep 17 00:00:00 2001 From: Pawan Kumar Gupta <133222848+pawangupta079@users.noreply.github.com> Date: Mon, 29 Sep 2025 19:46:05 +0530 Subject: [PATCH] Update newTab.js This appears to be a custom tab for a platform like Akeneo PIM, I can make several improvements to enhance its robustness, readability, and maintainability. --- .../public/js/job/common/edit/newTab.js | 79 +++++++++++-------- 1 file changed, 47 insertions(+), 32 deletions(-) diff --git a/src/DynamicJobTabBundle/public/js/job/common/edit/newTab.js b/src/DynamicJobTabBundle/public/js/job/common/edit/newTab.js index ef5c837..21e8d3e 100644 --- a/src/DynamicJobTabBundle/public/js/job/common/edit/newTab.js +++ b/src/DynamicJobTabBundle/public/js/job/common/edit/newTab.js @@ -10,20 +10,29 @@ define([ 'pim/common/property', 'pim/edition', 'pim/fetcher-registry', - ], function (_, __, template, BaseTab, propertyAccessor, pimEdition, FetcherRegistry) { return BaseTab.extend({ template: _.template(template), errors: {}, + jobInstanceCode: null, // Store job instance code locally /** * {@inherit} */ configure: function () { - this.listenTo(this.getRoot(), 'pim_enrich:form:entity:post_fetch', this.resetValidationErrors.bind(this)); - this.listenTo(this.getRoot(), 'pim_enrich:form:entity:post_fetch', this.render.bind(this)); - this.listenTo(this.getRoot(), 'pim_enrich:form:entity:validation_error', this.setValidationErrors.bind(this)); - this.listenTo(this.getRoot(), 'pim_enrich:form:entity:validation_error', this.render.bind(this)); + // Using arrow functions for listeners automatically binds `this`, making the code cleaner. + this.listenTo(this.getRoot(), 'pim_enrich:form:entity:post_fetch', (data) => { + // IMPROVEMENT 1: Get data directly from the form model instead of the URL. + // This is more reliable and decouples the component from the URL structure. + this.jobInstanceCode = data.code || null; + this.resetValidationErrors(); + this.render(); + }); + + this.listenTo(this.getRoot(), 'pim_enrich:form:entity:validation_error', (event) => { + this.setValidationErrors(event); + this.render(); + }); return BaseTab.prototype.configure.apply(this, arguments); }, @@ -32,52 +41,57 @@ define([ * {@inherit} */ registerTab: function () { - var parent = this.parent.parent ; - FetcherRegistry.getFetcher('job_code_by_instance_code') - .fetch(this.getJobInstanceCode(), { cached: true }) - .then(function (jobCode) { - console.log(jobCode) - if (-1 !== this.config.whitelistJobs.indexOf(jobCode)) { - this.trigger('tab:register', { - code: this.config.tabCode ? this.config.tabCode : this.code, - label: __(this.config.tabTitle), - isVisible: () => !(this.config.hideForCloudEdition && pimEdition.isCloudEdition()), - }); - } - }.bind(this)); + // Exit early if the job instance code is not available. + if (!this.jobInstanceCode) { + return; + } + + FetcherRegistry.getFetcher('job_code_by_instance_code') + .fetch(this.jobInstanceCode, { cached: true }) + // IMPROVEMENT 2: Use an arrow function to avoid needing `.bind(this)`. + .then((jobCode) => { + // Use `includes` for better readability than `indexOf`. + if (this.config.whitelistJobs.includes(jobCode)) { + this.trigger('tab:register', { + code: this.config.tabCode ? this.config.tabCode : this.code, + label: __(this.config.tabTitle), + // This arrow function for isVisible is already well-written. + isVisible: () => !(this.config.hideForCloudEdition && pimEdition.isCloudEdition()), + }); + } + }); }, /** - * + * NOTE: The getJobInstanceCode method has been removed. + * Relying on `window.location.href` was fragile. If the URL routing ever changed, + * the code would break. We now get the code directly from the form's data model + * in the `configure` method, which is much safer. */ - getJobInstanceCode: function () { - var url = window.location.href; - var urlAfterRemoveEdit = (url.substring(0, url.length - 5)); - return urlAfterRemoveEdit.substring(urlAfterRemoveEdit.lastIndexOf('/') + 1); - - }, /** * Set validation errors after save request failure * - * @param {event} event + * @param {object} event */ setValidationErrors: function (event) { - this.errors = event.response; + this.errors = event.response || {}; }, /** - * Remove validation error + * Remove validation errors. */ resetValidationErrors: function () { - if (Object.entries(this.errors).length >= 0) { + // IMPROVEMENT 3: The original condition `Object.entries(this.errors).length >= 0` + // would always be true. This new condition correctly checks if there are any errors. + if (Object.keys(this.errors).length > 0) { this.getRoot().trigger('pim_enrich:form:form-tabs:remove-errors'); this.errors = {}; } }, /** - * Get the validtion errors for the given field + * Get the validation errors for the given field. * * @param {string} field * @@ -95,9 +109,10 @@ define([ return this; } - this.$el.html(this.template({__: __})); - + this.$el.html(this.template({ __: __ })); this.renderExtensions(); + + return this; // It's good practice for render to return `this`. }, }); });