eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: fetch translations

Browse Source
This commit is contained in:
Jannat Patel
2023-12-08 15:04:41 +05:30
parent 11079dae00
commit 25f24b98c6
4 changed files with 73 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/src/pages/Courses.vue
View File

@@ -1,60 +1,62 @@
<template>
<div class="h-screen">
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs
class="h-7"
:items="[{ label: __('All Courses'), route: { name: 'Courses' } }]"
/>
<div class="flex">
<Select class="mr-2"
:options="orderOptions"
v-model="orderBy"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs
class="h-7"
:items="[{ label: __('All Courses'), route: { name: 'Courses' } }]"
/>
<Button variant="solid">
<template #prefix>
<Plus class="h-4 w-4" />
</template>
{{ __("New Course") }}
</Button>
</div>
</header>
<div class="mx-5 my-10">
<Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs">
<template #tab="{ tab, selected }">
<div>
<button
class="group -mb-px flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
:class="{ 'text-gray-900': selected }"
>
<component v-if="tab.icon" :is="tab.icon" class="h-5" />
{{ __(tab.label) }}
<Badge
class="group-hover:bg-gray-900"
:class="[selected ? 'bg-gray-900' : 'bg-gray-600']"
variant="solid"
theme="gray"
size="sm"
>
{{ tab.count }}
</Badge>
</button>
</div>
</template>
<template #default="{ tab }">
<div class="grid grid-cols-3 gap-8 mt-5" v-if="tab.courses && tab.courses.value.length && 0">
<router-link v-for="course in tab.courses.value" :to="{ name: 'CourseDetail', params: { course: course.name } }">
<CourseCard :course="course" />
</router-link>
</div>
<div v-else class="grid flex-1 place-items-center text-xl font-medium text-gray-500">
<div class="flex flex-col items-center justify-center mt-4">
<div>{{ __('No {0} courses found').format(tab.label.toLowerCase()) }}</div>
<div class="flex">
<Select class="mr-2"
:options="orderOptions"
v-model="orderBy"
/>
<Button variant="solid">
<template #prefix>
<Plus class="h-4 w-4" />
</template>
New Course
</Button>
</div>
</div>
</template>
</Tabs>
</header>
<div class="mx-5 my-10">
<Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs">
<template #tab="{ tab, selected }">
<div>
<button
class="group -mb-px flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
:class="{ 'text-gray-900': selected }"
>
<component v-if="tab.icon" :is="tab.icon" class="h-5" />
{{ tab.label }}
<Badge
:class="{ 'text-gray-900 border border-gray-900': selected }"
variant="subtle"
theme="gray"
size="sm"
>
{{ tab.count }}
</Badge>
</button>
</div>
</template>
<template #default="{ tab }">
<div class="grid grid-cols-3 gap-8 mt-5" v-if="tab.courses && tab.courses.value.length">
<router-link v-for="course in tab.courses.value" :to="{ name: 'CourseDetail', params: { course: course.name } }">
<CourseCard :course="course" />
</router-link>
</div>
<div v-else class="grid flex-1 place-items-center text-xl font-medium text-gray-500">
<div class="flex flex-col items-center justify-center mt-4">
<div>No {{ tab.label.toLowerCase() }} courses found</div>
</div>
</div>
</template>
</Tabs>
</div>
</div>
</template>
<script setup>