Relationship trouble - Mongo collections and MeteorJS - javascript

I am using Meteor, and trying to have one mongo collection that will contain products, and one that contains users.
Products have prices, but I also gave one product(as a test for now) a "dealerPrices" subcollection that contains an object like this:
"partprice" : "98",
"dealerPrices" : {
"YH" : "120",
"AB" : "125"
},
My hope is to have a table on my site with a column that displays the 'partprice' and next to it another column that shows the price for the current logged in dealer.
I could do a completely seperate collection for dealerPrices, but I am not sure which way is more efficient since I am new to Mongo.
My issue is targeting that number in the field with the "YH" or "AB" depending on the logged in user, the Users collection has a subcollection called "profile" that has a field called "code" that will match that "YH" or "AB" which is a unique code for each dealer.
I am using handlebars to display the data in Meteor, here is a bit of the html for displaying the table rows.
Larger code section:
<template name="products">
<h2> All Products <span class="productCount"></span></h2>
<table class="table table-condensed table-striped table-hover table-bordered">
<thead>
<tr>
<th class="toHide">Unique ID</th>
<th>Print</th>
<th>Product</th>
<th>FF Code</th>
<th>Base Price</th>
<th>My Price</th>
</tr>
</thead>
{{> AllProducts}}
</template>
<template name='AllProducts'>
{{#each row}}
<tr class='productRow'>
<td class="product-id toHide">{{_id}}</td>
<td class="print"><input type="checkbox" class="chkPrint"/></td>
<td class="product-name">{{partname}}</td>
<td class="product-code">{{code}}</td>
<td class="product-az-price">${{partprice}}</td>
<td class="product-dealer-price">${{dealerPrices.YH}}</td>
</tr>
{{/each}}
</template>
I hope I am explaining this correctly, basically I am trying to find some alternative to joins and having a table for products, a table for the dealer-product-dealerPrice relationship and a user accounts table in a relational database.

You probably want to do this in a Template helper. First, create a template for each loop-through, instead of just using {{#each}}:
<template name="fooRow">
... table rows
<td class="product-dealer-price">{{userBasedThing}}</td>
</template>
Then, add a Template helper for this new fooRow template:
Template.fooRow.userBasedThing = function () {
var result = "";
if (Meteor.userId() && this.dealerPrices)
result = this.dealerPrices[Meteor.user().profile[0].code];
return result;
}
Then just get rid of the stuff in the each loop, and replace it with:
{{#each row}}
{{> fooRow}}
{{/each}}
That should do it!

Related

use bootstrap filter in laravel pagination

I am using bootstrap filter in my data table in laravel for searching data. As I am using laravel pagination in I have 30+ pages. But the filter only searching data from the current page. But I want to search data from the full data table ( all the 30 pages)
blade:
<input type="text" id="myInput" class="form-control">
<table class="table table-sm text-sm table-hover">
<thead>
<tr>
<th>Start Date</th>
<th>End Date</th>
<th>No Of Days</th>
</tr>
</thead>
<tbody>
#foreach($leaves_list as $key => $data)
<tr>
<td>
{{$data->leave_start_date}}
</td>
<td>
{{$data->leave_end_date}}
</td>
<td>
{{$data->number_of_days_off}}
</td>
</tr>
</tbody>
</table>
script:
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".table tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
controller:
$leaves_list = DB::table('employee_leave')
->orderBy('employee_leave_id', 'desc')
->paginate(100);
return view("leaves.index",compact('leaves_list'));
So I want to the search result of all the pages of pagination
Better late than never, huh?
I believe you are around to mid level today, but I hope I can help some other folks on here.
The Laravel Requests return a object than contains a key called "next_page_url".
To check this info, if you dd(); the response, that is what you'll receive:
{#294 ▼ // app\Http\Controllers\FooController.php:22
+"current_page": 1
+"data": array:7 [▶]
+"last_page": 3
[...]
+"next_page_url": "http://127.0.0.1:8000/api/list?page=2"
[...]
}
Is on next_page_url that you gonna have the remaining objects of your requests.
Now, if you need all the objects non-paginated, I suggest you to create another Request, without using paginate methods, but the Where clauses to filtering, in this case.
DB::table('employee_leave')
->orderBy('employee_leave_id', 'desc')
->where('foo', '<>', 'bar');
Don't miss to use this requests only when necessary, avoiding too many requests on the database.
Best regards,
Bruno.

dynamic handlebar table creation

i cant dynamically create table using handlethe bars. "arrays" is an array of objects (each object has id, name, description, and category).
I dont know why the code below worked for li element insertion but not for table. Can some one help?
let arrays = [{ id: 0, name: "name0", description: "this is is name0","category":1} ,{ id: 1, name: "name1", description: "this is is name1","category":2},...]
let template =Handlebars.compile($('#template1').html())
let html = template({arrays: arrays})
$('#div1').append(html)
<template id="template1">
<table>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>description</th>
</tr>
</thead>
<tbody>
{{#each arrays}}
<tr>
<td>{{id}}</td>
<td>{{name}}</td>
<td>{{desciption}}</td>
</tr>
{{/each}}
</tbody>
</table>
</template>
the expectation is a table with just id name and description but not category
you're trying to insert a template after having processed the compiling. Your template won't work except for the parts that are not related to handlebars. If you want to process the template once you've done the insert in your HTML file then try to do your template compiling after the append and not before.
Usually I use jquery $(document).ready(...) to do such delaying.

Error in while looping in *ngFor in angular

I have the JSON of single object coming as:
I achieved this data by calling the API in component.ts file which is as follows
/* for auditgorup selecitonm */
this.http.get('http://localhost:8080/api/selections/getAllAuditGroupSelections')
.subscribe((datas: any[]) => {
this.auditSelection = datas;
console.log(this.auditSelection);
// You'll have to wait that changeDetection occurs and projects data into
// the HTML template, you can ask Angular to that for you ;-)
this.chRef1.detectChanges();
// Now you can use jQuery DataTables :
const tables: any = $('#nepal');
this.dataTable = tables.DataTable();
});
The view is as follows
<table id="nepal" class="table table-bodered">
<thead>
<tr>
<th>Selection No</th>
<th>SelectionDate</th>
<th>SelectedBy</th>
<th>PanEximNumber</th>
<th>Name</th>
<th>Address</th>
<th>PhoneNumber</th>
<th>SelectionType</th>
<th>Group Desc</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let nas of auditSelection">
<td>{{nas.selectionId}}</td>
<td>{{nas.selectionDate}}</td>
<td>{{nas.selectedBy}}</td>
<td>{{nas.panEximNumber}}</td>
<td>{{nas.name}}</td>
<td>{{nas.address}}</td>
<td>{{nas.phoneNumber}}</td>
<td>{{nas.selectionType}}</td>
<td>{{nas.assignmentAudit.auditorGroup.groupDesc}}</td>
</tr>
</tbody>
</table>
At this last line of <td>{{nas.assignmentAudit.auditorGroup.groupDesc}}</td> I cannot get the required value.
The output display should be "g1".
I am unable to comment, so adding it over here. assignmentAudit is an array, so try accessing using index
As per the analysis of the JSON structure the assignmentAudit is an array
so you can only access it with the index positions.
If you are sure the assignmentAudit is an array with single value then you can use
<td>
{{nas.assignmentAudit[0].auditorGroup.groupDesc}}
</td>
If assignmentAudit has multiple values and is not deterministic you can try
<td>
<span *ngFor="let assignmentAudit of nas.assignmentAudit">
{{assignmentAudit.auditorGroup.groupDesc}}
</span>
</td>
nas.assignmentAudit[0].auditorGroup.groupDesc
That would work. The section you are trying to access is an array. So picking the first index would then make it defined
groupDesc is insideauditorGroup loop so you cannot do like to get value inside loop. Try like that.
<!-- Angular -->
<ul>
<li *ngFor="let item of nas.assignmentAudit.auditorGroup;">
</li>
</ul>
or <td>{{nas.assignmentAudit.auditorGroup[0].groupDesc}}</td>

How to move item in collection in meteor?

I have a wait list type application I am creating. I currently have it where my table will populate with the collection. I want to be able to press a button and that row in the table be moved to the bottom of the table. Here is where the table is populated.
<tbody>
{{#each student}}
<tr class="accordion-toggle mainRow"> <!--mainRow if want whole row to change green-->
<td>{{> expandButton}}</td>
<td>{{Name}}</td>
<td>{{PhoneNumber}}</td>
<td>{{VipID}}</td>
<td class="selectionChange">{{> buttonSelections}}</td>
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<div class="accordian-body collapse" id="{{this._id}}">
<table class="table table-striped">
<thead id="innter-table">
<tr class="info">
<th id="inner-heading">Reason for Visit</th>
<th id="inner-heading">Current Major</th>
<th id="inner-heading">Intended Major</th>
<th id="inner-heading">Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ReasonForVisit}}</td>
<td>{{CurrentMajor}}</td>
<td>{{IntendedMajor}}</td>
<td>{{Comments}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
{{> autoformModals}}
{{/each}}
</tbody>
Here is the template for the button:
<template name="buttonSelections">
...//other code for different buttons
<button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-arrow-down"></span>
</button>
... //other code for different buttons
</template>
I know I'll need some type of event for the button. but I'm not sure how to go about getting the item in the collection to move in the collection so that when it populates the table again, it will move to the bottom.
How do I get the collection to reorder itself so that the selected item will move to the end of the collection?
you won't "move" the item in your collection, what you'll do is sort the collection on the client so it shows how you want. i don't see the relevant helper, but it would all look something like this:
<template name="Students">
{{#each student in students}}
{{student.name}}
{{/each}}
</template>
in the JS, it's pretty standard stuff: subscribe to the collection in the onCreated(), then the helper sorts the collection how you want. here, i'm making up a field, "waitListedTime", by which the collection sorts. your button press could timestamp it for the selected student, and the helper would run reactively and your student list would update on screen.
Template.Students.onCreated(function() {
this.subscribe('students');
});
Template.Students.helpers({
students() {
return Students.find({}, {sort: {waitListedTime: 1}});
}
});

Using nested ng-repeat with object arrays angular

Here is what I am trying to do:
<tr ng-repeat = "data in tabularData track by $index" >
<td ng-repeat ="(key,value) in usedAttributes" >{{data[key]}}</td>
</tr>
This DID work when the tabular Data was structured like this:
[3920F0-3434D3-ADF-3SDF:[{CreatedBy: "John Doe", CreatedDate: "10-20-2016"}]
However when I flattened it out, it looks more like this:
[{CreatedBy: "John Doe", CreatedDate: "10-20-2016",PrimaryID:"3920F0-3434D3-ADF-3SDF"}]
This does not work. I feel like I'm missing something very obvious.
usedAttributes is just a simple object array containing attributes (column data). The idea is that the user can choose the attributes they want to get so the data table is very dynamic. For this example, the usedAttributes may look like this:
["CreatedBy": [{Checked:false}],"CreatedDate":[{Checked:true}]]
Thus the user wants to see these two attributes although more exists.
You can do this,
<div ng-controller="listController">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, value) in tabularData[0]">{{key | uppercase }}
</th>
</tr>
<tbody>
<tr ng-repeat="val in tabularData">
<td ng-repeat="cell in val">
<input type="text" ng-model="cell">
</td>
</tr>
</tbody>
</table>
</div>
DEMO

Categories