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

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

(eval-when (:compile-toplevel :load-toplevel :execute)
  (named-readtables:in-readtable :murja.ps))

(defun tags-component-frontend ()
  (ps

    (defun sync-tags-input ()
      "Syncs every option inside tag <select> into a JSON.stringified array inside the hidden tag-input.value"
      (let ((tag-select (chain document
			       (query-selector "#tag-select")))
	    (tag-input (chain document
			      (query-selector "#tags-value")))
	    (acc (array)))
	(dolist (node (@ tag-select child-nodes))
	  (when (= (@ node tag-name) "OPTION")
	    (chain acc (push node))))

	(setf (@ tag-input value)
	      (chain JSON
		     (stringify 
		      (chain acc
			     (map (lambda (node)
				    (@ node text))))))))
      false)
	
    
    (chain document
	   (add-event-listener "DOMContentLoaded"
			       (lambda (e)
				 (let ((add-tag (chain document
						       (query-selector "#add-tag")))
				       (remove-tag (chain document
							  (query-selector "#remove-tag")))
				       (tag-select (chain document
							  (query-selector "#tag-select"))))

				   (chain add-tag
					  (add-event-listener "click" (lambda (e)
									;; TODO: most of these .preventDefaults() could've been prevented by adding type="button" to all the <buttons>
									(chain e (prevent-default))
									(let* ((new-tag (chain
											(prompt "New tag?")
											(to-lower-case)))
									       (as-option (chain
											   document
											   (create-element "option"))))
									  (setf (@ as-option text) new-tag)
									  (chain tag-select
										 options
										 (add as-option))
									  
									  (sync-tags-input)
									  false))))
									  
				   (chain remove-tag
					  (add-event-listener "click" (lambda (e)
									(chain e (prevent-default))
									(chain
									 tag-select
									 (remove (@ tag-select selected-index)))
									(sync-tags-input)
									false)))))))))