@isense-development/ui-template v1.0.12

quasar-desktop (quasar-desktop)

A Quasar Framework app template

installation steps

1. Install basic boot, config and template files.

quasar ext add ui-template

// config
api.renderFile("./templates/env.json", "env.json");
api.renderFile("./templates/quasar.conf.js", "quasar.conf.js");
// mixins
api.renderFile("./templates/src/mixins/axiosApi.js", "src/mixins/axiosApi.js");
api.renderFile("./templates/src/mixins/axiosCatch.js", "src/mixins/axiosCatch.js");
api.renderFile("./templates/src/mixins/localStorage.js", "src/mixins/localStorage.js");
api.renderFile("./templates/src/mixins/showLoading.js", "src/mixins/showLoading.js");
// boot
api.renderFile("./templates/src/boot/axios.js", "src/boot/axios.js");
api.renderFile("./templates/src/boot/export-instances.js", "src/boot/export-instances.js");
api.renderFile("./templates/src/boot/i18n.js", "src/boot/i18n.js");
api.renderFile("./templates/src/boot/main.js", "src/boot/main.js");
api.renderFile("./templates/src/boot/notify-defaults.js", "src/boot/notify-defaults.js");
api.renderFile("./templates/src/boot/token.js", "src/boot/token.js");
//css
api.renderFile("./templates/src/css/app.scss", "src/css/app.scss");
api.renderFile("./templates/src/css/quasar.variables.scss", "src/css/quasar.variables.scss");
// public
api.renderFile("./templates/public/robots.txt", "public/robots.txt");
api.renderFile("./templates/public/sitemap.xml", "public/sitemap.xml");
// routes
api.renderFile("./templates/src/router/module-routes.js", "src/router/module-routes.js");
//pwa
api.renderFile("./templates/src-pwa/register-service-worker.js", "src-pwa/register-service-worker.js");
api.renderFile("./templates/src-pwa/custom-service-worker.js", "src-pwa/custom-service-worker.js");
// others
api.renderFile("./templates/README.md", "README.md");
api.renderFile("./templates/.editorconfig", ".editorconfig");
api.renderFile("./templates/merge all branches.bat", "merge all branches.bat");
api.renderFile("./templates/merge qa.bat", "merge qa.bat");
api.renderFile("./templates/merge master.bat", "merge master.bat");
api.renderFile("./templates/translations.csv", "translations.csv");
api.renderFile("./templates/jsconfig.json", "jsconfig.json");
api.renderFile("./templates/icon-generator.pptx", "icon-generator.pptx");
api.renderFile("./templates/Dockerfile", "Dockerfile");
api.renderFile("./templates/db.json", "db.json");
api.renderFile("./templates/src/index.template.html", "src/index.template.html");

2. generate the languages

npm run quasalang:generate

Import Kendo UI for Vue components

Kendo UI for Vue is distributed as multiple NPM packages, scoped to @progress. For example, the name of the Grid package is @progress/kendo-vue-grid.

Kendo UI for Vue is a rich suite of many modular components. For our dashboard example, we’ll use three of these components: The Grid, the DropDownList and the Window.

If you want to update, then first delete all packages from Kendo in the package.json file

npm install --save @progress/kendo-data-query @progress/kendo-datasource-vue-wrapper @progress/kendo-drawing @progress/kendo-dropdowns-vue-wrapper @progress/kendo-grid-vue-wrapper @progress/kendo-licensing @progress/kendo-theme-material @progress/kendo-ui @progress/kendo-vue-animation @progress/kendo-vue-data-tools @progress/kendo-vue-dateinputs @progress/kendo-vue-dropdowns @progress/kendo-vue-excel-export @progress/kendo-vue-grid @progress/kendo-vue-inputs @progress/kendo-vue-intl @progress/kendo-vue-pdf @progress/kendo-vue-data-tools

Config

All configurations are located in the root env.json file

window objects

window.$axios   = axiosConfig
window.$i18n    = i18n // window.$i18n.global.t('edit_employee')
window.$emitter = emitter // window.$emitter.emit("myevent", 100);
window.$token   = name 

Start the app in development mode (hot-code reloading, error reporting, etc.)

quasar dev

