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 Data Table

Browse source
This commit is contained in:
Kuchenpirat 2025-07-30 10:39:25 +00:00
commit ee68f95d4b
1 changed files with 110 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -62,7 +62,7 @@
</v-data-table> </v-data-table>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import UserAvatar from "../User/UserAvatar.vue"; import UserAvatar from "../User/UserAvatar.vue";
import RecipeChip from "./RecipeChips.vue"; import RecipeChip from "./RecipeChips.vue";
import type { Recipe, RecipeCategory, RecipeTool } from "~/lib/api/types/recipe"; import type { Recipe, RecipeCategory, RecipeTool } from "~/lib/api/types/recipe";
@ -70,8 +70,6 @@ import { useUserApi } from "~/composables/api";
import type { UserSummary } from "~/lib/api/types/user"; import type { UserSummary } from "~/lib/api/types/user";
import type { RecipeTag } from "~/lib/api/types/household"; import type { RecipeTag } from "~/lib/api/types/household";
const INPUT_EVENT = "update:modelValue";
interface ShowHeaders { interface ShowHeaders {
id: boolean; id: boolean;
owner: boolean; owner: boolean;
@ -84,56 +82,43 @@ interface ShowHeaders {
dateAdded: boolean; dateAdded: boolean;
} }
export default defineNuxtComponent({ interface Props {
components: { RecipeChip, UserAvatar }, loading?: boolean;
props: { recipes?: Recipe[];
modelValue: { showHeaders?: ShowHeaders;
type: Array as PropType<Recipe[]>, }
required: false, const props = withDefaults(defineProps<Props>(), {
default: () => [], loading: false,
}, recipes: () => [],
loading: { showHeaders: () => ({
type: Boolean,
required: false,
default: false,
},
recipes: {
type: Array as () => Recipe[],
default: () => [],
},
showHeaders: {
type: Object as () => ShowHeaders,
required: false,
default: () => {
return {
id: true, id: true,
owner: false, owner: false,
tags: true, tags: true,
categories: true, categories: true,
tools: true,
recipeServings: true, recipeServings: true,
recipeYieldQuantity: true, recipeYieldQuantity: true,
recipeYield: true, recipeYield: true,
dateAdded: true, dateAdded: true,
}; }),
}, });
},
}, defineEmits<{
emits: ["click", "update:modelValue"], click: [];
setup(props, context) { }>();
const selected = defineModel<Recipe[]>({ default: () => [] });
const i18n = useI18n(); const i18n = useI18n();
const $auth = useMealieAuth(); const $auth = useMealieAuth();
const groupSlug = $auth.user.value?.groupSlug; const groupSlug = $auth.user.value?.groupSlug;
const router = useRouter(); const router = useRouter();
const selected = computed({
get: () => props.modelValue,
set: value => context.emit(INPUT_EVENT, value),
});
// Initialize sort state with default sorting by dateAdded descending // Initialize sort state with default sorting by dateAdded descending
const sortBy = ref([{ key: "dateAdded", order: "desc" }]); const sortBy = ref([{ key: "dateAdded", order: "desc" as const }]);
const headers = computed(() => { const headers = computed(() => {
const hdrs: Array<{ title: string; value: string; align?: string; sortable?: boolean }> = []; const hdrs: Array<{ title: string; value: string; align?: "center" | "start" | "end"; sortable?: boolean }> = [];
if (props.showHeaders.id) { if (props.showHeaders.id) {
hdrs.push({ title: i18n.t("general.id"), value: "id" }); hdrs.push({ title: i18n.t("general.id"), value: "id" });
@ -207,17 +192,4 @@ export default defineNuxtComponent({
return i18n.t("general.none"); return i18n.t("general.none");
} }
return {
selected,
sortBy,
groupSlug,
headers,
formatDate,
members,
getMember,
filterItems,
};
},
});
</script> </script>