src/pages/Account/Card/AccountPrivileges.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
@@ -9,21 +9,28 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { t } = useI18n();
 const route = useRoute();
+const loading = ref(false);
 
 const rolesOptions = ref([]);
 const formModelRef = ref();
+watch(
+    () => route.params.id,
+    () => formModelRef.value.reset()
+);
 </script>
 <template>
     <FetchData url="VnRoles" auto-load @on-fetch="(data) => (rolesOptions = data)" />
+
+    <QSpinner v-if="loading" color="primary" size="md" />
     <FormModel
         ref="formModelRef"
         model="AccountPrivileges"
-        :url="`VnUsers/${route.params.id}/privileges`"
-        :url-create="`VnUsers/${route.params.id}/privileges`"
+        url="VnUsers/preview"
         auto-load
         @on-data-saved="formModelRef.fetch()"
     >
         <template #form="{ data }">
+            {{ data }}
             <div class="q-gutter-y-sm">
                 <QCheckbox
                     v-model="data.hasGrant"