-
Notifications
You must be signed in to change notification settings - Fork 1
/
app.vue
61 lines (54 loc) · 1.78 KB
/
app.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<script setup lang="ts">
import 'element-plus/theme-chalk/dark/css-vars.css';
import type { RouterInput } from '~/utils/types';
const { $trpc } = useNuxtApp();
const query = ref<RouterInput['job']['list']>({
filter: 'relevant',
isViewed: false,
});
const { data: jobs, refresh } = $trpc.job.list.useQuery(query);
function filterJob(key: string) {
query.value.filter = key as RouterInput['job']['list']['filter'];
refresh();
}
const isViewed = ref<'unviewed' | 'viewed'>('unviewed');
function viewJob(key: string) {
if (key === 'viewed') {
query.value.isViewed = true;
} else if (key === 'unviewed') {
query.value.isViewed = false;
}
refresh();
}
onMounted(() => {
navigator.serviceWorker.addEventListener('message', ({ data }) => {
ElNotification.success(data);
});
});
</script>
<template>
<div class="container mx-auto my-20">
<div class="grid grid-cols-1 gap-y-5">
<el-menu
:default-active="query.filter"
mode="horizontal"
@select="filterJob"
>
<el-menu-item index="relevant">Relevant</el-menu-item>
<el-menu-item index="relevant-irrelevant"
>Relevant-Irrelevant</el-menu-item
>
<el-menu-item index="notsure">Not Sure</el-menu-item>
<el-menu-item index="irrelevant">Irrelevant</el-menu-item>
</el-menu>
<el-menu :default-active="isViewed" mode="horizontal" @select="viewJob">
<el-menu-item index="unviewed">Unviewed</el-menu-item>
<el-menu-item index="viewed">Viewed</el-menu-item>
</el-menu>
<div v-if="jobs?.length" class="grid grid-cols-1 gap-4 lg:grid-cols-2">
<JobItem v-for="job of jobs" :key="job.id" :job="job" />
</div>
<p v-else class="text-center text-xl font-bold">No job found</p>
</div>
</div>
</template>