Subida del módulo y tema de PrestaShop

admin_o2w/themes/new-theme/js/pages/employee/EmployeeForm.ts

@@ -0,0 +1,169 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+
+import ChoiceTree from '../../components/form/choice-tree';
+import AddonsConnector from '../../components/addons-connector';
+import ChangePasswordControl from '../../components/form/change-password-control';
+import employeeFormMap from './employee-form-map';
+import ChangePasswordHandler from '../../components/change-password-handler';
+
+/**
+ * Class responsible for javascript actions in employee add/edit page.
+ */
+export default class EmployeeForm {
+  shopChoiceTreeSelector: string;
+
+  shopChoiceTree: ChoiceTree;
+
+  employeeProfileSelector: string;
+
+  tabsDropdownSelector: string;
+
+  constructor() {
+    this.shopChoiceTreeSelector = employeeFormMap.shopChoiceTree;
+    this.shopChoiceTree = new window.prestashop.component.ChoiceTree(this.shopChoiceTreeSelector);
+    this.employeeProfileSelector = employeeFormMap.profileSelect;
+    this.tabsDropdownSelector = employeeFormMap.defaultPageSelect;
+
+    this.shopChoiceTree.enableAutoCheckChildren();
+
+    new AddonsConnector(
+      employeeFormMap.addonsConnectForm,
+      employeeFormMap.addonsLoginButton,
+    );
+
+    new ChangePasswordControl(
+      employeeFormMap.changePasswordInputsBlock,
+      employeeFormMap.showChangePasswordBlockButton,
+      employeeFormMap.hideChangePasswordBlockButton,
+      employeeFormMap.oldPasswordInput,
+      employeeFormMap.newPasswordInput,
+      employeeFormMap.confirmNewPasswordInput,
+      employeeFormMap.generatedPasswordDisplayInput,
+      employeeFormMap.passwordStrengthFeedbackContainer,
+      employeeFormMap.generatedPasswordButton,
+    );
+
+    const passwordHandler = new ChangePasswordHandler(
+      employeeFormMap.passwordStrengthFeedbackContainer,
+    );
+    passwordHandler.watchPasswordStrength($(employeeFormMap.passwordInput));
+
+    this.initEvents();
+    this.toggleShopTree();
+  }
+
+  /**
+   * Initialize page's events.
+   *
+   * @private
+   */
+  private initEvents(): void {
+    const $employeeProfilesDropdown = $(this.employeeProfileSelector);
+    const getTabsUrl = $employeeProfilesDropdown.data('get-tabs-url');
+
+    $(document).on('change', this.employeeProfileSelector, () => this.toggleShopTree(),
+    );
+
+    // Reload tabs dropdown when employee profile is changed.
+    $(document).on('change', this.employeeProfileSelector, (event) => {
+      const $tabsDropdown = $(this.tabsDropdownSelector);
+      $tabsDropdown.empty();
+      $tabsDropdown.prop('disabled', true);
+      $.get(
+        getTabsUrl,
+        {
+          profileId: $(event.currentTarget).val(),
+        },
+        (tabs) => {
+          this.reloadTabsDropdown(tabs);
+        },
+        'json',
+      );
+    });
+  }
+
+  /**
+   * Reload tabs dropdown with new content.
+   *
+   * @param {Object} accessibleTabs
+   *
+   * @private
+   */
+  private reloadTabsDropdown(accessibleTabs: HTMLElement): void {
+    const $tabsDropdown = $(this.tabsDropdownSelector);
+
+    $tabsDropdown.empty();
+
+    Object.values(accessibleTabs).forEach((accessibleTab) => {
+      if (accessibleTab.children.length > 0 && accessibleTab.name) {
+        // If tab has children - create an option group and put children inside.
+        const $optgroup = this.createOptionGroup(accessibleTab.name);
+
+        Object.keys(accessibleTab.children).forEach((childKey) => {
+          if (accessibleTab.children[childKey].name) {
+            $optgroup.append(
+              this.createOption(
+                accessibleTab.children[childKey].name,
+                accessibleTab.children[childKey].id_tab,
+              ),
+            );
+          }
+        });
+
+        $tabsDropdown.append($optgroup);
+      } else if (accessibleTab.name) {
+        // If tab doesn't have children - create an option.
+        $tabsDropdown.append(
+          this.createOption(accessibleTab.name, accessibleTab.id_tab),
+        );
+      }
+    });
+    $tabsDropdown.prop('disabled', false);
+  }
+
+  /**
+   * Hide shop choice tree if superadmin profile is selected, show it otherwise.
+   *
+   * @private
+   */
+  private toggleShopTree(): void {
+    const $employeeProfileDropdown = $(this.employeeProfileSelector);
+    const superAdminProfileId = $employeeProfileDropdown.data('admin-profile');
+    $(this.shopChoiceTreeSelector)
+      .closest('.form-group')
+      .toggleClass(
+        'd-none',
+        $employeeProfileDropdown.val() === superAdminProfileId,
+      );
+  }
+
+  /**
+   * Creates an <optgroup> element
+   *
+   * @param {String} name
+   *
+   * @returns {jQuery}
+   *
+   * @private
+   */
+  private createOptionGroup(name: string): JQuery {
+    return $(`<optgroup label="${name}">`);
+  }
+
+  /**
+   * Creates an <option> element.
+   *
+   * @param {String} name
+   * @param {String} value
+   *
+   * @returns {jQuery}
+   *
+   * @private
+   */
+  private createOption(name: string, value: string): JQuery {
+    return $(`<option value="${value}">${name}</option>`);
+  }
+}

admin_o2w/themes/new-theme/js/pages/employee/employee-form-map.ts

@@ -0,0 +1,27 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+
+/**
+ * Defines all selectors that are used in employee add/edit form.
+ */
+export default {
+  shopChoiceTree: '#employee_shop_association',
+  profileSelect: '#employee_profile',
+  passwordInput: '#employee_password',
+  defaultPageSelect: '#employee_default_page',
+  addonsConnectForm: '#addons-connect-form',
+  addonsLoginButton: '#addons_login_btn',
+
+  // selectors related to "change password" form control
+  changePasswordInputsBlock: '.js-change-password-block',
+  showChangePasswordBlockButton: '.js-change-password',
+  hideChangePasswordBlockButton: '.js-change-password-cancel',
+  oldPasswordInput: '#employee_change_password_old_password',
+  newPasswordInput: '#employee_change_password_new_password_first',
+  confirmNewPasswordInput: '#employee_change_password_new_password_second',
+  generatedPasswordDisplayInput: '#employee_change_password_generated_password',
+  generatedPasswordButton: '#employee_change_password_generate_password_button',
+  passwordStrengthFeedbackContainer: '.password-strength-feedback',
+};

admin_o2w/themes/new-theme/js/pages/employee/form.ts

@@ -0,0 +1,10 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+
+import EmployeeForm from './EmployeeForm';
+
+$(() => {
+  new EmployeeForm();
+});

admin_o2w/themes/new-theme/js/pages/employee/index.ts

@@ -0,0 +1,27 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+
+import ShowcaseCard from '@components/showcase-card/showcase-card';
+import ShowcaseCardCloseExtension from '@components/showcase-card/extension/showcase-card-close-extension';
+
+const {$} = window;
+
+$(() => {
+  const employeeGrid = new window.prestashop.component.Grid('employee');
+
+  employeeGrid.addExtension(new window.prestashop.component.GridExtensions.ReloadListExtension());
+  employeeGrid.addExtension(new window.prestashop.component.GridExtensions.ExportToSqlManagerExtension());
+  employeeGrid.addExtension(new window.prestashop.component.GridExtensions.FiltersResetExtension());
+  employeeGrid.addExtension(new window.prestashop.component.GridExtensions.SortingExtension());
+  employeeGrid.addExtension(new window.prestashop.component.GridExtensions.BulkActionCheckboxExtension());
+  employeeGrid.addExtension(new window.prestashop.component.GridExtensions.SubmitBulkActionExtension());
+  employeeGrid.addExtension(new window.prestashop.component.GridExtensions.SubmitRowActionExtension());
+  employeeGrid.addExtension(new window.prestashop.component.GridExtensions.ColumnTogglingExtension());
+  employeeGrid.addExtension(new window.prestashop.component.GridExtensions.FiltersSubmitButtonEnablerExtension());
+  employeeGrid.addExtension(new window.prestashop.component.GridExtensions.LinkRowActionExtension());
+
+  const showcaseCard = new ShowcaseCard('employeesShowcaseCard');
+  showcaseCard.addExtension(new ShowcaseCardCloseExtension());
+});