Make activity selector more user friendly

This commit is contained in:
Miah 2025-02-27 23:32:06 +00:00
commit 085aee9c19
2 changed files with 44 additions and 7 deletions

View file

@ -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",

View file

@ -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,