I'm looking for working example of how to apply locale for a report inside the jsreport. I'm using handlebars for template.
I've installed handlebars-intl into docker with jsreport by
npm install handlebars-intl
And connect it in my template like that,
var handlebars = require('handlebars');
var HandlebarsIntl = require('handlebars-intl');
HandlebarsIntl.registerWith(handlebars);
When I'm using it in html template I want to setup locale to nl-NL
I've tried to setup it like that right in html
{{#intl locales="nl-NL"}}
<td class="grand total">Totaal:</td>
<td class="total">{{formatNumber totalAmount}}</td>
<td class="total"></td>
<td class="total">{{formatNumber vatAmount}}</td>
<td class="total">{{total totalAmount vatAmount}}</td>
{{/intl}}
FormatNumber apply format for en-EN locale, but non for nl. I've tried to use different locales it seems that it doesn't work at all. On the Handlebars Intl tutorial page I found example
var intlData = {
locales: 'en-US'
}
var context = {
price: 1000
};
var html = template(context, {
data: {intl: intlData}
});
But when i trying to apply it i've got an error
Error while executing templating engine. template is not defined
I'm not strong in js (more .net) And can't understand how it works, and how to apply it properly. Please help by share working example, or point me what I'm doing wrong here.
The problem was with node.js is not including localization by default.
I had to customize run script and add package to node
My Dockefile looks like
FROM jsreport/jsreport:2.6.0-full
RUN npm i handlebars-intl full-icu --save
COPY jsreport.config.json /app
COPY package.json /app
COPY run.sh /app
Also I need to modify run.sh script to run node with supporting locales
node --icu-data-dir=node_modules/full-icu "/app/server.js"
After that locales start working. Hope it helps someone else
Related
With vue.js when setting up a project using vue CLI i can run
$ npm run serve
to compile the files and start a port at localhost:8080
My question is what can i do so that the generated that got rendered in the page be also saved to a directory in my development machine.
Just like auto-saving and modifying so that i can be able to use the file on another project which depends on the generated files all during development
Are you sure it's not already creating a bundle somewhere? In some kind of build or dist folder?
Inside the webpack config you can check what value is used for output.
I don't know if an easier solution exists. But what i would suggest is :
Set writeToDisk option true. This will make sure your bundle written in to disk. Link
Then add an after-emit hook to the webpack pipeline:
const exec = require('child_process').exec; // use exec to run shell command
module.exports = {
...
plugins: [
...
{
apply: (compiler) => {
compiler.hooks.afterEmit.tap('CopyOutputPlugin', (compilation) => {
exec('command to copy output folder to desired folder');
});
}
}
]
};
child_process documentation.
I want to use ag-grid-vue without npm installing it.
code: https://codepen.io/riodw/pen/zYYOjdE
So I found this: Is it possible to use ag-grid with vue without a builder?. Followed that guid, and was basically able to get something to render but it get's stuck on "Loading..."
I downloaded ag-grid (from here: https://github.com/ag-grid/ag-grid)
Went into cd ag-grid-master/packages/ag-grid-vue
npm installed npm install
Then built npm run build
This generated the "ag-grid-vue.umd.js" file.
Modified that file to put AgGridVue on the window where AgGridVue is returned:
window.AgGridVue = AgGridVue;
return AgGridVue;
Then include that file with the ag-grid-community file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/21.2.1/ag-grid-community.min.js"></script>
<script src="/global/js/ag-grid/ag-grid-vue.umd.js"></script>
And ag-grid renders!
Problem is it get's stuck on loading and I don't know if there is a solution.
Are there any possibilities to help here?
Any help would be great. If not I'll have to use something else as installing is not an option for me unfortunately.
Image of render:
Debug mode codepen:
https://cdpn.io/riodw/debug/zYYOjdE/LDkmdEDdQpzA
Everything you do is correct except one tiny thing.
I've found the solution, when I've used vue.js (not minified version), then Vue itself has thrown a warning;
Indicating that, in the "ag-grid-vue" tag, you should not use :rowData as below;
<ag-grid-vue :rowData="rowData" :columnDefs="columnDefs"/>
this usage is wrong as stated in the console warning from Vue.
You should use kebab-case instead of camel-case as below;
<ag-grid-vue :row-data="rowData" :column-defs="columnDefs"/>
This actually works as expected.
I beleive, camel-case works in an environment with the presence of module-loader.
I've installed npm install vue-truncate-filter --save for VueJs to cut extra strings for UI purpose. According to package documentation I've implemented the package step by step in my application but it's showing me error. I'm writing same steps here please guide me where I'm wrong:
1- Install vue-trauncate-filter package using npm
npm install vue-truncate-filter --save
2- include vue-trancate-filter in application
var VueTruncate = require('./node_modules/vue-truncate-filter');
Vue.use(VueTruncate)
3- Used it in my template using this code
{{ text | truncate 100 '....' }}
after implementation when I hit the url in browser it showing following error
ReferenceError: require is not defined
I tried to find solution but I'm unable to solve the issue. Thanks in advance for help.
One way is just include the file like traditional javascript in your html file. Don't add require i'm placing path what I understand from your code. Please make it according to your directory if path is wrong
<script src="./node_modules/vue-truncate-filter/vue-truncate.js"></script>
After including this file just remove code bellow from your code
var VueTruncate = require('./node_modules/vue-truncate-filter');
Vue.use(VueTruncate)
The code you are using to hide extra string is only for vuejs 1 not for vuejs 2 so please replace your code
{{ text | truncate 100 '....' }}
with this code, it's for vuejs 2
{{ text | truncate(100)}}
hopefully it will work.
I'm trying to learn elm programing language from here. And it bugs me to manually do page refresh with every little change.
I see that elm-reactor doesn't support live realoading anymore. But what can i do unthil the next release?
I usually use elm-live.
It is very simple and easy to use if you are just compiling Elm to js.
Solved! - gulp magic saves the day!
(this solution works only with Chrome) Here is what I did - based on this: ( Thanks janiczek !! :))
Inside your root directory add a new file named gulpfile.js
Paste this content inside:
gulpfile.js:
evar gulp = require('gulp');
var elm = require('gulp-elm');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var path = ['*.elm']; // here you adjust the path according with your needs.
// For ex: 'scr/**/*.elm' - maps to every folder and file nested inside the src folder.
gulp.task('elm-init', elm.init);
gulp.task('elm', ['elm-init'], function(){
return gulp.src(path)
.pipe(plumber())
.pipe(elm())
.pipe(concat('elmapp.compiled.js'))
.pipe(gulp.dest('js'))
.pipe(livereload());
});
gulp.task('default',['watch']);
gulp.task('watch', function(){
livereload.listen();
gulp.watch(path,['elm']);
});
You must have gulp installed globally if not run:
npm install gulp -g
Install the gulp dependencies:
npm install gulp-elm gulp-concat gulp-plumber gulp-livereload
Install this extension: (chrome only)
run elm-reactor and open your page in Chrome.
From inside your terminal, at root directory (or wherever your gulpfile.js is) run: gulp
With the elm page tab open, Press LiveReload button on the Chorme Extension. like below and make sure it says:
You are good to go! :)
Elm compiler doesn't like .js files around, so you will still see 2 errors. Ignore them. For me , everything else works as expected.
I'm actually trying to use gulp-handlebars but I need to change handlebars version in the gulp-handlebars package. I can't find a way to do that with a command line, and I'm new to all of this stuff, so I'm asking for clear help, what files do I have to change ?
I assume that copy/paste of my good version of Handlebars in the gulp-handlebars folder wouldn't be enough (and I actually tried that).
Thanks.
It looks like gulp-handlebars is incredibly simple. It should be fairly simple to use handlebars and vinyl-map without relying on a plugin, something like:
In the terminal:
$ npm remove gulp-handlebars
$ npm install --save-dev handlebars#version-you-want vinyl-map gulp-rename
In your gulpfile.js:
var handlebars = require('handlebars'),
rename = require('gulp-rename'),
map = require('vinyl-map');
// ... in your task ...
return gulp.src(...)
.pipe(map(function(contents) {
return handlebars.precompile(contents.toString() /*, options */);
})
.pipe(rename({ extname: '.js' }))
.pipe(gulp.dest(...));
I haven't test this, but it should get you going in the right direction.