From 3ee88b85cb80f528311f6cd00935ad13936d7337 Mon Sep 17 00:00:00 2001
From: evsalik <ems2312227@gmail.com>
Date: Sun, 16 Jun 2024 14:00:20 +0300
Subject: [PATCH] register user list and registration panel

---
 src/api/register.api.ts         |  26 +++++++
 src/api/userslist.api.ts        |  22 ++++++
 src/assets/icons/people.svg     |   3 +
 src/components/admin-header.vue |   2 +
 src/pages/registration.page.vue | 118 +++++++++++++++++++++++++-------
 src/pages/userslist.page.vue    |  36 ++++++++++
 src/router/router.ts            |   6 ++
 7 files changed, 189 insertions(+), 24 deletions(-)
 create mode 100644 src/api/register.api.ts
 create mode 100644 src/api/userslist.api.ts
 create mode 100644 src/assets/icons/people.svg
 create mode 100644 src/pages/userslist.page.vue

diff --git a/src/api/register.api.ts b/src/api/register.api.ts
new file mode 100644
index 0000000..b2a642d
--- /dev/null
+++ b/src/api/register.api.ts
@@ -0,0 +1,26 @@
+import axios from 'axios';
+import { apiUrl } from '@/router/router';
+
+interface RegisterResponse {
+  id: number;
+}
+
+interface RegisterData {
+  last_name: string;
+  first_name: string;
+  middle_name: string;
+  place: number;
+  phone_number: string;
+  email: string;
+  password: string;
+}
+
+export const registerUser = async (data: RegisterData): Promise<RegisterResponse> => {
+  try {
+    const response = await axios.post<RegisterResponse>(`${apiUrl}/api/v1/users/register/`, data);
+    return response.data;
+  } catch (error) {
+    console.error('Error during registration:', error);
+    throw new Error('Registration failed');
+  }
+};
diff --git a/src/api/userslist.api.ts b/src/api/userslist.api.ts
new file mode 100644
index 0000000..4cfa5c8
--- /dev/null
+++ b/src/api/userslist.api.ts
@@ -0,0 +1,22 @@
+import axios from 'axios';
+import { apiUrl } from '@/router/router';
+
+interface User {
+  id: number;
+  last_name: string;
+  first_name: string;
+  middle_name: string;
+  place: number;
+  phone_number: string;
+  email: string;
+}
+
+export const getUsers = async (): Promise<User[]> => {
+  try {
+    const response = await axios.get<User[]>(`${apiUrl}/api/v1/users/`);
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching users:', error);
+    throw new Error('Failed to fetch users');
+  }
+};
diff --git a/src/assets/icons/people.svg b/src/assets/icons/people.svg
new file mode 100644
index 0000000..c4434d5
--- /dev/null
+++ b/src/assets/icons/people.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM4 14a4 4 0 0 1 8 0v1H4v-1ZM18 9a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20 15a3.5 3.5 0 0 1-7 0v-1h7v1ZM7 9a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM9 15a3.5 3.5 0 0 1-7 0v-1h7v1Z" />
+</svg>
diff --git a/src/components/admin-header.vue b/src/components/admin-header.vue
index 21e9f5e..1dbd9f3 100644
--- a/src/components/admin-header.vue
+++ b/src/components/admin-header.vue
@@ -21,6 +21,7 @@
         <SidebarItem :imgSrc="profileIcon" to="/admin/profile" title="Профиль" :isOpen="isOpen" />
         <SidebarItem :imgSrc="plusIcon" to="/admin/add-event" title="Добавить" :isOpen="isOpen" />
         <SidebarItem :imgSrc="personPlus" to="/admin/registration" title="Регистрация" :isOpen="isOpen" />
+        <SidebarItem :imgSrc="people" to="/admin/userslist" title="Пользователи" :isOpen="isOpen" />
 
         <button @click="toggleSidebar"
           class="p-2 rounded-3xl bg-gray-200 absolute right-0 top-6 transform translate-x-1/2">
@@ -42,6 +43,7 @@ import SidebarItem from './sidebar-item.vue'
 import searchIcon from '@/assets/icons/search.icon.svg'
 import logoIcon from '@/assets/logo.svg'
 import personPlus from '@/assets/icons/personplus.svg'
