Merge pull request #32 from paiindustries/fix/blog

zainforbjs · web-flow · commit af00e409921b · 2025-04-17T17:19:08.000+05:00
Fix/blog
diff --git a/.gitignore b/.gitignore
@@ -23,3 +23,4 @@ settings.xml
 /public/files
 /app/lib
 *.log
+/public/images
diff --git a/app/config/routes.cfm b/app/config/routes.cfm
@@ -53,7 +53,7 @@
 			.get(name = "api_docs", pattern = "api", to = "web.ApiController##Index")
 
 			.get(name = "blog", pattern = "blog", to = "web.BlogController##Index")
-			.get(name = "blog", pattern = "blog/edit/[id]", to = "web.BlogController##Edit")
+			.get(name = "blogEdit", pattern = "blog/edit/[id]", to = "web.BlogController##Edit")
 			
 			.get(name = "downloads", pattern = "downloads", to = "web.DownloadsController##Index")
 
diff --git a/app/controllers/web/BlogController.cfc b/app/controllers/web/BlogController.cfc
@@ -3,7 +3,7 @@ component extends="app.Controllers.Controller" {
 
     // Configuration function
     function config() {
-        verifies(except="index,create,store,show,update,destroy,loadCategories,loadStatuses,loadPostTypes,Categories,blogs,comment,feed", params="key", paramsTypes="integer", handler="index");
+        verifies(except="index,create,store,show,update,destroy,loadCategories,loadStatuses,loadPostTypes,Categories,blogs,comment,feed,error", params="key", paramsTypes="integer", handler="index");
         filters(through="restrictAccess", only="create,store,comment");
         usesLayout("/layout");
     }
@@ -60,7 +60,6 @@ component extends="app.Controllers.Controller" {
     // Function to show the create blog form
     function create() {
         saveRedirectUrl(cgi.script_name & "?" & cgi.query_string);
-        renderView(layout="blogLayout");
     }
 
     // Function to store a new blog
@@ -96,7 +95,7 @@ component extends="app.Controllers.Controller" {
             response = saveBlog(params);
             saveTags(params, response.blogId);
             saveCategories(params, response.blogId);
-            redirectTo(action="index");
+            redirectTo(route="blog");
         } catch (any e) {
             // Handle error
             redirectTo(action="error", errorMessage="Failed to save blog post.");
@@ -469,7 +468,7 @@ component extends="app.Controllers.Controller" {
                 // Insert new categories
                 for (var category_Id in categoryArray) {
                     var newCategory = model("BlogCategory").new();
-                    newCategory.categoryName = category_Id;
+                    newCategory.categoryId = category_Id;
                     newCategory.blogId = blogId;
                     newCategory.createdAt = now();
                     newCategory.updatedAt = now();
diff --git a/app/models/Blog.cfc b/app/models/Blog.cfc
@@ -51,6 +51,10 @@ component extends="app.Models.Model" {
      * Computed property to get the correct post date.
      */
     public function getDisplayDate() {
-        return this.postCreatedDate ?: this.createdAt;
+        if (NOT isEmpty(this.postCreatedDate)) {
+            return this.postCreatedDate;
+        } else {
+            return this.createdAt;
+        }
     }
 }
diff --git a/app/views/layout.cfm b/app/views/layout.cfm
@@ -79,6 +79,7 @@
 			<link href="/stylesheets/select2-bootstrap-min.css" rel="stylesheet">
 			<link href="/stylesheets/notifier.min.css" rel="stylesheet">
 
+			<script src="/javascripts/jquery.min.js"></script>
 			<script src="/javascripts/htmx.min.js"></script>
 			<script src="/javascripts/highlighter.min.js"></script>
 			<script src="/javascripts/quill.min.js"></script>
@@ -291,7 +292,7 @@
 									</ul>
 								</div>
 								<div class="col-12">
-									<script src='https://opencollective.com/wheels-fw/banner.js?style={"a":{"color":"var(--primary)"},"h2":{"fontWeight":"medium","fontSize":"18px"}}'></script>
+									<script src='https://opencollective.com/wheels-dev/banner.js?style={"a":{"color":"rgb(191, 40, 33)"},"h2":{"fontWeight":"medium","fontSize":"18px"}}'></script>
 								</div>
 							</div>
 						</div>
@@ -352,7 +353,6 @@
 			</footer>
 
 			
-			<script src="/javascripts/jquery.min.js"></script>
 			<script src="/javascripts/swiper.js"></script>
 			<script src="/javascripts/custom.js"></script>
 			<script src="/javascripts/infinite-scroll.pkgd.min.js"></script>
diff --git a/app/views/web/BlogController/create.cfm b/app/views/web/BlogController/create.cfm
@@ -44,7 +44,7 @@
     
                         <div class="mb-3">
                             <label class="form-label mb-1 fs-14 fw-medium">
-                                Post Created Date
+                                Post Create Date
                             </label>
                             <input class="form-control fs-14" type="date" name="postCreatedDate" id="postCreatedDate" value="">
                         </div>
@@ -107,8 +107,14 @@
                 </div>
             </div>
             <div class="col-lg-4 col-12">
-                <div class="bg-white rounded-5 shadow-sm mt-4 p-4">
-                    <h1 class="text-center fs-24 fw-bold">Preview</h1>
+                <h4 class="mb-3">Live Preview</h4>
+                <div id="previewContent" class="p-3 border rounded bg-white">
+                    <h2 id="previewTitle" class="fs-20 fw-bold mb-3 text-primary"></h2>
+                    <div id="previewMeta" class="mb-3">
+                        <div id="previewCategories" class="mb-1"></div>
+                        <div id="previewTags"></div>
+                    </div>
+                    <div id="previewBody" class="border p-3 rounded bg-light"></div>
                 </div>
             </div>
         </div>
@@ -143,12 +149,15 @@
             const postTags = document.getElementById('postTags');
             const content = document.getElementById('content');
             const editor = document.getElementById("editor");
+            const tagInput = document.getElementById("tagInput");
+            const toolbar = document.getElementById('toolbar-container');
 
             // Check if it's a draft submission
             const isDraft = document.getElementById("isDraft").value === "1";
 
             // Reset validation styles
-            [title, categoryId, posttypeId, postTags].forEach(field => field.classList.remove("is-invalid"));
+            [title, categoryId, posttypeId, tagInput].forEach(field => field.classList.remove("is-invalid"));
+            toolbar.classList.remove("border-danger");
             editor.classList.remove("border-danger");
 
             // Validate fields only if it's NOT a draft
@@ -167,17 +176,19 @@
                 }
                 if (postTags.value.trim() === "") {
                     isValid = false;
-                    postTags.classList.add("is-invalid");
+                    tagInput.classList.add("is-invalid");
+                    tagInput.classList.remove("border-0");
                 }
                 if (content.value.trim() === "<p><br></p>" || content.value.trim() === "") {
                     isValid = false;
+                    toolbar.classList.add("border-danger");
                     editor.classList.add("border-danger");
                 }
             }
 
             if (!isValid) {
                 event.preventDefault();
-                alert("Please fill out all required fields.");
+                notifier.show('Error!', 'Please fill out all required fields.', '', 'images/high_priority-48.png', 4000);
                 return false;
             }
         });     
@@ -247,7 +258,43 @@
             function updateHiddenTags() {
                 postTags.value = tags.join(",");
             }
+            
+            // Live preview logic
+            function updatePreview() {
+                // Title
+                const title = document.getElementById("title").value;
+                document.getElementById("previewTitle").innerText = title;
+
+                // Content
+                document.getElementById("previewBody").innerHTML = quill.root.innerHTML.trim();
+
+                // Categories
+                const categorySelect = document.getElementById("categoryId");
+                const selectedCategories = Array.from(categorySelect.selectedOptions).map(opt => opt.text);
+                const previewCategories = document.getElementById("previewCategories");
+                previewCategories.innerHTML = '';
+                selectedCategories.forEach(cat => {
+                    const badge = document.createElement("span");
+                    badge.className = "badge bg-primary me-1 mb-1";
+                    badge.textContent = cat;
+                    previewCategories.appendChild(badge);
+                });
+
+                // Tags
+                const previewTags = document.getElementById("previewTags");
+                previewTags.innerHTML = '';
+                tags.forEach(tag => {
+                    const badge = document.createElement("span");
+                    badge.className = "badge bg-secondary me-1 mb-1";
+                    badge.textContent = tag;
+                    previewTags.appendChild(badge);
+                });
+            }
+
+            // Event listeners
+            document.getElementById("title").addEventListener("input", updatePreview);
+            document.getElementById("categoryId").addEventListener("change", updatePreview);
+            quill.on('text-change', updatePreview);
         });
-  
     </script>
 </main>
diff --git a/app/views/web/BlogController/partials/_categories.cfm b/app/views/web/BlogController/partials/_categories.cfm
@@ -1,6 +1,6 @@
 <cfscript>
     writeOutput('<option value="">Select Category</option>');
     for (var i = 1; i <= categories.recordCount; i++) {
-        writeOutput('<option value="' & categories.name[i] & '">' & categories.name[i] & '</option>');
+        writeOutput('<option value="' & categories.id[i] & '">' & categories.name[i] & '</option>');
     }
 </cfscript>
diff --git a/app/views/web/BlogController/partials/_error.cfm b/app/views/web/BlogController/partials/_error.cfm
@@ -1,18 +1,13 @@
-<div class="error-message">
-    <cfif structKeyExists(url, "errorMessage")>
-        <p>#url.errorMessage#</p>
-    <cfelse>
-        <p>An unexpected error has occurred. Please try again later.</p>
-    </cfif>
-</div>
-
-<style>
-    .error-message {
-        color: red;
-        background-color: #f8d7da;
-        border: 1px solid #f5c6cb;
-        padding: 10px;
-        margin: 10px 0;
-        border-radius: 5px;
-    }
-</style>
+<cfif structKeyExists(url, "errorMessage")>
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            notifier.show("Error!", "#jsStringFormat(url.errorMessage)#", "", "/images/high_priority-48.png", 0);
+        });
+    </script>
+<cfelse>
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            notifier.show("Error!", "An unexpected error has occurred. Please try again later.", "", "/images/high_priority-48.png", 0);
+        });
+    </script>
+</cfif>
diff --git a/app/views/web/BlogController/show.cfm b/app/views/web/BlogController/show.cfm
@@ -115,7 +115,7 @@
                                         <div class="editor editor1 form-control border border-top-0 rounded-top-0" id="editor" style="height: 150px;"></div>
                                         <div class="mt-3 text-end">
                                             <input required class="form-control" type="hidden" name="content" id="content">
