Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-04 21:15:22 +02:00
Code Issues Releases Activity

fix: script setup #2 and some fixes (#5845)

Browse source
This commit is contained in:
Kuchenpirat 2025-07-30 02:05:26 +02:00 • committed by GitHub
parent a132b83f1b
commit 620465f14c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 312 additions and 528 deletions
Download patch file Download diff file Expand all files Collapse all files

36
frontend/components/Domain/Group/GroupExportData.vue
View file

@ -20,45 +20,33 @@
</v-data-table>
</template>
<script lang="ts">
<script setup lang="ts">
import { parseISO, formatDistanceToNow } from "date-fns";
import type { GroupDataExport } from "~/lib/api/types/group";
export default defineNuxtComponent({
props: {
exports: {
type: Array as () => GroupDataExport[],
required: true,
},
},
setup() {
const i18n = useI18n();
defineProps<{
exports: GroupDataExport[];
}>();
const headers = [
const i18n = useI18n();
const headers = [
{ title: i18n.t("export.export"), value: "name" },
{ title: i18n.t("export.file-name"), value: "filename" },
{ title: i18n.t("export.size"), value: "size" },
{ title: i18n.t("export.link-expires"), value: "expires" },
{ title: "", value: "actions" },
];
];
function getTimeToExpire(timeString: string) {
function getTimeToExpire(timeString: string) {
const expiresAt = parseISO(timeString);
return formatDistanceToNow(expiresAt, {
addSuffix: false,
});
}
}
function downloadData(_: any) {
function downloadData(_: any) {
console.log("Downloading data...");
}
return {
downloadData,
headers,
getTimeToExpire,
};
},
});
}
</script>

26
frontend/components/Domain/Group/GroupPreferencesEditor.vue
View file

@ -9,30 +9,10 @@
</div>
</template>
<script lang="ts">
export default defineNuxtComponent({
props: {
modelValue: {
type: Object,
required: true,
},
},
emits: ["update:modelValue"],
setup(props, context) {
const preferences = computed({
get() {
return props.modelValue;
},
set(val) {
context.emit("update:modelValue", val);
},
});
<script setup lang="ts">
import type { ReadGroupPreferences } from "~/lib/api/types/user";
return {
preferences,
};
},
});
const preferences = defineModel<ReadGroupPreferences>({ required: true });
</script>
<style lang="scss" scoped></style>

91
frontend/components/Domain/Household/GroupHouseholdSelector.vue
View file

@ -1,91 +0,0 @@
<template>
<v-select
v-model="selected"
:items="households"
:label="label"
:hint="description"
:persistent-hint="!!description"
item-title="name"
:multiple="multiselect"
:prepend-inner-icon="$globals.icons.household"
return-object
>
<template #chip="data">
<v-chip
:key="data.index"
class="ma-1"
:input-value="data.item"
size="small"
closable
label
color="accent"
dark
@click:close="removeByIndex(data.index)"
>
{{ data.item.raw.name || data.item }}
</v-chip>
</template>
</v-select>
</template>
<script lang="ts">
import { useHouseholdStore } from "~/composables/store/use-household-store";
interface HouseholdLike {
id: string;
name: string;
}
export default defineNuxtComponent({
props: {
modelValue: {
type: Array as () => HouseholdLike[],
required: true,
},
multiselect: {
type: Boolean,
default: false,
},
description: {
type: String,
default: "",
},
},
emits: ["update:modelValue"],
setup(props, context) {
const selected = computed({
get: () => props.modelValue,
set: (val) => {
context.emit("update:modelValue", val);
},
});
onMounted(() => {
if (selected.value === undefined) {
selected.value = [];
}
});
const i18n = useI18n();
const label = computed(
() => props.multiselect ? i18n.t("household.households") : i18n.t("household.household"),
);
const { store: households } = useHouseholdStore();
function removeByIndex(index: number) {
if (selected.value === undefined) {
return;
}
const newSelected = selected.value.filter((_, i) => i !== index);
selected.value = [...newSelected];
}
return {
selected,
label,
households,
removeByIndex,
};
},
});
</script>

101
frontend/components/Domain/Household/GroupMealPlanDayContextMenu.vue
View file

