From e4599d336466e038f39760fdfec318f7b6f2a65a Mon Sep 17 00:00:00 2001
From: simba77 <simba7@inbox.ru>
Date: Fri, 31 May 2024 17:54:29 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE=D1=82?=
 =?UTF-8?q?=D0=BA=D0=B8=20=D0=B2=D0=B5=D1=80=D1=81=D1=82=D0=BA=D0=B8.=20?=
 =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D1=84?=
 =?UTF-8?q?=D0=BE=D1=80=D0=BC=D0=B0=20=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B8=D1=8F=20=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0?=
 =?UTF-8?q?=D1=82=D0=B5=D0=BB=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Common/SidebarComponent.vue    | 11 ++-
 resources/admin/pages/Users/create.vue        | 89 +++++++++++++++++++
 resources/admin/pages/Users/index.vue         | 19 ++--
 resources/admin/router.ts                     |  8 ++
 resources/admin/scss/_forms.scss              |  5 ++
 resources/admin/scss/_tables.scss             |  4 +
 resources/admin/scss/_variables.scss          |  2 +
 resources/admin/scss/app.scss                 |  1 +
 resources/admin/types/Users.ts                | 15 ++++
 9 files changed, 141 insertions(+), 13 deletions(-)
 create mode 100644 resources/admin/pages/Users/create.vue
 create mode 100644 resources/admin/scss/_forms.scss

