Oferta.vue

<template>
<div>
<div class="card">
                <div class="container">
                    <br>
    <div class="row">
        <br>
        <h1 class="text-primary2">BUSCADOR DE OFERTAS TECNOLÓGICAS</h1>
        <br>
        <div class="col-md-6">
            <p>
                <span>Aquí podrás conocer los tipos de servicios, desarrollos y resultados de investigación disponibles en la UNCuyo, donde también encontrarás datos de contacto de los referentes de cada uno.
                </span>
                <br>
                <span>Podés buscar por área científico-tecnológica, por campo de aplicación, por unidad académica o por palabras claves (nombre de la oferta, unidad ejecutora, investigador, etc.)
                </span>
            </p>
        </div>

        <div class="col-md-12">

                <br>
                <div class="row">
                    <div class="col-md-4">
                        <input type="text" name="buscador" id="inputBuscador" class="form-control input-search" required="required" title="" placeholder="¿Qué estás buscando?" v-model="oferta.name">
                    </div>
                    <div class="col-md-1">
                        <button type="button"  class="btn btn-outline-primary" @click="buscar()">Buscar</button>
                    </div>

            </div>
        </div>

        <div class="col-md-12 col-centrada">
            <br>
            <br>
            <div class="row">
                <div class="col-md-4">
                    <button @click="areaCientifico()">
                        <img src="img/area-cientifi-activo.png" alt="" class="img2">
                        <img src="img/area-cientifi.png" alt="" class="desaparece img1">
                    </button>
                    <!-- <a href="#" @click="areaCientifico()">
                        <img src="img/area-cientifi-activo.png" alt="" class="img2">
                        <img src="img/area-cientifi.png" alt="" class="desaparece img1">
                    </a> -->
                </div>
                <div class="col-md-4">
                    <button @click="campoAplicacion()">
                        <img src="img/campo-aplicacion-activo.png" alt="" class="img2">
                        <img src="img/campo-aplicacion.png" alt="" class="desaparece img1">
                    </button>
                    <!-- <a href="#">
                        <img src="img/campo-aplicacion-activo.png" alt="" class="img2">
                        <img src="img/campo-aplicacion.png" alt="" class="desaparece img1">
                    </a> -->
                </div>
                <div class="col-md-4">
                    <button @click="unidadAcademica()">
                        <img src="img/unidad-academica-activo.png" alt="" class="img2">
                        <img src="img/unidad-academica.png" alt="" class="desaparece img1">
                    </button>
                    <!-- <a href="#">
                        <img src="img/unidad-academica-activo.png" alt="" class="img2">
                        <img src="img/unidad-academica.png" alt="" class="desaparece img1">
                    </a> -->
                </div>
                <br>
                <br>
                <br>
                <br>
                <br>

            </div>
        </div>
    </div>
      </div>
        <br>
        <div v-if="areaClic !== false">
            <areaCientifico></areaCientifico>
        </div>
        <div v-if="campoClic !== false">
            <campoAplicacion></campoAplicacion>
        </div>
        <div v-if="unidadClic !== false" >
            <!-- <unidadacademica></unidadacademica> -->
            <div class="container">
  <div class="container-fluid center-block">
    <div class="row">
        <div class="col-md-2">
            <button type="button" class="btn btn-outline-primary" @click="facultades()">Facultad e Institutos <br> <small>({{cantidadUnidad}}) resultados</small></button>
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-outline-primary" @click="rectorado()">Rectorados <br><small>({{cantidadRectorado}}) resultados</small></button>
        </div>
    </div>
    <br>
   </div>
   <div class="container center-block" v-if="facultadesClic">
       <div class="row">
        <div class="col-md-2">
            <button class="btn2 btn-outline-primary" @click="institutoArte()">Facultad de Arte y <br>Diseno <br><small>({{arteydiseno.length}}) resultados</small></button>
        </div>
        <div class="col-md-2">
            <button class="btn2 btn-outline-primary" @click="cienciasAgrarias()">Facultad de Cs <br>Agrarias<br><small>({{agrarias.length}}) resultados</small></button>
        </div>
        <div class="col-md-2">
            <button class="btn2 btn-outline-primary" @click="cientiasAplicadaIndustria()">Facultad de Cs <br>Aplicadas a la <br> Industria<br><small>({{aplicadasIndustria.length}}) resultados</small></button>
        </div>
        <div class="col-md-2">
            <button class="btn2 btn-primary" @click="cienciasEconomicas()">Facultad de Cs <br>Economicas <br> <small>({{economicas.length}}) resultados</small></button>
        </div>
        <div class="col-md-2">
            <button class="btn2 btn-outline-primary" @click="cienciasNaturalesExactas()">Facultad de Cs <br>Exactas y <br>Naturales <br><small>({{exactasNaturales.length}}) resultados</small></button>
        </div>
    </div>
    <br>
    <div class="container center-block">
        <div class="row">

            <div class="col-md-2">
                <button class="btn2 btn-outline-primary" @click="cienciasMedicas()">Facultad de Cs <br>Medicas<br><small>({{medicas.length}}) resultados</small></button>
            </div>
            <div class="col-md-2">
                <button class="btn2 btn-outline-primary" @click="cienciasPoliticas()">Facultad de Cs <br> Politicas y <br> Sociales<br><small>({{politicasSociales.length}}) resultados</small></button>
            </div>
            <div class="col-md-2">
                <button class="btn2 btn-outline-primary" @click="cienciasDerecho()">Facultad de <br>Derecho<br><small>({{derecho.length}}) resultados</small></button>
            </div>
            <div class="col-md-2">
                <button class="btn2 btn-outline-primary" @click="cienciasEducacion()">Facultad de <br>Educacion<br><small>({{educacion.length}}) resultados</small></button>
            </div>
            <div class="col-md-2">
                <button class="btn2 btn-outline-primary" @click="cienciasFilosofia()">Facultad de <br>Filosofia y <br>Letras<br><small>({{filosofia.length}}) resultados</small></button>
            </div>
        </div>
    </div>
    <div class="container center-block">
        <div class="row">
            <div class="col-md-4">
                <button class="btn2 btn-outline-primary" @click="cienciasIngenieria()">Facultad de <br>Ingeniria<br><small>({{ingenieria.length}}) resultados</small></button>
            </div>
            <div class="col-md-4">
                <button class="btn2 btn-outline-primary" @click="cienciasOdontologia()">Facultad de <br>Odontologia<br><small>({{odontologia.length}}) resultados</small></button>
            </div>
            <div class="col-md-4">
                <button class="btn2 btn-outline-primary" @click="cienciasInstitutoTecUniversitario()">Instituto <br>Tecnologico <br>Universitario<br><small>({{institutoTec.length}}) resultados</small></button>
            </div>
        </div>
    </div>
   </div>
   <div class="container" v-if="rectoradoClic">
       <div class="row">
        <div class="col-md-2">
            <button class="btn2 btn-outline-primary" @click="cienciasinstituoEnergia()">Instituto de Energia <br><small>({{instituoEnergia.length}}) resultados</small></button>
        </div>
        <div class="col-md-2">
            <button class="btn2 btn-outline-primary" @click="cienciasinstituoTrabProduccion()">Instituto de Trabajo y Produccion <br><small>({{instituoTrabProduccion.length}}) resultados</small></button>
        </div>
        <div class="col-md-2">
            <button class="btn2 btn-outline-primary" @click="cienciasinternationalCenterEarth()">International Center For Earth Sciences <br><small>({{internationalCenterEarth.length}}) resultados</small></button>
        </div>
    </div>
   </div>
