Главная » React & Redux » Создание SPA-приложения "Учёт сотрудников". Часть 2-я

Создание SPA-приложения "Учёт сотрудников". Часть 2-я


10.11.2021, 14:20
В файле app.js внутри компонента App создаём блок-обёртку, внутри которого позже будут размещаться два компонента: поиск и фильтры.
Для этого блока добавим класс .search-panel

Код

function App() {
     return(
         <div className="app">
             <AppInfo/>

             <div className="search-panel">
                  
             </div>
         </div>
     )
}

Папка search-panel

В файле search-panel.js создаём компонент SearchPanel, который будет возвращать инпут с классами от bootstrap, экспортируем компонент по умолчанию

Код

const SearchPanel = () => {
     return(
         <input  
             type="text"  
             className="form-control search-input"
             placeholder="Найти сотрудника"/>
     )
}

export default SearchPanel;

Создаём в папке файл search-panel.css

Код

.search-panel {
     margin-top: 30px;
     padding: 25px;
     background-color: #3d5a80;
     border-radius: 4px;
     box-shadow: 15px 15px 30px rgba(0,0,0, .15);
     color: #fff;
}

Импортируем его в файле search-panel.js

Код

import "./search-panel.css";

Импортируем компонент SearchPanel внутри главного файла app.js, после чего размещаем тег компонента SearchPanel внутри компонента App, а конкретно внутри блока с классом .search-panel

Код

import AppInfo from "../app-info/app-info";
import SearchPanel from "../search-panel/search-panel";
import "./app.css";

function App() {
     return(
         <div className="app">
             <AppInfo/>

             <div className="search-panel">
                 <SearchPanel/>
             </div>
         </div>
     )
}

export default App;


На странице сайта появилась поисковая строка

Папка app-filter

В папке app-filter создаём файл app-filter.css

Код

.btn-group {
     margin-top: 20px;
}

В файле app-filter.js импортируем этот файл:

Код

import "./app-filter.css";

создаём компонент AppFilter и экспортируем его по умолчанию

Код

const AppFilter = () => {
     return(
         <div className="btn-group">
             <button     
                 className="btn btn-light"
                 type="button">
                     Все сотрудники
             </button>
             <button     
                 className="btn btn-outline-light"
                 type="button">
                     На повышение
             </button>
             <button     
                 className="btn btn-outline-light"
                 type="button">
                     З/П больше
             </button>
         </div>
     )
}

export default AppFilter;

Данный компонент будет возвращать вёрстку из трёх кнопок, для которых уже назначены bootstrap-классы (в том числе и для блока-обёртки для этих кнопок).

Импортируем компонент AppFilter в главный файл app.js

Код

import AppInfo from "../app-info/app-info";
import SearchPanel from "../search-panel/search-panel";
import AppFilter from "../app-filter/app-filter";
import "./app.css";

После чего размещаем тег компонента AppFilter внутри компонента App

Код

function App() {
     return(
         <div className="app">
             <AppInfo/>

             <div className="search-panel">
                 <SearchPanel/>
                 <AppFilter/>
             </div>
         </div>
     )
}


Блок с кнопками фильтрации появился на странице

Папка employers-list-item

В папке создаём файл employers-list-item.css (стили для оформления элементов списка)



Код

.list-group-item {
     padding: 15px 20px;
     border-bottom: 1px solid #3d5a80;
}

.list-group-item:last-child {
     border-bottom: none;
}

.list-group-item span {
     line-height: 35px;
     font-size: 20px;
     cursor: pointer;
     min-width: 550px;
}

.list-group-item input {
     line-height: 35px;
     font-size: 20px;
     text-align: center;
     border: 0;
}

.list-group-item button {
     width: 35px;
     height: 35px;
     margin: 3px;
     font-size: 17px;
     border: none;
     cursor: pointer;
}

.list-group-item .btn-cookie {
     color: #e09f3e;
}

.list-group-item .btn-trash {
     color: #e5383b;
}

.list-group-item .fa-star {
     width: 35px;
     height: 35px;
     text-align: center;
     line-height: 35px;
     font-size: 16px;
     color: #FFD700;
     transition: 0.3s all;
     transform: translateX(30px);
     opacity: 0;
}

.list-group-item.like .fa-star {
     opacity: 1;
     transform: translateX(0px);
}

.list-group-item.increase .list-group-item-label, .list-group-item.increase .list-group-item-input {
     color: #e09f3e;
}
    
.list-group-item.increase .btn-star {
     color: #aeaeae;
}


