From ab1b624eb24ecf21807a328a8c4ac6904a38e209 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 3 Feb 2021 08:27:01 +0100
Subject: [PATCH] Changed to central slider index and individual button icon

---
 .../ComponentSlider/ComponentSlider.vue          |  8 ++++----
 .../Registration/RegistrationSlider.vue          | 16 +++++++++-------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index c06fea5bc..117138f80 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="Sliders">
     <!-- <h2 class="subTitle">{{ $t('login.login') + ' XXX' }}</h2> -->
-    <slot :name="sliderData.activeSliderName" />
+    <slot :name="sliderData.sliders[sliderIndex].name" />
     <ds-flex>
       <ds-flex-item>
         <div
@@ -21,14 +21,14 @@
             filled
             :loading="false"
             :disabled="index > sliderIndex"
-            @click="sliderData.sliderSelectorCallback(slider.name)"
+            @click="sliderData.sliderSelectorCallback(index)"
           />
         </div>
       </ds-flex-item>
       <ds-flex-item>
         <base-button
           style="float: right"
-          :icon="(sliderIndex < sliderData.sliders.length - 1 && 'arrow-right') || (sliderIndex === sliderData.sliders.length - 1 && 'check')"
+          :icon="sliderData.sliders[sliderIndex].button.icon"
           type="submit"
           filled
           :loading="false"
@@ -50,7 +50,7 @@ export default {
   },
   computed: {
     sliderIndex() {
-      return this.sliderIndexByName(this.sliderData.activeSliderName)
+      return this.sliderData.sliderIndex
     },
   },
   methods: {
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index b493027a9..e99578c1b 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -77,13 +77,14 @@ export default {
           inviteCode: null,
           email: null,
         },
-        // sliderIndex: 0,
+        sliderIndex: 0,
         sliders: [
           {
             name: 'enter-invite',
             validated: false,
             button: {
               title: 'Next', // Wolle
+              icon: 'arrow-right',
               callback: this.buttonCallback,
             },
           },
@@ -92,6 +93,7 @@ export default {
             // validated: false,
             // button: {
             //   title: 'Next', // Wolle
+              // icon:           :icon="(sliderIndex < sliderData.sliders.length - 1 && 'arrow-right') || (sliderIndex === sliderData.sliders.length - 1 && 'check')"
             //   callback: this.buttonCallback,
             // },
           // },
@@ -100,11 +102,11 @@ export default {
             validated: false,
             button: {
               title: this.$t('actions.save'), // Wolle
+              icon: 'check',
               callback: this.buttonCallback,
             },
           },
         ],
-        activeSliderName: 'enter-invite',
         sliderSelectorCallback: this.sliderSelectorCallback,
         validateCallback: this.validateCallback,
       },
@@ -112,7 +114,7 @@ export default {
   },
   computed: {
     sliderIndex() {
-      return this.sliderIndexByName(this.sliderData.activeSliderName)
+      return this.sliderData.sliderIndex
     },
   },
   methods: {
@@ -128,9 +130,9 @@ export default {
       }
       this.sliderData.sliders[this.sliderIndex].validated = is
     },
-    sliderSelectorCallback(sliderName) {
-      if (this.sliderIndexByName(sliderName) < this.sliderIndex) {
-        this.sliderData.activeSliderName = sliderName
+    sliderSelectorCallback(selectedIndex) {
+      if (selectedIndex < this.sliderIndex) {
+        this.sliderData.sliderIndex = selectedIndex
       }
     },
     buttonCallback() {
@@ -138,7 +140,7 @@ export default {
         // console.log('submit data: ', this.sliderData.collectedComponentData)
       } else {
         if (this.sliderIndex < this.sliderData.sliders.length - 1) {
-          this.sliderData.activeSliderName = this.sliderData.sliders[this.sliderIndex + 1].name
+          this.sliderData.sliderIndex++
         }
       }
     },