feat: extra-form slot for other table

src/components/common/VnForm.vue

@@ -195,6 +195,10 @@ defineExpose({
                 name="form"
                 :data="formData"
             />
+            <slot
+                name="extraForm"
+                :data="formData"
+            />
             <component
                 :is="showBottomActions ? 'div' : Teleport"
                 :to="$actions"
@@ -231,8 +235,12 @@ defineExpose({
         />
     </QCard>
 </template>
-
 <style lang="scss" scoped>
+.no-form-container {
+    padding: 0 !important;
+    box-shadow: none;
+    border: none;
+}
 .form-container {
     width: 100%;
     height: max-content;

src/pages/Account/AccountConfig.vue

@@ -13,6 +13,7 @@ const { t } = useI18n();
 const jApi = inject('jApi');
 
 const vnFormRef = ref(null);
+const vnFormRef2 = ref(null);
 const changePasswordFormDialog = ref(null);
 const showChangePasswordForm = ref(false);
 const langOptions = ref([]);
@@ -97,6 +98,26 @@ onMounted(() => fetchLanguagesSql());
                         @update:model-value="vnFormRef.submit()"
                     />
                 </template>
+                <template #extraForm>
+                    <VnForm
+                        class="no-form-container"
+                        ref="vnFormRef2"
+                        :pks="pks"
+                        table="myClient"
+                        schema="hedera"
+                        :fetch-form-data-sql="fetchConfigDataSql"
+                        :default-actions="false"
+                    >
+                        <template #form="{ data }">
+                            <QCheckbox
+                                v-model="data.isToBeMailed"
+                                :label="t('isToBeMailed')"
+                                @update:model-value="vnFormRef2.submit()"
+                                dense
+                            />
+                        </template>
+                    </VnForm>
+                </template>
             </VnForm>
         </QPage>
         <QDialog
@@ -113,6 +134,7 @@ onMounted(() => fetchLanguagesSql());
 <i18n lang="yaml">
 en-US:
     personalInformation: Personal Information
+    isToBeMailed: Receive invoices by email
     name: Name
     email: Email
     nickname: Display name
@@ -122,6 +144,7 @@ en-US:
     changePassword: Change password
 es-ES:
     personalInformation: Datos personales
+    isToBeMailed: Recibir facturas por correo electrónico
     name: Nombre
     email: Correo electrónico
     nickname: Nombre a mostrar
@@ -131,6 +154,7 @@ es-ES:
     changePassword: Cambiar contraseña
 ca-ES:
     personalInformation: Dades personals
+    isToBeMailed: Rebre factures per correu electrònic
     name: Nom
     email: Correu electrònic
     nickname: Nom a mostrar
@@ -140,6 +164,7 @@ ca-ES:
     changePassword: Canviar contrasenya
 fr-FR:
     personalInformation: Informations personnelles
+    isToBeMailed: Recevoir des factures par e-mail
     name: Nom
     email: E-mail
     nickname: Nom à afficher
@@ -149,6 +174,7 @@ fr-FR:
     changePassword: Changer le mot de passe
 pt-PT:
     personalInformation: Dados pessoais
+    isToBeMailed: Receber facturas por e-mail
     name: Nome
     email: E-mail
     nickname: Nom à afficher