Импортируем их в файле employers-list-item.js

Код

import './employers-list-item.css';

Здесь же, создаём компонент EmployersListItem и экспортируем его по умолчанию:

Код

const EmployersListItem = () => {

     return(
         <li className="list-group-item d-flex justify-content-between">
             <span className="list-group-item-label">John Smith</span>
             <input type="text" className="list-group-item-input" defaultValue="1000$"/>
             <div className='d-flex justify-content-center align-items-center'>
                 <button type="button"
                     className="btn-cookie btn-sm ">
                     <i className="fas fa-cookie"></i>
                 </button>

                 <button type="button"
                         className="btn-trash btn-sm ">
                     <i className="fas fa-trash"></i>
                 </button>
                 <i className="fas fa-star"></i>
             </div>
         </li>     
     )
}

export default EmployersListItem;

Атрибут defaultValue будет по умолчанию показывать то, что записано в качестве его значения

Папка employers-list

В папке создаём файл employers-list.css

Код

.app-list {
     margin-top: 30px;
     background-color: #3d5a80;
     border-radius: 4px;
     box-shadow: 15px 15px 30px rgba(0,0,0, .15);
     color: #fff;
}

и импортируем его в файле employers-list.js

Код

import './employers-list.css';

Здесь же, создаём компонент EmployersList

Код

const EmployersList = () => {
     return(
         <ul className="app-list list-group">
              
         </ul>    
     )
}

Данный компонент будет возвращать список, имеющий два присвоенных ему класса. Внутри же этого компонента, точнее, внутри этого списка, будем размещать компонент EmployersListItem.

Для этого в файле employers-list.js импортируем компонент EmployersListItem

Код

import './employers-list.css';
import EmployersListItem from '../employers-list-item/employers-list-item';

const EmployersList = () => {
     return(
         <ul className="app-list list-group">

         </ul>    
     )
}

Теперь компоненты EmployersListItem можно использовать внутри списка:

Код

const EmployersList = () => {
     return(
         <ul className="app-list list-group">
             <EmployersListItem/>
             <EmployersListItem/>
             <EmployersListItem/>
         </ul>    
     )
}

Экспортируем по умолчанию компонент EmployersList

Код

export default EmployersList;

Теперь в файле app.js импортируем компонент EmployersList

Код

import EmployersList from "../employers-list/employers-list";

Теперь его можно использовать внутри компонента App:

Код

function App() {
     return(
         <div className="app">
             <AppInfo/>

             <div className="search-panel">
                 <SearchPanel/>
                 <AppFilter/>
             </div>

             <EmployersList/>
         </div>
     )
}


Список сотрудников появился на странице

Папка employers-add-form

В папке создаём одноимённый файл для стилей, employers-add-form.css

Код

.app-add-form {
     margin-top: 30px;
     padding: 25px;
     background-color: #3d5a80;
     border-radius: 4px;
     box-shadow: 15px 15px 30px rgba(0,0,0, .15);
     color: #fff;
}

.add-form {
     margin-top: 20px;
}

.add-form input {
     width: 350px;
     margin-right: 20px;
}

импортируем его в файле employers-add-form.js

Код

import './employers-add-form.css';

здесь же, создаём новый компонент EmployersAddForm и экспортируем его по умолчанию

Код

import './employers-add-form.css';

const EmployersAddForm = () => {
     return(
         <div className="app-add-form">
             <h3>Добавьте нового сотрудника</h3>
             <form
                 className="add-form d-flex">
                 <input type="text"
                     className="form-control new-post-label"
                     placeholder="Как его зовут?" />
                 <input type="number"
                     className="form-control new-post-label"
                     placeholder="З/П в $?" />

                 <button type="submit"
                         className="btn btn-outline-light">Добавить</button>
             </form>
         </div>
     )
}

export default EmployersAddForm;

Импортируем этот компонент в файле app.js

Код

import EmployersAddForm from "../employers-add-form/employers-add-form";

Теперь помещаем тег данного компонента внутри компонента App:

Код

function App() {
     return(
         <div className="app">
             <AppInfo/>

             <div className="search-panel">
                 <SearchPanel/>
                 <AppFilter/>
             </div>

             <EmployersList/>
             <EmployersAddForm/>
         </div>
     )
}


Форма для добавления нового сотрудника появилась на сайте

КОММЕНТАРИИ (0)

ТЕГИ МАТЕРИАЛА
React-приложение
РЕЙТИНГ МАТЕРИАЛА (0.0 / 0)