select calendar url on click

public-typescript/workOrderOutlook.js

@@ -3,6 +3,7 @@
     const apiKey = document.querySelector("main").dataset.apiKey;
     const workOrderTypeIdsElement = document.querySelector("#icsFilters--workOrderTypeIds");
     const workOrderMilestoneTypeIdsElement = document.querySelector("#icsFilters--workOrderMilestoneTypeIds");
+    const calendarLinkElement = document.querySelector("#icsFilters--calendarURL");
     const updateCalendarURL = () => {
         let url = window.location.href.slice(0, Math.max(0, window.location.href.indexOf(window.location.pathname) + 1)) +
             urlPrefix +
@@ -27,7 +28,7 @@
             }
             url = url.slice(0, -1) + "&";
         }
-        document.querySelector("#icsFilters--calendarURL").value = url.slice(0, -1);
+        calendarLinkElement.value = url.slice(0, -1);
     };
     document
         .querySelector("#icsFilters--workOrderTypeIds-all")
@@ -46,4 +47,8 @@
         element.addEventListener("change", updateCalendarURL);
     }
     updateCalendarURL();
+    calendarLinkElement.addEventListener("click", () => {
+        calendarLinkElement.focus();
+        calendarLinkElement.select();
+    });
 })();

public-typescript/workOrderOutlook.ts

@@ -10,6 +10,10 @@
         "#icsFilters--workOrderMilestoneTypeIds"
     ) as HTMLSelectElement;
 
+    const calendarLinkElement = document.querySelector(
+        "#icsFilters--calendarURL"
+    ) as HTMLTextAreaElement;
+
     const updateCalendarURL = () => {
         let url =
             window.location.href.slice(
@@ -52,11 +56,7 @@
             url = url.slice(0, -1) + "&";
         }
 
-        (
+        calendarLinkElement.value = url.slice(0, -1);
-            document.querySelector(
-                "#icsFilters--calendarURL"
-            ) as HTMLTextAreaElement
-        ).value = url.slice(0, -1);
     };
 
     document
@@ -86,4 +86,9 @@
     }
 
     updateCalendarURL();
+
+    calendarLinkElement.addEventListener("click", () => {
+        calendarLinkElement.focus();
+        calendarLinkElement.select();
+    })
 })();

public/javascripts/workOrderOutlook.min.js

@@ -1 +1 @@
-(()=>{const e=document.querySelector("main").dataset.urlPrefix,t=document.querySelector("main").dataset.apiKey,r=document.querySelector("#icsFilters--workOrderTypeIds"),o=document.querySelector("#icsFilters--workOrderMilestoneTypeIds"),c=()=>{let c=window.location.href.slice(0,Math.max(0,window.location.href.indexOf(window.location.pathname)+1))+e+"api/"+t+"/milestoneICS/?";if(!r.disabled&&r.selectedOptions.length>0){c+="workOrderTypeIds=";for(const e of r.selectedOptions)c+=e.value+",";c=c.slice(0,-1)+"&"}if(!o.disabled&&o.selectedOptions.length>0){c+="workOrderMilestoneTypeIds=";for(const e of o.selectedOptions)c+=e.value+",";c=c.slice(0,-1)+"&"}document.querySelector("#icsFilters--calendarURL").value=c.slice(0,-1)};document.querySelector("#icsFilters--workOrderTypeIds-all").addEventListener("change",e=>{r.disabled=e.currentTarget.checked}),document.querySelector("#icsFilters--workOrderMilestoneTypeIds-all").addEventListener("change",e=>{o.disabled=e.currentTarget.checked});const l=document.querySelector("#panel--icsFilters").querySelectorAll("input, select");for(const e of l)e.addEventListener("change",c);c()})();
+(()=>{const e=document.querySelector("main").dataset.urlPrefix,t=document.querySelector("main").dataset.apiKey,r=document.querySelector("#icsFilters--workOrderTypeIds"),c=document.querySelector("#icsFilters--workOrderMilestoneTypeIds"),l=document.querySelector("#icsFilters--calendarURL"),o=()=>{let o=window.location.href.slice(0,Math.max(0,window.location.href.indexOf(window.location.pathname)+1))+e+"api/"+t+"/milestoneICS/?";if(!r.disabled&&r.selectedOptions.length>0){o+="workOrderTypeIds=";for(const e of r.selectedOptions)o+=e.value+",";o=o.slice(0,-1)+"&"}if(!c.disabled&&c.selectedOptions.length>0){o+="workOrderMilestoneTypeIds=";for(const e of c.selectedOptions)o+=e.value+",";o=o.slice(0,-1)+"&"}l.value=o.slice(0,-1)};document.querySelector("#icsFilters--workOrderTypeIds-all").addEventListener("change",e=>{r.disabled=e.currentTarget.checked}),document.querySelector("#icsFilters--workOrderMilestoneTypeIds-all").addEventListener("change",e=>{c.disabled=e.currentTarget.checked});const s=document.querySelector("#panel--icsFilters").querySelectorAll("input, select");for(const e of s)e.addEventListener("change",o);o(),l.addEventListener("click",()=>{l.focus(),l.select()})})();

views/workOrder-outlook.ejs

@@ -72,7 +72,7 @@
                 <div class="field">
                     <label class="label" for="icsFilters--calendarURL">ICS Calendar Link</label>
                     <div class="control">
-                        <textarea class="textarea" id="icsFilters--calendarURL" name="calendarURL" style="cursor:text" disabled readonly></textarea>
+                        <textarea class="textarea" id="icsFilters--calendarURL" name="calendarURL" style="cursor:text" readonly></textarea>
                     </div>
                 </div>
             </div>