refactor: sketches page

- Added new widget SketchTeaser
- Moved get_recent_sketches as static method in LMSSketch
- Added `models.py` to make it easy to import Course and Sketch class
- Updated the sketches template to use the SketchTeaser widget

community/lms/doctype/lms_sketch/lms_sketch.py

@@ -10,9 +10,6 @@ from frappe.model.document import Document
 from . import livecode
 
 class LMSSketch(Document):
-    def get_owner_name(self):
-        return get_userinfo(self.owner)['full_name']
-
     @property
     def sketch_id(self):
         """Returns the numeric part of the name.
@@ -21,6 +18,14 @@ class LMSSketch(Document):
         """
         return self.name.replace("SKETCH-", "")
 
+    def get_owner(self):
+        """Returns the owner of this sketch as a document.
+        """
+        return frappe.get_doc("User", self.owner)
+
+    def get_owner_name(self):
+        return self.get_owner().full_name
+
     def get_livecode_url(self):
         doc = frappe.get_cached_doc("LMS Settings")
         return doc.livecode_url
@@ -46,6 +51,18 @@ class LMSSketch(Document):
             cache.set(key, value)
         return value
 
+    @staticmethod
+    def get_recent_sketches(limit=100):
+        """Returns the recent sketches.
+        """
+        sketches = frappe.get_all(
+            "LMS Sketch",
+            fields='*',
+            order_by='modified desc',
+            page_length=limit
+        )
+        return [frappe.get_doc(doctype='LMS Sketch', **doc) for doc in sketches]
+
     def __repr__(self):
         return f"<LMSSketch {self.name}>"
 
@@ -76,36 +93,3 @@ def save_sketch(name, title, code):
         "status": status,
         "name": doc.name,
     }
-
-def get_recent_sketches():
-    """Returns the recent sketches.
-
-    The return value will be a list of dicts with each entry containing
-    the following fields:
-        - name
-        - title
-        - owner
-        - owner_name
-        - modified
-    """
-    sketches = frappe.get_all(
-        "LMS Sketch",
-        fields='*',
-        order_by='modified desc',
-        page_length=100
-    )
-    for s in sketches:
-        s['owner_name'] = get_userinfo(s['owner'])['full_name']
-    return [frappe.get_doc(doctype='LMS Sketch', **doc) for doc in sketches]
-
-def get_userinfo(email):
-    """Returns the username and fullname of a user.
-
-    Please note that the email could be "Administrator" or "Guest"
-    as a special case to denote the system admin and guest user respectively.
-    """
-    user = frappe.get_doc("User", email)
-    return {
-        "full_name": user.full_name,
-        "username": user.username
-    }

community/lms/models.py

@@ -0,0 +1,5 @@
+"""Handy module to make access to all doctypes from a single place.
+"""
+from .doctype.lms_course.lms_course import LMSCourse as Course
+from .doctype.lms_sketch.lms_sketch import LMSSketch as Sketch
+

community/lms/widgets/SketchTeaser.html

@@ -0,0 +1,15 @@
+<div class="sketch-preview">
+  <div class="sketch-image">
+    <a href="/sketches/{{sketch.sketch_id}}">
+      {{ sketch.to_svg() }}
+    </a>
+  </div>
+  <div class="sketch-footer">
+    <div class="sketch-title">
+      <a href="sketches/{{sketch.sketch_id}}">{{sketch.title}}</a>
+    </div>
+    <div class="sketch-author">
+      by {{sketch.get_owner().full_name}}
+    </div>
+  </div>
+</div>

community/public/css/style.css

@@ -291,4 +291,26 @@ nav.navbar {
 .message-section {
   margin-left: 5%;
   display: inline-block;
-}
+}
+
+.sketch-preview {
+  background: white;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+  width: 220px;
+}
+
+.sketch-preview svg {
+  width: 200px;
+  height: 200px;
+}
+
+.sketch-image {
+  background: white;
+  padding: 10px;
+}
+
+.sketch-footer {
+  padding: 10px;
+  background: #eee;
+}

community/www/sketches/index.html

@@ -16,37 +16,13 @@
     <a href="/sketches/new">Create a New Sketch</a>
 	</div>
 	<div class='container'>
-    <div class="row row-cols-1 row-cols-xl-5 row-cols-lg-4 row-cols-md-3 row-cols-sm-2 ">
-    {% for sketch in sketches %}
-    <div class="col mb-4">
-      <div class="card sketch-card" style="width: 200px;">
-      <div class="card-img-top">
-        <a href="/sketches/{{sketch.sketch_id}}">
-        {{ sketch.to_svg() }}
-        </a>
-      </div>
-      <div class="card-footer">
-        <div class="sketch-title">
-          <a href="sketches/{{sketch.sketch_id}}">{{sketch.title}}</a>
+    <div class="row">
+      {% for sketch in sketches %}
+        <div class="col-md-3">
+          {{ widgets.SketchTeaser(sketch=sketch) }}
         </div>
-        <div class="sketch-author">
-          by {{sketch.get_owner_name()}}
-        </div>
-      </div>
-      </div>
-    </div>
-    {% endfor %}
+      {% endfor %}
     </div>
 	</div>
 </section>
 {% endblock %}
-
-{% block style %}
-  {{super()}}
-  <style type="text/css">
-    svg {
-      width: 200px;
-      height: 200px;
-    }
-  </style>
-{% endblock %}

community/www/sketches/index.py

@@ -1,7 +1,7 @@
 import frappe
-from ...lms.doctype.lms_sketch.lms_sketch import get_recent_sketches
+from community.lms.models import Sketch
 
 def get_context(context):
     context.no_cache = 1
-    context.sketches = get_recent_sketches()
+    context.sketches = Sketch.get_recent_sketches()