Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-05 13:35:23 +02:00
Code Issues Releases Activity

feat(backend): ✨ add rename tag, tool, category support (#875)

Browse source
This commit is contained in:
Hayden 2021-12-10 19:48:06 -09:00 • committed by GitHub
parent 8d77f4b31e
commit e109ac0f47
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 573 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

74
frontend/pages/recipes/categories/index.vue
View file

@ -1,71 +1,35 @@
<template>
<v-container v-if="categories">
<v-app-bar color="transparent" flat class="mt-n1 rounded">
<v-icon large left>
{{ $globals.icons.tags }}
</v-icon>
<v-toolbar-title class="headline"> {{ $t("recipe.categories") }} </v-toolbar-title>
<v-spacer></v-spacer>
</v-app-bar>
<section v-for="(items, key, idx) in categoriesByLetter" :key="'header' + idx" :class="idx === 1 ? null : 'my-4'">
<BaseCardSectionTitle :title="key"> </BaseCardSectionTitle>
<v-row>
<v-col v-for="(item, index) in items" :key="'cat' + index" cols="12" :sm="12" :md="6" :lg="4" :xl="3">
<v-card hover :to="`/recipes/categories/${item.slug}`">
<v-card-actions>
<v-icon>
{{ $globals.icons.tags }}
</v-icon>
<v-card-title class="py-1">{{ item.name }}</v-card-title>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</section>
<v-container>
<RecipeCategoryTagToolPage v-if="categories" :items="categories" item-type="categories" />
</v-container>
</template>
<script lang="ts">
import { computed, defineComponent, useAsync } from "@nuxtjs/composition-api";
import { defineComponent, useAsync } from "@nuxtjs/composition-api";
import RecipeCategoryTagToolPage from "~/components/Domain/Recipe/RecipeCategoryTagToolPage.vue";
import { useUserApi } from "~/composables/api";
import { useAsyncKey } from "~/composables/use-utils";
export default defineComponent({
components: {
RecipeCategoryTagToolPage,
},
setup() {
const api = useUserApi();
const userApi = useUserApi();
const categories = useAsync(async () => {
const { data } = await api.categories.getAll();
return data;
}, useAsyncKey());
const { data } = await userApi.categories.getAll();
const categoriesByLetter: any = computed(() => {
const catsByLetter: { [key: string]: Array<any> } = {};
if (!categories.value) return catsByLetter;
categories.value.forEach((item) => {
const letter = item.name[0].toUpperCase();
if (!catsByLetter[letter]) {
catsByLetter[letter] = [];
}
catsByLetter[letter].push(item);
});
return catsByLetter;
if (data) {
return data;
}
});
return { categories, api, categoriesByLetter };
},
head() {
return {
title: this.$t("sidebar.categories") as string,
categories,
};
},
// head: {
// // @ts-ignore
// title: this.$t("sidebar.categories") as string,
// },
});
</script>
<style scoped>
</style>
</script>