ayanova/src/views/adm-launch.vue

@@ -4,7 +4,63 @@
       <v-form ref="form">
         <v-row>
           <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
-          <h1>Launch</h1>
+          <v-col>
+            <v-stepper v-model="currentStep" vertical>
+              <v-stepper-step :complete="currentStep > 1" step="1">
+                Select an app
+                <small>Summarize if needed</small>
+              </v-stepper-step>
+
+              <v-stepper-content step="1">
+                <v-card
+                  color="grey lighten-1"
+                  class="mb-12"
+                  height="200px"
+                ></v-card>
+                <v-btn color="primary" @click="currentStep = 2">Continue</v-btn>
+                <v-btn text>Cancel</v-btn>
+              </v-stepper-content>
+
+              <v-stepper-step :complete="currentStep > 2" step="2"
+                >Configure analytics for this app</v-stepper-step
+              >
+
+              <v-stepper-content step="2">
+                <v-card
+                  color="grey lighten-1"
+                  class="mb-12"
+                  height="200px"
+                ></v-card>
+                <v-btn color="primary" @click="currentStep = 3">Continue</v-btn>
+                <v-btn text>Cancel</v-btn>
+              </v-stepper-content>
+
+              <v-stepper-step :complete="currentStep > 3" step="3"
+                >Select an ad format and name ad unit</v-stepper-step
+              >
+
+              <v-stepper-content step="3">
+                <v-card
+                  color="grey lighten-1"
+                  class="mb-12"
+                  height="200px"
+                ></v-card>
+                <v-btn color="primary" @click="currentStep = 4">Continue</v-btn>
+                <v-btn text>Cancel</v-btn>
+              </v-stepper-content>
+
+              <v-stepper-step step="4">View setup instructions</v-stepper-step>
+              <v-stepper-content step="4">
+                <v-card
+                  color="grey lighten-1"
+                  class="mb-12"
+                  height="200px"
+                ></v-card>
+                <v-btn color="primary" @click="currentStep = 1">Continue</v-btn>
+                <v-btn text>Cancel</v-btn>
+              </v-stepper-content>
+            </v-stepper>
+          </v-col>
         </v-row>
       </v-form>
     </v-col>
@@ -60,6 +116,7 @@ export default {
       selectLists: {
         translations: []
       },
+      currentStep: 1,
       obj: {},
       formState: {
         ready: false,
@@ -100,6 +157,9 @@ export default {
     }
   },
   methods: {
+    completeStep() {
+      return 1;
+    },
     translation() {
       return window.$gz.translation;
     },