From 743d0f57b7870ec392c96e0039381276f175a5fe Mon Sep 17 00:00:00 2001
From: Martin Artnik <martin@scinote.net>
Date: Mon, 8 Apr 2024 11:35:41 +0200
Subject: [PATCH] (dev) Placeholder for new import modal [SCI-10494]

---
 app/assets/javascripts/repositories/show.js   |  4 +---
 .../packs/vue/design_system/modals.js         | 20 ++++++++--------
 app/javascript/vue/shared/info_component.vue  | 16 ++++++-------
 app/javascript/vue/shared/info_modal.vue      | 18 ++++++++++----
 app/javascript/vue/shared/modal_mixin.js      |  9 ++++++-
 app/views/design_elements/_modals.html.erb    |  2 +-
 .../repositories/_toolbar_buttons.html.erb    |  4 ++--
 app/views/repositories/show.html.erb          |  4 ++++
 config/locales/en.yml                         | 24 +++++++++++++++++++
 config/webpack/webpack.config.js              |  1 +
 10 files changed, 73 insertions(+), 29 deletions(-)

diff --git a/app/assets/javascripts/repositories/show.js b/app/assets/javascripts/repositories/show.js
index d07c061df..3567544e4 100644
--- a/app/assets/javascripts/repositories/show.js
+++ b/app/assets/javascripts/repositories/show.js
@@ -87,9 +87,7 @@
 
   function initImportRecordsModal() {
     $('.repository-show').on('click', '#importRecordsButton', function() {
-      $('#modal-import-records').modal('show');
-      $('#modal-import-records').find('#file').val('');
-      initParseRecordsModal();
+      window.importRepositoryModalComponent.open();
     });
 
     // Handling cancel click in #modal-import-records
diff --git a/app/javascript/packs/vue/design_system/modals.js b/app/javascript/packs/vue/design_system/modals.js
index 477dbc000..8baabddf7 100644
--- a/app/javascript/packs/vue/design_system/modals.js
+++ b/app/javascript/packs/vue/design_system/modals.js
@@ -28,19 +28,19 @@ const app = createApp({
         steps: [
           {
             id: 'step1',
-            icon: 'sn-icon sn-icon-open',
+            icon: 'sn-icon-open',
             label: 'Step 1',
             component: shallowRef(Step1)
           },
           {
             id: 'step2',
-            icon: 'sn-icon sn-icon-edit',
+            icon: 'sn-icon-edit',
             label: 'Step 2',
             component: shallowRef(Step2)
           },
           {
             id: 'step3',
-            icon: 'sn-icon sn-icon-inventory',
+            icon: 'sn-icon-inventory',
             label: 'Step 3',
             component: shallowRef(Step3)
           }
@@ -53,37 +53,37 @@ const app = createApp({
 
       // Info modal
       infoParams: {
-        componentTitle: 'Guide for updating the inventory',
+        title: 'Guide for updating the inventory',
         modalTitle: 'Update inventory',
         helpText: 'Help',
-        elements: [
+        steps: [
           {
             id: 'el1',
-            icon: 'sn-icon sn-icon-export',
+            icon: 'sn-icon-export',
             label: 'Export inventory',
             subtext: "Before making edits, we advise you to export the latest inventory information. If you're only adding new items, consider exporting empty inventory."
           },
           {
             id: 'el2',
-            icon: 'sn-icon sn-icon-edit',
+            icon: 'sn-icon-edit',
             label: 'Edit your data',
             subtext: 'Make sure to include header names in first row, followed by item data.'
           },
           {
             id: 'el3',
-            icon: 'sn-icon sn-icon-import',
+            icon: 'sn-icon-import',
             label: 'Import new or update items',
             subtext: 'Upload your data using .xlsx, .csv or .txt files.'
           },
           {
             id: 'el4',
-            icon: 'sn-icon sn-icon-tables',
+            icon: 'sn-icon-tables',
             label: 'Merge your data',
             subtext: 'Complete the process by merging the columns you want to update.'
           },
           {
             id: 'el5',
-            icon: 'sn-icon sn-icon-open',
+            icon: 'sn-icon-open',
             label: 'Learn more',
             linkTo: 'https://knowledgebase.scinote.net/en/knowledge/how-to-add-items-to-an-inventory'
           }
diff --git a/app/javascript/vue/shared/info_component.vue b/app/javascript/vue/shared/info_component.vue
index 8ff4bd3c7..771f63ff8 100644
--- a/app/javascript/vue/shared/info_component.vue
+++ b/app/javascript/vue/shared/info_component.vue
@@ -1,25 +1,25 @@
 <template>
   <div class="!w-[300px] rounded bg-sn-super-light-grey gap-4 p-6 flex flex-col h-full">
     <div id="info-component-header">
-      <h3 class="modal-title text-sn-dark-grey">{{ params.componentTitle }}</h3>
+      <h3 class="modal-title text-sn-dark-grey">{{ params.title }}</h3>
     </div>
 
-    <div class="grid grid-flow-row h-fit" v-for="(step, _index) in params.elements" :key="step.id">
-      <a v-if="step.linkTo" :href="step.linkTo" target="_blank" class="flex flex-row gap-3 w-fit text-sn-blue hover:no-underline hover:text-sn-blue-hover">
+    <div class="grid grid-flow-row h-fit" v-for="(element, _index) in params.elements" :key="element.id">
+      <a v-if="element.linkTo" :href="element.linkTo" target="_blank" class="flex flex-row gap-3 w-fit text-sn-blue hover:no-underline hover:text-sn-blue-hover">
         <button class="btn btn-secondary btn-sm icon-btn hover:!border-sn-light-grey">
-          <i :class="step.icon" class="h-fit"></i>
+          <i :class="element.icon" class="h-fit"></i>
         </button>
         <div class="flex flex-col gap-2 w-fit">
-          <div class="text-sn-blue font-bold hover:text-sn-blue-hover my-auto">{{ step.label }}</div>
+          <div class="text-sn-blue font-bold hover:text-sn-blue-hover my-auto">{{ element.label }}</div>
         </div>
       </a>
       <div v-else class="flex flex-row gap-3">
         <button class="btn btn-secondary btn-sm icon-btn hover:!border-sn-light-grey hover:cursor-auto">
-          <i :class="step.icon" class="h-fit text-sn-dark-grey size-9"></i>
+          <i :class="`sn-icon ${element.icon}`" class="h-fit text-sn-dark-grey size-9"></i>
         </button>
         <div class="flex flex-col gap-2 w-52">
-          <div class="text-sn-dark-grey font-bold">{{ step.label }}</div>
-          <div class="text-sn-dark-grey">{{ step.subtext }}</div>
+          <div class="text-sn-dark-grey font-bold">{{ element.label }}</div>
+          <div class="text-sn-dark-grey">{{ element.subtext }}</div>
         </div>
       </div>
     </div>
diff --git a/app/javascript/vue/shared/info_modal.vue b/app/javascript/vue/shared/info_modal.vue
index 40afb09e4..229f270a2 100644
--- a/app/javascript/vue/shared/info_modal.vue
+++ b/app/javascript/vue/shared/info_modal.vue
@@ -7,7 +7,7 @@
           <div id="info-part">
             <info-component
               v-if="showingInfo"
-              :params="this.params"
+              :params="this.infoParams"
             />
           </div>
           <!-- content -->
@@ -15,10 +15,10 @@
             <!-- header -->
             <div id="info-modal-header" class="flex flex-row h-fit w-full justify-between">
               <div id="title-with-help" class="flex flex-row gap-3">
-                <h3 class="modal-title text-sn-dark-grey">{{ params.modalTitle }}</h3>
+                <h3 class="modal-title text-sn-dark-grey">{{ title }}</h3>
                 <button class="btn btn-light btn-sm" @click="showingInfo = !showingInfo">
                   <i class="sn-icon sn-icon-help-s"></i>
-                  {{ params.helpText }}
+                  {{ helpText }}
                 </button>
               </div>
               <button id="close-btn" type="button" class="close my-auto" data-dismiss="modal" aria-label="Close">
@@ -43,9 +43,19 @@ import InfoComponent from './info_component.vue';
 export default {
   name: 'InfoModal',
   props: {
-    params: {
+    title: {
+      type: String, required: true
+    },
+    helpText: {
+      type: String, required: true
+    },
+    infoParams: {
       type: Object,
       required: true
+    },
+    startHidden: {
+      type: Boolean,
+      default: false
     }
   },
   mixins: [modalMixin],
diff --git a/app/javascript/vue/shared/modal_mixin.js b/app/javascript/vue/shared/modal_mixin.js
index 3461c87ea..f4f530147 100644
--- a/app/javascript/vue/shared/modal_mixin.js
+++ b/app/javascript/vue/shared/modal_mixin.js
@@ -1,6 +1,9 @@
 export default {
   mounted() {
-    $(this.$refs.modal).modal('show');
+    if (!this.startHidden) {
+      $(this.$refs.modal).modal('show');
+    }
+
     this.$refs.input?.focus();
     $(this.$refs.modal).on('hidden.bs.modal', () => {
       this.$emit('close');
@@ -13,6 +16,10 @@ export default {
     close() {
       this.$emit('close');
       $(this.$refs.modal).modal('hide');
+    },
+    open() {
+      this.$emit('open');
+      $(this.$refs.modal).modal('show');
     }
   },
 }
diff --git a/app/views/design_elements/_modals.html.erb b/app/views/design_elements/_modals.html.erb
index e87fa50c5..a7847564f 100644
--- a/app/views/design_elements/_modals.html.erb
+++ b/app/views/design_elements/_modals.html.erb
@@ -17,7 +17,7 @@
       <info-modal
         v-if="showInfo"
         @close="showInfo = false"
-        :params="infoParams"
+        :infoParams="infoParams"
       >
         <div>I am a component that gets consumed by the slot</div>
       </info-modal>
diff --git a/app/views/repositories/_toolbar_buttons.html.erb b/app/views/repositories/_toolbar_buttons.html.erb
index 79deeff36..828532ce1 100644
--- a/app/views/repositories/_toolbar_buttons.html.erb
+++ b/app/views/repositories/_toolbar_buttons.html.erb
@@ -22,7 +22,7 @@
                 class="btn btn-light editImport auto-shrink-button"
                 id="importRecordsButton" data-view-mode="active">
           <span class="sn-icon sn-icon-import"></span>
-          <span class="button-text"><%= t('repositories.index.options_dropdown.import_items') %></span>
+          <span class="button-text"><%= t('repositories.import_records.update_inventory') %></span>
         </button>
       <% end %>
 
@@ -57,7 +57,7 @@
   <div class="toolbar-middle-block">
     <div id='repositoryStateMenu' data-behaviour="vue">
       <repository-state-menu
-        view-mode="<%= view_mode %>"
+        view-mode="<%= params[:archived] %>"
         active-url="<%= repository_url(@repository) %>"
         archived-url="<%= repository_url(@repository, params: { archived: true }) %>">
       </repository-state-menu>
diff --git a/app/views/repositories/show.html.erb b/app/views/repositories/show.html.erb
index 53c02ff6f..28b8868de 100644
--- a/app/views/repositories/show.html.erb
+++ b/app/views/repositories/show.html.erb
@@ -79,9 +79,13 @@
 <%= render partial: 'repository_filters' %>
 <%= render partial: 'save_repository_filter_modal' %>
 
+<div id="importRepositoryModal" data-behaviour="vue">
+  <import-repository-modal repositoryUrl="<%= repository_path(@repository) %>" />
+</div>
 
 <%= javascript_include_tag 'vue_components_action_toolbar' %>
 <%= javascript_include_tag 'vue_repository_search' %>
+<%= javascript_include_tag 'vue_import_repository_modal' %>
 <%= javascript_include_tag 'repositories/repository_datatable' %>
 <%= javascript_include_tag "repositories/show" %>
 <%= javascript_include_tag 'inputmask' %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index a3bef43ef..53b4cd112 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2134,6 +2134,30 @@ en:
         list_row: "Row %{row}"
         list_error: "%{key}: %{val}"
     import_records:
+      update_inventory: 'Update inventory'
+      info_sidebar:
+        title: 'Guide for updating the inventory'
+        elements:
+          element0:
+            icon: 'sn-icon-export'
+            label: 'Export inventory'
+            subtext: "Before making edits, we advise you to export the latest inventory information. If you're only adding new items, consider exporting empty inventory."
+          element1:
+            icon: 'sn-icon-edit'
+            label: 'Edit your data'
+            subtext: 'Make sure to include header names in first row, followed by item data.'
+          element2:
+            icon: 'sn-icon-import'
+            label: 'Import new or update items'
+            subtext: 'Upload your data using .xlsx, .csv or .txt files.'
+          element3:
+            icon: 'sn-icon-tables'
+            label: 'Merge your data'
+            subtext: 'Complete the process by merging the columns you want to update.'
+          element4:
+            icon: 'sn-icon-open'
+            label: 'Learn more'
+            linkTo: 'https://knowledgebase.scinote.net/en/knowledge/how-to-add-items-to-an-inventory'
       import: 'Import'
       no_header_name: 'No column name'
       success_flash: "%{number_of_rows} of %{total_nr} new item(s) successfully imported."
diff --git a/config/webpack/webpack.config.js b/config/webpack/webpack.config.js
index 593146fae..49b244acf 100644
--- a/config/webpack/webpack.config.js
+++ b/config/webpack/webpack.config.js
@@ -55,6 +55,7 @@ const entryList = {
   vue_design_system_select: './app/javascript/packs/vue/design_system/select.js',
   vue_protocols_list: './app/javascript/packs/vue/protocols_list.js',
   vue_repositories_table: './app/javascript/packs/vue/repositories_table.js',
+  vue_import_repository_modal: './app/javascript/packs/vue/import_repository_modal.js',
   vue_reports_table: './app/javascript/packs/vue/reports_table.js',
   vue_open_locally_menu: './app/javascript/packs/vue/open_locally_menu.js',
   vue_scinote_edit_download: './app/javascript/packs/vue/scinote_edit_download.js',