Added slider selector dots

webapp/components/ComponentSlider/ComponentSlider.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="Slider">
+  <div class="Sliders">
     <!-- <h2 class="subTitle">{{ $t('login.login') + ' XXX' }}</h2> -->
     <slot :name="sliderData.activeSliderName" />
     <ds-flex>
@@ -8,6 +8,9 @@
           v-for="componentName in sliderData.sliders"
           :key="componentName"
           class="selection-button"
+          :class="[
+            'Sliders__component-selection',
+          ]"
         >
           <base-button
             style="float: left"
@@ -16,8 +19,8 @@
             type="submit"
             filled
             :loading="false"
-            :disabled="false"
-            @click="sliderData.button.callback"
+            :disabled="sliderIndexByName(componentName) >= sliderIndex"
+            @click="sliderData.sliderSelectorCallback(componentName)"
           />
         </div>
       </ds-flex-item>
@@ -44,6 +47,16 @@ export default {
   props: {
     sliderData: { type: Object, required: true },
   },
+  computed: {
+    sliderIndex() {
+      return this.sliderIndexByName(this.sliderData.activeSliderName)
+    },
+  },
+  methods: {
+    sliderIndexByName(name) {
+      return this.sliderData.sliders.findIndex((sliderName) => sliderName === name)
+    },
+  },
 }
 </script>
 
@@ -51,4 +64,36 @@ export default {
 // Wolle .pointer {
 //    cursor: pointer;
 //  }
+
+.Sliders {
+  // Wolle position: relative;
+  // background-color: #fff;
+  // height: 100%;
+  // display: flex;
+  // margin: 0;
+  // padding: 0;
+  // list-style: none;
+
+  &__component-selection {
+    padding-right: 10px;
+
+    // text-align: center;
+    // height: 100%;
+    // flex-grow: 1;
+
+    // &:hover {
+    //   border-bottom: 2px solid #c9c6ce;
+    // }
+
+    // &.--active {
+    //   border-bottom: 2px solid #17b53f;
+    // }
+    // &.--disabled {
+    //   opacity: $opacity-disabled;
+    //   &:hover {
+    //     border-bottom: none;
+    //   }
+    // }
+  }
+}
 </style>

webapp/components/Registration/RegistrationSlider.vue

@@ -55,16 +55,14 @@ export default {
     return {
       links,
       metadata,
-      sliders: ['enter-invite', 'create-user-account'],
       sliderData: {
         collectedComponentData: {},
         sliders: ['enter-invite', 'create-user-account'],
         activeSliderName: 'enter-invite',
+        sliderSelectorCallback: this.sliderSelectorCallback,
         validateCallback: this.validateCallback,
-        // submitCallback: this.submitCallback,
         button: {
           title: 'Next', // Wolle
-          // title: 'Submit', // Wolle
           disabled: true,
           callback: this.buttonCallback,
         },
@@ -73,10 +71,13 @@ export default {
   },
   computed: {
     sliderIndex() {
-      return this.sliderData.sliders.findIndex((name) => name === this.sliderData.activeSliderName)
+      return this.sliderIndexByName(this.sliderData.activeSliderName)
     },
   },
   methods: {
+    sliderIndexByName(name) {
+      return this.sliderData.sliders.findIndex((sliderName) => sliderName === name)
+    },
     validateCallback(is, data = null) {
       if (is) {
         this.sliderData.collectedComponentData = {
@@ -86,9 +87,11 @@ export default {
       }
       this.sliderData.button.disabled = !is
     },
-    // submitCallback() {
-    //   // Wolle console.log('submit !!!') // Wolle
-    // },
+    sliderSelectorCallback(sliderName) {
+      if (this.sliderIndexByName(sliderName) < this.sliderIndex) {
+        this.sliderData.activeSliderName = sliderName
+      }
+    },
     buttonCallback() {
       if (this.sliderIndex === this.sliderData.sliders.length - 1) {
         // console.log('submit data: ', this.sliderData.collectedComponentData)