feature: lists in profile

src/Components/EmployerCompanyForm/EmployerProfileForm.js

@@ -0,0 +1,72 @@
+import { Component } from '../../modules/Components/Component.js';
+import { EmployerProfileFormView } from './EmployerProfileFormView.js';
+import { EmployerProfileFormModel } from './EmployerProfileFormModel.js';
+import { EmployerProfileFormController } from './EmployerProfileFormController.js';
+import { LiteralInput } from '/src/Components/FormInputs/LiteralInput/LiteralInput.js';
+import { CityInput } from '/src/Components/FormInputs/CityInput/CityInput.js';
+import { ValidatedTextArea } from '../FormInputs/ValidatedTextArea/ValidatedTextArea.js';
+
+export class EmployerProfileForm extends Component {
+  constructor({ userId, elementClass, existingElement }) {
+    super({
+      modelClass: EmployerProfileFormModel,
+      viewClass: EmployerProfileFormView,
+      controllerClass: EmployerProfileFormController,
+      modelParams: { userId },
+      existingElement,
+      viewParams: { elementClass },
+    });
+    this._firstNameField = new LiteralInput({
+      existingElement: this._view.firstNameField,
+      selfValidate: true,
+    });
+    this._secondNameField = new LiteralInput({
+      existingElement: this._view.secondNameField,
+      selfValidate: true,
+    });
+    this._cityField = new CityInput({
+      existingElement: this._view.cityField,
+      selfValidate: true,
+    });
+    this._contactsField = new ValidatedTextArea({
+      existingElement: this._view.contactsField,
+      selfValidate: true,
+    });
+    this._children.push(
+      this._firstNameField,
+      this._secondNameField,
+      this._cityField,
+      this._contactsField,
+    );
+
+    this.reset();
+  }
+
+  get view() {
+    return this._view;
+  }
+
+  enable() {
+    [this._firstNameField, this._secondNameField, this._cityField, this._contactsField].forEach(
+      (field) => {
+        field.controller.enable();
+      },
+    );
+  }
+
+  disable() {
+    [this._firstNameField, this._secondNameField, this._cityField, this._contactsField].forEach(
+      (field) => {
+        field.controller.disable();
+      },
+    );
+  }
+
+  reset() {
+    return this._controller.reset();
+  }
+
+  submit() {
+    return this._controller.submit();
+  }
+}

src/Components/EmployerCompanyForm/EmployerProfileFormController.js

@@ -0,0 +1,43 @@
+import { ComponentController } from '../../modules/Components/Component.js';
+import eventBus from '../../modules/Events/EventBus.js';
+import { USER_UPDATED } from '../../modules/Events/Events.js';
+
+export class EmployerProfileFormController extends ComponentController {
+  constructor(model, view, controller) {
+    super(model, view, controller);
+  }
+
+  _validate() {
+    return [
+      this._component._firstNameField.controller.validateInput({
+        callerView: this._component._firstNameField._view,
+      }),
+
+      this._component._secondNameField.controller.validateInput({
+        callerView: this._component._secondNameField._view,
+      }),
+
+      this._component._cityField.controller.validateInput({
+        callerView: this._component._cityField._view,
+      }),
+
+      this._component._contactsField.controller.validateInput({
+        callerView: this._component._contactsField._view,
+      }),
+    ].every((val) => val);
+  }
+
+  submit() {
+    if (!this._validate() || !this._model.submit(this._view.getData())) {
+      return false;
+    }
+    eventBus.emit(USER_UPDATED);
+    return true;
+  }
+
+  async reset() {
+    const oldData = await this._model.lastValidData;
+    this._view.renderData(oldData);
+    return true;
+  }
+}

src/Components/EmployerCompanyForm/EmployerProfileFormModel.js

@@ -0,0 +1,23 @@
+import { Api } from '../../modules/Api/Api.js';
+import { ComponentModel } from '../../modules/Components/Component.js';
+
+export class EmployerProfileFormModel extends ComponentModel {
+  #lastValidData;
+
+  constructor({ userId }) {
+    super();
+    this.#lastValidData = Api.getApplicantById({ id: userId });
+  }
+
+  get lastValidData() {
+    return this.#lastValidData;
+  }
+
+  async submit(formData) {
+    if (Api.updateEmployerProfile(formData)) {
+      this.#lastValidData = formData;
+      return true;
+    }
+    return false;
+  }
+}

src/Components/EmployerCompanyForm/EmployerProfileFormView.js

@@ -0,0 +1,31 @@
+import { ComponentView } from '../../modules/Components/Component.js';
+import { getFormData } from '../../modules/FormUtils/FormUtils.js';
+
+export class EmployerProfileFormView extends ComponentView {
+  constructor({ elementClass }, existingElement) {
+    super({
+      renderParams: { elementClass },
+      existingElement,
+      templateName: 'employer-profile-form.hbs',
+    });
+    this.firstNameField = this._html.querySelector('.employer-profile-form__first-name');
+    this.secondNameField = this._html.querySelector('.employer-profile-form__second-name');
+    this.cityField = this._html.querySelector('.employer-profile-form__city');
+    this.contactsField = this._html.querySelector('.employer-profile-form__contacts');
+  }
+
+  getData() {
+    return getFormData(this._html);
+  }
+
+  getId() {
+    return 'employer-profile-form';
+  }
+
+  renderData({ firstName, secondName, city, contacts }) {
+    this.firstNameField.querySelector('.validated-input__input').value = firstName;
+    this.secondNameField.querySelector('.validated-input__input').value = secondName;
+    this.cityField.querySelector('.validated-input__input').value = city;
+    this.contactsField.querySelector('.validated-textarea__textarea').value = contacts;
+  }
+}

src/Components/EmployerCompanyForm/employer-company-form.hbs

@@ -0,0 +1,5 @@
+<form class="{{elementClass}} employer-company-form" id="employer-company-form" method="POST" novalidate>
+    {{> validated-input formName="employer-company-form" elementName="first-name" inputName="firstName" inputCaption="Имя" inputType="text"}}
+    {{> validated-input formName="employer-company-form" elementName="city" inputName="city" inputCaption="Город" inputType="text"}}
+    {{> validated-textarea formName="employer-company-form" elementName="contacts" inputName="contacts" inputCaption="Контакты"}}
+</form>

src/Components/EmployerProfileForm/EmployerProfileForm.js

@@ -7,11 +7,12 @@ import { CityInput } from '/src/Components/FormInputs/CityInput/CityInput.js';
 import { ValidatedTextArea } from '../FormInputs/ValidatedTextArea/ValidatedTextArea.js';
 
 export class EmployerProfileForm extends Component {
-  constructor({ elementClass, existingElement }) {
+  constructor({ userId, elementClass, existingElement }) {
     super({
       modelClass: EmployerProfileFormModel,
       viewClass: EmployerProfileFormView,
       controllerClass: EmployerProfileFormController,
+      modelParams: { userId },
       existingElement,
       viewParams: { elementClass },
     });

src/Components/FrameSeries/FrameSeriesView.js

@@ -30,7 +30,7 @@ export class FrameSeriesView extends ComponentView {
     });
     const frameChoiceHtml = frameChoice.render();
     if (Object.keys(this.#frames).length > 0) {
-      frameRender.setAttribute('hidden', '');
+      frameRender.classList.add('hidden');
     } else {
       this.#active = frameName;
       frameChoiceHtml.classList.add('frame-choice_active');
@@ -51,11 +51,11 @@ export class FrameSeriesView extends ComponentView {
   }
 
   selectFrame(frameName) {
-    this.#frames[this.#active].setAttribute('hidden', '');
+    this.#frames[this.#active].classList.toggle('hidden');
     const prevButton = this.#frameSelector.querySelector(`.frame-selector__${this.#active}`);
     prevButton.classList.remove('frame-choice_active');
     this.#active = frameName;
-    this.#frames[this.#active].removeAttribute('hidden');
+    this.#frames[this.#active].classList.toggle('hidden');
     const selectedButton = this.#frameSelector.querySelector(`.frame-selector__${frameName}`);
     selectedButton.classList.add('frame-choice_active');
   }

src/Components/Lists/ApplicantCvList/ApplicantCvList.js

@@ -0,0 +1,21 @@
+import { Component } from '../../../modules/Components/Component.js';
+import { ApplicantCvListModel } from './ApplicantCvListModel.js';
+import { ApplicantCvListController } from './ApplicantCvListController.js';
+import { ApplicantCvListView } from './ApplicantCvListView.js';
+import { ListMixin } from '../List/ListMixin.js';
+
+export class ApplicantCvList extends Component {
+  constructor({ userId, isListOwner, elementClass, existingElement }) {
+    super({
+      modelClass: ApplicantCvListModel,
+      controllerClass: ApplicantCvListController,
+      viewClass: ApplicantCvListView,
+      viewParams: { elementClass },
+      modelParams: { userId, isListOwner },
+      existingElement,
+    });
+    this._controller.loadList();
+  }
+}
+
+Object.assign(ApplicantCvList.prototype, ListMixin);

src/Components/Lists/ApplicantCvList/ApplicantCvListController.js

@@ -0,0 +1,3 @@
+import { ListController } from '../List/ListController.js';
+
+export const ApplicantCvListController = ListController;

src/Components/Lists/ApplicantCvList/ApplicantCvListModel.js

@@ -0,0 +1,33 @@
+import { ComponentModel } from '../../../modules/Components/Component.js';
+import { Api } from '../../../modules/Api/Api.js';
+import { Minicard } from '../../Minicard/Minicard.js';
+import { resolveUrl } from '../../../modules/UrlUtils/UrlUtils.js';
+
+export class ApplicantCvListModel extends ComponentModel {
+  #userId;
+  #isOwner;
+  constructor({ userId, isListOwner }) {
+    super();
+    this.#userId = userId;
+    this.#isOwner = isListOwner;
+  }
+
+  getItems() {
+    const cvsJson = Api.getApplicantCvs({ id: this.#userId });
+    const cvsObjects = cvsJson.reduce((cvsObjects, cvJsonItem) => {
+      const { id, positionRus } = cvJsonItem;
+      cvsObjects.push(
+        new Minicard({
+          renderParams: {
+            elementClass: 'applicant-cv-list__minicard',
+            title: positionRus,
+            isCardOwner: this.#isOwner,
+            editButtonUrl: resolveUrl(`/cv/edit/${id}`),
+          },
+        }),
+      );
+      return cvsObjects;
+    }, []);
+    return cvsObjects;
+  }
+}

src/Components/Lists/ApplicantCvList/ApplicantCvListView.js

@@ -0,0 +1,3 @@
+import { ListView } from '../List/ListView.js';
+
+export const ApplicantCvListView = ListView;

src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioList.js

@@ -0,0 +1,21 @@
+import { Component } from '../../../modules/Components/Component.js';
+import { ApplicantPortfolioListModel } from './ApplicantPortfolioListModel.js';
+import { ApplicantPortfolioListController } from './ApplicantPortfolioListController.js';
+import { ApplicantPortfolioListView } from './ApplicantPortfolioListView.js';
+import { ListMixin } from '../List/ListMixin.js';
+
+export class ApplicantPortfolioList extends Component {
+  constructor({ userId, isListOwner, elementClass, existingElement }) {
+    super({
+      modelClass: ApplicantPortfolioListModel,
+      controllerClass: ApplicantPortfolioListController,
+      viewClass: ApplicantPortfolioListView,
+      viewParams: { elementClass },
+      modelParams: { userId, isListOwner },
+      existingElement,
+    });
+    this._controller.loadList();
+  }
+}
+
+Object.assign(ApplicantPortfolioList.prototype, ListMixin);

src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListController.js

@@ -0,0 +1,3 @@
+import { ListController } from '../List/ListController.js';
+
+export const ApplicantPortfolioListController = ListController;

src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListModel.js

@@ -0,0 +1,33 @@
+import { ComponentModel } from '../../../modules/Components/Component.js';
+import { Api } from '../../../modules/Api/Api.js';
+import { Minicard } from '../../Minicard/Minicard.js';
+import { resolveUrl } from '../../../modules/UrlUtils/UrlUtils.js';
+
+export class ApplicantPortfolioListModel extends ComponentModel {
+  #userId;
+  #isOwner;
+  constructor({ userId, isListOwner }) {
+    super();
+    this.#userId = userId;
+    this.#isOwner = isListOwner;
+  }
+
+  getItems() {
+    const portfolioJson = Api.getApplicantPortfolios({ id: this.#userId });
+    const portfolioObjects = portfolioJson.reduce((portfolioObjects, portfolioJsonItem) => {
+      const { id, name } = portfolioJsonItem;
+      portfolioObjects.push(
+        new Minicard({
+          renderParams: {
+            elementClass: 'applicant-portfolio-list__minicard',
+            title: name,
+            isCardOwner: this.#isOwner,
+            editButtonUrl: resolveUrl(`/portfolio/edit/${id}`),
+          },
+        }),
+      );
+      return portfolioObjects;
+    }, []);
+    return portfolioObjects;
+  }
+}

src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListView.js

@@ -0,0 +1,3 @@
+import { ListView } from '../List/ListView.js';
+
+export const ApplicantPortfolioListView = ListView;

src/Components/Lists/EmployerVacancyList/EmployerVacancyList.js

@@ -0,0 +1,21 @@
+import { Component } from '../../../modules/Components/Component.js';
+import { EmployerVacancyListModel } from './EmployerVacancyListModel.js';
+import { EmployerVacancyListController } from './EmployerVacancyListController.js';
+import { EmployerVacancyListView } from './EmployerVacancyListView.js';
+import { ListMixin } from '../List/ListMixin.js';
+
+export class EmployerVacancyList extends Component {
+  constructor({ userId, isListOwner, elementClass, existingElement }) {
+    super({
+      modelClass: EmployerVacancyListModel,
+      controllerClass: EmployerVacancyListController,
+      viewClass: EmployerVacancyListView,
+      viewParams: { elementClass },
+      modelParams: { userId, isListOwner },
+      existingElement,
+    });
+    this._controller.loadList();
+  }
+}
+
+Object.assign(EmployerVacancyList.prototype, ListMixin);

src/Components/Lists/EmployerVacancyList/EmployerVacancyListController.js

@@ -0,0 +1,3 @@
+import { ListController } from '../List/ListController.js';
+
+export const EmployerVacancyListController = ListController;