+import people from '@/assets/icons/people.svg'
 import { useRoute, useRouter } from 'vue-router'
 
 const isOpen = ref(false)
diff --git a/src/pages/registration.page.vue b/src/pages/registration.page.vue
index 8868ec0..44778fe 100644
--- a/src/pages/registration.page.vue
+++ b/src/pages/registration.page.vue
@@ -1,34 +1,36 @@
 <template>
-  <div class="flex justify-center items-center h-screen bg-white">
-    <div class="bg-white p-8 rounded w-full max-w-sm ml-[200px]">
+  <div class="flex justify-center items-center min-h-screen bg-white w-[100%]">
+    <div class="bg-white p-8 rounded w-full max-w-lg mx-auto">
       <h2 class="text-2xl font-bold mb-6 text-center">СОЗДАТЬ ПОЛЬЗОВАТЕЛЯ</h2>
-      <form>
+      <form @submit.prevent="submitForm">
         <div class="mb-4">
-          <label class="block text-gray-700 mb-2" for="surname">ФАМИЛИЯ</label>
-          <input v-model="surname" type="text" id="surname" class="w-full px-3 py-2 border rounded" required>
+          <label class="block text-gray-700 mb-2" for="last_name">ФАМИЛИЯ</label>
+          <input v-model="last_name" type="text" id="last_name" class="w-full px-3 py-2 border rounded" required>
         </div>
-        <div class="mb-6">
-          <label class="block text-gray-700 mb-2" for="name">ИМЯ</label>
-          <input v-model="name" type="text" id="name" class="w-full px-3 py-2 border rounded" required>
+        <div class="mb-4">
+          <label class="block text-gray-700 mb-2" for="first_name">ИМЯ</label>
+          <input v-model="first_name" type="text" id="first_name" class="w-full px-3 py-2 border rounded" required>
         </div>
-        <div class="mb-8">
-          <label class="block text-gray-700 mb-2" for="patronymic">ОТЧЕСТВО</label>
-          <input v-model="patronymic" type="text" id="patronymic" class="w-full px-3 py-2 border rounded" required>
+        <div class="mb-4">
+          <label class="block text-gray-700 mb-2" for="middle_name">ОТЧЕСТВО</label>
+          <input v-model="middle_name" type="text" id="middle_name" class="w-full px-3 py-2 border rounded" required>
         </div>
-        <div class="mb-10">
-          <label class="block text-gray-700 mb-2" for="location">МЕСТО</label>
-          <input v-model="password" type="password" id="location" class="w-full px-3 py-2 border rounded" required>
+        <div class="mb-4">
+          <label class="block text-gray-700 mb-2" for="place">МЕСТО</label>
+          <select v-model="place" id="place" class="w-full px-3 py-2 border rounded" required>
+            <option v-for="place in placesList" :key="place.id" :value="place.id">{{ place.name }}</option>
+          </select>
         </div>
-        <div class="mb-12">
-          <label class="block text-gray-700 mb-2" for="password">ID</label>
-          <input v-model="password" type="password" id="password" class="w-full px-3 py-2 border rounded" required>
+        <div class="mb-4">
+          <label class="block text-gray-700 mb-2" for="phone_number">ТЕЛЕФОН</label>
+          <input v-model="phone_number" type="text" id="phone_number" class="w-full px-3 py-2 border rounded" required>
         </div>
-        <div class="mb-14">
-          <label class="block text-gray-700 mb-2" for="password">ТЕЛЕФОН</label>
-          <input v-model="password" type="password" id="password" class="w-full px-3 py-2 border rounded" required>
+        <div class="mb-4">
+          <label class="block text-gray-700 mb-2" for="email">EMAIL</label>
+          <input v-model="email" type="email" id="email" class="w-full px-3 py-2 border rounded" required>
         </div>
-        <div class="mb-16">
-          <label class="block text-gray-700 mb-2" for="password">EMAIL</label>
+        <div class="mb-6">
+          <label class="block text-gray-700 mb-2" for="password">ПАРОЛЬ</label>
           <input v-model="password" type="password" id="password" class="w-full px-3 py-2 border rounded" required>
         </div>
         <button type="submit" class="w-full bg-logo-blue text-white py-2 rounded">ДОБАВИТЬ</button>
