Haxe StablexUI adding to dynamic UI - haxe

I have UI in XML format:
<HBox layout:Column-cols="[-1,140,100,100,60,120,100,-1]">
<Widget />
<Text name="'name1'" text="'img.png'" />
<Text name="'good1'" text="'1'" />
<Text name="'bad1'" text="'9'" />
<Text name="'all1'" text="'10'" />
<Text name="'average1'" text="'0.980'" />
<Button name="'response1'" text="'Посмотреть'" defaults="'TableButton'" />
<Widget />
</HBox>
I tried to create a dynamic structure but there was a problem in the job argument with columns from the parent and functions by pressing the button. How it is implemented in stablex? (P.S xml structure works about like a demo interface example).
In Haxe code I did like this:
var logpage:VBox = cast UIBuilder.get('logpage');
var cols:Array<Int> = [ -1, 140, 100, 100, 60, 120, 100, -1];
var Rowlog = UIBuilder.create(HBox, {
//cast(Rowlog.layout, Column).cols = cols,
children : [
UIBuilder.create(Widget, {}),
UIBuilder.create(Text, {
text : json.image,
name : 'name'+num
}),
UIBuilder.create(Text, {
text : json.good_response,
name : 'good'+num
}),
UIBuilder.create(Text, {
text : json.bad_response,
name : 'bad'+num
}),
UIBuilder.create(Text, {
text : json.response_count,
name : 'count'+num
}),
UIBuilder.create(Text, {
text : json.response_time,
name : 'time'+num
}),
UIBuilder.create(Button, {
text : 'Посмотреть',
name : '',
defaults : 'TableButton'
//on-click : goDownloadLog();
}),
UIBuilder.create(Widget, {})
]
});
logpage.addChild(Rowlog);

Related

Getting the desired xml representation of an array from a plain object using nodejs

