I am using react-admin module from https://marmelab.com And used their "Edit" component. So the "Edit" component is calling a backend api that will fetch the data of record. my JSON data is:
{
id: '1',
szName: 'Very First',
iCNBPrice: '60',
iBEPrice: '215',
iEmailPrice: '555',
iMaxConvert: '0',
iConvertFee: '0',
iServiceCharge: '0',
iInvoiceEOM: [ 1 ],
iInvoiceDate: [ 1 ],
iInvoicePropertySold: [ 0 ],
iInvoiceRecurring: [ 0 ],
iDiscountAfterMagazine: '0',
iMagazineDiscountPeriod: '0',
iActive: '2',
iDeleted: '0',
dtDeleted: '0000-00-00 00:00:00',
iDeletedBy: '0',
iCreatedBy: '1',
dtCreated: '2019-08-07 00:00:00',
iUpdatedBy: '99',
dtUpdated: '2019-08-21 17:35:34',
price_product: [
{ szType: 'Tilstandsrapport', iPrice: '100' },
{ szType: 'Elinstallationsrapport', iPrice: '20' },
{ szType: 'Energimærket', iPrice: '30' },
{ szType: 'Kladde', iPrice: '40' },
{ szType: 'Inspiire', iPrice: '50' }
],
Nemforsikring: '5',
FRIDA: '5',
'Willis/DBF': '5'
}
And i want to make price_product fields with using "SimpleFormIterator" component but not able to get correct source name and label for fields ?
<ArrayInput source="price_product" label="" className="price_feild">
<SimpleFormIterator disableRemove disableAdd >
<NumberInput source={source.szType} validate={required()} style={{ display: 'inline', float: 'left', marginLeft: '20px' }}/>
</SimpleFormIterator>
</ArrayInput>
Not sure about how to add a dynamic label to the NumberInput but an alternative solution would be to add an additional (disabled) input and display the type that way.
<ArrayInput source="price_product" label="" className="price_feild" >
<SimpleFormIterator disableRemove disableAdd >
<DisabledInput
label='Product Type'
source='szType'
/>
<NumberInput
label='Product Price'
source='iPrice'
validate={required()}
style={{ display: 'inline', float: 'left', marginLeft: '20px' }}
/>
</SimpleFormIterator>
</ArrayInput>
Related
Trying to load an image in the center of a QR Code on a Vue3 project. Been reading through the API documentation online and it appears I'm supposed to load it as a string through the "image" parameter, but every time I try to load the image by QR Code disappears entirely.
The page I'm specifically working through is here: https://www.npmjs.com/package/qrcode-vue3
Below is the current working of the code:
<QRCodeVue3
:width="200"
:height="200"
value="HelloWorld"
:qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
image="https://cryptologos.cc/logos/ravencoin-rvn-logo.png"
:imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }"
backgroundColor="white"
:dotsOptions="{
type: 'dots',
color: '#26249a',
gradient: {
type: 'linear',
rotation: 0,
colorStops: [
{ offset: 0, color: '#26249a' },
{ offset: 1, color: '#26249a' },
],
},
}"
:backgroundOptions="{ color: '#ffffff' }"
:cornersSquareOptions="{ type: 'dot', color: '#000000' }"
:cornersDotOptions="{ type: undefined, color: '#000000' }"
/>
End goal I would prefer to load the image from my assets folder but I can't even get a simple image that works to load. I know it's possible because I see the examples QR codes on the npm page but no example code to demonstrate it.
Realized I needed to add the crossOrigin = 'Anonymous' as well as I implemented a v-bind to a url of my local image. Final working solution is as follows:
New component:
<QRCodeVue3
:width="200"
:height="200"
value="HelloWorld"
:qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
v-bind:image="iconUrl"
:imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 3, crossOrigin: 'Anonymous' }"
backgroundColor="white"
:dotsOptions="{
type: 'dots',
color: '#26249a',
gradient: {
type: 'linear',
rotation: 0,
colorStops: [
{ offset: 0, color: '#26249a' },
{ offset: 1, color: '#26249a' },
],
},
}"
:backgroundOptions="{ color: '#ffffff' }"
:cornersSquareOptions="{ type: 'dot', color: '#000000' }"
:cornersDotOptions="{ type: undefined, color: '#000000' }"
/>
Loading image:
export default {
name: "HomeView",
components: {
QRCodeVue3,
},
data() {
return {
iconUrl: require('../assets/ravencoin-rvn-logo.png')
};
},
I have a use case whereby sequential numbers need to be displayed in a table of data in the UI of an app, beginning at 1. The app is built using Vue and Buefy for the UI component library. Here is a screenshot of some sample data in such a table:
This needs to have a third column added and should display 1 in the first row and 2 in the second row.
I looked in the Buefy docs to see if their table component has built-in capability to do this but didn't see anything that fit. If that is the case, the data passed to the table component will need to provide it.
Since the format of the data passed to the table component is an array of objects I was thinking there might be a way to use each object's index, incremented by 1, for this purpose. But I'm not sure how to get this:
const data = [
{ color: 'blue', size: 'large', height: 'tall' },
{ color: 'green', size: 'medium', height: 'short' },
{ color: 'purple', size: 'small', height: 'average' }
];
to be this:
const data = [
{ id: '1', color: 'blue', size: 'large', height: 'tall' },
{ id: '2', color: 'green', size: 'medium', height: 'short' },
{ id: '3', color: 'purple', size: 'small', height: 'average' }
];
I tried the following but it does not give the desired outcome:
console.log([...data, ...Object.keys(data)];
How can the desired end result be achieved? I'm looking for a simple approach, if possible.
Also, I was concerned about what happens if an element gets removed from the original array of objects...would that mess up the sequential numbering that's based on the index number? I tested that situation by executing data.splice(0,1); but examining the results in the console, the objects appear to get re-indexed and therefore it shouldn't be an issue. Unless someone knows otherwise.
If I understood you correctly try with index:
new Vue({
el: '#demo',
data() {
return {
items: [
{ color: 'blue', size: 'large', height: 'tall' },
{ color: 'green', size: 'medium', height: 'short' },
{ color: 'purple', size: 'small', height: 'average' }
]
}
},
methods: {
del(i) {
this.items.splice(i, 1)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div v-for="(item, i) in items" :key="i">
<div>{{ i+1 }} - {{ item.color }}</div>
<button #click="del(i)">delete</button>
</div>
</div>
I am creating a graph using cytoscape.js and I have compounded nodes which are inside the parent node. I would like to have the title of the main/parent node at the top of the node but inside the node. Is that possible in cytoscape?
I have tried using using halign and valign. Whenever I use top value, it shows outside the box.
Is there a extension or a plugin that lets us do it?
Example with child node: https://stackblitz.com/edit/cytoscape-call-method-child-efmbaj?file=src%2Fapp%2FstylesheetObject.ts
As you can read here, you can only place labels inside a node with the center option, a good configuration (label inside at the top) requires a margin to be added to your label:
.selector(':parent')
.css({
'text-valign': 'center',
// the next line moves the parents label up to the top of the node and 5px down to create a padding
'text-margin-y': function (node) { return -node.height() + 5 }
})
Here is a working example:
var cy = cytoscape({
container: document.getElementById('cy'),
style: cytoscape.stylesheet()
.selector(':parent')
.css({
'text-valign': 'center',
'text-margin-y': function(node) {
return -node.height() + 5
}
})
.selector('node')
.css({
'height': 'data(size)',
'width': 'data(size)',
'border-color': '#000',
'border-width': '1',
'content': 'data(name)'
})
.selector('edge')
.css({
'width': 'data(strength)'
})
.selector('#1')
.css({
'background-color': 'red'
})
.selector('#4')
.css({
'background-color': 'green'
}),
elements: {
nodes: [{
data: {
id: '1',
size: 50,
name: 'a'
}
},
{
data: {
id: '2',
size: 20,
name: 'b',
parent: '1'
}
},
{
data: {
id: '3',
size: 40,
name: 'c',
parent: '1'
}
},
{
data: {
id: '4',
size: 50,
name: 'd'
}
},
{
data: {
id: '5',
size: 20,
name: 'e',
parent: '4'
}
},
{
data: {
id: '6',
size: 40,
name: 'f',
parent: '4'
}
}
],
},
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 75%;
position: absolute;
left: 0;
top: 0;
float: left;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
What I understand is that you want to put the parent label inside the box above child? apologies if I'm wrong
If so, My solution will be to add a padding and then apply margin for alignment.
Modified your example
Styles updated:
'padding-top':60
selector: 'node',
css: {
content: 'data(label)',
'text-valign': 'center',
'text-halign': 'center',
'font-size': 28,
'padding-top':60
}
'text-valign': 'top', and 'text-margin-y': function(node) {
return node.height() - 10;
}
selector: 'node[type="parent"]',
style: {
shape: 'rectangle',
'background-color': 'grey',
width: 300,
height: 100,
'font-size': 25.5,
'font-family': 'Lato, Helvetica Neue, Helvetica, Arial, sans-serif',
color: 'black',
'text-valign': 'top',
'text-halign': 'center',
'text-margin-y': function(node) {
return node.height() - 10;
}
}
The frontend uses angular 6 and the api uses asp.net core.
When you add an image to the body, it asks the api to save the file on the server.
By the way, when data is saved, it is saved as base64 bytes.
The database should be stored under 4000 bytes using Oracle.
Is there any way to upload an image via the image path?
I hope you can tell me how to write the uploadImagePath callback function in the angular example.
config: any = {
airMode: false,
tabDisable: true,
placeholder: '내용을 입력하세요.',
tabsize: 2,
height: '300px',
uploadImagePath: this.REST_API_ADDR + 'File/summernote',
popover: {
table: [
['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
],
image: [
['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
['float', ['floatLeft', 'floatRight', 'floatNone']],
['remove', ['removeMedia']],
],
link: [['link', ['linkDialogShow', 'unlink']]],
air: [ ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear',],],],
},
toolbar: [
['misc', ['codeview', 'undo', 'redo']],
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
['fontsize', ['fontname', 'fontsize', 'color']],
['para', ['style', 'ul', 'ol', 'paragraph', 'height']],
['insert', ['table', 'picture', 'link', 'video', 'hr']],
],
fontNames: ['Helvetica', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Roboto', 'Times'],
}
I have a Grid and I would like to change the background color, do you know how to do it ?
Thanks for your help, have a nice day.
Here is my code :
var jsonStore = new dojo.data.ItemFileReadStore({url: "..." ?>"});
var model = new dojox.grid.data.DojoData(null,jsonStore,{jsId: 'model', rowsPerPage: 20, query: { date: '*' }});
var view1 = {
cells: [[
{name: 'x', width: "80px", field: "date"},
{name: 'y', width: "50px", field: "weight"},
{name: 'z', width: "100px", field: "nurse"}
]]
};
var layout = [ view1 ];
<div id="gridWeight" dojoType="dojox.Grid" model="model" structure="layout" autoWidth="true" style="height: 150px"></div>
You can either use the onStyleRow event or adapt the CSS directly - in your case:
.tundra #gridWeight .dojoxGridRow,
.tundra #gridWeight .dojoxGridRowOdd {
background: red;
}