Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. awipf
    A
    • Profile
    • Following
    • Followers
    • Topics
    • Posts
    • Best
    • Groups

    awipf

    @awipf

    5
    Reputation
    13
    Posts
    6
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    awipf Follow

    Best posts made by awipf

    • RE: Table slots disappear when grid mode

      If anyone is interested this is how i solved it… Also i’m new to Vue.js and Quasar so please give input if there are ways to improve this.

      I created a component that houses the mobile view where i copied the Quasar design except for my buttons (v-else)

      <template v-slot:item="props">
        <div
          class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
          :style="props.selected ? 'transform: scale(0.95);' : ''"
        >
          <q-card :class="props.selected ? 'bg-grey-2' : ''">
            <q-card-section>
              <q-checkbox dense v-model="props.selected" :label="props.row.name" />
            </q-card-section>
            <q-separator />
            <q-list dense>
              <q-item
                v-for="col in props.cols.filter(col => col.name !== 'desc')"
                :key="col.name"
              >
                <div class="q-table__grid-item-row">
                  <div class="q-table__grid-item-title">{{ col.label }}</div>
                  <div class="q-table__grid-item-value" v-if="col.label != 'edit'">
                    {{ col.value }}
                  </div>
                  <div v-else>
                    <alert-edit-delete :alertId="props.row.id" @handleDelete="handleDelete" />
                  </div>
                </div>
              </q-item>
            </q-list>
          </q-card>
        </div>
      </template>
      
      <script>
      export default {
        props: ["props"],
      
          components: {
          "alert-edit-delete": require("components/alert/AlertEditDelete.vue").default
        },
      
        methods: {
          handleDelete(id) {
            this.$emit('handleDelete',id);
          },
        }
      };
      </script>
      

      The buttons are also a component

      <template>
        <div class="order-first">
          <q-btn
            @click.stop=""
            flat
            round
            dense
            color="primary"
            icon="edit"
            class="q-mr-sm"
          />
          <q-btn
            @click.stop="handleDelete(alertId)"
            flat
            round
            dense
            color="red"
            icon="delete"
          />
        </div>
      </template>
      
      <script>
      
      export default {
      props: ["alertId"],
        methods: {
          handleDelete(id) {
            this.$emit('handleDelete',id);
          },
        }
      };
      </script>
      

      In the table component I import the mobile list

      <template v-slot:item="props">
              <mobile-alert-list :props="props" @handleDelete="promptToDelete" />
      </template>
      
      posted in Framework
      A
      awipf
    • RE: Qasar 1.9 table selected rows array not updating when state updates

      fyi if it helps anyone. So going off what s.molinari was saying, this is an easy fix. I’m grabbing the items from the state in my table component’s child component and filtering by id of selected.

      computed:{
        ...mapGetters('foobar',['getFoobars']),
      
        updatedSelected(){
          const ids = this.selected.map(a => a.id);
          return this.getFoobars.filter(a => ids.includes(a.id) )
        }
      }
      
      posted in Framework
      A
      awipf
    • RE: Call store mutation from vs file

      figured it out and in hindsight very simple. I copied this from a tutorial on Quasar but i’m intercepting each router request in a boot file and allowing or disallowing based on whether or not user is authenticated… though i’m using JWT from a Spring Boot backend. Anyway, I also wanted to set ‘loggedIn’ in the auth store since other components need to know if the user is logged in.

      boot/router-auth.js

      import { LocalStorage } from "quasar";
      import { AUTH } from "../constants";
      
      export default ({ router, store }) => {
        router.beforeEach((to, from, next) => {
          let loggedIn = !tokenExpired();
          store.commit("auth/setLoggedIn", loggedIn);
      
          if (checkAccess(loggedIn, to)) {
            next("/auth/login");
          } else {
            next();
          }
        });
      };
      
      const tokenExpired = () => {
        const token = localStorage.getItem(AUTH.TOKEN);
        const expiration = LocalStorage.getItem(AUTH.TOKEN_EXPIRE);
        return new Date() >= expiration || token == null;
      };
      
      const checkAccess = (loggedIn, to) => {
        return (
          !loggedIn &&
          ![
            "",
            "/",
            "/auth/login",
            "/auth/register",
            "/password/reset",
            "/password/reset/new"
          ].includes(to.path)
        );
      };
      

      So works great but what do you think of this strategy? Better way to do it?

      posted in Framework
      A
      awipf

    Latest posts made by awipf

    • RE: Call store action after IOS notification received

      That was actually a silly mistake. In the action, i don’t call the api if profile is defined in the store already. The solution was to call the action in mount of the profile component. And in one-signal.js commit to null out the profile.

      store.commit("user/setProfile", null)
      
      posted in Help
      A
      awipf
    • Call store action after IOS notification received

      This is not really a Quasar issue but i implemented IOS notifications using Quasar, Cordova and the OneSignal SDK. the notifications work great but I can’t seem to be able to call a store action from the oneSignal config file after a user clicks on a notification. What i’m trying to do is grab a fresh copy of a user’s profile via an api call when a user clicks a notification and then navigate to the profile page.

      This is my OneSignal config file located in src/boot/one-signal.js directory

      export default async ({ app, router, store ,Vue }) => {
        app.$oneSignal = Vue.prototype.$oneSignal = {
          get instance () {
            return window.plugins && window.plugins.OneSignal
          },
      
          setup (appId, {initCallback} = {}) {
            if (!appId) {
              throw new Error('boot/one-signal: app id is required')
            }
      
            document.addEventListener('deviceready', function () {
      
              window.plugins.OneSignal.setLogLevel({ logLevel: 6, visualLevel: 0 });
      
              window.plugins.OneSignal.startInit(appId)
      
              if (initCallback) {
                initCallback(window.plugins.OneSignal)
              }
      
              window.plugins.OneSignal.handleNotificationOpened(function(openResult) {
      
                store.dispatch("user/loadProfile").then((res) => {
                  router.push({ name: "profile" }).catch(() => {}); 
                })
           
              })
      
              window.plugins.OneSignal.endInit()
            }, false)
          },
      
          optIn (externalUserId) {
            window.plugins.OneSignal.setExternalUserId(externalUserId)
          },
      
          optOut () {
            window.plugins.OneSignal.removeExternalUserId()
          }
        }
      }
      

      The redirect works, but the loadProfile action is not called and ‘res’ is undefined. I know i could reload in ‘mount’ but most times i don’t want grab a fresh copy. What am i missing here in the way i’m handling it?

      posted in Help
      A
      awipf
    • RE: Call store mutation from vs file

      figured it out and in hindsight very simple. I copied this from a tutorial on Quasar but i’m intercepting each router request in a boot file and allowing or disallowing based on whether or not user is authenticated… though i’m using JWT from a Spring Boot backend. Anyway, I also wanted to set ‘loggedIn’ in the auth store since other components need to know if the user is logged in.

      boot/router-auth.js

      import { LocalStorage } from "quasar";
      import { AUTH } from "../constants";
      
      export default ({ router, store }) => {
        router.beforeEach((to, from, next) => {
          let loggedIn = !tokenExpired();
          store.commit("auth/setLoggedIn", loggedIn);
      
          if (checkAccess(loggedIn, to)) {
            next("/auth/login");
          } else {
            next();
          }
        });
      };
      
      const tokenExpired = () => {
        const token = localStorage.getItem(AUTH.TOKEN);
        const expiration = LocalStorage.getItem(AUTH.TOKEN_EXPIRE);
        return new Date() >= expiration || token == null;
      };
      
      const checkAccess = (loggedIn, to) => {
        return (
          !loggedIn &&
          ![
            "",
            "/",
            "/auth/login",
            "/auth/register",
            "/password/reset",
            "/password/reset/new"
          ].includes(to.path)
        );
      };
      

      So works great but what do you think of this strategy? Better way to do it?

      posted in Framework
      A
      awipf
    • RE: Call store mutation from vs file

      any other ideas?

      posted in Framework
      A
      awipf
    • RE: Call store mutation from vs file

      Thanks Scott but sadly didn’t work. getting a long list of error about not mutating state outside of mutations though the action i called just did a console.log

      posted in Framework
      A
      awipf
    • RE: Call store mutation from vs file

      I didn’t change it from what is there cept i’m importing different modules
      for example:

      import auth from './modules/store-auth';
      

      and adding them to the Vuex.Store instance. Otherwise no change.

      So it does work perfectly in .vue files. Just can’t seem to figure it out in .js files

      posted in Framework
      A
      awipf
    • Call store mutation from vs file

      Hello all, assuming i didn’t deviate from the quasar default architecture at all, how do i call a mutation from inside a js file?

      I would think simply import the store

      import store from '../store'
      
      store.dispatch('auth/setLoggedIn', false)
      

      but i’m getting

      _store_index__WEBPACK_IMPORTED_MODULE_2__.default.dispatch is not a function
      
      posted in Framework
      A
      awipf
    • RE: Qasar 1.9 table selected rows array not updating when state updates

      fyi if it helps anyone. So going off what s.molinari was saying, this is an easy fix. I’m grabbing the items from the state in my table component’s child component and filtering by id of selected.

      computed:{
        ...mapGetters('foobar',['getFoobars']),
      
        updatedSelected(){
          const ids = this.selected.map(a => a.id);
          return this.getFoobars.filter(a => ids.includes(a.id) )
        }
      }
      
      posted in Framework
      A
      awipf
    • RE: Qasar 1.9 table selected rows array not updating when state updates

      Yeah that makes sense. Thanks.

      posted in Framework
      A
      awipf
    • Qasar 1.9 table selected rows array not updating when state updates

      The table rows and data update just fine but the selected rows array doesn’t. Anyone run into this or am i doing something wrong. I realize I have no code to show but was wondering if I could get some quicks thoughts first…

      posted in Framework
      A
      awipf