Mirrors/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2026-03-22 13:52:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

feature/recipe-patch-improvements (#382)

Browse Source 
* 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
2021-05-01 20:46:02 -08:00
committed by GitHub
parent c196445e61
commit be378cb20c
121 changed files with 18942 additions and 4765 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/FormHelpers/CategoryTagSelector.vue
View File

@@ -31,11 +31,7 @@
</v-chip>
</template>
<template v-slot:append-outer="">
<NewCategoryTagDialog
v-if="showAdd"
:tag-dialog="tagSelector"
@created-item="pushToItem"
/>
<NewCategoryTagDialog v-if="showAdd" :tag-dialog="tagSelector" @created-item="pushToItem" />
</template>
</v-autocomplete>
</template>
@@ -90,7 +86,7 @@ export default {
computed: {
inputLabel() {
if (!this.showLabel) return null;
return this.tagSelector ? this.$t('tag.tags') : this.$t('recipe.categories');
return this.tagSelector ? this.$t("tag.tags") : this.$t("recipe.categories");
},
activeItems() {
let ItemObjects = [];
@@ -125,5 +121,4 @@ export default {
};
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>

27
frontend/src/components/FormHelpers/ColorPickerDialog.vue
View File

@@ -3,21 +3,9 @@
<div class="text-center">
<h3>{{ buttonText }}</h3>
</div>
<v-text-field
v-model="color"
hide-details
class="ma-0 pa-0"
solo
v-show="$vuetify.breakpoint.mdAndUp"
>
<v-text-field v-model="color" hide-details class="ma-0 pa-0" solo v-show="$vuetify.breakpoint.mdAndUp">
<template v-slot:append>
<v-menu
v-model="menu"
top
nudge-bottom="105"
nudge-left="16"
:close-on-content-click="false"
>
<v-menu v-model="menu" top nudge-bottom="105" nudge-left="16" :close-on-content-click="false">
<template v-slot:activator="{ on }">
<div :style="swatchStyle" v-on="on" swatches-max-height="300" />
</template>
@@ -30,13 +18,7 @@
</template>
</v-text-field>
<div class="text-center" v-show="$vuetify.breakpoint.smAndDown">
<v-menu
v-model="menu"
top
nudge-bottom="105"
nudge-left="16"
:close-on-content-click="false"
>
<v-menu v-model="menu" top nudge-bottom="105" nudge-left="16" :close-on-content-click="false">
<template v-slot:activator="{ on, attrs }">
<v-chip label :color="`${color}`" dark v-bind="attrs" v-on="on">
{{ color }}
@@ -88,5 +70,4 @@ export default {
};
</script>
<style>
</style>
<style></style>

12
frontend/src/components/FormHelpers/DatePicker.vue
View File

@@ -1,8 +1,5 @@
<template>
<v-date-picker
:first-day-of-week="firstDayOfWeek"
v-on="$listeners"
></v-date-picker>
<v-date-picker :first-day-of-week="firstDayOfWeek" v-on="$listeners"></v-date-picker>
</template>
<script>
@@ -11,7 +8,7 @@ import { api } from "@/api";
export default {
data() {
return {
firstDayOfWeek: 0,
firstDayOfWeek: 0,
};
},
mounted() {
@@ -24,8 +21,7 @@ export default {
this.firstDayOfWeek = settings.firstDayOfWeek;
},
},
}
};
</script>
<style>
</style>
<style></style>

2
frontend/src/components/FormHelpers/LanguageSelector.vue
View File

@@ -45,4 +45,4 @@ export default {
},
},
};
</script>
</script>

18
frontend/src/components/FormHelpers/TimePickerDialog.vue
View File

@@ -1,11 +1,5 @@
<template>
<v-dialog
ref="dialog"
v-model="modal2"
:return-value.sync="time"
persistent
width="290px"
>
<v-dialog ref="dialog" v-model="modal2" :return-value.sync="time" persistent width="290px">
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="time"
@@ -18,8 +12,8 @@
</template>
<v-time-picker v-if="modal2" v-model="time" full-width>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="modal2 = false"> {{$t('general.cancel')}} </v-btn>
<v-btn text color="primary" @click="saveTime"> {{$t('general.ok')}} </v-btn>
<v-btn text color="primary" @click="modal2 = false"> {{ $t("general.cancel") }} </v-btn>
<v-btn text color="primary" @click="saveTime"> {{ $t("general.ok") }} </v-btn>
</v-time-picker>
</v-dialog>
</template>
@@ -42,7 +36,7 @@ export default {
</script>
<style scoped>
.v-text-field{
max-width: 300px;
.v-text-field {
max-width: 300px;
}
</style>
</style>

3
frontend/src/components/ImportSummaryDialog/DataTable.vue
View File

@@ -43,5 +43,4 @@ export default {
};
</script>
<style>
</style>
<style></style>

32
frontend/src/components/ImportSummaryDialog/index.vue
View File

@@ -63,34 +63,30 @@ export default {
}),
computed: {
importHeaders() {
return [
{
text: this.$t('general.status'),
text: this.$t("general.status"),
value: "status",
},
{
text: this.$t('general.name'),
text: this.$t("general.name"),
align: "start",
sortable: true,
value: "name",
},
{
text: this.$t('general.exception'),
value: "data-table-expand",
align: "center"
{
text: this.$t("general.exception"),
value: "data-table-expand",
align: "center",
},
]
];
},
recipeNumbers() {
return this.calculateNumbers(this.$t("general.recipes"), this.recipeData);
},
settingsNumbers() {
return this.calculateNumbers(
this.$t("general.settings"),
this.settingsData
);
return this.calculateNumbers(this.$t("general.settings"), this.settingsData);
},
themeNumbers() {
return this.calculateNumbers(this.$t("general.themes"), this.themeData);
@@ -115,14 +111,7 @@ export default {
];
},
allTables() {
return [
this.recipeData,
this.themeData,
this.settingsData,
this.pageData,
this.userData,
this.groupData,
];
return [this.recipeData, this.themeData, this.settingsData, this.pageData, this.userData, this.groupData];
},
},
@@ -150,5 +139,4 @@ export default {
};
</script>
<style>
</style>
<style></style>

3
frontend/src/components/Login/LoginDialog.vue
View File

@@ -25,5 +25,4 @@ export default {
};
</script>
<style>
</style>
<style></style>

18
frontend/src/components/Login/LoginForm.vue
View File

@@ -5,14 +5,7 @@
<v-icon large left v-if="!loading">
mdi-account
</v-icon>
<v-progress-circular
v-else
indeterminate
color="white"
large
class="mr-2"
>
</v-progress-circular>
<v-progress-circular v-else indeterminate color="white" large class="mr-2"> </v-progress-circular>
<v-toolbar-title class="headline">{{ $t("user.login") }}</v-toolbar-title>
<v-spacer></v-spacer>
</v-app-bar>
@@ -42,11 +35,7 @@
@click:append="showPassword = !showPassword"
></v-text-field>
<v-card-actions>
<v-btn
v-if="options.isLoggingIn"
color="primary"
block="block"
type="submit"
<v-btn v-if="options.isLoggingIn" color="primary" block="block" type="submit"
>{{ $t("user.sign-in") }}
</v-btn>
</v-card-actions>
@@ -108,5 +97,4 @@ export default {
};
</script>
<style>
</style>
<style></style>

38
frontend/src/components/Login/SignUpForm.vue
View File

@@ -5,21 +5,14 @@
<v-icon large left v-if="!loading">
mdi-account
</v-icon>
<v-progress-circular
v-else
indeterminate
color="white"
large
class="mr-2"
>
</v-progress-circular>
<v-toolbar-title class="headline">
{{$t('signup.sign-up')}}
<v-progress-circular v-else indeterminate color="white" large class="mr-2"> </v-progress-circular>
<v-toolbar-title class="headline">
{{ $t("signup.sign-up") }}
</v-toolbar-title>
<v-spacer></v-spacer>
</v-app-bar>
<v-card-text>
{{$t('signup.welcome-to-mealie')}}
{{ $t("signup.welcome-to-mealie") }}
<v-divider class="mt-3"></v-divider>
<v-form ref="signUpForm" @submit.prevent="signUp">
<v-text-field
@@ -58,24 +51,16 @@
:label="$t('user.password')"
:type="showPassword ? 'text' : 'password'"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
:rules="[
user.password === user.passwordConfirm || $t('user.password-must-match'),
]"
:rules="[user.password === user.passwordConfirm || $t('user.password-must-match')]"
@click:append="showPassword = !showPassword"
></v-text-field>
<v-card-actions>
<v-btn
v-if="options.isLoggingIn"
dark
color="primary"
block="block"
type="submit"
>
{{$t('signup.sign-up')}}
<v-btn v-if="options.isLoggingIn" dark color="primary" block="block" type="submit">
{{ $t("signup.sign-up") }}
</v-btn>
</v-card-actions>
<v-alert dense v-if="error" outlined class="mt-3 mb-0" type="error">
{{$t('signup.error-signing-up')}}
{{ $t("signup.error-signing-up") }}
</v-alert>
</v-form>
</v-card-text>
@@ -138,14 +123,11 @@ export default {
this.$router.push("/");
}
}
this.loading = false;
},
},
};
</script>
<style>
</style>
<style></style>

19
frontend/src/components/MealPlan/MealPlanCard.vue
View File

@@ -1,22 +1,10 @@
<template>
<v-row>
<SearchDialog ref="mealselect" @select="setSlug" />
<v-col
cols="12"
sm="12"
md="6"
lg="4"
xl="3"
v-for="(meal, index) in value"
:key="index"
>
<v-col cols="12" sm="12" md="6" lg="4" xl="3" v-for="(meal, index) in value" :key="index">
<v-hover v-slot="{ hover }" :open-delay="50">
<v-card :class="{ 'on-hover': hover }" :elevation="hover ? 12 : 2">
<v-img
height="200"
:src="getImage(meal.slug)"
@click="openSearch(index)"
></v-img>
<v-img height="200" :src="getImage(meal.slug)" @click="openSearch(index)"></v-img>
<v-card-title class="my-n3 mb-n6">
{{ $d(new Date(meal.date.split("-")), "short") }}
</v-card-title>
@@ -63,5 +51,4 @@ export default {
};
</script>
<style>
</style>
<style></style>

3
frontend/src/components/MealPlan/MealPlanEditor.vue
View File

@@ -44,5 +44,4 @@ export default {
};
</script>
<style>
</style>
<style></style>

23
frontend/src/components/MealPlan/MealPlanNew.vue
View File

@@ -180,9 +180,7 @@ export default {
});
},
processTime(index) {
let dateText = new Date(
this.actualStartDate.valueOf() + 1000 * 3600 * 24 * index
);
let dateText = new Date(this.actualStartDate.valueOf() + 1000 * 3600 * 24 * index);
return dateText;
},
getDate(index) {
@@ -215,22 +213,10 @@ export default {
return this.$d(date);
},
getNextDayOfTheWeek(dayName, excludeToday = true, refDate = new Date()) {
const dayOfWeek = [
"sun",
"mon",
"tue",
"wed",
"thu",
"fri",
"sat",
].indexOf(dayName.slice(0, 3).toLowerCase());
const dayOfWeek = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"].indexOf(dayName.slice(0, 3).toLowerCase());
if (dayOfWeek < 0) return;
refDate.setUTCHours(0, 0, 0, 0);
refDate.setDate(
refDate.getDate() +
+!!excludeToday +
((dayOfWeek + 7 - refDate.getDay() - +!!excludeToday) % 7)
);
refDate.setDate(refDate.getDate() + +!!excludeToday + ((dayOfWeek + 7 - refDate.getDay() - +!!excludeToday) % 7));
return refDate;
},
setQuickWeek() {
@@ -245,5 +231,4 @@ export default {
};
</script>
<style>
</style>
<style></style>

21
frontend/src/components/MealPlan/ShoppingListDialog.vue
View File

@@ -3,28 +3,21 @@
<v-dialog v-model="dialog" width="650">
<v-card>
<v-card-title class="headline">
{{$t('meal-plan.shopping-list')}}
{{ $t("meal-plan.shopping-list") }}
<v-spacer></v-spacer>
<v-btn text color="accent" @click="group = !group">
{{$t('meal-plan.group')}}
{{ $t("meal-plan.group") }}
</v-btn>
</v-card-title>
<v-divider></v-divider>
<v-card-text v-if="group == false">
<v-list
dense
v-for="(recipe, index) in ingredients"
:key="`${index}-recipe`"
>
<v-list dense v-for="(recipe, index) in ingredients" :key="`${index}-recipe`">
<v-subheader>{{ recipe.name }} </v-subheader>
<v-divider></v-divider>
<v-list-item-group color="primary">
<v-list-item
v-for="(item, i) in recipe.recipe_ingredient"
:key="i"
>
<v-list-item v-for="(item, i) in recipe.recipe_ingredient" :key="i">
<v-list-item-content>
<v-list-item-title v-text="item"></v-list-item-title>
</v-list-item-content>
@@ -104,8 +97,4 @@ export default {
};
</script>
<style>
</style>
<style></style>

151
frontend/src/components/Recipe/ContextMenu.vue Normal file
View 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>

12
frontend/src/components/Recipe/EditorButtonRow.vue
View File

@@ -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>

29
frontend/src/components/Recipe/MobileRecipeCard.vue
View File

@@ -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>

43
frontend/src/components/Recipe/Parts/Assets.vue
View File

@@ -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>

19
frontend/src/components/Recipe/Parts/Helpers/BulkAdd.vue
View File

@@ -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>

33
frontend/src/components/Recipe/Parts/Helpers/ExtrasEditor.vue
View File

@@ -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>

17
frontend/src/components/Recipe/Parts/Helpers/ImageUploadBtn.vue
View File

@@ -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>

19
frontend/src/components/Recipe/Parts/Helpers/SettingsMenu.vue
View File

@@ -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>

38
frontend/src/components/Recipe/Parts/Ingredients.vue
View File

@@ -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>

23
frontend/src/components/Recipe/Parts/Instructions.vue
View File

@@ -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>

30
frontend/src/components/Recipe/Parts/Notes.vue
View File

@@ -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>

3
frontend/src/components/Recipe/Parts/Nutrition.vue
View File

@@ -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
View 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>

31
frontend/src/components/Recipe/RecipeCard.vue
View File

@@ -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>

71
frontend/src/components/Recipe/RecipeEditor/index.vue
View File

@@ -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>

53
frontend/src/components/Recipe/RecipePrint.vue
View File

@@ -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>

24
frontend/src/components/Recipe/RecipeTimeCard.vue
View File

@@ -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>

3
frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue
View File

@@ -62,5 +62,4 @@ export default {
};
</script>
<style>
</style>
<style></style>

18
frontend/src/components/Recipe/RecipeViewer/index.vue
View File

@@ -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>

3
frontend/src/components/UI/Buttons/TheDownloadBtn.vue
View File

@@ -47,5 +47,4 @@ export default {
};
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>

12
frontend/src/components/UI/Buttons/TheUploadBtn.vue
View File

@@ -1,12 +1,7 @@
<template>
<v-form ref="file">
<input ref="uploader" class="d-none" type="file" @change="onFileChanged" />
<v-btn
:loading="isSelecting"
@click="onButtonClick"
color="accent"
:text="textBtn"
>
<v-btn :loading="isSelecting" @click="onButtonClick" color="accent" :text="textBtn">
<v-icon left> {{ icon }}</v-icon>
{{ text ? text : defaultText }}
</v-btn>
@@ -55,7 +50,7 @@ export default {
let formData = new FormData();
formData.append(this.fileName, this.file);
if(await api.utils.uploadFile(this.url, formData)) {
if (await api.utils.uploadFile(this.url, formData)) {
this.$emit(UPLOAD_EVENT);
}
this.isSelecting = false;
@@ -81,5 +76,4 @@ export default {
};
</script>
<style>
</style>
<style></style>

24
frontend/src/components/UI/CardSection.vue
View File

@@ -22,14 +22,10 @@
</template>
<v-list>
<v-list-item @click="$emit('sort-recent')">
<v-list-item-title>{{
$t("general.recent")
}}</v-list-item-title>
<v-list-item-title>{{ $t("general.recent") }}</v-list-item-title>
</v-list-item>
<v-list-item @click="$emit('sort')">
<v-list-item-title>{{
$t("general.sort-alphabetically")
}}</v-list-item-title>
<v-list-item-title>{{ $t("general.sort-alphabetically") }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
@@ -39,14 +35,7 @@
</v-card>
<div v-if="recipes">
<v-row v-if="!viewScale">
<v-col
:sm="6"
:md="6"
:lg="4"
:xl="3"
v-for="recipe in recipes.slice(0, cardLimit)"
:key="recipe.name"
>
<v-col :sm="6" :md="6" :lg="4" :xl="3" v-for="recipe in recipes.slice(0, cardLimit)" :key="recipe.name">
<RecipeCard
:name="recipe.name"
:description="recipe.description"
@@ -148,10 +137,7 @@ export default {
},
methods: {
bumpList() {
const newCardLimit = Math.min(
this.cardLimit + 20,
this.effectiveHardLimit
);
const newCardLimit = Math.min(this.cardLimit + 20, this.effectiveHardLimit);
if (this.loading === false && newCardLimit > this.cardLimit) {
this.setLoader();
@@ -172,4 +158,4 @@ export default {
.transparent {
opacity: 1;
}
</style>
</style>

18
frontend/src/components/UI/Dialogs/BaseDialog.vue
View File

@@ -1,11 +1,7 @@
<template>
<div>
<slot name="open" v-bind="{ open }"> </slot>
<v-dialog
v-model="dialog"
:width="modalWidth + 'px'"
:content-class="top ? 'top-dialog' : undefined"
>
<v-dialog v-model="dialog" :width="modalWidth + 'px'" :content-class="top ? 'top-dialog' : undefined">
<v-card class="pb-10" height="100%">
<v-app-bar dark :color="color" class="mt-n1 mb-2">
<v-icon large left>
@@ -14,20 +10,16 @@
<v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
<v-spacer></v-spacer>
</v-app-bar>
<v-progress-linear
v-if="loading"
indeterminate
color="primary"
></v-progress-linear>
<v-progress-linear v-if="loading" indeterminate color="primary"></v-progress-linear>
<slot> </slot>
<v-card-actions>
<slot name="card-actions">
<v-btn text color="grey" @click="dialog = false">
{{$t('general.cancel')}}
{{ $t("general.cancel") }}
</v-btn>
<v-spacer></v-spacer>
<v-btn color="success" @click="submitEvent">
{{$t('general.submit')}}
{{ $t("general.submit") }}
</v-btn>
</slot>
</v-card-actions>
@@ -84,4 +76,4 @@ export default {
.top-dialog {
align-self: flex-start;
}
</style>
</style>

22
frontend/src/components/UI/Dialogs/ConfirmationDialog.vue
View File

@@ -1,4 +1,3 @@
<template>
<v-dialog
v-model="dialog"
@@ -7,17 +6,16 @@
@click:outside="cancel"
@keydown.esc="cancel"
>
<template v-slot:activator="{}">
<slot v-bind="{ open }"> </slot>
</template>
<v-card>
<v-app-bar v-if="Boolean(title)" :color="color" dense dark>
<v-app-bar v-if="Boolean(title)" :color="color" dense dark>
<v-icon v-if="Boolean(icon)" left> {{ icon }}</v-icon>
<v-toolbar-title v-text="title" />
</v-app-bar>
<v-card-text
v-show="!!message"
class="pa-4 text--primary"
v-html="message"
/>
<v-card-text v-show="!!message" class="pa-4 text--primary" v-html="message" />
<v-card-actions>
<v-spacer></v-spacer>
@@ -35,6 +33,7 @@
<script>
const CLOSE_EVENT = "close";
const OPEN_EVENT = "open";
const CONFIRM_EVENT = "confirm";
/**
* ConfirmationDialog Component used to add a second validaion step to an action.
* @version 1.0.1
@@ -96,13 +95,9 @@ export default {
dialog: false,
}),
methods: {
/**
* Sets the modal to be visiable.
*/
open() {
this.dialog = true;
},
/**
* Cancel button handler.
*/
@@ -129,7 +124,7 @@ export default {
* @event confirm
* @property {string} content content of the first prop passed to the event
*/
this.$emit("confirm");
this.$emit(CONFIRM_EVENT);
//Hide Modal
this.dialog = false;
@@ -138,5 +133,4 @@ export default {
};
</script>
<style>
</style>
<style></style>

10
frontend/src/components/UI/Dialogs/NewCategoryTagDialog.vue
View File

@@ -21,12 +21,7 @@
<v-card-title> </v-card-title>
<v-form @submit.prevent="select">
<v-card-text>
<v-text-field
dense
:label="inputLabel"
v-model="itemName"
:rules="[rules.required]"
></v-text-field>
<v-text-field dense :label="inputLabel" v-model="itemName" :rules="[rules.required]"></v-text-field>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
@@ -103,5 +98,4 @@ export default {
};
</script>
<style>
</style>
<style></style>

7
frontend/src/components/UI/Search/FuseSearchBar.vue
View File

@@ -61,9 +61,7 @@ export default {
try {
this.results = this.fuse.search(this.search.trim());
} catch {
this.results = this.rawData
.map(x => ({ item: x }))
.sort((a, b) => (a.name > b.name ? 1 : -1));
this.results = this.rawData.map(x => ({ item: x })).sort((a, b) => (a.name > b.name ? 1 : -1));
}
this.$emit(RESULTS_EVENT, this.results);
@@ -75,5 +73,4 @@ export default {
};
</script>
<style scoped>
</style>
<style scoped></style>

46
frontend/src/components/UI/Search/SearchBar.vue
View File

@@ -1,11 +1,5 @@
<template>
<v-menu
v-model="menuModel"
readonly
offset-y
offset-overflow
max-height="75vh"
>
<v-menu v-model="menuModel" readonly offset-y offset-overflow max-height="75vh">
<template #activator="{ attrs }">
<v-text-field
ref="searchInput"
@@ -33,12 +27,7 @@
</template>
</v-text-field>
</template>
<v-card
v-if="showResults"
max-height="75vh"
:max-width="maxWidth"
scrollable
>
<v-card v-if="showResults" max-height="75vh" :max-width="maxWidth" scrollable>
<v-card-text class="flex row mx-auto ">
<div class="mr-auto">
Results
@@ -56,22 +45,10 @@
<v-list-item-avatar>
<v-img :src="getImage(item.item.slug)"></v-img>
</v-list-item-avatar>
<v-list-item-content
@click="
showResults ? null : selected(item.item.slug, item.item.name)
"
>
<v-list-item-title v-html="highlight(item.item.name)">
</v-list-item-title>
<v-rating
dense
v-if="item.item.rating"
:value="item.item.rating"
size="12"
>
</v-rating>
<v-list-item-subtitle v-html="highlight(item.item.description)">
</v-list-item-subtitle>
<v-list-item-content @click="showResults ? null : selected(item.item.slug, item.item.name)">
<v-list-item-title v-html="highlight(item.item.name)"> </v-list-item-title>
<v-rating dense v-if="item.item.rating" :value="item.item.rating" size="12"> </v-rating>
<v-list-item-subtitle v-html="highlight(item.item.description)"> </v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
@@ -153,9 +130,7 @@ export default {
try {
this.result = this.fuse.search(this.search.trim());
} catch {
this.result = this.data
.map(x => ({ item: x }))
.sort((a, b) => (a.name > b.name ? 1 : -1));
this.result = this.data.map(x => ({ item: x })).sort((a, b) => (a.name > b.name ? 1 : -1));
}
this.$emit("results", this.result);
@@ -173,10 +148,7 @@ export default {
if (!this.search) {
return string;
}
return string.replace(
new RegExp(this.search, "gi"),
match => `<mark>${match}</mark>`
);
return string.replace(new RegExp(this.search, "gi"), match => `<mark>${match}</mark>`);
},
getImage(image) {
return api.recipes.recipeTinyImage(image);
@@ -221,4 +193,4 @@ export default {
&, & > *
display: flex
flex-direction: column
</style>
</style>

10
frontend/src/components/UI/Search/SearchDialog.vue
View File

@@ -1,12 +1,6 @@
<template>
<div class="text-center ">
<v-dialog
v-model="dialog"
width="600px"
height="0"
:fullscreen="isMobile"
content-class="top-dialog"
>
<v-dialog v-model="dialog" width="600px" height="0" :fullscreen="isMobile" content-class="top-dialog">
<v-card>
<v-app-bar dark color="primary lighten-1" rounded="0">
<SearchBar
@@ -103,4 +97,4 @@ export default {
.top-dialog {
align-self: flex-start;
}
</style>
</style>

15
frontend/src/components/UI/TheAppBar.vue
View File

@@ -1,15 +1,7 @@
<template>
<div>
<TheSidebar ref="theSidebar" />
<v-app-bar
clipped-left
dense
app
color="primary"
dark
class="d-print-none"
:bottom="isMobile"
>
<v-app-bar clipped-left dense app color="primary" dark class="d-print-none" :bottom="isMobile">
<v-btn icon @click="openSidebar">
<v-icon> mdi-menu </v-icon>
</v-btn>
@@ -36,7 +28,7 @@
<v-btn icon @click="$refs.recipeSearch.open()">
<v-icon> mdi-magnify </v-icon>
</v-btn>
<SearchDialog ref="recipeSearch"/>
<SearchDialog ref="recipeSearch" />
</div>
<TheSiteMenu />
@@ -90,5 +82,4 @@ export default {
};
</script>
<style scoped>
</style>
<style scoped></style>

28
frontend/src/components/UI/TheRecipeFab.vue
View File

@@ -6,14 +6,7 @@
<v-icon large left v-if="!processing">
mdi-link
</v-icon>
<v-progress-circular
v-else
indeterminate
color="white"
large
class="mr-2"
>
</v-progress-circular>
<v-progress-circular v-else indeterminate color="white" large class="mr-2"> </v-progress-circular>
<v-toolbar-title class="headline">
{{ $t("new-recipe.from-url") }}
@@ -54,21 +47,9 @@
</v-form>
</v-card>
</v-dialog>
<v-speed-dial
v-model="fab"
:open-on-hover="absolute"
:fixed="absolute"
:bottom="absolute"
:right="absolute"
>
<v-speed-dial v-model="fab" :open-on-hover="absolute" :fixed="absolute" :bottom="absolute" :right="absolute">
<template v-slot:activator>
<v-btn
v-model="fab"
:color="absolute ? 'accent' : 'white'"
dark
:icon="!absolute"
:fab="absolute"
>
<v-btn v-model="fab" :color="absolute ? 'accent' : 'white'" dark :icon="!absolute" :fab="absolute">
<v-icon> mdi-plus </v-icon>
</v-btn>
</template>
@@ -132,5 +113,4 @@ export default {
};
</script>
<style>
</style>
<style></style>

34
frontend/src/components/UI/TheSidebar.vue
View File

@@ -4,11 +4,7 @@
<template v-slot:prepend>
<v-list-item two-line v-if="isLoggedIn">
<v-list-item-avatar color="accent" class="white--text">
<img
:src="userProfileImage"
v-if="!hideImage"
@error="hideImage = true"
/>
<img :src="userProfileImage" v-if="!hideImage" @error="hideImage = true" />
<div v-else>
{{ initials }}
</div>
@@ -16,21 +12,14 @@
<v-list-item-content>
<v-list-item-title> {{ user.fullName }}</v-list-item-title>
<v-list-item-subtitle>
{{ user.admin ? "Admin" : "User" }}</v-list-item-subtitle
>
<v-list-item-subtitle> {{ user.admin ? "Admin" : "User" }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</template>
<v-divider></v-divider>
<v-list nav dense>
<v-list-item
v-for="nav in effectiveMenu"
:key="nav.title"
link
:to="nav.to"
>
<v-list-item v-for="nav in effectiveMenu" :key="nav.title" link :to="nav.to">
<v-list-item-icon>
<v-icon>{{ nav.icon }}</v-icon>
</v-list-item-icon>
@@ -228,15 +217,12 @@ export default {
this.showSidebar = false;
},
async getVersion() {
let response = await axios.get(
"https://api.github.com/repos/hay-kot/mealie/releases/latest",
{
headers: {
"content-type": "application/json",
Authorization: null,
},
}
);
let response = await axios.get("https://api.github.com/repos/hay-kot/mealie/releases/latest", {
headers: {
"content-type": "application/json",
Authorization: null,
},
});
this.latestVersion = response.data.tag_name;
},
@@ -250,4 +236,4 @@ export default {
bottom: 0 !important;
width: 100%;
}
</style>
</style>

16
frontend/src/components/UI/TheSiteMenu.vue
View File

@@ -1,15 +1,7 @@
<template>
<div class="text-center">
<LoginDialog ref="loginDialog" />
<v-menu
transition="slide-x-transition"
bottom
right
offset-y
offset-overflow
open-on-hover
close-delay="200"
>
<v-menu transition="slide-x-transition" bottom right offset-y offset-overflow open-on-hover close-delay="200">
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" icon>
<v-icon>mdi-account</v-icon>
@@ -49,7 +41,7 @@ export default {
return [
{
icon: "mdi-account",
title: this.$t('user.login'),
title: this.$t("user.login"),
restricted: false,
login: true,
},
@@ -83,7 +75,7 @@ export default {
nav: "/admin",
restricted: true,
},
]
];
},
filteredItems() {
if (this.loggedIn) {
@@ -108,4 +100,4 @@ export default {
.menu-text {
text-align: left !important;
}
</style>
</style>