Lexical scope, check boxes and tables.

[aykaramba]

I am creating a view to display a list of documents in a table that looks like this:

The code that generates the view is this:

(let* (;; table 
       (table (create-table form :class "w3-white "))
       (table-row))
    
  ;; column headers
  (setf table-row (create-table-row table :class "w3-blue-gray w3-padding w3-center"))
  (create-table-column table-row :content "Select" :class "w3-padding w3-right-align w3-center")
  (create-table-column table-row :content "Document" :class "w3-padding w3-center") 
  (create-table-column table-row :content "Author" :class "w3-padding w3-center") 
  (create-table-column table-row :content "Created At" :class "w3-padding w3-center")
  (create-table-column table-row :content "Update At" :class "w3-padding w3-center") 
  (create-table-column table-row :content "Action" :class "w3-padding w3-center")
    
  ;; loop through db
    (loop for x in (mito:select-dao 'docs (sxql:order-by :id))
	do
	   ;; the row and columns have lexical scope here
	   ;; this means that we can act on each row, each column entity or trigger a global function to do more things
	   (let* (;; row
		  (row (setf table-row (create-table-row table :class "w3-light-gray w3-padding"))) 
		  ;; select
		  (check (create-form-element table-row :checkbox :name "ck" :class "w3-check  w3-center") ) 
		  ;; document
		  (doc (create-table-column table-row :content (slot-value x 'document) :class "w3-padding w3-center"))
		  ;; author
		  (author (create-table-column table-row :content "author" :class "w3-padding" :class "w3-padding"))
		  ;; created at
		  (created (create-table-column table-row :content (slot-value x 'mito.dao.mixin::created-at) :class "w3-padding"))
		  ;; updated at
		  (updated (create-table-column table-row :content (slot-value x 'mito.dao.mixin::updated-at) :class "w3-padding"))
		  ;; delete
		  (delete (create-table-column table-row :content "Delete" :class "w3-padding")))

	     ;; create a delete function with lexical scope
	     ;; this hides only the table row that the "DELETE" is in .. IF .. the checkbox is checked
	     ;; no other table rows are affected, so local action on local row.
	     (set-on-click delete
			   (lambda (obj)
			     (if (checkedp check)
				 (setf (display row) :none)))))))

The let in the loop creates the lexical scope around the variables for the row and column values so that we can act on those as necessary. In the screenshot I have just a DELETE in ACTION column and it hides the row that it is in if the check box is checked.

What I want to do is be able to check all of the check boxes and select a DELETE button at the top of the table and then act on all of the rows in some way, for example, DELETE as that button would imply. This is a fairly common metaphor in displaying data in lists.

Now, the simplest way to check all boxes is to just use a javascript function in a (set-on-click ...) event, that is no problem. What i am not able to visualize is how to act on all of the checked rows. Outside of the (let* ...) in the loop we cannot reach into the lexical scope of each row and peform actions, and I am not able to see how to act on each of the rows that are checked within that (let* ...).

The only way that I can see to accomplish this would be to create a variable + hashtable in the let, have the loop store data in the hashtable and then iterate over that when the DELETE button is clicked. That doesn't seem that elegant to me, any other suggestions on how to approach this problem?

[aykaramba]

The answer is that while lexical scope gives us this quick and dirty functionality, for more dynamic capabilities we have to use a different approach with different data structures.

Closing.