pedi2/resources/js/components/NavBar.vue

<template>
    <nav class="navbar is-danger is-fixed-top" role="navigation" aria-label="main navigation">
      
      <div class="navbar-brand">
        <a class="navbar-item" href="https://mps.org.uy">
          <img src="/assets/logoMPS.png" height="28">
        </a>
        <!-- Styles nombre del barrio-->
        <p class="navbar-item">
          <slot name="gdc"></slot>
        </p>
        <p class="navbar-item">
          <slot name="subpedido"></slot>
        </p>
        
        <a role="button" class="navbar-burger" :class="{'is-active':isActive}" aria-label="menu" aria-expanded="false" data-target="nav-bar" @click="toggleState">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div id="nav-bar" class="navbar-menu" :class="{'is-active':isActive}">
        <div class="navbar-start"></div>
        <div class="navbar-end">
            <div class="control mt-auto mb-auto has-icons-left margin-in-burger">
              <input class="input is-small" type="text" placeholder="Harina" :v-model="searchString">
              <span class="icon is-small is-left">
                <i class="fas fa-search"></i>
              </span>
            </div>
            <a class="navbar-item" href="#chismosa" @click.capture="toggleChismosa">
                <span class="icon is-small mr-1" id="chismosa">
                  <img class="invert-in-burger" src="/assets/chismosa.png">
                </span>
                <span v-text="'$' + (subpedido == null ? 0 : subpedido.total)"></span>
            </a>
            <a class="navbar-item"
                onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                Cerrar sesión
            </a>
            <slot name="logout-form"></slot>
        </div>
      </div>
    </nav>
</template>

<script>
    export default {
        data() {
          return {
            isActive: false,
            subpedido: null,
            searchString: ""
          }
        },
        methods: {
          toggleState() {
            this.isActive = !this.isActive
          },
          actualizarSubpedido(){
            axios.get("/api/subpedidos/" + this.subpedido.id)
              .then(response => {
                this.subpedido = response.data.data
            });
          },
          toggleChismosa(){
            if (this.isActive) this.toggleState()
            Event.$emit("toggle-chismosa")
          },
          buscar() {
            Event.$emit("buscar-productos",this.searchString)
          }
        }, 
        mounted() {
          axios.get("/subpedidos/obtener_sesion").then(response => {
            this.subpedido = response.data.subpedido
            this.actualizarSubpedido()
          });
          //Emitir un evento subpedido-actualizado al agregar o eliminar un producto del subpedido para que el total de la chismosa se muestre correctamente
          Event.$on('sync-subpedido', (cantidad, id) => {
              axios.post("/api/subpedidos/"+this.subpedido.id+"/sync", {
                cantidad: cantidad,
                producto_id: id
              }).then((response) => {
                this.subpedido = response.data.data;
                Event.$emit('sync-chismosa',this.subpedido);
                window.bulmaToast.toast({
                  message: 'Pedido actualizado exitosamente',
                  duration: 1000,
                  type: 'is-danger',
                  position: 'bottom-center',
                  animate: { in: 'fadeIn', out: 'fadeOut' }
                });
              });
          });
          Event.$on('aprobacion-subpedido', (subpedidoId, aprb) => {
            axios.post("/api/admin/subpedidos/" + subpedidoId + "/aprobacion", {
              aprobacion: aprb
            }).then((response) => {
              Event.$emit('sync-aprobacion', response.data.data);
              window.bulmaToast.toast({
                message: 'Pedido ' + (aprb ? 'aprobado' : 'desaprobado') + ' exitosamente',
                duration: 1000,
                type: 'is-danger',
                position: 'bottom-center',
                animate: { in: 'fadeIn', out: 'fadeOut' }
              })
            })
          })
      }
    };
</script>

<style>

p.navbar-item:empty {
  display: none;
}
@media (max-width: 1023px) {
  .invert-in-burger {
    filter: invert(.5);
  }
  .margin-in-burger {
    margin-left: .75rem;
    margin-right: .75rem;
  }
}
</style>