From 97c155f626bc4a26f935200ccfce8114df6f39e0 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Fri, 19 Jan 2024 20:33:34 +0100
Subject: [PATCH] Add wizard component [SCI-10035]

---
 .../packs/vue/design_system/modals.js         | 56 ++++++++++++++
 .../vue/design_system/wizard_steps/step_1.vue | 37 ++++++++++
 .../vue/design_system/wizard_steps/step_2.vue | 41 +++++++++++
 .../vue/design_system/wizard_steps/step_3.vue | 42 +++++++++++
 app/javascript/vue/shared/wizard_modal.vue    | 73 +++++++++++++++++++
 app/views/design_elements/_modals.html.erb    | 16 ++++
 app/views/design_elements/index.html.erb      |  1 +
 config/webpack/webpack.config.js              |  3 +-
 8 files changed, 268 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/packs/vue/design_system/modals.js
 create mode 100644 app/javascript/packs/vue/design_system/wizard_steps/step_1.vue
 create mode 100644 app/javascript/packs/vue/design_system/wizard_steps/step_2.vue
 create mode 100644 app/javascript/packs/vue/design_system/wizard_steps/step_3.vue
 create mode 100644 app/javascript/vue/shared/wizard_modal.vue
 create mode 100644 app/views/design_elements/_modals.html.erb

diff --git a/app/javascript/packs/vue/design_system/modals.js b/app/javascript/packs/vue/design_system/modals.js
new file mode 100644
index 000000000..66f138567
--- /dev/null
+++ b/app/javascript/packs/vue/design_system/modals.js
@@ -0,0 +1,56 @@
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
+import { shallowRef } from 'vue';
+
+import WizardModal from '../../../vue/shared/wizard_modal.vue';
+import Step1 from './wizard_steps/step_1.vue';
+import Step2 from './wizard_steps/step_2.vue';
+import Step3 from './wizard_steps/step_3.vue';
+import { mountWithTurbolinks } from '../helpers/turbolinks.js';
+
+const app = createApp({
+  components: {
+    Step1,
+    Step2,
+    Step3
+  },
+  methods: {
+    fireAlert() {
+      alert('Fired!');
+    }
+  },
+  data() {
+    return {
+      wizardConfig: {
+        title: 'Wizard steps',
+        subtitle: 'Wizard subtitle description',
+        steps: [
+          {
+            id: 'step1',
+            icon: 'sn-icon sn-icon-open',
+            label: 'Step 1',
+            component: shallowRef(Step1)
+          },
+          {
+            id: 'step2',
+            icon: 'sn-icon sn-icon-edit',
+            label: 'Step 2',
+            component: shallowRef(Step2)
+          },
+          {
+            id: 'step3',
+            icon: 'sn-icon sn-icon-inventory',
+            label: 'Step 3',
+            component: shallowRef(Step3)
+          }
+        ]
+      },
+      wizardParams: {
+        text: 'Some text'
+      },
+      showWizard: false
+    };
+  }
+});
+app.component('WizardModal', WizardModal);
+app.config.globalProperties.i18n = window.I18n;
+mountWithTurbolinks(app, '#modals');
diff --git a/app/javascript/packs/vue/design_system/wizard_steps/step_1.vue b/app/javascript/packs/vue/design_system/wizard_steps/step_1.vue
new file mode 100644
index 000000000..bd7f8851c
--- /dev/null
+++ b/app/javascript/packs/vue/design_system/wizard_steps/step_1.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <i class="sn-icon sn-icon-close"></i>
+      </button>
+      <h4 class="modal-title truncate flex items-center gap-4">
+        Step 1 actions
+      </h4>
+  </div>
+  <div class="modal-body grow">
+    You can add any custom html here or render params like this:
+
+    {{ params }}
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-light" @click="$emit('close')">Cancel</button>
+    <button class="btn btn-primary" @click="$emit('next')">Next</button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  emits: ['close', 'next', 'back'],
+  name: 'Step1',
+  props: {
+    params: {
+      type: Object,
+      required: true
+    },
+    wizardComponent: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
diff --git a/app/javascript/packs/vue/design_system/wizard_steps/step_2.vue b/app/javascript/packs/vue/design_system/wizard_steps/step_2.vue
new file mode 100644
index 000000000..590836b8c
--- /dev/null
+++ b/app/javascript/packs/vue/design_system/wizard_steps/step_2.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <i class="sn-icon sn-icon-close"></i>
+      </button>
+      <h4 class="modal-title truncate flex items-center gap-4">
+        Step 2 actions
+      </h4>
+  </div>
+  <div class="modal-body grow">
+    All steps have access to shared params
+
+    <input
+      type="text"
+      class="form-control"
+      placeholder="Type something"
+      v-model="params.text"/>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-light" @click="$emit('back')">Back</button>
+    <button class="btn btn-primary" @click="$emit('next')">Next</button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  emits: ['back', 'next', 'close'],
+  name: 'Step2',
+  props: {
+    params: {
+      type: Object,
+      required: true
+    },
+    wizardComponent: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
diff --git a/app/javascript/packs/vue/design_system/wizard_steps/step_3.vue b/app/javascript/packs/vue/design_system/wizard_steps/step_3.vue
new file mode 100644
index 000000000..c8571e599
--- /dev/null
+++ b/app/javascript/packs/vue/design_system/wizard_steps/step_3.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <i class="sn-icon sn-icon-close"></i>
+      </button>
+      <h4 class="modal-title truncate flex items-center gap-4">
+        Step 3 actions
+      </h4>
+  </div>
+  <div class="modal-body grow">
+    Our params - {{ params }}<br>
+
+    If you want emit action use wizardComponent
+    <br>
+    <br>
+    <br>
+
+    <button class="btn btn-danger" @click="wizardComponent.$emit('alert')">Launch alert</button>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-light" @click="$emit('back')">Back</button>
+    <button class="btn btn-primary" @click="$emit('close')">Apply</button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  emits: ['back', 'close', 'alert', 'next'],
+  name: 'Step3',
+  props: {
+    params: {
+      type: Object,
+      required: true
+    },
+    wizardComponent: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
diff --git a/app/javascript/vue/shared/wizard_modal.vue b/app/javascript/vue/shared/wizard_modal.vue
new file mode 100644
index 000000000..cdc2b4ee3
--- /dev/null
+++ b/app/javascript/vue/shared/wizard_modal.vue
@@ -0,0 +1,73 @@
+<template>
+  <div ref="modal" class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog !w-[900px]" role="document">
+      <div class="modal-content !p-0 grid grid-cols-3">
+        <div class="bg-sn-super-light-grey p-6 mb-1.5">
+          <h3 class="mb-1.5">{{ config.title }}</h3>
+          <div v-if="config.subtitle" class="text-sn-dark-grey">
+            {{ config.subtitle }}
+          </div>
+          <div class="flex flex-col mt-4">
+            <div v-for="(step, index) in config.steps" :key="step.id">
+              <div v-if="index > 0"
+                class="ml-0.5 left-4 relative h-8 w-0 border border-r-0 border-solid"
+                :class="{
+                    '!border-sn-dark-grey': index <= activeStep,
+                    '!border-sn-sleepy-grey': index > activeStep
+                  }"
+              ></div>
+              <div class="flex items-center gap-3">
+                <div class="rounded bg-white border border-sn-sleepy-grey p-1.5">
+                  <i :class="step.icon"></i>
+                </div>
+                <span
+                  class="font-bold text-xs"
+                  :class="{
+                    'text-sn-dark-grey': index <= activeStep,
+                    'text-sn-grey': index > activeStep
+                  }"
+                >
+                  {{ step.label }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-span-2 p-6 flex flex-col">
+          <component
+            :is="config.steps[activeStep].component"
+            :params="params"
+            :wizardComponent="this"
+            @close="close"
+            @back="activeStep -= 1"
+            @next="activeStep += 1"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import modalMixin from './modal_mixin';
+
+export default {
+  name: 'WizardModal',
+  props: {
+    params: {
+      type: Object,
+      required: true
+    },
+    config: {
+      type: Object,
+      required: true
+    }
+  },
+  mixins: [modalMixin],
+  data() {
+    return {
+      activeStep: 0
+    };
+  }
+};
+</script>
diff --git a/app/views/design_elements/_modals.html.erb b/app/views/design_elements/_modals.html.erb
new file mode 100644
index 000000000..a241d91b2
--- /dev/null
+++ b/app/views/design_elements/_modals.html.erb
@@ -0,0 +1,16 @@
+<div>
+  <h1>Modals</h1>
+  <div id="modals" class="flex items-center gap-4 flex-wrap mt-6">
+    <button @click="showWizard = true" class="btn btn-primary">Show Wizard Modal</button>
+    <wizard-modal
+      v-if="showWizard"
+      @close="showWizard = false"
+      @alert="fireAlert"
+      :params="wizardParams"
+      :config="wizardConfig"
+    />
+  </div>
+</div>
+
+
+<%= javascript_include_tag 'vue_design_system_modals' %>
diff --git a/app/views/design_elements/index.html.erb b/app/views/design_elements/index.html.erb
index e69de29bb..b9138c5ca 100644
--- a/app/views/design_elements/index.html.erb
+++ b/app/views/design_elements/index.html.erb
@@ -0,0 +1 @@
+<%= render partial: 'modals' %>
diff --git a/config/webpack/webpack.config.js b/config/webpack/webpack.config.js
index 3d286cedf..2241edbf6 100644
--- a/config/webpack/webpack.config.js
+++ b/config/webpack/webpack.config.js
@@ -49,7 +49,8 @@ const entryList = {
   vue_components_manage_stock_value_modal: './app/javascript/packs/vue/manage_stock_value_modal.js',
   vue_legacy_datetime_picker: './app/javascript/packs/vue/legacy/datetime_picker.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'
+  vue_scinote_edit_download: './app/javascript/packs/vue/scinote_edit_download.js',
+  vue_design_system_modals: './app/javascript/packs/vue/design_system/modals.js'
 }
 
 // Engine pack loading based on https://github.com/rails/webpacker/issues/348#issuecomment-635480949