From fbe5be8bcb33fc18f98dd735afa2bc6488c352de Mon Sep 17 00:00:00 2001 From: Ilya Andriyanov Date: Tue, 17 Dec 2024 18:22:33 +0300 Subject: [PATCH] feature: vacancies page --- .../FormInputs/SelectInput/SelectInput.js | 17 --- .../SelectInput/SelectInputController.js | 13 -- .../SelectInput/SelectInputModel.js | 3 - .../FormInputs/SelectInput/SelectInputView.js | 35 ----- .../FormInputs/SelectInput/select-input.hbs | 5 - .../FormInputs/SelectInput/select-input.scss | 19 --- src/Components/SearchBar/SearchBar.js | 17 --- .../SearchBar/SearchBarController.js | 3 - src/Components/SearchBar/SearchBarModel.js | 3 - src/Components/SearchBar/SearchBarView.js | 75 ---------- src/Components/SearchBar/search-bar.hbs | 5 - .../SearchContainer/SearchContainer.js | 32 ----- .../SearchContainerController.js | 45 ------ .../SearchContainer/SearchContainerModel.js | 33 ----- .../SearchContainer/SearchContainerView.js | 33 ----- .../SearchContainer/search-container.hbs | 5 - src/Components/VacancyCard/VacancyCard.js | 14 -- src/Components/VacancyCard/VacancyCardView.js | 24 ---- src/Components/VacancyCard/vacancy-card.hbs | 17 --- .../action_creators/feed_action_creators.ts | 96 +++++++++++++ .../profile_action_creators.ts | 4 + .../components/alert_window/alert_window.scss | 5 +- .../components/alert_window/alert_window.tsx | 4 +- .../complex_search/complex_search.scss} | 9 +- .../complex_search/complex_search.tsx | 58 ++++++++ src/application/components/input/input.scss | 7 + src/application/components/input/input.tsx | 13 +- .../components/search_bar}/search_bar.scss | 6 +- .../components/search_bar/search_bar.tsx | 35 +++++ .../vacancy_card/vacancy_card.scss} | 63 --------- .../components/vacancy_card/vacancy_card.tsx | 51 +++++++ .../pages/vacancies_page/vacancies_page.scss | 80 +++++++++++ .../pages/vacancies_page/vacancies_page.tsx | 133 +++++++++++++++++- .../stores/feed_store/feed_store.ts | 78 ++++++---- src/config/vacancy_search.json | 6 +- src/modules/api/src/handlers/vacancy/feed.ts | 2 +- src/public/img/clear-icon.svg | 2 +- src/public/img/search-icon.svg | 2 +- src/scss/_button.scss | 9 ++ src/scss/_common.scss | 33 ----- src/scss/index.scss | 1 - 41 files changed, 548 insertions(+), 547 deletions(-) delete mode 100644 src/Components/FormInputs/SelectInput/SelectInput.js delete mode 100644 src/Components/FormInputs/SelectInput/SelectInputController.js delete mode 100644 src/Components/FormInputs/SelectInput/SelectInputModel.js delete mode 100644 src/Components/FormInputs/SelectInput/SelectInputView.js delete mode 100644 src/Components/FormInputs/SelectInput/select-input.hbs delete mode 100644 src/Components/FormInputs/SelectInput/select-input.scss delete mode 100644 src/Components/SearchBar/SearchBar.js delete mode 100644 src/Components/SearchBar/SearchBarController.js delete mode 100644 src/Components/SearchBar/SearchBarModel.js delete mode 100644 src/Components/SearchBar/SearchBarView.js delete mode 100644 src/Components/SearchBar/search-bar.hbs delete mode 100644 src/Components/SearchContainer/SearchContainer.js delete mode 100644 src/Components/SearchContainer/SearchContainerController.js delete mode 100644 src/Components/SearchContainer/SearchContainerModel.js delete mode 100644 src/Components/SearchContainer/SearchContainerView.js delete mode 100644 src/Components/SearchContainer/search-container.hbs delete mode 100644 src/Components/VacancyCard/VacancyCard.js delete mode 100644 src/Components/VacancyCard/VacancyCardView.js delete mode 100644 src/Components/VacancyCard/vacancy-card.hbs create mode 100644 src/application/action_creators/feed_action_creators.ts rename src/{Components/SearchContainer/search-container.scss => application/components/complex_search/complex_search.scss} (76%) create mode 100644 src/application/components/complex_search/complex_search.tsx rename src/{Components/SearchBar => application/components/search_bar}/search_bar.scss (74%) create mode 100644 src/application/components/search_bar/search_bar.tsx rename src/{scss/_vacancies.scss => application/components/vacancy_card/vacancy_card.scss} (52%) create mode 100644 src/application/components/vacancy_card/vacancy_card.tsx create mode 100644 src/application/pages/vacancies_page/vacancies_page.scss diff --git a/src/Components/FormInputs/SelectInput/SelectInput.js b/src/Components/FormInputs/SelectInput/SelectInput.js deleted file mode 100644 index b22dcbb..0000000 --- a/src/Components/FormInputs/SelectInput/SelectInput.js +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@/modules/Components/Component'; -import { SelectInputModel } from './SelectInputModel'; -import { SelectInputController } from './SelectInputController'; -import { SelectInputView } from './SelectInputView'; -import './select-input.scss'; -export class SelectInput extends Component { - constructor({ name, elementClass, caption, options }, existingElement) { - super({ - modelClass: SelectInputModel, - controllerClass: SelectInputController, - viewClass: SelectInputView, - viewParams: { name, elementClass, caption }, - existingElement, - }); - this._controller.loadOptions(options); - } -} diff --git a/src/Components/FormInputs/SelectInput/SelectInputController.js b/src/Components/FormInputs/SelectInput/SelectInputController.js deleted file mode 100644 index c2a5654..0000000 --- a/src/Components/FormInputs/SelectInput/SelectInputController.js +++ /dev/null @@ -1,13 +0,0 @@ -import { ComponentController } from '@/modules/Components/Component'; - -export class SelectInputController extends ComponentController { - constructor(model, view, component) { - super(model, view, component); - } - - loadOptions(options) { - options.forEach(({ value, caption }) => { - this._view.addOption({ value, caption }); - }); - } -} diff --git a/src/Components/FormInputs/SelectInput/SelectInputModel.js b/src/Components/FormInputs/SelectInput/SelectInputModel.js deleted file mode 100644 index 48f021e..0000000 --- a/src/Components/FormInputs/SelectInput/SelectInputModel.js +++ /dev/null @@ -1,3 +0,0 @@ -import { ComponentModel } from '@/modules/Components/Component'; - -export const SelectInputModel = ComponentModel; diff --git a/src/Components/FormInputs/SelectInput/SelectInputView.js b/src/Components/FormInputs/SelectInput/SelectInputView.js deleted file mode 100644 index 96455eb..0000000 --- a/src/Components/FormInputs/SelectInput/SelectInputView.js +++ /dev/null @@ -1,35 +0,0 @@ -import { ComponentView } from '@/modules/Components/Component'; -import SelectInputHbs from './select-input.hbs'; -import eventBus from '@/modules/Events/EventBus'; -import { SELECT_INPUT_CHANGE } from '@/modules/Events/Events'; -import { addEventListeners } from '@/modules/Events/EventUtils'; - -export class SelectInputView extends ComponentView { - #select; - constructor({ name, elementClass, caption }, existingElement) { - super({ - renderParams: { name, elementClass, caption }, - template: SelectInputHbs, - existingElement, - }); - this.#select = this._html.querySelector('.select-input__select'); - this._eventListeners.push({ - event: 'input', - object: this.#select, - listener: this.handleSelect, - }); - addEventListeners(this._eventListeners); - } - - handleSelect = (ev) => { - ev.preventDefault(); - eventBus.emit(SELECT_INPUT_CHANGE, { caller: this, value: this.#select.value }); - }; - - addOption({ value, caption }) { - const option = document.createElement('option'); - option.value = value; - option.innerText = caption; - this.#select.appendChild(option); - } -} diff --git a/src/Components/FormInputs/SelectInput/select-input.hbs b/src/Components/FormInputs/SelectInput/select-input.hbs deleted file mode 100644 index fbff7f7..0000000 --- a/src/Components/FormInputs/SelectInput/select-input.hbs +++ /dev/null @@ -1,5 +0,0 @@ -
- - -
diff --git a/src/Components/FormInputs/SelectInput/select-input.scss b/src/Components/FormInputs/SelectInput/select-input.scss deleted file mode 100644 index ac43dab..0000000 --- a/src/Components/FormInputs/SelectInput/select-input.scss +++ /dev/null @@ -1,19 +0,0 @@ -.select-input { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: baseline; - &__label { - font-size: var(--text-size-4); - } -} - -.select_main { - width: 50%; - border-radius: 4px; - padding: 8px; - border: none; - font-size: var(--text-size-3); - color: var(--color-background-1000); - background-color: var(--color-main-100); -} diff --git a/src/Components/SearchBar/SearchBar.js b/src/Components/SearchBar/SearchBar.js deleted file mode 100644 index 883ff98..0000000 --- a/src/Components/SearchBar/SearchBar.js +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@/modules/Components/Component'; -import { SearchBarModel } from './SearchBarModel'; -import { SearchBarController } from './SearchBarController'; -import { SearchBarView } from './SearchBarView'; -import './search_bar.scss'; - -export class SearchBar extends Component { - constructor({ elementClass = '', existingElement = undefined } = {}) { - super({ - modelClass: SearchBarModel, - controllerClass: SearchBarController, - viewClass: SearchBarView, - existingElement, - viewParams: { elementClass }, - }); - } -} diff --git a/src/Components/SearchBar/SearchBarController.js b/src/Components/SearchBar/SearchBarController.js deleted file mode 100644 index 94d1a20..0000000 --- a/src/Components/SearchBar/SearchBarController.js +++ /dev/null @@ -1,3 +0,0 @@ -import { ComponentController } from '@/modules/Components/Component'; - -export const SearchBarController = ComponentController; diff --git a/src/Components/SearchBar/SearchBarModel.js b/src/Components/SearchBar/SearchBarModel.js deleted file mode 100644 index 398925e..0000000 --- a/src/Components/SearchBar/SearchBarModel.js +++ /dev/null @@ -1,3 +0,0 @@ -import { ComponentModel } from '@/modules/Components/Component'; - -export const SearchBarModel = ComponentModel; diff --git a/src/Components/SearchBar/SearchBarView.js b/src/Components/SearchBar/SearchBarView.js deleted file mode 100644 index 1b0d359..0000000 --- a/src/Components/SearchBar/SearchBarView.js +++ /dev/null @@ -1,75 +0,0 @@ -import { ComponentView } from '@/modules/Components/Component'; -import SearchBarHbs from './search-bar.hbs'; -import { zip } from '@common_utils/object_utils/zip'; -import searchIconSvg from '@static/img/search-icon.svg'; -import clearIconSvg from '@static/img/clear-icon.svg'; -import { addEventListeners } from '@/modules/Events/EventUtils'; -import EventBus from '@/modules/Events/EventBus'; -import { SEARCH_INPUT_CHANGE } from '@/modules/Events/Events'; - -export class SearchBarView extends ComponentView { - #searchInput; - #clearButton; - #isInputEmpty; - constructor(renderParams, existingElement) { - super({ - renderParams: zip(renderParams, { - searchIcon: searchIconSvg, - clearIcon: clearIconSvg, - }), - existingElement, - template: SearchBarHbs, - }); - - this.#searchInput = this._html.querySelector('.search-bar__input'); - this.#clearButton = this._html.querySelector('.search-bar__clear-icon'); - this.#isInputEmpty = true; - - this._eventListeners.push( - { - event: 'submit', - object: this._html, - listener: this.#handleSubmit, - }, - { - event: 'click', - object: this.#clearButton, - listener: this.#handleClear, - }, - { - event: 'input', - object: this.#searchInput, - listener: this.#handleInput, - }, - ); - addEventListeners(this._eventListeners); - } - - clearSearch() { - this.#searchInput.value = ''; - this.#isInputEmpty = true; - } - - toggleClearButton() { - this.#clearButton.classList.toggle('hidden'); - } - - #handleSubmit = (ev) => { - ev.preventDefault(); - EventBus.emit(SEARCH_INPUT_CHANGE, { searchInput: this.#searchInput.value }); - }; - - #handleClear = () => { - this.clearSearch(); - this.toggleClearButton(); - EventBus.emit(SEARCH_INPUT_CHANGE, { searchInput: '' }); - }; - - #handleInput = () => { - if (!this.#isInputEmpty) { - return; - } - this.toggleClearButton(); - this.#isInputEmpty = false; - }; -} diff --git a/src/Components/SearchBar/search-bar.hbs b/src/Components/SearchBar/search-bar.hbs deleted file mode 100644 index afb7c81..0000000 --- a/src/Components/SearchBar/search-bar.hbs +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/src/Components/SearchContainer/SearchContainer.js b/src/Components/SearchContainer/SearchContainer.js deleted file mode 100644 index 2f2e414..0000000 --- a/src/Components/SearchContainer/SearchContainer.js +++ /dev/null @@ -1,32 +0,0 @@ -import { Component } from '@/modules/Components/Component'; -import { SearchContainerModel } from './SearchContainerModel'; -import { SearchContainerView } from './SearchContainerView'; -import { SearchContainerController } from './SearchContainerController'; -import { SearchBar } from '../SearchBar/SearchBar'; -import { SelectInput } from '../FormInputs/SelectInput/SelectInput'; -import './search-container.scss'; - -export class SearchContainer extends Component { - constructor({ elementClass, existingElement, searchByOptions, searchGroupOptions }) { - super({ - modelClass: SearchContainerModel, - viewClass: SearchContainerView, - controllerClass: SearchContainerController, - viewParams: { elementClass }, - existingElement, - }); - this._searchBar = new SearchBar({ elementClass: 'search-container__search-bar' }); - this._view.renderSearchBar(this._searchBar.render()); - this._children.push(this._searchBar); - if (searchByOptions) { - this._searchBy = new SelectInput(searchByOptions); - this._view.renderSearchBy(this._searchBy.render()); - this._children.push(this._searchBy); - } - if (searchGroupOptions) { - this._searchGroup = new SelectInput(searchGroupOptions); - this._view.renderSearchGroup(this._searchGroup.render()); - this._children.push(this._searchGroup); - } - } -} diff --git a/src/Components/SearchContainer/SearchContainerController.js b/src/Components/SearchContainer/SearchContainerController.js deleted file mode 100644 index 816622d..0000000 --- a/src/Components/SearchContainer/SearchContainerController.js +++ /dev/null @@ -1,45 +0,0 @@ -import { ComponentController } from '@/modules/Components/Component'; -import eventBus from '@/modules/Events/EventBus'; -import { - SEARCH_INPUT_CHANGE, - SELECT_INPUT_CHANGE, - SUBMIT_SEARCH_QUERY, -} from '@/modules/Events/Events'; - -export class SearchContainerController extends ComponentController { - constructor(model, view, component) { - super(model, view, component); - this.setHandlers([ - { - event: SELECT_INPUT_CHANGE, - handler: this.handleSelectInputChange.bind(this), - }, - { - event: SEARCH_INPUT_CHANGE, - handler: this.handleSearchInputChange.bind(this), - }, - ]); - } - - handleSelectInputChange({ caller, value }) { - switch (caller.render()) { - case this._view.searchBy: { - this._model.searchBy = value; - if (this._model.getFullQuery().searchQuery) { - eventBus.emit(SUBMIT_SEARCH_QUERY, { query: this._model.getFullQuery() }); - } - break; - } - case this._view.searchGroup: { - this._model.searchGroup = value; - eventBus.emit(SUBMIT_SEARCH_QUERY, { query: this._model.getFullQuery() }); - break; - } - } - } - - handleSearchInputChange({ searchInput }) { - this._model.searchQuery = searchInput; - eventBus.emit(SUBMIT_SEARCH_QUERY, { query: this._model.getFullQuery() }); - } -} diff --git a/src/Components/SearchContainer/SearchContainerModel.js b/src/Components/SearchContainer/SearchContainerModel.js deleted file mode 100644 index d8ee2db..0000000 --- a/src/Components/SearchContainer/SearchContainerModel.js +++ /dev/null @@ -1,33 +0,0 @@ -import { ComponentModel } from '@/modules/Components/Component'; - -export class SearchContainerModel extends ComponentModel { - #searchBy; - #searchGroup; - #searchQuery; - constructor() { - super(); - this.#searchBy = ''; - this.#searchGroup = ''; - this.#searchQuery = ''; - } - - set searchBy(value) { - this.#searchBy = value; - } - - set searchGroup(value) { - this.#searchGroup = value; - } - - set searchQuery(value) { - this.#searchQuery = value; - } - - getFullQuery() { - return { - searchQuery: this.#searchQuery, - searchBy: this.#searchBy, - searchGroup: this.#searchGroup, - }; - } -} diff --git a/src/Components/SearchContainer/SearchContainerView.js b/src/Components/SearchContainer/SearchContainerView.js deleted file mode 100644 index a86d01e..0000000 --- a/src/Components/SearchContainer/SearchContainerView.js +++ /dev/null @@ -1,33 +0,0 @@ -import { ComponentView } from '@/modules/Components/Component'; -import SearchContainerHbs from './search-container.hbs'; - -export class SearchContainerView extends ComponentView { - #searchInput; - constructor(renderParams, existingElement) { - super({ - renderParams, - existingElement, - template: SearchContainerHbs, - viewParams: renderParams, - }); - this.#searchInput = this._html.querySelector('.search-container__input-box'); - this.searchBy = undefined; - this.searchBar = undefined; - this.searchGroup = undefined; - } - - renderSearchBar(searchBarRender) { - this.#searchInput.appendChild(searchBarRender); - this.searchBar = searchBarRender; - } - - renderSearchBy(searchByRender) { - this.#searchInput.appendChild(searchByRender); - this.searchBy = searchByRender; - } - - renderSearchGroup(searchGroupRender) { - this.#searchInput.appendChild(searchGroupRender); - this.searchGroup = searchGroupRender; - } -} diff --git a/src/Components/SearchContainer/search-container.hbs b/src/Components/SearchContainer/search-container.hbs deleted file mode 100644 index 0b4238a..0000000 --- a/src/Components/SearchContainer/search-container.hbs +++ /dev/null @@ -1,5 +0,0 @@ -
-