-                                            <button type="submit" class="bg--iris fs-14 text-white px-3 py-2 rounded-2 flex-shrink-0">Post</button>
+                                            <button type="submit" class="bg--primary fs-14 text-white px-3 py-2 rounded-2 flex-shrink-0">Post</button>
                                         </div>
                                     </div>
                                 </div>
@@ -135,17 +135,17 @@
                                                 <p class="fs-14 fw-normal text-dark">#content#</p>
                                                 <div class="d-flex flex-wrap justify-content-end align-items-center gap-4">
                                                     <div class="d-flex cursor-pointer align-items-center gap-2">
-                                                        <p class="fs-14 text--iris mb-0 reply-btn" data-commentid="#Id#" data-blogid="#blog.Id#">Reply</p>
+                                                        <p class="fs-14 text--primary mb-0 reply-btn" data-commentid="#Id#" data-blogid="#blog.Id#">Reply</p>
 
                                                         <svg width="18" height="14" viewBox="0 0 18 14" fill="none" 
                                                             xmlns="http://www.w3.org/2000/svg">
                                                             <path
                                                                 d="M1.42013 6.05185L5.66612 10.2979C5.76346 10.3952 5.81446 10.5099 5.81912 10.6419C5.82379 10.7745 5.77079 10.8959 5.66013 11.0059C5.55013 11.1125 5.43246 11.1665 5.30712 11.1679C5.18112 11.1699 5.06313 11.1159 4.95312 11.0059L0.565125 6.61685C0.477792 6.53019 0.416458 6.44119 0.381125 6.34985C0.345792 6.25919 0.328125 6.15985 0.328125 6.05185C0.328125 5.94385 0.345792 5.84452 0.381125 5.75385C0.416458 5.66319 0.477792 5.57419 0.565125 5.48685L4.95312 1.09785C5.04646 1.00452 5.16013 0.954521 5.29413 0.947854C5.42812 0.941187 5.55046 0.991187 5.66112 1.09785C5.77112 1.20785 5.82612 1.32685 5.82612 1.45485C5.82612 1.58285 5.77112 1.70185 5.66112 1.81185L1.42013 6.05185ZM6.03612 6.55185L9.78213 10.2979C9.87946 10.3952 9.93046 10.5099 9.93513 10.6419C9.93913 10.7745 9.88612 10.8959 9.77612 11.0059C9.66613 11.1125 9.54813 11.1665 9.42212 11.1679C9.29612 11.1692 9.17812 11.1152 9.06812 11.0059L4.68013 6.61685C4.59279 6.53019 4.53146 6.44119 4.49613 6.34985C4.46079 6.25919 4.44312 6.15985 4.44312 6.05185C4.44312 5.94385 4.46079 5.84452 4.49613 5.75385C4.53146 5.66319 4.59279 5.57419 4.68013 5.48685L9.06812 1.09785C9.16146 1.00452 9.27512 0.954521 9.40912 0.947854C9.54379 0.941187 9.66613 0.991187 9.77612 1.09785C9.88612 1.20785 9.94113 1.32685 9.94113 1.45485C9.94113 1.58285 9.88612 1.70185 9.77612 1.81185L6.03612 5.55185H13.4991C14.7418 5.55185 15.8025 5.99119 16.6811 6.86985C17.5598 7.74852 17.9991 8.80919 17.9991 10.0519V12.5519C17.9991 12.6945 17.9515 12.8135 17.8561 12.9089C17.7608 13.0042 17.6418 13.0519 17.4991 13.0519C17.3565 13.0519 17.2375 13.0042 17.1421 12.9089C17.0468 12.8135 16.9991 12.6945 16.9991 12.5519V10.0519C16.9991 9.09052 16.6561 8.26685 15.9701 7.58085C15.2841 6.89485 14.4605 6.55185 13.4991 6.55185H6.03612Z"
