Account create

src/pages/Account/AccountCreate.vue

@@ -0,0 +1,122 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+
+const { t } = useI18n();
+const router = useRouter();
+const stateStore = useStateStore();
+
+const newAccountForm = reactive({
+    active: true,
+});
+const rolesOptions = ref([]);
+
+const redirectToEntryBasicData = (_, { id }) => {
+    router.push({ name: 'AccountBasicData', params: { id } });
+};
+</script>
+
+<template>
+    <FetchData
+        url="VnRoles"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (rolesOptions = data)"
+        auto-load
+    />
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="AccountList"
+                url="VnUsers/preview"
+                :label="t('account.search')"
+                :info="t('account.searchInfo')"
+                custom-route-redirect-name="AccountList"
+            />
+        </Teleport>
+    </template>
+    <QPage>
+        <VnSubToolbar />
+        <FormModel
+            url-create="VnUsers"
+            model="users"
+            :form-initial-data="newAccountForm"
+            @on-data-saved="redirectToEntryBasicData"
+        >
+            <template #form="{ data, validate }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            v-model="data.name"
+                            :label="t('account.create.name')"
+                            :rules="validate('VnUser.name')"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            v-model="data.nickname"
+                            :label="t('account.create.nickname')"
+                            :rules="validate('VnUser.nickname')"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            v-model="data.email"
+                            :label="t('account.create.email')"
+                            type="email"
+                            :rules="validate('VnUser.email')"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelect
+                            :label="t('account.create.role')"
+                            v-model="data.roleFk"
+                            :options="rolesOptions"
+                            option-value="id"
+                            option-label="name"
+                            map-options
+                            hide-selected
+                            :rules="validate('VnUser.roleFk')"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            v-model="data.password"
+                            :label="t('account.create.password')"
+                            type="password"
+                            :rules="validate('VnUser.password')"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QCheckbox
+                            :label="t('account.create.active')"
+                            v-model="data.active"
+                            :toggle-indeterminate="false"
+                            :rules="validate('VnUser.active')"
+                        />
+                    </div>
+                </VnRow>
+            </template>
+        </FormModel>
+    </QPage>
+</template>

src/pages/Account/AccountList.vue

@@ -126,7 +126,7 @@ const redirectToItemCreate = () => router.push({ name: 'AccountCreate' });
                 </template>
             </VnPaginate>
         </div>
-        <QPageSticky v-if="isItManagement" :offset="[20, 20]">
+        <QPageSticky :offset="[20, 20]">
             <QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />
             <QTooltip class="text-no-wrap">
                 {{ t('account.card.newUser') }}

src/pages/Account/Card/AccountBasicData.vue

@@ -1,12 +1,10 @@
 <script setup>
-import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
 
 const route = useRoute();
 const { t } = useI18n();

src/pages/Account/locale/en.yml

@@ -36,6 +36,13 @@ account:
             delete: Delete
     search: Search user
     searchInfo: You can search by id, name or nickname
+    create:
+        name: Name
+        nickname: Nickname
+        email: Email
+        role: Role
+        password: Password
+        active: Active
 role:
     pageTitles:
         inheritedRoles: Inherited Roles

src/pages/Account/locale/es.yml

@@ -45,6 +45,13 @@ account:
                 subtitle: ¿Seguro que quieres continuar?
     search: Buscar usuario
     searchInfo: Puedes buscar por id, nombre o usuario
+    create:
+        name: Nombre
+        nickname: Nombre mostrado
+        email: Email
+        role: Rol
+        password: Contraseña
+        active: Activo
 role:
     pageTitles:
         inheritedRoles: Roles heredados