Build the app for production

  quasar build -m pwa

Customize the configuration

See Configuring quasar.conf.js.

devtools-detect

Detect if DevTools is open and its orientation

Useful for when you want something special to happen when DevTools is open. Like pausing canvas, adding style debug info, etc.

Install

npm install devtools-detect

Usage

<script type="module">
    import devtools from './node_modules/devtools-detect/index.js';
    // Check if it's open
    console.log('Is DevTools open:', devtools.isOpen);
    // Check it's orientation, `undefined` if not open
    console.log('DevTools orientation:', devtools.orientation);
    // Get notified when it's opened/closed or orientation changes
    window.addEventListener('devtoolschange', event => {
        console.log('Is DevTools open:', event.detail.isOpen);
        console.log('DevTools orientation:', event.detail.orientation);
    });
</script>

Support

• Chrome DevTools
• Edge DevTools
• Safari DevTools
• Firefox DevTools
• Opera DevTools

Caveats

Doesn't work if DevTools is undocked and will show false positive if you toggle any kind of sidebar.

json-server

Create a db.json file with some data in the root of the project

{
    "posts": [
        {
            "id": 1,
            "title": "json-server",
            "author": "typicode"
        }
    ],
    "comments": [
        {
            "id": 1,
            "body": "some comment",
            "postId": 1
        }
    ],
    "profile": {
        "name": "typicode"
    }
}

Start JSON Server from package.json

json-server --watch db.json

Now if you go to http://localhost:3000/posts/1, you'll get

{
    "id": 1,
    "title": "json-server",
    "author": "typicode"
}

In the quasar.conf.js file you can set a 'proxy' for the backend so you don't have to make calls to http://localhost:3000.

In this way you can set your url's like in production: api/....

devServer: {https: false, port: 8080, open: true, // opens browser window automatically
proxy: {
'^api': {
target: 'http://localhost:3000', changeOrigin: true, logLevel: 'debug', pathRewrite: {
'^api': '/'
}
}
}
},

Also when doing requests, it's good to know that:

• If you make POST, PUT, PATCH or DELETE requests, changes will be automatically and safely saved to db.json using lowdb.
• Your request body JSON should be object enclosed, just like the GET output. (for example {"name": "Foobar"})
• Id values are not mutable. Any id value in the body of your PUT or PATCH request will be ignored. Only a value set in a POST request will be respected, but only if not already taken.
• A POST, PUT or PATCH request should include a Content-Type: application/json header to use the JSON in the request body. Otherwise it will return a 2XX status code, but without changes being made to the data.

Routes

Based on the previous db.json file, here are all the default routes. You can also add other routes using --routes.

Plural routes

GET    /posts
GET    /posts/1
POST   /posts
PUT    /posts/1
PATCH  /posts/1
DELETE /posts/1

Singular routes

GET    /profile
POST   /profile
PUT    /profile
PATCH  /profile

Filter

Use . to access deep properties

GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2
GET /comments?author.name=typicode

Quasalang

Input Path

The default input path is /translations.csv but you can change it if you like:

$ quasalang generate --input /files/my-translations.csv

# or the shorthand...

$ quasalang g -i /files/my-translations.csv

Output Path

The default output path is /src/i18n but you can change it if you like:

$ quasalang generate --output /src/my-translations

# or the shorthand...

$ quasalang g -o /src/my-translations

Force Write

By default, if the output folder exists, you'll be prompted to overwrite it:

? Folder src/i18n exists. Overwrite it? (Y/n)

You can skip this prompt if you like:

$ quasalang generate --force

# or the shorthand...

$ quasalang g -f

No Watermark

By default, Quasalang will add a watermark to your files:

// This file was auto-generated by Quasalang

You can disable this if you like:

$ quasalang generate --nowatermark

# or the shorthand...

$ quasalang g -nw

Language Switcher Array Code

You also generate the array code for your language switcher:

$ quasalang generate --lang-switcher

# or the shorthand...

$ quasalang g -ls

See Generate language switcher array code for more info.

Watch for changes

You can watch for changes to your translation file and auto-regenerate your language files. You can then just leave it running in the background and forget about it:

$ quasalang generate --watch

# or the shorthand...

$ quasalang g -w