Поиск

-
-
-
\ No newline at end of file diff --git a/src/Components/VacancyCard/VacancyCard.js b/src/Components/VacancyCard/VacancyCard.js deleted file mode 100644 index 892db32..0000000 --- a/src/Components/VacancyCard/VacancyCard.js +++ /dev/null @@ -1,14 +0,0 @@ -import { Component, ComponentController, ComponentModel } from '@/modules/Components/Component'; -import { VacancyCardView } from './VacancyCardView'; - -export class VacancyCard extends Component { - constructor({ vacancyObj, existingElement }) { - super({ - modelClass: ComponentModel, - controllerClass: ComponentController, - viewClass: VacancyCardView, - viewParams: vacancyObj, - existingElement, - }); - } -} diff --git a/src/Components/VacancyCard/VacancyCardView.js b/src/Components/VacancyCard/VacancyCardView.js deleted file mode 100644 index e368245..0000000 --- a/src/Components/VacancyCard/VacancyCardView.js +++ /dev/null @@ -1,24 +0,0 @@ -import { ComponentView } from '@/modules/Components/Component'; -import VacancyCardHbs from './vacancy-card.hbs'; - -export class VacancyCardView extends ComponentView { - constructor( - { avatar, id, position, companyName, location, salary, description, updatedAt }, - existingElement, - ) { - const renderParams = { avatar, id, position, companyName, location, salary, description }; - renderParams.updatedAt = updatedAt.toLocaleDateString('ru-RU', { - weekday: 'short', - day: 'numeric', - month: 'numeric', - year: 'numeric', - }); - renderParams.salary = renderParams.salary ? `${renderParams.salary} руб.` : 'Не указана'; - - super({ - renderParams, - template: VacancyCardHbs, - existingElement, - }); - } -} diff --git a/src/Components/VacancyCard/vacancy-card.hbs b/src/Components/VacancyCard/vacancy-card.hbs deleted file mode 100644 index a1a938f..0000000 --- a/src/Components/VacancyCard/vacancy-card.hbs +++ /dev/null @@ -1,17 +0,0 @@ -
-
- -
-

{{position}}

 -
{{companyName}}, {{location}}
-
Зарплата: {{salary}}
-
-
-
- {{description}} -
-
- Подробнее - последнее обновление {{updatedAt}} -
-
\ No newline at end of file diff --git a/src/application/action_creators/feed_action_creators.ts b/src/application/action_creators/feed_action_creators.ts new file mode 100644 index 0000000..09c1eb5 --- /dev/null +++ b/src/application/action_creators/feed_action_creators.ts @@ -0,0 +1,96 @@ +import { getVacanciesFeed } from '@/modules/api/api'; +import { backendStore } from '../stores/backend_store/backend_store'; +import { + FeedAction, + Loadable, + LoadFeedPayload, + LoadMoreAction, + LoadMoreActionPayload, +} from '../stores/feed_store/feed_actions'; +import { makeVacancyFromApi } from '../models/vacancy'; +import { storeManager } from '@/modules/store_manager/store_manager'; +import { assertIfError } from '@/modules/common_utils/asserts/asserts'; +import { feedStore } from '../stores/feed_store/feed_store'; + +export interface LoadFeedOptions { + whatToLoad: Loadable; + startFrom: number; + searchQuery: string; + searchBy: string; + searchCategory: string; + numToLoadAtOnce: number; +} + +async function loadFeed(options: LoadFeedOptions) { + const backendOrigin = backendStore.getData().backendOrigin; + switch (options.whatToLoad) { + case Loadable.Vacancies: { + try { + const rawVacancies = await getVacanciesFeed(backendOrigin, { + offset: options.startFrom, + num: options.numToLoadAtOnce, + searchQuery: options.searchQuery, + searchBy: options.searchBy, + group: options.searchCategory, + }); + const vacancies = rawVacancies.map((rawVacancy) => makeVacancyFromApi(rawVacancy)); + storeManager.dispatch({ + type: FeedAction.loadFeed, + payload: { + whatToLoad: options.whatToLoad, + startFrom: options.startFrom, + searchQuery: options.searchQuery, + searchBy: options.searchBy, + searchCategory: options.searchCategory, + numToLoadAtOnce: options.numToLoadAtOnce, + } as LoadFeedPayload, + }); + storeManager.dispatch({ + type: FeedAction.loadMore, + payload: { moreData: vacancies } as LoadMoreActionPayload, + }); + } catch (err) { + assertIfError(err); + console.log(err); + } + } + } +} + +async function loadMore(options: LoadFeedOptions) { + const backendOrigin = backendStore.getData().backendOrigin; + try { + switch (options.whatToLoad) { + case Loadable.Vacancies: { + const vacanciesData = feedStore.getData(); + const rawVacancies = await getVacanciesFeed(backendOrigin, { + offset: vacanciesData.loadedData.length, + num: vacanciesData.numToLoadAtOnce, + searchQuery: vacanciesData.searchQuery, + searchBy: vacanciesData.searchBy, + group: vacanciesData.searchCategory, + }); + const vacancies = rawVacancies.map((rawVacancy) => makeVacancyFromApi(rawVacancy)); + storeManager.dispatch({ + type: FeedAction.loadMore, + payload: { moreData: vacancies }, + } as LoadMoreAction); + } + } + } catch (err) { + assertIfError(err); + console.log(err); + } +} + +function clearFeed() { + storeManager.dispatch({ + type: FeedAction.clearFeed, + }); +} + +export const feedActionCreators = { + loadFeed, + loadMore, + clearFeed, +}; diff --git a/src/application/action_creators/profile_action_creators.ts b/src/application/action_creators/profile_action_creators.ts index 3e93367..a9aa364 100644 --- a/src/application/action_creators/profile_action_creators.ts +++ b/src/application/action_creators/profile_action_creators.ts @@ -150,6 +150,10 @@ async function updateProfile(userType: UserType, body: ProfileFormFields) { applicant.education = body.education; applicant.contacts = body.contacts; userActionCreators.updateProfile(applicant as Applicant); + storeManager.dispatch({ + type: ProfileActions.UpdateProfile, + payload: { userType, profileLoaded: true, userProfile: applicant } as UpdateProfilePayload, + }); } else { await updateEmployerProfile(backendOrigin, token, { id: userData.id, diff --git a/src/application/components/alert_window/alert_window.scss b/src/application/components/alert_window/alert_window.scss index 61844c4..07954a1 100644 --- a/src/application/components/alert_window/alert_window.scss +++ b/src/application/components/alert_window/alert_window.scss @@ -1,6 +1,7 @@ .alert-window { display: flex; flex-direction: column; + gap: 16px; &_theme-dark { background-color: var(--color-background-800); @@ -10,8 +11,4 @@ &__text { font-size: var(--text-size-3); } - - &__button { - margin-top: var(--col-margin); - } } diff --git a/src/application/components/alert_window/alert_window.tsx b/src/application/components/alert_window/alert_window.tsx index f0d89ee..9206517 100644 --- a/src/application/components/alert_window/alert_window.tsx +++ b/src/application/components/alert_window/alert_window.tsx @@ -9,8 +9,8 @@ export interface AlertWindowProps { buttonText: string; } export class AlertWindow extends Component { - constructor({ elementClass, text }: AlertWindowProps) { - super({ elementClass, text }); + constructor({ elementClass, text, href, buttonText }: AlertWindowProps) { + super({ elementClass, text, href, buttonText }); } render() { return ( diff --git a/src/Components/SearchContainer/search-container.scss b/src/application/components/complex_search/complex_search.scss similarity index 76% rename from src/Components/SearchContainer/search-container.scss rename to src/application/components/complex_search/complex_search.scss index 5389731..c1c7f52 100644 --- a/src/Components/SearchContainer/search-container.scss +++ b/src/application/components/complex_search/complex_search.scss @@ -1,4 +1,4 @@ -.search-container { +.complex-search { display: flex; flex-direction: column; align-items: stretch; @@ -10,21 +10,20 @@ } &__header { - margin: 0; + margin: 0px; font-size: var(--text-size-5); font-weight: var(--text-weight-regular); margin-bottom: 8px; } &__search-bar { - border-radius: 25px; + border-radius: var(--radius-s); height: 32px; - color: var(--color-background-1000); } &_theme-inside-ruler { background-color: var(--color-background-800); - border-radius: 14px; + border-radius: var(--radius-m); padding: 12px; } } diff --git a/src/application/components/complex_search/complex_search.tsx b/src/application/components/complex_search/complex_search.tsx new file mode 100644 index 0000000..bbe58c6 --- /dev/null +++ b/src/application/components/complex_search/complex_search.tsx @@ -0,0 +1,58 @@ +import { Component } from '@/modules/vdom/virtual_node'; +import * as vdom from '@/modules/vdom/virtual_dom'; +import { Input, Option } from '../input/input'; +import './complex_search.scss'; +import { SearchBar } from '../search_bar/search_bar'; + +export interface ComplexSearchProps { + elementClass?: string; + searchByOptions: Option[]; + searchCategoryOptions: Option[]; + searchQuery: string; + searchBy: string; + searchCategory: string; + onSubmit: (ev: Event) => void; +} + +export class ComplexSearch extends Component { + render() { + return ( +
+

Поиск

+
+ + + +
+
+ ); + } +} diff --git a/src/application/components/input/input.scss b/src/application/components/input/input.scss index da4fed6..cac6496 100644 --- a/src/application/components/input/input.scss +++ b/src/application/components/input/input.scss @@ -41,4 +41,11 @@ &__input_disabled { background-color: rgba(0, 0, 0, 0); } + + &_layout-horizontal { + display: flex; + flex-direction: row; + align-items: baseline; + justify-content: space-between; + } } diff --git a/src/application/components/input/input.tsx b/src/application/components/input/input.tsx index aa072d1..13f837a 100644 --- a/src/application/components/input/input.tsx +++ b/src/application/components/input/input.tsx @@ -15,11 +15,13 @@ export interface InputProps { name: string; type: string; value?: string; + layout: string; placeholder?: string; error?: string; isValid?: boolean; maxlength?: number; onFocusOut?: (ev: Event) => void; + onInput?: (ev: Event) => void; hasResizeVertical?: boolean; options?: Array