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

Cria filtros para Pesquisa #3

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

Cria filtros para Pesquisa #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a47b618
Cria filtros para Pesquisa
BarbasPedro Jan 26, 2025
30847e1
Move dados mockados para um arquivo de configuração
BarbasPedro Jan 26, 2025
897dfb8
Apaga arquivos temporários
BarbasPedro Jan 26, 2025
730697f
Melhora tipagem das props
BarbasPedro Jan 26, 2025
b0a0d73
Adiciona estado para sub-áreas, disponibilidade e período de disponib…
BarbasPedro Jan 26, 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
7 changes: 7 additions & 0 deletions .eslintrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
/* eslint-env node */
/* @typescript-eslint */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
Expand All @@ -21,5 +22,11 @@ module.exports = {
],
parserOptions: {
ecmaVersion: 'latest'
},
"plugins": {
"@typescript-eslint": true
},
"rules": {
"@typescript-eslint/explicit-function-return-type": "off"
}
}
178 changes: 3 additions & 175 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,183 +1,11 @@
<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>
</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>
<AsideLayout />
</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() != '')
import AsideLayout from './components/AsideLayout.vue';

const productUuid = computed(() => (auth.getName() != '' ? auth.products[0] : false))

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)
}
</script>

<style lang="scss">

.header {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

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

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


.logo {
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;
}
<style>
</style>
12 changes: 6 additions & 6 deletions src/assets/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); */
// /* @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); */

@use 'vuetify' with (
$body-font-family: Radio Canada /*put the font family name here*/
);
@import url('https://fonts.googleapis.com/css2?family=Radio+Canada:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap');
// @use 'vuetify' with (
// $body-font-family: Radio Canada /*put the font family name here*/
// );
// @import url('https://fonts.googleapis.com/css2?family=Radio+Canada:ital,wght@0,300..700;1,300..700&display=swap');
// @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap');
61 changes: 61 additions & 0 deletions src/components/AsideLayout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
import CheckboxList from './CheckboxList.vue'
import { roles, headAreas, juniorAreas, productManagerSubAreas, designSubAreas, dataSubAreas, businessSubAreas, availabilities, periods } from '../config/options'

const selectedArea = ref('')
const selectedRole = ref('')
const selectedSubArea = ref('')
const selectedAvailability = ref('')
const selectedPeriod = ref('')

Comment on lines +6 to +11
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Adicione efeitos de observação para gerenciar estados dependentes

É necessário resetar estados dependentes quando as seleções principais são alteradas.

 const selectedArea = ref('')
 const selectedRole = ref('')
 const selectedSubArea = ref('')
 const selectedAvailability = ref('')
 const selectedPeriod = ref('')
+
+// Reseta a área selecionada quando o cargo muda
+watch(selectedRole, () => {
+  selectedArea.value = ''
+  selectedSubArea.value = ''
+})
+
+// Reseta a sub-área quando a área muda
+watch(selectedArea, () => {
+  selectedSubArea.value = ''
+})
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const selectedArea = ref('')
const selectedRole = ref('')
const selectedSubArea = ref('')
const selectedAvailability = ref('')
const selectedPeriod = ref('')
const selectedArea = ref('')
const selectedRole = ref('')
const selectedSubArea = ref('')
const selectedAvailability = ref('')
const selectedPeriod = ref('')
// Reseta a área selecionada quando o cargo muda
watch(selectedRole, () => {
selectedArea.value = ''
selectedSubArea.value = ''
})
// Reseta a sub-área quando a área muda
watch(selectedArea, () => {
selectedSubArea.value = ''
})


const handleAreaSelection = (area: string) => {
if (selectedArea.value === area) {
selectedArea.value = ''
} else {
selectedArea.value = area
}
}
</script>

<template>
<aside>
<CheckboxList v-model="selectedRole" :values="roles" :input-type="'radio'" />

<CheckboxList
v-if="selectedRole === 'Head'"
:model-value="selectedArea"
:label="'ÁREA DE ATUAÇÃO'"
:values="headAreas"
@update:model-value="handleAreaSelection"
/>

<CheckboxList
v-if="selectedRole === 'Junior' || selectedRole === 'Mentor'"
:model-value="selectedArea"
:label="'ÁREA DE ATUAÇÃO'"
:values="juniorAreas"
@update:model-value="handleAreaSelection"
/>

