feat: add request page

src/App.vue

@@ -12,9 +12,11 @@
     setup() {
       const route = useRoute();
       const layout = computed(() => route.meta.layout);
+      const layoutProps = computed(() => route.meta.layoutProps);
 
       return {
         layout,
+        layoutProps,
       }
     }
   }
@@ -24,6 +26,7 @@
   <component
     :is="layout + '-layout'"
     v-if="layout"
+    v-bind="layoutProps"
   />
 </template>
 

src/layout/MainLayout.vue

@@ -1,6 +1,11 @@
 <template>
   <the-navbar />
   <div class="container with-nav">
+    <router-link v-if="back" :to="{name: PAGE.HOME}">
+      <div class="breadcrumbs text-white">
+        <- К списку заявок
+      </div>
+    </router-link>
     <app-alert />
     <div class="card">
       <router-view />
@@ -8,14 +13,10 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import TheNavbar from '../components/TheNavbar.vue'
 import AppAlert from '@/components/ui/AppAlert.vue';
-export default {
-  components: {AppAlert, TheNavbar }
-}
+import { PAGE } from '@/router';
+
+defineProps<{back?: boolean}>()
 </script>
-
-<style lang="scss" scoped>
-
-</style>

src/router/index.ts

@@ -10,7 +10,7 @@ export enum PAGE {
 
 export const PAGE_URL: Record<PAGE, string> = {
   [PAGE.HOME]: '/',
-  [PAGE.REQUEST]: '/:id',
+  [PAGE.REQUEST]: '/request/:id',
   [PAGE.AUTH]: '/auth',
   [PAGE.HELP]: '/help'
 }
@@ -45,9 +45,12 @@ const routes = [
   {
     path: PAGE_URL[PAGE.REQUEST],
     name: PAGE.REQUEST,
-    component: () => import('../views/AuthPage.vue'),
+    component: () => import('../views/RequestPage.vue'),
     meta: {
       layout: 'main',
+      layoutProps: {
+        back: true
+      }
     }
   },
 ]

src/store/modules/request.module.ts

@@ -45,6 +45,17 @@ const requestModule: Module<State, any> = {
         await dispatch('alert/setAlert', {message: 'Ошибка при попытке получить список заявок', type: 'danger', title: 'Ошибка', time: 5000}, {root: true})
       }
     },
+    loadRequestById: async (injectee, payload) => {
+      const { dispatch } = injectee;
+      const {id} = payload;
+      try {
+        const token = authModule.state.token;
+        const { data } = await requestApi.get(`/requests/${id}.json?auth=${token}`);
+        return data;
+      } catch (e) {
+        await dispatch('alert/setAlert', {message: 'Ошибка при попытке получить заявку', type: 'danger', title: 'Ошибка', time: 5000}, {root: true})
+      }
+    },
     create: async (injectee, payload: CreateRequestPayload) => {
       const { dispatch, commit } = injectee;
 

src/views/RequestPage.vue

@@ -0,0 +1,77 @@
+<template>
+  <h1>
+    Заявка
+  </h1>
+
+  <div
+    v-if="loading"
+    style="display: flex;"
+  >
+    <app-spinner />
+  </div>
+  <h2
+    v-else-if="!request"
+    class="text-center"
+  >
+    Заявка не найдена
+  </h2>
+  <table
+    v-else
+    class="table"
+  >
+    <tbody>
+      <tr>
+        <td>
+          <strong>
+            ФИО
+          </strong>
+        </td>
+        <td>{{ request.fio }}</td>
+      </tr>
+      <tr>
+        <td>
+          <strong>Сумма</strong>
+        </td>
+        <td>{{ currencyFormatter.format(request.amount) }}</td>
+      </tr>
+      <tr>
+        <td><strong>Телефон</strong></td>
+        <td>{{ request.phone }}</td>
+      </tr>
+      <tr>
+        <td><strong>Статус</strong></td>
+        <td>
+          <app-status :status="request.status" />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup>
+  import { useRoute } from 'vue-router';
+  import { useStore } from 'vuex';
+  import { onMounted, ref } from 'vue';
+  import AppSpinner from '@/components/ui/AppSpinner.vue';
+  import { currencyFormatter } from 'src/utils/helpers';
+  import AppStatus from '@/components/ui/AppStatus.vue';
+
+
+  const { params } = useRoute();
+  const { id } = params;
+
+  const store = useStore();
+
+  const request = ref();
+  const loading = ref(false);
+
+  onMounted(async () => {
+    loading.value = true;
+    request.value = await store.dispatch('request/loadRequestById', { id });
+    loading.value = false;
+  })
+</script>
+
+<style lang="scss" scoped>
+
+</style>