Skip to content

Commit fc2be81

Browse files
SemedanikSemedanik
authored
Улучшено отображение результатов поиска групп (#317)
## Изменения <!-- Опишите здесь на языке, понятном каждому, изменения, сделанные в исходном коде по пунктам. --> ## Детали реализации <!-- Здесь можно описать технические детали по пунктам. --> ## Check-List <!-- После сохранения у следующих полей появятся галочки, которые нужно проставить мышкой --> - [ ] Вы проверили свой код перед отправкой запроса? - [ ] Вы написали тесты к реализованным функциям? - [ ] Вы не забыли применить форматирование `black` и `isort` для _Back-End_ или `Prettier` для _Front-End_?
1 parent 054164e commit fc2be81

File tree

1 file changed

+93
-76
lines changed

1 file changed

+93
-76
lines changed

‎src/views/timetable/init/TimetableInitView.vue‎

Lines changed: 93 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,93 @@
1-
<script setup lang="ts">
2-
import Logo from '/icon.svg';
3-
import { ref } from 'vue';
4-
import AsyncGroupsList from './AsyncGroupsList.vue';
5-
import IrdomLayout from '@/components/IrdomLayout.vue';
6-
import { useProfileStore } from '@/store/profile';
7-
import { useToolbar } from '@/store/toolbar';
8-
import FullscreenLoader from '@/components/FullscreenLoader.vue';
9-
import { apiClient } from '@/api/';
10-
11-
const query = ref('');
12-
const profileStore = useProfileStore();
13-
const toolbar = useToolbar();
14-
15-
toolbar.setup({});
16-
17-
const sendMarketing = (e: Event) => {
18-
const input = e.target as HTMLInputElement;
19-
20-
if (profileStore.marketingId) {
21-
apiClient.POST('/marketing/v1/action', {
22-
body: {
23-
action: 'timetable search group',
24-
user_id: profileStore.marketingId,
25-
additional_data: JSON.stringify({ query: input.value }),
26-
},
27-
});
28-
}
29-
};
30-
</script>
31-
32-
<template>
33-
<IrdomLayout>
34-
<img :src="Logo" alt="Логотип физфака" class="align-self-center logo mb-20" />
35-
36-
<h4 class="text-h4 align-self-center greeting">Добро пожаловать!</h4>
37-
<p class="message">Наше приложение позволит получить доступ к сервисам для студентов ФФ МГУ!</p>
38-
<p class="message">Для просмотра расписания выберите свою группу:</p>
39-
40-
<v-responsive class="align-self-center" width="344">
41-
<v-text-field
42-
v-model="query"
43-
type="text"
44-
label="Номер группы"
45-
placeholder="Введите номер группы"
46-
inputmode="numeric"
47-
class="align-self-center input"
48-
max-width="344"
49-
@change.once="sendMarketing"
50-
/>
51-
</v-responsive>
52-
53-
<Suspense>
54-
<AsyncGroupsList :query="query" />
55-
56-
<template #fallback> <FullscreenLoader /> </template>
57-
</Suspense>
58-
</IrdomLayout>
59-
</template>
60-
<style scoped>
61-
.greeting,
62-
.input {
63-
margin-bottom: 24px;
64-
}
65-
66-
.logo {
67-
width: min(50%, 144px);
68-
aspect-ratio: 1;
69-
pointer-events: none;
70-
margin-bottom: 20px;
71-
}
72-
73-
.message {
74-
margin-bottom: 20px;
75-
}
76-
</style>
1+
<script setup lang="ts">
2+
import Logo from '/icon.svg';
3+
import { ref } from 'vue';
4+
import AsyncGroupsList from './AsyncGroupsList.vue';
5+
import IrdomLayout from '@/components/IrdomLayout.vue';
6+
import { useProfileStore } from '@/store/profile';
7+
import { useToolbar } from '@/store/toolbar';
8+
import FullscreenLoader from '@/components/FullscreenLoader.vue';
9+
import { apiClient } from '@/api/';
10+
11+
const query = ref('');
12+
const profileStore = useProfileStore();
13+
const toolbar = useToolbar();
14+
15+
toolbar.setup({});
16+
17+
const sendMarketing = (e: Event) => {
18+
const input = e.target as HTMLInputElement;
19+
20+
if (profileStore.marketingId) {
21+
apiClient.POST('/marketing/v1/action', {
22+
body: {
23+
action: 'timetable search group',
24+
user_id: profileStore.marketingId,
25+
additional_data: JSON.stringify({ query: input.value }),
26+
},
27+
});
28+
}
29+
};
30+
</script>
31+
32+
<template>
33+
<IrdomLayout>
34+
<img :src="Logo" alt="Логотип физфака" class="align-self-center logo mb-20" />
35+
36+
<h4 class="text-h4 align-self-center greeting">Добро пожаловать!</h4>
37+
<p class="message">Наше приложение позволит получить доступ к сервисам для студентов ФФ МГУ!</p>
38+
<p class="message">Для просмотра расписания выберите свою группу:</p>
39+
40+
<div class="search-container">
41+
<v-responsive class="align-self-center" width="344">
42+
<v-text-field
43+
v-model="query"
44+
type="text"
45+
label="Номер группы"
46+
placeholder="Введите номер группы"
47+
inputmode="numeric"
48+
class="align-self-center input"
49+
max-width="344"
50+
@change.once="sendMarketing"
51+
/>
52+
</v-responsive>
53+
54+
<Suspense>
55+
<div class="results-container">
56+
<AsyncGroupsList :query="query" />
57+
</div>
58+
59+
<template #fallback> <FullscreenLoader /> </template>
60+
</Suspense>
61+
</div>
62+
</IrdomLayout>
63+
</template>
64+
<style scoped>
65+
.greeting,
66+
.input {
67+
margin-bottom: 24px;
68+
}
69+
70+
.logo {
71+
width: min(50%, 144px);
72+
aspect-ratio: 1;
73+
pointer-events: none;
74+
margin-bottom: 20px;
75+
}
76+
77+
.message {
78+
margin-bottom: 20px;
79+
}
80+
81+
.search-container {
82+
display: flex;
83+
flex-direction: column;
84+
align-items: center;
85+
width: 100%;
86+
}
87+
88+
.results-container {
89+
width: 100%;
90+
max-width: 800px;
91+
margin-top: 20px;
92+
}
93+
</style>

0 commit comments

Comments
 (0)