The name sounds suspicious but I haven’t actually used it myself: https://github.com/BrockReece/vue-kanban

I’ve built something similar in my app using Quasar components (cards mainly) and vue-smooth-dnd - https://github.com/kutlugsahin/vue-smooth-dnd. Works well but not quick to set-up.

This is something I haven’t spent enough time on, but basically figuring out how to organize and give back Quasar friendly components to the community.

Hopefully somebody else has more experience with Kanban boards for you @Ben-Hayat

For the record the solution is to use the .native modifier.

@mouseover.native="toggleSettingsPopover()"

Enjoy @rstoenescu !

Any chance you can share the related code / the steps you took to try and add it? Is there a specific error happening?

Hello,

I’m trying to find a way to remove all console.log statements from my production build.

On a previous version of quasar I had updated the webpack configuration for UglifyJsPlugin to drop console statements with drop_console: true.

What approach are folks talking with the latest version in terms of managing logging in production (i.e. dropping debug or just doing another way).

Thanks!

Ok thanks guys, sounds like my current approach is the “best” approach.

Here is the full reference for others who might be in the same boat:

<template>
  <q-page padding>
    <!-- content -->
    <q-stepper ref="stepper" v-model="currentStep">
      <q-step default title="Welcome" name="welcome">
        <h5 class="q-mt-xs q-mb-md">Welcome</h5>
      </q-step>

      <q-step title="Pizza" name="pizza">
        <pizza ref="pizza"></pizza>
      </q-step>

      <q-step title="Wings" name="wings">
        <wings ref="wings"></wings>
      </q-step>

      <q-step title="Done" name="done">
        <p>Enjoy!</p>
      </q-step>

      <!-- custom nav to deal with done -->
      <q-stepper-navigation>
        <q-btn
          flat
          @click="$refs.stepper.previous()"
          label="Back"
        />
        <q-btn
          v-if="currentStep !== 'done'"
          @click="$refs.stepper.next()"
          label="Next"
        />
        <q-btn
          v-if="currentStep === 'done'"
          @click="finish()"
          label="Done"
        />
      </q-stepper-navigation>
      <q-inner-loading :visible="inProgress" />
    </q-stepper>
  </q-page>
</template>

<script>
import Pizza from '../components/Pizza'
import Wings from '../components/Wings'

export default {
  name: 'Order',
  data () {
    return {
      currentStep: 'welcome',
      inProgress: false
    }
  },
  components: {
    Pizza,
    Wings
  },
  watch: {
    currentStep (to, from) {
      this.transition(from, to)
    }
  },
  methods: {
    transition (from, to) {
      if (from === 'pizza') {
        console.log('ajax to save the pizza toppings')
        this.inProgress = true
        this.$store.dispatch('pizza/update', pizza)
          .then(response => {
            this.inProgress = false
            this.currentStep = to
          })
      } else {
        this.currentStep = to
      }
    },
    finish () {
      console.log('ajax to submit the order')
      this.$store.dispatch('order/create', pizza)
        .then(response => {
          this.$router.push('/')
        })    
    }
  }
}
</script>

I see in previous versions of Quasar there used the be a @finish event (see http://v0-13.quasar-framework.org/components/stepper.html).

This is no longer available. Curious if others have an approach to dealing with routing (or anything) once the user clicks “Done” on the last step?

My current approach is as follows:

      <q-stepper-navigation>
        <q-btn
          flat
          @click="$refs.stepper.previous()"
          label="Back"
        />
        <q-btn
          v-if="currentStep !== 'done'"
          @click="$refs.stepper.next()"
          label="Next"
        />
        <q-btn
          v-if="currentStep === 'done'"
          @click="finish()"
          label="Done"
        />
      </q-stepper-navigation>

I ended up modifying my approach again slightly to incorporate the ability to include an avatar into the “button”. Specific details are available here: https://forum.quasar-framework.org/topic/2602/image-in-top-dropdown-menu/2

The short of it was to use a q-chip with avatar set to the image and no content – then use the clever popover approach above.

Not perfect, but I’ve done something similar but with a q-chip component. I’m actually using it the q-toolbar for my layout:

<q-chip
          v-if="isAuthenticated"
          avatar="https://api.adorable.io/avatars/285/abott@adorable.png"
          color="primary"
          @click="toggleSettingsPopover()">
          <q-popover v-model="displaySettingsMenu">
            <q-list item-separator link>
              ....
            </q-list>
          </q-popover>
        </q-chip>

with:

methods: {
    toggleSettingsPopover: function () {
      this.displaySettingsMenu = !this.displaySettingsMenu
    }
}

Ideally there would be an option to add an avatar / image to a button or at least move the avatar on the chip to the RHS (like icon-right) – then I could do {{user.name}} [avatar].

For the record this strategy works perfectly (using 0.17.10). I had a similar layout need due to having a large search input directly after the title:

[Logo | Title | Search | Profile]

Code looks like:

      <q-toolbar>
        <q-btn @click="$router.push('/')" flat round dense icon="local_pizza" />
        <q-toolbar-title shrink class="q-mr-md">
          Pizza
          <span slot="subtitle">and Wings!</span>
        </q-toolbar-title>

        <q-search v-model="terms" inverted color="none" class="search">
          <q-autocomplete @search="search" @selected="selected" />
        </q-search>

        <div class="col"></div> <!-- eat up all the free space -->
        <q-btn
          v-if="isAuthenticated"
          flat
          round
          dense
          icon="person"
          @click="toggleSettingsPopover()"
          >
         ....
        </q-btn>
      </q-toolbar>