Adjust account conf form checkbox

src/components/common/VnForm.vue

@@ -82,7 +82,7 @@ const props = defineProps({
     }
 });
 
-const emit = defineEmits(['onDataSaved']);
+const emit = defineEmits(['onDataSaved', 'onDataFetched']);
 
 const { t } = useI18n();
 const jApi = inject('jApi');
@@ -133,6 +133,7 @@ const fetchFormData = async () => {
 
     formData.value = { ...modelInfo.value.data[0] };
     loading.value = false;
+    emit('onDataFetched', formData.value);
 };
 
 const onSubmitSuccess = () => {
@@ -200,10 +201,7 @@ defineExpose({
 </script>
 
 <template>
-    <QCard
+    <QCard class="form-container" v-bind="$attrs">
-        class="form-container"
-        v-bind="$attrs"
-    >
         <QForm
             v-if="!loading"
             ref="addressFormRef"
@@ -213,14 +211,8 @@ defineExpose({
             <span v-if="title" class="text-h6 text-bold">
                 {{ title }}
             </span>
-            <slot
+            <slot name="form" :data="formData" />
-                name="form"
+            <slot name="extraForm" :data="formData" />
-                :data="formData"
-            />
-            <slot
-                name="extraForm"
-                :data="formData"
-            />
             <component
                 v-if="isHeaderMounted"
                 :is="showBottomActions ? 'div' : Teleport"
@@ -254,24 +246,21 @@ defineExpose({
                 <slot name="actions" :data="formData" />
             </component>
         </QForm>
-        <QSpinner
+        <QSpinner v-else color="primary" size="3em" :thickness="2" />
-            v-else
-            color="primary"
-            size="3em"
-            :thickness="2"
-        />
     </QCard>
 </template>
+
 <style lang="scss" scoped>
 .no-form-container {
     padding: 0 !important;
     box-shadow: none;
     border: none;
 }
+
 .form-container {
     width: 100%;
     height: max-content;
-    padding: 0 !important;
+    padding: 32px;
     max-width: 544px;
     display: flex;
     justify-content: center;
@@ -280,7 +269,6 @@ defineExpose({
 .form {
     display: flex;
     flex-direction: column;
-    padding: 32px;
     width: 100%;
 }
 </style>

src/pages/Account/AccountConfig.vue

@@ -53,6 +53,10 @@ const updateUserNickname = async nickname => {
     }
 };
 
+const formatMailData = data => {
+    data.isToBeMailed = Boolean(data.isToBeMailed);
+};
+
 onMounted(() => fetchLanguagesSql());
 </script>
 
@@ -116,18 +120,20 @@ onMounted(() => fetchLanguagesSql());
                 </template>
                 <template #extraForm>
                     <VnForm
-                        class="no-form-container"
+                        class="no-form-container q-mt-md"
                         ref="vnFormRef2"
                         :pks="pks"
                         table="myClient"
                         schema="hedera"
                         :fetch-form-data-sql="fetchConfigDataSql"
                         :default-actions="false"
+                        @on-data-fetched="$event => formatMailData($event)"
                     >
                         <template #form="{ data }">
                             <QCheckbox
                                 v-model="data.isToBeMailed"
                                 :label="t('isToBeMailed')"
+                                :toggle-indeterminate="false"
                                 @update:model-value="vnFormRef2.submit()"
                                 dense
                             />