mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +02:00
chore: make vue domain components localizable (#1532)
This commit is contained in:
Philipp Fischbeck
GitHub
parent
e5bf7bce17
commit
32244988d2
23 changed files with 254 additions and 144 deletions
|
|
@ -18,7 +18,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import { defineComponent, useContext } from "@nuxtjs/composition-api";
|
||||
import { parseISO, formatDistanceToNow } from "date-fns";
|
||||
import { GroupDataExport } from "~/types/api-types/group";
|
||||
export default defineComponent({
|
||||
|
|
@ -29,11 +29,13 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
setup() {
|
||||
const { i18n } = useContext();
|
||||
|
||||
const headers = [
|
||||
{ text: "Export", value: "name" },
|
||||
{ text: "File Name", value: "filename" },
|
||||
{ text: "Size", value: "size" },
|
||||
{ text: "Link Expires", value: "expires" },
|
||||
{ text: i18n.t("export.export"), value: "name" },
|
||||
{ text: i18n.t("export.file-name"), value: "filename" },
|
||||
{ text: i18n.t("export.size"), value: "size" },
|
||||
{ text: i18n.t("export.link-expires"), value: "expires" },
|
||||
{ text: "", value: "actions" },
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,42 +1,24 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="d-md-flex" style="gap: 10px">
|
||||
<v-select v-model="inputDay" :items="MEAL_DAY_OPTIONS" label="Rule Day"></v-select>
|
||||
<v-select v-model="inputEntryType" :items="MEAL_TYPE_OPTIONS" label="Meal Type"></v-select>
|
||||
<v-select v-model="inputDay" :items="MEAL_DAY_OPTIONS" :label="$t('meal-plan.rule-day')"></v-select>
|
||||
<v-select v-model="inputEntryType" :items="MEAL_TYPE_OPTIONS" :label="$t('meal-plan.meal-type')"></v-select>
|
||||
</div>
|
||||
|
||||
<RecipeOrganizerSelector v-model="inputCategories" selector-type="categories" />
|
||||
<RecipeOrganizerSelector v-model="inputTags" selector-type="tags" />
|
||||
|
||||
<!-- TODO Make this localizable -->
|
||||
{{ inputDay === "unset" ? "This rule will apply to all days" : `This rule applies on ${inputDay}s` }}
|
||||
{{ inputEntryType === "unset" ? "for all meal types" : ` and for ${inputEntryType} meal types` }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed } from "@nuxtjs/composition-api";
|
||||
import { defineComponent, computed, useContext } from "@nuxtjs/composition-api";
|
||||
import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
|
||||
import { RecipeTag, RecipeCategory } from "~/types/api-types/group";
|
||||
|
||||
const MEAL_TYPE_OPTIONS = [
|
||||
{ text: "Breakfast", value: "breakfast" },
|
||||
{ text: "Lunch", value: "lunch" },
|
||||
{ text: "Dinner", value: "dinner" },
|
||||
{ text: "Side", value: "side" },
|
||||
{ text: "Any", value: "unset" },
|
||||
];
|
||||
|
||||
const MEAL_DAY_OPTIONS = [
|
||||
{ text: "Monday", value: "monday" },
|
||||
{ text: "Tuesday", value: "tuesday" },
|
||||
{ text: "Wednesday", value: "wednesday" },
|
||||
{ text: "Thursday", value: "thursday" },
|
||||
{ text: "Friday", value: "friday" },
|
||||
{ text: "Sunday", value: "saturday" },
|
||||
{ text: "Sunday", value: "sunday" },
|
||||
{ text: "Any", value: "unset" },
|
||||
];
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
RecipeOrganizerSelector,
|
||||
|
|
@ -64,6 +46,27 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
const { i18n } = useContext();
|
||||
|
||||
const MEAL_TYPE_OPTIONS = [
|
||||
{ text: i18n.t("meal-plan.breakfast"), value: "breakfast" },
|
||||
{ text: i18n.t("meal-plan.lunch"), value: "lunch" },
|
||||
{ text: i18n.t("meal-plan.dinner"), value: "dinner" },
|
||||
{ text: i18n.t("meal-plan.side"), value: "side" },
|
||||
{ text: i18n.t("meal-plan.type-any"), value: "unset" },
|
||||
];
|
||||
|
||||
const MEAL_DAY_OPTIONS = [
|
||||
{ text: i18n.t("general.monday"), value: "monday" },
|
||||
{ text: i18n.t("general.tuesday"), value: "tuesday" },
|
||||
{ text: i18n.t("general.wednesday"), value: "wednesday" },
|
||||
{ text: i18n.t("general.thursday"), value: "thursday" },
|
||||
{ text: i18n.t("general.friday"), value: "friday" },
|
||||
{ text: i18n.t("general.saturday"), value: "saturday" },
|
||||
{ text: i18n.t("general.sunday"), value: "sunday" },
|
||||
{ text: i18n.t("meal-plan.day-any"), value: "unset" },
|
||||
];
|
||||
|
||||
const inputDay = computed({
|
||||
get: () => {
|
||||
return props.day;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-card-text>
|
||||
<v-switch v-model="webhookCopy.enabled" label="Enabled"></v-switch>
|
||||
<v-text-field v-model="webhookCopy.name" label="Webhook Name"></v-text-field>
|
||||
<v-text-field v-model="webhookCopy.url" label="Webhook Url"></v-text-field>
|
||||
<v-switch v-model="webhookCopy.enabled" label="$t('general.enabled')"></v-switch>
|
||||
<v-text-field v-model="webhookCopy.name" label="$t('settings.webhooks.webhook-name')"></v-text-field>
|
||||
<v-text-field v-model="webhookCopy.url" label="$t('settings.webhooks.webhook-url')"></v-text-field>
|
||||
<v-time-picker v-model="scheduledTime" class="elevation-2" ampm-in-title format="ampm"></v-time-picker>
|
||||
</v-card-text>
|
||||
<v-card-actions class="py-0 justify-end">
|
||||
|
|
@ -77,7 +77,7 @@ export default defineComponent({
|
|||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.$tc("settings.webhooks.webhooks"),
|
||||
title: this.$t("settings.webhooks.webhooks") as string,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
<v-icon> {{ $globals.icons.lock }} </v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span> Locked by Owner </span>
|
||||
<span> {{ $t("recipe.locked-by-owner") }} </span>
|
||||
</v-tooltip>
|
||||
|
||||
<ClientOnly>
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@ export default defineComponent({
|
|||
|
||||
async function addAsset() {
|
||||
if (!validFields()) {
|
||||
alert.error("Error Submitting Form");
|
||||
alert.error(i18n.t("asset.error-submitting-form") as string);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@
|
|||
v-if="!$vuetify.breakpoint.xsOnly"
|
||||
:items="[
|
||||
{
|
||||
title: 'Toggle View',
|
||||
title: $t('general.toggle-view'),
|
||||
icon: $globals.icons.eye,
|
||||
event: 'toggle-dense-view',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
outlined
|
||||
auto-grow
|
||||
rows="2"
|
||||
placeholder="Join the Conversation"
|
||||
:placeholder="$t('recipe.join-the-conversation')"
|
||||
>
|
||||
</v-textarea>
|
||||
</div>
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
x-small
|
||||
@click="deleteComment(comment.id)"
|
||||
>
|
||||
Delete
|
||||
{{ $t("general.delete") }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</BaseDialog>
|
||||
<BaseDialog
|
||||
v-model="mealplannerDialog"
|
||||
title="Add Recipe to Mealplan"
|
||||
:title="$t('recipe.add-recipe-to-mealplan')"
|
||||
color="primary"
|
||||
:icon="$globals.icons.calendar"
|
||||
@confirm="addRecipeToPlan()"
|
||||
|
|
@ -32,8 +32,8 @@
|
|||
<template #activator="{ on, attrs }">
|
||||
<v-text-field
|
||||
v-model="newMealdate"
|
||||
label="Date"
|
||||
hint="MM/DD/YYYY format"
|
||||
:label="$t('general.date')"
|
||||
:hint="$t('recipe.date-format-hint')"
|
||||
persistent-hint
|
||||
:prepend-icon="$globals.icons.calendar"
|
||||
v-bind="attrs"
|
||||
|
|
@ -43,10 +43,15 @@
|
|||
</template>
|
||||
<v-date-picker v-model="newMealdate" no-title @input="pickerMenu = false"></v-date-picker>
|
||||
</v-menu>
|
||||
<v-select v-model="newMealType" :return-object="false" :items="planTypeOptions" label="Entry Type"></v-select>
|
||||
<v-select
|
||||
v-model="newMealType"
|
||||
:return-object="false"
|
||||
:items="planTypeOptions"
|
||||
:label="$t('recipe.entry-type')"
|
||||
></v-select>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<BaseDialog v-model="shoppingListDialog" title="Add to List" :icon="$globals.icons.cartCheck">
|
||||
<BaseDialog v-model="shoppingListDialog" :title="$t('recipe.add-to-list')" :icon="$globals.icons.cartCheck">
|
||||
<v-card-text>
|
||||
<v-card
|
||||
v-for="list in shoppingLists"
|
||||
|
|
@ -213,13 +218,13 @@ export default defineComponent({
|
|||
event: "download",
|
||||
},
|
||||
mealplanner: {
|
||||
title: "Add to Plan",
|
||||
title: i18n.t("recipe.add-to-plan") as string,
|
||||
icon: $globals.icons.calendar,
|
||||
color: undefined,
|
||||
event: "mealplanner",
|
||||
},
|
||||
shoppingList: {
|
||||
title: "Add to List",
|
||||
title: i18n.t("recipe.add-to-list") as string,
|
||||
icon: $globals.icons.cartCheck,
|
||||
color: undefined,
|
||||
event: "shoppingList",
|
||||
|
|
@ -268,7 +273,7 @@ export default defineComponent({
|
|||
async function addRecipeToList(listId: string) {
|
||||
const { data } = await api.shopping.lists.addRecipe(listId, props.recipeId);
|
||||
if (data) {
|
||||
alert.success("Recipe added to list");
|
||||
alert.success(i18n.t("recipe.recipe-added-to-list") as string);
|
||||
state.shoppingListDialog = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -300,9 +305,9 @@ export default defineComponent({
|
|||
});
|
||||
|
||||
if (response?.status === 201) {
|
||||
alert.success("Recipe added to mealplan");
|
||||
alert.success(i18n.t("recipe.recipe-added-to-mealplan") as string);
|
||||
} else {
|
||||
alert.error("Failed to add recipe to mealplan");
|
||||
alert.error(i18n.t("recipe.failed-to-add-recipe-to-mealplan") as string);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onMounted, ref } from "@nuxtjs/composition-api";
|
||||
import { computed, defineComponent, onMounted, ref, useContext } from "@nuxtjs/composition-api";
|
||||
import RecipeChip from "./RecipeChips.vue";
|
||||
import { Recipe } from "~/types/api-types/recipe";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
|
|
@ -93,6 +93,8 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
const { i18n } = useContext();
|
||||
|
||||
function setValue(value: Recipe[]) {
|
||||
context.emit(INPUT_EVENT, value);
|
||||
}
|
||||
|
|
@ -101,27 +103,27 @@ export default defineComponent({
|
|||
const hdrs = [];
|
||||
|
||||
if (props.showHeaders.id) {
|
||||
hdrs.push({ text: "Id", value: "id" });
|
||||
hdrs.push({ text: i18n.t("general.id"), value: "id" });
|
||||
}
|
||||
if (props.showHeaders.owner) {
|
||||
hdrs.push({ text: "Owner", value: "userId", align: "center" });
|
||||
hdrs.push({ text: i18n.t("general.owner"), value: "userId", align: "center" });
|
||||
}
|
||||
hdrs.push({ text: "Name", value: "name" });
|
||||
hdrs.push({ text: i18n.t("general.name"), value: "name" });
|
||||
if (props.showHeaders.categories) {
|
||||
hdrs.push({ text: "Categories", value: "recipeCategory" });
|
||||
hdrs.push({ text: i18n.t("recipe.categories"), value: "recipeCategory" });
|
||||
}
|
||||
|
||||
if (props.showHeaders.tags) {
|
||||
hdrs.push({ text: "Tags", value: "tags" });
|
||||
hdrs.push({ text: i18n.t("tag.tags"), value: "tags" });
|
||||
}
|
||||
if (props.showHeaders.tools) {
|
||||
hdrs.push({ text: "Tools", value: "tools" });
|
||||
hdrs.push({ text: i18n.t("tool.tools"), value: "tools" });
|
||||
}
|
||||
if (props.showHeaders.recipeYield) {
|
||||
hdrs.push({ text: "Yield", value: "recipeYield" });
|
||||
hdrs.push({ text: i18n.t("recipe.yield"), value: "recipeYield" });
|
||||
}
|
||||
if (props.showHeaders.dateAdded) {
|
||||
hdrs.push({ text: "Date Added", value: "dateAdded" });
|
||||
hdrs.push({ text: i18n.t("general.date-added"), value: "dateAdded" });
|
||||
}
|
||||
|
||||
return hdrs;
|
||||
|
|
@ -148,7 +150,7 @@ export default defineComponent({
|
|||
return members.value.find((m) => m.id === id)?.username;
|
||||
}
|
||||
|
||||
return "None";
|
||||
return i18n.t("general.none");
|
||||
}
|
||||
|
||||
return { setValue, headers, members, getMember };
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
</v-list-item-title>
|
||||
<BaseButton small color="info" @click="util.action">
|
||||
<template #icon> {{ $globals.icons.robot }}</template>
|
||||
Run
|
||||
{{ $t("general.run") }}
|
||||
</BaseButton>
|
||||
</v-list-item>
|
||||
<v-divider :key="`divider-${idx}`" class="mx-2"></v-divider>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
class="mx-2 arrow-search"
|
||||
hide-details
|
||||
single-line
|
||||
placeholder="Search"
|
||||
:placeholder="$t('search.search')"
|
||||
:prepend-inner-icon="$globals.icons.search"
|
||||
></v-text-field>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<BaseDialog v-model="dialog" title="Share Recipe" :icon="$globals.icons.link">
|
||||
<BaseDialog v-model="dialog" :title="$t('recipe-share.share-recipe')" :icon="$globals.icons.link">
|
||||
<v-card-text>
|
||||
<v-menu
|
||||
v-model="datePickerMenu"
|
||||
|
|
@ -13,8 +13,8 @@
|
|||
<template #activator="{ on, attrs }">
|
||||
<v-text-field
|
||||
v-model="expirationDate"
|
||||
label="Expiration Date"
|
||||
hint="Default 30 Days"
|
||||
:label="$t('recipe-share.expiration-date')"
|
||||
:hint="$t('recipe-share.default-30-days')"
|
||||
persistent-hint
|
||||
:prepend-icon="$globals.icons.calendar"
|
||||
v-bind="attrs"
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</v-list-item-avatar>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title> Expires At </v-list-item-title>
|
||||
<v-list-item-title> {{ $t("recipe-share.expires-at") }} </v-list-item-title>
|
||||
|
||||
<v-list-item-subtitle>{{ $d(new Date(token.expiresAt), "long") }}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
|
@ -152,7 +152,7 @@ export default defineComponent({
|
|||
|
||||
async function copyTokenLink(token: string) {
|
||||
await copy(getTokenLink(token));
|
||||
alert.success("Recipe link copied to clipboard");
|
||||
alert.success(i18n.t("recipe-share.recipe-link-copied-message") as string);
|
||||
}
|
||||
|
||||
async function shareRecipe(token: string) {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
dense
|
||||
hide-details
|
||||
class="mx-1 mt-3 mb-4"
|
||||
placeholder="Section Title"
|
||||
:placeholder="$t('recipe.section-title')"
|
||||
style="max-width: 500px"
|
||||
>
|
||||
</v-text-field>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
dense
|
||||
class="mx-1"
|
||||
type="number"
|
||||
placeholder="Quantity"
|
||||
:placeholder="$t('recipe.quantity')"
|
||||
@keypress="quantityFilter"
|
||||
>
|
||||
<v-icon v-if="$listeners && $listeners.delete" slot="prepend" class="mr-n1 handle">
|
||||
|
|
@ -38,12 +38,12 @@
|
|||
:items="units || []"
|
||||
item-text="name"
|
||||
class="mx-1"
|
||||
placeholder="Choose Unit"
|
||||
:placeholder="$t('recipe.choose-unit')"
|
||||
clearable
|
||||
@keyup.enter="handleUnitEnter"
|
||||
>
|
||||
<template #no-data>
|
||||
<div class="caption text-center pb-2">Press Enter to Create</div>
|
||||
<div class="caption text-center pb-2">{{ $t("recipe.press-enter-to-create") }}</div>
|
||||
</template>
|
||||
<template #append-item>
|
||||
<div class="px-2">
|
||||
|
|
@ -65,12 +65,12 @@
|
|||
:items="foods || []"
|
||||
item-text="name"
|
||||
class="mx-1 py-0"
|
||||
placeholder="Choose Food"
|
||||
:placeholder="$t('recipe.choose-food')"
|
||||
clearable
|
||||
@keyup.enter="handleFoodEnter"
|
||||
>
|
||||
<template #no-data>
|
||||
<div class="caption text-center pb-2">Press Enter to Create</div>
|
||||
<div class="caption text-center pb-2">{{ $t("recipe.press-enter-to-create") }}</div>
|
||||
</template>
|
||||
<template #append-item>
|
||||
<div class="px-2">
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
</v-col>
|
||||
<v-col sm="12" md="" cols="12">
|
||||
<div class="d-flex">
|
||||
<v-text-field v-model="value.note" hide-details dense solo class="mx-1" placeholder="Notes">
|
||||
<v-text-field v-model="value.note" hide-details dense solo class="mx-1" :placeholder="$t('recipe.notes')">
|
||||
<v-icon v-if="disableAmount && $listeners && $listeners.delete" slot="prepend" class="mr-n1 handle">
|
||||
{{ $globals.icons.arrowUpDown }}
|
||||
</v-icon>
|
||||
|
|
@ -93,12 +93,12 @@
|
|||
:buttons="[
|
||||
{
|
||||
icon: $globals.icons.delete,
|
||||
text: 'Delete',
|
||||
text: $t('general.delete'),
|
||||
event: 'delete',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.dotsVertical,
|
||||
text: 'Menu',
|
||||
text: $t('general.menu'),
|
||||
event: 'open',
|
||||
children: contextMenuOptions,
|
||||
},
|
||||
|
|
@ -110,14 +110,16 @@
|
|||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<p v-if="showOriginalText" class="text-caption">Original Text: {{ value.originalText }}</p>
|
||||
<p v-if="showOriginalText" class="text-caption">
|
||||
{{ $t("recipe.original-text-with-value", { originalText: value.originalText }) }}
|
||||
</p>
|
||||
|
||||
<v-divider v-if="!$vuetify.breakpoint.mdAndUp" class="my-4"></v-divider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, reactive, ref, toRefs } from "@nuxtjs/composition-api";
|
||||
import { computed, defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
|
||||
import { useFoodStore, useFoodData, useUnitStore, useUnitData } from "~/composables/store";
|
||||
import { validators } from "~/composables/use-validators";
|
||||
import { RecipeIngredient } from "~/types/api-types/recipe";
|
||||
|
|
@ -134,6 +136,8 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { i18n } = useContext();
|
||||
|
||||
// ==================================================
|
||||
// Foods
|
||||
const foodStore = useFoodStore();
|
||||
|
|
@ -199,7 +203,7 @@ export default defineComponent({
|
|||
const contextMenuOptions = computed(() => {
|
||||
const options = [
|
||||
{
|
||||
text: "Toggle Section",
|
||||
text: i18n.t("recipe.toggle-section") as string,
|
||||
event: "toggle-section",
|
||||
},
|
||||
];
|
||||
|
|
@ -214,7 +218,7 @@ export default defineComponent({
|
|||
|
||||
if (props.value.originalText) {
|
||||
options.push({
|
||||
text: "See Original Text",
|
||||
text: i18n.t("recipe.see-original-text") as string,
|
||||
event: "toggle-original",
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<v-icon large left>
|
||||
{{ $globals.icons.link }}
|
||||
</v-icon>
|
||||
<v-toolbar-title class="headline"> Ingredient Linker </v-toolbar-title>
|
||||
<v-toolbar-title class="headline"> {{ $t("recipe.ingredient-linker") }} </v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
</v-app-bar>
|
||||
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
</v-checkbox>
|
||||
|
||||
<template v-if="usedIngredients.length > 0">
|
||||
<h4 class="py-3 ml-1">Linked to other step</h4>
|
||||
<h4 class="py-3 ml-1">{{ $t("recipe.linked-to-other-step") }}</h4>
|
||||
<v-checkbox
|
||||
v-for="ing in usedIngredients"
|
||||
:key="ing.referenceId"
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
<v-spacer></v-spacer>
|
||||
<BaseButton color="info" @click="autoSetReferences">
|
||||
<template #icon> {{ $globals.icons.robot }}</template>
|
||||
Auto
|
||||
{{ $t("recipe.auto") }}
|
||||
</BaseButton>
|
||||
<BaseButton save @click="setIngredientIds"> </BaseButton>
|
||||
</v-card-actions>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
<template #icon>
|
||||
{{ $globals.icons.primary }}
|
||||
</template>
|
||||
Cook Mode
|
||||
{{ $t("recipe.cook-mode") }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
<draggable
|
||||
|
|
@ -289,7 +289,7 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
setup(props, context) {
|
||||
const { req } = useContext();
|
||||
const { i18n, req } = useContext();
|
||||
const BASE_URL = detectServerBaseUrl(req);
|
||||
|
||||
console.log("Base URL", BASE_URL);
|
||||
|
|
@ -305,15 +305,15 @@ export default defineComponent({
|
|||
|
||||
const actionEvents = [
|
||||
{
|
||||
text: "Toggle Section",
|
||||
text: i18n.t("recipe.toggle-section") as string,
|
||||
event: "toggle-section",
|
||||
},
|
||||
{
|
||||
text: "Link Ingredients",
|
||||
text: i18n.t("recipe.link-ingredients") as string,
|
||||
event: "link-ingredients",
|
||||
},
|
||||
{
|
||||
text: "Merge Above",
|
||||
text: i18n.t("recipe.merge-above") as string,
|
||||
event: "merge-above",
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
:rules="[rules.required]"
|
||||
autofocus
|
||||
></v-text-field>
|
||||
<v-checkbox v-if="itemType === Organizer.Tool" v-model="onHand" label="On Hand"></v-checkbox>
|
||||
<v-checkbox v-if="itemType === Organizer.Tool" v-model="onHand" :label="$t('tool.on-hand')"></v-checkbox>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<BaseButton cancel @click="dialog = false" />
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, reactive, toRefs, watch } from "@nuxtjs/composition-api";
|
||||
import { computed, defineComponent, reactive, toRefs, useContext, watch } from "@nuxtjs/composition-api";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useCategoryStore, useTagStore, useToolStore } from "~/composables/store";
|
||||
import { RecipeOrganizer, Organizer } from "~/types/recipe/organizers";
|
||||
|
|
@ -64,6 +64,8 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
const { i18n } = useContext();
|
||||
|
||||
const state = reactive({
|
||||
name: "",
|
||||
onHand: false,
|
||||
|
|
@ -102,27 +104,27 @@ export default defineComponent({
|
|||
switch (props.itemType) {
|
||||
case Organizer.Tag:
|
||||
return {
|
||||
title: "Create a Tag",
|
||||
label: "Tag Name",
|
||||
title: i18n.t("tag.create-a-tag"),
|
||||
label: i18n.t("tag.tag-name"),
|
||||
api: userApi.tags,
|
||||
};
|
||||
case Organizer.Tool:
|
||||
return {
|
||||
title: "Create a Tool",
|
||||
label: "Tool Name",
|
||||
title: i18n.t("tool.create-a-tool"),
|
||||
label: i18n.t("tool.tool-name"),
|
||||
api: userApi.tools,
|
||||
};
|
||||
default:
|
||||
return {
|
||||
title: "Create a Category",
|
||||
label: "Category Name",
|
||||
title: i18n.t("category.create-a-category"),
|
||||
label: i18n.t("category.category-name"),
|
||||
api: userApi.categories,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
const rules = {
|
||||
required: (val: string) => !!val || "A Name is Required",
|
||||
required: (val: string) => !!val || (i18n.t("general.a-name-is-required") as string),
|
||||
};
|
||||
|
||||
async function select() {
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
<BaseDialog
|
||||
v-if="deleteTarget"
|
||||
v-model="deleteDialog"
|
||||
:title="`Delete ${deleteTarget.name}`"
|
||||
:title="$t('general.delete-with-name', { name: deleteTarget.name })"
|
||||
color="error"
|
||||
:icon="$globals.icons.alertCircle"
|
||||
@confirm="deleteOne()"
|
||||
>
|
||||
<v-card-text> Are you sure you want to delete this {{ deleteTarget.name }}? </v-card-text>
|
||||
<v-card-text> {{ $t("general.confirm-delete-generic-with-name", { name: deleteTarget.name }) }} </v-card-text>
|
||||
</BaseDialog>
|
||||
<v-app-bar color="transparent" flat class="mt-n1 rounded align-center">
|
||||
<v-icon large left>
|
||||
|
|
@ -84,13 +84,15 @@ export default defineComponent({
|
|||
|
||||
if (!props.items) return byLetter;
|
||||
|
||||
props.items.sort((a, b) => a.name.localeCompare(b.name)).forEach((item) => {
|
||||
const letter = item.name[0].toUpperCase();
|
||||
if (!byLetter[letter]) {
|
||||
byLetter[letter] = [];
|
||||
}
|
||||
byLetter[letter].push(item);
|
||||
});
|
||||
props.items
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.forEach((item) => {
|
||||
const letter = item.name[0].toUpperCase();
|
||||
if (!byLetter[letter]) {
|
||||
byLetter[letter] = [];
|
||||
}
|
||||
byLetter[letter].push(item);
|
||||
});
|
||||
|
||||
return byLetter;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ export default defineComponent({
|
|||
case Organizer.Tool:
|
||||
return i18n.t("tool.tools");
|
||||
default:
|
||||
return "Organizer";
|
||||
return i18n.t("general.organizer");
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span> Reset Scale </span>
|
||||
<span> {{ $t("recipe.reset-scale") }} </span>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
|
|
@ -38,12 +38,12 @@
|
|||
:buttons="[
|
||||
{
|
||||
icon: $globals.icons.minus,
|
||||
text: 'Decrease Scale by 1',
|
||||
text: $t('recipe.decrease-scale-label'),
|
||||
event: 'decrement',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.createAlt,
|
||||
text: 'Increase Scale by 1',
|
||||
text: $t('recipe.increase-scale-label'),
|
||||
event: 'increment',
|
||||
},
|
||||
]"
|
||||
|
|
|
|||
|
|
@ -57,12 +57,12 @@ export default defineComponent({
|
|||
landscapeView: i18n.t("recipe.landscape-view-coming-soon"),
|
||||
disableComments: i18n.t("recipe.disable-comments"),
|
||||
disableAmount: i18n.t("recipe.disable-amount"),
|
||||
locked: "Locked",
|
||||
locked: i18n.t("recipe.locked"),
|
||||
};
|
||||
|
||||
return {
|
||||
labels,
|
||||
}
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -28,15 +28,15 @@
|
|||
</v-chip>
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<BaseDialog v-model="createDialog" title="Create New Tool" @submit="actions.createOne()">
|
||||
<BaseDialog v-model="createDialog" :title="$t('tool.create-new-tool')" @submit="actions.createOne()">
|
||||
<template #activator>
|
||||
<v-btn icon @click="createDialog = true">
|
||||
<v-icon> {{ $globals.icons.create }}</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card-text>
|
||||
<v-text-field v-model="workingToolData.name" label="Tool Name"></v-text-field>
|
||||
<v-checkbox v-model="workingToolData.onHand" label="Show as On Hand (Checked)"></v-checkbox>
|
||||
<v-text-field v-model="workingToolData.name" :label="$t('tool.tool-name')"></v-text-field>
|
||||
<v-checkbox v-model="workingToolData.onHand" :label="$t('tool.on-hand-checkbox-label')"></v-checkbox>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, ref } from "@nuxtjs/composition-api";
|
||||
import { defineComponent, computed, ref, useContext } from "@nuxtjs/composition-api";
|
||||
import ShoppingListItemEditor from "./ShoppingListItemEditor.vue";
|
||||
import MultiPurposeLabel from "./MultiPurposeLabel.vue";
|
||||
import { ShoppingListItemCreate } from "~/types/api-types/group";
|
||||
|
|
@ -65,21 +65,6 @@ interface actions {
|
|||
event: string;
|
||||
}
|
||||
|
||||
const contextMenu: actions[] = [
|
||||
{
|
||||
text: "Edit",
|
||||
event: "edit",
|
||||
},
|
||||
{
|
||||
text: "Delete",
|
||||
event: "delete",
|
||||
},
|
||||
{
|
||||
text: "Transfer",
|
||||
event: "transfer",
|
||||
},
|
||||
];
|
||||
|
||||
export default defineComponent({
|
||||
components: { ShoppingListItemEditor, MultiPurposeLabel },
|
||||
props: {
|
||||
|
|
@ -101,6 +86,23 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
const { i18n } = useContext();
|
||||
|
||||
const contextMenu: actions[] = [
|
||||
{
|
||||
text: i18n.t("general.edit") as string,
|
||||
event: "edit",
|
||||
},
|
||||
{
|
||||
text: i18n.t("general.delete") as string,
|
||||
event: "delete",
|
||||
},
|
||||
{
|
||||
text: i18n.t("general.transfer") as string,
|
||||
event: "transfer",
|
||||
},
|
||||
];
|
||||
|
||||
const listItem = computed({
|
||||
get: () => {
|
||||
return props.value;
|
||||
|
|
@ -152,4 +154,4 @@ export default defineComponent({
|
|||
.strike-through {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,26 +7,37 @@
|
|||
v-model="listItem.food"
|
||||
:items="foods"
|
||||
:item-id.sync="listItem.foodId"
|
||||
label="Food"
|
||||
:label="$t('shopping-list.food')"
|
||||
:icon="$globals.icons.foods"
|
||||
/>
|
||||
<InputLabelType
|
||||
v-model="listItem.unit"
|
||||
:items="units"
|
||||
:item-id.sync="listItem.unitId"
|
||||
label="Units"
|
||||
:label="$t('general.units')"
|
||||
:icon="$globals.icons.units"
|
||||
/>
|
||||
</div>
|
||||
<div class="d-md-flex align-center" style="gap: 20px">
|
||||
<v-textarea v-model="listItem.note" hide-details label="Note" rows="1" auto-grow></v-textarea>
|
||||
<v-textarea
|
||||
v-model="listItem.note"
|
||||
hide-details
|
||||
:label="$t('shopping-list.note')"
|
||||
rows="1"
|
||||
auto-grow
|
||||
></v-textarea>
|
||||
</div>
|
||||
<div class="d-flex align-end" style="gap: 20px">
|
||||
<div>
|
||||
<InputQuantity v-model="listItem.quantity" />
|
||||
</div>
|
||||
<div style="max-width: 300px" class="mt-3 mr-auto">
|
||||
<InputLabelType v-model="listItem.label" :items="labels" :item-id.sync="listItem.labelId" label="Label" />
|
||||
<InputLabelType
|
||||
v-model="listItem.label"
|
||||
:items="labels"
|
||||
:item-id.sync="listItem.labelId"
|
||||
:label="$t('shopping-list.label')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<v-menu
|
||||
|
|
@ -43,8 +54,7 @@
|
|||
</template>
|
||||
<v-card max-width="350px" class="left-warning-border">
|
||||
<v-card-text>
|
||||
This item is linked to one or more recipe. Adjusting the units or foods will yield unexpected results
|
||||
when adding or removing the recipe from this list.
|
||||
{{ $t("shopping-list.linked-item-warning") }}
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
|
|
@ -66,7 +76,7 @@
|
|||
},
|
||||
{
|
||||
icon: $globals.icons.foods,
|
||||
text: 'Toggle Food',
|
||||
text: $t('shopping-list.toggle-food'),
|
||||
event: 'toggle-foods',
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue