Fix lecturer header card: add subjects bar

src/components/LecturerHeaderCard.vue

@@ -8,11 +8,24 @@
     </template>
     <template #subtitle>
       <div class="text-body-1">{{ firstName }} {{ middleName }}</div>
+      <div class="text-body-2">
+        <v-chip-group v-if="subjects">
+          <v-chip
+            v-for="(subject, index) in subjects"
+            :key="index"
+            outlined
+            size="small"
+          >
+            {{ subject }}
+          </v-chip>
+        </v-chip-group>
+      </div>
     </template>
   </v-card>
 </template>
 
 <script setup lang="ts">
+import { PropType } from "vue";
 import { useDisplay } from "vuetify";
 
 const { mobile } = useDisplay();
@@ -22,5 +35,10 @@ defineProps({
   lastName: { type: String, required: true },
   firstName: { type: String, required: true },
   middleName: { type: String, required: true },
+  subjects: {
+    type: null as unknown as PropType<Array<String> | null>,
+    required: false,
+    default: null,
+  },
 });
 </script>

src/components/TheLecturerSearchCard.vue

@@ -35,7 +35,7 @@
             еще {{ lecturer.subjects.length - 2 }}
           </v-chip>
         </v-chip-group>
-        <div v-else-if="lecturer.subjects === null"> </div>
+        <div v-else-if="lecturer.subjects === null"></div>
         <div v-else>Нет предметов</div>
         <div>отзывы: {{ lecturer.comments?.length ?? "—" }}</div>
         <div>
@@ -71,7 +71,6 @@ const props = defineProps({
   photo: { type: String, required: true },
 });
 
-
 function toReviewPage() {
   router.push({ path: "review", query: { lecturer_id: props.lecturer.id } });
 }

src/pages/LecturerPage.vue

@@ -24,6 +24,7 @@ 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);
 
 async function loadLecturer() {
 	const res = await apiClient.GET(`/rating/lecturer/{id}`, {
@@ -54,6 +55,7 @@ const lecturerPhoto = getPhoto(avatarLink.value);
 			:first-name="firstName ?? 'Ошибка'"
 			:last-name="lastName ?? 'Ошибка'"
 			:middle-name="middleName ?? 'Ошибка'"
+			:subjects="lecturerSubjects"
 		/>
 		<div class="d-table w-100 my-4">
 			<AppRatingBar :value="howKind" label="доброта"></AppRatingBar>

src/pages/ReviewPage.vue

@@ -39,18 +39,19 @@ const lecturer = await loadLecturer();
 const firstName = ref(lecturer?.first_name);
 const lastName = ref(lecturer?.last_name);
 const middleName = ref(lecturer?.middle_name);
+const lecturerSubjects = ref(lecturer?.subjects);
 const photo = lecturer?.avatar_link ? `${PHOTO_BASE_PATH}${lecturer?.avatar_link}` : Placeholder;
-const subject = ref('');
+const subjectQuery = ref('');
 const warningMessage = ref('');
 const isAnonymous = ref(false);
 
 async function sendReview() {
 	warningMessage.value = '';
-	if (lecturer && lecturerId && subject.value !== '' && SUBJECTS.includes(subject.value)) {
+	if (lecturer && lecturerId && subjectQuery.value !== '' && SUBJECTS.includes(subjectQuery.value)) {
 		const { response } = await apiClient.POST('/rating/comment', {
 			params: { query: { lecturer_id: Number(lecturerId) } },
 			body: {
-				subject: subject.value,
+				subject: subjectQuery.value,
 				text: reviewText.value,
 				mark_kindness: kindReview.value,
 				mark_freebie: freebieReview.value,
@@ -84,9 +85,9 @@ async function sendReview() {
 			}
 		}
 	} else {
-		if (subject.value == '' || subject.value == null) {
+		if (subjectQuery.value == '' || subjectQuery.value == null) {
 			warningMessage.value = 'Выберите предмет';
-		} else if (!SUBJECTS.includes(subject.value)) {
+		} else if (!SUBJECTS.includes(subjectQuery.value)) {
 			warningMessage.value = 'Введите корректный предмет';
 		} else {
 			toastStore.push({
@@ -118,10 +119,10 @@ async function sendReview() {
 			:first-name="firstName ?? 'Ошибка'"
 			:last-name="lastName ?? 'Ошибка'"
 			:middle-name="middleName ?? 'Ошибка'"
+			:subjects="lecturerSubjects"
 		/>
-
 		<v-combobox
-			v-model="subject"
+			v-model="subjectQuery"
 			:error-messages="warningMessage"
 			hide-details="auto"
 			label="Выберите предмет"