I am using nodejs and typescript.
It is necessary to get such an xml file structure from the object, in which the number of nested Rub tags is arbitrary:
<Doc file="jdsf35aasdg">
<Rub id="1" name="Руб1" />
<Rub id="2" name="Руб2" />
<Rub id="3" name="Руб3" />
</Doc>
The structure of the original object is not important to me, only the resulting xml.
The closest result I got was with this initial object:
const doc = {
Doc : {
$ : {
"file" : "jdsf35aasdg"
},
Rub : {
$: {
id : "1",
name : "Руб1"
}
}
}
};
const builder = new xml2js.Builder({
headless: true
});
return builder.buildObject(object);
<Doc file="jdsf35aasdg">
<Rub id="1" name="Руб1"/>
</Doc>
But I could not set an array instead of one element - an error of the object structure.
How do I need to set an object in order to get the result shown above as a result of the conversion to xml?
Thanks in advance!
If you want to construct XML then XSLT is a good choice, in Node.js and in client-side JavaScript you have XSLT 3.0 and XPath 3.1 support thanks to Saxon-JS (https://www.npmjs.com/package/saxon-js), so your example used in Node.js would look like
const SaxonJS = require("saxon-js");
var myObjects = [{ id : 1, name : 'Руб1' }, {id : 2, name : 'Руб2'}, { id : 3, name : 'Руб3'}];
var myFile = 'jdsf35aasdg';
const xslt = `<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="3.0" xmlns:xs="http://www.w3.org/2001/XMLSchema"
exclude-result-prefixes="#all">
<xsl:param name="file" as="xs:string"/>
<xsl:param name="rubs" as="map(*)*"/>
<xsl:output indent="yes"/>
<xsl:template name="xsl:initial-template">
<Doc file="{$file}">
<xsl:iterate select="$rubs">
<Rub id="{?id}" name="{?name}"/>
</xsl:iterate>
</Doc>
</xsl:template>
</xsl:stylesheet>`;
const result = SaxonJS.XPath.evaluate(`
transform(
map {
'stylesheet-text' : $xslt,
'delivery-format' : 'serialized',
'stylesheet-params' : map {
QName('', 'file') : $file,
QName('', 'rubs') : $rubs
}
}
)?output
`, [], {
params : {
xslt : xslt,
file : myFile,
rubs : myObjects
}
});
console.log(result);
and output e.g.
<?xml version="1.0" encoding="UTF-8"?>
<Doc file="jdsf35aasdg">
<Rub id="1" name="Руб1"/>
<Rub id="2" name="Руб2"/>
<Rub id="3" name="Руб3"/>
</Doc>
You can also run it in the browser:
var myObjects = [{ id : 1, name : 'Руб1' }, {id : 2, name : 'Руб2'}, { id : 3, name : 'Руб3'}];
var myFile = 'jdsf35aasdg';
const xslt = `<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="3.0" xmlns:xs="http://www.w3.org/2001/XMLSchema"
exclude-result-prefixes="#all">
<xsl:param name="file" as="xs:string"/>
<xsl:param name="rubs" as="map(*)*"/>
<xsl:output indent="yes"/>
<xsl:template name="xsl:initial-template">
<Doc file="{$file}">
<xsl:iterate select="$rubs">
<Rub id="{?id}" name="{?name}"/>
</xsl:iterate>
</Doc>
</xsl:template>
</xsl:stylesheet>`;
const result = SaxonJS.XPath.evaluate(`
transform(
map {
'stylesheet-text' : $xslt,
'delivery-format' : 'serialized',
'stylesheet-params' : map {
QName('', 'file') : $file,
QName('', 'rubs') : $rubs
}
}
)?output
`,
[],
{
params : {
xslt : xslt,
file : myFile,
rubs : myObjects
}
}
);
console.log(result);
<script src="https://martin-honnen.github.io/Saxon-JS-2.4/SaxonJS2.js"></script>

Material-UI - TypeScript - Autocomplete with getOptionLabel and renderOption

I am trying to display member and company using MUI Autocomplete.
I have suggestion array to show as options
[
{
"__typename": "Member",
"id": "ckwa91sfy0sd241b4l8rekas9jx",
"name": "my name 2",
"companyName": ""
},
{
"__typename": "Member",
"id": "ckwac4ijl25dsd80b4l8fpsrc64o",
"name": "my name",
"companyName": ""
},
{
"__typename": "Member",
"id": "ckwa8z6z7004dsd2b4l81m6ras9c",
"name": "my name 1",
"companyName": "A COMPANY"
}
]
I use this to display
<Autocomplete
id="free-solo-demo"
freeSolo
options={
suggestion &&
suggestion.map(
(suggestion: any) =>
suggestion.name
)
}
onChange={(event, value) =>
HandleUserProfile(value)
}
renderInput={(params) => (
<TextField
{...params}
placeholder="Search..."
onChange={handleChange}
/>
)}
/>
By using this I am getting options if only I search with member name.
I want to search with both company and member and need to customize UI of option.
I tried this
<Autocomplete
id="free-solo-demo"
freeSolo
options={suggestion}
getOptionLabel={(option) => `${option.name} ${option.companyName}`}
renderOption={(option)=>{
return <h1>{`${option.name}: ${option.companyName}`}</h1>
}}
onChange={(event, value) =>
HandleUserProfile(value)
}
renderInput={(params) => (
<TextField
{...params}
placeholder="Search..."
onChange={handleChange}
/>
)}
/>
but It is not working.
it shows error TypeScript error in ... Property 'name' does not exist on type 'never'. TS2339
First, you should make sure the name field doesn't have any duplicated values, that's why you should use the mandatory id field to select one.
And also you need to build a custom filter function or use createFilterOptions hook from Autocomplete component.
https://mui.com/components/autocomplete/#custom-filter
import Autocomplete, { createFilterOptions } from '#mui/material/Autocomplete';
...
const filterOptions = createFilterOptions({
stringify: ({ name, companyName }) => `${name} ${companyName}`
});
<Autocomplete
options={suggestion}
getOptionLabel={option => option.name}
filterOptions={filterOptions}
...
/>;

How to divide a column to have multiple rows in b-table in bootstrap vue?

I am creating SPA using vue. I have JSON array :
[
{
date: new Date(2076, 5, 10),
customer: {id: 0,name: "Foo bar",tol: "Some tol",city: "Some City",},
items: [
{code: "gs",name: "Generic Shoes",cost: 500,quantity: 5},
{code: "nf",name: "North Facing Jacket",cost: 5000,quantity: 5},
{code: "lp",name: "Lee Vice Jeans Pant",cost: 1500,quantity: 15}
],
}
]
which now contains one object that has date, customer and items primarily. I want to make table that will contain date, customer and items as fields, and each row of table will contain multiple row of items.
Something like this :
,
This thing has only one row, but as you can imagine there might be multiple row for multiple {date, customer, items[]}.
This was best I was able to do :
<b-container>
<b-table responsive="true" striped hover :items="DraftList" :fields="fields">
<template slot="[date]" slot-scope="data">{{data.value|formatDate}}</template>
<template slot="[customer]" slot-scope="data">{{data.value.name}}</template>
<template slot="[items]" slot-scope="data">{{data.value}}</template>
</b-table>
</b-container>
<script>
import { mapState } from "vuex";
export default {
data() {
return {
fields: [
{ key: "date", sortable: true },
{
key: "customer",
label: "Customer's Name",
sortable: true
},
{
key: "items",
label: "Item List",
sortable: true
}
]
};
},
computed: {
...mapState(["DraftList"])
},
mounted() {},
filters: {
formatDate: date => {
if (date instanceof Date) {
let month = "" + (date.getMonth() + 1);
let day = "" + date.getDate();
let year = date.getFullYear();
if (month.length < 2) month = "0" + month;
if (day.length < 2) day = "0" + day;
return [year, month, day].join("-");
}
return null;
}
}
};
</script>
I am stuck, what should I do now? I cannot properly term my searches either.
Solved it using v-for and rowspan
<b-table-simple responsive="true" hover outlined>
<colgroup>
<col />
<col />
</colgroup>
<colgroup>
<col />
<col />
<col />
</colgroup>
<colgroup>
<col />
<col />
</colgroup>
<b-thead head-variant="light">
<b-tr>
<b-th rowspan="2">Date</b-th>
<b-th rowspan="2">Customer's Name</b-th>
<b-th colspan="4">Items</b-th>
</b-tr>
<b-tr>
<b-th>code</b-th>
<b-th>Name</b-th>
<b-th>Cost</b-th>
<b-th>Quantity</b-th>
</b-tr>
</b-thead>
<b-tbody v-for="(draft,index) in DraftList" :key="index">
<b-tr>
<b-td :rowspan="draft.items.length+1">{{draft.date|formatDate}}</b-td>
<b-td :rowspan="draft.items.length+1">{{draft.customer.name}}</b-td>
</b-tr>
<b-tr v-for="(item, itemIndex) in draft.items" :key="itemIndex">
<b-td>{{item.code}}</b-td>
<b-td>{{item.name}}</b-td>
<b-td>{{item.cost}}</b-td>
<b-td>{{item.quantity}}</b-td>
</b-tr>
</b-tbody>
</b-table-simple>

Qlik Sense: Loading d3.js dependancy

I'm simply trying to load d3 into a Qlik Sense extension and running into issues, hoping someone can help as I'm sure it's relatively simple.
My template.html looks like this:
<div qv-extension style="height: 100%; position: relative; overflow: auto;" class="ng-scope">
{{ html }}
<div class="mydiv">
</div>
</div>
My javascript code looks like the below:
define( ["qlik",
"jquery",
"text!./style.css",
"text!./template.html",
"./d3/d3",
],
function (qlik, $, cssContent, template ) {'use strict';
$("<style>").html(cssContent).appendTo("head");
return {
template: template,
initialProperties : {
qHyperCubeDef : {
qDimensions : [],
qMeasures : [],
qInitialDataFetch : [{
qWidth : 10,
qHeight : 500
}]
}
},
definition : {
type : "items",
component : "accordion",
items : {
dimensions : {
uses : "dimensions",
min : 0
},
measures : {
uses : "measures",
min : 0
},
sorting : {
uses : "sorting"
},
settings : {
uses : "settings",
items : {
initFetchRows : {
ref : "qHyperCubeDef.qInitialDataFetch.0.qHeight",
label : "Initial fetch rows",
type : "number",
defaultValue : 500
}
}
}
}
},
support : {
snapshot: true,
export: true,
exportData : true
},
paint: function ( ) {
console.log("painting...");
var svg = d3.select(".mydiv")
.append("svg")
.attr("width", width)
.attr("height", height);
},
controller: ['$scope', function (/*$scope*/) {
}]
};
} );
and the error i get in the dev tools look like this:
My folder structure is:
What am I doing wrong? Why can't it see the d3 file?
adding d3 as an argument to your function:
function (qlik, $, cssContent, template , d3)
resolved this issue

Spacing between columns 'ResponsiveGridLayout' (SAPUI5)

How can I reduce the spacing in a ResponsiveGridLayout? In this image I want that there is no sapcing betweem the SearchField an the Button. I've searched via Google and take a close look in the API, but I found nothing.
EDIT:
var oResponsiveLayout = new sap.ui.layout.form.ResponsiveGridLayout({
columnsL : 3,
columnsM : 3,
columnS : 1
});
var oFormLayout = new sap.ui.layout.form.Form({
layout : oResponsiveLayout,
formContainers : [ new sap.ui.layout.form.FormContainer({
formElements : [ new sap.ui.layout.form.FormElement({
fields : [ this.oSearchField = new sap.ui.commons.SearchField({
width : "100%",
placeholder : "Suchtext / ID",
search : this._onSearchRequest.bind(this),
layoutData : new sap.ui.layout.GridData({
span : "XL9 L9 M6 S6"
})
}) ]
}) ]
}), new sap.ui.layout.form.FormContainer({
formElements : [ new sap.ui.layout.form.FormElement({
fields : [ this.oArrowUp = new sap.ui.commons.Button({
layoutData : new sap.ui.layout.GridData({
span : "XL1 L1 M2 S2"
}),
width : "100%",
icon : "resources/images/arrow_up.png",
tooltip : new sap.ui.commons.RichTooltip({
text : "Vorheriges Element der Suche anzeigen"
}),
press : this._onSearchArrowUpRequest.bind(this)
}), this.oArrowDown = new sap.ui.commons.Button({
layoutData : new sap.ui.layout.GridData({
span : "XL1 L1 M2 S2"
}),
width : "100%",
icon : "resources/images/arrow_down.png",
tooltip : new sap.ui.commons.RichTooltip({
text : "Nächstes Element der Suche anzeigen"
}),
press : this._onSearchArrowDownRequest.bind(this)
}) ]
}) ]
}),
Here is the solution; you can add empty Label before SearchField and set the labelSpan(M/L/S) according to your need.
It will also be responsive, so you are safe to use it.
class="sapUiSmallMarginEnd"
Use above class in SearchField in the xml view

Resources