2024-10-05 06:58:11 +03:00
|
|
|
|
<p align="center">
|
|
|
|
|
|
<img alt="RiskStrategyTask" src="https://raw.githubusercontent.com/Dvurechensky/RiskStrategyTask/main/Info/logo.png" height="140" />
|
|
|
|
|
|
<p align="center">
|
|
|
|
|
|
<a href="https://sites.google.com/view/dvurechensky" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Dvurechensky-N-blue"></a>
|
|
|
|
|
|
<img src="https://img.shields.io/badge/Csharp-Asp Net Core-blue?logo=csharp&logoColor=FFFF00">
|
|
|
|
|
|
<img src="https://img.shields.io/badge/TypeScript-gray?logo=typescript&logoColor=FF4500">
|
|
|
|
|
|
<img src="https://img.shields.io/badge/HTML5-gray?logo=htmlacademy&logoColor=00BFFF">
|
|
|
|
|
|
<img src="https://img.shields.io/badge/CSS3-gray?logo=css3&logoColor=00FF7F">
|
|
|
|
|
|
<img src="https://img.shields.io/badge/JavaScript-gray?logo=javascript&logoColor=8B008B">
|
|
|
|
|
|
<img src="https://img.shields.io/badge/Grunt-gray?logo=grunt&logoColor=F4A460">
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</p>
|
2024-10-05 06:56:33 +03:00
|
|
|
|
|
2024-10-05 06:58:11 +03:00
|
|
|
|
# <g-emoji class="g-emoji" alias="crystal_ball" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f52e.png">🔮</g-emoji> Тестовое задание компании Стратегия Рийска (Владикавказ)
|
|
|
|
|
|
**🎯SCAM вакансия**
|
|
|
|
|
|
|
|
|
|
|
|
> https://hh.ru/vacancy/83142848?from=share_ios
|
|
|
|
|
|
|
|
|
|
|
|
- 🚀 Требования системы для запуска:
|
|
|
|
|
|
1. Visual Studio 2022
|
|
|
|
|
|
|
|
|
|
|
|
- 🚀 Требования системы для разработки:
|
|
|
|
|
|
> для функционирования встроенного Grunt в проекте
|
|
|
|
|
|
1. Выгрузить папку node_modules из проекта
|
|
|
|
|
|
2. В PowerShell в корне проекта ввести команду
|
|
|
|
|
|
```bash
|
|
|
|
|
|
cmd /c mklink /D node_modules node_modules
|
|
|
|
|
|
```
|
|
|
|
|
|
3. Перезапустить проект
|
|
|
|
|
|
|
|
|
|
|
|
## ✨Требования задания
|
|
|
|
|
|
|
|
|
|
|
|
> The text in the "Company Name" column should be a link that opens "Details" for its
|
|
|
|
|
|
object
|
|
|
|
|
|
1. Текст в столбце «Название компании» должен быть ссылкой, которая открывает «Подробности» компании
|
|
|
|
|
|
> Use EntityFramework, store data in memory (add a code that creates initial data at
|
|
|
|
|
|
application startup)
|
|
|
|
|
|
2. Используйте EntityFramework, храните данные в памяти (добавьте код, создающий исходные данные в
|
|
|
|
|
|
запуск приложения)
|
|
|
|
|
|
> Set a fixed width for groups in "Details"
|
|
|
|
|
|
3. Установите фиксированную ширину для групп в разделе «Подробности».
|
|
|
|
|
|
> Use CSS Flex to align groups in "Details", there should be 1 column of groups if browser
|
|
|
|
|
|
window is narrow
|
|
|
|
|
|
4. Используйте CSS Flex для выравнивания групп в разделе "Подробности", должен быть 1 столбец групп, если окно браузера узкое
|
|
|
|
|
|
> Use CSS Grid to align items in groups in "Details"
|
|
|
|
|
|
5. Используйте CSS Grid для выравнивания элементов в группах в разделе «Подробности».
|
|
|
|
|
|
> Avoid duplication of CSS and HTML markup code that generates "Details" in C#/markup
|
|
|
|
|
|
code (each group should have the same layout for the 'caption', 'toolbar' and 'content'
|
|
|
|
|
|
items)
|
|
|
|
|
|
6. Избегайте дублирования кода разметки CSS и HTML, который генерирует «Подробности» в C#/разметке.
|
|
|
|
|
|
код (каждая группа должна иметь одинаковый макет для объектов «заголовка», «панели инструментов» и «контента»)
|
|
|
|
|
|
> Implement behavior for 'Refresh' button: reload data from the server and recreate DOM
|
|
|
|
|
|
in browser
|
|
|
|
|
|
7. Реализовать поведение кнопки «Обновить»: перезагрузить данные с сервера и заново создать DOM.
|
|
|
|
|
|
в браузере
|
|
|
|
|
|
> Adjust the "Employees" group to be nearly twice wider than other groups, keep vertical
|
|
|
|
|
|
groups alignment
|
|
|
|
|
|
8. Отрегулируйте группу "Сотрудники", чтобы она была почти в два раза шире, чем другие группы, сохраняя вертикальность
|
|
|
|
|
|
выравнивание групп
|
|
|
|
|
|
> Don't render grids on the server side. Instead, render an empty grid and perform a new
|
|
|
|
|
|
'fetch' request when a page is loaded and build grid rows in javascript code, in browser.
|
|
|
|
|
|
Implement necessary server side API to load data for grids
|
|
|
|
|
|
7. Не визуализируйте сетки на стороне сервера. Вместо этого визуализируйте пустую сетку и выполните новую
|
|
|
|
|
|
запрос «выборки» при загрузке страницы и построение строк сетки в коде javascript в браузере.
|
|
|
|
|
|
Реализовать необходимый API на стороне сервера для загрузки данных для сеток.
|
|
|
|
|
|
|
|
|
|
|
|
## 🤖 Результат выполнения
|
|
|
|
|
|
|
|
|
|
|
|
<p align="center">
|
|
|
|
|
|
<h1 align="center">👨🏽💻 Версия на ПК</h1>
|
|
|
|
|
|
<h5 align="center">💫 Main 💫</h5>
|
|
|
|
|
|
<img src="Info/1.png" width="100%">
|
|
|
|
|
|
<h5 align="center">💫 Details 💫</h5>
|
|
|
|
|
|
<img src="Info/2.png" width="100%">
|
|
|
|
|
|
<h1 align="center">👨🏽💻 Для заполнения групп создано REST API</h1>
|
|
|
|
|
|
<img src="Info/3.png" width="100%">
|
|
|
|
|
|
<h1 align="center">👨🏽💻 Пример заполненной версии 💫Details💫</h1>
|
|
|
|
|
|
<img src="Info/4.png" width="100%">
|
|
|
|
|
|
<h1 align="center">👨🏽💻 Пример мобильной версии 💫Details💫</h1>
|
|
|
|
|
|
<h5 align="center">💫 870px 💫</h5>
|
|
|
|
|
|
<p align="center">
|
|
|
|
|
|
<img src="Info/5.png" width="65%">
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<h5 align="center">💫 500px 💫</h5>
|
|
|
|
|
|
<p align="center">
|
|
|
|
|
|
<img src="Info/6.png" width="35%">
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
## 👾 Важно отметить
|
|
|
|
|
|
|
|
|
|
|
|
- В задаче не была описана логика работы кнопок редактирования и поведение кнопки добавления
|
|
|
|
|
|
- В задаче не затрагивались вопросы ограничения по стеку технологий применяемых для ускорения разработки
|
|
|
|
|
|
- В задаче нету пунктов о сложности или простоте исполнения, конкретного формата выполнения работы не указано
|
|
|
|
|
|
- Бонусом в задаче реализована поддержка TypeScript и автоматическая генерация JavaScript и CSS сразу в минимизированный формат
|
|
|
|
|
|
- Бонусом в задаче сделано API способное принимать пачки данных на обработку
|
