From 76457b27b7f01dc86348ce1c5ad6a6e409d74f4b Mon Sep 17 00:00:00 2001
From: Alexander-D-Karpov <alexandr.d.karpov@gmail.com>
Date: Tue, 1 Aug 2023 03:15:26 +0300
Subject: [PATCH] added preview for files in folders

---
 akarpov/files/models.py           | 4 ++++
 akarpov/templates/files/list.html | 9 +++++++++
 2 files changed, 13 insertions(+)

diff --git a/akarpov/files/models.py b/akarpov/files/models.py
index da1e747..6ca27d7 100644
--- a/akarpov/files/models.py
+++ b/akarpov/files/models.py
@@ -10,6 +10,7 @@
     ForeignKey,
     IntegerField,
     Model,
+    Q,
     SlugField,
     TextField,
 )
@@ -116,6 +117,9 @@ class Folder(BaseFileItem, ShortLinkModel, UserHistoryModel):
     size = IntegerField(default=0)
     amount = IntegerField(default=0)
 
+    def get_last_preview_files(self, cut=4):
+        return self.children.filter(~Q(File___preview=""))[:cut]
+
     def get_absolute_url(self):
         return reverse("files:folder", kwargs={"slug": self.slug})
 
diff --git a/akarpov/templates/files/list.html b/akarpov/templates/files/list.html
index e4d236e..6a0d7bf 100644
--- a/akarpov/templates/files/list.html
+++ b/akarpov/templates/files/list.html
@@ -124,6 +124,15 @@
         {% else %}
         <div class="card-body d-flex flex-column">
           <h5 class="card-title">{{ file.name }}</h5>
+          <div class="flex-column position-absolute ml-2 top-50 start-50 translate-middle">
+            <div class="align-items-center justify-content-center row position-relative mb-5 g-3">
+            {% for child_file in file.get_last_preview_files %}
+              <div class="col-6">
+                <img class="img-fluid" src="{{ child_file.preview.url }}" alt="">
+              </div>
+            {% endfor %}
+            </div>
+          </div>
           <p class="card-text mb-4"><small class="text-muted">{{ file.size | filesizeformat }}, {{ file.amount }} {% if file.amount == 1 %} item {% else %} items {% endif %}</small></p>
           <div class="align-self-stretch align-items-center justify-content-center d-flex flex-column fill-height controlsdiv">
             <img src="{% static 'images/files/folder.jpg' %}" class="img-fluid" alt="">