# Metr Frontend

<p align="center">
  <a href="https://forma-web.ru">
    <img alt="Logo" src="public/logo.svg" width="300" title="Logo">
   </a>
</p>

<p align="center">
  <a href="https://github.com/robonen/metr-frontend/actions">
    <img src="https://github.com/robonen/metr-frontend/actions/workflows/release.yml/badge.svg" title="Release status">
  </a>
  <a href="https://github.com/robonen/metr-frontend/actions">
    <img src="https://github.com/robonen/metr-frontend/actions/workflows/test.yml/badge.svg" title="Lint status">
  </a>
  <a href="https://github.com/robonen/metr-frontend/releases">
    <img src="https://img.shields.io/github/v/release/robonen/metr-frontend?display_name=tag&label=Last%20Version&color=brightgreen" title="Last version">
  </a>
</p>

## Git Flow ⚠

Продакшен ветка - `master`

Ветка для разработки - `dev-x.x.x`

### Порядок работы с репозиторием
- Создать ветку с версией dev-x.x.x
- После окончания работы над версией и успешным прохождением тестов выполнить слияние с master веткой
- Для создания нового релиза перейти в раздел Releases, заполнить описание версии и добавить тег

## Установка проекта

```bash
git clone https://github.com/robonen/metr-frontend.git
cd metr-frontend
npm install
```

### Запуск в режиме разработки

```bash
npm run serve
```

### Компиляция продакшен сборки

```bash
npm run build
```

## Правила структурирования проекта

### Компоненты (`src/components`)

```
AppButton.vue
AppPopup.vue
AppToastNotification.vue
BaseButton.vue
BasePopup.vue
ClientForm.vue
ClientList.vue
SearchWidget.vue
SearchWidgetInput.vue
SearchWidgetList.vue
```

1. Каждый компонент должен быть определен в отдельном файле
2. Имена файлов компонентов должны быть в PascalCase
3. Все базовые компоненты должны начинаться с одного префикса
4. Имена компонентов всегда должны быть многословными, чтобы не конфликтовать с существующими или будущими элементами HTML
5. Сильно связанные дочерние компоненты должны иметь префикс с именем их родительского компонента

### Страницы (`src/views`)

```
UsersIndex.vue
UsersCreate.vue
UsersShow.vue
UsersEdit.vue
SignIn.vue
Settings.vue
```

1. Каждая страница должна быть определена в отдельном файле
2. Имена файлов компонентов должны быть в PascalCase
3. Все страницы, относящиеся к одной сущности должны начинаться с одного префикса
4. Страницы, на сколько это возможно, строятся из компонентов, чтобы избежать дублирование кода