mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-01-10 02:51:23 -05:00
feature/recipe-patch-improvements (#382)
* automated docs update * recipe rating component * recipe partial updates - closes #25 * use Vue.delete to update store * format * arrow functions * fix tests * format * initial context menu * localize * add confirmation dialog * context menu * fix bare exception * update line length * format all file with prettier * update changelog * download as json * update python dependencies * update javascript dependencies Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
Hayden
GitHub
151
frontend/src/components/Recipe/ContextMenu.vue
Normal file
151
frontend/src/components/Recipe/ContextMenu.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<ConfirmationDialog
|
||||
:title="$t('recipe.delete-recipe')"
|
||||
:message="$t('recipe.delete-confirmation')"
|
||||
color="error"
|
||||
icon="mdi-alert-circle"
|
||||
ref="deleteRecipieConfirm"
|
||||
v-on:confirm="deleteRecipe()"
|
||||
/>
|
||||
<v-menu offset-y top left>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn color="primary" icon dark v-bind="attrs" v-on="on" @click.prevent>
|
||||
<v-icon>{{ menuIcon }}</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list dense>
|
||||
<v-list-item
|
||||
v-for="(item, index) in loggedIn ? userMenu : defaultMenu"
|
||||
:key="index"
|
||||
@click="menuAction(item.action)"
|
||||
>
|
||||
<v-list-item-icon>
|
||||
<v-icon v-text="item.icon" :color="item.color"></v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog.vue";
|
||||
import { api } from "@/api";
|
||||
export default {
|
||||
components: {
|
||||
ConfirmationDialog,
|
||||
},
|
||||
props: {
|
||||
slug: {
|
||||
type: String,
|
||||
},
|
||||
menuIcon: {
|
||||
default: "mdi-dots-vertical",
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
loggedIn() {
|
||||
return this.$store.getters.getIsLoggedIn;
|
||||
},
|
||||
baseURL() {
|
||||
return window.location.origin;
|
||||
},
|
||||
recipeURL() {
|
||||
return `${this.baseURL}/recipe/${this.slug}`;
|
||||
},
|
||||
defaultMenu() {
|
||||
return [
|
||||
{
|
||||
title: this.$t("general.download"),
|
||||
icon: "mdi-download",
|
||||
color: "accent",
|
||||
action: "download",
|
||||
},
|
||||
{
|
||||
title: this.$t("general.link"),
|
||||
icon: "mdi-content-copy",
|
||||
color: "accent",
|
||||
action: "share",
|
||||
},
|
||||
];
|
||||
},
|
||||
userMenu() {
|
||||
return [
|
||||
{
|
||||
title: this.$t("general.delete"),
|
||||
icon: "mdi-delete",
|
||||
color: "error",
|
||||
action: "delete",
|
||||
},
|
||||
{
|
||||
title: this.$t("general.edit"),
|
||||
icon: "mdi-square-edit-outline",
|
||||
color: "accent",
|
||||
action: "edit",
|
||||
},
|
||||
...this.defaultMenu,
|
||||
];
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async menuAction(action) {
|
||||
this.loading = true;
|
||||
|
||||
switch (action) {
|
||||
case "delete":
|
||||
this.$refs.deleteRecipieConfirm.open();
|
||||
break;
|
||||
case "share":
|
||||
this.updateClipboard();
|
||||
break;
|
||||
case "edit":
|
||||
this.$router.push(`/recipe/${this.slug}` + "?edit=true");
|
||||
break;
|
||||
case "download":
|
||||
await this.downloadJson();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
this.loading = false;
|
||||
},
|
||||
async deleteRecipe() {
|
||||
await api.recipes.delete(this.slug);
|
||||
},
|
||||
updateClipboard() {
|
||||
const copyText = this.recipeURL;
|
||||
navigator.clipboard.writeText(copyText).then(
|
||||
() => console.log("Copied", copyText),
|
||||
() => console.log("Copied Failed", copyText)
|
||||
);
|
||||
},
|
||||
async downloadJson() {
|
||||
const recipe = await api.recipes.requestDetails(this.slug);
|
||||
this.downloadString(JSON.stringify(recipe, "", 4), "text/json", recipe.slug+'.json');
|
||||
},
|
||||
downloadString(text, fileType, fileName) {
|
||||
let blob = new Blob([text], { type: fileType });
|
||||
|
||||
let a = document.createElement("a");
|
||||
a.download = fileName;
|
||||
a.href = URL.createObjectURL(blob);
|
||||
a.dataset.downloadurl = [fileType, a.download, a.href].join(":");
|
||||
a.style.display = "none";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
setTimeout(function() {
|
||||
URL.revokeObjectURL(a.href);
|
||||
}, 1500);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -18,14 +18,7 @@
|
||||
<template v-slot:extension>
|
||||
<v-col></v-col>
|
||||
<div v-if="open">
|
||||
<v-btn
|
||||
class="mr-2"
|
||||
fab
|
||||
dark
|
||||
small
|
||||
color="error"
|
||||
@click="deleteRecipeConfrim"
|
||||
>
|
||||
<v-btn class="mr-2" fab dark small color="error" @click="deleteRecipeConfrim">
|
||||
<v-icon>mdi-delete</v-icon>
|
||||
</v-btn>
|
||||
|
||||
@@ -101,5 +94,4 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
@@ -1,30 +1,14 @@
|
||||
<template>
|
||||
<v-card
|
||||
class="mx-auto"
|
||||
hover
|
||||
:to="`/recipe/${slug}`"
|
||||
@click="$emit('selected')"
|
||||
>
|
||||
<v-card :ripple="false" class="mx-auto" hover :to="`/recipe/${slug}`" @click="$emit('selected')">
|
||||
<v-list-item three-line>
|
||||
<v-list-item-avatar
|
||||
tile
|
||||
size="125"
|
||||
color="grey"
|
||||
class="v-mobile-img rounded-sm my-0 ml-n4"
|
||||
>
|
||||
<v-list-item-avatar tile size="125" color="grey" class="v-mobile-img rounded-sm my-0 ml-n4">
|
||||
<v-img :src="getImage(slug)" lazy-src=""></v-img
|
||||
></v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class=" mb-1">{{ name }}</v-list-item-title>
|
||||
<v-list-item-title class=" mb-1">{{ name }} </v-list-item-title>
|
||||
<v-list-item-subtitle> {{ description }} </v-list-item-subtitle>
|
||||
<div class="d-flex justify-center align-center">
|
||||
<RecipeChips
|
||||
:items="tags"
|
||||
:title="false"
|
||||
:limit="1"
|
||||
:small="true"
|
||||
:isCategory="false"
|
||||
/>
|
||||
<RecipeChips :items="tags" :title="false" :limit="1" :small="true" :isCategory="false" />
|
||||
<v-rating
|
||||
color="secondary"
|
||||
class="ml-auto"
|
||||
@@ -34,6 +18,7 @@
|
||||
size="15"
|
||||
:value="rating"
|
||||
></v-rating>
|
||||
<ContextMenu :slug="slug" menu-icon="mdi-dots-horizontal" />
|
||||
</div>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
@@ -42,10 +27,12 @@
|
||||
|
||||
<script>
|
||||
import RecipeChips from "@/components/Recipe/RecipeViewer/RecipeChips";
|
||||
import ContextMenu from "@/components/Recipe/ContextMenu";
|
||||
import { api } from "@/api";
|
||||
export default {
|
||||
components: {
|
||||
RecipeChips,
|
||||
ContextMenu,
|
||||
},
|
||||
props: {
|
||||
name: String,
|
||||
@@ -96,4 +83,4 @@ export default {
|
||||
.text-top {
|
||||
align-self: start !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -11,10 +11,7 @@
|
||||
<v-icon v-text="item.icon"></v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title
|
||||
class="pl-2"
|
||||
v-text="item.name"
|
||||
></v-list-item-title>
|
||||
<v-list-item-title class="pl-2" v-text="item.name"></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-btn
|
||||
@@ -36,30 +33,16 @@
|
||||
</v-card>
|
||||
<div class="d-flex ml-auto mt-2">
|
||||
<v-spacer></v-spacer>
|
||||
<base-dialog
|
||||
@submit="addAsset"
|
||||
:title="$t('recipe.new-asset')"
|
||||
:title-icon="newAsset.icon"
|
||||
>
|
||||
<base-dialog @submit="addAsset" :title="$t('recipe.new-asset')" :title-icon="newAsset.icon">
|
||||
<template v-slot:open="{ open }">
|
||||
<v-btn color="secondary" dark @click="open" v-if="edit">
|
||||
<v-icon>mdi-plus</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card-text class="pt-2">
|
||||
<v-text-field
|
||||
dense
|
||||
v-model="newAsset.name"
|
||||
:label="$t('general.name')"
|
||||
></v-text-field>
|
||||
<v-text-field dense v-model="newAsset.name" :label="$t('general.name')"></v-text-field>
|
||||
<div class="d-flex justify-space-between">
|
||||
<v-select
|
||||
dense
|
||||
:prepend-icon="newAsset.icon"
|
||||
v-model="newAsset.icon"
|
||||
:items="iconOptions"
|
||||
class="mr-2"
|
||||
>
|
||||
<v-select dense :prepend-icon="newAsset.icon" v-model="newAsset.icon" :items="iconOptions" class="mr-2">
|
||||
<template v-slot:item="{ item }">
|
||||
<v-list-item-avatar>
|
||||
<v-icon class="mr-auto">
|
||||
@@ -69,12 +52,7 @@
|
||||
{{ item }}
|
||||
</template>
|
||||
</v-select>
|
||||
<TheUploadBtn
|
||||
@uploaded="setFileObject"
|
||||
:post="false"
|
||||
file-name="file"
|
||||
:text-btn="false"
|
||||
/>
|
||||
<TheUploadBtn @uploaded="setFileObject" :post="false" file-name="file" :text-btn="false" />
|
||||
</div>
|
||||
{{ fileObject.name }}
|
||||
</v-card-text>
|
||||
@@ -109,13 +87,7 @@ export default {
|
||||
name: "",
|
||||
icon: "mdi-file",
|
||||
},
|
||||
iconOptions: [
|
||||
"mdi-file",
|
||||
"mdi-file-pdf-box",
|
||||
"mdi-file-image",
|
||||
"mdi-code-json",
|
||||
"mdi-silverware-fork-knife",
|
||||
],
|
||||
iconOptions: ["mdi-file", "mdi-file-pdf-box", "mdi-file-image", "mdi-code-json", "mdi-silverware-fork-knife"],
|
||||
menu: [
|
||||
{
|
||||
title: "Link 1",
|
||||
@@ -156,5 +128,4 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@@ -2,24 +2,17 @@
|
||||
<div class="text-center">
|
||||
<v-dialog v-model="dialog" width="600">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
|
||||
color="secondary lighten-2"
|
||||
dark
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
@click="inputText = ''"
|
||||
>
|
||||
{{$t('new-recipe.bulk-add')}}
|
||||
<v-btn color="secondary lighten-2" dark v-bind="attrs" v-on="on" @click="inputText = ''">
|
||||
{{ $t("new-recipe.bulk-add") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-card>
|
||||
<v-card-title class="headline"> {{$t('new-recipe.bulk-add')}} </v-card-title>
|
||||
<v-card-title class="headline"> {{ $t("new-recipe.bulk-add") }} </v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<p>
|
||||
{{$t('new-recipe.paste-in-your-recipe-data-each-line-will-be-treated-as-an-item-in-a-list')}}
|
||||
{{ $t("new-recipe.paste-in-your-recipe-data-each-line-will-be-treated-as-an-item-in-a-list") }}
|
||||
</p>
|
||||
<v-textarea v-model="inputText"> </v-textarea>
|
||||
</v-card-text>
|
||||
@@ -28,7 +21,7 @@
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="success" text @click="save"> {{$t('general.save')}} </v-btn>
|
||||
<v-btn color="success" text @click="save"> {{ $t("general.save") }} </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@@ -61,4 +54,4 @@ export default {
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -9,34 +9,17 @@
|
||||
<v-card-title> {{ $t("recipe.api-extras") }} </v-card-title>
|
||||
|
||||
<v-card-text :key="formKey">
|
||||
<v-row
|
||||
align="center"
|
||||
v-for="(value, key, index) in extras"
|
||||
:key="index"
|
||||
>
|
||||
<v-row align="center" v-for="(value, key, index) in extras" :key="index">
|
||||
<v-col cols="12" sm="1">
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
x-small
|
||||
color="white"
|
||||
elevation="0"
|
||||
@click="removeExtra(key)"
|
||||
>
|
||||
<v-btn fab text x-small color="white" elevation="0" @click="removeExtra(key)">
|
||||
<v-icon color="error">mdi-delete</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3" sm="6">
|
||||
<v-text-field
|
||||
:label="$t('recipe.object-key')"
|
||||
:value="key"
|
||||
@input="updateKey(index)"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-text-field :label="$t('recipe.object-key')" :value="key" @input="updateKey(index)"> </v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="8" sm="6">
|
||||
<v-text-field :label="$t('recipe.object-value')" v-model="extras[key]">
|
||||
</v-text-field>
|
||||
<v-text-field :label="$t('recipe.object-value')" v-model="extras[key]"> </v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
@@ -74,9 +57,8 @@ export default {
|
||||
dialog: false,
|
||||
formKey: 1,
|
||||
rules: {
|
||||
required: (v) => !!v || this.$i18n.t("recipe.key-name-required"),
|
||||
whiteSpace: (v) =>
|
||||
!v || v.split(" ").length <= 1 || this.$i18n.t("recipe.no-white-space-allowed"),
|
||||
required: v => !!v || this.$i18n.t("recipe.key-name-required"),
|
||||
whiteSpace: v => !v || v.split(" ").length <= 1 || this.$i18n.t("recipe.no-white-space-allowed"),
|
||||
},
|
||||
};
|
||||
},
|
||||
@@ -100,5 +82,4 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
@@ -25,19 +25,9 @@
|
||||
</v-card-title>
|
||||
<v-card-text class="mt-n5">
|
||||
<div>
|
||||
<v-text-field
|
||||
:label="$t('general.url')"
|
||||
class="pt-5"
|
||||
clearable
|
||||
v-model="url"
|
||||
>
|
||||
<v-text-field :label="$t('general.url')" class="pt-5" clearable v-model="url">
|
||||
<template v-slot:append-outer>
|
||||
<v-btn
|
||||
class="ml-2"
|
||||
color="primary"
|
||||
@click="getImageFromURL"
|
||||
:loading="loading"
|
||||
>
|
||||
<v-btn class="ml-2" color="primary" @click="getImageFromURL" :loading="loading">
|
||||
{{ $t("general.get") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
@@ -80,5 +70,4 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<v-card>
|
||||
<v-card-title class="py-2">
|
||||
<div>
|
||||
{{$t('recipe.recipe-settings')}}
|
||||
{{ $t("recipe.recipe-settings") }}
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
@@ -43,17 +43,16 @@ export default {
|
||||
computed: {
|
||||
labels() {
|
||||
return {
|
||||
public: this.$t('recipe.public-recipe'),
|
||||
showNutrition: this.$t('recipe.show-nutrition-values'),
|
||||
showAssets: this.$t('recipe.show-assets'),
|
||||
landscapeView: this.$t('recipe.landscape-view-coming-soon'),
|
||||
};
|
||||
}
|
||||
public: this.$t("recipe.public-recipe"),
|
||||
showNutrition: this.$t("recipe.show-nutrition-values"),
|
||||
showAssets: this.$t("recipe.show-assets"),
|
||||
landscapeView: this.$t("recipe.landscape-view-coming-soon"),
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -2,18 +2,9 @@
|
||||
<div>
|
||||
<h2 class="mb-4">{{ $t("recipe.ingredients") }}</h2>
|
||||
<div v-if="edit">
|
||||
<draggable
|
||||
:value="value"
|
||||
@input="updateIndex"
|
||||
@start="drag = true"
|
||||
@end="drag = false"
|
||||
handle=".handle"
|
||||
>
|
||||
<draggable :value="value" @input="updateIndex" @start="drag = true" @end="drag = false" handle=".handle">
|
||||
<transition-group type="transition" :name="!drag ? 'flip-list' : null">
|
||||
<div
|
||||
v-for="(ingredient, index) in value"
|
||||
:key="generateKey('ingredient', index)"
|
||||
>
|
||||
<div v-for="(ingredient, index) in value" :key="generateKey('ingredient', index)">
|
||||
<v-row align="center">
|
||||
<v-textarea
|
||||
class="mr-2"
|
||||
@@ -28,12 +19,7 @@
|
||||
<template slot="append-outer">
|
||||
<v-icon class="handle">mdi-arrow-up-down</v-icon>
|
||||
</template>
|
||||
<v-icon
|
||||
class="mr-n1"
|
||||
slot="prepend"
|
||||
color="error"
|
||||
@click="removeByIndex(value, index)"
|
||||
>
|
||||
<v-icon class="mr-n1" slot="prepend" color="error" @click="removeByIndex(value, index)">
|
||||
mdi-delete
|
||||
</v-icon>
|
||||
</v-textarea>
|
||||
@@ -56,20 +42,10 @@
|
||||
:key="generateKey('ingredient', index)"
|
||||
@click="toggleChecked(index)"
|
||||
>
|
||||
<v-checkbox
|
||||
hide-details
|
||||
:value="checked[index]"
|
||||
class="pt-0 my-auto py-auto"
|
||||
color="secondary"
|
||||
>
|
||||
</v-checkbox>
|
||||
<v-checkbox hide-details :value="checked[index]" class="pt-0 my-auto py-auto" color="secondary"> </v-checkbox>
|
||||
|
||||
<v-list-item-content>
|
||||
<vue-markdown
|
||||
class="ma-0 pa-0 text-subtitle-1 dense-markdown"
|
||||
:source="ingredient"
|
||||
>
|
||||
</vue-markdown>
|
||||
<vue-markdown class="ma-0 pa-0 text-subtitle-1 dense-markdown" :source="ingredient"> </vue-markdown>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</div>
|
||||
@@ -130,8 +106,8 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style >
|
||||
<style>
|
||||
.dense-markdown p {
|
||||
margin: auto !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -3,13 +3,7 @@
|
||||
<h2 class="mb-4">{{ $t("recipe.instructions") }}</h2>
|
||||
<div>
|
||||
<div v-for="(step, index) in value" :key="index">
|
||||
<v-app-bar
|
||||
v-if="showTitleEditor[index]"
|
||||
class="primary mx-1 mt-6"
|
||||
dark
|
||||
dense
|
||||
rounded
|
||||
>
|
||||
<v-app-bar v-if="showTitleEditor[index]" class="primary mx-1 mt-6" dark dense rounded>
|
||||
<v-toolbar-title class="headline" v-if="!edit">
|
||||
<v-app-bar-title v-text="step.title"> </v-app-bar-title>
|
||||
</v-toolbar-title>
|
||||
@@ -46,16 +40,8 @@
|
||||
<v-icon size="24" color="error">mdi-delete</v-icon>
|
||||
</v-btn>
|
||||
{{ $t("recipe.step-index", { step: index + 1 }) }}
|
||||
<v-btn
|
||||
v-if="edit"
|
||||
text
|
||||
color="primary"
|
||||
class="ml-auto"
|
||||
@click="toggleShowTitle(index)"
|
||||
>
|
||||
{{
|
||||
!showTitleEditor[index] ? "Insert Section" : "Remove Section"
|
||||
}}
|
||||
<v-btn v-if="edit" text color="primary" class="ml-auto" @click="toggleShowTitle(index)">
|
||||
{{ !showTitleEditor[index] ? "Insert Section" : "Remove Section" }}
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<v-card-text v-if="edit">
|
||||
@@ -144,5 +130,4 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@@ -1,36 +1,17 @@
|
||||
<template>
|
||||
<div v-if="value.length > 0 || edit">
|
||||
<h2 class="my-4">{{ $t("recipe.note") }}</h2>
|
||||
<v-card
|
||||
class="mt-1"
|
||||
v-for="(note, index) in value"
|
||||
:key="generateKey('note', index)"
|
||||
>
|
||||
<v-card class="mt-1" v-for="(note, index) in value" :key="generateKey('note', index)">
|
||||
<div v-if="edit">
|
||||
<v-card-text>
|
||||
<v-row align="center">
|
||||
<v-btn
|
||||
fab
|
||||
x-small
|
||||
color="white"
|
||||
class="mr-2"
|
||||
elevation="0"
|
||||
@click="removeByIndex(value, index)"
|
||||
>
|
||||
<v-btn fab x-small color="white" class="mr-2" elevation="0" @click="removeByIndex(value, index)">
|
||||
<v-icon color="error">mdi-delete</v-icon>
|
||||
</v-btn>
|
||||
<v-text-field
|
||||
:label="$t('recipe.title')"
|
||||
v-model="value[index]['title']"
|
||||
></v-text-field>
|
||||
<v-text-field :label="$t('recipe.title')" v-model="value[index]['title']"></v-text-field>
|
||||
</v-row>
|
||||
|
||||
<v-textarea
|
||||
auto-grow
|
||||
:placeholder="$t('recipe.note')"
|
||||
v-model="value[index]['text']"
|
||||
>
|
||||
</v-textarea>
|
||||
<v-textarea auto-grow :placeholder="$t('recipe.note')" v-model="value[index]['text']"> </v-textarea>
|
||||
</v-card-text>
|
||||
</div>
|
||||
<div v-else>
|
||||
@@ -83,5 +64,4 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
@@ -97,5 +97,4 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
62
frontend/src/components/Recipe/Parts/Rating.vue
Normal file
62
frontend/src/components/Recipe/Parts/Rating.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div @click.prevent>
|
||||
<v-rating
|
||||
:readonly="!loggedIn"
|
||||
color="secondary"
|
||||
background-color="secondary lighten-3"
|
||||
length="5"
|
||||
:dense="small ? true : undefined"
|
||||
:size="small ? 15 : undefined"
|
||||
hover
|
||||
v-model="rating"
|
||||
:value="value"
|
||||
@input="updateRating"
|
||||
@click="updateRating"
|
||||
></v-rating>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from "@/api";
|
||||
export default {
|
||||
props: {
|
||||
emitOnly: {
|
||||
default: false,
|
||||
},
|
||||
name: String,
|
||||
slug: String,
|
||||
value: Number,
|
||||
small: {
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.rating = this.value;
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rating: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
loggedIn() {
|
||||
return this.$store.getters.getIsLoggedIn;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateRating(val) {
|
||||
if (this.emitOnly) {
|
||||
this.$emit("input", val);
|
||||
return;
|
||||
}
|
||||
api.recipes.patch({
|
||||
name: this.name,
|
||||
slug: this.slug,
|
||||
rating: val,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -9,11 +9,7 @@
|
||||
>
|
||||
<v-img height="200" :src="getImage(slug)">
|
||||
<v-expand-transition v-if="description">
|
||||
<div
|
||||
v-if="hover"
|
||||
class="d-flex transition-fast-in-fast-out secondary v-card--reveal "
|
||||
style="height: 100%;"
|
||||
>
|
||||
<div v-if="hover" class="d-flex transition-fast-in-fast-out secondary v-card--reveal " style="height: 100%;">
|
||||
<v-card-text class="v-card--text-show white--text">
|
||||
{{ description | truncate(300) }}
|
||||
</v-card-text>
|
||||
@@ -27,23 +23,10 @@
|
||||
</v-card-title>
|
||||
|
||||
<v-card-actions>
|
||||
<v-rating
|
||||
class="mr-2 my-auto"
|
||||
color="secondary"
|
||||
background-color="secondary lighten-3"
|
||||
dense
|
||||
length="5"
|
||||
size="15"
|
||||
:value="rating"
|
||||
></v-rating>
|
||||
<Rating :value="rating" :name="name" :slug="slug" :small="true" />
|
||||
<v-spacer></v-spacer>
|
||||
<RecipeChips
|
||||
:items="tags"
|
||||
:title="false"
|
||||
:limit="2"
|
||||
:small="true"
|
||||
:isCategory="false"
|
||||
/>
|
||||
<RecipeChips :items="tags" :title="false" :limit="2" :small="true" :isCategory="false" />
|
||||
<ContextMenu :slug="slug" />
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
@@ -51,10 +34,14 @@
|
||||
|
||||
<script>
|
||||
import RecipeChips from "@/components/Recipe/RecipeViewer/RecipeChips";
|
||||
import ContextMenu from "@/components/Recipe/ContextMenu";
|
||||
import Rating from "@/components/Recipe/Parts/Rating";
|
||||
import { api } from "@/api";
|
||||
export default {
|
||||
components: {
|
||||
RecipeChips,
|
||||
ContextMenu,
|
||||
Rating,
|
||||
},
|
||||
props: {
|
||||
name: String,
|
||||
@@ -96,4 +83,4 @@ export default {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -2,70 +2,27 @@
|
||||
<v-form ref="form">
|
||||
<v-card-text>
|
||||
<v-row dense>
|
||||
<ImageUploadBtn
|
||||
class="my-1"
|
||||
@upload="uploadImage"
|
||||
:slug="value.slug"
|
||||
@refresh="$emit('upload')"
|
||||
/>
|
||||
<SettingsMenu
|
||||
class="my-1 mx-1"
|
||||
@upload="uploadImage"
|
||||
:value="value.settings"
|
||||
/>
|
||||
<ImageUploadBtn class="my-1" @upload="uploadImage" :slug="value.slug" @refresh="$emit('upload')" />
|
||||
<SettingsMenu class="my-1 mx-1" @upload="uploadImage" :value="value.settings" />
|
||||
</v-row>
|
||||
<v-row dense>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
:label="$t('recipe.total-time')"
|
||||
v-model="value.totalTime"
|
||||
></v-text-field>
|
||||
<v-text-field :label="$t('recipe.total-time')" v-model="value.totalTime"></v-text-field>
|
||||
</v-col>
|
||||
<v-col
|
||||
><v-text-field
|
||||
:label="$t('recipe.prep-time')"
|
||||
v-model="value.prepTime"
|
||||
></v-text-field
|
||||
></v-col>
|
||||
<v-col
|
||||
><v-text-field
|
||||
:label="$t('recipe.perform-time')"
|
||||
v-model="value.performTime"
|
||||
></v-text-field
|
||||
></v-col>
|
||||
<v-col><v-text-field :label="$t('recipe.prep-time')" v-model="value.prepTime"></v-text-field></v-col>
|
||||
<v-col><v-text-field :label="$t('recipe.perform-time')" v-model="value.performTime"></v-text-field></v-col>
|
||||
</v-row>
|
||||
<v-text-field
|
||||
class="my-3"
|
||||
:label="$t('recipe.recipe-name')"
|
||||
v-model="value.name"
|
||||
:rules="[existsRule]"
|
||||
>
|
||||
<v-text-field class="my-3" :label="$t('recipe.recipe-name')" v-model="value.name" :rules="[existsRule]">
|
||||
</v-text-field>
|
||||
<v-textarea
|
||||
auto-grow
|
||||
min-height="100"
|
||||
:label="$t('recipe.description')"
|
||||
v-model="value.description"
|
||||
>
|
||||
<v-textarea auto-grow min-height="100" :label="$t('recipe.description')" v-model="value.description">
|
||||
</v-textarea>
|
||||
<div class="my-2"></div>
|
||||
<v-row dense disabled>
|
||||
<v-col sm="4">
|
||||
<v-text-field
|
||||
:label="$t('recipe.servings')"
|
||||
v-model="value.recipeYield"
|
||||
class="rounded-sm"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-text-field :label="$t('recipe.servings')" v-model="value.recipeYield" class="rounded-sm"> </v-text-field>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-rating
|
||||
class="mr-2 align-end"
|
||||
color="secondary darken-1"
|
||||
background-color="secondary lighten-3"
|
||||
length="5"
|
||||
v-model="value.rating"
|
||||
></v-rating>
|
||||
<Rating v-model="value.rating" :emit-only="true" />
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="4" lg="4">
|
||||
@@ -104,11 +61,7 @@
|
||||
</div>
|
||||
<Notes :edit="true" v-model="value.notes" />
|
||||
|
||||
<v-text-field
|
||||
v-model="value.orgURL"
|
||||
class="mt-10"
|
||||
:label="$t('recipe.original-url')"
|
||||
></v-text-field>
|
||||
<v-text-field v-model="value.orgURL" class="mt-10" :label="$t('recipe.original-url')"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
@@ -128,6 +81,7 @@ import Ingredients from "@/components/Recipe/Parts/Ingredients";
|
||||
import Assets from "@/components/Recipe/Parts/Assets.vue";
|
||||
import Notes from "@/components/Recipe/Parts/Notes.vue";
|
||||
import SettingsMenu from "@/components/Recipe/Parts/Helpers/SettingsMenu.vue";
|
||||
import Rating from "@/components/Recipe/Parts/Rating";
|
||||
export default {
|
||||
components: {
|
||||
BulkAdd,
|
||||
@@ -140,6 +94,7 @@ export default {
|
||||
Assets,
|
||||
Notes,
|
||||
SettingsMenu,
|
||||
Rating,
|
||||
},
|
||||
props: {
|
||||
value: Object,
|
||||
@@ -181,4 +136,4 @@ export default {
|
||||
.my-divider {
|
||||
margin: 0 -1px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -3,35 +3,16 @@
|
||||
<v-card flat class="d-print-none">
|
||||
<v-card-text>
|
||||
<v-row align="center" justify="center">
|
||||
<v-btn
|
||||
left
|
||||
color="accent lighten-1 "
|
||||
class="ma-1 image-action"
|
||||
@click="$emit('exit')"
|
||||
>
|
||||
<v-btn left color="accent lighten-1 " class="ma-1 image-action" @click="$emit('exit')">
|
||||
<v-icon> mdi-arrow-left </v-icon>
|
||||
</v-btn>
|
||||
<v-card flat class="text-center" align-center>
|
||||
<v-card-text>Font Size</v-card-text>
|
||||
<v-card-text>
|
||||
<v-btn
|
||||
class="mx-2"
|
||||
fab
|
||||
dark
|
||||
x-small
|
||||
color="primary"
|
||||
@click="subtractFontSize"
|
||||
>
|
||||
<v-btn class="mx-2" fab dark x-small color="primary" @click="subtractFontSize">
|
||||
<v-icon dark> mdi-minus </v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
class="mx-2"
|
||||
fab
|
||||
dark
|
||||
x-small
|
||||
color="primary"
|
||||
@click="addFontSize"
|
||||
>
|
||||
<v-btn class="mx-2" fab dark x-small color="primary" @click="addFontSize">
|
||||
<v-icon dark> mdi-plus </v-icon>
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
@@ -52,8 +33,7 @@
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col md="1" sm="1" justify-end>
|
||||
<v-img :src="getImage(recipe.image)" max-height="200" max-width="300">
|
||||
</v-img>
|
||||
<v-img :src="getImage(recipe.image)" max-height="200" max-width="300"> </v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
@@ -104,37 +84,20 @@
|
||||
<v-col cols="12">
|
||||
<div v-if="recipe.categories[0]">
|
||||
<h2 class="mt-4">Categories</h2>
|
||||
<v-chip
|
||||
class="ma-1"
|
||||
color="primary"
|
||||
dark
|
||||
v-for="category in recipe.categories"
|
||||
:key="category"
|
||||
>
|
||||
<v-chip class="ma-1" color="primary" dark v-for="category in recipe.categories" :key="category">
|
||||
{{ category }}
|
||||
</v-chip>
|
||||
</div>
|
||||
|
||||
<div v-if="recipe.tags[0]">
|
||||
<h2 class="mt-4">Tags</h2>
|
||||
<v-chip
|
||||
class="ma-1"
|
||||
color="primary"
|
||||
dark
|
||||
v-for="tag in recipe.tags"
|
||||
:key="tag"
|
||||
>
|
||||
<v-chip class="ma-1" color="primary" dark v-for="tag in recipe.tags" :key="tag">
|
||||
{{ tag }}
|
||||
</v-chip>
|
||||
</div>
|
||||
|
||||
<h2 v-if="recipe.notes[0]" class="my-2">Notes</h2>
|
||||
<v-card
|
||||
flat
|
||||
class="mt-1"
|
||||
v-for="(note, index) in recipe.notes"
|
||||
:key="generateKey('note', index)"
|
||||
>
|
||||
<v-card flat class="mt-1" v-for="(note, index) in recipe.notes" :key="generateKey('note', index)">
|
||||
<v-card-title> {{ note.title }}</v-card-title>
|
||||
<v-card-text>
|
||||
{{ note.text }}
|
||||
@@ -196,4 +159,4 @@ export default {
|
||||
.column-wrapper {
|
||||
column-count: 2;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -35,31 +35,19 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
showCards() {
|
||||
return [this.prepTime, this.totalTime, this.performTime].some(
|
||||
x => !this.isEmpty(x)
|
||||
);
|
||||
return [this.prepTime, this.totalTime, this.performTime].some(x => !this.isEmpty(x));
|
||||
},
|
||||
allTimes() {
|
||||
return [
|
||||
this.validateTotalTime,
|
||||
this.validatePrepTime,
|
||||
this.validatePerformTime,
|
||||
].filter(x => x !== null);
|
||||
return [this.validateTotalTime, this.validatePrepTime, this.validatePerformTime].filter(x => x !== null);
|
||||
},
|
||||
validateTotalTime() {
|
||||
return !this.isEmpty(this.totalTime)
|
||||
? { name: this.$t("recipe.total-time"), value: this.totalTime }
|
||||
: null;
|
||||
return !this.isEmpty(this.totalTime) ? { name: this.$t("recipe.total-time"), value: this.totalTime } : null;
|
||||
},
|
||||
validatePrepTime() {
|
||||
return !this.isEmpty(this.prepTime)
|
||||
? { name: this.$t("recipe.prep-time"), value: this.prepTime }
|
||||
: null;
|
||||
return !this.isEmpty(this.prepTime) ? { name: this.$t("recipe.prep-time"), value: this.prepTime } : null;
|
||||
},
|
||||
validatePerformTime() {
|
||||
return !this.isEmpty(this.performTime)
|
||||
? { name: this.$t("recipe.perform-time"), value: this.performTime }
|
||||
: null;
|
||||
return !this.isEmpty(this.performTime) ? { name: this.$t("recipe.perform-time"), value: this.performTime } : null;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
@@ -77,4 +65,4 @@ export default {
|
||||
.custom-transparent {
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -62,5 +62,4 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
@@ -21,13 +21,7 @@
|
||||
{{ yields }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-rating
|
||||
class="mr-2 align-end static"
|
||||
color="secondary darken-1"
|
||||
background-color="secondary lighten-3"
|
||||
length="5"
|
||||
:value="rating"
|
||||
></v-rating>
|
||||
<Rating :value="rating" :name="name" :slug="slug" />
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="4" lg="4">
|
||||
@@ -56,11 +50,7 @@
|
||||
<Assets :value="assets" :edit="false" :slug="slug" />
|
||||
</div>
|
||||
</v-col>
|
||||
<v-divider
|
||||
v-if="medium"
|
||||
class="my-divider"
|
||||
:vertical="true"
|
||||
></v-divider>
|
||||
<v-divider v-if="medium" class="my-divider" :vertical="true"></v-divider>
|
||||
|
||||
<v-col cols="12" sm="12" md="8" lg="8">
|
||||
<Instructions :value="instructions" :edit="false" />
|
||||
@@ -100,6 +90,7 @@ import Nutrition from "@/components/Recipe/Parts/Nutrition";
|
||||
import VueMarkdown from "@adapttive/vue-markdown";
|
||||
import utils from "@/utils";
|
||||
import RecipeChips from "./RecipeChips";
|
||||
import Rating from "@/components/Recipe/Parts/Rating";
|
||||
import Notes from "@/components/Recipe/Parts/Notes";
|
||||
import Ingredients from "@/components/Recipe/Parts/Ingredients";
|
||||
import Instructions from "@/components/Recipe/Parts/Instructions.vue";
|
||||
@@ -113,6 +104,7 @@ export default {
|
||||
Nutrition,
|
||||
Instructions,
|
||||
Assets,
|
||||
Rating,
|
||||
},
|
||||
props: {
|
||||
name: String,
|
||||
@@ -154,4 +146,4 @@ export default {
|
||||
.my-divider {
|
||||
margin: 0 -1px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user