mirror of
https://github.com/hay-kot/mealie.git
synced 2025-08-22 22:43:34 -07:00
group-card init
This commit is contained in:
hay-kot
parent
eb9feaa081
commit
45b7667814
6 changed files with 139 additions and 233 deletions
125
frontend/src/pages/Admin/Profile/ProfileGroupCard.vue
Normal file
125
frontend/src/pages/Admin/Profile/ProfileGroupCard.vue
Normal file
|
|
@ -0,0 +1,125 @@
|
||||||
|
<template>
|
||||||
|
<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="$t('group.group')" />
|
||||||
|
|
||||||
|
<h3 class="display-2 font-weight-light text--primary">
|
||||||
|
<small> {{ currentGroup.name }} </small>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-slot:bottom>
|
||||||
|
<div v-if="todaysMeal">
|
||||||
|
<v-subheader>DINNER TONIGHT</v-subheader>
|
||||||
|
<MobileRecipeCard
|
||||||
|
:name="todaysMeal.name"
|
||||||
|
:slug="todaysMeal.slug"
|
||||||
|
:description="todaysMeal.description"
|
||||||
|
:rating="todaysMeal.rating"
|
||||||
|
:tags="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<v-subheader>USERS</v-subheader>
|
||||||
|
<v-divider></v-divider>
|
||||||
|
|
||||||
|
<v-virtual-scroll v-if="currentGroup.users" :items="currentGroup.users" height="260" item-height="64">
|
||||||
|
<template v-slot:default="{ item }">
|
||||||
|
<v-list-item :key="item.id">
|
||||||
|
<v-list-item-action>
|
||||||
|
<v-btn fab small depressed color="primary">
|
||||||
|
{{ generateInitials(item.fullName) }}
|
||||||
|
</v-btn>
|
||||||
|
</v-list-item-action>
|
||||||
|
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>
|
||||||
|
{{ item.fullName }}
|
||||||
|
</v-list-item-title>
|
||||||
|
</v-list-item-content>
|
||||||
|
<!-- TODO: Future Profile Pages-->
|
||||||
|
<!-- <v-list-item-action>
|
||||||
|
<v-icon small>
|
||||||
|
mdi-open-in-new
|
||||||
|
</v-icon>
|
||||||
|
</v-list-item-action> -->
|
||||||
|
</v-list-item>
|
||||||
|
|
||||||
|
<v-divider></v-divider>
|
||||||
|
</template>
|
||||||
|
</v-virtual-scroll>
|
||||||
|
</template>
|
||||||
|
</StatCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import StatCard from "@/components/UI/StatCard";
|
||||||
|
import MobileRecipeCard from "@/components/Recipe/MobileRecipeCard";
|
||||||
|
import { validators } from "@/mixins/validators";
|
||||||
|
import { initials } from "@/mixins/initials";
|
||||||
|
import { api } from "@/api";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
StatCard,
|
||||||
|
MobileRecipeCard,
|
||||||
|
},
|
||||||
|
mixins: [validators, initials],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
todaysMeal: false,
|
||||||
|
hideImage: false,
|
||||||
|
passwordLoading: false,
|
||||||
|
password: {
|
||||||
|
current: "",
|
||||||
|
newOne: "",
|
||||||
|
newTwo: "",
|
||||||
|
},
|
||||||
|
showPassword: false,
|
||||||
|
loading: false,
|
||||||
|
user: {
|
||||||
|
fullName: "",
|
||||||
|
email: "",
|
||||||
|
group: "",
|
||||||
|
admin: false,
|
||||||
|
id: 0,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
userProfileImage() {
|
||||||
|
this.resetImage();
|
||||||
|
return `api/users/${this.user.id}/image`;
|
||||||
|
},
|
||||||
|
currentGroup() {
|
||||||
|
return this.$store.getters.getCurrentGroup;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.getTodaysMeal();
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
async getTodaysMeal() {
|
||||||
|
const response = await api.mealPlans.today();
|
||||||
|
this.todaysMeal = response.data;
|
||||||
|
},
|
||||||
|
generateInitials(text) {
|
||||||
|
const allNames = text.trim().split(" ");
|
||||||
|
return allNames.reduce(
|
||||||
|
(acc, curr, index) => {
|
||||||
|
if (index === 0 || index === allNames.length - 1) {
|
||||||
|
acc = `${acc}${curr.charAt(0).toUpperCase()}`;
|
||||||
|
}
|
||||||
|
return acc;
|
||||||
|
},
|
||||||
|
[""]
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
@ -35,9 +35,11 @@
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-btn-toggle>
|
</v-btn-toggle>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:bottom>
|
<template v-slot:bottom>
|
||||||
<v-virtual-scroll height="290" item-height="70" :items="availableThemes" class="mt-2">
|
<v-virtual-scroll height="290" item-height="70" :items="availableThemes" class="mt-2">
|
||||||
<template v-slot:default="{ item }">
|
<template v-slot:default="{ item }">
|
||||||
|
<v-divider></v-divider>
|
||||||
<v-list-item @click="selectedTheme = item">
|
<v-list-item @click="selectedTheme = item">
|
||||||
<v-list-item-avatar>
|
<v-list-item-avatar>
|
||||||
<v-icon large dark :color="item.colors.primary">
|
<v-icon large dark :color="item.colors.primary">
|
||||||
|
|
@ -66,6 +68,7 @@
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-list-item-action>
|
</v-list-item-action>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
<v-divider></v-divider>
|
||||||
</template>
|
</template>
|
||||||
</v-virtual-scroll>
|
</v-virtual-scroll>
|
||||||
<v-divider></v-divider>
|
<v-divider></v-divider>
|
||||||
|
|
|
||||||
|
|
@ -1,225 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<StatCard icon="mdi-format-color-fill" :color="color">
|
|
||||||
<template v-slot:after-heading>
|
|
||||||
<div class="ml-auto text-right">
|
|
||||||
<div class="body-3 grey--text font-weight-light" v-text="$t('general.themes')" />
|
|
||||||
|
|
||||||
<h3 class="display-2 font-weight-light text--primary">
|
|
||||||
<small> {{ selectedTheme.name }} </small>
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:actions>
|
|
||||||
<v-btn-toggle v-model="darkMode" color="primary " mandatory>
|
|
||||||
<v-btn small value="system">
|
|
||||||
<v-icon>mdi-desktop-tower-monitor</v-icon>
|
|
||||||
<span class="ml-1" v-show="$vuetify.breakpoint.smAndUp">
|
|
||||||
{{ $t("settings.theme.default-to-system") }}
|
|
||||||
</span>
|
|
||||||
</v-btn>
|
|
||||||
|
|
||||||
<v-btn small value="light">
|
|
||||||
<v-icon>mdi-white-balance-sunny</v-icon>
|
|
||||||
<span class="ml-1" v-show="$vuetify.breakpoint.smAndUp">
|
|
||||||
{{ $t("settings.theme.light") }}
|
|
||||||
</span>
|
|
||||||
</v-btn>
|
|
||||||
|
|
||||||
<v-btn small value="dark">
|
|
||||||
<v-icon>mdi-weather-night</v-icon>
|
|
||||||
<span class="ml-1" v-show="$vuetify.breakpoint.smAndUp">
|
|
||||||
{{ $t("settings.theme.dark") }}
|
|
||||||
</span>
|
|
||||||
</v-btn>
|
|
||||||
</v-btn-toggle>
|
|
||||||
</template>
|
|
||||||
<template v-slot:bottom>
|
|
||||||
<v-virtual-scroll height="290" item-height="70" :items="availableThemes" class="mt-2">
|
|
||||||
<template v-slot:default="{ item }">
|
|
||||||
<v-list-item @click="selectedTheme = item">
|
|
||||||
<v-list-item-avatar>
|
|
||||||
<v-icon large dark :color="item.colors.primary">
|
|
||||||
mdi-format-color-fill
|
|
||||||
</v-icon>
|
|
||||||
</v-list-item-avatar>
|
|
||||||
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-list-item-title v-text="item.name"></v-list-item-title>
|
|
||||||
|
|
||||||
<v-row flex align-center class="mt-2 justify-space-around px-4 pb-2">
|
|
||||||
<v-sheet
|
|
||||||
class="rounded flex mx-1"
|
|
||||||
v-for="(item, index) in item.colors"
|
|
||||||
:key="index"
|
|
||||||
:color="item"
|
|
||||||
height="20"
|
|
||||||
>
|
|
||||||
</v-sheet>
|
|
||||||
</v-row>
|
|
||||||
</v-list-item-content>
|
|
||||||
|
|
||||||
<v-list-item-action class="ml-auto">
|
|
||||||
<v-btn large icon @click.stop="editTheme(item)">
|
|
||||||
<v-icon color="accent">mdi-square-edit-outline</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</v-list-item-action>
|
|
||||||
</v-list-item>
|
|
||||||
</template>
|
|
||||||
</v-virtual-scroll>
|
|
||||||
<v-divider></v-divider>
|
|
||||||
<v-card-actions>
|
|
||||||
<v-spacer class="mx-2"></v-spacer>
|
|
||||||
<v-btn class="my-1 mb-n1" :color="color" @click="createTheme">
|
|
||||||
<v-icon left> mdi-plus </v-icon> {{ $t("general.create") }}
|
|
||||||
</v-btn>
|
|
||||||
</v-card-actions>
|
|
||||||
</template>
|
|
||||||
</StatCard>
|
|
||||||
<BaseDialog
|
|
||||||
:loading="loading"
|
|
||||||
:title="modalLabel.title"
|
|
||||||
title-icon="mdi-format-color-fill"
|
|
||||||
modal-width="700"
|
|
||||||
ref="themeDialog"
|
|
||||||
:submit-text="modalLabel.button"
|
|
||||||
@submit="processSubmit"
|
|
||||||
@delete="deleteTheme"
|
|
||||||
>
|
|
||||||
<v-card-text class="mt-3">
|
|
||||||
<v-text-field
|
|
||||||
:label="$t('settings.theme.theme-name')"
|
|
||||||
v-model="defaultData.name"
|
|
||||||
:rules="[rules.required]"
|
|
||||||
:append-outer-icon="jsonEditor ? 'mdi-form-select' : 'mdi-code-braces'"
|
|
||||||
@click:append-outer="jsonEditor = !jsonEditor"
|
|
||||||
></v-text-field>
|
|
||||||
<v-row dense dflex wrap justify-content-center v-if="defaultData.colors && !jsonEditor">
|
|
||||||
<v-col cols="12" sm="6" v-for="(_, key) in defaultData.colors" :key="key">
|
|
||||||
<ColorPickerDialog :button-text="labels[key]" v-model="defaultData.colors[key]" />
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
<VJsoneditor @error="logError()" v-else v-model="defaultData" height="250px" :options="jsonEditorOptions" />
|
|
||||||
</v-card-text>
|
|
||||||
</BaseDialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import VJsoneditor from "v-jsoneditor";
|
|
||||||
import { api } from "@/api";
|
|
||||||
import ColorPickerDialog from "@/components/FormHelpers/ColorPickerDialog";
|
|
||||||
import BaseDialog from "@/components/UI/Dialogs/BaseDialog";
|
|
||||||
import StatCard from "@/components/UI/StatCard";
|
|
||||||
export default {
|
|
||||||
components: { StatCard, BaseDialog, ColorPickerDialog, VJsoneditor },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
jsonEditor: true,
|
|
||||||
jsonEditorOptions: {
|
|
||||||
mode: "code",
|
|
||||||
search: false,
|
|
||||||
mainMenuBar: false,
|
|
||||||
},
|
|
||||||
availableThemes: [],
|
|
||||||
color: "accent",
|
|
||||||
newTheme: false,
|
|
||||||
loading: false,
|
|
||||||
defaultData: {
|
|
||||||
name: "",
|
|
||||||
colors: {
|
|
||||||
primary: "#E58325",
|
|
||||||
accent: "#00457A",
|
|
||||||
secondary: "#973542",
|
|
||||||
success: "#43A047",
|
|
||||||
info: "#4990BA",
|
|
||||||
warning: "#FF4081",
|
|
||||||
error: "#EF5350",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
required: val => !!val || this.$t("settings.theme.theme-name-is-required"),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
labels() {
|
|
||||||
return {
|
|
||||||
primary: this.$t("settings.theme.primary"),
|
|
||||||
secondary: this.$t("settings.theme.secondary"),
|
|
||||||
accent: this.$t("settings.theme.accent"),
|
|
||||||
success: this.$t("settings.theme.success"),
|
|
||||||
info: this.$t("settings.theme.info"),
|
|
||||||
warning: this.$t("settings.theme.warning"),
|
|
||||||
error: this.$t("settings.theme.error"),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
modalLabel() {
|
|
||||||
if (this.newTheme) {
|
|
||||||
return {
|
|
||||||
title: this.$t("settings.add-a-new-theme"),
|
|
||||||
button: this.$t("general.create"),
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
return {
|
|
||||||
title: "Update Theme",
|
|
||||||
button: this.$t("general.update"),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
selectedTheme: {
|
|
||||||
set(val) {
|
|
||||||
this.$store.commit("setTheme", val);
|
|
||||||
},
|
|
||||||
get() {
|
|
||||||
return this.$store.getters.getActiveTheme;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
darkMode: {
|
|
||||||
set(val) {
|
|
||||||
this.$store.commit("setDarkMode", val);
|
|
||||||
},
|
|
||||||
get() {
|
|
||||||
return this.$store.getters.getDarkMode;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
async mounted() {
|
|
||||||
await this.getAllThemes();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async getAllThemes() {
|
|
||||||
this.availableThemes = await api.themes.requestAll();
|
|
||||||
},
|
|
||||||
editTheme(theme) {
|
|
||||||
console.log(theme);
|
|
||||||
this.defaultData = theme;
|
|
||||||
this.newTheme = false;
|
|
||||||
this.$refs.themeDialog.open();
|
|
||||||
},
|
|
||||||
createTheme() {
|
|
||||||
this.newTheme = true;
|
|
||||||
this.$refs.themeDialog.open();
|
|
||||||
console.log("Create Theme");
|
|
||||||
},
|
|
||||||
async processSubmit() {
|
|
||||||
if (this.newTheme) {
|
|
||||||
console.log("New Theme");
|
|
||||||
await api.themes.create(this.defaultData);
|
|
||||||
} else {
|
|
||||||
await api.themes.update(this.defaultData);
|
|
||||||
}
|
|
||||||
this.getAllThemes();
|
|
||||||
},
|
|
||||||
async deleteTheme() {
|
|
||||||
console.log(this.defaultData);
|
|
||||||
await api.themes.delete(this.defaultData.id);
|
|
||||||
this.getAllThemes();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
</style>
|
|
||||||
|
|
@ -3,25 +3,28 @@
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col cols="12" sm="12" lg="6">
|
<v-col cols="12" sm="12" lg="6">
|
||||||
<UserCard />
|
<UserCard />
|
||||||
|
<ProfileThemeCard class="mt-10" />
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="12" sm="12" lg="6">
|
||||||
|
<ProfileGroupCard />
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="12" sm="12" lg="6"> </v-col>
|
|
||||||
</v-row>
|
</v-row>
|
||||||
<v-row class="mt-7">
|
<v-row class="mt-7">
|
||||||
<v-col cols="12" sm="12" lg="6">
|
<v-col cols="12" sm="12" lg="6"> </v-col>
|
||||||
<ThemeCard />
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" sm="12" lg="6"> </v-col>
|
<v-col cols="12" sm="12" lg="6"> </v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ThemeCard from "./ThemeCard";
|
import ProfileThemeCard from "./ProfileThemeCard";
|
||||||
|
import ProfileGroupCard from "./ProfileGroupCard";
|
||||||
import UserCard from "./UserCard";
|
import UserCard from "./UserCard";
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
UserCard,
|
UserCard,
|
||||||
ThemeCard,
|
ProfileThemeCard,
|
||||||
|
ProfileGroupCard,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,7 @@ export const mealRoutes = [
|
||||||
async function todaysMealRoute() {
|
async function todaysMealRoute() {
|
||||||
const response = await api.mealPlans.today();
|
const response = await api.mealPlans.today();
|
||||||
if (response.status == 200 && response.data) {
|
if (response.status == 200 && response.data) {
|
||||||
return "/recipe/" + response.data;
|
return "/recipe/" + response.data.slug;
|
||||||
} else {
|
} else {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -75,7 +75,7 @@ def get_today(session: Session = Depends(generate_session), current_user: UserIn
|
||||||
group_in_db: GroupInDB = db.groups.get(session, current_user.group, "name")
|
group_in_db: GroupInDB = db.groups.get(session, current_user.group, "name")
|
||||||
recipe = get_todays_meal(session, group_in_db)
|
recipe = get_todays_meal(session, group_in_db)
|
||||||
if recipe:
|
if recipe:
|
||||||
return recipe.slug
|
return recipe
|
||||||
|
|
||||||
|
|
||||||
@router.get("/today/image", tags=["Meal Plan"])
|
@router.get("/today/image", tags=["Meal Plan"])
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue