Merge pull request #108 from moevm/106-worker-page

106 Страница исполнителя и функциональность взятия заказа

frontend/src/api/endpoint.ts

@@ -14,4 +14,5 @@ export const deleteClientAddressPath = (id: string, address_id: string) => `/v1/
 export const uploadDumpsPath = '/v1/dumps'
 export const exportDumpsPath = '/v1/dumps'
 export const getAllOrdersPath = '/v1/orders'
+export const updateOrdersPath = (id: string) => `/v1/orders/${id}`
 export const getAllServicesPath = '/v1/services'

frontend/src/api/request.ts

@@ -21,7 +21,8 @@ import {
   uploadDumpsPath,
   exportDumpsPath,
   getAllOrdersPath,
-  getAllServicesPath
+  getAllServicesPath,
+  updateOrdersPath
 } from './endpoint'
 import Order from './models/order'
 import Service from './models/service'
@@ -233,7 +234,7 @@ export async function filterWorkers(name: string, surname: string): Promise<User
   })
 }
 
-export async function getAllOrders(id: string): Promise<Order[]> {
+export async function getAllOrders(id: string | null): Promise<Order[]> {
   const url = `${baseURL}${getAllOrdersPath}?user_id=${id}`;
   return axios.get(url)
   .then((response) => {
@@ -244,6 +245,18 @@ export async function getAllOrders(id: string): Promise<Order[]> {
   })
 }
 
+export async function updateOrder(newOrder: Order): Promise<Order> {
+  return axios.put<Order>(baseURL + updateOrdersPath(newOrder.id), newOrder)
+  .then((response) => {
+    return response.data
+  })
+  .catch((error) => {
+    console.error('Error update order:', error);
+    throw error;
+  })
+
+}
+
 export async function getAllServices(): Promise<Service[]> {
   return axios.get(baseURL + getAllServicesPath)
   .then((response) => {

frontend/src/components/admin/AdminOrdersPage.vue

@@ -96,7 +96,7 @@ function submitSearch(): void {
 }
 
 onMounted(() => {
-  getAllOrders()
+  getAllOrders(null)
   .then((response) => {
     orders.value = response
   })

frontend/src/components/worker/WorkerMainPage.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { inject, onMounted } from 'vue'
+import {
+  RouteLocationNormalizedLoadedGeneric,
+  useRoute, 
+  RouterView 
+} from 'vue-router'
+import { getUserInfo } from '../../api/request'
+
+const route: RouteLocationNormalizedLoadedGeneric = useRoute()
+const addSideBarButtons: Function | undefined = inject('addSideBarButtons')
+const setUserCard: Function | undefined = inject('setUserCard')
+
+const clientId: string | string[] = route.params.id
+
+onMounted(() => {
+  addSideBarButtons!(
+    {
+      text: 'Cписок заказов',
+      type: 'orders',
+      to: `/cleaning/worker${clientId}/orders`
+    }
+  )
+
+  getUserInfo('me').then((user) => {
+    setUserCard!(`${user.name} ${user.surname}`, `${user.email}`)
+  })
+})
+</script>
+
+<template>
+  <RouterView />
+</template>

frontend/src/components/worker/WorkerOrderItem.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import Order from '../../api/models/order'
+import ActionButton from '../../ui/uikit/ActionButton.vue';
+import { updateOrder } from '../../api/request'
+
+const emit = defineEmits(['update-orders']);
+
+const props = defineProps<{
+  order: Order;
+  workerId?: string
+}>();
+
+function formatAddress(): string {
+  return `г. ${props.order.address.city}, ул. ${props.order.address.street}, д. ${props.order.address.building}, 
+  кв. ${props.order.address.door_number}, п. ${props.order.address.entrance}, э. ${props.order.address.floor}`
+}
+
+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}`
+}
+
+async  function takeOrder() {
+    const updatedOrder = { // тут пока что непонятно какую логику юзаем и на фронте ли это должно лежать
+        ...props.order,
+        status: 'INPROGRESS',
+        workers: [...(props.order.workers ?? []), props.workerId]
+    };
+    await updateOrder(updatedOrder as Order)
+    .then(_ => {
+        emit('update-orders')
+        console.log('Worker get order');
+    }).catch((error) => {
+        console.log('Worker get order error:', error);
+    })
+}
+
+</script>
+
+<template>
+  <div class="order-item">
+    <p>{{ formatDate() }}</p>
+    <p>{{ formatAddress() }}, </p>
+    <div class="order-price">
+      <p>{{ props.order.price }}$</p>
+      <ActionButton 
+        text="+"
+        type="add"
+        color="#394cc2"
+      @click="takeOrder">
+    </ActionButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.order-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 49%;
+  border: 3px solid #3846c0;
+  border-radius: 15px;
+  padding: 10px;
+  text-align: left;
+}
+.order-price {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.order-status {
+  width: 30%;
+  display: flex;
+  justify-content: center;
+  border-radius: 15px;
+}
+.order-status-in-progress {
+  border: 3px solid #f7b500;
+}
+.order-status-created {
+  border: 3px solid #f70000;
+}
+.order-status-finished {
+  border: 3px solid #04f700;
+}
+p {
+  font-size: 22px;
+  font-weight: bold;
+}
+</style>

frontend/src/components/worker/WorkerOrdersPage.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import MainContainer from '../../ui/uikit/containers/MainContainer.vue'
+import PanelContainer from '../../ui/uikit/containers/PanelContainer.vue'
+import ActionButton from '../../ui/uikit/ActionButton.vue'
+import HeaderList from '../../ui/uikit/containers/HeaderList.vue'
+import WorkerOrderItem from '../worker/WorkerOrderItem.vue'
+import { onMounted, ref } from 'vue'
+import { getAllOrders, getUserInfo } from '../../api/request';
+import Order from '../../api/models/order'
+
+const orders = ref<Order[]>([]);
+const workerId = ref<string>()
+
+async function fetchAllOrders() {
+  getAllOrders(null)
+  .then((response) => {
+    const filteredOrders = response.filter((order) => {
+      const workersCount = order.workers?.length ?? 0;
+      return workersCount < order.required_workers;
+    });
+    orders.value = filteredOrders
+  })
+  .catch((error) => {
+    console.error('Couldnt load orders:', error);
+  });
+}
+
+async function fetchWorkerId() {
+  getUserInfo('me')
+  .then((response) => {
+    workerId.value = response.id
+  })
+  .catch((error) => {
+    console.error("Error get worker info:", error)
+  })
+}
+
+onMounted(() => {
+  fetchWorkerId()
+  fetchAllOrders()
+})
+</script>
+
+<template>
+  <MainContainer>
+    <PanelContainer
+      height="10%"
+      width="95%"
+    >
+      <div class="filters-btn">
+        <ActionButton
+          text="Все"
+          type="all"
+          color="#394cc2"
+        ></ActionButton>
+      </div>
+    </PanelContainer>
+      <HeaderList
+        title="Заказы" 
+        :items="orders"
+        height="100%"
+        width="95%"
+      >
+        <template #items="{ item }">
+          <WorkerOrderItem :order="item" :workerId="workerId" @update-orders="fetchAllOrders"/>
+        </template>
+      </HeaderList>
+  </MainContainer>
+</template>

frontend/src/routing/router.ts

@@ -10,6 +10,8 @@ import AdminOrdersPage from '../components/admin/AdminOrdersPage.vue'
 import AdminWorkersSettingsPage from '../components/admin/AdminWorkersSettingsPage.vue'
 import AdminServicesSettingsPage from '../components/admin/AdminServicesSettingsPage.vue'
 import AdminStatisticSettingsPage from '../components/admin/AdminStatisticSettingsPage.vue'
+import WorkerMainPage from '../components/worker/WorkerMainPage.vue'
+import WorkerOrdersPage from '../components/worker/WorkerOrdersPage.vue'
 
 const routes = [
   {
@@ -70,6 +72,18 @@ const routes = [
             component: AdminStatisticSettingsPage
           }
         ]
+      },
+      {
+        name: 'worker',
+        path: 'worker:id([a-fA-F0-9]+)',
+        component: WorkerMainPage,
+        children: [
+          {
+            name: 'worker-orders',
+            path: 'orders',
+            component: WorkerOrdersPage
+          }
+        ]
       }
     ]
   },