chore: Nuxt 4 upgrade (#7426)

frontend/app/components/Domain/User/UserInviteDialog.vue

@@ -0,0 +1,179 @@
+<template>
+  <BaseDialog
+    v-model="inviteDialog"
+    :title="$t('profile.get-invite-link')"
+    :icon="$globals.icons.accountPlusOutline"
+    color="primary"
+  >
+    <v-container>
+      <v-form class="mt-5">
+        <v-select
+          v-if="groups && groups.length"
+          v-model="selectedGroup"
+          :items="groups"
+          item-title="name"
+          item-value="id"
+          :return-object="false"
+          variant="filled"
+          :label="$t('group.user-group')"
+          :rules="[validators.required]"
+        />
+        <v-select
+          v-if="households && households.length"
+          v-model="selectedHousehold"
+          :items="filteredHouseholds"
+          item-title="name"
+          item-value="id"
+          :return-object="false"
+          variant="filled"
+          :label="$t('household.user-household')"
+          :rules="[validators.required]"
+        />
+        <v-row>
+          <v-col cols="9">
+            <v-text-field
+              v-model="generatedSignupLink"
+              :label="$t('profile.invite-link')"
+              type="text"
+              readonly
+              variant="filled"
+            />
+          </v-col>
+          <v-col
+            cols="3"
+            class="pl-1 mt-3"
+          >
+            <AppButtonCopy
+              :icon="false"
+              color="info"
+              :copy-text="generatedSignupLink"
+              :disabled="generatedSignupLink"
+            />
+          </v-col>
+        </v-row>
+        <v-text-field
+          v-model="sendTo"
+          :label="$t('user.email')"
+          :rules="[validators.email]"
+          variant="outlined"
+          @keydown.enter="sendInvite"
+        />
+      </v-form>
+    </v-container>
+    <template #custom-card-action>
+      <BaseButton
+        :disabled="!validEmail"
+        :loading="loading"
+        :icon="$globals.icons.email"
+        @click="sendInvite"
+      >
+        {{ $t("group.invite") }}
+      </BaseButton>
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import { useUserApi } from "@/composables/api";
+import BaseDialog from "~/components/global/BaseDialog.vue";
+import AppButtonCopy from "~/components/global/AppButtonCopy.vue";
+import BaseButton from "~/components/global/BaseButton.vue";
+import { validators } from "~/composables/use-validators";
+import { alert } from "~/composables/use-toast";
+import type { GroupInDB } from "~/lib/api/types/user";
+import type { HouseholdInDB } from "~/lib/api/types/household";
+import { useGroups } from "~/composables/use-groups";
+import { useAdminHouseholds } from "~/composables/use-households";
+
+const inviteDialog = defineModel<boolean>("modelValue", { type: Boolean, default: false });
+
+const i18n = useI18n();
+const auth = useMealieAuth();
+
+const isAdmin = computed(() => auth.user.value?.admin);
+const token = ref("");
+const selectedGroup = ref<string | null>(null);
+const selectedHousehold = ref<string | null>(null);
+const groups = ref<GroupInDB[]>([]);
+const households = ref<HouseholdInDB[]>([]);
+const api = useUserApi();
+
+const fetchGroupsAndHouseholds = () => {
+  if (isAdmin.value) {
+    const groupsResponse = useGroups();
+    const householdsResponse = useAdminHouseholds();
+    watchEffect(() => {
+      groups.value = groupsResponse.groups.value || [];
+      households.value = householdsResponse.households.value || [];
+    });
+  }
+};
+
+async function getSignupLink(group: string | null = null, household: string | null = null) {
+  const payload = (group && household) ? { uses: 1, group_id: group, household_id: household } : { uses: 1 };
+  const { data } = await api.households.createInvitation(payload);
+  if (data) {
+    token.value = data.token;
+  }
+}
+
+const filteredHouseholds = computed(() => {
+  if (!selectedGroup.value) return [];
+  return households.value?.filter(household => household.groupId === selectedGroup.value);
+});
+
+function constructLink(tokenVal: string) {
+  return tokenVal ? `${window.location.origin}/register?token=${tokenVal}` : "";
+}
+
+const generatedSignupLink = computed(() => constructLink(token.value));
+
+// Email Invitation
+const state = reactive({
+  loading: false,
+  sendTo: "",
+});
+const { loading, sendTo } = toRefs(state);
+
+async function sendInvite() {
+  state.loading = true;
+  if (!token.value) {
+    getSignupLink(selectedGroup.value, selectedHousehold.value);
+  }
+  const { data } = await api.email.sendInvitation({
+    email: state.sendTo,
+    token: token.value,
+  });
+
+  if (data && data.success) {
+    alert.success(i18n.t("profile.email-sent"));
+  }
+  else {
+    alert.error(i18n.t("profile.error-sending-email"));
+  }
+  state.loading = false;
+  inviteDialog.value = false;
+}
+
+const validEmail = computed(() => {
+  if (sendTo.value === "") return false;
+  const valid = validators.email(sendTo.value);
+  return valid === true;
+});
+
+// Watchers (replacing options API watchers)
+watch(inviteDialog, (val) => {
+  if (val && !isAdmin.value) {
+    getSignupLink();
+  }
+});
+
+watch(selectedHousehold, (newVal) => {
+  if (newVal && selectedGroup.value) {
+    getSignupLink(selectedGroup.value, selectedHousehold.value);
+  }
+});
+
+// initial fetch
+fetchGroupsAndHouseholds();
+</script>