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. beatscribe
    • Profile
    • Following 0
    • Followers 0
    • Topics 11
    • Posts 46
    • Best 5
    • Groups 0

    beatscribe

    @beatscribe

    5
    Reputation
    2
    Profile views
    46
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    beatscribe Follow

    Best posts made by beatscribe

    • RE: Help with .quasar.env.json in Jest

      So I came up with something. It might not be ideal for what you want @rafaelst2000 , but since mine eventually goes into Docker, its perfect for my needs.

      I didnt use Qenv or Dotenv, just this basically: https://quasar.dev/quasar-cli/handling-process-env

      quasar.conf.js

          build: {
            env: {
              BACKEND_API: process.env.BACKEND_API,
              API_PASSWORD: process.env.API_PASSWORD
            },
      

      In my Jest MainLayout.spec.js (or any jest spec really)

      describe('Environment Variables', () => {
        test('can be read', () => {
          expect(process.env.BACKEND_API).toBe('dev.fake_api.com');
        });
      });
      

      Running the unit tests:

      BACKEND_API=dev.fake_api.com API_PASSWORD=2many$ecrets npm run unit:test 
      

      Results:

      > providerfrontend@0.0.1 test:unit
      > jest --updateSnapshot
      
       PASS  test/jest/__tests__/layouts/MainLayout.spec.js
        MainLayout
          ✓ mounts without errors (39 ms)
        Environment Variables
          ✓ can be read (1 ms)
      
        console.log
          Environment: myapi.com
      
            at src/layouts/MainLayout.vue:15:1
      
      Test Suites: 1 passed, 1 total
      Tests:       2 passed, 2 total
      Snapshots:   0 total
      Time:        4.769 s
      Ran all test suites.
      

      Works the same as qenv in running and building.

      posted in Help
      beatscribe
      beatscribe
    • RE: [solved] How to make flexboxes in Quasar

      @s-molinari that seems to do the trick. I am terrible at front end too, but you are further along than me! Thanks!

      posted in Help
      beatscribe
      beatscribe
    • RE: Multiple QDate with QInput - close on select date

      https://codepen.io/rattjp/pen/qBqooZE
      I had the same issue and found this to work.

      posted in Help
      beatscribe
      beatscribe
    • RE: [solved] Change color of placeholder mask in QInput Quasar (v2.0.0.-beta7)

      Thanks @metalsadman for your answer in the Quasar discord. It turns out I just needed input-class=“text-secondary” to color it.

      posted in Help
      beatscribe
      beatscribe
    • RE: [solved] QUploader: Using the abort button with upload factory

      I was able to resolve this issue myself by using some of the props. Instead of using the factory, I just used the following to force the request to look how my back end wanted. Posting this to help future users:

      template:

            <q-uploader
              id="fileUploader"
              ref="fileUploader"
              color="secondary"
              text-color="white"
              bordered
              flat
              no-thumbnails
              max-files=1
              :url="uploadApi"
              :form-fields="generateFileData"
              :field-name="(name) => 'file'"
              @added="addFile"
              @uploaded="uploadSuccess"
              @failed="uploadFail"
              label="Excel and CSV Files Supported"
              accept="
                          .xlsx,
                          .xls,
                          .csv,
                          application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
                          application/vnd.ms-excel,
                          text/csv"
            ></q-uploader>
          </div>
      

      Methods:

          generateFileData() {
            // TODO: Set client/user and effective dates
            const uploadDetails = JSON.stringify(
              {
                clientId: 2,
                userId: 1,
                fileName: 'aFileName',
                effectiveDate: '01-01-2020',
              },
            );
            const blobDetails = new Blob([uploadDetails],
              { type: 'application/json' });
            // attach the json part of the post body
            return [{
              name: 'uploadLocationProviderDetails',
              value: blobDetails,
            }];
          },
      

      The trick was the field-name and form-fields props of the uploader mixed with that little blog trick to make it json content in the method

      posted in Help
      beatscribe
      beatscribe

    Latest posts made by beatscribe

    • RE: [solved] QUploader: Using the abort button with upload factory

      I was able to resolve this issue myself by using some of the props. Instead of using the factory, I just used the following to force the request to look how my back end wanted. Posting this to help future users:

      template:

            <q-uploader
              id="fileUploader"
              ref="fileUploader"
              color="secondary"
              text-color="white"
              bordered
              flat
              no-thumbnails
              max-files=1
              :url="uploadApi"
              :form-fields="generateFileData"
              :field-name="(name) => 'file'"
              @added="addFile"
              @uploaded="uploadSuccess"
              @failed="uploadFail"
              label="Excel and CSV Files Supported"
              accept="
                          .xlsx,
                          .xls,
                          .csv,
                          application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
                          application/vnd.ms-excel,
                          text/csv"
            ></q-uploader>
          </div>
      

      Methods:

          generateFileData() {
            // TODO: Set client/user and effective dates
            const uploadDetails = JSON.stringify(
              {
                clientId: 2,
                userId: 1,
                fileName: 'aFileName',
                effectiveDate: '01-01-2020',
              },
            );
            const blobDetails = new Blob([uploadDetails],
              { type: 'application/json' });
            // attach the json part of the post body
            return [{
              name: 'uploadLocationProviderDetails',
              value: blobDetails,
            }];
          },
      

      The trick was the field-name and form-fields props of the uploader mixed with that little blog trick to make it json content in the method

      posted in Help
      beatscribe
      beatscribe
    • [solved] QUploader: Using the abort button with upload factory

      Because I need to upload a file with some additional JSON pieces as multipart/formdata, I am using the upload factory of the QUploader. However, this seems to disable a lot of the niceties of the uploader. For example

      1. Biggest issue: the X button to abort a download no longer is available, the entire thing is greyed out when factory is running. See image. I would like the user to be able to cancel still.

      2. The progress part (30% of 5MB or whatever) also is totally disabled.

      3. When the file is successfully uploaded, the QUploader just clears as if it never uploaded anything. I thought maybe this is becauase I have resolve(null), but when I put resolve(file) as I’d expect to, it does the same thing plus throws the error that q-uploader has an invalid :url.

      I don’t see a way I can use the basic functionality and send a multipart/form-data with a file and some json, so I think i have to use the factory. Does it mean I have to live with a super weak version of the QUploader? Is there a way to add my json in without the factory and just use :url=. ?

      Here is my code:

      template part:

            <q-uploader
              id="fileUploader"
              ref="fileUploader"
              color="secondary"
              text-color="white"
              bordered
              flat
              no-thumbnails
              max-files=1
              :factory="uploadFile"
              @added="addFile"
              @uploaded="uploadSuccess"
              @failed="uploadFail"
              label="Excel and CSV Files Supported"
              accept="
                          .xlsx,
                          .xls,
                          .csv,
                          application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
                          application/vnd.ms-excel,
                          text/csv"
            ></q-uploader>
      

      methods:

        methods: {
          addFile(file) {
            // eslint-disable-next-line prefer-destructuring
            this.selectedFile = file[0];
          },
         uploadFile() {
            return new Promise((resolve, reject) => {
              const uploader = this.$refs.fileUploader;
              const file = this.selectedFile;
              const formData = new FormData();
      
              const uploadDetails = JSON.stringify(
                {
                  clientId: 2,
                  userId: 1,
                  fileName: file.name,
                  effectiveDate: '01-01-2020',
                },
              );
              // attach the json part of the post body
              formData.append(
                'uploadDetails',
                new Blob([uploadDetails],
                  { type: 'application/json' }),
              );
              // attach the file to the post body
              formData.append('file', file);
              // set headers
              const config = {
                headers: {
                  'Content-Type': 'multipart/form-data',
                },
              };
              // build api url
              const uploadApi = `http://${process.env.FILE_UPLOAD_API}/v1/uploadData`;
              // do it
              axios.post(
                uploadApi,
                formData,
                {
                  headers: {
                    config,
                  },
                },
              ).then(() => {
                uploader.removeFile(file);
                this.uploadSuccess();
                resolve(null);
              })
                .catch(() => {
                  // if needed you can add catch((err) to get the msg
                  this.uploadFail();
                  reject();
                });
            });
          },
          uploadSuccess() {
            this.$emit('fileUploaded', true);
          },
          uploadFail() {
            dialog('Upload Failure',
              'The file upload failed. Check your connection and try again. ',
              this.$q);
            this.$emit('fileUploaded', false);
          },
      
      posted in Help
      beatscribe
      beatscribe
    • RE: [solved] How to fire event when user cancels upload

      thanks! that is super helpful!

      posted in Help
      beatscribe
      beatscribe
    • RE: [solved] How to fire event when user cancels upload

      I can use this to fire an event when they click the X that appears in place of the cloud upload icon when a big file is uploading? see pic

      posted in Help
      beatscribe
      beatscribe
    • RE: [solved] Confirm Quasar v1 is transpiling to ES5 for IE11

      Thanks, I think i was sort of overthinking this.

      posted in Help
      beatscribe
      beatscribe
    • [solved] How to fire event when user cancels upload

      When uploading a really huge file, there is an X in q-uploader to allow you to cancel. When you do so, the @failed event fires, which is great, but I have no way of differentiating if it happened due to the user hitting the X on the uploader or the server was down. How can I fire an event and do something when they click the X?

      posted in Help
      beatscribe
      beatscribe
    • RE: [solved] Confirm Quasar v1 is transpiling to ES5 for IE11

      @dobbel Sorry, I am probably not explaining it well, I do not know much about this part of it. If I am linting in es6, when I build, does it get put into ES5 for IE11 to be able to use it? If I’m gonna use it in IE11, do I need to have my liter on ES5?

      posted in Help
      beatscribe
      beatscribe
    • [solved] Confirm Quasar v1 is transpiling to ES5 for IE11

      Probably a simple question, this post is super old, so I’m not sure its accurate (I don’t see the files he mentions in my build). But how can I confirm that Quasar is indeed transpiling to ES5? My site works perfect in IE11 so I think all is fine, but I need to confirm.

      posted in Help
      beatscribe
      beatscribe
    • RE: Failed to resolve directive: close-popup in Jest test

      After six hours of going down different rabbit holes trying to get this to work and never being able to stop the error, I just decided to try Dialog plugin instead of q-dialog and it does not throw any such error.

      posted in Help
      beatscribe
      beatscribe
    • RE: Failed to resolve directive: close-popup in Jest test

      @dobbel Thank you for your response. I have really dug into that, but still coming up with this warning . The worst part is I don’t even care about the popup in Jest, I’m just testing my functions. I don’t need the layout/html at all, I wish there was a way to just load the functions. I am testing the UI stuff in Cypress.

      posted in Help
      beatscribe
      beatscribe