Refactor

Author: cb341

app/views/timer_sessions/_timer_container.html.erb

@@ -92,7 +92,7 @@
             <%= t('timer_sessions.timer.continue_last_session') %>
             <%= sprite_icon('add') %>
           <% end %>
-          <button type="button" data-name="timer-share" data-action="click->form#share" class="btn-submit">
+          <button type="submit" data-name="timer-share" data-action="click->form#share">
             <%= t('timer_sessions.timer.share') %>
             <%= sprite_icon('link') %>
           </button>

assets.src/src/redmine-tracky/controllers/form-controller.ts

@@ -32,6 +32,7 @@ export default class extends Controller {
 
   public connect() {
     this.connected = true
+    this.prefillFieldsFromURL()
     this.showShareIgnoredNotice()
   }
 
@@ -77,7 +78,8 @@ export default class extends Controller {
     this.dispatchUpdate(form)
   }
 
-  public share(_event: Event) {
+  public share(event: Event) {
+    event.preventDefault()
     const parts: string[] = []
     const issueIds = this.extractIssueIds()
     const comments = this.descriptionTarget.value
@@ -92,30 +94,25 @@ export default class extends Controller {
     const query = parts.length > 0 ? `?${parts.join('&')}` : ''
     const url = `${window.location.origin}${window.location.pathname}${query}`
 
-    this.copyToClipboard(url).then(() => {
+    navigator.clipboard.writeText(url).then(() => {
       this.showFlashNotice(this.shareCopiedValue)
     })
   }
 
-  private copyToClipboard(text: string): Promise<void> {
-    if (navigator.clipboard?.writeText) {
-      return navigator.clipboard.writeText(text).catch(() => {
-        this.copyToClipboardFallback(text)
-      })
-    }
-    this.copyToClipboardFallback(text)
-    return Promise.resolve()
+  private prefillFieldsFromURL() {
+    const urlParams = new URLSearchParams(window.location.search)
+
+    this.prefillField(urlParams, 'comments', this.descriptionTarget)
+    this.prefillField(urlParams, 'timer_start', this.startTarget)
+    this.prefillField(urlParams, 'timer_end', this.endTarget)
   }
 
-  private copyToClipboardFallback(text: string) {
-    const textarea = document.createElement('textarea')
-    textarea.value = text
-    textarea.style.position = 'fixed'
-    textarea.style.opacity = '0'
-    document.body.appendChild(textarea)
-    textarea.select()
-    document.execCommand('copy')
-    document.body.removeChild(textarea)
+  private prefillField(urlParams: URLSearchParams, param: string, target: HTMLInputElement) {
+    const value = urlParams.get(param)
+    if (!value) return
+
+    target.value = value
+    target.dispatchEvent(new Event('change'))
   }
 
   private showShareIgnoredNotice() {

assets.src/src/redmine-tracky/controllers/issue-completion-controller.ts

@@ -45,14 +45,6 @@ export default class extends Controller {
 
   private prefillFromURL() {
     const urlParams = new URLSearchParams(window.location.search)
-
-    this.prefillIssuesFromURL(urlParams)
-    this.prefillFieldFromURL(urlParams, 'comments', '#timer_session_comments')
-    this.prefillFieldFromURL(urlParams, 'timer_start', '#timer_session_timer_start')
-    this.prefillFieldFromURL(urlParams, 'timer_end', '#timer_session_timer_end')
-  }
-
-  private prefillIssuesFromURL(urlParams: URLSearchParams) {
     const issueIds = urlParams.getAll('issue_ids[]')
 
     issueIds.filter(v => v !== "").forEach((id) => {
@@ -70,17 +62,6 @@ export default class extends Controller {
     })
   }
 
-  private prefillFieldFromURL(urlParams: URLSearchParams, param: string, selector: string) {
-    const value = urlParams.get(param)
-    if (!value) return
-
-    const field = document.querySelector<HTMLInputElement>(selector)
-    if (field) {
-      field.value = value
-      field.dispatchEvent(new Event('change'))
-    }
-  }
-
   private addIssue(issue: { item: CompletionResult }) {
     const listController =
       this.application.getControllerForElementAndIdentifier(

assets.src/src/styles/timer_container.scss

@@ -9,20 +9,6 @@
     gap: 0.5rem;
   }
 
-  .btn-submit {
-    -webkit-appearance: button;
-    cursor: pointer;
-    background-color: #fff;
-    height: 28px;
-    border: 1px solid #ccc;
-    padding: 0 7px;
-    transition: background-color 100ms linear;
-
-    &:hover {
-      background-color: #ededed;
-    }
-  }
-
   .timer-container button svg {
     stroke: #fff;
   }