🎨 Update admin quesry param to param

Author: csiszaralex

src/components/admin/AdminUser.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h3 my-3">Felhasználói fiókok</div>
-  <base-dialog :show="!!selectedId" upper footless>
+  <base-dialog :show="!!selectedId" title="Felhasználó szerkesztése" upper footless>
     <profile :id="selectedId" imported @close="close"></profile>
   </base-dialog>
   <base-loader v-if="loading">Loading...</base-loader>

src/components/admin/NavBar.vue

@@ -11,19 +11,18 @@
         <span v-if="opened" class="align-self-center">Becsuk</span>
       </div>
     </li>
-    <li v-if="role >= 4" class="nav-item my-0 text-center" @click="go('users')">
-      <div class="btn mx-1 px-1 bigtext d-flex">
+    <li v-if="role >= 3" class="nav-item my-0 text-center">
+      <router-link to="/admin/users" class="btn mx-1 px-1 bigtext d-flex">
         <fa-icon icon="users" class="fa-2x mr-1 align-self-center" />
         <span v-if="opened" class="align-self-center">Felhasználók</span>
-      </div>
+      </router-link>
     </li>
   </ul>
 </template>
 
 <script>
 export default {
   name: 'NavBar',
-  emits: ['go'],
   data() {
     return { opened: false };
   },
@@ -36,9 +35,6 @@ export default {
     change() {
       this.opened = !this.opened;
     },
-    go(p) {
-      this.$emit('go', p);
-    },
   },
 };
 </script>
@@ -47,13 +43,21 @@ export default {
 .bigtext {
   font-size: 1.2rem;
 }
+li > a:hover,
 li > div:hover {
   background-color: lighten($dark, 15);
   span,
   svg {
     color: $light;
   }
 }
+.router-link-active {
+  background-color: lighten($dark, 48);
+  span,
+  svg {
+    color: lighten($dark, 5);
+  }
+}
 .justify-self-center {
   justify-self: center;
 }

src/components/layout/TheHeader.vue

@@ -33,7 +33,7 @@
               <fa-icon icon="user" class="fa-1x mr-1" />
               Saját fiók
             </router-link>
-            <router-link v-if="role > 2" to="/admin" class="dropdown-item">
+            <router-link v-if="role > 1" to="/admin" class="dropdown-item">
               <fa-icon icon="toolbox" class="fa-1x mr-1" />
               Adminisztráció
             </router-link>

src/router.js

@@ -19,7 +19,14 @@ const routes = [
     props: true,
     children: [{ path: ':id', name: 'profileId', component: Profile }],
   },
-  { path: '/admin', name: 'admin', component: Admin, meta: { title: 'Adminisztráció', role: 2 } },
+  {
+    path: '/admin',
+    name: 'admin',
+    component: Admin,
+    meta: { title: 'Adminisztráció', role: 2 },
+    props: true,
+    children: [{ path: ':content', name: 'AdminId', component: Admin }],
+  },
   { path: '/:notFound(.*)', name: 'notfound', component: NotFound },
 ];
 

src/views/Admin.vue

@@ -2,10 +2,10 @@
   <div class="flex-grow-1 d-flex">
     <div class="admin flex-grow-1">
       <div class="navB bg-light p-2">
-        <nav-bar @go="go"></nav-bar>
+        <nav-bar></nav-bar>
       </div>
       <div>
-        <admin-user v-if="content === 'users' && role >= 4"></admin-user>
+        <admin-user v-if="content === 'users' && role >= 3"></admin-user>
       </div>
     </div>
   </div>
@@ -17,19 +17,12 @@ import AdminUser from '../components/admin/AdminUser.vue';
 export default {
   name: 'Admin',
   components: { NavBar, AdminUser },
+  props: { content: { type: String, default: '' } },
   computed: {
-    content() {
-      return this.$route.query['content'];
-    },
     role() {
       return this.$store.getters['getRole'];
     },
   },
-  methods: {
-    go(where) {
-      this.$router.replace('/admin?content=' + where);
-    },
-  },
 };
 </script>