WIP: фильтрация отзывов у преподавателя

src/pages/LecturerPage.vue

@@ -1,50 +1,40 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
 import { useDisplay } from 'vuetify';
-import { ref } from 'vue';
-import apiClient from '@/api';
+import { ref, onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
 import Placeholder from '@/assets/profile_image_placeholder.webp';
 import AppRatingBar from '@/components/AppRatingBar.vue';
 import TheReviewCard from '@/components/TheReviewCard.vue';
 import LecturerHeaderCard from '@/components/LecturerHeaderCard.vue';
-import { adaptNumeral, getPhoto, copyUrlToClipboard } from '@/utils';
+import { adaptNumeral, copyUrlToClipboard } from '@/utils';
+import { useLecturerPageStore } from '@/store/lecturerPageStore';
 
 const { mobile } = useDisplay();
 const router = useRouter();
 
 const page = ref(1);
 const itemsPerPage = 3;
 
+const lecturerPageStore = useLecturerPageStore();
+
 const url = new URL(document.location.toString());
-const lecturerId = url.searchParams.get('lecturer_id');
-
-const lecturer = await loadLecturer();
-const firstName = ref(lecturer?.first_name);
-const lastName = ref(lecturer?.last_name);
-const middleName = ref(lecturer?.middle_name);
-const avatarLink = ref(lecturer?.avatar_link);
-const lecturerSubjects = ref(lecturer?.subjects);
-const shareSuccess = ref(false);
+const lecturerIdParam = url.searchParams.get('lecturer_id');
+const lecturerId = Number(lecturerIdParam);
 
-async function loadLecturer() {
-	const res = await apiClient.GET(`/rating/lecturer/{id}`, {
-		params: {
-			path: {
-				id: Number(lecturerId),
-			},
-			query: {
-				info: ['comments'],
-			},
-		},
-	});
-	return res.data;
-}
+onMounted(() => {
+	lecturerPageStore.init(lecturerId);
+});
 
-const howKind = lecturer?.mark_kindness_weighted ?? 0;
-const howFree = lecturer?.mark_freebie_weighted ?? 0;
-const howClear = lecturer?.mark_clarity_weighted ?? 0;
+const { lecturer, selectedSubject, lecturerPhoto, howClear, howFree, howKind, lecturerSubjects } =
+	storeToRefs(lecturerPageStore);
 
-const lecturerPhoto = getPhoto(avatarLink.value);
+const shareSuccess = ref(false);
+
+function handleFilter(subject: string | null) {
+	lecturerPageStore.handleFilter(subject);
+	page.value = 1;
+}
 
 async function shareLecturerPage() {
 	shareSuccess.value = await copyUrlToClipboard({ lecturer_id: lecturerId }, 'lecturer');
@@ -56,14 +46,32 @@ async function shareLecturerPage() {
 
 <template>
 	<v-container class="pa-2 justify-center">
-		<v-btn class="mb-4" color="primary" text="Назад к поиску" rounded="lg" @click="router.push('/')"></v-btn>
+		<v-btn class="mb-4" color="primary" text="Назад к поиску" rounded="lg" @click="router.push('/')" />
+
 		<LecturerHeaderCard
 			:photo="lecturerPhoto"
-			:first-name="firstName ?? 'Ошибка'"
-			:last-name="lastName ?? 'Ошибка'"
-			:middle-name="middleName ?? 'Ошибка'"
+			:first-name="lecturer?.first_name ?? 'Ошибка'"
+			:last-name="lecturer?.last_name ?? 'Ошибка'"
+			:middle-name="lecturer?.middle_name ?? 'Ошибка'"
 			:subjects="lecturerSubjects"
 		/>
+
+		<div class="mb-3">
+			<v-chip class="mr-2 mb-2" :color="selectedSubject === null ? 'primary' : ''" @click="handleFilter(null)">
+				Все
+			</v-chip>
+
+			<v-chip
+				v-for="subject in lecturerSubjects"
+				:key="subject"
+				class="mr-2 mb-2"
+				:color="selectedSubject === subject ? 'primary' : ''"
+				@click="handleFilter(subject)"
+			>
+				{{ subject }}
+			</v-chip>
+		</div>
+
 		<div class="d-table w-100 my-2">
 			<AppRatingBar :value="howKind" label="доброта"></AppRatingBar>
 			<AppRatingBar :value="howFree" label="халявность"></AppRatingBar>
@@ -97,15 +105,18 @@ async function shareLecturerPage() {
 						rounded="xl"
 					>
 						<template #prepend>
-							<v-icon :icon="'mdi-tree-outline'"></v-icon>
+							<v-icon icon="mdi-tree-outline" />
+						</template>
+						<template #title>
+							{{ lecturer?.mark_weighted?.toFixed(2) ?? '—' }}
+						</template>
+						<template #text>
+							{{ lecturer?.comments?.length ?? 'нет' }}
+							{{ adaptNumeral(lecturer?.comments?.length, 'отзыв', 'отзыва', 'отзывов') }}
 						</template>
-						<template #title>{{ lecturer?.mark_weighted?.toFixed(2) ?? '—' }}</template>
-						<template #text
-							>{{ lecturer?.comments?.length ?? 'нет' }}
-							{{ adaptNumeral(lecturer?.comments?.length, 'отзыв', 'отзыва', 'отзывов') }}</template
-						>
 					</v-card>
 				</v-col>
+
 				<v-col :cols="mobile ? '7' : '10'">
 					<v-card
 						class="pl-1 ml-1"
@@ -146,7 +157,7 @@ async function shareLecturerPage() {
 
 			<v-footer class="position-fixed bottom-0 pa-0 mb-3 pr-12">
 				<v-btn
-					:icon="'mdi-pen'"
+					icon="mdi-pen"
 					color="secondary"
 					class="footer-button mr-1"
 					rounded="pill"

src/store/lecturerPageStore.ts

@@ -0,0 +1,69 @@
+import { ref, computed } from 'vue';
+import { defineStore } from 'pinia';
+import apiClient from '@/api';
+import { Lecturer } from '@/models';
+import { getPhoto } from '@/utils';
+import Placeholder from '@/assets/profile_image_placeholder.webp';
+
+export const useLecturerPageStore = defineStore('lecturerPage', () => {
+	const lecturer = ref<Lecturer | null>(null);
+	const lecturerPhoto = ref<string>(Placeholder);
+	const selectedSubject = ref<string | null>(null);
+	const lecturerId = ref<number | null>(null);
+	const loading = ref(false);
+	const howKind = computed(() => lecturer.value?.mark_kindness_weighted ?? 0);
+	const howFree = computed(() => lecturer.value?.mark_freebie_weighted ?? 0);
+	const howClear = computed(() => lecturer.value?.mark_clarity_weighted ?? 0);
+	const lecturerSubjects = computed(() => lecturer.value?.subjects ?? []);
+
+	async function fetchLecturer(subject?: string | null) {
+		if (!lecturerId.value) return;
+
+		loading.value = true;
+
+		try {
+			const res = await apiClient.GET(`/rating/lecturer/{id}`, {
+				params: {
+					path: { id: lecturerId.value },
+					query: {
+						info: ['comments'],
+						subject: subject ?? undefined,
+					},
+				},
+			});
+
+			const data = res.data;
+
+			if (!data) return;
+
+			lecturer.value = data;
+			lecturerPhoto.value = getPhoto(data.avatar_link);
+		} finally {
+			loading.value = false;
+		}
+	}
+
+	async function init(id: number) {
+		lecturerId.value = id;
+		selectedSubject.value = null;
+		await fetchLecturer();
+	}
+
+	async function handleFilter(subject: string | null) {
+		selectedSubject.value = subject;
+		await fetchLecturer(subject);
+	}
+
+	return {
+		lecturer,
+		lecturerPhoto,
+		selectedSubject,
+		loading,
+		howKind,
+		howClear,
+		howFree,
+		lecturerSubjects,
+		init,
+		handleFilter,
+	};
+});