Skip to content

Commit 3b65726

Browse files
JoabesvJoabesv
committed
wip: migrate logic to composable
1 parent 4e2e0ab commit 3b65726

File tree

4 files changed

+118
-90
lines changed

4 files changed

+118
-90
lines changed

‎biome.json

+9-2
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,19 @@
1919
"linter": {
2020
"enabled": true,
2121
"rules": {
22-
"recommended": true
22+
"recommended": true,
23+
"complexity": {
24+
"noForEach": "info"
25+
},
26+
"suspicious": {
27+
"noAssignInExpressions": "off"
28+
}
2329
}
2430
},
2531
"javascript": {
2632
"formatter": {
2733
"quoteStyle": "single"
2834
}
29-
}
35+
},
36+
3037
}

‎src/composables/useComponentsBuilder.ts

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import Cortes from '@/components/Cortes.vue';
2+
import Teachers from '@/components/Teachers.vue';
3+
import { ref, render } from 'vue'
4+
import { useQuery } from '@tanstack/vue-query'
5+
import { getComponents } from '@/services/next'
6+
7+
// this is probably more than a coomposable
8+
9+
function setupSubjectElement(subjectEl: HTMLSpanElement, subjectId: string) {
10+
subjectEl.style.cursor = 'pointer'
11+
12+
subjectEl.addEventListener('mouseenter', () => {
13+
subjectEl.style.textDecoration = 'underline'
14+
})
15+
16+
subjectEl.addEventListener('mouseleave', () => {
17+
subjectEl.style.textDecoration = 'none'
18+
})
19+
20+
subjectEl.setAttribute('subjectId', subjectId)
21+
}
22+
23+
function appendTeacherComponent(el: HTMLTableColElement | null, component: any) {
24+
if (!el) return
25+
26+
const teacherContainer = document.createElement('div')
27+
el.appendChild(teacherContainer)
28+
29+
render(h(Teachers, {
30+
teoria: component.teoria,
31+
teoriaId: component.teoriaId,
32+
pratica: component.pratica,
33+
praticaId: component.praticaId,
34+
}), teacherContainer)
35+
}
36+
37+
function appendCortesComponent(corteEl: Element | null) {
38+
if (!corteEl) return
39+
40+
const cortesContainer = document.createElement('div')
41+
corteEl.appendChild(cortesContainer)
42+
43+
render(h(Cortes), cortesContainer)
44+
}
45+
46+
export function useComponentsBuilder() {
47+
const teachers = ref(false)
48+
49+
const { data: components, error } = useQuery({
50+
queryKey: ['components'],
51+
queryFn: async () => getComponents(),
52+
retry: 3,
53+
staleTime: 1000 * 60 * 5, // 5 minutes
54+
initialData: [], // Provide empty array as initial data
55+
})
56+
57+
watch(components, (newComponents) => {
58+
if (newComponents?.length) {
59+
buildComponents()
60+
}
61+
})
62+
63+
64+
function buildComponents() {
65+
if (!teachers.value) {
66+
document.querySelectorAll<HTMLTableCaptionElement>('.isTeacherReview')
67+
.forEach($el => $el.style.display = 'none')
68+
return
69+
}
70+
71+
const teacherReviews = document.querySelectorAll<HTMLTableCaptionElement>('.isTeacherReview')
72+
if (teacherReviews.length > 0) {
73+
teacherReviews.forEach($el => $el.style.display = '')
74+
return
75+
}
76+
77+
const componentsMap = new Map(
78+
components.value?.map(component => [component.disciplina_id.toString(), component])
79+
)
80+
81+
document.querySelectorAll('table tr').forEach(row => {
82+
const el = row.querySelector<HTMLTableColElement>('td:nth-child(3)')
83+
const subjectEl = row.querySelector<HTMLSpanElement>('td:nth-child(3) > span')
84+
const corteEl = row.querySelector('td:nth-child(5)')
85+
const componentId = row.getAttribute('value')
86+
87+
if (!componentId) return
88+
const component = componentsMap.get(componentId)
89+
if (!component) return
90+
91+
if (component.subject && subjectEl) {
92+
setupSubjectElement(subjectEl, component.subjectId)
93+
}
94+
95+
appendTeacherComponent(el, component)
96+
appendCortesComponent(corteEl)
97+
})
98+
}
99+
100+
return {
101+
teachers,
102+
buildComponents
103+
}
104+
}

