From 1a082c2dcb60d63592b592cc2d0ce52cdc0f42cc Mon Sep 17 00:00:00 2001
From: Andrew Brown <drusepth@gmail.com>
Date: Sun, 19 Feb 2023 12:29:05 -0800
Subject: [PATCH] new link fields finally work

---
 app/assets/javascripts/alpine.js              | 41 +++++++++++++++++--
 .../content/form/field_types/_link.html.erb   | 38 ++++++++++++++---
 2 files changed, 70 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/alpine.js b/app/assets/javascripts/alpine.js
index 0b7e4401..00fdd733 100644
--- a/app/assets/javascripts/alpine.js
+++ b/app/assets/javascripts/alpine.js
@@ -29,19 +29,54 @@ function alpineMultiSelectController() {
       // to make sure our autosave fires on it.
       originalSelect.dispatchEvent(new Event('change'));
     },
+    select(groupIndex, optionIndex, event) { // WE ARE HERE -- click from html
+      if (!this.options[index].selected) {
+        this.options[index].selected = true;
+        this.options[index].element = event.target;
+        this.selected.push(index);
+
+      } else {
+        this.selected.splice(this.selected.lastIndexOf(index), 1);
+        this.options[index].selected = false
+      }
+
+      // Update the original select element's selected options
+      const originalSelect = document.getElementById(this.sourceFieldId);
+      for (let i = 0; i < originalSelect.options.length; i++) {
+        originalSelect.options[i].selected = this.options[i].selected;
+      }
+
+      // Finally, trigger a manual on-change event on the original select
+      // to make sure our autosave fires on it.
+      originalSelect.dispatchEvent(new Event('change'));
+    },
     remove(index, option) {
       this.options[option].selected = false;
       this.selected.splice(index, 1);
     },
     loadOptions(fieldId) {
       this.sourceFieldId = fieldId;
-      const select = document.getElementById(fieldId).options;
+      const select = document.getElementById(fieldId);
+      const optgroups = select.getElementsByTagName('optgroup');
+
+      for (let i = 0; i < optgroups.length; i++) {
+        const groupOptions = optgroups[i].getElementsByTagName('option');
+
+        this.optgroups.push({
+          label: optgroups[i].label,
+          icon: 'help',
+          options: groupOptions
+        });
+
+        console.log('optgroups', this.optgroups);
+      }
 
       for (let i = 0; i < select.length; i++) {
         this.options.push({
           value: select[i].value,
           text: select[i].innerText,
-          selected: !!select[i].selected
+          selected: !!select[i].selected,
+          icon: 'help'
         });
 
         // Default anything already-selected to actively selected
@@ -52,7 +87,7 @@ function alpineMultiSelectController() {
     },
     selectedValues(){
       // Return all this.options where selected=true
-      return this.options.filter(op => op.selected === true).map(el => el.text)
+      return this.options.filter(op => op.selected === true); // .map(el => el.text)
       // return this.selected.map((option)=>{
       //   return this.options[option].value;
       // });
diff --git a/app/views/content/form/field_types/_link.html.erb b/app/views/content/form/field_types/_link.html.erb
index b7c23dcb..19e5c046 100644
--- a/app/views/content/form/field_types/_link.html.erb
+++ b/app/views/content/form/field_types/_link.html.erb
@@ -31,11 +31,12 @@
         <div x-on:click="open" class="w-full">
           <div class="mb-2 p-1 flex border border-gray-200 bg-white rounded">
             <div class="flex flex-auto flex-wrap">
-              <template x-for="(option,index) in selected" :key="options[option].value">
-                <div class="flex justify-center items-center m-1 font-medium py-1 px-1 bg-white rounded bg-gray-100 border">
-                  <div class="text-xs font-normal leading-none max-w-full flex-initial" x-model="options[option]">
-                    Icon
-                    <span x-text="options[option].text"></span>
+              <!-- Tags for all selected options -->
+              <template x-for="(option,index) in selected" :key="index">
+                <div class="flex justify-center items-center m-1 font-medium py-1 px-1 bg-white rounded bg-gray-100 border hover:border-notebook-blue">
+                  <div class="text-xs font-normal leading-none max-w-full flex-initial inline-flex items-center" x-model="options[option]">
+                    <span x-text="options[option].icon" class="material-icons text-xl leading-3"></span>
+                    <span x-text="options[option].text" class="mr-1 px-1"></span>
                   </div>
                   <div class="flex flex-auto flex-row-reverse">
                     <div x-on:click.stop="remove(index,option)">
@@ -50,6 +51,7 @@
                   </div>
                 </div>
               </template>
+              <!-- Placeholder component for when no options are selected -->
               <div x-show="selected.length == 0" class="flex-1">
                 <input placeholder="Link your other pages" class="bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-gray-800" x-bind:value="selectedValues()">
               </div>
@@ -70,7 +72,6 @@
     c0.27-0.268,0.707-0.268,0.979,0l7.908,7.83c0.27,0.268,0.27,0.701,0,0.969c-0.271,0.268-0.709,0.268-0.978,0L10,6.75L2.582,13.891z
     " />
                 </svg>
-
               </button>
             </div>
           </div>
@@ -78,6 +79,31 @@
         <div class="w-full px-4">
           <div x-show.transition.origin.top="isOpen()" class="absolute shadow top-100 bg-white z-40 w-full left-0 rounded max-h-select" x-on:click.away="close">
             <div class="flex flex-col w-full overflow-y-auto h-64">
+              <template x-for="(optgroup,index) in optgroups" :key="index" class="overflow-auto">
+                <div class="w-full border-gray-100">
+                  <div class="w-full border-b bg-blue-200 inline-flex items-center">
+                    <span x-text="optgroup.icon" class="material-icons mr-1"></span>
+                    <span x-text="optgroup.label" class="text-xs font-bold mx-2"></span>
+                  </div>
+                  <template x-for="(option,index) in optgroup.options" :key="option" class="overflow-auto">
+                    <div class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-gray-100" @click="select(index,$event)">
+                      <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative">
+                        <div class="w-full items-center flex justify-between">
+                          <div class="mx-2 leading-6" x-model="option" x-text="option.text"></div>
+                          <div x-show="option.selected">
+                            <svg class="svg-icon" viewBox="0 0 20 20">
+                              <path fill="none" d="M7.197,16.963H7.195c-0.204,0-0.399-0.083-0.544-0.227l-6.039-6.082c-0.3-0.302-0.297-0.788,0.003-1.087
+                    C0.919,9.266,1.404,9.269,1.702,9.57l5.495,5.536L18.221,4.083c0.301-0.301,0.787-0.301,1.087,0c0.301,0.3,0.301,0.787,0,1.087
+                    L7.741,16.738C7.596,16.882,7.401,16.963,7.197,16.963z"></path>
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </template>
+
               <template x-for="(option,index) in options" :key="option" class="overflow-auto">
                 <div class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-gray-100" @click="select(index,$event)">
                   <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative">