git clone https://github.com/AlekseidDEV/Contact-Management.git
cd Contact-Management
npm i
npm run serve
- Vue Router
- Pinia
- Tailwinds
- Axios
project-root/
├── src/
│ ├── components/
│ │ ├── ui/
│ │ │ ├── ContactForm.vue
│ │ │ ├── SearchBar.vue
│ │ │ └── ...
│ │ ├── ContactItem.vue
│ │ ├── ContactList.vue
│ │ └── ...
│ ├── views/
│ │ ├── HomeView.vue
│ │ ├── ItemDetail.vue
│ │ └── ...
├── README.md
└── ...
Комментарий: привык работать с такой структурой. Компоненты из папки Views самые верхние по уровню, строятся на основе компонентов из папки components, а сами строительные блоки строяться из более мелких и не очень компонентов из папки ui.
Примечание: дабы в компонентах верхнего уровня как таковой логики не было, я поместил туда запрос фейковых данных , что бы не засорять основную логику строительных компонентов. Использовал библиотеку Axios. Использую ее во всех проектах, поэтому решил воспользоваться и здесь.
Работа с хранилищем Pinia: внутри хранилища есть все методы, для манипуляции контактами в списке: Удаление, редактирование, добавление, Сортировка. Так же есть методы которые записывают данные в LocaStorage и получают их оттуда записывая в state. Два раздельных геттера для получения обычных данных и фильтрованных.
ComponentList: - по большей части компонент работает с флагами, для переключения режимов или отображения разных кусков верстки. Значения флагов, индексы отправляются уже в хранилище при вызове действий, а геттеры уже возвращают информацию на рендер.
ContactForm: принимает пропс. Если флаг редактирования активен, контакт редактируется, если нет, то происходит обычное добавление. Проверка полей. Регуляркой проверяются поля email и phone. Есть emit для закрытие модалки по крестику.
SearchBar: связываю переменную с инпутом, и вызываю действие из хранилища для фильтрации по имени. Внимание! - поле ввода реагирует на событие keyup.enter (Можно реализовать на событие input), но я выбрал первый вариант. Когда поиск активируется, и флаг принимает статут true, в список загружаются уже "фильтрованные данные"
ContactItem: получаю данные из параметров route, получаю нужный контакт из store. Так же добавил возможным редактировать и удалить контакт.
TypeScript: все объявления interface были вынесены в специальную попку models.
Jest: написал два простых теста, первый на отрисовку компонента, второй на проверку начальных данных при рендере странницы
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent