Add estagios page for aluno

client/src/components/aluno/Aside.vue

@@ -19,7 +19,7 @@
                         <router-link to="/mensagens">Mensagens</router-link>
                     </li>
                     <li>
-                        <router-link to="/vagas">Estágios</router-link>
+                        <router-link to="/aluno/vagas">Estágios</router-link>
                     </li>
                     <li>
                         <router-link to="">Rankings</router-link>

client/src/components/aluno/AsideDashboard.vue

@@ -39,7 +39,7 @@
                     </router-link>
                 </li>
                 <li :class="getClassForPage('estagios')">
-                    <router-link to="/vagas">
+                    <router-link to="/aluno/vagas">
                         <img :src="icons.job" />
                         <p v-if="showPs">Estágios</p>
                     </router-link>

client/src/router/routes/aluno.js

@@ -11,6 +11,7 @@ import ConfigAluno from '../../views/aluno/Config.vue';
 import Messages from '../../views/aluno/Messages.vue';  
 import ChatAluno from '../../views/aluno/Message.vue';  
 import Pesquisa from '../../views/aluno/Pesquisa.vue';
+import Vagas from '../../views/aluno/Vagas.vue';
 
 import {
     isRecoveringAluno,
@@ -108,6 +109,14 @@ export const alunoRoutes = [
             (await isAuthAluno()) ? next() : next("/login");
         }
     },
+    {
+        path: "/aluno/vagas",
+        name: "VagasALuno",
+        component: Vagas,
+        beforeEnter: async (to, from, next) => {
+            (await isAuthAluno()) ? next() : next("/login");
+        }
+    },
     {
         path: "/config",
         name: "Config",

client/src/router/routes/shared.js

@@ -42,7 +42,10 @@ export const sharedRoutes = [
     {
         path: '/vagas',
         name: 'Vagas',
-        component: Vagas
+        component: Vagas,
+        beforeEnter: async (to, from, next) => {
+            (await isAuthAluno()) ? next("/aluno/vagas") : next();
+        }
     },
     {
         path: '/vaga/:id',

client/src/views/aluno/Vagas.vue

@@ -0,0 +1,142 @@
+<template>
+    <Header />
+    <div id="app">
+        <main>
+            <AsideDashboard pageName="estagios" />
+            <section class="content">
+                <div class="search">
+                    <div class="box">
+                        <input type="text" placeholder="Buscar estágio" v-model="busca" @keyup.enter="filterVagas">
+                        <button @click="filterVagas">
+                            <img :src="icons.search" alt="Buscar">
+                        </button>
+                    </div>
+                </div>
+                <ul class="box">
+                    <li class="vaga" v-if="filteredVagas.length < 1">
+                        <a href="">
+                            <div class="infoAluno">
+                                <p>Nenhuma vaga com essas especificações encontrada</p>
+                            </div>
+                        </a>
+                    </li>
+                    <p class="resultado" v-else v-text="(filteredVagas.length > 1)?
+                    filteredVagas.length +  ' resultados encontrados para sua busca' :
+                    filteredVagas.length +  ' resultado encontrado para sua busca'"></p>
+                    <li class="vaga" v-for="(vaga, index) in filteredVagas" :key="index">
+                        <router-link :to="'/vaga/' +  vaga.id">
+                            <div class="infoVaga">
+                                <div class="contentVaga name">
+                                    <p class="who">{{ vaga.titulo }}</p>
+
+                                    <div class="info">
+                                        <label>Salário</label>
+                                        <p v-text="vaga.remuneracao"></p>
+                                    </div>
+                                    <div class="info">
+                                        <label>Carga horária</label>
+                                        <p v-text="vaga.cargaHoraria"></p>
+                                    </div>
+                                    <div class="info">
+                                        <label>Oferecida por</label>
+                                        <p v-text="vaga.empresa"></p>
+                                    </div>
+                                    <div class="info">
+                                        <label>Curso preferencial</label>
+                                        <p v-text="vaga.curso"></p>
+                                    </div>
+                                </div>
+                                <div class="box-button">
+                                    <button>Ver vaga</button>
+                                </div>
+                            </div>        
+                        </router-link>
+                    </li>
+                </ul>
+            </section>
+        </main>
+        <Footer />
+    </div>
+</template>
+
+<script>
+import Header from "../../components/aluno/Header.vue";
+import Footer from '../../components/Footer.vue';
+import AsideDashboard from '../../components/aluno/AsideDashboard.vue';
+import searchIcon from '../../assets/icons/procurar.png';
+
+import Cookies from 'js-cookie';
+
+import {
+    getVagas
+} from '../../services/api/shared';
+import { getMeAluno } from '../../services/api/aluno';
+
+export default {
+    name: 'Vagas',
+    components: {
+        Header,
+        Footer,
+        AsideDashboard
+    },
+    data() {
+        return {
+            aluno: {
+                token: '',
+                nome: '',
+                nascimento: '',
+                idade: '',
+                connected: false
+            },
+            icons: {
+                search: searchIcon,
+            },
+            vagas: [],
+            busca: '',
+            filteredVagas: []
+        };
+    },
+    methods: {
+        async loadVagas(){
+            try {
+                const response = await getVagas();
+                if (response.status >= 200 && response.status < 300) {
+                    this.vagas = response.data;
+                    this.filteredVagas = this.vagas;
+                } else{
+                    console.log("Ops.. Algo deu errado ao buscar as vagas. 😕\n" + response.message);
+                }
+            } catch (error) {
+                console.log("Ops.. Algo deu errado ao buscar as vagas. 😕\n" + error);                
+            }
+        },
+        async GetToken(){
+            this.aluno.token = Cookies.get('token') ? Cookies.get('token') : Cookies.get('token-professor');
+            const responseMail = await getMeAluno(this.aluno.token);
+            if (responseMail.status >= 200 && responseMail.status < 300) {
+                this.aluno.email = responseMail.data.email;
+                this.aluno.connected = true;
+            } else{
+                this.aluno.token = '';
+            }
+        },
+        filterVagas() {
+            const terms = this.busca.trim().split(' ');
+            this.filteredVagas = this.vagas.filter(aluno => {
+                return terms.some(term => 
+                    vaga.titulo.toLowerCase().includes(term.toLowerCase()) ||
+                    vaga.descricao.toLowerCase().includes(term.toLowerCase())
+                );
+            });
+        }
+    },
+    async created() {
+        await this.loadVagas();
+        await this.GetToken();
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+    @import "../../scss/pages/shared/_vagas.scss";
+</style>

server/src/pdf/curriculum_template.html

@@ -38,12 +38,11 @@ <h2>Formação Acadêmica</h2>
         <ul>
             {{academicTraining}}
         </ul>
-        </ul>
     </div>
 
     <hr/>
 
-    <div class="box box-4">''
+    <div class="box box-4">
         <p>🌐 https://boot.portfolioeducacionalrgs.com/aluno/profile/{{rm}}</p>
     </div>
 

server/src/pdf/style.css

@@ -57,7 +57,7 @@ body{
 }
 
 .box img {
-    width: 35%;
+    width: 350px;
     border-radius: 50%;
     object-fit: cover;
 }