mirror of
https://github.com/hay-kot/mealie.git
synced 2025-08-22 14:33:33 -07:00
dashboard ui
This commit is contained in:
hay-kot
parent
de5800c3cc
commit
7f63f35ec5
7 changed files with 251 additions and 13 deletions
|
|
@ -22,19 +22,26 @@
|
|||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<TheDownloadBtn :button-text="$t('about.download-recipe-json')" download-url="/api/debug/last-recipe-json" />
|
||||
<TheDownloadBtn :button-text="$t('about.download-log')" download-url="/api/debug/log" />
|
||||
<TheDownloadBtn download-url="/api/debug/last-recipe-json">
|
||||
<template v-slot:default="{ downloadFile }">
|
||||
<v-btn color="primary" @click="downloadFile">
|
||||
<v-icon left> mdi-code-braces </v-icon> {{ $t("about.download-recipe-json") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
</TheDownloadBtn>
|
||||
</v-card-actions>
|
||||
<v-divider></v-divider>
|
||||
</v-card>
|
||||
<LogCard />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from "@/api";
|
||||
import TheDownloadBtn from "@/components/UI/Buttons/TheDownloadBtn";
|
||||
import LogCard from "@/components/UI/LogCard.vue";
|
||||
export default {
|
||||
components: { TheDownloadBtn },
|
||||
components: { TheDownloadBtn, LogCard },
|
||||
data() {
|
||||
return {
|
||||
prettyInfo: [],
|
||||
|
|
|
|||
95
frontend/src/pages/Admin/Dashboard/StatCard.vue
Normal file
95
frontend/src/pages/Admin/Dashboard/StatCard.vue
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
w<template>
|
||||
<v-card v-bind="$attrs" :class="classes" class="v-card--material pa-3">
|
||||
<div class="d-flex grow flex-wrap">
|
||||
<v-sheet
|
||||
:class="{
|
||||
'pa-7': !$slots.image,
|
||||
}"
|
||||
:color="color"
|
||||
:max-height="icon ? 90 : undefined"
|
||||
:width="icon ? 'auto' : '100%'"
|
||||
elevation="6"
|
||||
class="text-start v-card--material__heading mb-n6"
|
||||
dark
|
||||
>
|
||||
<v-icon v-if="icon" size="32" v-text="icon" />
|
||||
<div v-if="text" class="headline font-weight-thin" v-text="text" />
|
||||
</v-sheet>
|
||||
|
||||
<div v-if="$slots['after-heading']" class="ml-auto">
|
||||
<slot name="after-heading" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
|
||||
<template v-if="$slots.actions">
|
||||
<v-divider class="mt-2" />
|
||||
|
||||
<v-card-actions class="pb-0">
|
||||
<slot name="actions" />
|
||||
</v-card-actions>
|
||||
</template>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MaterialCard",
|
||||
|
||||
props: {
|
||||
avatar: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "primary",
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
image: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
"v-card--material--has-heading": this.hasHeading,
|
||||
};
|
||||
},
|
||||
hasHeading() {
|
||||
return Boolean(this.$slots.heading || this.title || this.icon);
|
||||
},
|
||||
hasAltHeading() {
|
||||
return Boolean(this.$slots.heading || (this.title && this.icon));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-card--material
|
||||
&__avatar
|
||||
position: relative
|
||||
top: -64px
|
||||
margin-bottom: -32px
|
||||
|
||||
&__heading
|
||||
position: relative
|
||||
top: -40px
|
||||
transition: .3s ease
|
||||
z-index: 1
|
||||
</style>
|
||||
108
frontend/src/pages/Admin/Dashboard/index.vue
Normal file
108
frontend/src/pages/Admin/Dashboard/index.vue
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
<template>
|
||||
<div class="mt-15">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<StatCard icon="mdi-silverware-fork-knife">
|
||||
<template v-slot:after-heading>
|
||||
<div class="ml-auto text-right">
|
||||
<div class="body-3 grey--text font-weight-light" v-text="'Recipes'" />
|
||||
|
||||
<h3 class="display-2 font-weight-light text--primary">
|
||||
<small> {{ statistics.totalRecipes }}</small>
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:actions>
|
||||
<div class="d-flex row py-3 justify-space-around">
|
||||
<v-btn small color="primary">
|
||||
<v-icon left> mdi-tag </v-icon> Untagged {{ statistics.untaggedRecipes }}
|
||||
</v-btn>
|
||||
<v-btn small color="primary">
|
||||
<v-icon left> mdi-tag </v-icon> Uncategorized {{ statistics.uncategorizedRecipes }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</StatCard>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<StatCard icon="mdi-account">
|
||||
<template v-slot:after-heading>
|
||||
<div class="ml-auto text-right">
|
||||
<div class="body-3 grey--text font-weight-light" v-text="'Users'" />
|
||||
|
||||
<h3 class="display-2 font-weight-light text--primary">
|
||||
<small> {{ statistics.totalUsers }}</small>
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:actions>
|
||||
<div class="ml-auto">
|
||||
<v-btn color="primary" small to="/admin/manage-users?tab=users">
|
||||
<v-icon left>mdi-account</v-icon>
|
||||
Manage Users
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</StatCard>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<StatCard icon="mdi-account-group">
|
||||
<template v-slot:after-heading>
|
||||
<div class="ml-auto text-right">
|
||||
<div class="body-3 grey--text font-weight-light" v-text="'Groups'" />
|
||||
|
||||
<h3 class="display-2 font-weight-light text--primary">
|
||||
<small> {{ statistics.totalGroups }}</small>
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:actions>
|
||||
<div class="ml-auto">
|
||||
<v-btn color="primary" small to="/admin/manage-users?tab=groups">
|
||||
<v-icon left>mdi-account-group</v-icon>
|
||||
Manage Groups
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</StatCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from "@/api";
|
||||
import StatCard from "./StatCard";
|
||||
export default {
|
||||
components: { StatCard },
|
||||
data() {
|
||||
return {
|
||||
statistics: {
|
||||
totalGroups: 0,
|
||||
totalRecipes: 0,
|
||||
totalUsers: 0,
|
||||
uncategorizedRecipes: 0,
|
||||
untaggedRecipes: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getStatistics();
|
||||
},
|
||||
methods: {
|
||||
async getStatistics() {
|
||||
this.statistics = await api.meta.getStatistics();
|
||||
console.log(this.statistics);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-style {
|
||||
flex-grow: inherit;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,30 +4,30 @@
|
|||
<v-tabs v-model="tab" background-color="primary" centered dark icons-and-text>
|
||||
<v-tabs-slider></v-tabs-slider>
|
||||
|
||||
<v-tab>
|
||||
<v-tab href="#users">
|
||||
{{ $t("user.users") }}
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</v-tab>
|
||||
|
||||
<v-tab>
|
||||
<v-tab href="#sign-ups">
|
||||
{{ $t("signup.sign-up-links") }}
|
||||
<v-icon>mdi-account-plus-outline</v-icon>
|
||||
</v-tab>
|
||||
|
||||
<v-tab>
|
||||
<v-tab href="#groups">
|
||||
{{ $t("group.groups") }}
|
||||
<v-icon>mdi-account-group</v-icon>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-items v-model="tab">
|
||||
<v-tab-item>
|
||||
<v-tab-item value="users">
|
||||
<TheUserTable />
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
<v-tab-item value="sign-ups">
|
||||
<TheSignUpTable />
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
<v-tab-item value="groups">
|
||||
<GroupDashboard />
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
|
|
@ -42,9 +42,17 @@ import TheSignUpTable from "./TheSignUpTable";
|
|||
export default {
|
||||
components: { TheUserTable, GroupDashboard, TheSignUpTable },
|
||||
data() {
|
||||
return {
|
||||
tab: 0,
|
||||
};
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
tab: {
|
||||
set(tab) {
|
||||
this.$router.replace({ query: { ...this.$route.query, tab } });
|
||||
},
|
||||
get() {
|
||||
return this.$route.query.tab;
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch("requestAllGroups");
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import ManageUsers from "@/pages/Admin/ManageUsers";
|
|||
import Settings from "@/pages/Admin/Settings";
|
||||
import About from "@/pages/Admin/About";
|
||||
import ToolBox from "@/pages/Admin/ToolBox";
|
||||
import Dashboard from "@/pages/Admin/Dashboard";
|
||||
import { store } from "../store";
|
||||
|
||||
export const adminRoutes = {
|
||||
|
|
@ -87,5 +88,12 @@ export const adminRoutes = {
|
|||
title: "general.about",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "dashboard",
|
||||
component: Dashboard,
|
||||
meta: {
|
||||
title: "general.dashboard",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ from mealie.schema.theme import SiteTheme
|
|||
from mealie.schema.user import GroupInDB, UserInDB
|
||||
from sqlalchemy.orm.session import Session
|
||||
|
||||
|
||||
logger = getLogger()
|
||||
|
||||
|
||||
|
|
@ -35,6 +34,12 @@ class _Recipes(BaseDocument):
|
|||
|
||||
return f"{slug}.{extension}"
|
||||
|
||||
def count_uncategorized(self, session: Session) -> int:
|
||||
return session.query(self.sql_model).filter(RecipeModel.recipe_category == None).count()
|
||||
|
||||
def count_untagged(self, session: Session) -> int:
|
||||
return session.query(self.sql_model).filter(RecipeModel.tags == None).count()
|
||||
|
||||
|
||||
class _Categories(BaseDocument):
|
||||
def __init__(self) -> None:
|
||||
|
|
|
|||
|
|
@ -154,3 +154,10 @@ class BaseDocument:
|
|||
session.commit()
|
||||
|
||||
return results_as_model
|
||||
|
||||
def count_all(self, session: Session, match_key=None, match_value=None) -> int:
|
||||
|
||||
if None in [match_key, match_value]:
|
||||
return session.query(self.sql_model).count()
|
||||
else:
|
||||
return session.query(self.sql_model).filter_by(**{match_key: match_value}).count()
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue