Схемочка Мастера и UI kit

#backend #frontend #python #django

Реализация каталога мастеров. Идея заключалась в том, что любой пользователь может стать мастером. Для этого ему было необходимо заполнить информацию в виде анкеты. Было сделано две части: форма в админке, страница мастера.

Форма

В качестве реализации был выбран степпер, то есть пошаговое заполнение информации. При это нельзя было опубликоваться, пока не будет заполнен каждый шаг. По форме можно передвигаться вперед назад. Только после полного заполнения доступен аккордеон шагов целиком, по которому можно свободно перемещаться к любому блоку информации.

Так так проекте не используется фронтенд фреймворк все было сделано на jquery. Полная изоляция скриптов и и нейминг по БЭМ. Это обеспечило порядок в коде и независимость компонентных частей. Так js кода вышло на 500 строк. В форме оказалось немало нюансов не видных на первый взгляд:

Так же пришлось разбить сущности портфолио и услуг на отдельные формы, чтобы не усложнять не реактивный фронтенд. Были реализованы по CRUD с переходом на соответствующие страницы.

На бэкенде был реализован отдельный модуль masters. В нем шли все модели url и вьюшки. Для каждого шага, тк это были отдельный формы, стояли свои экшены, причем для портфолио и услуг - create, delete, update. Так как производился рефактор и на бэкенде я решил привести в актуальное состояние миграции. Было не легко, но теперь проект идет четко следуя им.

Фронт страница

Страница выводит всю информацию, которую пользователь заполняет в админке. Двойной слайдер для галлереи. Fancy box так же для превью картинок.

UI kit

Так в ходе разработки админочной части был произведен немалый рефактор. Разбиение логических частей сайта на отдельные папки и подпапки в pages patials scss js. Был переработан интерфейс навигации в админке, добавлен сайдбар, убрали второе меню в шапке, относящиеся к кабинету. Все админочные страницы были сделаны по одним саб урлом /cabinet и стали иметь один вид заголовка сайдбара и контейнера.

В ходе разработки формы понадобились компонентная реализация повторяющихся элементов. Были переделаны и вынесены отдельно разные элементы: инпут, инпут дизейбл, селект, чекбокс, радио кнопка, плашки, аккордион, аплоадер для картинки, разные виды текстов, набор кнопок и ссылок и тд.

В последствии получилось переработать в стилях и js излишний код, унифицировать элементы для дальнейшего упрощенного использования.

Exception

Error

We're sorry, but an unhandled error occurred. Please see the details below.

file_put_contents(/home/admin/web/alex.dzen-code.ru/public_html/storage/framework/cache/11/de/11de31e1eabb2682cf62ee9c9ccb0630f1019006): failed to open stream: Permission denied

/home/admin/web/alex.dzen-code.ru/public_html/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php line 122

     * @param  string  $contents
     * @param  bool  $lock
     * @return int
     */
    public function put($path, $contents, $lock = false)
    {
        return file_put_contents($path, $contents, $lock ? LOCK_EX : 0);
    }
 
    /**
     * Prepend to a file.
     *
     * @param  string  $path

Stack trace

# Called Code Document Line
30 file_put_contents(…) ~/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php 122
29 Illuminate\Filesystem\Filesystem->put(…) ~/vendor/october/rain/src/Filesystem/Filesystem.php 217
28 October\Rain\Filesystem\Filesystem->put(…) ~/vendor/laravel/framework/src/Illuminate/Cache/FileStore.php 65
27 Illuminate\Cache\FileStore->put(…) ~/vendor/laravel/framework/src/Illuminate/Cache/Repository.php 191
26 Illuminate\Cache\Repository->put(…) ~/vendor/october/rain/src/Halcyon/MemoryRepository.php 61
25 October\Rain\Halcyon\MemoryRepository->put(…) ~/vendor/laravel/framework/src/Illuminate/Cache/Repository.php 323
24 Illuminate\Cache\Repository->remember(…) ~/vendor/laravel/framework/src/Illuminate/Cache/CacheManager.php 304
23 Illuminate\Cache\CacheManager->__call(…) ~/vendor/october/rain/src/Database/QueryBuilder.php 158
22 October\Rain\Database\QueryBuilder->getCached(…) ~/vendor/october/rain/src/Database/QueryBuilder.php 121
21 October\Rain\Database\QueryBuilder->getDuplicateCached(…) ~/vendor/october/rain/src/Database/QueryBuilder.php 92
20 October\Rain\Database\QueryBuilder->get(…) ~/vendor/laravel/framework/src/Illuminate/Database/Eloquent/Builder.php 481
19 Illuminate\Database\Eloquent\Builder->getModels(…) ~/vendor/laravel/framework/src/Illuminate/Database/Eloquent/Builder.php 465
18 Illuminate\Database\Eloquent\Builder->get(…) ~/vendor/laravel/framework/src/Illuminate/Database/Concerns/BuildsQueries.php 77
17 Illuminate\Database\Eloquent\Builder->first() ~/modules/system/behaviors/SettingsModel.php 114
16 System\Behaviors\SettingsModel->getSettingsRecord() ~/modules/system/behaviors/SettingsModel.php 76
15 System\Behaviors\SettingsModel->instance() ~/modules/system/behaviors/SettingsModel.php 135
14 System\Behaviors\SettingsModel->get(…)
13 call_user_func_array(…) ~/vendor/october/rain/src/Extension/ExtendableTrait.php 414
12 October\Rain\Database\Model->extendableCall(…) ~/vendor/october/rain/src/Database/Model.php 647
11 October\Rain\Database\Model->__call(…) ~/vendor/laravel/framework/src/Illuminate/Database/Eloquent/Model.php 1489
10 Illuminate\Database\Eloquent\Model::__callStatic(…) ~/modules/system/models/EventLog.php 37
9 System\Models\EventLog::useLogging() ~/modules/system/ServiceProvider.php 286
8 System\ServiceProvider->System\{closure}(…)
7 call_user_func_array(…) ~/vendor/october/rain/src/Events/Dispatcher.php 233
6 October\Rain\Events\Dispatcher->dispatch(…) ~/vendor/laravel/framework/src/Illuminate/Log/Writer.php 295
5 Illuminate\Log\Writer->fireLogEvent(…) ~/vendor/laravel/framework/src/Illuminate/Log/Writer.php 201
4 Illuminate\Log\Writer->writeLog(…) ~/vendor/laravel/framework/src/Illuminate/Log/Writer.php 114
3 Illuminate\Log\Writer->error(…) ~/vendor/laravel/framework/src/Illuminate/Support/Facades/Facade.php 221
2 Illuminate\Support\Facades\Facade::__callStatic(…) ~/vendor/october/rain/src/Foundation/Exception/Handler.php 66
1 October\Rain\Foundation\Exception\Handler->report(…) ~/vendor/laravel/framework/src/Illuminate/Foundation/Bootstrap/HandleExceptions.php 81
0 Illuminate\Foundation\Bootstrap\HandleExceptions->handleException(…)