kotlinlang #kvision

Hi @Robert Jaros, Thank you for the awesome framework. I have a question: I have developed a kvision full-stack application that runs as a fat jar. Now I need to expose a few REST endpoint as back end API from the same running application to reuse the auth and other service layers from the backendMain. Is there a recommended way in kvision to proxy the url from frontend like <domain>/#/api/v1/... to serve a json response?

Kumaran Masilamani

03/25/2021, 11:14 AM

Hi @Lars Erik Rojeras I can see you asked the same question before. I am also having an issue on displaying favicon.ico from index.html. I tried with a new png image (favicon.png) as per the w3 recommendation, but still it is a 404 when called from index.html. How did you manage to show the favicon? Do we need to host externally and give an absolute url?

Kumaran Masilamani

03/27/2021, 1:00 PM

Hi, Any recommended way to add a GDPR cookie acceptance popup plugin with kvision? I tried to include this plugin, https://github.com/Wruczek/Bootstrap-Cookie-Alert But didn't work for me, still figuring out how to load the javascript after the page load 🙂

ashmelev

03/29/2021, 9:05 PM

@Robert Jaros We are getting ready to use KVision for a production application for a customer. The customer requires containerized deployment (i.e. Docker containers in Kubernetes). Historically we have deployed SpringBoot into a container (built by Google Jib - if you've not tried it, you should have a look, it's a great time-saver) and deployed the React UI as a static WebPak in AWS S3/CloudFront. However, for deploying KVision I think we should use two Jib-built Docker containers (one for front-end and one for back-end) - as it would likely simplify deployment and improve scalability. Do you have any experience with deploying KVision as two containers? If not, I am happy to work it out and contribute an example - perhaps with some direction from you 🙂

Kumaran Masilamani

04/02/2021, 5:25 AM

Just to know, is there an underlying restriction for this framework level rule?

Kumaran Masilamani

04/02/2021, 1:13 PM

Hi, this is more of a general SPA question. Whenever I redeploy my kvision app in Google app engine, I get the old app in my browser with javascript errors. In Chrome it loads the new app pages, but the app is not working and threw this error in the console: vf {message: "Invalid parameters", cause: undefined, name: "vf", stack: "vf: Invalid parameters↵ at $T.invoke_508 (https…tps😕/<my-domain>/main.bundle.js:25:78621)"} and when I click through, it fails in the last part of this js function function isJsdom() { return ((((!(typeof navigator === 'undefined') ? navigator != null : false) ........ ? navigator.userAgent.match('\\bjsdom\\b') : false; } In Firefox, it loads the old application, still, somewhere it is caching. I have given this index.html <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="0"> I tried clearing the site-specific cache from the browser. PS: In the incognito mode of Chrome and Firefox, no problem at all. Any help, highly appreciated.

Rafał Trójczak

04/03/2021, 7:55 PM

Hello! I have a question: is there a way to use

calc

CSS function (e.g.

calc(100vh - 150px)

) from within a

Style

object?

Tomas Kormanak

04/08/2021, 3:46 PM

I am having an issue with loading module. I have dependency in

build.gradle.kts

implementation(npm("jose", "3.11.3"))

and

require

in code:

val sign = require("jose/jwt/sign")

but I get exception:

Cannot find module 'jose/jwt/sign'

Kumaran Masilamani

04/10/2021, 6:07 AM

I couldn't figure out how to set class names on the component. -> By adding a class using addCssClass it is actually adding the class on the outer <div> -> The addCssStyle is not applying the style on the textbox. I might be doing something wrong here.. Any clue?

Kumaran Masilamani

04/11/2021, 9:45 AM

Kotlin code:
react {
    ReactSidebar {
        ReactSidebarMenu {
            attrs.iconShape = "square"
            ReactSidebarMenuItem {
                //attrs.icon= ???
                +"Menu one "
            }
            ReactSidebarMenuItem {
                +"Menu two "
            }
        }
    }
}

Kumaran Masilamani

04/14/2021, 5:26 AM

Hi, Any recommendations on using social-auth in kvision? For now I am looking for authenticating and using a few resources from FB GraphAPI. Thanks..

Jörg Rade

04/20/2021, 1:56 PM

Invalidate Caches & Restart didn't do the trick.

Kumaran Masilamani

04/21/2021, 5:37 PM

Hi This might be more a kotlinjs question: I have a dynamic typed js object, from my frontend which I want to pass as MyObject to backend When I try this..

//frontend code
val jsonString = JSON.stringify(dynamicData)
val myObj  = JSON.parse<MyObject>(jsonString)
myService.someMethod(myObj)

//backend This myObj is coming as "[object Object]"

and getting this error:
[reactor-http-nio-8] ERROR io.kvision.remote.KVServiceManager - Unexpected JSON token at offset 0: Expected '{, kind: CLASS'
JSON input: "[object Object]"

I have a workaround to pass the stringified json to backend and then parse as my type. But just wanted to get some idea whether this can be done in frontend.

Prag

04/22/2021, 4:08 PM

Hi, I'm new to KVision, and I'm evaluating whether it is something that I could use for a project, a public facing website. Because of SEO requirements, the chosen solution should be able to render plain HTML on the server side. Is it possible to render a KVision page as a string on the JVM containing HTML, so that the webserver can output it?

Massimiliano Bertinetti

04/24/2021, 3:35 PM

The problem seems to be karma:

Task :frontendBrowserTest FAILED

- /Users/max/IdeaProjects/chess/build/js/node_modules/karma/bin/karma

at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)

at Function.Module._load (internal/modules/cjs/loader.js:864:27)

at Module.require (internal/modules/cjs/loader.js:1044:19)

at require (internal/modules/cjs/helpers.js:77:18)

at Object.<anonymous> (/Users/max/IdeaProjects/chess/build/js/node_modules/braces/index.js:15:17)

at Module._compile (internal/modules/cjs/loader.js:1158:30)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)

at Module.load (internal/modules/cjs/loader.js:1002:32)

at Function.Module._load (internal/modules/cjs/loader.js:901:14)

at Module.require (internal/modules/cjs/loader.js:1044:19) {

FAILURE: Build failed with an exception.

* What went wrong:

Execution failed for task ':frontendBrowserTest'.

jschneider

04/27/2021, 7:50 AM

Hey. How is the state towards Kotlin 1.5? Did anybody try if KVision is compatible?

Tomas Kormanak

04/29/2021, 8:50 AM

It made me think about an idea for KVision. What do you think about allowing custom html tag for custom components? It's a kind of angular approach but it would make html more readable and navigable. Somethign like:

<tabpanel><tab><mycomponent><mycomponent></tab></tabpanel>

jschneider

04/29/2021, 9:56 AM

I seem to have a problem with spinners. There seems to be some kind of endless loop. These seem to be related to max, number of decimals and increase. In my example if I set a value that is larger than max and then use the spinner, the page does not respond anymore.

jschneider

04/29/2021, 9:59 AM

Also: Is it possible to format the "." in a spinner with decimals? I am developing an application that should run with a German locale. And unfortunately therefore I need "," as separator

Kumaran Masilamani

04/29/2021, 3:33 PM

div {
    renderRawHtml()
}

fun renderRawHtml() :String {
    return """
    <div class="col-xl-4">
    <div class="card">
        <div class="card-body">
            <h4 class="mt-0 header-title mb-5">xxxxxxx</h4>
        <div>
    <div>
    <div>
    """
}

Kumaran Masilamani

04/29/2021, 3:34 PM

(I know this is not typed, but it might be easy to put some raw html from a template to quickly see whether it works, and later refactor to a typed tags).

Kumaran Masilamani

05/07/2021, 2:57 PM

I tried this so far:

val searchText =Text {
    placeholder = tr("Search...")
    input.addCssClass("search-text")
}

In the init block of the panel I have:

searchText.subscribe {
       MyManager.filter(state.searchQuery.copy(keyword = it))
}

In the Manager: I filtered the original items, using the query object and derived a newObservableList() and trying to update via the dispatch Action

MyAction.UpdateItems(newList)

But somehow it goes into recursion :)

Kumaran Masilamani

05/08/2021, 8:30 AM

Hi Robert, I have another issue. I bought a bootstrap template for my app, and it has a bootstrap.bundle.js and a bootstrap.css with other custom css and js.. I tried with the kvision-bootstrap with other custom js and css. The ui didn't layout correctly. So I removed the kvision-bootstrap dependency from the build, and included the bootstrap js and css in index.html. Everything worked so far, until I wanted a Select component from kvision-bootstrap-select. Somehow there is clash with these two, and the Select component opens when I click any of the other components next to it. Cant see any console errors or js errors in the browser. Any clue?

Robert Jaros

05/10/2021, 10:05 PM

I've just hit a bug in kotlinx.serialization when trying to migrate my fullstack app to new KVision 😞 https://github.com/Kotlin/kotlinx.serialization/issues/1464 Complete disaster ... no workaround possible. If you exchange a lot of string data in your fullstack KVision app, better stay with 4.4 until a fix is released.

Tomas Kormanak

05/11/2021, 1:53 PM

@Robert Jaros I've created PR (https://github.com/rjaros/kvision/pull/266). It's a draft and I will add more states if you like it.

Kumaran Masilamani

05/12/2021, 5:46 PM

Hi, I have a question. Is there an easier way to convert the Select component (with multiple=true) into a Tag Input?

Tomas Kormanak

05/13/2021, 11:56 AM

Hi, I am trying to upgrade 4.5.0 and I have issue with webpack. I am not sure how to configure it properly (continue in thread...)

Tomas Kormanak

05/21/2021, 9:04 AM

I am going to create component like TabPanel with an option to collapse overflowing tabs in navigation instead of scrolling. Basically I would like to add dropdown at the end of TabPanel navbar with list of hidden tabs. I was thinking about extending TabPanel but it seems it is not possible achieve it just by extending it. Any ideas/recomendations how do design it?

Kumaran Masilamani

05/21/2021, 4:52 PM

Hi, I couldn't figure out, how to bind the DateTime component to a common Model's field with the type (ZonedDateTime/LocalDateTime/Long) in commonMain in my full-stack app. I can see examples with frontend bound to kotlin.js.Date type Do I need to add the dependency of kotlin.stdlib-js in the common and backend to bind this and then convert it before storing it in the database? Or is there a way in the frontend layer to convert the value to a Long?

Kumaran Masilamani

05/24/2021, 4:59 PM

Hi I found an issue in my project using the tabulator. Steps to reproduce:

In any editable Tabulator cell, edit the field
Change the content (don't press Enter)
Press tab (as some user behaviour to switch to the next cell)

* Sometimes, the content shows as updated, but sometimes the whole tabulator goes empty. If the content stays, any further action on the tabulator clears the whole table. In the console, it throws Uncaught TypeError: every time. I can reproduce the issue here too: https://rjaros.github.io/kvision-examples/showcase/#!/tabulator Can I raise a bug in github?

Title

Kumaran Masilamani

05/24/2021, 4:59 PM

Hi I found an issue in my project using the tabulator. Steps to reproduce:

In any editable Tabulator cell, edit the field
Change the content (don't press Enter)
Press tab (as some user behaviour to switch to the next cell)

Robert Jaros

05/24/2021, 5:02 PM

Yes

Kumaran Masilamani

05/24/2021, 5:02 PM

cheers.. In the tabulator, the tab key works actually..

http://tabulator.info/examples/4.9#editable

Robert Jaros

05/24/2021, 5:04 PM

Write whether you use built-in tabulator edit controls or KVision input components (I suspect the latter)

Kumaran Masilamani

05/24/2021, 5:11 PM

Done.. I used the same way from the example using. editorComponentFunction with TextInput

One more question on the tabulator. Is there any way I can add a ToolTip on the outer tabulator (tabulator-tableHolder)? I am thinking to show a tooltip/popover to instruct to click and edit the value..

Robert Jaros

05/24/2021, 7:18 PM

Do you use

dataTree = true

option in your project?

Kumaran Masilamani

05/24/2021, 7:34 PM

Nope. I explicitly set

dataTree = false

Robert Jaros

05/24/2021, 9:17 PM

Good 😉 I think there is a bug in original Tabulator with data tree, which I can't workaround. But there are also bugs in KVision code, which I've fixed. I'll do some testing and prepare new release.

👍 1

View count: 4