mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-03 04:25:24 +02:00
fix missed commits
This commit is contained in:
hay-kot
parent
61e0a52100
commit
861020ffe0
9 changed files with 885 additions and 0 deletions
160
frontend/src/components/Recipe/Parts/Assets.vue
Normal file
160
frontend/src/components/Recipe/Parts/Assets.vue
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
<template>
|
||||
<div v-if="value.length > 0 || edit">
|
||||
<v-card class="mt-2">
|
||||
<v-card-title class="py-2">
|
||||
{{ $t("recipe.assets") }}
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-list :flat="!edit" v-if="value.length > 0">
|
||||
<v-list-item v-for="(item, i) in value" :key="i">
|
||||
<v-list-item-icon class="ma-auto">
|
||||
<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-content>
|
||||
<v-list-item-action>
|
||||
<v-btn
|
||||
v-if="!edit"
|
||||
color="primary"
|
||||
icon
|
||||
:href="`/api/recipes/${slug}/asset?file_name=${item.fileName}`"
|
||||
target="_blank"
|
||||
top
|
||||
>
|
||||
<v-icon> mdi-download</v-icon>
|
||||
</v-btn>
|
||||
<v-btn v-else color="error" icon @click="deleteAsset(i)" top>
|
||||
<v-icon>mdi-delete</v-icon>
|
||||
</v-btn>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
<div class="d-flex ml-auto mt-2">
|
||||
<v-spacer></v-spacer>
|
||||
<base-dialog
|
||||
@submit="addAsset"
|
||||
title="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>
|
||||
<div class="d-flex justify-space-between">
|
||||
<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">
|
||||
{{ item }}
|
||||
</v-icon>
|
||||
</v-list-item-avatar>
|
||||
{{ item }}
|
||||
</template>
|
||||
</v-select>
|
||||
<TheUploadBtn
|
||||
@uploaded="setFileObject"
|
||||
:post="false"
|
||||
file-name="file"
|
||||
:text-btn="false"
|
||||
/>
|
||||
</div>
|
||||
{{ fileObject.name }}
|
||||
</v-card-text>
|
||||
</base-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
|
||||
import BaseDialog from "@/components/UI/Dialogs/BaseDialog";
|
||||
import { api } from "@/api";
|
||||
export default {
|
||||
components: {
|
||||
BaseDialog,
|
||||
TheUploadBtn,
|
||||
},
|
||||
props: {
|
||||
slug: String,
|
||||
value: {
|
||||
type: Array,
|
||||
},
|
||||
edit: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fileObject: {},
|
||||
newAsset: {
|
||||
name: "",
|
||||
icon: "mdi-file",
|
||||
},
|
||||
iconOptions: [
|
||||
"mdi-file",
|
||||
"mdi-file-pdf-box",
|
||||
"mdi-file-image",
|
||||
"mdi-code-json",
|
||||
"mdi-silverware-fork-knife",
|
||||
],
|
||||
menu: [
|
||||
{
|
||||
title: "Link 1",
|
||||
icon: "mdi-file",
|
||||
action: "Do Something",
|
||||
},
|
||||
{
|
||||
title: "Link 1",
|
||||
icon: "mdi-file",
|
||||
action: "Do Something",
|
||||
},
|
||||
{
|
||||
title: "Link 1",
|
||||
icon: "mdi-file",
|
||||
action: "Do Something",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setFileObject(obj) {
|
||||
this.fileObject = obj;
|
||||
},
|
||||
async addAsset() {
|
||||
const serverAsset = await api.recipes.createAsset(
|
||||
this.slug,
|
||||
this.fileObject,
|
||||
this.newAsset.name,
|
||||
this.newAsset.icon
|
||||
);
|
||||
this.value.push(serverAsset.data);
|
||||
this.newAsset = { name: "", icon: "mdi-file" };
|
||||
},
|
||||
deleteAsset(index) {
|
||||
this.value.splice(index, 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
64
frontend/src/components/Recipe/Parts/Helpers/BulkAdd.vue
Normal file
64
frontend/src/components/Recipe/Parts/Helpers/BulkAdd.vue
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<v-card>
|
||||
<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')}}
|
||||
</p>
|
||||
<v-textarea v-model="inputText"> </v-textarea>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="success" text @click="save"> {{$t('general.save')}} </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
inputText: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
splitText() {
|
||||
let split = this.inputText.split("\n");
|
||||
|
||||
split.forEach((element, index) => {
|
||||
if ((element === "\n") | (element == false)) {
|
||||
split.splice(index, 1);
|
||||
}
|
||||
});
|
||||
|
||||
return split;
|
||||
},
|
||||
save() {
|
||||
this.$emit("bulk-data", this.splitText());
|
||||
this.dialog = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
104
frontend/src/components/Recipe/Parts/Helpers/ExtrasEditor.vue
Normal file
104
frontend/src/components/Recipe/Parts/Helpers/ExtrasEditor.vue
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<div class="text-center">
|
||||
<v-dialog v-model="dialog" width="700">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn color="accent" dark v-bind="attrs" v-on="on"> {{ $t("recipe.api-extras") }} </v-btn>
|
||||
</template>
|
||||
|
||||
<v-card>
|
||||
<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-col cols="12" sm="1">
|
||||
<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-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-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-card-actions>
|
||||
<v-form ref="addKey">
|
||||
<v-text-field
|
||||
:label="$t('recipe.new-key-name')"
|
||||
v-model="newKeyName"
|
||||
class="pr-4"
|
||||
:rules="[rules.required, rules.whiteSpace]"
|
||||
></v-text-field>
|
||||
</v-form>
|
||||
<v-btn color="info" text @click="append"> {{ $t("recipe.add-key") }} </v-btn>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn color="success" text @click="save"> {{ $t("general.save") }} </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
extras: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
newKeyName: null,
|
||||
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"),
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
save() {
|
||||
this.$emit("save", this.extras);
|
||||
this.dialog = false;
|
||||
},
|
||||
append() {
|
||||
if (this.$refs.addKey.validate()) {
|
||||
this.extras[this.newKeyName] = "value";
|
||||
this.formKey += 1;
|
||||
}
|
||||
},
|
||||
removeExtra(key) {
|
||||
delete this.extras[key];
|
||||
this.formKey += 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<div class="text-center">
|
||||
<v-menu offset-y top nudge-top="6" :close-on-content-click="false">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn color="accent" dark v-bind="attrs" v-on="on">
|
||||
<v-icon left>
|
||||
mdi-image
|
||||
</v-icon>
|
||||
{{ $t("recipe.image") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card width="400">
|
||||
<v-card-title class="headline flex mb-0">
|
||||
<div>
|
||||
{{ $t("recipe.recipe-image") }}
|
||||
</div>
|
||||
<TheUploadBtn
|
||||
class="ml-auto"
|
||||
url="none"
|
||||
file-name="image"
|
||||
:text-btn="false"
|
||||
@uploaded="uploadImage"
|
||||
:post="false"
|
||||
/>
|
||||
</v-card-title>
|
||||
<v-card-text class="mt-n5">
|
||||
<div>
|
||||
<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"
|
||||
>
|
||||
{{ $t("general.get") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const REFRESH_EVENT = "refresh";
|
||||
const UPLOAD_EVENT = "upload";
|
||||
import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
|
||||
import { api } from "@/api";
|
||||
export default {
|
||||
components: {
|
||||
TheUploadBtn,
|
||||
},
|
||||
props: {
|
||||
slug: String,
|
||||
},
|
||||
data: () => ({
|
||||
url: "",
|
||||
loading: false,
|
||||
}),
|
||||
methods: {
|
||||
uploadImage(fileObject) {
|
||||
this.$emit(UPLOAD_EVENT, fileObject);
|
||||
},
|
||||
async getImageFromURL() {
|
||||
this.loading = true;
|
||||
const response = await api.recipes.updateImagebyURL(this.slug, this.url);
|
||||
if (response) this.$emit(REFRESH_EVENT);
|
||||
this.loading = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
137
frontend/src/components/Recipe/Parts/Ingredients.vue
Normal file
137
frontend/src/components/Recipe/Parts/Ingredients.vue
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<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"
|
||||
>
|
||||
<transition-group type="transition" :name="!drag ? 'flip-list' : null">
|
||||
<div
|
||||
v-for="(ingredient, index) in value"
|
||||
:key="generateKey('ingredient', index)"
|
||||
>
|
||||
<v-row align="center">
|
||||
<v-textarea
|
||||
class="mr-2"
|
||||
:label="$t('recipe.ingredient')"
|
||||
v-model="value[index]"
|
||||
mdi-move-resize
|
||||
auto-grow
|
||||
solo
|
||||
dense
|
||||
rows="1"
|
||||
>
|
||||
<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)"
|
||||
>
|
||||
mdi-delete
|
||||
</v-icon>
|
||||
</v-textarea>
|
||||
</v-row>
|
||||
</div>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
|
||||
<div class="d-flex row justify-end">
|
||||
<BulkAdd @bulk-data="addIngredient" class="mr-2" />
|
||||
<v-btn color="secondary" dark @click="addIngredient" class="mr-4">
|
||||
<v-icon>mdi-plus</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-list-item
|
||||
dense
|
||||
v-for="(ingredient, index) in value"
|
||||
: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-list-item-content>
|
||||
<vue-markdown
|
||||
class="ma-0 pa-0 text-subtitle-1 dense-markdown"
|
||||
:source="ingredient"
|
||||
>
|
||||
</vue-markdown>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BulkAdd from "@/components/Recipe/Parts/Helpers/BulkAdd";
|
||||
import VueMarkdown from "@adapttive/vue-markdown";
|
||||
import draggable from "vuedraggable";
|
||||
import utils from "@/utils";
|
||||
export default {
|
||||
components: {
|
||||
BulkAdd,
|
||||
draggable,
|
||||
VueMarkdown,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
},
|
||||
|
||||
edit: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
drag: false,
|
||||
checked: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.checked = this.value.map(() => false);
|
||||
},
|
||||
methods: {
|
||||
addIngredient(ingredients = null) {
|
||||
if (ingredients.length) {
|
||||
this.value.push(...ingredients);
|
||||
} else {
|
||||
this.value.push("");
|
||||
}
|
||||
},
|
||||
generateKey(item, index) {
|
||||
return utils.generateUniqueKey(item, index);
|
||||
},
|
||||
updateIndex(data) {
|
||||
this.$emit("input", data);
|
||||
},
|
||||
toggleChecked(index) {
|
||||
this.$set(this.checked, index, !this.checked[index]);
|
||||
},
|
||||
removeByIndex(list, index) {
|
||||
list.splice(index, 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style >
|
||||
.dense-markdown p {
|
||||
margin: auto !important;
|
||||
}
|
||||
</style>
|
||||
148
frontend/src/components/Recipe/Parts/Instructions.vue
Normal file
148
frontend/src/components/Recipe/Parts/Instructions.vue
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
<div>
|
||||
<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-toolbar-title class="headline" v-if="!edit">
|
||||
<v-app-bar-title v-text="step.title"> </v-app-bar-title>
|
||||
</v-toolbar-title>
|
||||
<v-text-field
|
||||
v-if="edit"
|
||||
class="headline pa-0 mt-5"
|
||||
v-model="step.title"
|
||||
dense
|
||||
solo
|
||||
flat
|
||||
placeholder="Section Title"
|
||||
background-color="primary"
|
||||
>
|
||||
</v-text-field>
|
||||
</v-app-bar>
|
||||
<v-hover v-slot="{ hover }">
|
||||
<v-card
|
||||
class="ma-1"
|
||||
:class="[{ 'on-hover': hover }, isDisabled(index)]"
|
||||
:elevation="hover ? 12 : 2"
|
||||
:ripple="!edit"
|
||||
@click="toggleDisabled(index)"
|
||||
>
|
||||
<v-card-title>
|
||||
<v-btn
|
||||
v-if="edit"
|
||||
fab
|
||||
x-small
|
||||
color="white"
|
||||
class="mr-2"
|
||||
elevation="0"
|
||||
@click="removeByIndex(value, index)"
|
||||
>
|
||||
<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-card-title>
|
||||
<v-card-text v-if="edit">
|
||||
<v-textarea
|
||||
auto-grow
|
||||
dense
|
||||
v-model="value[index]['text']"
|
||||
:key="generateKey('instructions', index)"
|
||||
rows="4"
|
||||
>
|
||||
</v-textarea>
|
||||
</v-card-text>
|
||||
<v-card-text v-else>
|
||||
<vue-markdown :source="step.text"> </vue-markdown>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueMarkdown from "@adapttive/vue-markdown";
|
||||
import utils from "@/utils";
|
||||
export default {
|
||||
components: {
|
||||
VueMarkdown,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
},
|
||||
|
||||
edit: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
disabledSteps: [],
|
||||
showTitleEditor: [],
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.showTitleEditor = this.value.map(x => this.validateTitle(x.title));
|
||||
},
|
||||
methods: {
|
||||
generateKey(item, index) {
|
||||
return utils.generateUniqueKey(item, index);
|
||||
},
|
||||
removeByIndex(list, index) {
|
||||
list.splice(index, 1);
|
||||
},
|
||||
validateTitle(title) {
|
||||
return !(title === null || title === "");
|
||||
},
|
||||
toggleDisabled(stepIndex) {
|
||||
if (this.edit) return;
|
||||
if (this.disabledSteps.includes(stepIndex)) {
|
||||
let index = this.disabledSteps.indexOf(stepIndex);
|
||||
if (index !== -1) {
|
||||
this.disabledSteps.splice(index, 1);
|
||||
}
|
||||
} else {
|
||||
this.disabledSteps.push(stepIndex);
|
||||
}
|
||||
},
|
||||
isDisabled(stepIndex) {
|
||||
if (this.disabledSteps.includes(stepIndex) && !this.edit) {
|
||||
return "disabled-card";
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
toggleShowTitle(index) {
|
||||
const newVal = !this.showTitleEditor[index];
|
||||
if (!newVal) {
|
||||
this.value[index].title = "";
|
||||
}
|
||||
this.$set(this.showTitleEditor, index, newVal);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
87
frontend/src/components/Recipe/Parts/Notes.vue
Normal file
87
frontend/src/components/Recipe/Parts/Notes.vue
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<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)"
|
||||
>
|
||||
<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-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-row>
|
||||
|
||||
<v-textarea
|
||||
auto-grow
|
||||
:placeholder="$t('recipe.note')"
|
||||
v-model="value[index]['text']"
|
||||
>
|
||||
</v-textarea>
|
||||
</v-card-text>
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-card-title class="py-2">
|
||||
{{ note.title }}
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card-text>
|
||||
<vue-markdown :source="note.text"> </vue-markdown>
|
||||
</v-card-text>
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
<div class="d-flex justify-end" v-if="edit">
|
||||
<v-btn class="mt-1" color="secondary" dark @click="addNote">
|
||||
<v-icon>mdi-plus</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueMarkdown from "@adapttive/vue-markdown";
|
||||
import utils from "@/utils";
|
||||
export default {
|
||||
components: {
|
||||
VueMarkdown,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
},
|
||||
|
||||
edit: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
generateKey(item, index) {
|
||||
return utils.generateUniqueKey(item, index);
|
||||
},
|
||||
addNote() {
|
||||
this.value.push({ text: "" });
|
||||
},
|
||||
removeByIndex(list, index) {
|
||||
list.splice(index, 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
101
frontend/src/components/Recipe/Parts/Nutrition.vue
Normal file
101
frontend/src/components/Recipe/Parts/Nutrition.vue
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<template>
|
||||
<div v-if="valueNotNull || edit">
|
||||
<v-card class="mt-2">
|
||||
<v-card-title class="py-2">
|
||||
{{ $t("recipe.nutrition") }}
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card-text v-if="edit">
|
||||
<div v-for="(item, key, index) in value" :key="index">
|
||||
<v-text-field
|
||||
dense
|
||||
:value="value[key]"
|
||||
:label="labels[key].label"
|
||||
:suffix="labels[key].suffix"
|
||||
type="number"
|
||||
autocomplete="off"
|
||||
@input="updateValue(key, $event)"
|
||||
></v-text-field>
|
||||
</div>
|
||||
</v-card-text>
|
||||
<v-list dense v-if="showViewer" class="mt-0 pt-0">
|
||||
<v-list-item v-for="(item, key, index) in labels" :key="index">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="pl-4 text-subtitle-1 flex row ">
|
||||
<div>{{ item.label }}</div>
|
||||
<div class="ml-auto mr-1">{{ value[key] }}</div>
|
||||
<div>{{ item.suffix }}</div>
|
||||
</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {},
|
||||
edit: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labels: {
|
||||
calories: {
|
||||
label: this.$t("recipe.calories"),
|
||||
suffix: this.$t("recipe.calories-suffix"),
|
||||
},
|
||||
fatContent: {
|
||||
label: this.$t("recipe.fat-content"),
|
||||
suffix: this.$t("recipe.grams"),
|
||||
},
|
||||
fiberContent: {
|
||||
label: this.$t("recipe.fiber-content"),
|
||||
suffix: this.$t("recipe.grams"),
|
||||
},
|
||||
proteinContent: {
|
||||
label: this.$t("recipe.protein-content"),
|
||||
suffix: this.$t("recipe.grams"),
|
||||
},
|
||||
sodiumContent: {
|
||||
label: this.$t("recipe.sodium-content"),
|
||||
suffix: this.$t("recipe.milligrams"),
|
||||
},
|
||||
sugarContent: {
|
||||
label: this.$t("recipe.sugar-content"),
|
||||
suffix: this.$t("recipe.grams"),
|
||||
},
|
||||
carbohydrateContent: {
|
||||
label: this.$t("recipe.carbohydrate-content"),
|
||||
suffix: this.$t("recipe.grams"),
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
showViewer() {
|
||||
return !this.edit && this.valueNotNull;
|
||||
},
|
||||
valueNotNull() {
|
||||
for (const property in this.value) {
|
||||
const valueProperty = this.value[property];
|
||||
if (valueProperty && valueProperty !== "") return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateValue(key, value) {
|
||||
this.$emit("input", { ...this.value, [key]: value });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue