finish pagination, fix how data is retrieved by table

app/components/nextflow/samplesheet/file_cell_component.html.erb

@@ -2,6 +2,10 @@
   data-controller="nextflow--autofilled-cell"
   data-nextflow--autofilled-cell-input-name-value="workflow_execution[samples_workflow_executions_attributes][<%= @index%>][samplesheet_params][<%= @property %>]"
   data-nextflow--autofilled-cell-input-value-value="<%= @selected[:global_id]%>"
+  data-nextflow--autofilled-cell-filename-value="<%= @selected[:filename]%>"
+  data-nextflow--autofilled-cell-index-value="<%= @index %>"
+  data-nextflow--autofilled-cell-property-value="<%= @property %>"
+  data-nextflow--autofilled-cell-type-value="file"
 >
   <%= link_to new_workflow_executions_file_selector_path(
   "file_selector[attachable_id]": @attachable.id,

app/components/nextflow/samplesheet/metadata_cell_component.html.erb

@@ -4,6 +4,7 @@
     data-controller="nextflow--autofilled-cell"
     data-nextflow--autofilled-cell-input-name-value="workflow_execution[samples_workflow_executions_attributes][<%= index %>][samplesheet_params][<%= name %>]"
     data-nextflow--autofilled-cell-input-value-value="<%= metadata %>"
+    data-nextflow--autofilled-cell-type-value="metadata"
   >
     <span class="h-3.5 inline-block"><%= metadata %></span>
   </div>

app/components/nextflow/samplesheet_component.html.erb

@@ -25,7 +25,7 @@
     data-nextflow--samplesheet-target="table"
     class="
       samplesheet-table flex border dark:border-slate-600 border-slate-100 max-h-72
-      overflow-y-auto relative
+      overflow-y-auto relative mb-1
     "
   >
     <% properties.each do |header, property| %>
@@ -56,6 +56,46 @@
       </div>
     </template>
   </div>
+  <div class="flex items-center justify-end">
+    <nav aria-label="Pagination">
+      <ul class="inline-flex h-10 text-base">
+        <li><button
+            type="button"
+            class="
+              flex items-center justify-center px-4 h-10 ms-0 leading-tight border
+              border-slate-300 dark:border-slate-700 cursor-default text-slate-600 bg-slate-50
+              dark:bg-slate-700 dark:text-slate-400 border-e-0 rounded-s-lg
+            "
+            data-action="click->nextflow--samplesheet#previousPage"
+            data-nextflow--samplesheet-target="previousBtn"
+          >Previous</button>
+        </li>
+        <li><select
+            class="
+              flex items-center justify-center px-4 h-10 ms-0 leading-tight border
+              border-slate-300 dark:border-slate-700 text-slate-500 bg-white
+              hover:bg-slate-100 hover:text-slate-700 dark:bg-slate-800 dark:text-slate-400
+              dark:hover:bg-slate-700 dark:hover:text-white cursor-pointer
+            "
+            data-nextflow--samplesheet-target="pageNum"
+            data-action="change->nextflow--samplesheet#pageSelected"
+          ></select>
+        </li>
+        <li><button
+            class="
+              flex items-center justify-center px-4 h-10 ms-0 leading-tight border
+              border-slate-300 dark:border-slate-700 text-slate-500 bg-white
+              hover:bg-slate-100 hover:text-slate-700 dark:bg-slate-800 dark:text-slate-400
+              dark:hover:bg-slate-700 dark:hover:text-white rounded-e-lg
+            "
+            type="button"
+            data-nextflow--samplesheet-target="nextBtn"
+            data-action="click->nextflow--samplesheet#nextPage"
+          >Next</button>
+        </li>
+      </ul>
+    </nav>
+  </div>
 </div>
 
 <template data-nextflow--samplesheet-target="cellContainer">
@@ -120,7 +160,6 @@ data: {
       </div>
     <% end %>
   </div>
-
 </template>
 
 <template data-nextflow--samplesheet-target="metadataCell">

app/components/nextflow/samplesheet_component.rb

@@ -44,8 +44,8 @@ def sample_samplesheet_params(sample) # rubocop:disable Metrics/CyclomaticComple
           [name, { form_value: sample.name, cell_type: 'sample_name_cell', cell_value: sample.name }]
         when 'fastq_cell'
           [name,
-           file_samplesheet_values(sample.attachments.empty? ? nil : sample.most_recent_fastq_file(name,
-                                                                                                   @workflow_params))]
+           file_samplesheet_values(sample.attachments.empty? ? {} : sample.most_recent_fastq_file(name,
+                                                                                                  @workflow_params))]
         when 'file_cell'
           [name,
            file_samplesheet_values(sample.most_recent_other_file(property['autopopulate'], property['pattern']))]

app/components/nextflow_component.html.erb

@@ -4,6 +4,7 @@
   data-nextflow--samplesheet-submission-error-value="<%= t(".submission_error") %>"
   data-nextflow--samplesheet-url-value="<%= url %>"
   data-nextflow--samplesheet-workflow-value="<%= {name: @workflow.name, version: @workflow.version }.to_json%>"
+  data-nextflow--samplesheet-no-selected-file-value="<%= t("nextflow.samplesheet.file_cell_component.no_selected_file")%>"
   data-action="
     nextflow--autofilled-cell:sendAutofilledInputData->nextflow--samplesheet#updateAutofilledSamplesheetData
   "

app/javascript/controllers/nextflow/autofilled_cell_controller.js

@@ -2,20 +2,35 @@ import { Controller } from "@hotwired/stimulus";
 
 // Handles sending metadata and file form values to samplesheet FormData
 export default class extends Controller {
-  static values = { inputName: { type: String }, inputValue: { type: String } };
+  static values = {
+    inputName: { type: String },
+    inputValue: { type: String },
+    filename: { type: String },
+    index: { type: String },
+    property: { type: String },
+    type: { type: String },
+  };
 
   connect() {
     console.log("autofilled");
     this.sendAutofilledInputData();
   }
 
   sendAutofilledInputData() {
+    let dispatchContent = {
+      inputName: this.inputNameValue,
+      inputValue: this.inputValueValue,
+    };
+    if (this.typeValue == "file") {
+      dispatchContent["file"] = {
+        filename: this.filenameValue,
+        index: this.indexValue,
+        property: this.propertyValue,
+      };
+    }
     this.dispatch("sendAutofilledInputData", {
       detail: {
-        content: {
-          inputName: this.inputNameValue,
-          inputValue: this.inputValueValue,
-        },
+        content: dispatchContent,
       },
     });
   }

app/javascript/controllers/nextflow/samplesheet_controller.js

@@ -16,21 +16,44 @@ export default class extends Controller {
     "fileCell",
     "metadataCell",
     "textCell",
+    "previousBtn",
+    "nextBtn",
+    "pageNum",
   ];
+
   static values = {
     attachmentsError: { type: String },
     submissionError: { type: String },
     url: { type: String },
     workflow: { type: Object },
+    noSelectedFile: { type: String },
   };
 
   #error_state = ["border-red-300", "dark:border-red-800"];
-
   #default_state = ["border-transparent"];
 
+  #pagination_button_disabled_state = [
+    "cursor-default",
+    "text-slate-600",
+    "bg-slate-50",
+    "dark:bg-slate-700",
+    "dark:text-slate-400",
+  ];
+  #pagination_button_enabled_state = [
+    "text-slate-500",
+    "bg-white",
+    "hover:bg-slate-100",
+    "hover:text-slate-700",
+    "dark:bg-slate-800",
+    "dark:text-slate-400",
+    "dark:hover:bg-slate-700",
+    "dark:hover:text-white",
+  ];
+
   // The samplesheet will use FormData, allowing us to create the inputs of a form without the associated DOM elements.
   #formData = new FormData();
   #currentPage = 1;
