mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-05 21:45:25 +02:00
feature/profile-cards (#391)
* unify format * pass variables * remove namespace * rename * group-card init * shuffle + icons * remove console.logs * token CRUD * update changelog * add profile link * consolidate mealplan to profile dashboard * update docs * add query parameter to search page * update test routes * update python depts * basic token tests Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
Hayden
GitHub
parent
f4384167f6
commit
95ec13161f
41 changed files with 977 additions and 449 deletions
|
|
@ -16,17 +16,10 @@ const usersURLs = {
|
|||
userID: id => `${userPrefix}/${id}`,
|
||||
password: id => `${userPrefix}/${id}/password`,
|
||||
resetPassword: id => `${userPrefix}/${id}/reset-password`,
|
||||
userAPICreate: `${userPrefix}/api-tokens`,
|
||||
userAPIDelete: id => `${userPrefix}/api-tokens/${id}`,
|
||||
};
|
||||
|
||||
function deleteErrorText(response) {
|
||||
switch (response.data.detail) {
|
||||
case "SUPER_USER":
|
||||
return i18n.t("user.error-cannot-delete-super-user");
|
||||
|
||||
default:
|
||||
return i18n.t("user.you-are-not-allowed-to-delete-this-user");
|
||||
}
|
||||
}
|
||||
export const userAPI = {
|
||||
async login(formData) {
|
||||
let response = await apiReq.post(authURLs.token, formData, null, function() {
|
||||
|
|
@ -90,4 +83,21 @@ export const userAPI = {
|
|||
() => i18n.t("user.password-has-been-reset-to-the-default-password")
|
||||
);
|
||||
},
|
||||
async createAPIToken(name) {
|
||||
const response = await apiReq.post(usersURLs.userAPICreate, { name });
|
||||
return response.data;
|
||||
},
|
||||
async deleteAPIToken(id) {
|
||||
const response = await apiReq.delete(usersURLs.userAPIDelete(id));
|
||||
return response.data;
|
||||
},
|
||||
};
|
||||
|
||||
const deleteErrorText = response => {
|
||||
switch (response.data.detail) {
|
||||
case "SUPER_USER":
|
||||
return i18n.t("user.error-cannot-delete-super-user");
|
||||
default:
|
||||
return i18n.t("user.you-are-not-allowed-to-delete-this-user");
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -100,7 +100,10 @@ export default {
|
|||
}
|
||||
},
|
||||
flat() {
|
||||
return this.selected.length > 0 && this.solo;
|
||||
if (this.selected) {
|
||||
return this.selected.length > 0 && this.solo;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -7,26 +7,50 @@
|
|||
<v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text @click="navigateRandom">
|
||||
Random
|
||||
<v-icon left>
|
||||
mdi-dice-multiple
|
||||
</v-icon>
|
||||
{{ $t("general.random") }}
|
||||
</v-btn>
|
||||
<v-menu offset-y v-if="$listeners.sort">
|
||||
<v-menu offset-y left v-if="$listeners.sort">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn text v-bind="attrs" v-on="on">
|
||||
<v-btn text v-bind="attrs" v-on="on" :loading="sortLoading">
|
||||
<v-icon left>
|
||||
mdi-sort
|
||||
</v-icon>
|
||||
{{ $t("general.sort") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item @click="sortRecipes(EVENTS.az)">
|
||||
<v-icon left>
|
||||
mdi-order-alphabetical-ascending
|
||||
</v-icon>
|
||||
<v-list-item-title>{{ $t("general.sort-alphabetically") }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="sortRecipes(EVENTS.rating)">
|
||||
<v-icon left>
|
||||
mdi-star
|
||||
</v-icon>
|
||||
<v-list-item-title>{{ $t("general.rating") }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="sortRecipes(EVENTS.created)">
|
||||
<v-icon left>
|
||||
mdi-new-box
|
||||
</v-icon>
|
||||
<v-list-item-title>{{ $t("general.created") }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="sortRecipes(EVENTS.updated)">
|
||||
<v-icon left>
|
||||
mdi-update
|
||||
</v-icon>
|
||||
<v-list-item-title>{{ $t("general.updated") }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="sortRecipes(EVENTS.created)">
|
||||
<v-list-item-title>{{ $t("general.created") }}</v-list-item-title>
|
||||
<v-list-item @click="sortRecipes(EVENTS.shuffle)">
|
||||
<v-icon left>
|
||||
mdi-shuffle-variant
|
||||
</v-icon>
|
||||
<v-list-item-title>{{ $t("general.shuffle") }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
|
@ -114,6 +138,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
sortLoading: false,
|
||||
cardLimit: 30,
|
||||
loading: false,
|
||||
EVENTS: {
|
||||
|
|
@ -121,6 +146,7 @@ export default {
|
|||
rating: "rating",
|
||||
created: "created",
|
||||
updated: "updated",
|
||||
shuffle: "shuffle",
|
||||
},
|
||||
};
|
||||
},
|
||||
|
|
@ -165,6 +191,7 @@ export default {
|
|||
this.$router.push(`/recipe/${recipe.slug}`);
|
||||
},
|
||||
sortRecipes(sortType) {
|
||||
this.sortLoading = true;
|
||||
let sortTarget = [...this.recipes];
|
||||
switch (sortType) {
|
||||
case this.EVENTS.az:
|
||||
|
|
@ -179,11 +206,16 @@ export default {
|
|||
case this.EVENTS.updated:
|
||||
utils.recipe.sortByUpdated(sortTarget);
|
||||
break;
|
||||
case this.EVENTS.shuffle:
|
||||
utils.recipe.shuffle(sortTarget);
|
||||
break;
|
||||
default:
|
||||
console.log("Unknown Event", sortType);
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit(SORT_EVENT, sortTarget);
|
||||
this.sortLoading = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div>
|
||||
<v-navigation-drawer v-model="showSidebar" width="180px" clipped app>
|
||||
<template v-slot:prepend>
|
||||
<v-list-item two-line v-if="isLoggedIn">
|
||||
<v-list-item two-line v-if="isLoggedIn" to="/admin/profile">
|
||||
<v-list-item-avatar color="accent" class="white--text">
|
||||
<img :src="userProfileImage" v-if="!hideImage" @error="hideImage = true" />
|
||||
<div v-else>
|
||||
|
|
@ -133,11 +133,6 @@ export default {
|
|||
to: "/admin/profile",
|
||||
title: this.$t("settings.profile"),
|
||||
},
|
||||
{
|
||||
icon: "mdi-food",
|
||||
to: "/admin/meal-planner",
|
||||
title: this.$t("meal-plan.meal-planner"),
|
||||
},
|
||||
];
|
||||
},
|
||||
adminLinks() {
|
||||
|
|
|
|||
|
|
@ -74,11 +74,12 @@
|
|||
"save": "Save",
|
||||
"settings": "Settings",
|
||||
"sort": "Sort",
|
||||
"sort-alphabetically": "A-Z",
|
||||
"sort-alphabetically": "Alphabetical",
|
||||
"status": "Status",
|
||||
"submit": "Submit",
|
||||
"success-count": "Success: {count}",
|
||||
"sunday": "Sunday",
|
||||
"shuffle": "Shuffle",
|
||||
"templates": "Templates:",
|
||||
"themes": "Themes",
|
||||
"thursday": "Thursday",
|
||||
|
|
|
|||
|
|
@ -1,137 +0,0 @@
|
|||
<template>
|
||||
<v-card>
|
||||
<v-card-title class="headline">
|
||||
{{ $t("meal-plan.meal-planner") }}
|
||||
</v-card-title>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text>
|
||||
<h2 class="mt-1">{{ $t("recipe.categories") }}</h2>
|
||||
|
||||
<CategoryTagSelector
|
||||
class="mt-4"
|
||||
:solo="true"
|
||||
:dense="false"
|
||||
v-model="groupSettings.categories"
|
||||
:return-object="true"
|
||||
:show-add="true"
|
||||
:hint="$t('meal-plan.only-recipes-with-these-categories-will-be-used-in-meal-plans')"
|
||||
/>
|
||||
</v-card-text>
|
||||
<v-divider> </v-divider>
|
||||
<v-card-text>
|
||||
<h2 class="mt-1 mb-4">
|
||||
{{ $t("settings.webhooks.meal-planner-webhooks") }}
|
||||
</h2>
|
||||
<p>
|
||||
{{
|
||||
$t(
|
||||
"settings.webhooks.the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at"
|
||||
)
|
||||
}}
|
||||
<strong>{{ groupSettings.webhookTime }}</strong>
|
||||
</p>
|
||||
|
||||
<v-row dense class="flex align-center">
|
||||
<v-switch class="mx-2" v-model="groupSettings.webhookEnable" :label="$t('general.enabled')"></v-switch>
|
||||
<TimePickerDialog @save-time="saveTime" class="ma-2" />
|
||||
<v-btn class="ma-2" color="info" @click="testWebhooks">
|
||||
<v-icon left> mdi-webhook </v-icon>
|
||||
{{ $t("settings.webhooks.test-webhooks") }}
|
||||
</v-btn>
|
||||
</v-row>
|
||||
|
||||
<v-row v-for="(url, index) in groupSettings.webhookUrls" :key="index" align=" center" dense>
|
||||
<v-col cols="1">
|
||||
<v-btn icon color="error" @click="removeWebhook(index)">
|
||||
<v-icon>mdi-minus</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
v-model="groupSettings.webhookUrls[index]"
|
||||
:label="$t('settings.webhooks.webhook-url')"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn icon color="success" @click="addWebhook">
|
||||
<v-icon>mdi-plus</v-icon>
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="success" @click="saveGroupSettings" class="mr-2 mb-1">
|
||||
<v-icon left> mdi-content-save </v-icon>
|
||||
{{ $t("general.save") }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from "@/api";
|
||||
import TimePickerDialog from "@/components/FormHelpers/TimePickerDialog";
|
||||
import CategoryTagSelector from "@/components/FormHelpers/CategoryTagSelector";
|
||||
export default {
|
||||
components: {
|
||||
TimePickerDialog,
|
||||
CategoryTagSelector,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
groupSettings: {
|
||||
name: "home",
|
||||
id: 1,
|
||||
mealplans: [],
|
||||
categories: [],
|
||||
webhookUrls: [],
|
||||
webhookTime: "00:00",
|
||||
webhookEnable: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
await this.$store.dispatch("requestCurrentGroup");
|
||||
this.getSiteSettings();
|
||||
},
|
||||
computed: {
|
||||
categories() {
|
||||
return this.$store.getters.getAllCategories;
|
||||
},
|
||||
isFlat() {
|
||||
return this.groupSettings.categories >= 1 ? true : false;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
saveTime(value) {
|
||||
this.groupSettings.webhookTime = value;
|
||||
},
|
||||
getSiteSettings() {
|
||||
let settings = this.$store.getters.getCurrentGroup;
|
||||
|
||||
this.groupSettings.name = settings.name;
|
||||
this.groupSettings.id = settings.id;
|
||||
this.groupSettings.categories = settings.categories;
|
||||
this.groupSettings.webhookUrls = settings.webhookUrls;
|
||||
this.groupSettings.webhookTime = settings.webhookTime;
|
||||
this.groupSettings.webhookEnable = settings.webhookEnable;
|
||||
},
|
||||
addWebhook() {
|
||||
this.groupSettings.webhookUrls.push(" ");
|
||||
},
|
||||
removeWebhook(index) {
|
||||
this.groupSettings.webhookUrls.splice(index, 1);
|
||||
},
|
||||
async saveGroupSettings() {
|
||||
if (await api.groups.update(this.groupSettings)) {
|
||||
await this.$store.dispatch("requestCurrentGroup");
|
||||
this.getSiteSettings();
|
||||
}
|
||||
},
|
||||
testWebhooks() {
|
||||
api.settings.testWebhooks();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
147
frontend/src/pages/Admin/Profile/APITokenCard.vue
Normal file
147
frontend/src/pages/Admin/Profile/APITokenCard.vue
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
<template>
|
||||
<StatCard icon="mdi-api" color="accent">
|
||||
<template v-slot:after-heading>
|
||||
<div class="ml-auto text-right">
|
||||
<div class="body-3 grey--text font-weight-light" v-text="'API Tokens'" />
|
||||
<h3 class="display-2 font-weight-light text--primary">
|
||||
<small> {{ user.tokens.length }} </small>
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:bottom>
|
||||
<v-subheader class="mb-n2">ACTIVE TOKENS</v-subheader>
|
||||
<v-virtual-scroll height="210" item-height="70" :items="user.tokens" class="mt-2">
|
||||
<template v-slot:default="{ item }">
|
||||
<v-divider></v-divider>
|
||||
<v-list-item @click.prevent>
|
||||
<v-list-item-avatar>
|
||||
<v-icon large dark color="accent">
|
||||
mdi-api
|
||||
</v-icon>
|
||||
</v-list-item-avatar>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.name"></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-action class="ml-auto">
|
||||
<v-btn large icon @click.stop="deleteToken(item.id)">
|
||||
<v-icon color="accent">mdi-delete</v-icon>
|
||||
</v-btn>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions class="pb-1 pt-3">
|
||||
<v-spacer></v-spacer>
|
||||
<BaseDialog
|
||||
:title="'Create an API Token'"
|
||||
title-icon="mdi-api"
|
||||
@submit="createToken"
|
||||
:submit-text="buttonText"
|
||||
:loading="loading"
|
||||
>
|
||||
<v-card-text>
|
||||
<v-form ref="newTokenForm">
|
||||
<v-text-field v-model="name" label="Token Name" required> </v-text-field>
|
||||
</v-form>
|
||||
|
||||
<div v-if="createdToken != ''">
|
||||
<v-textarea
|
||||
class="mb-0 pb-0"
|
||||
label="API Token"
|
||||
readonly
|
||||
v-model="createdToken"
|
||||
append-outer-icon="mdi-content-copy"
|
||||
@click:append-outer="copyToken"
|
||||
>
|
||||
</v-textarea>
|
||||
<v-subheader class="text-center">
|
||||
Copy this token for use with an external application. This token will not be viewable again.
|
||||
</v-subheader>
|
||||
</div>
|
||||
</v-card-text>
|
||||
|
||||
<template v-slot:open="{ open }">
|
||||
<v-btn color="success" @click="open">
|
||||
<v-icon left> mdi-plus </v-icon>
|
||||
{{ $t("general.create") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</v-card-actions>
|
||||
</template>
|
||||
</StatCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseDialog from "@/components/UI/Dialogs/BaseDialog";
|
||||
import StatCard from "@/components/UI/StatCard";
|
||||
import { api } from "@/api";
|
||||
import { validators } from "@/mixins/validators";
|
||||
import { initials } from "@/mixins/initials";
|
||||
export default {
|
||||
components: {
|
||||
BaseDialog,
|
||||
StatCard,
|
||||
},
|
||||
mixins: [validators, initials],
|
||||
data() {
|
||||
return {
|
||||
name: "",
|
||||
loading: false,
|
||||
createdToken: "",
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$store.dispatch("requestUserData");
|
||||
},
|
||||
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.getters.getUserData;
|
||||
},
|
||||
buttonText() {
|
||||
if (this.createdToken === "") {
|
||||
return "Create";
|
||||
} else {
|
||||
return "Close";
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
async createToken() {
|
||||
if (this.loading === true) {
|
||||
this.loading = false;
|
||||
this.$store.dispatch("requestUserData");
|
||||
this.createdToken = "";
|
||||
this.name = "";
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
if (this.$refs.newTokenForm.validate()) {
|
||||
const response = await api.users.createAPIToken(this.name);
|
||||
this.createdToken = response.token;
|
||||
}
|
||||
},
|
||||
async deleteToken(id) {
|
||||
await api.users.deleteAPIToken(id);
|
||||
this.$store.dispatch("requestUserData");
|
||||
},
|
||||
copyToken() {
|
||||
const copyText = this.createdToken;
|
||||
navigator.clipboard.writeText(copyText).then(
|
||||
() => console.log("Copied", copyText),
|
||||
() => console.log("Copied Failed", copyText)
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
214
frontend/src/pages/Admin/Profile/ProfileGroupCard.vue
Normal file
214
frontend/src/pages/Admin/Profile/ProfileGroupCard.vue
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
<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="257" item-height="64">
|
||||
<template v-slot:default="{ item }">
|
||||
<v-list-item :key="item.id" @click.prevent>
|
||||
<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>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
|
||||
<div class="mt-3">
|
||||
<h3 class="display-2 font-weight-light text--primary">
|
||||
<v-icon x-large>
|
||||
mdi-food-variant
|
||||
</v-icon>
|
||||
<small> Mealplan Settings </small>
|
||||
</h3>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-subheader>MEALPLAN CATEGORIES</v-subheader>
|
||||
<v-card-text class="mt-0 pt-0">
|
||||
{{ $t("meal-plan.only-recipes-with-these-categories-will-be-used-in-meal-plans") }}
|
||||
</v-card-text>
|
||||
<CategoryTagSelector
|
||||
:solo="true"
|
||||
:dense="false"
|
||||
v-model="groupSettings.categories"
|
||||
:return-object="true"
|
||||
:show-add="true"
|
||||
/>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-subheader>WEBHOOKS</v-subheader>
|
||||
<v-card-text class="mt-0 pt-0">
|
||||
{{
|
||||
$t(
|
||||
"settings.webhooks.the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at"
|
||||
)
|
||||
}}
|
||||
<strong>{{ groupSettings.webhookTime }}</strong>
|
||||
</v-card-text>
|
||||
<v-row dense class="flex align-center">
|
||||
<v-switch class="ml-5 mr-auto" v-model="groupSettings.webhookEnable" :label="$t('general.enabled')"></v-switch>
|
||||
<TimePickerDialog @save-time="saveTime" class="" />
|
||||
</v-row>
|
||||
|
||||
<v-card-text>
|
||||
<v-text-field
|
||||
prepend-icon="mdi-delete"
|
||||
v-for="(url, index) in groupSettings.webhookUrls"
|
||||
@click:prepend="removeWebhook(index)"
|
||||
:key="index"
|
||||
v-model="groupSettings.webhookUrls[index]"
|
||||
:label="$t('settings.webhooks.webhook-url')"
|
||||
></v-text-field>
|
||||
<v-card-actions class="pa-0">
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn small color="success" @click="addWebhook">
|
||||
<v-icon left> mdi-webhook </v-icon>
|
||||
New
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions class="pb-0">
|
||||
<v-btn class="ma-2" color="info" @click="testWebhooks">
|
||||
<v-icon left> mdi-webhook </v-icon>
|
||||
{{ $t("settings.webhooks.test-webhooks") }}
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="success" @click="saveGroupSettings">
|
||||
<v-icon left> mdi-content-save </v-icon>
|
||||
{{ $t("general.update") }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</template>
|
||||
</StatCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TimePickerDialog from "@/components/FormHelpers/TimePickerDialog";
|
||||
import CategoryTagSelector from "@/components/FormHelpers/CategoryTagSelector";
|
||||
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,
|
||||
CategoryTagSelector,
|
||||
TimePickerDialog,
|
||||
},
|
||||
mixins: [validators, initials],
|
||||
data() {
|
||||
return {
|
||||
todaysMeal: false,
|
||||
hideImage: false,
|
||||
passwordLoading: false,
|
||||
password: {
|
||||
current: "",
|
||||
newOne: "",
|
||||
newTwo: "",
|
||||
},
|
||||
groupSettings: {},
|
||||
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;
|
||||
},
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
this.getTodaysMeal();
|
||||
await this.$store.dispatch("requestCurrentGroup");
|
||||
this.getSiteSettings();
|
||||
},
|
||||
|
||||
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;
|
||||
},
|
||||
[""]
|
||||
);
|
||||
},
|
||||
getSiteSettings() {
|
||||
this.groupSettings = this.$store.getters.getCurrentGroup;
|
||||
},
|
||||
saveTime(value) {
|
||||
this.groupSettings.webhookTime = value;
|
||||
},
|
||||
addWebhook() {
|
||||
this.groupSettings.webhookUrls.push(" ");
|
||||
},
|
||||
removeWebhook(index) {
|
||||
this.groupSettings.webhookUrls.splice(index, 1);
|
||||
},
|
||||
async saveGroupSettings() {
|
||||
if (await api.groups.update(this.groupSettings)) {
|
||||
await this.$store.dispatch("requestCurrentGroup");
|
||||
this.getSiteSettings();
|
||||
}
|
||||
},
|
||||
testWebhooks() {
|
||||
api.settings.testWebhooks();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -35,9 +35,11 @@
|
|||
</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-divider></v-divider>
|
||||
<v-list-item @click="selectedTheme = item">
|
||||
<v-list-item-avatar>
|
||||
<v-icon large dark :color="item.colors.primary">
|
||||
|
|
@ -66,6 +68,7 @@
|
|||
</v-btn>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
<v-divider></v-divider>
|
||||
|
|
@ -116,7 +119,7 @@ export default {
|
|||
components: { StatCard, BaseDialog, ColorPickerDialog, VJsoneditor },
|
||||
data() {
|
||||
return {
|
||||
jsonEditor: true,
|
||||
jsonEditor: false,
|
||||
jsonEditorOptions: {
|
||||
mode: "code",
|
||||
search: false,
|
||||
|
|
@ -193,7 +196,6 @@ export default {
|
|||
this.availableThemes = await api.themes.requestAll();
|
||||
},
|
||||
editTheme(theme) {
|
||||
console.log(theme);
|
||||
this.defaultData = theme;
|
||||
this.newTheme = false;
|
||||
this.$refs.themeDialog.open();
|
||||
|
|
@ -201,11 +203,9 @@ export default {
|
|||
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);
|
||||
|
|
@ -213,7 +213,6 @@ export default {
|
|||
this.getAllThemes();
|
||||
},
|
||||
async deleteTheme() {
|
||||
console.log(this.defaultData);
|
||||
await api.themes.delete(this.defaultData.id);
|
||||
this.getAllThemes();
|
||||
},
|
||||
|
|
@ -3,25 +3,31 @@
|
|||
<v-row>
|
||||
<v-col cols="12" sm="12" lg="6">
|
||||
<UserCard />
|
||||
<ProfileThemeCard class="mt-10" />
|
||||
<APITokenCard class="mt-10" />
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" lg="6">
|
||||
<ProfileGroupCard />
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" lg="6"> </v-col>
|
||||
</v-row>
|
||||
<v-row class="mt-7">
|
||||
<v-col cols="12" sm="12" lg="6">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ThemeCard from "./ThemeCard";
|
||||
import ProfileThemeCard from "./ProfileThemeCard";
|
||||
import ProfileGroupCard from "./ProfileGroupCard";
|
||||
import APITokenCard from "./APITokenCard";
|
||||
import UserCard from "./UserCard";
|
||||
export default {
|
||||
components: {
|
||||
UserCard,
|
||||
ThemeCard,
|
||||
ProfileThemeCard,
|
||||
ProfileGroupCard,
|
||||
APITokenCard,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,6 @@
|
|||
<template>
|
||||
<v-container>
|
||||
<CardSection
|
||||
:sortable="true"
|
||||
:title="title"
|
||||
:recipes="recipes"
|
||||
:card-limit="9999"
|
||||
@sort="sortAZ"
|
||||
@sort-recent="sortRecent"
|
||||
/>
|
||||
<CardSection :sortable="true" :title="title" :recipes="shownRecipes" @sort="assignSorted" />
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -22,20 +15,30 @@ export default {
|
|||
return {
|
||||
title: "",
|
||||
recipes: [],
|
||||
sortedResults: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentCategory() {
|
||||
return this.$route.params.category;
|
||||
},
|
||||
shownRecipes() {
|
||||
if (this.sortedResults.length > 0) {
|
||||
return this.sortedResults;
|
||||
} else {
|
||||
return this.recipes;
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
async currentCategory() {
|
||||
this.sortedResults = [];
|
||||
this.getRecipes();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getRecipes();
|
||||
this.sortedResults = [];
|
||||
},
|
||||
methods: {
|
||||
async getRecipes() {
|
||||
|
|
@ -43,11 +46,8 @@ export default {
|
|||
this.title = data.name;
|
||||
this.recipes = data.recipes;
|
||||
},
|
||||
sortAZ() {
|
||||
this.recipes.sort((a, b) => (a.name > b.name ? 1 : -1));
|
||||
},
|
||||
sortRecent() {
|
||||
this.recipes.sort((a, b) => (a.dateAdded > b.dateAdded ? -1 : 1));
|
||||
assignSorted(val) {
|
||||
this.sortedResults = val.slice();
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,24 +1,23 @@
|
|||
<template>
|
||||
<v-container>
|
||||
<v-card flat height="100%">
|
||||
<v-app-bar flat>
|
||||
<v-spacer></v-spacer>
|
||||
<v-card-title class="text-center justify-center py-3 ">
|
||||
{{ title.toUpperCase() }}
|
||||
</v-card-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-app-bar color="transparent" flat class="mt-n1 rounded">
|
||||
<v-icon large left>
|
||||
mdi-tag-multiple-outline
|
||||
</v-icon>
|
||||
<v-toolbar-title class="headline"> {{ page.name }} </v-toolbar-title>
|
||||
</v-app-bar>
|
||||
|
||||
<div v-if="render">
|
||||
<v-tabs v-model="tab" background-color="transparent" grow>
|
||||
<v-tab v-for="item in categories" :key="item.slug">
|
||||
<v-tab v-for="item in page.categories" :key="item.slug" :href="`#${item.slug}`">
|
||||
{{ item.name }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-items v-model="tab">
|
||||
<v-tab-item v-for="(item, index) in categories" :key="item.slug + index">
|
||||
<CardSection class="mb-5 mx-1" :recipes="filterRecipe(item.slug)" />
|
||||
<v-tab-item v-for="(item, index) in page.categories" :key="item.slug + index" :value="item.slug">
|
||||
<CardSection class="mb-5 mx-1" :recipes="item.recipes" @sort="sortRecipes($event, index)" />
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</div>
|
||||
|
|
@ -36,8 +35,8 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
page: "",
|
||||
title: "",
|
||||
tab: null,
|
||||
render: false,
|
||||
recipeStore: [],
|
||||
categories: [],
|
||||
|
|
@ -47,6 +46,14 @@ export default {
|
|||
pageSlug() {
|
||||
return this.$route.params.customPage;
|
||||
},
|
||||
tab: {
|
||||
set(tab) {
|
||||
this.$router.replace({ query: { ...this.$route.query, tab } });
|
||||
},
|
||||
get() {
|
||||
return this.$route.query.tab;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
@ -61,27 +68,15 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
async buildPage() {
|
||||
const page = await api.siteSettings.getPage(this.pageSlug);
|
||||
this.title = page.name;
|
||||
this.categories = page.categories;
|
||||
page.categories.forEach(async element => {
|
||||
let categoryRecipes = await this.getRecipeByCategory(element.slug);
|
||||
this.recipeStore.push(categoryRecipes);
|
||||
});
|
||||
},
|
||||
async getRecipeByCategory(category) {
|
||||
return await api.categories.getRecipesInCategory(category);
|
||||
this.page = await api.siteSettings.getPage(this.pageSlug);
|
||||
},
|
||||
filterRecipe(slug) {
|
||||
const storeCategory = this.recipeStore.find(element => element.slug === slug);
|
||||
return storeCategory ? storeCategory.recipes : [];
|
||||
},
|
||||
sortRecipes(sortedRecipes, destKey) {
|
||||
this.page.categories[destKey].recipes = sortedRecipes;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.header-background {
|
||||
background-color: #121619;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,6 @@
|
|||
<template>
|
||||
<v-container>
|
||||
<CardSection
|
||||
:sortable="true"
|
||||
:title="title"
|
||||
:recipes="recipes"
|
||||
:card-limit="9999"
|
||||
@sort="sortAZ"
|
||||
@sort-recent="sortRecent"
|
||||
/>
|
||||
<CardSection :sortable="true" :title="title" :recipes="shownRecipes" @sort="assignSorted" />
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -22,20 +15,30 @@ export default {
|
|||
return {
|
||||
title: "",
|
||||
recipes: [],
|
||||
sortedResults: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentTag() {
|
||||
return this.$route.params.tag;
|
||||
},
|
||||
shownRecipes() {
|
||||
if (this.sortedResults.length > 0) {
|
||||
return this.sortedResults;
|
||||
} else {
|
||||
return this.recipes;
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
async currentTag() {
|
||||
this.getRecipes();
|
||||
this.sortedResults = [];
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getRecipes();
|
||||
this.sortedResults = [];
|
||||
},
|
||||
methods: {
|
||||
async getRecipes() {
|
||||
|
|
@ -43,11 +46,9 @@ export default {
|
|||
this.title = data.name;
|
||||
this.recipes = data.recipes;
|
||||
},
|
||||
sortAZ() {
|
||||
this.recipes.sort((a, b) => (a.name > b.name ? 1 : -1));
|
||||
},
|
||||
sortRecent() {
|
||||
this.recipes.sort((a, b) => (a.dateAdded > b.dateAdded ? -1 : 1));
|
||||
assignSorted(val) {
|
||||
console.log(val);
|
||||
this.sortedResults = val.slice();
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<template>
|
||||
<v-toolbar dense flat>
|
||||
<v-btn-toggle dense v-model="selected" tile color="primary accent-3" @change="emitMulti" group mandatory>
|
||||
<v-btn :value="false">
|
||||
<v-btn-toggle tile group v-model="selected" color="primary accent-3" @change="emitMulti" mandatory>
|
||||
<v-btn small :value="false">
|
||||
{{ $t("search.include") }}
|
||||
</v-btn>
|
||||
|
||||
<v-btn :value="true">
|
||||
<v-btn small :value="true">
|
||||
{{ $t("search.exclude") }}
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn-toggle dense v-model="match" tile color="primary accent-3" @change="emitMulti" group mandatory>
|
||||
<v-btn :value="false">
|
||||
<v-btn-toggle tile group v-model="match" color="primary accent-3" @change="emitMulti" mandatory>
|
||||
<v-btn small :value="false">
|
||||
{{ $t("search.and") }}
|
||||
</v-btn>
|
||||
<v-btn :value="true">
|
||||
<v-btn small :value="true">
|
||||
{{ $t("search.or") }}
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@
|
|||
{{ $t("search.tag-filter") }}
|
||||
</h3>
|
||||
<FilterSelector class="mb-1" @update="updateTagParams" />
|
||||
|
||||
<CategoryTagSelector
|
||||
:solo="true"
|
||||
:dense="false"
|
||||
|
|
@ -66,7 +65,6 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
searchString: "",
|
||||
maxResults: 21,
|
||||
searchResults: [],
|
||||
catFilter: {
|
||||
|
|
@ -96,6 +94,14 @@ export default {
|
|||
this.$store.dispatch("requestAllRecipes");
|
||||
},
|
||||
computed: {
|
||||
searchString: {
|
||||
set(q) {
|
||||
this.$router.replace({ query: { ...this.$route.query, q } });
|
||||
},
|
||||
get() {
|
||||
return this.$route.query.q || "";
|
||||
},
|
||||
},
|
||||
allRecipes() {
|
||||
return this.$store.getters.getAllRecipes;
|
||||
},
|
||||
|
|
@ -132,11 +138,6 @@ export default {
|
|||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
showRecipes(val) {
|
||||
console.log(val);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
assignFuzzy(val) {
|
||||
this.sortedResults = val;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import Admin from "@/pages/Admin";
|
||||
import MealPlanner from "@/pages/Admin/MealPlanner";
|
||||
import Migration from "@/pages/Admin/Migration";
|
||||
import Profile from "@/pages/Admin/Profile";
|
||||
import ManageUsers from "@/pages/Admin/ManageUsers";
|
||||
|
|
@ -29,13 +28,6 @@ export const adminRoutes = {
|
|||
title: "settings.profile",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "meal-planner",
|
||||
component: MealPlanner,
|
||||
meta: {
|
||||
title: "meal-plan.meal-planner",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "migrations",
|
||||
component: Migration,
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export const mealRoutes = [
|
|||
async function todaysMealRoute() {
|
||||
const response = await api.mealPlans.today();
|
||||
if (response.status == 200 && response.data) {
|
||||
return "/recipe/" + response.data;
|
||||
return "/recipe/" + response.data.slug;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,4 +28,22 @@ export const recipe = {
|
|||
randomRecipe(list) {
|
||||
return list[Math.floor(Math.random() * list.length)];
|
||||
},
|
||||
shuffle(list) {
|
||||
let last = list.length;
|
||||
let n;
|
||||
while (last > 0) {
|
||||
n = rand(last);
|
||||
swap(list, n, --last);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const rand = n =>
|
||||
Math.floor(Math.random() * n)
|
||||
|
||||
function swap(t, i, j) {
|
||||
let q = t[i];
|
||||
t[i] = t[j];
|
||||
t[j] = q;
|
||||
return t;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue