feat: wiki feedback

wiki/public/js/render_wiki.js

@@ -108,6 +108,7 @@ window.RenderWiki = class RenderWiki extends Wiki {
         this.set_url_state();
         this.set_revisions();
         this.add_click_to_copy();
+        this.setup_feedback();
       }
     });
   }
@@ -678,4 +679,46 @@ window.RenderWiki = class RenderWiki extends Wiki {
       dropdownItems.blur();
     });
   }
+
+  setup_feedback() {
+    $(".ratings-number").on("click", function () {
+      $(".submit-feedback-btn").removeClass("disabled");
+      $(".ratings-number").removeClass("rating-active");
+      $(this).addClass("rating-active");
+    });
+
+    $(".submit-feedback-btn").on("click", function () {
+      const rating = $(".ratings-number.rating-active").val();
+      const feedback = $(".long-feedback").val();
+      const email = $(".feedback-email").val();
+      const name = $('[name="wiki-page-name"]').val();
+
+      const feedbackIndex = localStorage.getItem(`feedback-${name}`);
+
+      frappe
+        .call({
+          method:
+            "wiki.wiki.doctype.wiki_feedback.wiki_feedback.submit_feedback",
+          args: {
+            name,
+            rating,
+            feedback,
+            email,
+            feedback_index: feedbackIndex,
+          },
+        })
+        .then((r) => {
+          frappe.show_alert({
+            message: __("Thank you for submitting your feedback!"),
+            indicator: "green",
+          });
+
+          localStorage.setItem(`feedback-${name}`, r.message);
+
+          $(".ratings-number").removeClass("rating-active");
+          $(".long-feedback").val("");
+          $(".feedback-email").val("");
+        });
+    });
+  }
 };

wiki/public/scss/wiki.scss

@@ -769,6 +769,59 @@ h6:hover .feather-link {
 	}
 }
 
+.feedback-btn {
+	position: fixed;
+	right: 0;
+	top: 60%;
+	z-index: 1000;
+
+	&:focus, &:active {
+		outline: none !important;
+		box-shadow: none !important;
+	}
+}
+
+.feedback-modal {
+	margin-right: 0;
+	width: 22rem;
+
+	.form-control:focus {
+		border: none;
+	}
+
+	.rating-options-buttons {
+		display: grid;
+		border-radius: 6px;
+		overflow: hidden;
+		border: 1.5px solid #000;
+	}
+
+	.rating-options-buttons>.ratings-number {
+		border-right: 1px solid #000;
+
+		&:last-child {
+			border-right: none;
+		}
+	}
+
+	.ratings-number {
+		font-size: 14px;
+		padding: 8px 0px;
+		border: none;
+		color: #000;
+		background-color: #fff;
+
+		&.rating-active {
+			background-color: #000;
+			color: #fff;
+		}
+	}
+
+	.submit-feedback-btn.disabled {
+		pointer-events: none;
+	}
+}
+
 .wiki-options {
 	width: 2rem;
 	height: 2rem;
@@ -1142,6 +1195,10 @@ p {
 
 	.modal-header {
 		border-bottom: unset;
+
+		.close {
+			font-weight: 400;
+		}
 	}
 
 	.modal-body {

wiki/wiki/doctype/wiki_feedback/test_wiki_feedback.py

@@ -0,0 +1,9 @@
+# Copyright (c) 2023, Frappe and Contributors
+# See license.txt
+
+# import frappe
+from frappe.tests.utils import FrappeTestCase
+
+
+class TestWikiFeedback(FrappeTestCase):
+	pass

wiki/wiki/doctype/wiki_feedback/wiki_feedback.js

@@ -0,0 +1,8 @@
+// Copyright (c) 2023, Frappe and contributors
+// For license information, please see license.txt
+
+// frappe.ui.form.on("Wiki Feedback", {
+// 	refresh(frm) {
+
+// 	},
+// });

wiki/wiki/doctype/wiki_feedback/wiki_feedback.json

@@ -0,0 +1,83 @@
+{
+ "actions": [],
+ "allow_rename": 1,
+ "creation": "2023-12-05 14:12:12.194036",
+ "doctype": "DocType",
+ "engine": "InnoDB",
+ "field_order": [
+  "wiki_page",
+  "response"
+ ],
+ "fields": [
+  {
+   "fieldname": "wiki_page",
+   "fieldtype": "Link",
+   "in_list_view": 1,
+   "label": "Wiki Page",
+   "options": "Wiki Page",
+   "reqd": 1
+  },
+  {
+   "fieldname": "response",
+   "fieldtype": "Table",
+   "label": "Response",
+   "options": "Wiki Feedback Item"
+  }
+ ],
+ "index_web_pages_for_search": 1,
+ "links": [],
+ "modified": "2023-12-06 22:12:33.836133",
+ "modified_by": "Administrator",
+ "module": "Wiki",
+ "name": "Wiki Feedback",
+ "owner": "Administrator",
+ "permissions": [
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "System Manager",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "Wiki Approver",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "create": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "report": 1,
+   "role": "All",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "create": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "report": 1,
+   "role": "Guest",
+   "share": 1,
+   "write": 1
+  }
+ ],
+ "sort_field": "modified",
+ "sort_order": "DESC",
+ "states": []
+}

wiki/wiki/doctype/wiki_feedback/wiki_feedback.py

@@ -0,0 +1,38 @@
+# Copyright (c) 2023, Frappe and contributors
+# For license information, please see license.txt
+
+import frappe
+from frappe.model.document import Document
+from frappe.utils import validate_email_address
+
+
+class WikiFeedback(Document):
+	pass
+
+
+@frappe.whitelist(allow_guest=True)
+def submit_feedback(name, feedback, rating, email=None, feedback_index=None):
+	email = validate_email_address(email)
+
+	if feedback_name := frappe.db.get_value("Wiki Feedback", {"wiki_page": name}):
+		doc = frappe.get_doc("Wiki Feedback", feedback_name)
+		if feedback_index:
+			feedback_index = int(feedback_index)
+
+			doc.response[feedback_index - 1].rating = rating
+			doc.response[feedback_index - 1].feedback = feedback
+			doc.response[feedback_index - 1].email_id = email
+		else:
+			doc.append("response", {"rating": rating, "feedback": feedback, "email_id": email})
+		doc.save()
+		return feedback_index if feedback_index else len(doc.response)
+	else:
+		doc = frappe.get_doc(
+			{
+				"doctype": "Wiki Feedback",
+				"wiki_page": name,
+			}
+		)
+		doc.append("response", {"rating": rating, "feedback": feedback, "email_id": email})
+		doc.insert()
+		return 1

wiki/wiki/doctype/wiki_feedback_item/wiki_feedback_item.json

@@ -0,0 +1,44 @@
+{
+ "actions": [],
+ "allow_rename": 1,
+ "creation": "2023-12-05 14:12:56.092065",
+ "doctype": "DocType",
+ "editable_grid": 1,
+ "engine": "InnoDB",
+ "field_order": [
+  "rating",
+  "feedback",
+  "email_id"
+ ],
+ "fields": [
+  {
+   "fieldname": "rating",
+   "fieldtype": "Rating",
+   "in_list_view": 1,
+   "label": "Rating",
+   "reqd": 1
+  },
+  {
+   "fieldname": "email_id",
+   "fieldtype": "Data",
+   "label": "Email ID"
+  },
+  {
+   "fieldname": "feedback",
+   "fieldtype": "Long Text",
+   "label": "Feedback"
+  }
+ ],
+ "index_web_pages_for_search": 1,
+ "istable": 1,
+ "links": [],
+ "modified": "2023-12-06 21:29:23.317015",
+ "modified_by": "Administrator",
+ "module": "Wiki",
+ "name": "Wiki Feedback Item",
+ "owner": "Administrator",
+ "permissions": [],
+ "sort_field": "modified",
+ "sort_order": "DESC",
+ "states": []
+}

wiki/wiki/doctype/wiki_feedback_item/wiki_feedback_item.py

@@ -0,0 +1,9 @@
+# Copyright (c) 2023, Frappe and contributors
+# For license information, please see license.txt
+
+# import frappe
+from frappe.model.document import Document
+
+
+class WikiFeedbackItem(Document):
+	pass

wiki/wiki/doctype/wiki_page/templates/feedback.html

@@ -0,0 +1,46 @@
+<div class="modal fade" id="feedbackModal" tabindex="-1" role="dialog" aria-labelledby="feedback" aria-hidden="true">
+    <div class="modal-dialog feedback-modal modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="feedbackRating">Feedback</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="outline: none;">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <label for="rating-options" class="text-muted text-xs">How would you rate this documentation?</label>
+                <div id="rating-options" class="rating-options mb-2">
+                    <div class="rating-options-buttons" style="grid-template-columns: repeat(5, minmax(0px, 1fr));">
+                        <button class="ratings-number question-2-rating-1 auto-text-color" type="submit" value="0.2">
+                            1
+                        </button>
+                        <button class="ratings-number question-2-rating-2 auto-text-color" type="submit" value="0.4">
+                            2
+                        </button>
+                        <button class="ratings-number question-2-rating-3 auto-text-color" type="submit" value="0.6">
+                            3
+                        </button>
+                        <button class="ratings-number question-2-rating-4 auto-text-color" type="submit" value="0.8">
+                            4
+                        </button>
+                        <button class="ratings-number question-2-rating-5 auto-text-color" type="submit" value="1">
+                            5
+                        </button>
+                    </div>
+                </div>
+                <label for="long-feedback" class="text-muted text-xs">How can we make it better?</label>
+                <textarea id="long-feedback" class="long-feedback form-control mb-2"></textarea>
+                {%- if ask_for_contact_details -%}
+                <label for="email" class="text-muted text-xs">Enter your email if you would like to contribute to the
+                    docs</label>
+                <input class="feedback-email" type="email" id="email" name="email">
+                {%- endif -%}
+            </div>
+            <div class="modal-footer">
+                <button class="submit-feedback-btn disabled btn btn-primary btn-sm" type="button" data-dismiss="modal">
+                    Submit
+                </button>
+            </div>
+        </div>
+    </div>
+</div>