[PRAC/cont] Add styles for modal window "add-btn"

Realiz partial stylization modal window/its positioning, accord temp.

Worth noting:
  - a small correction/replacements in css files.

core: B-3 / JS-BL

Author: matowdev

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/crm-search.css

@@ -19,18 +19,36 @@
   margin-right: 55px;
 }
 
-.crm__search-form-input-wrap {
+.crm__search-form-wrap {
   padding-top: 4px;
   width: 100%;
   max-width: 580px;
 }
 
+.crm__search-form,
+.crm__search-form input,
+.crm__search-form input[type="text"] {
+  font-family: var(--open-sans), sans-serif;
+  font-size: var(--default-fs);
+}
+
+.crm__search-form,
+.crm__search-form input::placeholder {
+  color: var(--text-gray);
+}
+
 .crm__search-input {
   border-radius: 0;
   min-height: 44px;
   caret-color: var(--main-purple);
 }
 
+.crm__search-input:focus {
+  border-color: var(--main-purple);
+  outline: none;
+  box-shadow: 0 0 0 .25rem rgba(152, 115, 255, .25);
+}
+
 /* media queries, any-hover */
 
 @media (max-width: 992px) {
@@ -64,11 +82,11 @@
     cursor: pointer;
   }
 
-  .crm__search-form-input-wrap {
+  .crm__search-form-wrap {
     display: none;
   }
 
-  .show-search-input .crm__search-form-input-wrap {
+  .show-search-input .crm__search-form-wrap {
     display: block;
   }
 }

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/crm.css

@@ -3,21 +3,3 @@
   margin-left: 20px;
   padding-top: 10px;
 }
-
-.crm__search-form,
-.crm__search-form input,
-.crm__search-form input[type="text"] {
-  font-family: var(--open-sans), sans-serif;
-  font-size: var(--default-fs);
-}
-
-.crm__search-form,
-.crm__search-form input::placeholder {
-  color: var(--text-gray);
-}
-
-.form-control:focus {
-  border-color: var(--main-purple);
-  outline: none;
-  box-shadow: 0 0 0 .25rem rgba(152, 115, 255, .25);
-}

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/modal-add.css

@@ -0,0 +1,57 @@
+.modal__add-dialog {
+  position: relative;
+  top: 220px;
+}
+
+.modal__add-content-wrap {
+  border: none;
+  border-radius: 0;
+  padding: 25px 30px;
+  max-width: 450px;
+  outline: none;
+}
+
+.modal__add-header,
+.modal__add-body,
+.modal__add-footer {
+  padding: 0;
+}
+
+.modal__add-header,
+.modal__add-footer {
+  border: none;
+}
+
+.modal__add-header {
+  margin-bottom: 32px;
+}
+
+.modal__add-header-title {
+  font-weight: var(--bold);
+  font-size: 18px;
+  color: var(--black);
+}
+
+.modal__add-header .modal__add-header-x-btn {
+  position: relative;
+  top: -12px;
+  right: -7px;
+  padding: 5px;
+}
+
+.modal__add-header .modal__add-header-x-btn:focus {
+  box-shadow: 0 0 0 0.25rem var(--bootstrap-red);
+  opacity: 0.5;
+}
+
+.modal__add-body-form {
+  display: flex;
+  flex-direction: column;
+  row-gap: 30px;
+}
+
+.modal__add-body-input {
+  border: none;
+  border-bottom: 1px solid var(--gray);
+  border-radius: 0;
+}

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/style.css

@@ -5,4 +5,5 @@
 @import url("crm-search.css");
 @import url("crm-output.css");
 @import url("crm-add.css");
+@import url("modal-add.css");
 @import url("custom-tippy.css");

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/variables.css

@@ -17,6 +17,7 @@
   /* colors */
   --black: #333;
   --white: #fff;
+  --bootstrap-red: #dc3545;
   --main-purple: #9873FF;
   --light-purple: #B89EFF;
   --dark-purple: #8052FF;

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/js/index.js

@@ -1,6 +1,5 @@
 (() => {
   // ** получение существующих, создание "новых" элементов (глобальное объявление)
-  const page = document.getElementById('page');
   const crm = document.getElementById('crm');
   const crmSearch = document.getElementById('crm-search');
   const crmOutput = document.getElementById('crm-output');
@@ -13,7 +12,7 @@
   const searchLogoWrap = document.createElement('div');
   const searchLogo = document.createElement('a');
   const searchLogoImg = document.createElement('img');
-  const searchFormInputWrap = document.createElement('div');
+  const searchFormWrap = document.createElement('div');
   const searchForm = document.createElement('form');
   const searchInputWrap = document.createElement('div');
   const searchInput = document.createElement('input');
@@ -22,7 +21,7 @@
   searchLogoWrap.classList.add('crm__search-logo-wrap');
   searchLogo.classList.add('crm__search-logo');
   searchLogoImg.classList.add('crm__search-logo-img');
-  searchFormInputWrap.classList.add('crm__search-form-input-wrap');
+  searchFormWrap.classList.add('crm__search-form-wrap');
   searchForm.classList.add('crm__search-form', 'needs-validation');
   searchInputWrap.classList.add('crm__search-input-wrap');
   searchInput.classList.add('crm__search-input', 'form-control');
@@ -52,8 +51,8 @@
   searchLogoWrap.append(searchLogo);
   searchInputWrap.append(searchInput, searchInputFeedback);
   searchForm.append(searchInputWrap);
-  searchFormInputWrap.append(searchForm);
-  crmSearchContainer.append(searchLogoWrap, searchFormInputWrap);
+  searchFormWrap.append(searchForm);
+  crmSearchContainer.append(searchLogoWrap, searchFormWrap);
 
   // организация таблицы данных о клиентах (структура, заголовки колонок, иконки)
   const outputTitleWrap = document.createElement('div');
@@ -239,10 +238,13 @@
   const addModalBodyForm = document.createElement('form');
   const addModalBodySurnameInputWrap = document.createElement('div');
   const addModalBodySurnameInput = document.createElement('input');
+  const addModalBodySurnameFeedback = document.createElement('div');
   const addModalBodyNameInputWrap = document.createElement('div');
   const addModalBodyNameInput = document.createElement('input');
+  const addModalBodyNameFeedback = document.createElement('div');
   const addModalBodyPatronymicInputWrap = document.createElement('div');
   const addModalBodyPatronymicInput = document.createElement('input');
+  const addModalBodyPatronymicFeedback = document.createElement('div');
   const addModalFooter = document.createElement('div');
   const addModalFooterAddBtnWrap = document.createElement('div');
   const addModalFooterAddBtn = document.createElement('button');
@@ -256,17 +258,13 @@
   addBtnGrayIcon.classList.add('crm__add-btn-icon', 'gray-add-icon');
   addBtnText.classList.add('crm__add-btn-text');
   addModalWrap.classList.add('modal', 'crm__add-btn-modal', 'fade');
-  addModalDialog.classList.add(
-    'modal__add-dialog',
-    'modal-dialog',
-    'modal-dialog-centered'
-  );
+  addModalDialog.classList.add('modal__add-dialog', 'modal-dialog');
   addModalContent.classList.add('modal__add-content-wrap', 'modal-content');
   addModalHeader.classList.add('modal__add-header', 'modal-header');
   addModalHeaderTitle.classList.add('modal__add-header-title', 'modal-title');
   addModalHeaderXBtn.classList.add('modal__add-header-x-btn', 'btn-close');
   addModalBody.classList.add('modal__add-body', 'modal-body');
-  addModalBodyForm.classList.add('modal__add-body-form');
+  addModalBodyForm.classList.add('modal__add-body-form', 'needs-validation');
   addModalBodySurnameInputWrap.classList.add(
     'modal__add-body-input-wrap',
     'add-surname-input-wrap'
@@ -276,6 +274,11 @@
     'add-surname-input',
     'form-control'
   );
+  addModalBodySurnameFeedback.classList.add(
+    'modal__add-body-input-feedback',
+    'surname-input-feedback',
+    'invalid-feedback'
+  );
   addModalBodyNameInputWrap.classList.add(
     'modal__add-body-input-wrap',
     'add-name-input-wrap'
@@ -285,6 +288,11 @@
     'add-name-input',
     'form-control'
   );
+  addModalBodyNameFeedback.classList.add(
+    'modal__add-body-input-feedback',
+    'name-input-feedback',
+    'invalid-feedback'
+  );
   addModalBodyPatronymicInputWrap.classList.add(
     'modal__add-body-input-wrap',
     'add-patronymic-input-wrap'
@@ -294,6 +302,11 @@
     'add-patronymic-input',
     'form-control'
   );
+  addModalBodyPatronymicFeedback.classList.add(
+    'modal__add-body-input-feedback',
+    'patronymic-input-feedback',
+    'invalid-feedback'
+  );
   addModalFooter.classList.add('modal__add-footer', 'modal-footer');
   addModalFooterAddBtnWrap.classList.add('modal__add-footer-add-btn-wrap');
   addModalFooterAddBtn.classList.add('modal__add-footer-add-btn');
@@ -338,16 +351,31 @@
 
   addBtnText.textContent = 'Добавить клиента';
   addModalHeaderTitle.textContent = 'Новый клиент';
+  addModalBodySurnameFeedback.textContent =
+    'Введены не корректные данные.. исключите: английские буквы, цифры!';
+  addModalBodyNameFeedback.textContent =
+    'Введены не корректные данные.. исключите: английские буквы, цифры!';
+  addModalBodyPatronymicFeedback.textContent =
+    'Введены не корректные данные.. исключите: английские буквы, цифры!';
   addModalFooterAddBtn.textContent = 'Добавить контакт';
   addModalFooterSaveBtn.textContent = 'Сохранить';
   addModalFooterCancelBtn.textContent = 'Отмена';
 
   addBtn.append(addBtnDefaultIcon, addBtnWhiteIcon, addBtnGrayIcon, addBtnText);
   addBtnWrap.append(addBtn);
   addModalHeader.append(addModalHeaderTitle, addModalHeaderXBtn);
-  addModalBodySurnameInputWrap.append(addModalBodySurnameInput);
-  addModalBodyNameInputWrap.append(addModalBodyNameInput);
-  addModalBodyPatronymicInputWrap.append(addModalBodyPatronymicInput);
+  addModalBodySurnameInputWrap.append(
+    addModalBodySurnameInput,
+    addModalBodySurnameFeedback
+  );
+  addModalBodyNameInputWrap.append(
+    addModalBodyNameInput,
+    addModalBodyNameFeedback
+  );
+  addModalBodyPatronymicInputWrap.append(
+    addModalBodyPatronymicInput,
+    addModalBodyPatronymicFeedback
+  );
   addModalBodyForm.append(
     addModalBodySurnameInputWrap,
     addModalBodyNameInputWrap,
@@ -411,10 +439,10 @@
     });
   }
 
-  const searchFormInput = document.querySelector('.crm__search-form input'); // получение search-инпута
-  searchFormInputValidation(searchFormInput);
+  const searchFormMainInput = document.querySelector('.crm__search-form input'); // получение search-инпута
+  searchFormInputValidation(searchFormMainInput);
 
-  // изменение направления стрелки/svg-icon, согласно прожатия по заглавной ячейке (при сортировке данных)
+  // ** изменение направления стрелки/svg-icon, согласно прожатия по заглавной ячейке (при сортировке данных)
   const allHeaderRowCells = document.querySelectorAll(
     '.crm__o-table-head-cell'
   );
@@ -448,4 +476,45 @@
       }
     });
   });