@ -18,7 +18,7 @@
:open-on-hover="mdAndUp"
content-class="d-print-none"
>
<template #activator="{ props }">
<template #activator="{ props: activatorProps }">
<v-btn
:class="{ 'rounded-circle': fab }"
:size="fab ? 'small' : undefined"
@ -26,7 +26,7 @@
:icon="!fab"
variant="text"
dark
v-bind="props"
v-bind="activatorProps"
@click.prevent
>
<v-icon>{{ icon }}</v-icon>
@ -50,7 +50,7 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import type { Recipe } from "~/lib/api/types/recipe";
import RecipeDialogAddToShoppingList from "~/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue";
import type { ShoppingListSummary } from "~/lib/api/types/household";
@ -64,40 +64,32 @@ export interface ContextMenuItem {
isPublic: boolean;
}
export default defineNuxtComponent({
components: {
RecipeDialogAddToShoppingList,
},
props: {
recipes: {
type: Array as () => Recipe[],
default: () => [],
},
menuTop: {
type: Boolean,
default: true,
},
fab: {
type: Boolean,
default: false,
},
color: {
type: String,
default: "primary",
},
menuIcon: {
type: String,
default: null,
},
},
setup(props, context) {
const { mdAndUp } = useDisplay();
interface Props {
recipes?: Recipe[];
menuTop?: boolean;
fab?: boolean;
color?: string;
menuIcon?: string | null;
}
const props = withDefaults(defineProps<Props>(), {
recipes: () => [],
menuTop: true,
fab: false,
color: "primary",
menuIcon: null,
});
const i18n = useI18n();
const { $globals } = useNuxtApp();
const api = useUserApi();
const emit = defineEmits<{
[key: string]: [];
}>();
const state = reactive({
const { mdAndUp } = useDisplay();
const i18n = useI18n();
const { $globals } = useNuxtApp();
const api = useUserApi();
const state = reactive({
loading: false,
shoppingListDialog: false,
menuItems: [
@ -109,36 +101,38 @@ export default defineNuxtComponent({
isPublic: false,
},
],
});
});
const icon = props.menuIcon || $globals.icons.dotsVertical;
const { shoppingListDialog, menuItems } = toRefs(state);
const shoppingLists = ref<ShoppingListSummary[]>();
const recipesWithScales = computed(() => {
const icon = props.menuIcon || $globals.icons.dotsVertical;
const shoppingLists = ref<ShoppingListSummary[]>();
const recipesWithScales = computed(() => {
return props.recipes.map((recipe) => {
return {
scale: 1,
...recipe,
};
});
});
});
async function getShoppingLists() {
async function getShoppingLists() {
const { data } = await api.shopping.lists.getAll(1, -1, { orderBy: "name", orderDirection: "asc" });
if (data) {
shoppingLists.value = data.items as ShoppingListSummary[] ?? [];
}
}
}
// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
const eventHandlers: { [key: string]: () => void | Promise<any> } = {
// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
const eventHandlers: { [key: string]: () => void | Promise<any> } = {
shoppingList: () => {
getShoppingLists();
state.shoppingListDialog = true;
},
};
};
function contextMenuEventHandler(eventKey: string) {
function contextMenuEventHandler(eventKey: string) {
const handler = eventHandlers[eventKey];
if (handler && typeof handler === "function") {
@ -147,18 +141,7 @@ export default defineNuxtComponent({
return;
}
context.emit(eventKey);
emit(eventKey);
state.loading = false;
}
return {
...toRefs(state),
contextMenuEventHandler,
icon,
recipesWithScales,
shoppingLists,
mdAndUp,
};
},
});
}
</script>

113
frontend/components/Domain/Household/GroupMealPlanRuleForm.vue
View file

@ -5,12 +5,12 @@
style="gap: 10px"
>
<v-select
v-model="inputDay"
v-model="day"
:items="MEAL_DAY_OPTIONS"
:label="$t('meal-plan.rule-day')"
/>
<v-select
v-model="inputEntryType"
v-model="entryType"
:items="MEAL_TYPE_OPTIONS"
:label="$t('meal-plan.meal-type')"
/>
@ -19,64 +19,49 @@
<div class="mb-5">
<QueryFilterBuilder
:field-defs="fieldDefs"
:initial-query-filter="queryFilter"
:initial-query-filter="props.queryFilter"
@input="handleQueryFilterInput"
/>
</div>
<!-- TODO: proper pluralization of inputDay -->
{{ $t('meal-plan.this-rule-will-apply', {
dayCriteria: inputDay === "unset" ? $t('meal-plan.to-all-days') : $t('meal-plan.on-days', [inputDay]),
mealTypeCriteria: inputEntryType === "unset" ? $t('meal-plan.for-all-meal-types') : $t('meal-plan.for-type-meal-types', [inputEntryType]),
dayCriteria: day === "unset" ? $t('meal-plan.to-all-days') : $t('meal-plan.on-days', [day]),
mealTypeCriteria: entryType === "unset" ? $t('meal-plan.for-all-meal-types') : $t('meal-plan.for-type-meal-types', [entryType]),
}) }}
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import QueryFilterBuilder from "~/components/Domain/QueryFilterBuilder.vue";
import type { FieldDefinition } from "~/composables/use-query-filter-builder";
import { Organizer } from "~/lib/api/types/non-generated";
import type { QueryFilterJSON } from "~/lib/api/types/response";
export default defineNuxtComponent({
components: {
QueryFilterBuilder,
},
props: {
day: {
type: String,
default: "unset",
},
entryType: {
type: String,
default: "unset",
},
queryFilterString: {
type: String,
default: "",
},
queryFilter: {
type: Object as () => QueryFilterJSON,
default: null,
},
showHelp: {
type: Boolean,
default: false,
},
},
emits: ["update:day", "update:entry-type", "update:query-filter-string"],
setup(props, context) {
const i18n = useI18n();
interface Props {
queryFilter?: QueryFilterJSON | null;
showHelp?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
queryFilter: null,
showHelp: false,
});
const MEAL_TYPE_OPTIONS = [
const day = defineModel<string>("day", { default: "unset" });
const entryType = defineModel<string>("entryType", { default: "unset" });
const queryFilterString = defineModel<string>("queryFilterString", { default: "" });
const i18n = useI18n();
const MEAL_TYPE_OPTIONS = [
{ title: i18n.t("meal-plan.breakfast"), value: "breakfast" },
{ title: i18n.t("meal-plan.lunch"), value: "lunch" },
{ title: i18n.t("meal-plan.dinner"), value: "dinner" },
{ title: i18n.t("meal-plan.side"), value: "side" },
{ title: i18n.t("meal-plan.type-any"), value: "unset" },
];
];
const MEAL_DAY_OPTIONS = [
const MEAL_DAY_OPTIONS = [
{ title: i18n.t("general.monday"), value: "monday" },
{ title: i18n.t("general.tuesday"), value: "tuesday" },
{ title: i18n.t("general.wednesday"), value: "wednesday" },
@ -85,40 +70,14 @@ export default defineNuxtComponent({
{ title: i18n.t("general.saturday"), value: "saturday" },
{ title: i18n.t("general.sunday"), value: "sunday" },
{ title: i18n.t("meal-plan.day-any"), value: "unset" },
];
];
const inputDay = computed({
get: () => {
return props.day;
},
set: (val) => {
context.emit("update:day", val);
},
});
function handleQueryFilterInput(value: string | undefined) {
console.warn("handleQueryFilterInput called with value:", value);
queryFilterString.value = value || "";
}
const inputEntryType = computed({
get: () => {
return props.entryType;
},
set: (val) => {
context.emit("update:entry-type", val);
},
});
const inputQueryFilterString = computed({
get: () => {
return props.queryFilterString;
},
set: (val) => {
context.emit("update:query-filter-string", val);
},
});
function handleQueryFilterInput(value: string | undefined) {
inputQueryFilterString.value = value || "";
};
const fieldDefs: FieldDefinition[] = [
const fieldDefs: FieldDefinition[] = [
{
name: "recipe_category.id",
label: i18n.t("category.categories"),
@ -159,17 +118,5 @@ export default defineNuxtComponent({
label: i18n.t("general.date-updated"),
type: "date",
},
];
return {
MEAL_TYPE_OPTIONS,
MEAL_DAY_OPTIONS,
inputDay,
inputEntryType,
inputQueryFilterString,
handleQueryFilterInput,
fieldDefs,
};
},
});
];
</script>

59
frontend/components/Domain/Household/GroupWebhookEditor.vue
View file

@ -16,11 +16,11 @@
:label="$t('settings.webhooks.webhook-url')"
variant="underlined"
/>
<v-time-picker
<v-text-field
v-model="scheduledTime"
class="elevation-2"
ampm-in-title
format="ampm"
type="time"
clearable
variant="underlined"
/>
</v-card-text>
<v-card-actions class="py-0 justify-end">
@ -50,24 +50,25 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import type { ReadWebhook } from "~/lib/api/types/household";
import { timeLocalToUTC, timeUTCToLocal } from "~/composables/use-group-webhooks";
export default defineNuxtComponent({
props: {
webhook: {
type: Object as () => ReadWebhook,
required: true,
},
},
emits: ["delete", "save", "test"],
setup(props, { emit }) {
const i18n = useI18n();
const itemUTC = ref<string>(props.webhook.scheduledTime);
const itemLocal = ref<string>(timeUTCToLocal(props.webhook.scheduledTime));
const props = defineProps<{
webhook: ReadWebhook;
}>();
const scheduledTime = computed({
const emit = defineEmits<{
delete: [id: string];
save: [webhook: ReadWebhook];
test: [id: string];
}>();
const i18n = useI18n();
const itemUTC = ref<string>(props.webhook.scheduledTime);
const itemLocal = ref<string>(timeUTCToLocal(props.webhook.scheduledTime));
const scheduledTime = computed({
get() {
return itemLocal.value;
},
@ -75,27 +76,17 @@ export default defineNuxtComponent({
itemUTC.value = timeLocalToUTC(v);
itemLocal.value = v;
},
});
});
const webhookCopy = ref({ ...props.webhook });
const webhookCopy = ref({ ...props.webhook });
function handleSave() {
function handleSave() {
webhookCopy.value.scheduledTime = itemLocal.value;
emit("save", webhookCopy.value);
}
}
// Set page title using useSeoMeta
useSeoMeta({
// Set page title using useSeoMeta
useSeoMeta({
title: i18n.t("settings.webhooks.webhooks"),
});
return {
webhookCopy,
scheduledTime,
handleSave,
itemUTC,
itemLocal,
};
},
});
</script>

43
frontend/components/Domain/Household/HouseholdPreferencesEditor.vue
View file

@ -41,27 +41,19 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import type { ReadHouseholdPreferences } from "~/lib/api/types/household";
export default defineNuxtComponent({
props: {
modelValue: {
type: Object,
required: true,
},
},
emits: ["update:modelValue"],
setup(props, context) {
const i18n = useI18n();
const preferences = defineModel<ReadHouseholdPreferences>({ required: true });
const i18n = useI18n();
type Preference = {
type Preference = {
key: keyof ReadHouseholdPreferences;
label: string;
description: string;
};
};
const recipePreferences: Preference[] = [
const recipePreferences: Preference[] = [
{
key: "recipePublic",
label: i18n.t("group.allow-users-outside-of-your-group-to-see-your-recipes"),
@ -92,9 +84,9 @@ export default defineNuxtComponent({
label: i18n.t("group.disable-organizing-recipe-ingredients-by-units-and-food"),
description: i18n.t("group.disable-organizing-recipe-ingredients-by-units-and-food-description"),
},
];
];
const allDays = [
const allDays = [
{
name: i18n.t("general.sunday"),
value: 0,
@ -123,24 +115,7 @@ export default defineNuxtComponent({
name: i18n.t("general.saturday"),
value: 6,
},
];
const preferences = computed({
get() {
return props.modelValue;
},
set(val) {
context.emit("update:modelValue", val);
},
});
return {
allDays,
preferences,
recipePreferences,
};
},
});
];
</script>
<style lang="css">

13
frontend/components/Domain/QueryFilterBuilder.vue
View file

@ -147,7 +147,7 @@
:model-value="field.value"
type="number"
variant="underlined"
@:model-value="setFieldValue(field, index, $event)"
@update:model-value="setFieldValue(field, index, $event)"
/>
<v-checkbox
v-else-if="field.type === 'boolean'"
@ -190,6 +190,7 @@
:show-label="false"
:show-icon="false"
variant="underlined"
@update:model-value="setFieldOrganizers(field, index, $event)"
/>
<RecipeOrganizerSelector
v-else-if="field.type === Organizer.Tag"
@ -199,6 +200,7 @@
:show-label="false"
:show-icon="false"
variant="underlined"
@update:model-value="setFieldOrganizers(field, index, $event)"
/>
<RecipeOrganizerSelector
v-else-if="field.type === Organizer.Tool"
@ -208,6 +210,7 @@
:show-label="false"
:show-icon="false"
variant="underlined"
@update:model-value="setFieldOrganizers(field, index, $event)"
/>
<RecipeOrganizerSelector
v-else-if="field.type === Organizer.Food"
@ -217,6 +220,7 @@
:show-label="false"
:show-icon="false"
variant="underlined"
@update:model-value="setFieldOrganizers(field, index, $event)"
/>
<RecipeOrganizerSelector
v-else-if="field.type === Organizer.Household"
@ -226,6 +230,7 @@
:show-label="false"
:show-icon="false"
variant="underlined"
@update:model-value="setFieldOrganizers(field, index, $event)"
/>
</v-col>
<!-- right parenthesis -->
@ -414,6 +419,12 @@ function setFieldValues(field: FieldWithId, index: number, values: FieldValue[])
fields.value[index].values = values;
}
function setFieldOrganizers(field: FieldWithId, index: number, organizers: OrganizerBase[]) {
fields.value[index].organizers = organizers;
// Sync the values array with the organizers array
fields.value[index].values = organizers.map(org => org.id?.toString() || "").filter(id => id);
}
function removeField(index: number) {
fields.value.splice(index, 1);
state.datePickers.splice(index, 1);