barra progreso

components/alumno/BarraProgreso.vue

@@ -1,95 +1,96 @@
 <template>
-  <div class="mt-6 mb-5">
-    <b-steps
-      type="is-info"
-      size="is-large"
-      :has-navigation="false"
-      v-model="activeStep"
-    >
-      <b-step-item
-        label="Pre Registro"
-        icon="account-plus"
-        :visible="activeStep < 6"
-        :clickable="false"
-      />
+  <b-steps
+    class="mt-6 mb-5"
+    type="is-info"
+    size="is-large"
+    :has-navigation="false"
+    v-model="idStatus"
+  >
+    <b-step-item
+      label="Pre Registro"
+      icon="account-plus"
+      :visible="idStatus < 6"
+      :clickable="false"
+    />
 
-      <b-step-item
-        label="Pre Registro Validado"
-        icon="account-clock"
-        :visible="activeStep < 6"
-        :clickable="false"
-      />
+    <b-step-item
+      label="Pre Registro Validado"
+      icon="account-clock"
+      :visible="idStatus < 6"
+      :clickable="false"
+    />
 
-      <b-step-item
-        label="Registro"
-        icon="account"
-        :visible="activeStep < 6"
-        :clickable="false"
-      />
+    <b-step-item
+      label="Registro"
+      icon="account"
+      :visible="idStatus < 6"
+      :clickable="false"
+    />
 
-      <b-step-item
-        label="Pre Termino"
-        icon="account-details"
-        :visible="activeStep < 6"
-        :clickable="false"
-      />
+    <b-step-item
+      label="Pre Termino"
+      icon="account-details"
+      :visible="idStatus < 6"
+      :clickable="false"
+    />
 
-      <b-step-item
-        label="Termino"
-        icon="account-clock"
-        :visible="activeStep < 6"
-        :clickable="false"
-      />
+    <b-step-item
+      label="Termino"
+      icon="account-clock"
+      :visible="idStatus < 6"
+      :clickable="false"
+    />
 
-      <b-step-item
-        label="Liberacion"
-        icon="account-check"
-        :visible="activeStep < 6"
-        :clickable="false"
-      />
+    <b-step-item
+      label="Liberacion"
+      icon="account-check"
+      :visible="idStatus < 6"
+      :clickable="false"
+    />
 
-      <b-step-item
-        class="bad"
-        type="is-danger"
-        label="Carta Aceptación Rechazada"
-        icon="file"
-        :clickable="false"
-        :visible="activeStep == 6"
-      />
+    <b-step-item
+      class="bad"
+      type="is-danger"
+      label="Carta Aceptación Rechazada"
+      icon="file"
+      :clickable="false"
+      :visible="idStatus === 6"
+    />
 
-      <b-step-item
-        class="bad"
-        type="is-danger "
-        label="Carta Termino Rechazada"
-        icon="file"
-        :clickable="false"
-        :visible="activeStep == 7"
-      />
+    <b-step-item
+      class="bad"
+      type="is-danger "
+      label="Carta Termino Rechazada"
+      icon="file"
+      :clickable="false"
+      :visible="idStatus === 7"
+    />
 
-      <b-step-item
-        class="bad"
-        type="is-danger"
-        label="Informe Global Rechazado"
-        icon="file"
-        :clickable="false"
-        :visible="activeStep == 8"
-      />
+    <b-step-item
+      class="bad"
+      type="is-danger"
+      label="Informe Global Rechazado"
+      icon="file"
+      :clickable="false"
+      :visible="idStatus === 8"
+    />
 
-      <b-step-item
-        class="bad"
-        type="is-danger bad"
-        label="Cancelado"
-        icon="account-cancel"
-        :clickable="false"
-        :visible="activeStep == 9"
-      />
-    </b-steps>
-  </div>
+    <b-step-item
+      class="bad"
+      type="is-danger bad"
+      label="Cancelado"
+      icon="account-cancel"
+      :clickable="false"
+      :visible="idStatus === 9"
+    />
+  </b-steps>
 </template>
 
 <script>
 export default {
-  props: ['activeStep'],
+  props: {
+    idStatus: { type: Number, required: true },
+  },
 }
 </script>
 

pages/alumno/index.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="container px-2 pb-6">
-    <p>{{ servicio }}</p>
-
-    <BarraProgreso :activeStep="activeStep" />
+    <BarraProgreso
+      v-if="servicio.Status.idStatus"
+      :idStatus="servicio.Status.idStatus - 1"
+    />
 
     <Mensajes :Status="servicio.Status" />
 
     <InformacionServicio :servicio="servicio" />
 
+    <p>{{ servicio }}</p>
     <!-- <PreRegistroValidado :idServicio="servicio.idServicio" v-if="status == 2" />
 
     <PreTermino
@@ -32,8 +34,8 @@ import PreTermino from '@/components/alumno/preTermino'
 export default {
   components: {
     BarraProgreso,
-    Mensajes,
     InformacionServicio,
+    Mensajes,
     PreRegistroValidado,
     PreTermino,
   },
@@ -41,7 +43,6 @@ export default {
     return {
       isLoading: false,
       activeStep: '',
-      status: '',
       alumno: {},
       servicio: {
         Carrera: {},
@@ -72,7 +73,6 @@ export default {
             },
           }
           this.activeStep = this.servicio.Status.idStatus - 1
-          this.status = this.servicio.Status.idStatus
           localStorage.setItem(
             'idCuestionarioAlumno',
             res.data.idCuestionarioAlumno