github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-22 06:23:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 17

recipe list and slots for it

Browse source
This commit is contained in:
Kuchenpirat 2025-07-30 11:59:55 +00:00
commit a8d4c43467
2 changed files with 107 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

72
frontend/components/Domain/Recipe/RecipeList.vue
View file

@ -51,46 +51,34 @@
</v-list> </v-list>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import DOMPurify from "dompurify"; import DOMPurify from "dompurify";
import { useFraction } from "~/composables/recipes/use-fraction"; import { useFraction } from "~/composables/recipes/use-fraction";
import type { ShoppingListItemOut } from "~/lib/api/types/household"; import type { ShoppingListItemOut } from "~/lib/api/types/household";
import type { RecipeSummary } from "~/lib/api/types/recipe"; import type { RecipeSummary } from "~/lib/api/types/recipe";
export default defineNuxtComponent({ interface Props {
props: { recipes: RecipeSummary[];
recipes: { listItem?: ShoppingListItemOut;
type: Array as () => RecipeSummary[], small?: boolean;
required: true, tile?: boolean;
}, showDescription?: boolean;
listItem: { disabled?: boolean;
type: Object as () => ShoppingListItemOut | undefined, }
default: undefined, const props = withDefaults(defineProps<Props>(), {
}, listItem: undefined,
small: { small: false,
type: Boolean, tile: false,
default: false, showDescription: false,
}, disabled: false,
tile: { });
type: Boolean,
default: false,
},
showDescription: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
},
setup(props) {
const $auth = useMealieAuth();
const { frac } = useFraction();
const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug || $auth.user?.value?.groupSlug || "");
const attrs = computed(() => { const $auth = useMealieAuth();
const { frac } = useFraction();
const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug || $auth.user?.value?.groupSlug || "");
const attrs = computed(() => {
return props.small return props.small
? { ? {
class: { class: {
@ -122,16 +110,16 @@ export default defineNuxtComponent({
}, },
}, },
}; };
}); });
function sanitizeHTML(rawHtml: string) { function sanitizeHTML(rawHtml: string) {
return DOMPurify.sanitize(rawHtml, { return DOMPurify.sanitize(rawHtml, {
USE_PROFILES: { html: true }, USE_PROFILES: { html: true },
ALLOWED_TAGS: ["strong", "sup"], ALLOWED_TAGS: ["strong", "sup"],
}); });
} }
const listItemDescriptions = computed<string[]>(() => { const listItemDescriptions = computed<string[]>(() => {
if ( if (
props.recipes.length === 1 // we don't need to specify details if there's only one recipe ref props.recipes.length === 1 // we don't need to specify details if there's only one recipe ref
|| !props.listItem?.recipeReferences || !props.listItem?.recipeReferences
@ -179,13 +167,5 @@ export default defineNuxtComponent({
} }
return listItemDescriptions; return listItemDescriptions;
});
return {
attrs,
groupSlug,
listItemDescriptions,
};
},
}); });
</script> </script>

4
frontend/pages/shopping-lists/[id].vue
View file

@ -371,6 +371,8 @@
<v-btn <v-btn
v-if="recipe" v-if="recipe"
icon icon
flat
class="bg-transparent"
:disabled="isOffline" :disabled="isOffline"
@click.prevent="removeRecipeReferenceToList(recipe.id!)" @click.prevent="removeRecipeReferenceToList(recipe.id!)"
> >
@ -386,6 +388,8 @@
<v-btn <v-btn
icon icon
:disabled="isOffline" :disabled="isOffline"
flat
class="bg-transparent"
@click.prevent="addRecipeReferenceToList(recipe.id!)" @click.prevent="addRecipeReferenceToList(recipe.id!)"
> >
<v-icon color="grey-lighten-1"> <v-icon color="grey-lighten-1">