feat: course cards

frontend/src/components/CourseCard.vue

@@ -0,0 +1,65 @@
+<template>
+<div class="flex flex-col h-full border border-gray-200 rounded-md shadow-sm mt-5">
+    <div class="course-image" :class="{'default-image': !course.image}" :style="{ backgroundImage: 'url(' + course.image + ')' }">
+        <div class="flex relative top-4 left-4">
+            <div class="course-card-pills rounded-md border border-gray-200" v-for="tag in tags.data">
+                {{ tag }}
+            </div>
+        </div>
+        <div v-if="!course.image" class="flex flex-1 text-8xl font-bold">{{ course.title[0] }}</div>
+    </div>
+    <div class="p-4">
+        <div class="text-2xl font-semibold">
+            {{ course.title }}
+        </div>
+        <div>
+            {{ course.short_introduction }}
+        </div>
+    </div>
+</div>
+</template>
+<script setup>
+import { createResource } from 'frappe-ui';
+const props = defineProps({
+    course: {
+        type: Object,
+        default: null,
+    },
+})
+const tags = createResource({
+    url: "lms.lms.utils.get_tags",
+    params: { course: props.course.name },
+    auto: true,
+})
+
+</script>
+<style>
+.course-image {
+  height: 168px;
+  width: 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.course-card-pills {
+	background: #ffffff;
+	margin-left: 0;
+	margin-right: 0.5rem;
+	padding: 3.5px 8px;
+	font-size: 11px;
+	text-align: center;
+	letter-spacing: 0.011em;
+	text-transform: uppercase;
+	font-weight: 600;
+	width: fit-content;
+}
+
+.default-image {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: theme('colors.gray.200');
+  color: theme('colors.gray.700');
+}
+</style>

frontend/src/pages/Courses.vue

@@ -1,40 +1,26 @@
 <template>
    <div class="container">
-        <div class="text-xl font-semibold">
-                All Courses
-            </div>
-            <div>
-                {{ courses }}
+        <div class="text-2xl font-semibold">
+            All Courses
+        </div>
+        <div class="grid grid-cols-3 gap-8">
+            <div v-for="course in courses.data">
+                <CourseCard :course="course" />
             </div>
+        </div>
    </div>
 </template>
 
-<script>
-export default {
-    name: "Courses",
-    resources: {
-        courses() {
-            return {
-                type: "list",
-                doctype: "LMS Course",
-                fields: ["name", "title", "short_introduction", "image"],
-                orderBy: "creation desc",
-                filters: {
-                    published: 1
-                },
-                transform(data) {
-                    return data.map((course) => {
-                        course.data = JSON.parse(course.data)
-                        return course
-                    })
-                },
-            }
-        }
-    },
-    computed: {
-        courses() {
-            console.log(this.courses)
-        }
-    }
-}
+<script setup>
+import { createListResource } from 'frappe-ui';
+import { ref, computed } from 'vue';
+import CourseCard from '@/components/CourseCard.vue'
+
+const courses = createListResource({
+    type: 'list',
+    doctype: 'LMS Course',
+    url: "lms.lms.api.get_courses",
+    auto: true,
+})
+
 </script>

frontend/src/router.js

@@ -14,7 +14,7 @@ const routes = [
 ]
 
 let router = createRouter({
-	history: createWebHistory('/'),
+	history: createWebHistory('/lms'),
 	routes,
 })