I want to push my reactive form-data value inside a list and show it in the mat-table.
For now, my dataSource for mat-table is in this format.
Array(1) 0:{ brand: "" color: "" description: "" image: "" item_name:
"asd" manufacturer: "" other: "" storage: "" tax: "" type: "Goods"
unit: "pc"}
front-end nothing is rendering only header of the table are displayed
Ts File:
itemEntryForm:FormGroup;
imagePreview:string;
dataSource=[]
displayedColumns: string[] = ['type', 'name', 'description', 'unit'];
ngOnInit(): void {
this.itemEntryForm=this._formbuilder.group({
type : ['Goods'],
item_name : ['',Validators.required],
description : ['',Validators.required],
unit : ['pc',Validators.required], })
}
addItem(){
this.dataSource.push(this.itemEntryForm.value)
// this.dataSource=this.itemEntryForm.value
console.log(this.dataSource)
}
HTML:
<table mat-table [dataSource]="dataSource" *ngIf="dataSource" class="mat-elevation-z8 mx-auto">..
Write it like this instead:
addItem(){
this.dataSource = [...this.dataSource, this.itemEntryForm.value]
}
This will create a new reference for the list, allowing the mat-table to pick up on the changes. Alternatively you could inject ChangeDetectorRef, and run .detectChanges() - this should do the trick as well.
Related
I'm having some trouble understanding b-form-select from bootstrap-vue.
I have a list of object lets say
factories = [{ id: 1, name: "A" }, { id: 2, name: "B" }]`
And my select as
<b-form-select
v-model="factory"
:options="factories"
value-field="id"
text-field="name"
/>
But how would I do to get the full selected object rather than just the id without having to declare options manually ?
This works but it feels 'hacky'.
<b-form-select v-model="factory">
<option v-for="f in factories" :value="f" :key="f.id">{{f.name}}</option>
</b-form-select>
If not possible, any reasons why ?
This doesn't work because <b-form-select> requires the options array to take the form of:
[{value: factory, text: factory.name}]
Put another way, <b-form-select> doesn't know what to do with [{id: 1, name: 'A'}]
To make your first form work, you'll need to transform the array 'factories' into an array the can use:
const factories = [{ id: 1, name: "A" }, { id: 2, name: "B" }]
var factoriesSelectList = []
factories.forEach((factory, index, mechanicsArray) => {
var selectListOption = {
value: factory,
text: factory.name
}
factoriesSelectList.push(selectListOption)
})
Then, in your template:
<b-form-select
v-model="factory"
:options="factoriesSelectList"
/>
Note: This probably isn't much different than doing it in the template as in your second form. I've not looked, but I'm betting the resulting javascript is similar.
Here I want to add multiple thoughts in one mutation query.
How can I achieve this:
mutation{
savethoughts(data: [{id:1,name:"a"},data: {id:2,name:"b"}]){
id
}
}
For save multiple records in database you need to follow every steps carefully
For example
mutation{
setMultipleRecord(data: [{title: "first Title", name: "First"},
{title: "Second Title", name: "Second"}])
}
You must have schema type
`
.......
input Record {
title: String!
name: String!
}
.....
`
And add Mutation as given that
type Mutation/type RootMutation { {
......
setMultipleRecord(data: [Record]): String!
}
Here you can see Record is input type schema object where is data parameter holding variable which we are using to get data object.
you can give any name instead of data also change in the argument in mutation
Now in resolver function a
Mutation: {
setMultipleRecord: async(args, { data }) => {
console.log(data)
//Here data contain data which you passed which is
// [{title: "first Title", name: "First"},
// {title: "Second Title", name: "Second"}]
// Perform operation as your requirement
// Please return String
}
}
Now you can change name as par your requirement of object.
You made it successfully...
I have made the following collection in meteor:
CodesData = new Mongo.Collection('CodesData');
CodesDataSchema = new SimpleSchema({
code: {
label: "Code",
type: Number
},
desc: {
label: "Description",
type: String,
}
});
CodesData.attachSchema(CodesDataSchema);
Now I want to prefill this collection with some data.
For example: code: 1 desc: "hello".
How can I do this manually and easily?
You can use Meteor.startup to run some actions on your collection once the server app has been loaded and is starting:
CodesData = new Mongo.Collection('CodesData');
CodesDataSchema = new SimpleSchema({ code: { label: "Code", type: Number }, desc: { label: "Description", type: String, } });
.attachSchema(CodesDataSchema);
Meteor.startup(()=>{
// Only fill if empty, otherwise
// It would fill on each startup
if (CodesData.find().count() === 0) {
CodesData.insert({ code: 1, description: 'some description' });
}
});
If you have a lot of data to prefill you can define it in a JSON and load it on startup:
Consider the following json named as pre:
{
codesdata: [
{ code: 1, description: 'foo' },
{ code: 7, description: 'bar' }
]
}
Meteor.startup(()=>{
const preData = JSON.parse( pre );
preData.codesData.forEach( entry => {
CodesData.insert( entry );
});
});
This allows you to manage your prefill more easily and also let's you version control the json if desired ( and no sensitive data is revealed ).
Considerations:
The function Meteor.startup runs on each start. So you should consider how to avoid unnecessary inserts / prefill that create doubles. A good way is to check if the collection is empty (see first example).
You may put the startup code an another js file in order to separate definitions from startup routines.
The current script does not differentiate between server or client. You should consider to do this on server and create a publication / subscription around it.
More readings:
https://docs.meteor.com/api/core.html#Meteor-startup
Importing a JSON file in Meteor
https://docs.meteor.com/api/core.html#Meteor-settings
I'm really stuck with this code and can't find the solution. I have created an Ionic app with connection to Firebase and my auth is working fine; can pass the data, but I can't see how should I pass the following code correctly. Form Structure:
My code for passing data, the Service:
factory('Products', function($firebaseArray) {
var productsRef = new Firebase("https://kidsmoments-19623.firebaseio.com/momentos");
var products =$firebaseArray(productsRef.child('products'));
var Products = {
saveProduct: function (product, image) {
var newProduct = {
name: product.name
, tagline: product.tagline
, description: product.description
, price: product.price
, image: image
};
return products.add(newProduct).then(function () { console.log('added');
})
}
};
return Products;
}
)
It looks like you forgot to add 'Products' as a dependency in the controller you were working on.
Also you should try Firebase three-way-binding:
.factory("Products", ["$firebaseObject", "$rootScope",
function($firebaseObject, $rootScope) {
return function() {
// create a reference to the database where our Products is.
var ref = ($rootScope.ref.child("Products"))
return $firebaseObject(reg);
}
}
])
And from the controller:
Products().$bindTo($scope, "products");
Now any change that you do to $scope.products will be synced to Firebase
I believe you have an entity products, so make a reference to that entity and push your data like this:
var productsRef = new Firebase("https://kidsmoments-19623.firebaseio.com/momentos/products");
productsRef.push({
name: product.name,
tagline: product.tagline,
description: product.description,
price: product.price,
image: image
})
Update About the error that you get please make sure you have injected the provider to your settings controller
I have a grid, which has a payments store. The Payment model, which it's store uses, has a field which is a date.
I've already implemented grouping by date, but that gives me a group of entries for each day, like this...
What I want to do is have a group for each month instead of each day.
Any ideas on how to do this?
Ok, nevermind. I just found a way to do this. I created a field using convert to find the month of the payment and used that field as the grouping field.
I'll leave this posted in case anyone ever needs it.
This is the Payment model...
Ext.define('Ext.model.Payment',{
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
fields: [
{
name: 'n_id_payment',
type:'integer'
},{
name: 'n_amount',
type:'integer'
}.....,
..... Several other fields .....
},{
name:'payment_month',
type:'date',
convert:function(model, record){
var today = new Date(record.data.dt_date);
var dd = today.getDate();
var mm = today.getMonth();
var month=new Array();
month[0]="Enero";
month[1]="Febrero";
month[2]="Marzo";
month[3]="Abril";
month[4]="Mayo";
month[5]="Junio";
month[6]="Julio";
month[7]="Agosto";
month[8]="Septiembre";
month[9]="Octubre";
month[10]="Noviembre";
month[11]="Diciembre";
return month[mm];
}
}
]
})
And this is the payment store...
Ext.define('Ext.store.PaymentsStore', {
extend: 'Ext.data.Store',
requires: [
'Ext.model.Payment',
'Ext.data.proxy.Memory'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
async:false,
groupField:'payment_month',
model: 'Ext.model.Payment',
method:'POST',
proxy: {
isSynchronous:true,
type: 'ajax',
url: 'http://localhost/index.php/TblPayment/fetch',
reader:{
type :'json',
method:'POST'
}
}
}, cfg)]);
}
});
This is the groupingFeature config...
var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl:'{name}'
});
The grid should have this property set too features: [groupingFeature]
And in case you're stuck with an error with grouping, something about getRowStyleTableEl being null... There's a workaround for that issue...
Ext.override(Ext.view.Table, {
/*
Temporary fix for bug in ExtJS 4.2.1. See: sencha.com/forum/showthread.php?264657-Exception-When-Selecting-First-Grid-Row
*/
getRowStyleTableElOriginal: Ext.view.Table.prototype.getRowStyleTableEl,
getRowStyleTableEl: function() {
var el = this.getRowStyleTableElOriginal.apply(this, arguments);
if (!el) {
el = {
addCls: Ext.emptyFn,
removeCls: Ext.emptyFn,
tagName: {}
}
}
return el;
}
});