Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adicionar listagem de candidatos #2

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Adicionar listagem de candidatos #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6dd4fba
Adicionar listagem de vagas
thalesfranklin Jan 23, 2025
1affdf7
Melhorar a estrutura semântica e acessibilidade
thalesfranklin Jan 27, 2025
e97fc68
Corrigir o binding da propriedade key no v-for
thalesfranklin Jan 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
211 changes: 41 additions & 170 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,183 +1,54 @@
<template>
<v-app :class="ef">
<v-app-bar class="header" color="transparent" app elevation="4">
<div class="w-100 d-flex align-center justify-space-between main-container">
<a class="d-flex align-center logo">
<h1 class=" d-none d-sm-block text-h5 font-weight-bold font-semibold primary-color ml-3 logo-text">
SouJunior: Stars
</h1>
</a>
<div class="d-flex align-center ga-2">
<!--v-icon
v-if="currentTheme.dark"
variant="text"
icon="mdi-weather-night"
size="large"
color="purple-darken-1"
class="mr-8 cursor-pointer"
@click="toggleTheme"
/-->
<!--v-icon
v-if="!currentTheme.dark"
variant="text"
icon="mdi-white-balance-sunny"
size="large"
color="orange"
class="mr-8 cursor-pointer"
@click="toggleTheme"
/-->
<!-- v-btn variant="text" class="font-weight-semibold" :to="{ name: 'home' }"> Home </v-btn-->
<v-btn
v-if="logged === true"
variant="text"
class="font-weight-semibold"
:to="{ name: 'onboarding' }"
>
Onboarding
</v-btn>
<!-- <v-btn
v-if="logged === false"
variant="text"
class="font-weight-semibold"
:to="{ name: 'registry' }"
>
Registro
</v-btn> -->
<!--v-btn
v-if="logged === false"
variant="text"
class="font-weight-semibold"
:to="{ name: 'login' }"
>
Login
</v-btn-->
<v-btn
variant="text"
class="font-weight-semibold"
:to="{ name: 'registry' }"
>
Registro
</v-btn>
<v-btn
variant="text"
class="font-weight-semibold"
:to="{ name: 'search' }"
>
Pesquise
</v-btn>
<v-menu v-if="logged === true" open-on-hover>
<template #activator="{ props }">
<v-btn variant="text" class="font-weight-semibold" v-bind="props">
{{ auth.getName() }}
<v-icon right>mdi-chevron-down</v-icon>
</v-btn>
</template>

<v-list>
<v-list-item link :to="{ name: 'profile' }">
<v-list-item-title>Profile</v-list-item-title>
</v-list-item>
<v-list-item link @click="auth.logout()">
<v-list-item-title>Logout</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
<main>
<h1 class="sr-only">Lista de Vagas</h1>
<section v-if="vacancies.length" aria-label="Lista de vagas disponíveis">
<div v-for="vacancy in vacancies" :key="vacancy.id" class="vacancies-card">
<h2>Produto {{ vacancy.id }}</h2>
<p><strong>Cargo:</strong> {{ vacancy.position }}</p>
<p><strong>Produto:</strong> {{ vacancy.product }}</p>
<p><strong>Data da candidatura:</strong> {{ vacancy.applicationDate }}</p>
<p><strong>Candidatos:</strong> {{ vacancy.candidates }}</p>
<p><strong>Prioridade da vaga:</strong> {{ vacancy.priority }}</p>
<button class="details-btn" :aria-label="'Ver detalhes da vaga para ' + vacancy.position">
Detalhes da vaga
</button>
</div>
</v-app-bar>


<transition name="fade" mode="out-in">
<v-main class="d-flex flex-grow-1 " style="margin-top: 64px">
<RouterView />

<v-snackbar v-model="snackbarStore.snack.show" v-bind="snackbarStore.snack" location="top right">
{{ text }}
<template #actions>
<v-btn variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>

</v-main>
</transition>


</v-app>
</section>
<p v-else class="empty-state">Nenhuma vaga disponível no momento.</p>
Comment on lines +4 to +17
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Adicionar estados de carregamento e erro

O componente precisa lidar com diferentes estados da aplicação para melhorar a experiência do usuário.

Aplique esta alteração:

 <template>
   <main>
     <h1 class="sr-only">Lista de Vagas</h1>
-    <section v-if="vacancies.length" aria-label="Lista de vagas disponíveis">
+    <div v-if="isLoading" class="loading-state">
+      <p>Carregando vagas...</p>
+    </div>
+    <div v-else-if="error" class="error-state">
+      <p>Erro ao carregar vagas: {{ error }}</p>
+    </div>
+    <section v-else-if="vacancies.length" aria-label="Lista de vagas disponíveis">
       <!-- ... resto do conteúdo ... -->
     </section>
     <p v-else class="empty-state">Nenhuma vaga disponível no momento.</p>
   </main>
 </template>

Committable suggestion skipped: line range outside the PR's diff.

</main>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRouter, RouterView, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useTheme } from 'vuetify'
import { useSnackbarStore } from '@/stores/snackbar'
import imgUrl from '@/assets/logo-green-transparent.png'

const router = useRouter()
const theme = useTheme()
const snackbarStore = useSnackbarStore()

const currentTheme = computed(() => theme.current.value)

const auth = useAuthStore()

const route = useRoute()

const logged = computed(() => auth.getName() != '')

const productUuid = computed(() => (auth.getName() != '' ? auth.products[0] : false))
<script>
import vacancies from "./components/data/vancacyMok.json";

console.log('logged', route.path)
const ef = computed(() => (route.path === '/' ? 'homeBackgroundEffect' : ''))

const navigateToHome = () => {
router.push({ name: 'home' })
}

function toggleTheme() {
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
localStorage.setItem('theme', theme.global.name.value)
}
export default {
data() {
return {
vacancies, // Dados importados arquivo JSON
};
},
};
Comment on lines +21 to +30
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Melhorar gerenciamento de estado e tipagem

O script atual não possui tratamento de erros, estado de carregamento ou tipagem.

Sugiro refatorar para Composition API com TypeScript:

-<script>
+<script setup lang="ts">
-import vacancies from "./components/data/vancacyMok.json";
+import { ref, onMounted } from 'vue'
+import type { Vacancy } from '@/types'
+import { getVacancies } from '@/services/vacancies'

-export default {
-  data() {
-    return {
-      vacancies, // Dados importados arquivo JSON
-    };
-  },
-};
+interface Vacancy {
+  id: number
+  position: string
+  product: string
+  applicationDate: string
+  candidates: number
+  priority: string
+}

+const vacancies = ref<Vacancy[]>([])
+const isLoading = ref(true)
+const error = ref<string | null>(null)

+async function fetchVacancies() {
+  try {
+    isLoading.value = true
+    vacancies.value = await getVacancies()
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Erro desconhecido'
+  } finally {
+    isLoading.value = false
+  }
+}

+onMounted(() => {
+  fetchVacancies()
+})

Committable suggestion skipped: line range outside the PR's diff.

</script>

<style lang="scss">

.header {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
<style scoped>
.vacancies-card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
margin: 16px 0;
background-color: #f9f9f9;
color: rgb(0, 0, 0);
}

.main-container {
margin-left: 240px;
margin-right: 240px;
padding: 0;

@media (max-width: 1600px) {
margin-left: 120px;
margin-right: 120px;
}
}


.logo {
.details-btn {
background-color: #007bff;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
transition: ease-in-out 0.2s;

&:hover {
filter: brightness(1.25);
transition: ease-in-out 0.2s;
}
}

.drag-none {
user-select: none;
-moz-drag-over: none;
-webkit-user-drag: none;
}

.logo-text {
font-family: 'Radio Canada', serif !important;
.details-btn:hover {
background-color: #0056b3;
}
</style>
34 changes: 34 additions & 0 deletions src/components/data/vancacyMok.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
[
{
"id": "024",
"position": "Associate Product Manager",
"product": "BackOffice RH",
"applicationDate": "07/04/2024",
"candidates": "1/1",
"priority": "Alta"
},
{
"id": "013",
"position": "Associate Product Manager",
"product": "Portal de Vagas",
"applicationDate": "12/04/2024",
"candidates": "2/2",
"priority": "Alta"
},
{
"id": "004",
"position": "Product Growth",
"product": "Portal de Mentorias",
"applicationDate": "18/04/2024",
"candidates": "0/1",
"priority": "Alta"
},
{
"id": "001",
"position": "Product Operations",
"product": "Site",
"applicationDate": "23/04/2024",
"candidates": "0/1",
"priority": "Alta"
}
]