src/view/admin/components/previouslies-script.lisp

(defpackage murja.view.admin.components.previouslies-script
  (:use :cl :binding-arrows :parenscript)
  (:export :previouslies-component-frontend)
  (:documentation "All the parenscript logic hidden from making murja.view.admin.components.editor an eyesore"))

(in-package :murja.view.admin.components.previouslies-script)

(eval-when (:compile-toplevel :load-toplevel :execute)

  (named-readtables:defreadtable :murja.ps
    (:merge :standard)
    ;; this is required to make parenscript not mangle capitalization of ourSYMBOLS
    (:case :invert))

  (named-readtables:in-readtable :murja.ps))

(defun previouslies-component-frontend ()
  (ps
    (defun remove-previously (id)
      (lambda ()
	(let* ((previouslies-input (chain document
					  (query-selector "#previouslies")))
	       (previouslies (chain JSON (parse (@ previouslies-input value)))))
	  (setf (@ previouslies-input value)
		(chain JSON
		       (stringify 
			(chain previouslies
			       (filter 
				(lambda (el)
				  (not (= (@ el id) id))))))))

	  (regenerate-previously-component nil))))
    
    (defun regenerate-previously-component (e)
      
      (let* ((previouslies-container (chain document
					    (query-selector "#previouslies-container")))
	     (previouslies-input (chain document
					(query-selector "#previouslies")))
	     (previouslies (chain JSON (parse (@ previouslies-input value))))

	     (ul-root (chain document
			     (create-element "ul"))))

	;; drop the old previously DOM completely, holding on to the state-holding <input type="hidden"/> 
	(setf (@ previouslies-container innerHTML) "")

	;; generate list of links ->posts and buttons to remove them 
	(dolist (el previouslies)
	  (let ((li (chain document (create-element "li")))
		(a (chain document (create-element "a")))
		
		(remove-btn (chain document (create-element "button"))))
	    (setf (@ remove-btn inner-text) "X")
	    (setf (@ a href) (+ "/blog/post/" (@ el id)))
	    (setf (@ a inner-text) (@ el title))
	    (chain remove-btn
		   (add-event-listener "click" (remove-previously (@ el id))))

	    (chain li
		   (append-child a))
	    (chain li
		   (append-child remove-btn))

	    (setf (@ li class-name) "editor-previously-li")
	    
	    (chain ul-root
		   (append-child li))))

	;; add the state-holding <input type="hidden" /> back to DOM 
	(chain previouslies-container
	       (append-child previouslies-input))

	;; add the previously generated <ul> tree into DOM 
	(chain previouslies-container
	       (append-child ul-root))
	
	nil))
    
    (chain document
	   (add-event-listener "DOMContentLoaded"
			       #'regenerate-previously-component))))