</div>
        </div>
        </div>
       <div class="card bg-secondary2" v-if="ofertas.length >0">
            <br>
            <div class="container">
                <h1 class="text-primary2">RESULTADOS</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">Área cientificó-tecnológico</li>
                        <li class="breadcrumb-item">Ciencias Sociales</li>
                        <li class="breadcrumb-item active" aria-current="page">Ciencias Sociales</li>
                    </ol>
                </nav>
                <br>
                <div class="row" >
                    <resultados v-for="(oferta, index) in ofertas" :key="oferta.id" :oferta="oferta" :index="index"></resultados>
                </div>
            </div>
            <br>
        </div>

    </div>
</template>
<script>
import areaCientifico from "./AreaCientifico";
import campoAplicacion from "./CampoAplicacion";
/* import unidadacademica from './UnidadAcademica'; */
import Resultados from "./Resultados";
export default {
  data() {
    return {
      oferta: {
        name: ""
      },
      buscado: {},
      errors: [],
      ofertas: [],
      areaClic: false,
      campoClic: false,
      unidadClic: false,
      //Unidad Academica
      cantidadUnidad: 0,
      cantidadRectorado: 0,

      arteydiseno: [],
      agrarias: [],
      aplicadasIndustria: [],
      economicas: [],
      exactasNaturales: [],
      medicas: [],
      politicasSociales: [],
      derecho: [],
      educacion: [],
      filosofia: [],
      ingenieria: [],
      odontologia: [],
      institutoTec: [],

      instituoEnergia: [],
      instituoTrabProduccion: [],
      internationalCenterEarth: [],

      facultadesClic: false,
      rectoradoClic: false
      //Fin Unidad Academica
    };
  },
  components: {
    resultados: Resultados,
    areaCientifico: areaCientifico,
    campoAplicacion: campoAplicacion,
    // unidadacademica: unidadacademica
  },
  mounted() {
    console.log("Component mounted.");
  },
  methods: {
    buscar() {
      axios
        .get("api/ofertas", { params: { oferta: this.oferta.name } })
        .then(response => {
          this.ofertas = response.data.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    props: { oferta: "oferta" },
    areaCientifico() {
      this.resetResultados();
      if (this.areaClic) {
        this.areaClic = false;
      } else {
        this.areaClic = true;
      }
    },
    campoAplicacion() {
      this.resetResultados();
      if (this.campoClic) {
        this.campoClic = false;
      } else {
        this.campoClic = true;
      }
    },
    unidadAcademica() {
      this.resetResultados();
      if (this.unidadClic) {
        this.unidadClic = false;
      } else {
        this.unidadClic = true;
        this.llamadaUnidadAcademica();
      }
    },
    resetResultados() {
      this.ofertas = [];
      this.oferta.name = "";
      this.areaClic = false;
      this.campoClic = false;
      this.unidadClic = false;
    },
    //Metodos Unidad Academica
    llamadaUnidadAcademica() {
      this.cantidadUnidadAcademica();
      this.cantidadEncontradoRectorado();
    },
    cantidadUnidadAcademica() {
      axios
        .get("api/unidadAcademicaCantidad/" + "unidad academica")
        .then(response => {
          this.cantidadUnidad = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    cantidadEncontradoRectorado() {
      axios
        .get("api/unidadAcademicaCantidad/rectorado")
        .then(response => {
          this.cantidadRectorado = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    ofertasFacultades() {
      axios
        .get("api/unidadAcademica/arte y diseño")
        .then(response => {
          this.arteydiseno = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });

      axios
        .get("api/unidadAcademica/" + "ciencias agrarias")
        .then(response => {
          this.agrarias = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });

      axios
        .get("api/unidadAcademica/" + "ciencias economicas")
        .then(response => {
          this.economicas = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
      axios
        .get("api/unidadAcademica/" + "ciencia aplicada a la industria")
        .then(response => {
          this.aplicadasIndustria = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
      axios
        .get("api/unidadAcademica/" + "ciencias exactas y naturales")
        .then(response => {
          this.exactasNaturales = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
      axios
        .get("api/unidadAcademica/" + "odontologia")
        .then(response => {
          this.odontologia = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });

      axios
        .get("api/unidadAcademica/" + "ciencias medicas")
        .then(response => {
          this.medicas = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });

      axios
        .get("api/unidadAcademica/" + "ciencias politicas y sociales")
        .then(response => {
          this.politicasSociales = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });

      axios
        .get("api/unidadAcademica/" + "derecho")
        .then(response => {
          this.derecho = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });

      axios
        .get("api/unidadAcademica/" + "ingenieria")
        .then(response => {
          this.ingenieria = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
      axios
        .get("api/unidadAcademica/" + "filosofia y letras")
        .then(response => {
          this.filosofia = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });

      axios
        .get("api/unidadAcademica/" + "educacion")
        .then(response => {
          this.educacion = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    facultades() {
      if (this.facultadesClic) {
        this.facultadesClic = false;
      } else {
        //this.resetResultados();
        this.rectoradoClic = false;
        this.facultadesClic = true;
        this.ofertasFacultades();
      }
    },
    ofertasRectorado() {
      axios
        .get("api/rectorado/" + "instituto de energia")
        .then(response => {
          this.instituoEnergia = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });

      axios
        .get("api/rectorado/" + "instituto de trabajo y produccion")
        .then(response => {
          this.instituoTrabProduccion = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });

      axios
        .get("api/rectorado/" + "international center for earth sciences")
        .then(response => {
          this.internationalCenterEarth = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    rectorado() {
      if (this.rectoradoClic) {
        this.rectoradoClic = false;
      } else {
        //this.resetResultados();
        this.facultadesClic = false;
        this.ofertasRectorado();
        this.rectoradoClic = true;
      }
    },
    institutoArte() {
      this.ofertas = this.arteydiseno;
    },
    cienciasAgrarias (){
        this.ofertas = this.agrarias;
    },
    cientiasAplicadaIndustria () {
        this.ofertas = this.aplicadasIndustria;
    },
    cienciasEconomicas (){
        this.ofertas = this.economicas;
    },
    cienciasNaturalesExactas (){
        this.ofertas = this.exactasNaturales;
    },
    cienciasMedicas (){
        this.ofertas = this.medicas;
    },
    cienciasPoliticas (){
        this.ofertas = this.politicasSociales;
    },
    cienciasDerecho (){
        this.ofertas = this.derecho;
    },
    cienciasEducacion (){
        this.ofertas = this.educacion;
    },
    cienciasFilosofia (){
        this.ofertas = this.filosofia;
    },
    cienciasOdontologia (){
        this.ofertas = this.odontologia;
    },
    cienciasIngenieria (){
        this.ofertas = this.ingenieria;
    },
    cienciasInstitutoTecUniversitario (){
        this.ofertas = this.institutoTec;
    },
    cienciasinstituoEnergia (){
        this.ofertas = this.instituoEnergia;
    },
    cienciasinstituoTrabProduccion (){
        this.ofertas = this.instituoTrabProduccion;
    },
    cienciasinternationalCenterEarth (){
        this.ofertas = this.internationalCenterEarth;
    },
    //Fin Metodos Unidad Academica
  }
};
</script>