No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. rhscjohn
    R
    • Profile
    • Following 0
    • Followers 0
    • Topics 4
    • Posts 13
    • Best 3
    • Groups 0

    rhscjohn

    @rhscjohn

    3
    Reputation
    1
    Profile views
    13
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    rhscjohn Follow

    Best posts made by rhscjohn

    • RE: Where to initialize Vuex store at app start up?

      I went with adding a boot file. I also had to make changes to the Vuex store directory to make the store available to the boot file.

      I made changes to the vuex index.js file located in the store folder.

      src\store\index.js

      import Vue from "vue";
      import Vuex from "vuex";
      import devices from "./devices";
      import channels from "./channels";
      import settings from "./settings";
      import recordings from "./recordings";
      import video from "./video";
      import guide from "./guide"
      import schedule from "./schedule"
      Vue.use(Vuex);
      
      /*
       * If not building with SSR mode, you can
       * directly export the Store instantiation
       */
      let store = null //added
      export default function ({ store/*store, ssrContext  */ }) {  //modified
        const Store = new Vuex.Store({
          modules: {
            devices,
            channels,
            settings,
            recordings,
            video,
            guide,
            schedule
          },
      
          // enable strict mode (adds overhead!)
          // for dev mode only
          strict: process.env.DEV
        });
        store = Store   // added
        return Store;
      }
      

      Then in the boot directory I added a file called init.js.

      src\boot\init.js

      // import something here
      
      // "async" is optional;
      
      export default async ({ app, router, Vue, store }) => {
        console.info('boot: init entered', store)
        await store.dispatch('settings/getNPVRConfig')
        console.info('boot: init exited')
      }
      
      posted in Help
      R
      rhscjohn
    • RE: How to launch Quasar using Express js, Mongo, and hot reloading?

      @ma2i I have no idea if this is “best practice” but I use npm scripts to handle the backend server during development. My quasar project package.jon scripts section look like:

      "scripts": {
          "lint": "eslint --ext .js,.vue ./",
          "dev-graphql": "cd ../graphql-knex-npvr/ && npm run-script dev ",
          "server-graphql": "cd ../graphql-knex-npvr/ && npm run-script start ",
          "server-quasar": "quasar serve dist/spa -p 2000 --cors -o ",
          "publish-client": "xcopy dist\\spa  D:\\Users\\johni\\Projects\\graphql-knex-npvr\\public /s /d /e /y"
        },
      

      So, if I want to start the backend server in development mode, I open a New Terminal in VS Code and type the following

      npm run dev-graphql
      

      This runs the script: dev-grapql that is contained in the quasar project package.json file.

      The script(dev-graphql) performs 2 commands. The command are separated by &&. The first command changes the directory to point to the directory that contains the backend server. The second command runs a script call dev that is contained in the backend server project package-json file.

      My backend server is nodejs using Express, SQLite, and graphql. Now that I have my backend running, I switch back to my first VS Code terminal and run

      quasar dev
      

      When I am finished for the day, I switch back to the second terminal and do ctrl-c to terminate the backend server.

      posted in Framework
      R
      rhscjohn
    • RE: Import GraphQL boot file to use in store action

      @tranmani This is how I set up the Apollo Client in quasar. This may not be “best practice”.

      My boot file: apolloclient.js

      import { ApolloClient } from 'apollo-client'
      import { InMemoryCache } from 'apollo-cache-inmemory'
      import VueApollo from 'vue-apollo'
      import fetch from 'node-fetch'
      import { createHttpLink } from 'apollo-link-http'
      // import { createUploadLink } from 'apollo-upload-client'
      
      const httpLink = createHttpLink({
        // uri: "http://localhost:4000/graphql",
        uri: `${process.env.API.BASE_URL}:${process.env.API.PORT}/graphql`,
        fetch: fetch
      })
      
      /* const uploadLink = createUploadLink({
        // uri: "http://localhost:4000/graphql",
        uri: `${process.env.API.BASE_URL}:${process.env.API.PORT}/graphql`,
        fetch: fetch
      }) */
      
      // Create the apollo client
      const apolloClient = new ApolloClient({
        link: httpLink,
        // link: uploadLink,
        cache: new InMemoryCache(),
        connectToDevTools: true,
        defaultOptions: {
          watchQuery: {
            fetchPolicy: 'cache-and-network',
            errorPolicy: 'ignore'
          },
          query: {
            fetchPolicy: 'network-only',
            errorPolicy: 'all'
          },
          mutate: {
            errorPolicy: 'all'
          }
        }
      })
      
      const apolloProvider = new VueApollo({
        defaultClient: apolloClient
      
        /* errorHandler({ graphQLErrors, networkError }) {
          if (graphQLErrors) {
            graphQLErrors.map(({ message, locations, path }) =>
              console.log(
                `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
              )
            );
          }
          if (networkError) {
            console.log(`[Network error]: ${networkError}`);
          }
        } */
      })
      
      export { apolloProvider }
      

      Then a typical store file start with

      import gql from 'graphql-tag'
      import { apolloProvider } from 'boot/apolloClient'
      import { Notify } from 'quasar'
      
      const gqlClient = apolloProvider.defaultClientde_text
      
      // typical action
      
      async allRecordings ({ commit }, payload) {
          console.log('action allRecordings', payload)
          commit('SET_IS_LOADING', 1)
          try {
            const response = await gqlClient.query({
              query: gql`
                query AllScheduledRecordings(
                  $orderBy: [OrderByFields]
                  $filterBy: [FilterByFields]
                  $between: [BetweenFields]
                  $whereIn: [WhereInField]
                  $page: Page
                ) {
                  allScheduledRecordings(
                    orderBy: $orderBy
                    filterBy: $filterBy
                    between: $between
                    whereIn: $whereIn
                    page: $page
                  ) {
                    oid
                    name
                    channelOid
                    recurrenceOid
                    channelName
                    filename
                    status
                    startTimeLocal
                    endTimeLocal
                    failureReason
                    eventDetails
                    landscapeUrl
                    posterUrl
                    logoUrl
                    videoFiles {
                      name
                      base
                      dir
                      ext
                      baseURL
                    }
                  }
                }
              `,
              variables: {
                ...payload
              }
            })
            console.log(response)
      
            commit('SET_RECORDINGS', response.data)
            commit('SET_IS_LOADING', -1)
          } catch (error) {
            Notify.create(`gqlClient action AllRecordings: ${error.message}`)
            console.error('gqlClient action AllRecordings: ', error)
            commit('SET_IS_LOADING', -1)
          }
        }
      

      Hope this is of some help. I am assuming you have the appropriate Apollo Client dependences.

      posted in Help
      R
      rhscjohn

    Latest posts made by rhscjohn

    • RE: Access LocalStorage at startup

      You did not mention what file your mounted() code was in. I would suggest the code be placed in App.vue.

      posted in Help
      R
      rhscjohn
    • RE: Graphql Extension

      @rainer9202 You will need to import the Apollo Client into your js file.

      I created my own Apollo Client boot file and I am using Vuex. Vuex is just a JavaScript file. Not an exact match to what you are doing but should be close enough to get you started. Hope this helps.

      Here is how I import the Apollo Client into a Vuex js file.

      import gql from 'graphql-tag'
      import { apolloProvider } from 'boot/apolloClient'
      import { Notify } from 'quasar'
      
      const gqlClient = apolloProvider.defaultClient
      

      This is an example of a query with parameters.

      const response = await gqlClient.query({
              query: gql`
                query AllScheduledRecordings(
                  $orderBy: [OrderByFields]
                  $filterBy: [FilterByFields]
                  $between: [BetweenFields]
                  $whereIn: [WhereInField]
                  $page: Page
                ) {
                  allScheduledRecordings(
                    orderBy: $orderBy
                    filterBy: $filterBy
                    between: $between
                    whereIn: $whereIn
                    page: $page
                  ) {
                    oid
                    name
                    channelOid
                    recurrenceOid
                    channelName
                    filename
                    status
                    startTimeLocal
                    endTimeLocal
                    failureReason
                    eventDetails
                    landscapeUrl
                    posterUrl
                    logoUrl
                    videoFiles {
                      name
                      base
                      dir
                      ext
                      baseURL
                    }
                  }
                }
              `,
              variables: {
                ...payload
              }
            })
      
      posted in [v1] App Extensions
      R
      rhscjohn
    • RE: How do I get a mask token as part of the prop mask value?

      Yes. mask="##p\x" worked. Just trying to figure out what “best practice” would be.

      posted in Help
      R
      rhscjohn
    • RE: How do I get a mask token as part of the prop mask value?

      @beets I tried using suffix but the suffix(px) never got appended to the input value. When I inspected value, it would just contain the 2 digits. It’s possible I did not do something correctly or I don’t understand the purpose of suffix/prefix. I opened the codePen demo, added a line of code: {{email}} to display the value of email. The suffix @gmail.com never appeared in {{email}}.

      posted in Help
      R
      rhscjohn
    • How do I get a mask token as part of the prop mask value?

      For a q-input field of text, I want to set the prop mask="##px". The problem is that the ‘x’ is also defined as a mask token: x - Alphanumeric, transformed to lowercase for letters.

      Is there some way, maybe an escape sequence, that will not treat the x as a mask token.

      Thanks

      posted in Help
      R
      rhscjohn
    • RE: q-video events

      @vinnyc This may or may not be of help. This is a list of Media Events that should be available to q-video. My understanding is that q-video is just a wrapper around HTML5 video.

      I quickly outgrew HTML5 video and moved on to videojs.

      posted in Help
      R
      rhscjohn
    • RE: Import GraphQL boot file to use in store action

      @tranmani This is how I set up the Apollo Client in quasar. This may not be “best practice”.

      My boot file: apolloclient.js

      import { ApolloClient } from 'apollo-client'
      import { InMemoryCache } from 'apollo-cache-inmemory'
      import VueApollo from 'vue-apollo'
      import fetch from 'node-fetch'
      import { createHttpLink } from 'apollo-link-http'
      // import { createUploadLink } from 'apollo-upload-client'
      
      const httpLink = createHttpLink({
        // uri: "http://localhost:4000/graphql",
        uri: `${process.env.API.BASE_URL}:${process.env.API.PORT}/graphql`,
        fetch: fetch
      })
      
      /* const uploadLink = createUploadLink({
        // uri: "http://localhost:4000/graphql",
        uri: `${process.env.API.BASE_URL}:${process.env.API.PORT}/graphql`,
        fetch: fetch
      }) */
      
      // Create the apollo client
      const apolloClient = new ApolloClient({
        link: httpLink,
        // link: uploadLink,
        cache: new InMemoryCache(),
        connectToDevTools: true,
        defaultOptions: {
          watchQuery: {
            fetchPolicy: 'cache-and-network',
            errorPolicy: 'ignore'
          },
          query: {
            fetchPolicy: 'network-only',
            errorPolicy: 'all'
          },
          mutate: {
            errorPolicy: 'all'
          }
        }
      })
      
      const apolloProvider = new VueApollo({
        defaultClient: apolloClient
      
        /* errorHandler({ graphQLErrors, networkError }) {
          if (graphQLErrors) {
            graphQLErrors.map(({ message, locations, path }) =>
              console.log(
                `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
              )
            );
          }
          if (networkError) {
            console.log(`[Network error]: ${networkError}`);
          }
        } */
      })
      
      export { apolloProvider }
      

      Then a typical store file start with

      import gql from 'graphql-tag'
      import { apolloProvider } from 'boot/apolloClient'
      import { Notify } from 'quasar'
      
      const gqlClient = apolloProvider.defaultClientde_text
      
      // typical action
      
      async allRecordings ({ commit }, payload) {
          console.log('action allRecordings', payload)
          commit('SET_IS_LOADING', 1)
          try {
            const response = await gqlClient.query({
              query: gql`
                query AllScheduledRecordings(
                  $orderBy: [OrderByFields]
                  $filterBy: [FilterByFields]
                  $between: [BetweenFields]
                  $whereIn: [WhereInField]
                  $page: Page
                ) {
                  allScheduledRecordings(
                    orderBy: $orderBy
                    filterBy: $filterBy
                    between: $between
                    whereIn: $whereIn
                    page: $page
                  ) {
                    oid
                    name
                    channelOid
                    recurrenceOid
                    channelName
                    filename
                    status
                    startTimeLocal
                    endTimeLocal
                    failureReason
                    eventDetails
                    landscapeUrl
                    posterUrl
                    logoUrl
                    videoFiles {
                      name
                      base
                      dir
                      ext
                      baseURL
                    }
                  }
                }
              `,
              variables: {
                ...payload
              }
            })
            console.log(response)
      
            commit('SET_RECORDINGS', response.data)
            commit('SET_IS_LOADING', -1)
          } catch (error) {
            Notify.create(`gqlClient action AllRecordings: ${error.message}`)
            console.error('gqlClient action AllRecordings: ', error)
            commit('SET_IS_LOADING', -1)
          }
        }
      

      Hope this is of some help. I am assuming you have the appropriate Apollo Client dependences.

      posted in Help
      R
      rhscjohn
    • RE: How to launch Quasar using Express js, Mongo, and hot reloading?

      @ma2i I have no idea if this is “best practice” but I use npm scripts to handle the backend server during development. My quasar project package.jon scripts section look like:

      "scripts": {
          "lint": "eslint --ext .js,.vue ./",
          "dev-graphql": "cd ../graphql-knex-npvr/ && npm run-script dev ",
          "server-graphql": "cd ../graphql-knex-npvr/ && npm run-script start ",
          "server-quasar": "quasar serve dist/spa -p 2000 --cors -o ",
          "publish-client": "xcopy dist\\spa  D:\\Users\\johni\\Projects\\graphql-knex-npvr\\public /s /d /e /y"
        },
      

      So, if I want to start the backend server in development mode, I open a New Terminal in VS Code and type the following

      npm run dev-graphql
      

      This runs the script: dev-grapql that is contained in the quasar project package.json file.

      The script(dev-graphql) performs 2 commands. The command are separated by &&. The first command changes the directory to point to the directory that contains the backend server. The second command runs a script call dev that is contained in the backend server project package-json file.

      My backend server is nodejs using Express, SQLite, and graphql. Now that I have my backend running, I switch back to my first VS Code terminal and run

      quasar dev
      

      When I am finished for the day, I switch back to the second terminal and do ctrl-c to terminate the backend server.

      posted in Framework
      R
      rhscjohn
    • Form Component: Range props - markers

      I am like to change the size and color of the prop markers in the Form Component: Range. I was not able to find styling for the makers in the API. Can this be done?

      Thanks.

      posted in Help
      R
      rhscjohn
    • RE: Where to initialize Vuex store at app start up?

      I went with adding a boot file. I also had to make changes to the Vuex store directory to make the store available to the boot file.

      I made changes to the vuex index.js file located in the store folder.

      src\store\index.js

      import Vue from "vue";
      import Vuex from "vuex";
      import devices from "./devices";
      import channels from "./channels";
      import settings from "./settings";
      import recordings from "./recordings";
      import video from "./video";
      import guide from "./guide"
      import schedule from "./schedule"
      Vue.use(Vuex);
      
      /*
       * If not building with SSR mode, you can
       * directly export the Store instantiation
       */
      let store = null //added
      export default function ({ store/*store, ssrContext  */ }) {  //modified
        const Store = new Vuex.Store({
          modules: {
            devices,
            channels,
            settings,
            recordings,
            video,
            guide,
            schedule
          },
      
          // enable strict mode (adds overhead!)
          // for dev mode only
          strict: process.env.DEV
        });
        store = Store   // added
        return Store;
      }
      

      Then in the boot directory I added a file called init.js.

      src\boot\init.js

      // import something here
      
      // "async" is optional;
      
      export default async ({ app, router, Vue, store }) => {
        console.info('boot: init entered', store)
        await store.dispatch('settings/getNPVRConfig')
        console.info('boot: init exited')
      }
      
      posted in Help
      R
      rhscjohn