Would someone have a simpler or easier way to do that?

@coude
I’m answering to myself. What I did works, but it seems too much for something so simple…

I put my code here for comments, and in case it might be useful for someone.

Here is the “html” part :

                  <q-card-section>
                        <q-toggle
                          v-model="showDateFin"
                        />
                      </q-card-section>
                      <q-card-section>
                        <div class="row justify-center q-px-md">
                          <keep-alive>
                            <q-date 
                              v-if="showDateFin"
                              key="dateFin"
                              v-model="dateFin" 
                              mask="DD/MM/YYYY HH:mm" 

                              :options="getOptionsDateFin" />
                          </keep-alive>
                          <q-time 
                            key="heureFin"
                            v-model="dateFin" 
                            mask="DD/MM/YYYY HH:mm" 
                            format24h

                            :options="getOptionsHeureFin" />
                        </div>
                      </q-card-section>

and the javascript part

import { parse, format , toDate, isAfter, isSameDay, setHours, setMinutes, getMinutes } from 'date-fns';
// (...)
    getOptionsDateFin (val) {
      let dateFin = parse(val, 'yyyy/MM/dd', new Date());
      let dateStart = toDate(parseInt(this.timestampStart));
      if(isSameDay(dateFin, dateStart)) {
        console.log(val, "same day");
        return true;
      }
      else if(isAfter(dateFin, dateStart)) {
        console.log(val, "after");
        return true;
      }
      console.log(val, "before");
      return false;
    },
    getOptionsHeureFin (hr, min) {
      console.log(hr, min);
      let dateStart = toDate(parseInt(this.timestampStart));
      if(!min) {
        min = getMinutes(dateStart) + 1;
        if(min === 60) {
          min = 0;
        }
      }
      let dateFin = parse(this.dateFin, 'dd/MM/yyyy HH:mm', new Date());
      let testDateFin = setHours( setMinutes(dateFin,min), hr);
      console.log(dateFin, dateStart, testDateFin);
      if(isSameDay(dateFin, dateStart)) {
        if( isAfter(testDateFin, dateStart) ) {
          return true;
        }
        return false;
      }
      else if(isAfter(dateFin, dateStart)) {
        return true;
      }
      return false;
    },

It might get simpler, but it works perfectly .

Hi,

It might have been asked somewhere, but I did not find it (I would think it might be a common use case).

I have a Qdate and a QTime, together using the same model, more or less like in the docs.

      <q-date v-model="model" mask="YYYY/MM/DD HH:mm" />
      <q-time v-model="model" mask="YYYY/MM/DD HH:mm"  />

I would like to use options in order to forbid date, and hours, before a given date-time (name startDate). That’s ok/easy for QDate, but how to do that with QTime?
In details: if the calendar date is after the startDate, that’s easy because there is no constraints for QTime ; but if both calendar date are the same (which should happen 99,9% of the time in my case), how can I ask QTime to forbid choices before the time-part of startDate ? Would you have any insight/ideas to give me?

Thank you very much for your help!

@s-molinari Thank you for your clear answer!

@s-molinari , @coude @Ben-Hayat and @dobbel have the same question, do you have any insight about it?
Thanks!

I looked for this question/info on the forum and github, but did not find it, so sorry if if has already been said or answered somewhere

How long do you plan to keep support/update the quasar v1? Do you plan to add new features in v1 too? For how long? Or will you only fix bugs and things like that?

Thanks!

@Hawkeye64 and @s-molinari Thank you for your answers!

@s-molinari Hi, any updates about the results?

Hi,

@currycode I would say that using v-model of the drawer and click event for elements inside it, it should do the work. You have some closely related examples in the docs

 <q-drawer
        v-model="showDrawer"
      >
        <q-scroll-area class="fit">
          <q-list>
            <q-item clickable v-ripple @click="showDrawer = !showDrawer">
              <q-item-section avatar>
                <q-icon name="inbox" />
              </q-item-section>
           </q-item>
(...)
        </q-list>
    </q-scroll-area>
 </q-drawer>

Hi,

This is a start, probably far from perfect, but enough to use vue-tel-input with quasar without too much pain. It is fast and easy solution, which works ok.

<template>
  <q-field
    label="Your phone number"
    stack-label
    :error="isError">
    <vue-tel-input
      :wrapper-classes="['no-border','no-box-shadow','no-ouline','wrapper-vue-tel-input-in-qfield']"
      input-classes="input-vue-tel-input-in-qfield"
      @input="handleInput"
    >
    </vue-tel-input>
  </q-field>
</template>

<style>
/* note: the height 98% is to avoid the inner input to hide the bottom border of q-field */
.input-vue-tel-input-in-qfield {
  height:98%;
  margin-bottom: auto;
}

