6 |
32 | `;
33 | };
34 |
35 | export default class ModalDeleteClient extends SmartView {
36 | constructor(client) {
37 | super();
38 | this._client = client;
39 | this._state = { isAdding: false, isDisabled: false };
40 | this._handler = {};
41 | }
42 |
43 | _clientDeleteClickHandler = (evt) => {
44 | evt.preventDefault();
45 |
46 | this._handler.clickDelete(this._client);
47 | };
48 |
49 | _clientCancelClickHandler = (evt) => {
50 | evt.preventDefault();
51 |
52 | this._handler.clickCancel(this._client);
53 | };
54 |
55 | getTemplate() {
56 | return modalDeleteTemplate(this._state);
57 | }
58 |
59 | restoreHandlers() {
60 | this.setDeleteClickHandler(this._handler.clickDelete);
61 | this.setCancelClickHandler(this._handler.clickCancel);
62 | }
63 |
64 | setDeleteClickHandler(handler) {
65 | this._handler.clickDelete = handler;
66 |
67 | this.getElement()
68 | .querySelector(`.js-button`)
69 | .addEventListener(`click`, this._clientDeleteClickHandler);
70 | }
71 |
72 | setCancelClickHandler(handler) {
73 | this._handler.clickCancel = handler;
74 |
75 | this.getElement()
76 | .querySelector(`.js-button-link`)
77 | .addEventListener(`click`, this._clientCancelClickHandler);
78 | }
79 |
80 | setViewState(state) {
81 | const resetFormState = () => {
82 | this.updateData({
83 | isAdding: false,
84 | });
85 | };
86 |
87 | switch (state) {
88 | case State.ADDING:
89 | this.updateData({
90 | isDisabled: false,
91 | isAdding: true,
92 | });
93 | break;
94 | case State.ABORTING:
95 | resetFormState();
96 | break;
97 | }
98 |
99 | this.updateElement();
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/client/scripts/views/modal-person-info.js:
--------------------------------------------------------------------------------
1 | import AbstractView from "./abstract-view.js";
2 | import Utils from "../utils/common.js";
3 | import { ContactURL, Contact, FieldTitle } from "../const.js";
4 |
5 | const getContactURL = (contact) => {
6 | switch (contact.type) {
7 | case Contact.email:
8 | return `mailto:${contact.value}`;
9 | case Contact.fb:
10 | return `${ContactURL.FB}${contact.value}`;
11 | case Contact.vk:
12 | return `${ContactURL.VK}${contact.value}`;
13 | case Contact.phone:
14 | return `tel:${contact.value}`;
15 | case Contact.additionalPhone:
16 | return `tel:${contact.value}`;
17 | default:
18 | return `#`;
19 | }
20 | };
21 |
22 | const modalPersonInfoTemplate = (client) => {
23 | const contactsGroup = client.contacts
24 | .map((contact) => {
25 | if (!contact.value) return ``;
26 |
27 | return `Клиенты
7 | 8 | 9 | `; 10 | }; 11 | 12 | export default class MainContainer extends AbstractView { 13 | constructor() { 14 | super(); 15 | } 16 | 17 | getTemplate() { 18 | return createMainContainerTemplate(); 19 | } 20 | 21 | getMainTableContainer() { 22 | return document.querySelector(`.table`); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /client/scripts/views/modal-delete-client.js: -------------------------------------------------------------------------------- 1 | import SmartView from "./smart.js"; 2 | import { State } from "../const.js"; 3 | 4 | const addDisabledProperty = (isDisabled) => { 5 | return isDisabled ? `disabled` : ``; 6 | }; 7 | 8 | const modalDeleteTemplate = ({ isAdding, isDisabled }) => { 9 | const editButtonText = isAdding 10 | ? `Удалить
`
11 | : `Удалить`;
12 | return `
13 |
14 |
31 | Удалить клиента
15 |Вы действительно хотите удалить данного клиента?
16 | 23 | 30 |
38 |
`;
52 | };
53 |
54 | export default class ModalPersonInfo extends AbstractView {
55 | constructor(client) {
56 | super();
57 | this._client = client;
58 | }
59 |
60 | getTemplate() {
61 | return modalPersonInfoTemplate(this._client);
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/client/scripts/views/modal-title.js:
--------------------------------------------------------------------------------
1 | import AbstractView from "./abstract-view.js";
2 |
3 | const getIdTemplate = (id) => {
4 | return `ID: ${id}`;
5 | };
6 |
7 | const modalTitleTemplate = (title, id) => {
8 | return `Фамилия: ${Utils.toUpperCaseFirstLetter( 39 | client.surname 40 | )}
41 |Имя: ${Utils.toUpperCaseFirstLetter( 42 | client.name 43 | )}
44 |Отчество: ${ 45 | client.lastname ? Utils.toUpperCaseFirstLetter(client.lastname) : "" 46 | }
47 |Контакты клиента
48 |-
49 | ${contactsGroup}
50 |
${title} ${ 9 | id ? getIdTemplate(id) : "" 10 | }
`; 11 | }; 12 | 13 | export default class ModalTitle extends AbstractView { 14 | constructor(title, id = null) { 15 | super(); 16 | 17 | this._title = title; 18 | this._id = id; 19 | } 20 | 21 | getTemplate() { 22 | return modalTitleTemplate(this._title, this._id); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /client/scripts/views/modal-view.js: -------------------------------------------------------------------------------- 1 | import AbstractView from "./abstract-view.js"; 2 | 3 | const createModalTemplate = () => `
5 |
6 |
7 |
8 |
6 |
63 | `;
64 | };
65 |
66 | export default class NoClients extends AbstractView {
67 | getTemplate() {
68 | return createNoClientsTemplate();
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/client/scripts/views/no-search-clients-view.js:
--------------------------------------------------------------------------------
1 | import AbstractView from "./abstract-view.js";
2 |
3 | const createNoSearchClientsTemplate = () => {
4 | return `
5 |
7 |
59 |
8 |
58 |
9 |
10 | ID
11 |
17 |
18 |
19 |
33 |
34 |
35 | Дата и время
создания 36 | 42 | 43 |
44 | создания 36 | 42 | 43 |
45 |
46 | Последние
изменения 47 | 53 | 54 |
55 | изменения 47 | 53 | 54 |
Контакты
56 | Действия
57 |
60 | There are no clients in our database
61 |
62 |
6 | There are no clients in our database
7 |
8 | `;
9 | };
10 |
11 | export default class NoSearchClients extends AbstractView {
12 | getTemplate() {
13 | return createNoSearchClientsTemplate();
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/client/scripts/views/pagination-view.js:
--------------------------------------------------------------------------------
1 | import AbstractView from "./abstract-view.js";
2 |
3 | export default class PaginationView extends AbstractView {
4 | constructor(currentPage = 0, pages = 0) {
5 | super();
6 | this._currentPage = currentPage;
7 | this._pages = pages;
8 | }
9 |
10 | getTemplate() {
11 | return `
12 |
`;
20 | }
21 |
22 | _clickHandler = (evt) => {
23 | if (evt.target.tagName !== `BUTTON`) {
24 | return;
25 | }
26 |
27 | evt.preventDefault();
28 |
29 | this._handler.click(evt.target.dataset.page, this._currentPage);
30 | }
31 |
32 | setPaginationChangeHandler(handler) {
33 | this._handler.click = handler;
34 | this.getElement().addEventListener(`click`, this._clickHandler);
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/client/scripts/views/search-profile-view.js:
--------------------------------------------------------------------------------
1 | import AbstractView from "./abstract-view.js";
2 | import Utils from "../utils/common.js";
3 | import { ContactImage, ContactURL, FieldTitle, Contact } from "../const.js";
4 |
5 | const getContactImage = (contact) => {
6 | switch (contact.type) {
7 | case Contact.email:
8 | return ContactImage.MAIL;
9 | case Contact.fb:
10 | return ContactImage.FB;
11 | case Contact.vk:
12 | return ContactImage.VK;
13 | case Contact.phone:
14 | return ContactImage.PHONE;
15 | case Contact.additionalPhone:
16 | return ContactImage.PHONE;
17 | default:
18 | return ContactImage.USER;
19 | }
20 | };
21 |
22 | const getContactURL = (contact) => {
23 | switch (contact.type) {
24 | case Contact.email:
25 | return `mailto:${contact.value}`;
26 | case Contact.fb:
27 | return `${ContactURL.FB}${contact.value}`;
28 | case Contact.vk:
29 | return `${ContactURL.VK}${contact.value}`;
30 | case Contact.phone:
31 | return `tel:${contact.value}`;
32 | case Contact.additionalPhone:
33 | return `tel:${contact.value}`;
34 | default:
35 | return `#`;
36 | }
37 | };
38 |
39 | const createContactItemTemplate = (contact) => {
40 | if (!contact.value) return;
41 |
42 | return `Страница ${this._currentPage} из ${this._pages}
13 | 16 | 19 |
62 |
`;
106 |
107 | export default class SearchProfile extends AbstractView {
108 | constructor(client) {
109 | super();
110 | this._client = client;
111 | }
112 |
113 | getTemplate() {
114 | return createProductItemTemplate(this._client);
115 | }
116 |
117 | _clickProfileHandler = (evt) => {
118 | if (!evt.target.classList.contains(`js-client-profile`)) {
119 | return;
120 | }
121 |
122 | evt.preventDefault();
123 | this._handler.clickProfile(this._client._id);
124 | };
125 |
126 | setProfileClientClickHandler(handler) {
127 | this._handler.clickProfile = handler;
128 |
129 | this.getElement().addEventListener(`click`, this._clickProfileHandler);
130 | }
131 |
132 | _clickEditHandler = (evt) => {
133 | if (!evt.target.classList.contains(`js-client-edit`)) {
134 | return;
135 | }
136 |
137 | evt.preventDefault();
138 | this._handler.clickEdit(this._client._id);
139 | };
140 |
141 | setEditClientClickHandler(handler) {
142 | this._handler.clickEdit = handler;
143 |
144 | this.getElement().addEventListener(`click`, this._clickEditHandler);
145 | }
146 |
147 | _clickDeleteHandler = (evt) => {
148 | if (!evt.target.classList.contains(`js-client-delete`)) {
149 | return;
150 | }
151 |
152 | evt.preventDefault();
153 | this._handler.clickDelete(this._client._id);
154 | };
155 |
156 | setDeleteClientClickHandler(handler) {
157 | this._handler.clickDelete = handler;
158 |
159 | this.getElement().addEventListener(`click`, this._clickDeleteHandler);
160 | }
161 | }
162 |
--------------------------------------------------------------------------------
/client/scripts/views/smart.js:
--------------------------------------------------------------------------------
1 | import AbstractView from "./abstract-view.js";
2 |
3 | export default class Smart extends AbstractView {
4 | constructor() {
5 | super();
6 |
7 | this._state = {};
8 | }
9 |
10 | restoreHandlers() {
11 | throw new Error(`Abstract method not implemented: restoreHandlers`);
12 | }
13 |
14 | updateData(update, justDataUpdating = false) {
15 | if (!update) {
16 | return;
17 | }
18 |
19 | this._state = Object.assign({}, this._data, update);
20 |
21 | if (!justDataUpdating) {
22 | this.updateElement();
23 | }
24 | }
25 |
26 | updateElement() {
27 | const oldElement = this.getElement();
28 | const parentElement = oldElement.parentElement;
29 | const scrollTop = oldElement.scrollTop;
30 |
31 | this.removeElement();
32 |
33 | const newElement = this.getElement();
34 |
35 | parentElement.replaceChild(newElement, oldElement);
36 |
37 | newElement.scrollTop = scrollTop;
38 | this.restoreHandlers();
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/client/scripts/views/table-body-view.js:
--------------------------------------------------------------------------------
1 | import AbstractView from "./abstract-view.js";
2 |
3 | const createTableBodyTemplate = () => {
4 | return `
5 |
6 | `;
7 | };
8 |
9 | export default class TableBody extends AbstractView {
10 | constructor() {
11 | super();
12 | }
13 |
14 | getTemplate() {
15 | return createTableBodyTemplate();
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/client/scripts/views/table-head-view.js:
--------------------------------------------------------------------------------
1 | import AbstractView from "./abstract-view.js";
2 | import { SortType } from "../const.js";
3 |
4 | const createSortingListTemplate = (currentSortType) => {
5 | return `
6 | ${client._id.slice(-6)}
63 |
72 |
73 |
81 |
105 | -
74 | ${client.contacts
75 | .map((contact) => {
76 | return createContactItemTemplate(contact);
77 | })
78 | .join("")}
79 |
7 |
107 | `;
108 | };
109 |
110 | export default class TableHead extends AbstractView {
111 | constructor(currentSortType) {
112 | super();
113 |
114 | this._currentItem = null;
115 | this._currentSortType = currentSortType;
116 | }
117 |
118 | _sortTypeChangeHandler = (evt) => {
119 | evt.preventDefault();
120 |
121 | const target = evt.target.closest(".js-sort");
122 |
123 | if (!target) return;
124 |
125 | const eventSortType = target.dataset.sortType;
126 | let newSortType = eventSortType;
127 |
128 | if (eventSortType === SortType.ID_UP) {
129 | newSortType = SortType.ID_DOWN;
130 | target.dataset.sortType = "id-down";
131 | } else if (eventSortType === SortType.ID_DOWN) {
132 | newSortType = SortType.ID_UP;
133 | target.dataset.sortType = "id-up";
134 | }
135 |
136 | if (eventSortType === SortType.NAME_UP) {
137 | newSortType = SortType.NAME_DOWN;
138 | target.dataset.sortType = "name-down";
139 | } else if (eventSortType === SortType.NAME_DOWN) {
140 | newSortType = SortType.NAME_UP;
141 | target.dataset.sortType = "name-up";
142 | }
143 |
144 | if (eventSortType === SortType.DATE_CREATE_UP) {
145 | newSortType = SortType.DATE_CREATE_DOWN;
146 | target.dataset.sortType = "date-create-down";
147 | } else if (eventSortType === SortType.DATE_CREATE_DOWN) {
148 | newSortType = SortType.DATE_CREATE_UP;
149 | target.dataset.sortType = "date-create-up";
150 | }
151 |
152 | if (eventSortType === SortType.DATE_UPDATE_UP) {
153 | newSortType = SortType.DATE_UPDATE_DOWN;
154 | target.dataset.sortType = "date-update-down";
155 | } else if (eventSortType === SortType.DATE_UPDATE_DOWN) {
156 | newSortType = SortType.DATE_UPDATE_UP;
157 | target.dataset.sortType = "date-update-up";
158 | }
159 |
160 | this._handler.sortTypeChange(newSortType);
161 | };
162 |
163 | getTemplate() {
164 | return createSortingListTemplate(this._currentSortType);
165 | }
166 |
167 | setSortTypeChangeHandler = (handler) => {
168 | this._handler.sortTypeChange = handler;
169 |
170 | this.getElement().addEventListener(`click`, this._sortTypeChangeHandler);
171 | };
172 | }
173 |
--------------------------------------------------------------------------------
/client/site.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "name": "",
3 | "short_name": "",
4 | "icons": [
5 | {
6 | "src": "/android-chrome-192x192.png",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | },
10 | {
11 | "src": "/android-chrome-512x512.png",
12 | "sizes": "512x512",
13 | "type": "image/png"
14 | }
15 | ],
16 | "theme_color": "#ffffff",
17 | "background_color": "#ffffff",
18 | "display": "standalone"
19 | }
20 |
--------------------------------------------------------------------------------
8 |
106 |
9 |
18 | ID
19 |
27 |
28 |
29 |
53 |
54 |
65 | Дата и время
создания 66 | 76 | 77 |
78 | создания 66 | 76 | 77 |
79 |
90 | Последние
изменения 91 | 101 | 102 |
103 | изменения 91 | 101 | 102 |
Контакты
104 | Действия
105 |