diff --git a/resources/admin/components/Common/SidebarComponent.vue b/resources/admin/components/Common/SidebarComponent.vue
index 6e150a1..7fcd110 100644
--- a/resources/admin/components/Common/SidebarComponent.vue
+++ b/resources/admin/components/Common/SidebarComponent.vue
@@ -45,7 +45,7 @@ const menu = [
       </router-link>
     </div>
 
-    <div class="sidebar-user border-bottom">
+    <div class="sidebar-user">
       <user-menu />
     </div>
 
@@ -73,11 +73,12 @@ const menu = [
 
 <style scoped lang="scss">
 .sidebar {
-  border-right: 1px solid var(--bs-gray-300);
+  border-right: 1px solid rgb(17 24 39 / 0.05);
+  background: #ffffff;
 }
 
 .sidebar-logo {
-  border-bottom: 1px solid var(--bs-gray-300);
+  border-bottom: 1px solid rgb(17 24 39 / 0.05);
   padding: 15px 20px 15px 20px;
 }
 
@@ -85,6 +86,10 @@ const menu = [
   padding: 10px;
 }
 
+.sidebar-user {
+  border-bottom: 1px solid rgb(17 24 39 / 0.05);
+}
+
 .menu-item {
   display: flex;
   align-items: center;
diff --git a/resources/admin/pages/Users/create.vue b/resources/admin/pages/Users/create.vue
new file mode 100644
index 0000000..7623c41
--- /dev/null
+++ b/resources/admin/pages/Users/create.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+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 CheckboxComponent from "../../components/Forms/CheckboxComponent.vue";
+
+const {pageHeader, breadcrumbsPreset} = usePage()
+
+breadcrumbsPreset.users()
+pageHeader.title = 'Добавить пользователя'
+
+useHead({
+  title: 'Добавить пользователя'
+})
+
+const form = reactive({
+  name: '',
+  email: '',
+  active: true,
+  role: '',
+  password: '',
+})
+
+
+</script>
+
+<template>
+  <admin-page-layout>
+    <form action="#">
+      <div class="row">
+        <div class="col-md-5">
+          <div class="card form-card shadow-sm">
+            <div class="card-body ">
+              <checkbox-component
+                v-model="form.active"
+                name="active"
+                label="Активен"
+                class="mb-2"
+              />
+              <input-text-component
+                v-model="form.name"
+                name="name"
+                label="Имя"
+                required
+                class="mb-2"
+              />
+              <input-text-component
+                v-model="form.email"
+                name="email"
+                label="E-mail"
+                required
+                class="mb-2"
+              />
+              <input-text-component
+                v-model="form.password"
+                name="password"
+                label="Пароль"
+                type="password"
+                required
+                class="mb-2"
+              />
+              <div class="mt-4">
+                <button class="btn btn-primary me-2">
+                  Сохранить
+                </button>
+                <router-link to="/admin/users" class="btn btn-outline-secondary">
+                  Назад
+                </router-link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  </admin-page-layout>
+</template>
+
+<style scoped lang="scss">
+.action-btn-column {
+  padding: 0 0 0 8px;
+
+  .btn {
+    --bs-btn-box-shadow: none;
+  }
+}
+
+</style>
diff --git a/resources/admin/pages/Users/index.vue b/resources/admin/pages/Users/index.vue
index 5ce47cf..a914f4b 100644
--- a/resources/admin/pages/Users/index.vue
+++ b/resources/admin/pages/Users/index.vue
@@ -7,7 +7,7 @@ import ExtendedSelectComponent from "../../components/Forms/ExtendedSelectCompon
 import useAsync from "../../composables/useAsync";
 import axios from "axios";
 import PreloaderComponent from "../../components/Common/PreloaderComponent.vue";
-import { UserListPage } from "../../types/Users";
+import { FilterOptions, UserListPage } from "../../types/Users";
 import { reactive, ref } from "vue";
 import LaravelPagination from "../../components/Pagination/LaravelPagination.vue";
 import { Bars3Icon } from "@heroicons/vue/24/outline"
@@ -21,18 +21,13 @@ useHead({
   title: 'Пользователи'
 })
 
-interface FilterOptions {
-  active: [],
-  roles: []
-}
-
-const filterOptions = ref<FilterOptions>()
 const filter = reactive({
   query: "",
   active: null,
   role: ""
 })
 
+const filterOptions = ref<FilterOptions>()
 const {run: getFilters} = useAsync(() => axios.get('/users/list-filters')
   .then((response) => {
     filterOptions.value = response.data
@@ -87,13 +82,13 @@ getUsers()
         />
       </div>
       <div class="col-auto flex-grow-1 text-end align-self-end">
-        <button class="btn btn-primary">
+        <router-link to="/admin/users/create" class="btn btn-primary">
           Добавить
-        </button>
+        </router-link>
       </div>
     </div>
     <preloader-component v-if="loading" class="mt-5" centered />
-    <table v-if="pageData && !loading" class="table simple-table table-hover table-borderless">
+    <table v-if="pageData && !loading" class="table simple-table table-hover table-borderless shadow-sm">
       <thead>
         <tr class="border-bottom">
           <th style="width: 1px;" />
@@ -147,6 +142,10 @@ getUsers()
 </template>
 
 <style scoped lang="scss">
+.filter {
+  --bs-body-bg: #fff;
+}
+
 .action-btn-column {
   padding: 0 0 0 8px;
 
diff --git a/resources/admin/router.ts b/resources/admin/router.ts
index ff71a62..350052d 100644
--- a/resources/admin/router.ts
+++ b/resources/admin/router.ts
@@ -25,6 +25,14 @@ const routes: Array<RouteRecordRaw> = [
     },
     component: () => import('./pages/Users/index.vue')
   },
+  {
+    name: 'CreateUser',
+    path: '/admin/users/create',
+    meta: {
+      requiresAuth: true,
+    },
+    component: () => import('./pages/Users/create.vue')
+  },
 ];
 
 const router = createRouter({
diff --git a/resources/admin/scss/_forms.scss b/resources/admin/scss/_forms.scss
new file mode 100644
index 0000000..6cadcc4
--- /dev/null
+++ b/resources/admin/scss/_forms.scss
@@ -0,0 +1,5 @@
+.form-card {
+  --bs-card-bg: #fff;
+  --bs-card-border-radius: 8px;
+  --bs-card-border-color: rgb(17 24 39 / 0.05);
+}
diff --git a/resources/admin/scss/_tables.scss b/resources/admin/scss/_tables.scss
index 5b43f9f..660a02b 100644
--- a/resources/admin/scss/_tables.scss
+++ b/resources/admin/scss/_tables.scss
@@ -1,4 +1,8 @@
 .simple-table {
+  --bs-table-bg: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+
   th {
     font-size: 0.875rem;
     line-height: 1.25rem;
diff --git a/resources/admin/scss/_variables.scss b/resources/admin/scss/_variables.scss
index 089b774..a0faf2e 100644
--- a/resources/admin/scss/_variables.scss
+++ b/resources/admin/scss/_variables.scss
@@ -1,4 +1,6 @@
 $enable-shadows: true;
+$body-bg: rgb(249 250 251 / 1);
+
 
 // Color system
 $blue: #0d6efd;
diff --git a/resources/admin/scss/app.scss b/resources/admin/scss/app.scss
index 89fd891..6c4dada 100644
--- a/resources/admin/scss/app.scss
+++ b/resources/admin/scss/app.scss
@@ -3,3 +3,4 @@
 @import 'icons';
 @import 'common';
 @import 'tables';
+@import 'forms';
diff --git a/resources/admin/types/Users.ts b/resources/admin/types/Users.ts
index 82831ae..52402be 100644
--- a/resources/admin/types/Users.ts
+++ b/resources/admin/types/Users.ts
@@ -17,3 +17,18 @@ export interface UserListPage {
   total: number
   per_page: number
 }
+
+export interface FilterActive {
+  id: number
+  name: string
+}
+
+export interface FilterRoles {
+  id: string
+  name: string
+}
+
+export interface FilterOptions {
+  active: FilterActive[],
+  roles: FilterRoles[]
+}