/* note: I use color dark for my text, I am forcing it because otherwise it is the same color as q-field - so here primary color or negative color when error - */
.wrapper-vue-tel-input-in-qfield li.vti__dropdown-item {
  color: var(--q-color-dark);
}
</style>

<script>
import { VueTelInput } from 'vue-tel-input';

export default {
  name: 'InputPhone',
  props: {
    //
  },
  components: {
    VueTelInput,
  },
  data() {
    return {
      isError: false,
    }
  },
  methods: {
    handleInput (val, objVal) {
      console.log(val, objVal);
      this.isError = !objVal.isValid;
    }
  },
}
</script>

I would use the reveal event (see docs )

In template:

<q-header reveal elevated class=“bg-pink-10 q-pa-xs text-white animate” height-hint=“98” 
@reveal="handleReveal"
:class="isRevealed ? 'revealed' : 'not-revealed'"
>
...
</q-header>

in script:

handleReveal(isRevealed) {
  this.isRevealed = isRevealed;
//do something else if you want
}

and in style you can add css-transition

.revealed {
  background-color:rgba(255,255,255,0.94);
  transition: background-color 0.25s ease-in-out;
}

.not-revealed {
  background-color:rgba(255,255,255,0.01);
  transition: background-color 0.25s ease-in;
}

This is a start, hope it might help.

Hi,

I am planning to use vue-tel-input ( here ) in my quasar app (made using vue-cli). Do anyone has some experience with it?
More precisely, I would like to know if we may manage to get the quasar/material look using this component (if I wrap it inside a QField, would it be enough?). If you have some advices, I would be glad to hear it ;).

I’m looking forward to see the results!

@metalsadman I just tried it, it does not change anything.
I added getters, it works better.

One issue I have, it’s that I am not able to lazy-register my stores. I’ve tried many many different things and I am getting hydration issue (likely due to data difference between front and ssr) and vuex namespace duplicates. So, for now, I am registering my vuex modules/stores globally in the index, it is not optimal but at least it is working!

@beets
Thank you for your answer. Of course I’ve tried this.home = this.$store.state.cms.all; (That’s why I have those console.log, because I tried to find if it was hidden somewhere, and it was!).

And, that’s what I thought about during sleep : I did not make a getter.

Hello,

I am using Quasar for ssr. I am fetching data from strapi cms (which is on the same server as quasar).

I am using prefetch and vuex according to what I understood from the docs.

I am seeing the data I want to see on my page BUT, as you will see below, I have to dig to " this.$store._vm._data.$$state.cms.all " to get them. Why? I do not know what I did wrong or what might be wrong. If you need any other info to answer, just ask, I would like to undestand what is wrong or what I misundestood (I am new to vuex, not too new to quasar/vue etc though) :).

Thank you!

  preFetch ({ store, currentRoute, previousRoute, redirect, ssrContext, urlPath, publicPath }) {
    return store.dispatch('cms/getDataFromServer', {url:'http://localhost:1337/home'})
  },
(...)
  mounted: function () {
    this.$store.registerModule('cms', cms, { preserveState: true });
    console.log(this.$store, this.$store._vm._data.$$state.cms.all);
    this.home = this.$store._vm._data.$$state.cms.all; // WHY??
  },

the index store is as follow:

import Vue from 'vue';
import Vuex from 'vuex';

import cms from './cms'

Vue.use(Vuex)

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      cms
    },

    // enable strict mode (adds overhead!)
    // for dev mode and --debug builds only
    //strict: process.env.DEBUGGING
  })

  return Store
}

action.js

import { axiosInstance } from '../../boot/axios.js';

async function getDataFromServer ({ commit }, param) {
  return axiosInstance.get(param.url).then(({ data }) => {
    commit('create', data)
  })
}

export { getDataFromServer };

Hi,

In the docs for QTable, it is written that “When your database contains a big number of rows for a Table… [well, you should use @request and server calls]”. My question is: roughly, how many rows is “a big number of rows”? 100s? 1000s? more?
Does it make sense to trigger server calls only if the number of rows is big enough? For instance, for someone starting to use my app and, thus, who does not have a lot of data to display, I may save some server calls.

Thank you if you may answer .

@btree thanks for the tip, was very useful to me (I made a custom autocomplete using a text input (q-input) and a dropdown menu (q-menu) ).

I do not know what was changed, but since I updated to the 1.9.1 version, the circles get shown even in development mode. Thanks.

Ahhh, I just tried to build (“npm run build” instead of “npm run serve”) my app, and then I can see the circles of the radios. Is there some tweaks to generate the svgs even in development mode?
Thanks.