-                                                                fill="var(--iris)" />
+                                                                fill="var(--primary)" />
                                                         </svg>
                                                     </div>
                                                     <div class="d-flex cursor-pointer align-items-center gap-2">
-                                                        <p class="fs-14 text--iris mb-0">#dateformat(publishedAt, 'MMM DD, YYYY')#</p>
+                                                        <p class="fs-14 text--primary mb-0">#dateformat(publishedAt, 'MMM DD, YYYY')#</p>
                                                     </div>
                                                      <!-- Reply Form (Hidden by Default) -->
                                                     <div class="reply-form" id="reply-form-#Id#" style="display:none;width:100%;">
@@ -174,7 +174,7 @@
                                                             <div class="editor editor2 form-control border border-top-0 rounded-top-0" id="editor" style="height: 150px;"></div>
                                                             <input required class="form-control" type="hidden" name="content" id="content">
                                                             <div class="mt-3 text-end">
-                                                                <button type="submit" class="bg--iris fs-14 text-white px-3 py-2 rounded-2 flex-shrink-0">Post</button>
+                                                                <button type="submit" class="bg--primary fs-14 text-white px-3 py-2 rounded-2 flex-shrink-0">Post</button>
                                                             </div>
                                                         </form>
                                                     </div>
diff --git a/public/stylesheets/notifier.min.css b/public/stylesheets/notifier.min.css

Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,10 @@ component extends="app.Models.Model" {`
`51`	`51`	`* Computed property to get the correct post date.`
`52`	`52`	`*/`
`53`	`53`	`public function getDisplayDate() {`
`54`		`- return this.postCreatedDate ?: this.createdAt;`
	`54`	`+ if (NOT isEmpty(this.postCreatedDate)) {`
	`55`	`+ return this.postCreatedDate;`
	`56`	`+ } else {`
	`57`	`+ return this.createdAt;`
	`58`	`+ }`
`55`	`59`	`}`
`56`	`60`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`<cfscript>`
`2`	`2`	`writeOutput('<option value="">Select Category</option>');`
`3`	`3`	`for (var i = 1; i <= categories.recordCount; i++) {`
`4`		`- writeOutput('<option value="' & categories.name[i] & '">' & categories.name[i] & '</option>');`
	`4`	`+ writeOutput('<option value="' & categories.id[i] & '">' & categories.name[i] & '</option>');`
`5`	`5`	`}`
`6`	`6`	`</cfscript>`