little router refactor

src/components/TheNavbar.vue

@@ -4,7 +4,7 @@
 
     <ul class="navbar-menu">
       <li>
-        <router-link to="/">
+        <router-link :to="{name: PAGE.REQUESTS}">
           Заявки
         </router-link>
       </li>
@@ -13,9 +13,6 @@
           Помощь
         </router-link>
       </li>
-      <li>
-        <a href="#">Сообщения</a>
-      </li>
       <li>
         <a
           href="#"

src/hooks/useLoginForm.ts

@@ -29,7 +29,7 @@ const useLoginForm = () => {
   const onSubmit = handleSubmit(async (values) => {
     try {
       await store.dispatch('auth/login', values);
-      await router.push({name: PAGE.HOME});
+      await router.push({name: PAGE.REQUESTS});
     } catch (e) {}
   })
 

src/layout/MainLayout.vue

@@ -1,7 +1,7 @@
 <template>
   <the-navbar />
   <div class="container with-nav">
-    <router-link v-if="back" :to="{name: PAGE.HOME}">
+    <router-link v-if="back" :to="{name: PAGE.REQUESTS}">
       <div class="breadcrumbs text-white">
         <- К списку заявок
       </div>

src/router/index.ts

@@ -1,24 +1,27 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
 import store from '../store';
 
 export enum PAGE {
   HOME= 'Home',
   AUTH = 'Auth',
   HELP = 'Help',
+  REQUESTS = 'Requests',
   REQUEST = 'Request'
 }
 
 export const PAGE_URL: Record<PAGE, string> = {
   [PAGE.HOME]: '/',
-  [PAGE.REQUEST]: '/request/:id',
+  [PAGE.REQUEST]: '/requests/:id',
+  [PAGE.REQUESTS]: '/requests',
   [PAGE.AUTH]: '/auth',
   [PAGE.HELP]: '/help'
 }
 
-const routes = [
+const routes: Readonly<RouteRecordRaw[]> = [
   {
-    path: PAGE_URL[PAGE.HOME],
+    path: PAGE_URL[PAGE.REQUESTS],
-    name: PAGE.HOME,
+    alias: PAGE_URL[PAGE.HOME],
+    name: PAGE.REQUESTS,
     component: () => import('../views/HomePage.vue'),
     meta: {
       layout: 'main',

src/store/modules/request.module.ts

@@ -15,6 +15,10 @@ type AddRequestsPayload = {
   request: AppRequest
 }
 
+type RemoveRequestsPayload = {
+  id: AppRequest['id']
+}
+
 type CreateRequestPayload = Omit<AppRequest, 'id'>
 
 const requestModule: Module<State, any> = {
@@ -31,6 +35,11 @@ const requestModule: Module<State, any> = {
     addRequest: (state, payload: AddRequestsPayload) => {
       const { request } = payload;
       state.requests.push(request)
+    },
+
+    removeRequest: (state, payload: RemoveRequestsPayload) => {
+      const { id } = payload;
+      state.requests = state.requests.filter(item => item.id !== id)
     }
   },
   actions:{
@@ -56,6 +65,17 @@ const requestModule: Module<State, any> = {
         await dispatch('alert/setAlert', {message: 'Ошибка при попытке получить заявку', type: 'danger', title: 'Ошибка', time: 5000}, {root: true})
       }
     },
+    removeRequestById: async (injectee, payload) => {
+      const { dispatch } = injectee;
+      const {id} = payload;
+      try {
+        const token = authModule.state.token;
+        const { data } = await requestApi.delete(`/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

@@ -44,8 +44,19 @@
           <app-status :status="request.status" />
         </td>
       </tr>
+      <tr>
+        <td />
+        <td />
+      </tr>
     </tbody>
   </table>
+  <button
+    class="btn danger removeBtn"
+    @click="onRemoveClick"
+    v-if="request"
+  >
+    Удалить
+  </button>
 </template>
 
 <script setup>
@@ -55,6 +66,7 @@
   import AppSpinner from '@/components/ui/AppSpinner.vue';
   import { currencyFormatter } from 'src/utils/helpers';
   import AppStatus from '@/components/ui/AppStatus.vue';
+  import router, { PAGE } from '@/router';
 
 
   const { params } = useRoute();
@@ -70,8 +82,17 @@
     request.value = await store.dispatch('request/loadRequestById', { id });
     loading.value = false;
   })
+
+  const onRemoveClick = async () => {
+    await store.dispatch('request/removeRequestById', { id });
+    await router.push({name: PAGE.REQUESTS})
+  }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
-
+  .removeBtn {
+    margin-right: 0;
+    margin-left: auto;
+    display: block;
+  }
 </style>