Наброски формы добавления юзера

modules/Users/Controllers/AdminUsersController.php

@@ -4,6 +4,7 @@
 
 namespace Modules\Users\Controllers;
 
+use Modules\Users\DTO\AdminCreateUserRequestDTO;
 use Modules\Users\DTO\AdminUserListFilterRequestDTO;
 use Modules\Users\Services\UsersService;
 
@@ -39,4 +40,10 @@ public function listFilters(): array
             ],
         ];
     }
+
+    public function create(AdminCreateUserRequestDTO $createUserRequestDTO)
+    {
+        dd($createUserRequestDTO);
+        return [];
+    }
 }

modules/Users/DTO/AdminCreateUserRequestDTO.php

@@ -0,0 +1,19 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Modules\Users\DTO;
+
+use Spatie\LaravelData\Data;
+
+class AdminCreateUserRequestDTO extends Data
+{
+    public function __construct(
+        public bool $active,
+        public string $name,
+        public string $email,
+        public string $role,
+        public string $password,
+    ) {
+    }
+}

resources/admin/pages/Users/create.vue

@@ -3,8 +3,11 @@ import AdminPageLayout from "../../components/Layout/AdminPageLayout.vue";
 import { usePage } from "../../composables/page/usePage";
 import { useHead } from '@unhead/vue'
 import InputTextComponent from "../../components/Forms/InputTextComponent.vue";
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 import CheckboxComponent from "../../components/Forms/CheckboxComponent.vue";
+import ExtendedSelectComponent from "../../components/Forms/ExtendedSelectComponent.vue";
+import useAsync from "../../composables/useAsync";
+import axios from "axios";
 
 const {pageHeader, breadcrumbsPreset} = usePage()
 
@@ -19,20 +22,38 @@ const form = reactive({
   name: '',
   email: '',
   active: true,
-  role: '',
+  role: 'user',
   password: '',
 })
 
+const formParams = ref({
+  roles: [
+    {
+      id: 'admin',
+      name: 'Администратор',
+    },
+    {
+      id: 'user',
+      name: 'Пользователь',
+    }
+  ]
+})
+
+const {loading, run: sendForm, validationErrors} = useAsync((page = 1) => axios.post('/users/create', {params: form})
+  .then((response) => {
+    console.log(response)
+  })
+)
 
 </script>
 
 <template>
   <admin-page-layout>
-    <form action="#">
+    <form action="#" @submit.prevent="sendForm">
       <div class="row">
         <div class="col-md-5">
           <div class="card form-card shadow-sm">
-            <div class="card-body ">
+            <div class="card-body">
               <checkbox-component
                 v-model="form.active"
                 name="active"
@@ -41,28 +62,41 @@ const form = reactive({
               />
               <input-text-component
                 v-model="form.name"
+                :error="validationErrors"
                 name="name"
                 label="Имя"
                 required
                 class="mb-2"
               />
               <input-text-component
                 v-model="form.email"
+                :error="validationErrors"
                 name="email"
                 label="E-mail"
                 required
                 class="mb-2"
               />
+              <extended-select-component
+                v-model="form.role"
+                :error="validationErrors"
+                name="role"
+                :options="formParams.roles"
+                label="Роль"
+                required
+                class="mb-2"
+              />
               <input-text-component
                 v-model="form.password"
+                :error="validationErrors"
                 name="password"
                 label="Пароль"
                 type="password"
                 required
                 class="mb-2"
               />
               <div class="mt-4">
-                <button class="btn btn-primary me-2">
+                <button :disabled="loading" type="submit" class="btn btn-primary me-2">
+                  <span v-if="loading" class="spinner-border spinner-border-sm" aria-hidden="true" />
                   Сохранить
                 </button>
                 <router-link to="/admin/users" class="btn btn-outline-secondary">

resources/admin/router.ts

@@ -18,7 +18,7 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import('./pages/login.vue')
   },
   {
-    name: 'Login',
+    name: 'Users',
     path: '/admin/users',
     meta: {
       requiresAuth: true,

resources/admin/scss/_forms.scss

@@ -2,4 +2,8 @@
   --bs-card-bg: #fff;
   --bs-card-border-radius: 8px;
   --bs-card-border-color: rgb(17 24 39 / 0.05);
+
+  .extended-select {
+    --ms-bg: var(--bs-body-bg);
+  }
 }

routes/admin-api.php

@@ -15,4 +15,5 @@
 Route::group(['prefix' => 'users'], function () {
     Route::get('/', [AdminUsersController::class, 'index'])->name('admin-auth.users.index');
     Route::get('/list-filters', [AdminUsersController::class, 'listFilters'])->name('admin-auth.users.list-filters');
+    Route::post('/create', [AdminUsersController::class, 'create'])->name('admin-auth.users.create');
 });