create shiiit

moevm · Dec 20, 2024 · d952b5d · d952b5d
1 parent 3878d5e
commit d952b5d
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 106 deletions.
diff --git a/frontend/src/api/request.ts b/frontend/src/api/request.ts
@@ -105,47 +105,23 @@ export function deleteUser(id: string): Promise<any> {
 }
 
 export async function getClientAddresses(id: string): Promise<Address[]> {
-  try {
-    const response = await fetch(baseURL+getClientAddressesPath(id), {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-
-    if (!response.ok) {
-      throw new Error(`Error HTTP: ${response.status}`);
-    }
-
-    const data = (await response.json()) as Address[];
-    return data;
-  } catch (error) {
-    console.error('Error request:', error);
-    throw error;
-  }
+  return axios.get(baseURL + getClientAddressesPath(id))
+  .then((response) => {
+    return Promise.resolve(response.data)
+  })
+  .catch((error) => {
+    return Promise.reject(error)
+  })
 }
 
 export async function createNewAddress(id: string, addressData: Address): Promise<Address> {
-  try {
-    const response = await fetch(baseURL+createNewAddressPath(id), {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(addressData),
-    });
-
-    if (!response.ok) {
-      throw new Error(`Error HTTP: ${response.status}`);
-    }
-
-    const data = await response.json();
-    return data.id; 
-
-  } catch (error) {
-    console.error('Error request:', error);
-    throw error;
-  }
+  return axios.post<Address>(baseURL + createNewAddressPath(id), addressData)
+  .then((response) => {
+    return Promise.resolve(response.data)
+  })
+  .catch((error) => {
+    return Promise.reject(error)
+  })
 }
 
 export function getClientAddress(id: string, address_id: string): Promise<Address> {
@@ -291,4 +267,14 @@ export async function createOrder(newOrder: Order): Promise<Order> {
   .catch((error) => {
     return Promise.reject(error)
   })
+}
+
+export async function getOrderById(id: string): Promise<Order> {
+  return axios.get(baseURL + updateOrdersPath(id))
+  .then((response) => {
+    return Promise.resolve(response.data)
+  })
+  .catch((error) => {
+    return Promise.reject(error)
+  })
 }
diff --git a/frontend/src/components/admin/AdminMainPage.vue b/frontend/src/components/admin/AdminMainPage.vue
@@ -1,21 +1,7 @@
 <script setup lang="ts">
 import { inject, onMounted } from 'vue'
 import { RouterView } from 'vue-router'
-import { getUserInfo, getUsers } from '../../api/request'
-import { ref } from 'vue' 
-import { User } from '../../api/models/user'
-
-// const userStore = useUserStore()
-// const user = userStore.getUser()
-
-const clients = ref<User[]>([]);
-const workers = ref<User[]>([]);
-const headers = [
-  { text: 'ID', value: 'id' },
-  { text: 'Имя', value: 'name' },
-  { text: 'Email', value: 'email' },
-  // Добавьте другие заголовки по мере необходимости
-];
+import { getUserInfo } from '../../api/request'
 
 const addSideBarButtons: Function | undefined = inject('addSideBarButtons')
 const setUserCard: Function | undefined = inject('setUserCard')

diff --git a/frontend/src/components/client/ClientAddressesPage.vue b/frontend/src/components/client/ClientAddressesPage.vue
@@ -6,11 +6,17 @@ import MainContainer from '../../ui/uikit/containers/MainContainer.vue'
 import Dialog from '../../ui/uikit/Dialog.vue'
 import ActionButton from '../../ui/uikit/ActionButton.vue'
 import InputTextField from '../../ui/uikit/inputs/InputTextField.vue'
-import { getClientAddresses, createNewAddress } from '../../api/request'
+import { getClientAddresses, createNewAddress, getUserInfo } from '../../api/request'
 import Address from '../../api/models/address'
 
 onMounted(() => {
-  fetchClientAddresses("me")
+  getUserInfo('me')
+  .then((user) => {
+    getClientAddresses(user.id)
+    .then((response) => {
+      addresses.value = response
+    })
+  })
 })
 
 const addresses = ref<Address[]>([])
@@ -33,49 +39,28 @@ function closeDialog(): void {
   isDialogVisible.value = false
 }
 
-function formatAddress(item: any): string {
-  return `${item.city}, ${item.street}, ${item.building}, Подъезд ${item.entrance}, Этаж ${item.floor}, Квартира ${item.door_number}`;
-}
-
-async function fetchClientAddresses(clientId: string) {
-  getClientAddresses(clientId)
-  .then((response) => {
-    addresses.value = response
-  })
-  .catch((error) => {
-    console.error("Failed to fetch client addresses:", error)
+function submitNewAddress(): void {
+  getUserInfo('me').then((userId) => {
+    addNewAddress(userId.id)
   })
 }
 
-async function addNewAddress(clientId: string) {
+function addNewAddress(clientId: string) {
   closeDialog()
   const addressData: Address = {
-    id: clientId.toString(),
     city: newAddress.value.city,
     street: newAddress.value.street,
     building: newAddress.value.building,
     entrance: newAddress.value.entrance,
     floor: newAddress.value.floor,
     door_number: newAddress.value.door_number,
-    created_at: new Date(),
-    updated_at: new Date()
-  };
-  addresses.value.push(addressData);
-
+  }
   createNewAddress(clientId, addressData)
-  .then((newAddressId) => {
-    /* раскомментировать после добавления авторизации
-    addresses.value.push({
-      ...addressData, 
-      id: newAddressId
-    });
-    */
-  })
-  .catch((error) => {
-    console.error("Failed to createNewAddress:", error)
-    // addresses.value.pop() раскомментировать после добавления авторизации
+  .then((response) => {
+    addresses.value.push(addressData)
   })
 }
+
 </script>
 
 <template>
@@ -87,7 +72,7 @@ async function addNewAddress(clientId: string) {
       width="95%"
     >
       <template #items="{ item }">
-        <AddressItem :address="formatAddress(item)" />
+        <AddressItem :address="item" />
       </template>
     </HeaderList>
   </MainContainer>
@@ -119,7 +104,7 @@ async function addNewAddress(clientId: string) {
       <InputTextField
         v-model="newAddress.building"
         placeholder="Дом"
-        type="number"
+        type="text"
         label="Дом"
       ></InputTextField>
       <InputTextField
@@ -154,7 +139,7 @@ async function addNewAddress(clientId: string) {
         type="create"
         variant="flat"
         color="#394cc2"
-        @click="addNewAddress"
+        @click="submitNewAddress"
       ></ActionButton>
     </template>
   </Dialog>

diff --git a/frontend/src/components/client/ClientOrdersHistoryPage.vue b/frontend/src/components/client/ClientOrdersHistoryPage.vue
@@ -6,7 +6,7 @@ import OrderItem from '../../ui/uikit/items/OrderItem.vue'
 import ActionButton from '../../ui/uikit/ActionButton.vue'
 import DateFilter from '../../ui/uikit/DateFilter.vue'
 import MainContainer from '../../ui/uikit/containers/MainContainer.vue'
-import { getAllOrders, getUserInfo } from '../../api/request'
+import { getAllOrders } from '../../api/request'
 import Order from '../../api/models/order'
 
 const orders = ref<Order[]>([])

diff --git a/frontend/src/routing/router.ts b/frontend/src/routing/router.ts
@@ -12,6 +12,7 @@ import AdminServicesSettingsPage from '../components/admin/AdminServicesSettings
 import AdminStatisticSettingsPage from '../components/admin/AdminStatisticSettingsPage.vue'
 import WorkerMainPage from '../components/worker/WorkerMainPage.vue'
 import WorkerOrdersPage from '../components/worker/WorkerOrdersPage.vue'
+import OrderDetail from '../ui/uikit/items/OrderDetail.vue'
 
 const routes = [
   {
@@ -37,7 +38,14 @@ const routes = [
           {
             name: 'client-orders-history',
             path: 'history-order',
-            component: ClientOrdersHistoryPage
+            component: ClientOrdersHistoryPage,
+            children: [
+              {
+                name: 'order-details',
+                path: ':order_id([a-fA-F0-9]+)',
+                component: OrderDetail
+              }
+            ]
           },
           {
             name: 'client-create-order',

diff --git a/frontend/src/ui/uikit/items/AddressItem.vue b/frontend/src/ui/uikit/items/AddressItem.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import { defineProps } from 'vue'
+import Address from '../../../api/models/address'
 
 const props = defineProps<{
-  address: string;
-  // id: string; раскомментировать после добавления авторизации
+  address: Address;
 }>()
 </script>
 
 <template>
   <div class="address-item">
-    <p>{{ props.address }}</p>
+    <p>
+      {{ props.address.city }}, {{ props.address.street }}, 
+      дом {{ props.address.building }}, подъезд {{ props.address.entrance }},
+      этаж {{ props.address.floor }}, квартира {{ props.address.door_number }}
+    </p>
   </div>
 </template>
 
@@ -26,7 +30,7 @@ const props = defineProps<{
   text-align: left;
 }
 p {
-  font-size: 32px;
+  font-size: 28px;
   font-weight: bold;
 }
 </style>
diff --git a/frontend/src/ui/uikit/items/OrderDetail.vue b/frontend/src/ui/uikit/items/OrderDetail.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import Order from '../../../api/models/order'
+import { getOrderById } from '../../../api/request';
+
+const route = useRoute();
+const orderId = route.params.id as string;
+const order = ref<Order>();
+
+onMounted(() => {
+  getOrderById(orderId)
+    .then((response) => {
+      order.value = response
+      console.log(order.value)
+    })
+})
+
+function formatDate(dateTime: string): string {
+  const date = new Date(dateTime);
+  const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1;
+  const minutes = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
+  return `${date.getDate()}.${month}.${date.getFullYear()} ${date.getHours()}:${minutes}`;
+}
+
+</script>
+
+<template>
+  <div class="order-detail">
+    <h1>Детали заказа</h1>
+    <p>Заказ по адресу: {{ order!.address.city }}, {{ order!.address.street }}, дом {{ order!.address.building }}, подъезд {{ order!.address.entrance }}, этаж {{ order!.address.floor }}, квартира {{ order!.address.door_number }}</p>
+    <p>На дату: {{ formatDate(order!.date_time.toISOString()) }}</p>
+    <p>Цена: {{ order!.price }}₽</p>
+    <p>Количество работников: {{ order!.required_workers }}</p>
+    <p>Услуги:</p>
+  </div>
+</template>
+
+<style scoped>
+.order-detail {
+  border: 3px solid #3846c0;
+  width: 100%;
+  height: 100%;
+  border-radius: 15px;
+  padding: 10px;
+  text-align: left;
+}
+</style>
diff --git a/frontend/src/ui/uikit/items/OrderItem.vue b/frontend/src/ui/uikit/items/OrderItem.vue
@@ -1,22 +1,46 @@
 <script setup lang="ts">
-import { defineProps } from 'vue';
+import { defineProps } from 'vue'
+import Order from '../../../api/models/order'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 const props = defineProps<{
-  order: {
-    date: string;
-    time: string;
-    address: string;
-    price: number;
-  };
-}>();
+  order: Order;
+}>()
+
+function formatDate(): string {
+  const date = new Date(props.order.date_time)
+  const mounth = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1
+  const minutes = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
+  return `${date.getDate()}.${mounth}.${date.getFullYear()} ${date.getHours()}:${minutes}`
+}
+
+function goToOrderDetails() {
+  console.log('goToOrderDetails')
+  router.push({ name: 'order-details', params: { order_id: props.order.id } });
+}
 </script>
 
 <template>
-  <div class="order-item">
-    <p>Заказ {{ props.order.date }} в {{ props.order.time }}</p>
-    <p>{{ props.order.address }}</p>
-    <p>{{ props.order.price }}$</p>
-  </div>
+  <div 
+    class="order-item"
+    @click="goToOrderDetails"
+  >
+    <p>
+        Заказ по адресу: {{ props.order.address.city }}, 
+        {{ props.order.address.street }}, 
+        дом {{ props.order.address.building }},
+        подъезд {{ props.order.address.entrance }},
+        этаж {{ props.order.address.floor }},
+        квартира {{ props.order.address.door_number }}
+      </p>
+      <p>
+        На дату: {{ formatDate() }}</p>
+      <p>
+        Цена: {{ props.order.price }}₽
+      </p>
+    </div>
 </template>
 
 <style scoped>
@@ -26,5 +50,14 @@ const props = defineProps<{
   border-radius: 15px;
   padding: 10px;
   text-align: left;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+.order-item:hover {
+  background-color: #f0f0f0;
+}
+p {
+  font-size: 22px;
+  font-weight: bold;
 }
 </style>