+
+  // ** организация валидации для ввода данных/в модальном окне (при добавлении нового/клиента)
+  function addModalFormInputValidation(inputs) {
+    inputs.forEach((input) =>
+      input.addEventListener('input', (event) => {
+        const target = event.target;
+        const targetParentNode = target.parentNode;
+        const invalidFeed = targetParentNode.querySelector('.invalid-feedback');
+
+        // принудительное исключение пробелов (в начале поля для ввода)
+        target.value = target.value.replace(/^\s+/, '');
+
+        // только русские буквы (без цифр/символов), "один" дефис (для двойных фамилий) и без необоснованных пробелов
+        if (
+          /[^а-яА-ЯёЁ\s-]/.test(target.value) ||
+          (target.value.match(/-/g) || []).length > 1 ||
+          /\s{2,}/.test(target.value)
+        ) {
+          target.classList.add('is-invalid');
+
+          if (/[^а-яА-ЯёЁ\s-]/.test(target.value)) {
+            invalidFeed.textContent =
+              'Некорректный ввод! Измените раскладку клавиатуры и/или исключите цифры/знаки!';
+          } else if ((target.value.match(/-/g) || []).length > 1) {
+            invalidFeed.textContent = 'Некорректный ввод! Только ОДИН дефис!';
+          } else {
+            invalidFeed.textContent =
+              'Некорректный ввод! Только ОДИН пробел между словами!';
+          }
+        } else {
+          target.classList.remove('is-invalid');
+          invalidFeed.textContent = ''; // очистка сообщения об ошибке
+        }
+      })
+    );
+  }
+
+  const allAddModalFormInputs = document.querySelectorAll(
+    '.modal__add-body-input'
+  ); // получение всех модальных-инпутов
+  addModalFormInputValidation(allAddModalFormInputs);
 })();