‎src/composables/useFilters.ts

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export function useFilters() {
4444
for (const data of tableData) {
4545
const subject = data.textContent?.toLocaleLowerCase()
4646
if (!subject?.includes(params.comparator.toLocaleLowerCase())) {
47+
// biome-ignore lint/style/noNonNullAssertion: <explanation>
4748
data.parentElement!.style.display = 'none'
4849
}
4950
}

‎src/entrypoints/matricula.content/UFABC-Matricula.vue

+4-88
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
<script setup lang="ts">
2-
import Cortes from '@/components/Cortes.vue';
3-
import Teachers from '@/components/Teachers.vue';
42
import { getComponents } from '@/services/next';
53
import { render } from 'vue';
64
import SubjectReview from '@/components/SubjectReview.vue';
@@ -10,32 +8,21 @@ import { toast, Toaster } from 'vue-sonner'
108
import { useQuery } from '@tanstack/vue-query';
119
import { useFilters } from '@/composables/useFilters'
1210
import { useModals } from '@/composables/useModals'
11+
import { useComponentsBuilder } from '@/composables/useComponentsBuilder'
1312
import type { UFABCMatriculaStudent } from '.';
1413
import type { Student } from '@/scripts/sig/homepage';
1514
16-
17-
type Filter = {
18-
name: 'Santo André' | 'São Bernardo' | 'Noturno' | 'Matutino'
19-
val: boolean
20-
comparator: 'bernardo' | 'andr' | 'diurno' | 'noturno'
21-
class: 'notAndre' | 'notBernardo' | 'notNoturno' | 'notMatutino'
22-
}
23-
2415
const matriculas = inject<typeof window.matriculas>('matriculas')
2516
const matriculaStudent = inject<UFABCMatriculaStudent>('student')
2617
2718
const { state: student } = useStorage<Student>('local:student');
2819
const { campusFilters, shiftFilters, applyFilter } = useFilters()
2920
const { subjectReview, kicksModal, teacherReview } = useModals()
21+
const { teachers, buildComponents } = useComponentsBuilder()
3022
3123
const selected = ref(false)
3224
const cursadas = ref(false)
3325
const showWarning = ref(false);
34-
const teachers = ref(false);
35-
const { data: components } = useQuery({
36-
queryKey: ['components'],
37-
queryFn: () => getComponents(),
38-
})
3926
4027
function openSubjectReview(subjectId: string) {
4128
subjectReview.value.isOpen = true;
@@ -105,7 +92,7 @@ function changeCursadas() {
10592
}
10693
return;
10794
}
108-
if (student.value) {
95+
if (!student.value) {
10996
toast.warning('Não encontramos suas disciplinas cursadas, por favor acesse o sigaa')
11097
return
11198
}
@@ -154,77 +141,6 @@ const target = event.target as HTMLElement;
154141
}
155142
}
156143
157-
158-
159-
async function buildComponents() {
160-
if (!teachers.value) {
161-
for (const $element of document.querySelectorAll<HTMLTableCaptionElement>('.isTeacherReview')) {
162-
$element.style.display = 'none'
163-
}
164-
return
165-
}
166-
// se ja tiver calculado nao refaz o trabalho
167-
const teacherReviews = document.querySelectorAll<HTMLTableCaptionElement>('.isTeacherReview');
168-
if (teacherReviews.length > 0) {
169-
for (const $element of document.querySelectorAll<HTMLTableCaptionElement>('.isTeacherReview')) {
170-
$element.style.display = ''
171-
}
172-
return;
173-
}
174-
const components = await getComponents()
175-
const componentsMap = new Map(
176-
components.map((component) => [
177-
component.disciplina_id.toString(),
178-
component,
179-
]),
180-
);
181-
182-
const mainTable = document.querySelectorAll('table tr');
183-
for (const row of mainTable) {
184-
const el = row.querySelector<HTMLTableColElement>('td:nth-child(3)');
185-
const subjectEl = row.querySelector<HTMLSpanElement>('td:nth-child(3) > span');
186-
const corteEl = row.querySelector('td:nth-child(5)');
187-
const componentId = row.getAttribute('value');
188-
if (!componentId) {
189-
continue;
190-
}
191-
const component = componentsMap.get(componentId);
192-
if (!component) {
193-
continue;
194-
}
195-
196-
if (component.subject && subjectEl) {
197-
subjectEl.style.cursor = 'pointer'
198-
199-
subjectEl.addEventListener('mouseenter', () => {
200-
subjectEl.style.textDecoration = 'underline';
201-
});
202-
203-
subjectEl.addEventListener('mouseleave', () => {
204-
subjectEl.style.textDecoration = 'none';
205-
});
206-
207-
subjectEl.setAttribute('subjectId', component.subjectId);
208-
}
209-
210-
const teacherContainer = document.createElement('div')
211-
el?.appendChild(teacherContainer)
212-
213-
render(h(Teachers, {
214-
teoria: component.teoria,
215-
teoriaId: component.teoriaId,
216-
pratica: component.pratica,
217-
praticaId: component.praticaId,
218-
}), teacherContainer)
219-
220-
const cortesContainer = document.createElement('div');
221-
corteEl?.appendChild(cortesContainer);
222-
223-
render(h(Cortes), cortesContainer)
224-
}
225-
}
226-
227-
228144
onMounted(async () => {
229145
document.body.addEventListener("click", handleClick);
230146
const studentId = getStudentId()
@@ -235,7 +151,7 @@ onMounted(async () => {
235151
})
236152
237153
teachers.value = true;
238-
await buildComponents();
154+
buildComponents();
239155
})
240156
241157
onUnmounted(() => {

0 commit comments

Comments
 (0)