16 revert show render back to server-side

EventideSystems · Apr 26, 2024 · bc4a738 · bc4a738
1 parent b0cbd19
commit bc4a738
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 54 deletions.
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
@@ -13,6 +13,40 @@
 */
 
 .checklist-preview {
+  h1 {
+    @apply text-2xl font-bold text-white mb-2;
+  }
+
+  h2 {
+    @apply text-xl font-bold text-white mb-2 mt-2;
+  }
+
+  h3 {
+    @apply text-lg font-bold text-white mb-2 mt-2;
+  }
+
+  p {
+    @apply text-white mb-2;
+  }
+
+  a {
+    @apply text-indigo-600;
+  }
+
+  li {
+    @apply text-white mb-2 ml-5;
+  }
+
+  ul {
+    @apply mt-3 mb-5;
+  }
+
+  input[type=checkbox] {
+    @apply h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 mr-2;
+  }
+}
+
+.checklist-editor {
 
   .ProseMirror {
     @apply text-white;

diff --git a/app/helpers/checklists_helper.rb b/app/helpers/checklists_helper.rb
@@ -16,6 +16,6 @@ def render_checklist_status_dot(checklist)
   end
 
   def render_checklist(checklist)
-    Pipeline.new.call(checklist.content.to_markdown)[:output].html_safe # rubocop:disable Rails/OutputSafety
+    Pipeline.new.call(checklist.content)[:output].html_safe # rubocop:disable Rails/OutputSafety
   end
 end
diff --git a/app/javascript/controllers/checklist_controller.js b/app/javascript/controllers/checklist_controller.js
@@ -1,36 +1,23 @@
 import { Controller } from "@hotwired/stimulus"
-import { Editor } from '@toast-ui/editor'
 
 export default class extends Controller {
   static values = {
     instanceId: String
   }
 
-  static targets = ["previewPanel"]
-
   connect() {
-    const content = this.previewPanelTarget.querySelector('.markdown').innerHTML;
-
-    const viewer = new Editor.factory({
-      el: document.querySelector('#viewer'),
-      viewer: true,
-      height: '500px',
-      initialValue: content
-    });
-
-    const taskListItems = document.querySelectorAll('.toastui-editor-contents .task-list-item')
-
-    Array.from(taskListItems).forEach(function(taskListItem) {
-      taskListItem.setAttribute('data-action', 'click->checklist#toggle')
+    Array.from((this.element).querySelectorAll("input[type='checkbox']")).forEach(function(checkbox) {
+      checkbox.setAttribute('data-action', 'click->checklist#toggle')
+      checkbox.disabled = false
     });
   }
 
   toggle(event) {
     let csrfToken = document.querySelector('meta[name="csrf-token"]').content
     let instanceId = this.instanceIdValue
-    let taskListItem = event.target
-    let checked = taskListItem.classList.contains('checked')
-    let index = Array.from(document.querySelectorAll('.toastui-editor-contents .task-list-item')).indexOf(taskListItem);
+    let checkbox = event.target
+    let checked = checkbox.checked
+    let index = Array.from(this.element.querySelectorAll('input[type="checkbox"]')).indexOf(checkbox);
     let url = `/checklist_instances/${instanceId}/checklist_items/${index}`
     let data = { checklist_item: { checked: checked } }
     fetch(url, {

diff --git a/app/javascript/controllers/library_checklists/form_controller.js b/app/javascript/controllers/library_checklists/form_controller.js
@@ -3,7 +3,7 @@ import { Editor } from '@toast-ui/editor'
 
 export default class extends Controller {
 
-  static targets = ["writePanel", "detailsPanel", "previewPanel", "markdownContent"]
+  static targets = ["writePanel", "settingsPanel", "markdownContent"]
 
 
   connect() {
@@ -39,18 +39,11 @@ export default class extends Controller {
   }
 
   showWritePanel(event) {
-    this.showPanel(event, this.writePanelTarget, [this.detailsPanelTarget, this.previewPanelTarget]);
+    this.showPanel(event, this.writePanelTarget, [this.settingsPanelTarget]);
   }
 
-  showDetailsPanel(event) {
-    this.showPanel(event, this.detailsPanelTarget, [this.writePanelTarget, this.previewPanelTarget]);
-  }
-
-  showPreviewPanel(event) {
-    this.showPanel(event, this.previewPanelTarget, [this.writePanelTarget, this.detailsPanelTarget]);
-
-    const markdown = this.writePanelTarget.querySelector('textarea').value;
-    this.previewPanelTarget.querySelector('.markdown').innerHTML = marked(markdown);
+  showSettingsPanel(event) {
+    this.showPanel(event, this.settingsPanelTarget, [this.writePanelTarget]);
   }
 
   removeActiveMarkerFromLinks(event) {

diff --git a/app/javascript/controllers/library_checklists/show_controller.js b/app/javascript/controllers/library_checklists/show_controller.js
@@ -3,7 +3,7 @@ import { Editor } from '@toast-ui/editor'
 
 export default class extends Controller {
 
-  static targets = ["previewPanel", "detailsPanel"]
+  static targets = ["previewPanel", "settingsPanel"]
 
   connect() {
     const content = this.previewPanelTarget.querySelector('.markdown').innerHTML;
@@ -29,11 +29,11 @@ export default class extends Controller {
   }
 
   showPreviewPanel(event) {
-    this.showPanel(event, this.previewPanelTarget, [this.detailsPanelTarget]);
+    this.showPanel(event, this.previewPanelTarget, [this.settingsPanelTarget]);
   }
 
-  showDetailsPanel(event) {
-    this.showPanel(event, this.detailsPanelTarget, [this.previewPanelTarget]);
+  showSettingsPanel(event) {
+    this.showPanel(event, this.settingsPanelTarget, [this.previewPanelTarget]);
   }
 
   removeIndigoFromLinks(event) {

diff --git a/...library/checklists/_edit_details.html.erb → ...ibrary/checklists/_edit_settings.html.erb b/...library/checklists/_edit_details.html.erb → ...ibrary/checklists/_edit_settings.html.erb
diff --git a/app/views/library/checklists/_form.html.erb b/app/views/library/checklists/_form.html.erb
@@ -39,31 +39,24 @@
       <nav class="flex overflow-x-auto py-4">
         <ul role="list" class="flex min-w-full flex-none gap-x-6 px-4 text-sm font-semibold leading-6 text-gray-400 sm:px-6 lg:px-8">
           <li>
-            <%= link_to 'Write', nil, data: { action: "click->library-checklists--form#showWritePanel"}, class: 'text-indigo-400' %>
+            <%= link_to 'Edit', nil, data: { action: "click->library-checklists--form#showWritePanel"}, class: 'text-indigo-400' %>
           </li>
           <li>
-            <%= link_to 'Details', nil, data: { action: "click->library-checklists--form#showDetailsPanel"} %>
-          </li>
-          <li>
-            <%= link_to 'Preview', nil, data: { action: "click->library-checklists--form#showPreviewPanel"} %>
+            <%= link_to 'Settings', nil, data: { action: "click->library-checklists--form#showSettingsPanel"} %>
           </li>
         </ul>
       </nav>
     </div>
 
-    <div data-library-checklists--form-target="writePanel" class="mx-8 mt-8 checklist-preview">
+    <div data-library-checklists--form-target="writePanel" class="mx-8 mt-8 checklist-editor">
       <div id="editor"></div>
       <div data-library-checklists--form-target="markdownContent" class="hidden">
         <%= f.text_area :content %>
       </div>
     </div>
 
-    <div data-library-checklists--form-target="detailsPanel" class="mx-8 mt-8 hidden">
-      <%= render partial: 'edit_details', locals: { form: f } %>
-    </div>
-
-    <div data-library-checklists--form-target="previewPanel" class="mx-8 mt-8 hidden">
-      <div class="markdown checklist-preview"></div>
+    <div data-library-checklists--form-target="settingsPanel" class="mx-8 mt-8 hidden">
+      <%= render partial: 'edit_settings', locals: { form: f } %>
     </div>
   <% end %>
 </div>
diff --git a/...library/checklists/_show_details.html.erb → ...ibrary/checklists/_show_settings.html.erb b/...library/checklists/_show_details.html.erb → ...ibrary/checklists/_show_settings.html.erb
diff --git a/app/views/library/checklists/show.html.erb b/app/views/library/checklists/show.html.erb
@@ -52,7 +52,7 @@
           <%= link_to 'Preview', nil, data: { action: "click->library-checklists--show#showPreviewPanel" }, class: 'text-indigo-400' %>
         </li>
         <li>
-          <%= link_to 'Details', nil, data: { action: "click->library-checklists--show#showDetailsPanel" } %>
+          <%= link_to 'Settings', nil, data: { action: "click->library-checklists--show#showSettingsPanel" } %>
         </li>
 
       </ul>
@@ -62,12 +62,11 @@
   <div data-library-checklists--show-target="previewPanel" class="mx-8 my-8">
     <pre class="markdown hidden"><%= @checklist.content %></pre>
     <div class="checklist-preview">
-      <%#= render_checklist(@checklist) %>
-      <div id="viewer"></div>
+      <%= render_checklist(@checklist) %>
     </div>
   </div>
 
-  <div data-library-checklists--show-target="detailsPanel" class="mx-8 my-8 hidden">
-    <%= render partial: 'show_details', locals: { checklist: @checklist } %>
+  <div data-library-checklists--show-target="settingsPanel" class="mx-8 my-8 hidden">
+    <%= render partial: 'show_settings', locals: { checklist: @checklist } %>
   </div>
 </div>
diff --git a/app/views/workspace/checklists/show/_single.html.erb b/app/views/workspace/checklists/show/_single.html.erb
@@ -2,8 +2,7 @@
 <div class="flex px-4 py-8 sm:px-6 ">
   <div class="checklist-preview">
     <div data-controller="checklist" data-checklist-target="previewPanel" data-checklist-instance-id-value="<%= checklist.single_instance.id %>">
-      <pre class="markdown hidden"><%= @checklist.single_instance.content %></pre>
-      <div id="viewer"></div>
+      <%= render_checklist(@checklist.single_instance) %>
     </div>
   </div>
 </div>