Add table component [SCI-6777]

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;
+    }
+  }
+}

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;

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

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>

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

app/serializers/step_table_serializer.rb

@@ -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

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

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' %>
+

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:

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