src/pages/Account/AccountList.vue

@@ -7,6 +7,7 @@ import AccountSummary from './Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import AccountFilter from './AccountFilter.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const tableRef = ref();
@@ -22,10 +23,27 @@ const columns = computed(() => [
         field: 'id',
         cardVisible: true,
     },
+    {
+        align: 'left',
+        name: 'name',
+        label: t('Name'),
+        component: 'input',
+        columnField: {
+            component: null,
+        },
+        cardVisible: true,
+        create: true,
+    },
     {
         align: 'left',
         name: 'roleFk',
-        label: t('role'),
+        label: t('Role'),
+        component: 'select',
+        attrs: {
+            url: 'VnRoles',
+            optionValue: 'id',
+            optionLabel: 'name',
+        },
         columnFilter: {
             component: 'select',
             name: 'roleFk',
@@ -35,7 +53,11 @@ const columns = computed(() => [
                 optionLabel: 'name',
             },
         },
+        columnField: {
+            component: null,
+        },
         format: ({ role }, dashIfEmpty) => dashIfEmpty(role?.name),
+        create: true,
     },
     {
         align: 'left',
@@ -51,20 +73,32 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        name: 'name',
+        name: 'email',
-        label: t('Name'),
+        label: t('Email'),
         component: 'input',
         columnField: {
             component: null,
         },
-        cardVisible: true,
         create: true,
+        visible: false,
     },
     {
         align: 'left',
-        name: 'email',
+        name: 'password',
-        label: t('email'),
+        label: t('Password'),
-        component: 'input',
+        columnField: {
+            component: null,
+        },
+        attrs: {},
+        required: true,
+        visible: false,
+    },
+
+    {
+        align: 'left',
+        name: 'active',
+        label: t('Active'),
+        component: 'checkbox',
         create: true,
         visible: false,
     },
@@ -101,7 +135,6 @@ const exprBuilder = (param, value) => {
     }
 };
 </script>
-
 <template>
     <VnSearchbar
         data-key="AccountList"
@@ -119,6 +152,12 @@ const exprBuilder = (param, value) => {
         ref="tableRef"
         data-key="AccountList"
         url="VnUsers/preview"
+        :create="{
+            urlCreate: 'VnUsers',
+            title: t('Create user'),
+            onDataSaved: ({ id }) => tableRef.redirect(id),
+            formInitialData: {},
+        }"
         :filter="filter"
         order="id DESC"
         :columns="columns"
@@ -127,7 +166,19 @@ const exprBuilder = (param, value) => {
         :use-model="true"
         :right-search="false"
         auto-load
-    />
+    >
+        <template #more-create-dialog="{ data }">
+            <QCardSection>
+                <VnInput
+                    :label="t('Password')"
+                    v-model="data.password"
+                    type="password"
+                    :required="true"
+                    autocomplete="new-password"
+                />
+            </QCardSection>
+        </template>
+    </VnTable>
 </template>
 
 <i18n>
@@ -135,4 +186,7 @@ const exprBuilder = (param, value) => {
         Id: Id
         Nickname: Nickname
         Name: Nombre
+        Password: Contraseña
+        Active: Activo
+        Role: Rol
 </i18n>