+  #lastPage;
   #samplesheetProperties = JSON.parse(
     this.samplesheetPropertiesTarget.innerHTML,
   );
@@ -44,9 +67,19 @@ export default class extends Controller {
         this.workflowAttributesTarget.innerText,
       );
       this.#setInitialSamplesheetData();
+      this.#lastPage = Math.ceil(
+        Object.keys(this.samplesheetParams).length / 5,
+      );
+      if (this.#lastPage == 1) {
+        this.#disablePaginationButton(this.nextBtnTarget);
+      }
+      this.#generatePageNumberDropdown();
       this.#loadPageData();
     }
   }
+  disconnect() {
+    console.log("disconect");
+  }
 
   #setInitialSamplesheetData() {
     console.log("params");
@@ -80,6 +113,18 @@ export default class extends Controller {
   // handles changes to metadata autofill and file cells
   updateAutofilledSamplesheetData({ detail: { content } }) {
     this.#setFormData(content.inputName, content.inputValue);
+
+    // update samplesheetParams cell_value with the new filename to be displayed in samplesheet table
+    // as this is the only place to retrieve filename unlike all other fields that can be retrieved
+    // via formData (files are stored by globalID in formData)
+    if (content.file) {
+      let filename = content["file"]["filename"]
+        ? content["file"]["filename"]
+        : this.noSelectedFileValue;
+      this.samplesheetParams[content["file"]["index"]]["samplesheet_params"][
+        content["file"]["property"]
+      ]["cell_value"] = filename;
+    }
   }
 
   submitSamplesheet(event) {
@@ -115,6 +160,12 @@ export default class extends Controller {
     this.#formData.set(inputName, inputValue);
   }
 
+  #retrieveFormData(index, columnName) {
+    return this.#formData.get(
+      `workflow_execution[samples_workflow_executions_attributes][${index}][samplesheet_params][${columnName}]`,
+    );
+  }
+
   #validateFileCells() {
     let readyToSubmit = true;
     const missingRequiredFileCells = document.querySelectorAll(
@@ -170,9 +221,17 @@ export default class extends Controller {
 
   #loadPageData() {
     let startingIndex = (this.#currentPage - 1) * 5;
+    let lastIndex = startingIndex + 5;
+    if (
+      this.#currentPage == this.#lastPage &&
+      Object.keys(this.samplesheetParams).length % 5 != 0
+    ) {
+      lastIndex =
+        (Object.keys(this.samplesheetParams).length % 5) + startingIndex;
+    }
     this.#columnNames.forEach((columnName) => {
       let columnNode = document.getElementById(`metadata-${columnName}-column`);
-      for (let i = 0; i < 1; i++) {
+      for (let i = startingIndex; i < lastIndex; i++) {
         let container = this.#generateCellContainer(columnNode);
         switch (this.#samplesheetProperties[columnName]["cell_type"]) {
           case "sample_cell":
@@ -202,10 +261,6 @@ export default class extends Controller {
         }
       }
     });
-    // 1 -> 0-4
-    // 2 -> 5-9
-    // 3 -> 10-14
-    // 4 -> 15-19
   }
 
   // inserting the template html then requerying it out via lastElementChild turns the node from textNode into an
@@ -219,9 +274,7 @@ export default class extends Controller {
   #generateSampleCell(container, columnName, index) {
     let childNode = this.sampleIdentifierCellTarget.innerHTML.replace(
       /CELL_PLACEHOLDER/g,
-      this.samplesheetParams[index]["samplesheet_params"][columnName][
-        "cell_value"
-      ],
+      this.#retrieveFormData(index, columnName),
     );
     container.insertAdjacentHTML("beforeend", childNode);
   }
@@ -239,7 +292,8 @@ export default class extends Controller {
       option.innerHTML = options[j];
       select.appendChild(option);
     }
-    // TODO SET SELECTED VALUE
+
+    select.value = this.#retrieveFormData(index, columnName);
   }
 
   #generateFileCell(container, columnName, index) {
@@ -295,9 +349,7 @@ export default class extends Controller {
     ) {
       let childNode = his.metadataCellTarget.innerHTML.replace(
         /METADATA_VALUE_PLACEHOLDER/g,
-        his.samplesheetParams[index]["samplesheet_params"][columnName][
-          "form_value"
-        ],
+        this.#retrieveFormData(index, columnName),
       );
       container.insertAdjacentHTML("beforeend", childNode);
     } else {
@@ -317,15 +369,77 @@ export default class extends Controller {
       );
 
     container.insertAdjacentHTML("beforeend", childNode);
-    const form_value =
-      this.samplesheetParams[index]["samplesheet_params"][columnName][
-        "form_value"
-      ];
-
+    const form_value = this.#retrieveFormData(index, columnName);
     if (form_value) {
       container.lastElementChild.value = form_value;
     }
   }
+
+  previousPage() {
+    this.#currentPage -= 1;
+    this.pageNumTarget.value = this.#currentPage;
+    this.#updatePageData();
+  }
+
+  nextPage() {
+    this.#currentPage += 1;
+    this.pageNumTarget.value = this.#currentPage;
+    this.#updatePageData();
+  }
+
+  pageSelected() {
+    this.#currentPage = parseInt(this.pageNumTarget.value);
+    this.#updatePageData();
+  }
+
+  #updatePageData() {
+    this.#verifyButtonStates();
+    this.#clearSamplesheetTable();
+    this.#loadPageData();
+  }
+
+  #verifyButtonStates() {
+    if (this.#currentPage == 1) {
+      this.#disablePaginationButton(this.previousBtnTarget);
+      this.#enablePaginationButton(this.nextBtnTarget);
+    } else if (this.#currentPage == this.#lastPage) {
+      this.#disablePaginationButton(this.nextBtnTarget);
+      this.#enablePaginationButton(this.previousBtnTarget);
+    } else {
+      this.#enablePaginationButton(this.nextBtnTarget);
+      this.#enablePaginationButton(this.previousBtnTarget);
+    }
+  }
+
+  #disablePaginationButton(button) {
+    button.disabled = true;
+    button.classList.remove(...this.#pagination_button_enabled_state);
+    button.classList.add(...this.#pagination_button_disabled_state);
+  }
+
+  #enablePaginationButton(button) {
+    button.disabled = false;
+    button.classList.remove(...this.#pagination_button_disabled_state);
+    button.classList.add(...this.#pagination_button_enabled_state);
+  }
+
+  #generatePageNumberDropdown() {
+    let pageSelection = this.pageNumTarget;
+
+    for (let i = 1; i < this.#lastPage + 1; i++) {
+      let option = document.createElement("option");
+      option.value = i;
+      option.innerHTML = i;
+      pageSelection.appendChild(option);
+    }
+    pageSelection.value = 1;
+  }
+
+  #clearSamplesheetTable() {
+    this.#columnNames.forEach((columnName) => {
+      document.getElementById(`metadata-${columnName}-column`).innerHTML = "";
+    });
+  }
 }
 
 // console.log(this.#samplesheetProperties);