From f88e92fd3c523ddba6760accc4609897859ac924 Mon Sep 17 00:00:00 2001 From: Max <133934232+Kleostro@users.noreply.github.com> Date: Mon, 29 Apr 2024 23:42:26 +0300 Subject: [PATCH] feat(RSS-ECOMM-2_27): add pages components (#109) * feat: add LoginPage component * feat: add MainPage component * refactor: rename the loginPageView field to view * feat: add RegistrationPage component * feat: add NotFoundPage component * fix: fix name MainPage component --- src/pages/LoginPage/model/LoginPageModel.ts | 17 ++++++++ src/pages/LoginPage/view/LoginPageView.ts | 41 +++++++++++++++++++ .../loginPageView.module.scss} | 0 src/pages/MainPage/model/MainPageModel.ts | 17 ++++++++ src/pages/MainPage/view/MainPageView.ts | 41 +++++++++++++++++++ .../mainPageView.module.scss} | 0 .../NotFoundPage/model/NotFoundPageModel.ts | 17 ++++++++ .../NotFoundPage/view/NotFoundPageView.ts | 41 +++++++++++++++++++ .../notFoundPageView.module.scss} | 0 .../model/RegistrationPageModel.ts | 17 ++++++++ .../view/RegistrationPageView.ts | 41 +++++++++++++++++++ .../registrationPageView.module.scss} | 0 src/shared/Button/model/ButtonModel.ts | 2 +- src/shared/Button/view/ButtonView.ts | 2 +- src/shared/types/interfaces.ts | 6 ++- 15 files changed, 238 insertions(+), 4 deletions(-) create mode 100644 src/pages/LoginPage/model/LoginPageModel.ts create mode 100644 src/pages/LoginPage/view/LoginPageView.ts rename src/pages/LoginPage/{.gitkeep => view/loginPageView.module.scss} (100%) create mode 100644 src/pages/MainPage/model/MainPageModel.ts create mode 100644 src/pages/MainPage/view/MainPageView.ts rename src/pages/MainPage/{.gitkeep => view/mainPageView.module.scss} (100%) create mode 100644 src/pages/NotFoundPage/model/NotFoundPageModel.ts create mode 100644 src/pages/NotFoundPage/view/NotFoundPageView.ts rename src/pages/NotFoundPage/{.gitkeep => view/notFoundPageView.module.scss} (100%) create mode 100644 src/pages/RegistrationPage/model/RegistrationPageModel.ts create mode 100644 src/pages/RegistrationPage/view/RegistrationPageView.ts rename src/pages/RegistrationPage/{.gitkeep => view/registrationPageView.module.scss} (100%) diff --git a/src/pages/LoginPage/model/LoginPageModel.ts b/src/pages/LoginPage/model/LoginPageModel.ts new file mode 100644 index 00000000..48e8ecb1 --- /dev/null +++ b/src/pages/LoginPage/model/LoginPageModel.ts @@ -0,0 +1,17 @@ +import type { PageInterface } from '@/shared/types/interfaces.ts'; + +import LoginPageView from '../view/LoginPageView.ts'; + +class LoginPageModel implements PageInterface { + private view: LoginPageView; + + constructor(parent: HTMLDivElement) { + this.view = new LoginPageView(parent); + } + + public getHTML(): HTMLDivElement { + return this.view.getHTML(); + } +} + +export default LoginPageModel; diff --git a/src/pages/LoginPage/view/LoginPageView.ts b/src/pages/LoginPage/view/LoginPageView.ts new file mode 100644 index 00000000..6f2e7b3d --- /dev/null +++ b/src/pages/LoginPage/view/LoginPageView.ts @@ -0,0 +1,41 @@ +import { TAG_NAMES } from '@/shared/constants/enums.ts'; +import createBaseElement from '@/shared/utils/createBaseElement.ts'; + +import LOGIN_PAGE_STYLES from './loginPageView.module.scss'; + +class LoginPageView { + private page: HTMLDivElement; + + private parent: HTMLDivElement; + + constructor(parent: HTMLDivElement) { + this.parent = parent; + this.page = this.createHTML(); + } + + private createHTML(): HTMLDivElement { + this.page = createBaseElement({ + cssClasses: [LOGIN_PAGE_STYLES.loginPage], + tag: TAG_NAMES.DIV, + }); + + this.parent.append(this.page); + + return this.page; + } + + public getHTML(): HTMLDivElement { + return this.page; + } + + public hide(): boolean { + this.page.classList.add(LOGIN_PAGE_STYLES.loginPage_hidden); + return true; + } + + public show(): boolean { + this.page.classList.remove(LOGIN_PAGE_STYLES.loginPage_hidden); + return true; + } +} +export default LoginPageView; diff --git a/src/pages/LoginPage/.gitkeep b/src/pages/LoginPage/view/loginPageView.module.scss similarity index 100% rename from src/pages/LoginPage/.gitkeep rename to src/pages/LoginPage/view/loginPageView.module.scss diff --git a/src/pages/MainPage/model/MainPageModel.ts b/src/pages/MainPage/model/MainPageModel.ts new file mode 100644 index 00000000..4ef5b5a6 --- /dev/null +++ b/src/pages/MainPage/model/MainPageModel.ts @@ -0,0 +1,17 @@ +import type { PageInterface } from '@/shared/types/interfaces.ts'; + +import MainPageView from '../view/MainPageView.ts'; + +class MainPageModel implements PageInterface { + private view: MainPageView; + + constructor(parent: HTMLDivElement) { + this.view = new MainPageView(parent); + } + + public getHTML(): HTMLDivElement { + return this.view.getHTML(); + } +} + +export default MainPageModel; diff --git a/src/pages/MainPage/view/MainPageView.ts b/src/pages/MainPage/view/MainPageView.ts new file mode 100644 index 00000000..c8082fd5 --- /dev/null +++ b/src/pages/MainPage/view/MainPageView.ts @@ -0,0 +1,41 @@ +import { TAG_NAMES } from '@/shared/constants/enums.ts'; +import createBaseElement from '@/shared/utils/createBaseElement.ts'; + +import MAIN_PAGE_STYLES from './mainPageView.module.scss'; + +class MainPageView { + private page: HTMLDivElement; + + private parent: HTMLDivElement; + + constructor(parent: HTMLDivElement) { + this.parent = parent; + this.page = this.createHTML(); + } + + private createHTML(): HTMLDivElement { + this.page = createBaseElement({ + cssClasses: [MAIN_PAGE_STYLES.mainPage], + tag: TAG_NAMES.DIV, + }); + + this.parent.append(this.page); + + return this.page; + } + + public getHTML(): HTMLDivElement { + return this.page; + } + + public hide(): boolean { + this.page.classList.add(MAIN_PAGE_STYLES.mainPage_hidden); + return true; + } + + public show(): boolean { + this.page.classList.remove(MAIN_PAGE_STYLES.mainPage_hidden); + return true; + } +} +export default MainPageView; diff --git a/src/pages/MainPage/.gitkeep b/src/pages/MainPage/view/mainPageView.module.scss similarity index 100% rename from src/pages/MainPage/.gitkeep rename to src/pages/MainPage/view/mainPageView.module.scss diff --git a/src/pages/NotFoundPage/model/NotFoundPageModel.ts b/src/pages/NotFoundPage/model/NotFoundPageModel.ts new file mode 100644 index 00000000..c689a352 --- /dev/null +++ b/src/pages/NotFoundPage/model/NotFoundPageModel.ts @@ -0,0 +1,17 @@ +import type { PageInterface } from '@/shared/types/interfaces.ts'; + +import NotFoundPageView from '../view/NotFoundPageView.ts'; + +class NotFoundPageModel implements PageInterface { + private view: NotFoundPageView; + + constructor(parent: HTMLDivElement) { + this.view = new NotFoundPageView(parent); + } + + public getHTML(): HTMLDivElement { + return this.view.getHTML(); + } +} + +export default NotFoundPageModel; diff --git a/src/pages/NotFoundPage/view/NotFoundPageView.ts b/src/pages/NotFoundPage/view/NotFoundPageView.ts new file mode 100644 index 00000000..5ab7cfd6 --- /dev/null +++ b/src/pages/NotFoundPage/view/NotFoundPageView.ts @@ -0,0 +1,41 @@ +import { TAG_NAMES } from '@/shared/constants/enums.ts'; +import createBaseElement from '@/shared/utils/createBaseElement.ts'; + +import NOT_FOUND_PAGE_STYLES from './notFoundPageView.module.scss'; + +class NotFoundPageView { + private page: HTMLDivElement; + + private parent: HTMLDivElement; + + constructor(parent: HTMLDivElement) { + this.parent = parent; + this.page = this.createHTML(); + } + + private createHTML(): HTMLDivElement { + this.page = createBaseElement({ + cssClasses: [NOT_FOUND_PAGE_STYLES.notFoundPage], + tag: TAG_NAMES.DIV, + }); + + this.parent.append(this.page); + + return this.page; + } + + public getHTML(): HTMLDivElement { + return this.page; + } + + public hide(): boolean { + this.page.classList.add(NOT_FOUND_PAGE_STYLES.notFoundPage_hidden); + return true; + } + + public show(): boolean { + this.page.classList.remove(NOT_FOUND_PAGE_STYLES.notFoundPage_hidden); + return true; + } +} +export default NotFoundPageView; diff --git a/src/pages/NotFoundPage/.gitkeep b/src/pages/NotFoundPage/view/notFoundPageView.module.scss similarity index 100% rename from src/pages/NotFoundPage/.gitkeep rename to src/pages/NotFoundPage/view/notFoundPageView.module.scss diff --git a/src/pages/RegistrationPage/model/RegistrationPageModel.ts b/src/pages/RegistrationPage/model/RegistrationPageModel.ts new file mode 100644 index 00000000..018d0c9e --- /dev/null +++ b/src/pages/RegistrationPage/model/RegistrationPageModel.ts @@ -0,0 +1,17 @@ +import type { PageInterface } from '@/shared/types/interfaces.ts'; + +import RegistrationPageView from '../view/RegistrationPageView.ts'; + +class LoginPageModel implements PageInterface { + private view: RegistrationPageView; + + constructor(parent: HTMLDivElement) { + this.view = new RegistrationPageView(parent); + } + + public getHTML(): HTMLDivElement { + return this.view.getHTML(); + } +} + +export default LoginPageModel; diff --git a/src/pages/RegistrationPage/view/RegistrationPageView.ts b/src/pages/RegistrationPage/view/RegistrationPageView.ts new file mode 100644 index 00000000..c615678a --- /dev/null +++ b/src/pages/RegistrationPage/view/RegistrationPageView.ts @@ -0,0 +1,41 @@ +import { TAG_NAMES } from '@/shared/constants/enums.ts'; +import createBaseElement from '@/shared/utils/createBaseElement.ts'; + +import REGISTRATION_PAGE_STYLES from './registrationPageView.module.scss'; + +class RegistrationPageView { + private page: HTMLDivElement; + + private parent: HTMLDivElement; + + constructor(parent: HTMLDivElement) { + this.parent = parent; + this.page = this.createHTML(); + } + + private createHTML(): HTMLDivElement { + this.page = createBaseElement({ + cssClasses: [REGISTRATION_PAGE_STYLES.registrationPage], + tag: TAG_NAMES.DIV, + }); + + this.parent.append(this.page); + + return this.page; + } + + public getHTML(): HTMLDivElement { + return this.page; + } + + public hide(): boolean { + this.page.classList.add(REGISTRATION_PAGE_STYLES.registrationPage_hidden); + return true; + } + + public show(): boolean { + this.page.classList.remove(REGISTRATION_PAGE_STYLES.registrationPage_hidden); + return true; + } +} +export default RegistrationPageView; diff --git a/src/pages/RegistrationPage/.gitkeep b/src/pages/RegistrationPage/view/registrationPageView.module.scss similarity index 100% rename from src/pages/RegistrationPage/.gitkeep rename to src/pages/RegistrationPage/view/registrationPageView.module.scss diff --git a/src/shared/Button/model/ButtonModel.ts b/src/shared/Button/model/ButtonModel.ts index af13c628..912bd7d6 100644 --- a/src/shared/Button/model/ButtonModel.ts +++ b/src/shared/Button/model/ButtonModel.ts @@ -1,4 +1,4 @@ -import type ButtonAttributesInterface from '@/shared/types/interfaces.ts'; +import type { ButtonAttributesInterface } from '@/shared/types/interfaces.ts'; import { IS_DISABLED } from '@/shared/constants/enums.ts'; diff --git a/src/shared/Button/view/ButtonView.ts b/src/shared/Button/view/ButtonView.ts index 4cb0407e..a52abfd8 100644 --- a/src/shared/Button/view/ButtonView.ts +++ b/src/shared/Button/view/ButtonView.ts @@ -1,4 +1,4 @@ -import type ButtonAttributesInterface from '@/shared/types/interfaces.ts'; +import type { ButtonAttributesInterface } from '@/shared/types/interfaces.ts'; import { TAG_NAMES } from '@/shared/constants/enums.ts'; import createBaseElement from '@/shared/utils/createBaseElement.ts'; diff --git a/src/shared/types/interfaces.ts b/src/shared/types/interfaces.ts index 3074be3d..d16dd8d5 100644 --- a/src/shared/types/interfaces.ts +++ b/src/shared/types/interfaces.ts @@ -1,10 +1,12 @@ import type ButtonActionType from './types.ts'; -interface ButtonAttributesInterface { +export interface ButtonAttributesInterface { action?: ButtonActionType; attrs?: Record; classes?: string[]; text?: string; } -export default ButtonAttributesInterface; +export interface PageInterface { + getHTML(): HTMLDivElement; +}