# Recipient - отвратительные рецепты

Recipient - отвратительные рецепты

База отвратительных рецептов с возможностью фильтрации по ингредиентам.

# Стэк технологий

  • Vue
  • Vuetify
  • Typescript
  • Vue-router

# Структура проекта

/src
	/common
		/validations
	/pages
		/login
			/components
			...
		/recipe
			/edit
				/components
				...
			/list
				/business
				/components
				...
	/rest-api
	App.vue
	...
...

# Авторизация

В приложении реализована фейковая авторизация на фронте.

<template>
	<v-layout>
		<v-flex xs12 sm6 offset-sm3>
			<v-card>
				<v-card-title primary-title>
					<h3 class="headline">
						Login
					</h3>
				</v-card-title>
				<v-card-text>
					<form-component
						:login="login"
						:login-error="loginError"
						:update-login="updateLogin"
						:login-request="loginRequest"
					/>
				</v-card-text>
			</v-card>
		</v-flex>
	</v-layout>
</template>

<script lang="ts">
import Vue, { PropOptions } from 'vue';
import { FormProps } from './formProps';
import { FormComponent } from './components';

export default Vue.extend({
	name: 'LoginPage',
	components: { FormComponent },
	props: {
		login: {},
		loginError: {},
		updateLogin: {},
		loginRequest: {},
	} as FormProps,
});
</script>

/src/pages/login/Page.vue

# Редактирование рецептов

Есть возможность редактировать название блюда, его описание и ингридиенты.

<template>
	<form>
		<v-container>

			...

			<v-layout row>
				<v-textarea
					placeholder="Описание..."
					rows="10"
					:value="recipe.description"
					:no-resize="true"
					@input="(value) => onUpdateRecipe('description', value)"
				>
				</v-textarea>
			</v-layout>
			<v-layout row justify-end>
				<v-btn type="button" color="success" @click.prevent="onSave">Сохранить</v-btn>
			</v-layout>
		</v-container>
	</form>
</template>

<script lang="ts">
...

export default Vue.extend({
	name: 'FormComponent',
	components: { IngredientListComponent },
	props: {
		recipe: {},
		recipeError: {},
		onUpdateRecipe: {},
		onAddIngredient: {},
		onRemoveIngredient: {},
		onSave: {},
	} as FormProps,

	...

	computed: {
		resultRecipeError(): boolean | string {
			return this.recipeError.name.succeeded || this.recipeError.name.errorMessage;
		},
	},
	methods: {
		onUpdateIngredient(value) {
			this.ingredient = value;
		}
	}
});
</script>

# Исходный код на GitHub

Recipient (opens new window)