Компактное отображение списка преподов Дубинушки#87
Conversation
…ная логика с вычислением по одному преподу
…жим не сохраняется.
…`slotProps` и затем обратился к свойствам через него.
|
Что нужно доделать:
|
BatuevIO
left a comment
BatuevIO
left a comment
There was a problem hiding this comment.
Хорошо справился! Особенно с приведением типов к нужным
Комменты в основном по читаемости кода, внеси их, пожалуйста.
| <div> | ||
| <strong>{{ item.raw.last_name }}</strong> | ||
| {{ item.raw.first_name }} {{ item.raw.middle_name }} | ||
| </div> |
| > | ||
| {{ subject }} | ||
| </v-chip> | ||
| <v-chip v-if="getFilteredSubjects(item.raw.subjects).length > 2" size="small" readonly :ripple="false"> |
There was a problem hiding this comment.
getFilteredSubjects(item.raw.subjects).length > 2
Для читаемости можно вынести в отдельное условие типа isSubjectOverflow(subjects)
| {{ subject }} | ||
| </v-chip> | ||
| <v-chip v-if="getFilteredSubjects(item.raw.subjects).length > 2" size="small" readonly :ripple="false"> | ||
| еще {{ getFilteredSubjects(item.raw.subjects).length - 2 }} |
There was a problem hiding this comment.
getFilteredSubjects(item.raw.subjects).length - 2
И здесь тоже, типа reaminingSubjects = ...
| {{ ratings[index] }} | ||
| </template> | ||
|
|
||
| <template #[`item.fullName`]="{ item }"> |
There was a problem hiding this comment.
Тут и дальше в темплейтах можно удобно деструктурировать.
<template #[`item.fullName`]="{ item: {raw: {last_name, middle_name, first_name}} }">
<div>
<strong>{{ last_name }}</strong>
{{ first_name }} {{ middle_name }}
</div>There was a problem hiding this comment.
Сам об этом только что подумал...
| :items="tableItems" | ||
| hide-default-footer | ||
| disable-sort | ||
| class="elevation-1 lecturer-table" |
There was a problem hiding this comment.
По сути, это не карточка, а вся таблица -- хорошо бы отразить это в названии.
Например, TheLecturerSearchTable.vue
| emit('lecturerClick', item.raw.id); | ||
| } | ||
|
|
||
| function formatMark(mark: number | null | undefined): string { |
There was a problem hiding this comment.
Вот это потом можно вынести в компоузабл или стор, потому что используется не только здесь.
getMarkColor тоже
| const lecturersPhotos = ref<string[]>(Array<string>(itemsPerPage)); | ||
|
|
||
| // Вычисляем порядковые номера для компактного режима | ||
| const lecturerRatings = computed(() => { |
There was a problem hiding this comment.
Тоже хорошо будет убрать в стор
There was a problem hiding this comment.
Это можно сделать не сейчас
…ть функций в utils
|
Вроде все комменты обработал: почистил код, изменил название, деструктурировал, убрал всякое разное в сторы + сделал стор, который хранит состояние списка (чтобы при выходе из карточки препода попадать в предыдущее состояние списка). |
src/pages/MainPage.vue
Outdated
|
|
||
| // utils | ||
| const totalPages: Ref<number> = ref(1); | ||
| const userAdmin = ref(profileStore.isAdmin()); |
There was a problem hiding this comment.
А зачем реф? Можно просто функцию использовать
There was a problem hiding this comment.
Чтобы не писать через точку, можно метод через деструктуризацию достать
There was a problem hiding this comment.
Если нужна реактивность, то через компьютед
2 participants
Изменения
Добавил компактное отображение списка преподов в виде таблицы с 10 элементами на странице. Сделал кнопку-свитчер между стандартным и компактным отображением.
Детали реализации
Check-List
blackиisortдля Back-End илиPrettierдля Front-End?