From 252680f0a1d1635a966b8e1ecf85e91600941034 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Fri, 6 May 2022 11:59:22 +0200
Subject: [PATCH] Add table component [SCI-6777]

---
 .../stylesheets/steps/components/table.scss   |  58 ++++++++++
 app/assets/stylesheets/steps/step.scss        |   2 +
 .../step_components/tables_controller.rb      |   7 +-
 .../vue/protocol/step_components/table.vue    | 109 +++++++++++++++++-
 .../step_orderable_element_serializer.rb      |   2 +-
 app/serializers/step_table_serializer.rb      |  17 ---
 app/serializers/table_serializer.rb           |  22 ++++
 app/views/my_modules/protocols.html.erb       |   3 +
 config/locales/en.yml                         |   1 +
 config/routes.rb                              |   2 +-
 10 files changed, 195 insertions(+), 28 deletions(-)
 create mode 100644 app/assets/stylesheets/steps/components/table.scss
 delete mode 100644 app/serializers/step_table_serializer.rb
 create mode 100644 app/serializers/table_serializer.rb

diff --git a/app/assets/stylesheets/steps/components/table.scss b/app/assets/stylesheets/steps/components/table.scss
new file mode 100644
index 000000000..af34e4a0a
--- /dev/null
+++ b/app/assets/stylesheets/steps/components/table.scss
@@ -0,0 +1,58 @@
+.step-table-container {
+  margin-bottom: 1em;
+
+  .step-table {
+    border: $border-transparent;
+    margin-left: 20px;
+    padding: 4px;
+    position: relative;
+
+    .enable-edit-mode {
+      cursor: pointer;
+      display: none;
+      height: 100%;
+      justify-content: flex-end;
+      left: 0;
+      padding: 12px;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: 200;
+    }
+
+    .edit-message {
+      @include font-small;
+      color: $color-silver-chalice;
+      padding: 12px 0 8px;
+    }
+
+    td,
+    th {
+      color: $color-black;
+    }
+
+    &.view {
+      &:hover {
+        background-color: $color-concrete;
+
+        .enable-edit-mode {
+          display: flex;
+        }
+      }
+    }
+
+    &.edit {
+      border: $border-default;
+    }
+  }
+
+  .edit-buttons {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: .5em;
+
+    .btn {
+      margin-left: .5em;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/steps/step.scss b/app/assets/stylesheets/steps/step.scss
index bfa9a2077..8d7446cca 100644
--- a/app/assets/stylesheets/steps/step.scss
+++ b/app/assets/stylesheets/steps/step.scss
@@ -1,6 +1,8 @@
 // scss-lint:disable SelectorDepth
 // scss-lint:disable NestingDepth
 
+@import "components/*";
+
 .step-container {
   margin: 20px 0;
   padding: 8px 24px;
diff --git a/app/controllers/step_components/tables_controller.rb b/app/controllers/step_components/tables_controller.rb
index bafdc6eb7..0f7306fc4 100644
--- a/app/controllers/step_components/tables_controller.rb
+++ b/app/controllers/step_components/tables_controller.rb
@@ -1,4 +1,3 @@
-# frozen_string_literal: true
 
 module StepComponents
   class TablesController < StepOrderableElementsController
@@ -8,13 +7,13 @@ module StepComponents
       @step.step_tables.create!(table:
         Table.create!(
           name: t('protocols.steps.table.default_name', position: @step.step_tables.length + 1),
-          contents: '{"data":[["",""],["",""],["",""],["",""],["",""]]}',
+          contents: { data: Array.new(5, Array.new(5, '')) }.to_json,
           created_by: current_user
         ))
     end
 
-    def element_params
-      params.require(:table).permit(:name, :contents)
+    def orderable_params
+      params.permit(:name, :contents)
     end
 
     def load_vars
diff --git a/app/javascript/vue/protocol/step_components/table.vue b/app/javascript/vue/protocol/step_components/table.vue
index 23e856103..2781d2496 100644
--- a/app/javascript/vue/protocol/step_components/table.vue
+++ b/app/javascript/vue/protocol/step_components/table.vue
@@ -1,9 +1,49 @@
 <template>
   <div class="step-table-container">
-    Table
-    <button class="btn icon-btn btn-light" @click="showDeleteModal">
-      <i class="fas fa-trash"></i>
-    </button>
+     <div class="step-element-header" :class="{ 'editing-name': editingName }">
+      <div class="step-element-grip">
+        <i class="fas fa-grip-vertical"></i>
+      </div>
+      <div class="step-element-name">
+        <InlineEdit
+          :value="element.attributes.orderable.name"
+          :characterLimit="255"
+          :placeholder="''"
+          :allowBlank="false"
+          :autofocus="editingName"
+          :attributeName="`${i18n.t('Table')} ${i18n.t('name')}`"
+          @editingEnabled="enableNameEdit"
+          @editingDisabled="disableNameEdit"
+          @update="updateName"
+        />
+      </div>
+      <div class="step-element-controls">
+        <button class="btn icon-btn btn-light" @click="enableNameEdit">
+          <i class="fas fa-pen"></i>
+        </button>
+        <button class="btn icon-btn btn-light" @click="showDeleteModal">
+          <i class="fas fa-trash"></i>
+        </button>
+      </div>
+    </div>
+    <div :class="'step-table ' + (editingTable ? 'edit' : 'view')">
+      <div class="enable-edit-mode" v-if="!editingTable" @click="enableTableEdit">
+        <i class="fas fa-pen"></i>
+      </div>
+      <div ref="hotTable" class="hot-table-container">
+      </div>
+      <div v-if="editingTable" class="edit-message">
+        {{ i18n.t('protocols.steps.table.edit_message') }}
+      </div>
+    </div>
+    <div class="edit-buttons" v-if="editingTable">
+      <button class="btn icon-btn btn-primary" @click="updateTable">
+        <i class="fas fa-check"></i>
+      </button>
+      <button class="btn icon-btn btn-light" @click="disableTableEdit">
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
     <deleteComponentModal v-if="confirmingDelete" @confirm="deleteComponent" @cancel="closeDeleteModal"/>
   </div>
 </template>
@@ -11,16 +51,75 @@
  <script>
   import DeleteMixin from 'vue/protocol/mixins/components/delete.js'
   import deleteComponentModal from 'vue/protocol/modals/delete_component.vue'
+  import InlineEdit from 'vue/shared/inline_edit.vue'
 
   export default {
     name: 'StepTable',
-    components: { deleteComponentModal },
+    components: { deleteComponentModal, InlineEdit },
     mixins: [DeleteMixin],
     props: {
       element: {
         type: Object,
         required: true
       }
+    },
+    data() {
+      return {
+        editingName: false,
+        editingTable: false,
+        tableObject: null
+      }
+    },
+    updated() {
+      this.loadTableData();
+    },
+    beforeUpdate() {
+      this.tableObject.destroy();
+    },
+    mounted() {
+      this.loadTableData();
+    },
+    methods: {
+      enableTableEdit() {
+        this.editingTable = true;
+      },
+      disableTableEdit() {
+        this.editingTable = false;
+      },
+      enableNameEdit() {
+        this.editingName = true;
+      },
+      disableNameEdit() {
+        this.editingName = false;
+      },
+      updateName(name) {
+        this.element.attributes.orderable.name = name;
+        this.update();
+      },
+      updateTable() {
+        let tableData = JSON.stringify({data: this.tableObject.getData()});
+        this.element.attributes.orderable.contents = tableData;
+        this.update();
+        this.editingTable = false;
+      },
+      update() {
+        this.$emit('update', this.element)
+      },
+      loadTableData() {
+        let container = this.$refs.hotTable;
+        let data = JSON.parse(this.element.attributes.orderable.contents);
+        this.tableObject = new Handsontable(container, {
+          data: data.data,
+          width: '100%',
+          startRows: 5,
+          startCols: 5,
+          rowHeaders: true,
+          colHeaders: true,
+          contextMenu: this.editingTable,
+          formulas: true,
+          readOnly: !this.editingTable
+        });
+      }
     }
   }
 </script>
diff --git a/app/serializers/step_orderable_element_serializer.rb b/app/serializers/step_orderable_element_serializer.rb
index d5f3377fd..43223720c 100644
--- a/app/serializers/step_orderable_element_serializer.rb
+++ b/app/serializers/step_orderable_element_serializer.rb
@@ -8,7 +8,7 @@ class StepOrderableElementSerializer < ActiveModel::Serializer
     when 'Checklist'
       ChecklistSerializer.new(object.orderable).as_json
     when 'StepTable'
-      StepTableSerializer.new(object.orderable.table).as_json
+      TableSerializer.new(object.orderable.table).as_json
     when 'StepText'
       StepTextSerializer.new(object.orderable).as_json
     end
diff --git a/app/serializers/step_table_serializer.rb b/app/serializers/step_table_serializer.rb
deleted file mode 100644
index c5bc82633..000000000
--- a/app/serializers/step_table_serializer.rb
+++ /dev/null
@@ -1,17 +0,0 @@
-# frozen_string_literal: true
-
-class StepTableSerializer < ActiveModel::Serializer
-  include Rails.application.routes.url_helpers
-
-  attributes :name, :urls
-
-  def urls
-    return if object.destroyed?
-
-    object.reload unless object.step
-
-    {
-      delete_url: step_table_path(object.step, object)
-    }
-  end
-end
diff --git a/app/serializers/table_serializer.rb b/app/serializers/table_serializer.rb
new file mode 100644
index 000000000..6324b4c84
--- /dev/null
+++ b/app/serializers/table_serializer.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class TableSerializer < ActiveModel::Serializer
+  include Rails.application.routes.url_helpers
+
+  attributes :name, :contents, :urls
+
+  def contents
+    object.contents_utf_8
+  end
+
+  def urls
+    return if object.destroyed?
+
+    object.reload unless object.step
+
+    {
+      delete_url: step_table_path(object.step, object),
+      update_url: step_table_path(object.step, object)
+    }
+  end
+end
diff --git a/app/views/my_modules/protocols.html.erb b/app/views/my_modules/protocols.html.erb
index cb75556ff..21aee97c3 100644
--- a/app/views/my_modules/protocols.html.erb
+++ b/app/views/my_modules/protocols.html.erb
@@ -172,6 +172,8 @@
 <%= render partial: 'my_modules/repositories/consume_stock_modal.html.erb'%>
 
 <%= stylesheet_link_tag 'datatables' %>
+<%= javascript_include_tag "handsontable.full" %>
+<%= render partial: "shared/formulas_libraries.html.erb" %>
 <%= javascript_include_tag("my_modules/protocols") %>
 <%= javascript_include_tag("my_modules/status_flow") %>
 <%= javascript_pack_tag 'emoji_button' %>
@@ -181,3 +183,4 @@
 <%= stylesheet_pack_tag 'pdfjs/pdf_js_styles' %>
 
 <%= javascript_pack_tag 'vue/protocol' %>
+
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 33b245810..f7a08ac5c 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2522,6 +2522,7 @@ en:
         checklist: 'Add checklist'
       table:
         default_name: 'Table %{position}'
+        edit_message: 'Use right click for table options'
       checklist:
         default_name: 'Checklist %{position}'
       modals:
diff --git a/config/routes.rb b/config/routes.rb
index bf1961c59..2fd81e40d 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -449,7 +449,7 @@ Rails.application.routes.draw do
                 path: '/comments',
                 only: %i(create index update destroy)
 
-      resources :tables, controller: 'step_components/tables', only: %i(create destroy)
+      resources :tables, controller: 'step_components/tables', only: %i(create destroy update)
       resources :texts, controller: 'step_components/texts', only: %i(create destroy)
       resources :checklists, controller: 'step_components/checklists', only: %i(create destroy update)
       member do