refactor group settings to use group settings form

frontend/components/Domain/Group/GroupPreferencesEditor.vue

@@ -1,11 +1,24 @@
 <template>
   <div v-if="preferences">
-    <BaseCardSectionTitle :title="$t('group.general-preferences')" />
-    <v-checkbox
-      v-model="preferences.privateGroup"
-      class="mt-n4"
-      :label="$t('group.private-group')"
-    />
+    <BaseCardSectionTitle :title="$t('group.group-preferences')" />
+    <div class="mb-6">
+      <v-checkbox
+        v-model="preferences.privateGroup"
+        hide-details
+        density="compact"
+        color="primary"
+        :label="$t('group.private-group')"
+      />
+      <div class="ml-8">
+        <p class="text-subtitle-2 my-0 py-0">
+          {{ $t("group.private-group-description") }}
+        </p>
+        <DocLink
+          class="mt-2"
+          link="/documentation/getting-started/faq/#how-do-private-groups-and-recipes-work"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -14,5 +27,3 @@ import type { ReadGroupPreferences } from "~/lib/api/types/user";
 
 const preferences = defineModel<ReadGroupPreferences>({ required: true });
 </script>
-
-<style lang="scss" scoped></style>

frontend/composables/use-groups.ts

@@ -34,6 +34,8 @@ export const useGroupSelf = function () {
       if (data) {
         groupSelfRef.value.preferences = data;
       }
+
+      return data || undefined;
     },
   };
 

frontend/pages/admin/manage/groups/[id].vue

@@ -98,6 +98,7 @@ async function handleSubmit() {
       window.location.reload();
     }
     group.value = data;
+    alert.success(i18n.t("settings.settings-updated"));
   }
   else {
     alert.error(i18n.t("settings.settings-update-failed"));

frontend/pages/group/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <v-container class="narrow-container">
+  <v-container
+    v-if="group"
+    class="narrow-container"
+  >
     <BasePageTitle class="mb-5">
       <template #header>
         <v-img
@@ -14,37 +17,26 @@
       </template>
       {{ $t("profile.group-description") }}
     </BasePageTitle>
-
-    <section v-if="group">
-      <BaseCardSectionTitle
-        class="mt-10"
-        :title="$t('group.group-preferences')"
-      />
-      <div class="mb-6">
-        <v-checkbox
-          v-model="group.preferences.privateGroup"
-          hide-details
-          density="compact"
-          color="primary"
-          :label="$t('group.private-group')"
-          @change="groupActions.updatePreferences()"
-        />
-        <div class="ml-8">
-          <p class="text-subtitle-2 my-0 py-0">
-            {{ $t("group.private-group-description") }}
-          </p>
-          <DocLink
-            class="mt-2"
-            link="/documentation/getting-started/faq/#how-do-private-groups-and-recipes-work"
-          />
-        </div>
+    <v-form ref="refGroupEditForm" @submit.prevent="handleSubmit">
+      <v-card variant="outlined" style="border-color: lightgray;">
+        <v-card-text>
+          <GroupPreferencesEditor v-if="group.preferences" v-model="group.preferences" />
+        </v-card-text>
+      </v-card>
+      <div class="d-flex pa-2">
+        <BaseButton type="submit" edit class="ml-auto">
+          {{ $t("general.update") }}
+        </BaseButton>
       </div>
-    </section>
+    </v-form>
   </v-container>
 </template>
 
 <script setup lang="ts">
+import GroupPreferencesEditor from "~/components/Domain/Group/GroupPreferencesEditor.vue";
 import { useGroupSelf } from "~/composables/use-groups";
+import { alert } from "~/composables/use-toast";
+import type { VForm } from "~/types/auto-forms";
 
 definePageMeta({
   middleware: ["can-manage-only"],
@@ -56,6 +48,22 @@ const i18n = useI18n();
 useSeoMeta({
   title: i18n.t("group.group"),
 });
+
+const refGroupEditForm = ref<VForm | null>(null);
+
+async function handleSubmit() {
+  if (!refGroupEditForm.value?.validate() || !group.value?.preferences) {
+    return;
+  }
+
+  const data = await groupActions.updatePreferences();
+  if (data) {
+    alert.success(i18n.t("settings.settings-updated"));
+  }
+  else {
+    alert.error(i18n.t("settings.settings-update-failed"));
+  }
+}
 </script>
 
 <style lang="css">