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

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

@ -20,18 +20,14 @@
</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() {
defineProps<{
exports: GroupDataExport[];
}>();
const i18n = useI18n();
const headers = [
@ -53,12 +49,4 @@ export default defineNuxtComponent({
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>

67
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,33 +64,25 @@ 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) {
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 emit = defineEmits<{
[key: string]: [];
}>();
const { mdAndUp } = useDisplay();
const i18n = useI18n();
@ -111,6 +103,8 @@ export default defineNuxtComponent({
],
});
const { shoppingListDialog, menuItems } = toRefs(state);
const icon = props.menuIcon || $globals.icons.dotsVertical;
const shoppingLists = ref<ShoppingListSummary[]>();
@ -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>

97
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,53 +19,38 @@
<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) {
interface Props {
queryFilter?: QueryFilterJSON | null;
showHelp?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
queryFilter: null,
showHelp: false,
});
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 = [
@ -87,36 +72,10 @@ export default defineNuxtComponent({
{ title: i18n.t("meal-plan.day-any"), value: "unset" },
];
const inputDay = computed({
get: () => {
return props.day;
},
set: (val) => {
context.emit("update:day", val);
},
});
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 || "";
};
console.warn("handleQueryFilterInput called with value:", value);
queryFilterString.value = value || "";
}
const fieldDefs: FieldDefinition[] = [
{
@ -160,16 +119,4 @@ export default defineNuxtComponent({
type: "date",
},
];
return {
MEAL_TYPE_OPTIONS,
MEAL_DAY_OPTIONS,
inputDay,
inputEntryType,
inputQueryFilterString,
handleQueryFilterInput,
fieldDefs,
};
},
});
</script>

39
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,19 +50,20 @@
</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 props = defineProps<{
webhook: ReadWebhook;
}>();
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));
@ -88,14 +89,4 @@ export default defineNuxtComponent({
useSeoMeta({
title: i18n.t("settings.webhooks.webhooks"),
});
return {
webhookCopy,
scheduledTime,
handleSave,
itemUTC,
itemLocal,
};
},
});
</script>

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

@ -41,18 +41,10 @@
</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 preferences = defineModel<ReadHouseholdPreferences>({ required: true });
const i18n = useI18n();
type Preference = {
@ -124,23 +116,6 @@ export default defineNuxtComponent({
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);