<div v-if="selectedRole !== 'Head' && selectedArea">
<CheckboxList
v-if="selectedArea === 'Produto'"
:label="'SUB-ÁREA'"
:values="productManagerSubAreas"
/>
<CheckboxList v-if="selectedArea === 'Design'" :label="'SUB-ÁREA'" :values="designSubAreas" />
<CheckboxList v-if="selectedArea === 'Dados'" :label="'SUB-ÁREA'" :values="dataSubAreas" />
<CheckboxList
v-if="selectedArea === 'Business'"
:label="'SUB-ÁREA'"
:values="businessSubAreas"
/>

</div>

<CheckboxList :label="'DISPONIBILIDADE'" :values="availabilities" />
<CheckboxList :label="'PERÍODO DE DISPONIBILIDADE'" :values="periods"/>
</aside>
</template>
65 changes: 65 additions & 0 deletions src/components/CheckboxList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<script setup lang="ts">
import { PropType } from 'vue';

defineProps({
values: {
type: Array as PropType<string[]>,
required: true
},
label: {
type: String,
required: false,
default: ''
},
inputType: {
type: String,
required: false,
default: 'checkbox'
},
modelValue: {
type: String as PropType<string>,
required: false,
default: ''
},
})
Comment on lines +4 to +24
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Implemente suporte completo ao v-model

O componente precisa suportar arrays para checkboxes múltiplos.

 defineProps({
   values: {
     type: Array as PropType<string[]>,
     required: true
   },
   modelValue: {
-    type: String as PropType<string>,
+    type: [String, Array] as PropType<string | string[]>,
     required: false,
-    default: ''
+    default: () => ''
   },
   // ... outros props
 })
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
defineProps({
values: {
type: Array as PropType<string[]>,
required: true
},
label: {
type: String,
required: false,
default: ''
},
inputType: {
type: String,
required: false,
default: 'checkbox'
},
modelValue: {
type: String as PropType<string>,
required: false,
default: ''
},
})
defineProps({
values: {
type: Array as PropType<string[]>,
required: true
},
label: {
type: String,
required: false,
default: ''
},
inputType: {
type: String,
required: false,
default: 'checkbox'
},
modelValue: {
type: [String, Array] as PropType<string | string[]>,
required: false,
default: () => ''
},
})


const emit = defineEmits(['update:modelValue'])

const handleChange = (event: Event) => {
const target = event.target as HTMLInputElement
emit('update:modelValue', target.checked ? target.value : '')
}
</script>

<template>
<div class="checkboxList">
<p>{{ label }}</p>
<div v-for="value in values" :key="value">
<input
:id="`input-${value}`"
:key="value"
:value="value"
:type="inputType"
:checked="modelValue === value"
:aria-label="value"
name="value"
@change="handleChange"
/>
<label :for="`input-${value}`">{{ value }}</label>
</div>
</div>
</template>

<style scoped>
.checkboxList {
margin-top: 40px;

p {
margin-bottom: 8px;
}

label {
margin-left: 4px;
}
}
</style>
14 changes: 14 additions & 0 deletions src/config/options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@

export const roles = ['Head', 'Mentor', 'Junior']

export const headAreas = ['Agilidade', 'Back-End', 'Business', 'Dados', 'Design', 'DevOps', 'Front-End', 'Produto', 'QA - Quality Assurance', 'Tech Recruitment']
export const juniorAreas = ['Agilidade', 'Back-End', 'Business', 'Dados', 'Design', 'DevOps', 'Front-End', 'Produto', 'QA - Quality Assurance', 'Social Media', 'Tech Recruitment']

export const productManagerSubAreas = ['APM - Associate Product Manager','Product Growth', 'Product Marketing Manager', 'Product Ops']
export const designSubAreas = ['Design Ops', 'UX/UI']
export const dataSubAreas = ['Analytics', 'BI', 'Engenharia de Dados']
export const businessSubAreas = ['Análise de negócios', 'Análise de processos', 'Outros']

export const availabilities = ['5h/semanais', '10h/semanais', '15h/semanais', '+15h/semanais']

export const periods = ['Manhã', 'Tarde', 'Noite']
4 changes: 2 additions & 2 deletions src/router/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,8 +140,8 @@ const router = createRouter({
path: '/404',
name: 'not-found',
component: () => import('../views/NotFoundView.vue')
}
]
},
],
})

router.beforeEach((to, from, next) => {
Expand Down