@@ -38,12 +40,80 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
+import { registerUser } from '@/api/register.api';
+import getPlaces from '@/api/places.api';
+import { places } from '@/store/places.store';
+
+const last_name = ref('');
+const first_name = ref('');
+const middle_name = ref('');
+const place = ref(null);
+const phone_number = ref('');
+const email = ref('');
+const password = ref('');
+const router = useRouter();
+const placesList = ref([]);
+
+onMounted(async () => {
+  try {
+    await getPlaces(new Date());
+    if (places.all) {
+      placesList.value = places.all;
+      console.log('Fetched places:', placesList.value);
+    } else {
+      console.error('Failed to fetch places');
+    }
+  } catch (error) {
+    console.error('Error fetching places:', error);
+  }
+});
+
+const submitForm = async () => {
+  console.log('Form submitted');
+  if (validateForm()) {
+    const userData = {
+      last_name: last_name.value,
+      first_name: first_name.value,
+      middle_name: middle_name.value,
+      place: place.value,
+      phone_number: phone_number.value,
+      email: email.value,
+      password: password.value,
+    };
+
+    console.log('Submitting user data:', userData);
+
+    try {
+      const response = await registerUser(userData);
+      console.log('User registered:', response);
+    } catch (error) {
+      console.error('Registration failed:', error.response ? error.response.data : error.message);
+    }
+  }
+};
+
+const validateForm = () => {
+  if (!last_name.value || !first_name.value || !middle_name.value || !place.value || !phone_number.value || !email.value || !password.value) {
+    alert('Пожалуйста, заполните все поля');
+    return false;
+  }
+  if (!validateEmail(email.value)) {
+    alert('Пожалуйста, введите действительный email');
+    return false;
+  }
+  return true;
+};
+
+const validateEmail = (email) => {
+  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return re.test(String(email).toLowerCase());
+};
 </script>
 
 <style scoped>
 .bg-logo-blue {
   background-color: #6193b1;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/userslist.page.vue b/src/pages/userslist.page.vue
new file mode 100644
index 0000000..1f783a7
--- /dev/null
+++ b/src/pages/userslist.page.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="flex justify-center items-center min-h-screen bg-white w-[100%]">
+    <div class="bg-white mt-5 p-8 rounded w-full max-w-lg mx-auto">
+      <h2 class="text-2xl font-bold mb-6 text-center">СПИСОК ПОЛЬЗОВАТЕЛЕЙ</h2>
+      <ul v-if="users.length > 0" class="list-disc pl-5">
+        <li v-for="user in users" :key="user.id" class="mb-2">
+          {{ user.last_name }} {{ user.first_name }} {{ user.middle_name }} - {{ user.email }} - {{ user.phone_number }}
+        </li>
+      </ul>
+      <p v-else>Пользователи не найдены</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { getUsers } from '@/api/userslist.api';
+
+const users = ref([]);
+
+onMounted(async () => {
+  try {
+    const fetchedUsers = await getUsers();
+    users.value = fetchedUsers;
+    console.log('Fetched users:', users.value);
+  } catch (error) {
+    console.error('Error fetching users:', error);
+  }
+});
+</script>
+
+<style scoped>
+.bg-logo-blue {
+  background-color: #6193b1;
+}
+</style>
diff --git a/src/router/router.ts b/src/router/router.ts
index ce97278..6696fc1 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -11,6 +11,7 @@ import BookingPage from '@/pages/booking.page.vue';
 import BillingsPage from '@/pages/billings.page.vue';
 import LoginPage from '@/pages/login.page.vue';
 import Registration from '@/pages/registration.page.vue';
+import UsersList from '@/pages/userslist.page.vue';
 
 import { createRouter, createWebHistory } from 'vue-router';
 
@@ -76,6 +77,11 @@ const routes = [
         path: 'registration',
         name: 'Registration',
         component: Registration,
+      },
+      {
+        path: 'userslist',
+        name: 'UsersList',
+        component: UsersList,
       }
     ],
   },