mirror of
https://github.com/hay-kot/mealie.git
synced 2025-08-21 05:53:36 -07:00
Make activity selector more user friendly
This commit is contained in:
parent
352a824b98
commit
085aee9c19
2 changed files with 44 additions and 7 deletions
|
@ -1047,7 +1047,8 @@
|
||||||
"dont-want-to-see-this-anymore-be-sure-to-change-your-email": "Don't want to see this anymore? Be sure to change your email in your user settings!",
|
"dont-want-to-see-this-anymore-be-sure-to-change-your-email": "Don't want to see this anymore? Be sure to change your email in your user settings!",
|
||||||
"forgot-password": "Forgot Password",
|
"forgot-password": "Forgot Password",
|
||||||
"forgot-password-text": "Please enter your email address and we will send you a link to reset your password.",
|
"forgot-password-text": "Please enter your email address and we will send you a link to reset your password.",
|
||||||
"changes-reflected-immediately": "Changes to this user will be reflected immediately."
|
"changes-reflected-immediately": "Changes to this user will be reflected immediately.",
|
||||||
|
"default-activity": "Default Activity"
|
||||||
},
|
},
|
||||||
"language-dialog": {
|
"language-dialog": {
|
||||||
"translated": "translated",
|
"translated": "translated",
|
||||||
|
|
|
@ -45,6 +45,8 @@
|
||||||
<v-text-field v-model="userCopy.defaultActivity" :label="'Default Activity'" validate-on-blur
|
<v-text-field v-model="userCopy.defaultActivity" :label="'Default Activity'" validate-on-blur
|
||||||
required>
|
required>
|
||||||
</v-text-field>
|
</v-text-field>
|
||||||
|
<v-combobox v-model="selectedDefaultActivity" :label="$t('user.default-activity')"
|
||||||
|
:items="activityOptions" validate-on-blur />
|
||||||
</v-form>
|
</v-form>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
|
@ -107,12 +109,19 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { ref, reactive, defineComponent, computed, useContext, watch, toRefs } from "@nuxtjs/composition-api";
|
||||||
|
import { TranslateResult } from "vue-i18n";
|
||||||
import { useUserApi } from "~/composables/api";
|
import { useUserApi } from "~/composables/api";
|
||||||
import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
|
import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
|
||||||
import UserPasswordStrength from "~/components/Domain/User/UserPasswordStrength.vue";
|
import UserPasswordStrength from "~/components/Domain/User/UserPasswordStrength.vue";
|
||||||
import { validators } from "~/composables/use-validators";
|
import { validators } from "~/composables/use-validators";
|
||||||
import type { VForm } from "~/types/auto-forms";
|
import type { VForm } from "~/types/auto-forms";
|
||||||
|
|
||||||
|
type TRoute = string;
|
||||||
|
type TActivityLabel = TranslateResult;
|
||||||
|
|
||||||
|
const DEFAULT_ACTIVITY = "/g/home"
|
||||||
|
|
||||||
export default defineNuxtComponent({
|
export default defineNuxtComponent({
|
||||||
components: {
|
components: {
|
||||||
UserAvatar,
|
UserAvatar,
|
||||||
|
@ -120,18 +129,43 @@ export default defineNuxtComponent({
|
||||||
},
|
},
|
||||||
middleware: "sidebase-auth",
|
middleware: "sidebase-auth",
|
||||||
setup() {
|
setup() {
|
||||||
const i18n = useI18n();
|
const { $auth, i18n } = useContext();
|
||||||
const $auth = useMealieAuth();
|
const user = computed(() => $auth.user as unknown as UserOut);
|
||||||
const user = computed(() => $auth.user.value);
|
const groupSlug = computed(() => user.value.groupSlug)
|
||||||
|
|
||||||
useSeoMeta({
|
const selectableActivities = new Map<TActivityLabel, TRoute>([
|
||||||
title: i18n.t("settings.profile"),
|
[i18n.t("general.recipes"), groupSlug ? `/g/${groupSlug.value}` : DEFAULT_ACTIVITY],
|
||||||
});
|
[i18n.t("recipe-finder.recipe-finder"), `/g/${groupSlug.value}/recipes/finder`],
|
||||||
|
[i18n.t("meal-plan.meal-planner"), "/household/mealplan/planner/view"],
|
||||||
|
[i18n.t("shopping-list.shopping-lists"), "/shopping-lists"],
|
||||||
|
[i18n.t("recipe.timeline"), `/g/${groupSlug.value}/recipes/timeline`],
|
||||||
|
[i18n.t("cookbook.cookbooks"), `/g/${groupSlug.value}/cookbooks`],
|
||||||
|
])
|
||||||
|
|
||||||
|
function getActivityRoute(label?: TActivityLabel): TRoute {
|
||||||
|
return selectableActivities.get(label ?? "") ?? DEFAULT_ACTIVITY
|
||||||
|
}
|
||||||
|
|
||||||
|
function getActivityLabel(route?: TRoute): TActivityLabel {
|
||||||
|
return selectableActivities
|
||||||
|
.keys()
|
||||||
|
.find(label => selectableActivities.get(label as string) === (route ?? DEFAULT_ACTIVITY)) as string
|
||||||
|
// Safe assertion: DEFAULT_ACTIVITY will always exist in the map
|
||||||
|
}
|
||||||
|
const selectedDefaultActivity = ref(getActivityLabel(user.value.defaultActivity))
|
||||||
|
const activityOptions = [...selectableActivities.keys()]
|
||||||
|
|
||||||
watch(user, () => {
|
watch(user, () => {
|
||||||
userCopy.value = { ...user.value };
|
userCopy.value = { ...user.value };
|
||||||
});
|
});
|
||||||
|
|
||||||
|
watch(selectedDefaultActivity, () => {
|
||||||
|
userCopy.value = {
|
||||||
|
...userCopy.value,
|
||||||
|
defaultActivity: getActivityRoute(selectedDefaultActivity.value)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
const userCopy = ref({ ...user.value });
|
const userCopy = ref({ ...user.value });
|
||||||
|
|
||||||
const api = useUserApi();
|
const api = useUserApi();
|
||||||
|
@ -179,6 +213,8 @@ export default defineNuxtComponent({
|
||||||
updateUser,
|
updateUser,
|
||||||
updatePassword,
|
updatePassword,
|
||||||
userCopy,
|
userCopy,
|
||||||
|
selectedDefaultActivity,
|
||||||
|
activityOptions,
|
||||||
password,
|
password,
|
||||||
domUpdatePassword,
|
domUpdatePassword,
|
||||||
passwordsMatch,
|
passwordsMatch,
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue