Hi
here is my main search component:
search.js
import Ember from 'ember';
export default Ember.Component.extend({
or: 1,
and: null,
andor: "/'OR/'",
nebid: null,
catalognumber: null,
organism: null,
depositor: null,
productionstatus: null,
productname: null,
depositdate: null,
actions: {
reloadModel() {
this.refresh();
}
},
actions: {
search12: async function () {
let { andor, and, or, nebid, catalognumber, organism, depositor, productionstatus, productname, depositdate, erhost } = this;
or = and ? 0 : 1;
console.log('OR: ' + or);
console.log('AND: ' + and);
andor = or;
console.log('andor: ' + andor);
var andor2 = 'OR';
if(andor == 0) {andor2 = 'AND';}
this.set('andor2', andor2);
console.log('andor2: ' + andor2);
var whiteSpace = /^\s*$/;
catalognumber = whiteSpace.test(catalognumber) ? null : catalognumber;
organism = whiteSpace.test(organism) ? null : organism;
depositor = whiteSpace.test(depositor) ? null : depositor;
productionstatus = whiteSpace.test(productionstatus) ? null : productionstatus;
productname = whiteSpace.test(productname) ? null : productname;
depositdate = whiteSpace.test(depositdate) ? null : depositdate;
console.log('catalognumber: ' + catalognumber);
///Test with sample data...
// let data = { andor, nebid, catalognumber, organism, depositor, productionstatus, productname, depositdate, erhost };
// console.log(data);
// data = Object.keys(data).map((key) => {
// let obj = { };
// obj[key] = data[key];
// return obj;
// });
// this.set('data', data);
///Test with sample data...
fetch("http://localhost:3000/routes", {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
record: {
andor,
nebid,
catalognumber,
organism,
depositor,
productionstatus,
productname,
depositdate
},
})
}).then(res => {
return res.json()
}).then((data) => {
var rowsCount14 = data.rowsAffected[14];
console.log('rowsCount14: ' + rowsCount14);
var rowsCount15 = data.rowsAffected[15];
console.log('rowsCount15: ' + rowsCount15);
if (data.rowsAffected[15]) {
var rowsCount = data.rowsAffected[15];
} else {var rowsCount = data.rowsAffected[14]}
if (data.recordsets[0][0].nebid) {
var neb_id = data.recordsets[0][0].nebid;
}
else {var neb_id = null;}
if (data.rowsAffected[15]) {
var rowsCount = data.rowsAffected[15];
} else {var rowsCount = data.rowsAffected[14];}
console.log('rowsCount: ' + rowsCount);
console.log('nebid: ' + neb_id);
if(neb_id !== null && neb_id !== '') {
this.set('h_nebid', 'NEBID');
this.set('h_catalognumber', 'Catalog Number');
this.set('h_organism', 'Organism');
this.set('h_depositor', 'Depositor');
this.set('h_productionstatus', 'Production Status');
this.set('h_productname', 'Product Name');
this.set('h_depositdate', 'Deposit Date');
this.set('rowsCount', rowsCount);
this.set('data', data.recordset);
console.log('DataFound');
console.log(data);
}
}).catch((err,data) => {
var rowsCount = 0;
this.set('rowsCount', rowsCount);
this.set('data', 'no records found!');
console.log('NoDataFound');
console.log(data);
this.set('error', err);
console.log('err1: ' + err);
});
},
}
});
here is the search.hbs
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="header" class="header1">
<img src="assets/images/neb_logo_proces_StrainSearch.jpg" width="25%"/>
</div>
<br>
{{#if data}}
<style>
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
}
</style>
<strong><font size="5">There are {{this.rowsCount}} rows matching the following criteria:</font></strong><br>
<div><strong><font size="5"><u>You Searched For:</u><br>NEBID: {{this.nebid}}</font></strong>
<br>
{{#if this.catalognumber}} {{this.andor2}}<u> CatalogNumber contains:</u> <strong><font size="5">{{this.catalognumber}}</font></strong> {{/if}}
{{#if this.organism}} {{this.andor2}}<u> Organism contains:</u> <strong><font size="5">{{this.organism}}</font></strong> {{/if}}
{{#if this.depositor}} {{this.andor2}}<u> Depositor contains:</u> <strong><font size="5">{{this.depositor}}</font></strong> {{/if}}
{{#if this.productionstatus}} {{this.andor2}}<u> ProductionStatus contains:</u> <strong><font size="5">{{this.productionstatus}}</font></strong> {{/if}}
{{#if this.productname}} {{this.andor2}}<u> ProductName contains:</u> <strong><font size="5">{{this.productname}}</font></strong> {{/if}}
{{#if this.depositdate}} {{this.andor2}}<u> DepositDate contains:</u> <strong><font size="5">{{this.depositdate}}</font></strong> {{/if}}
</div>
{{#if this.h_nebid}}
<div class="table-wrapper">
<br><br>
<button {{on "click" (action "reloadModel")}}>Search Again?</button>
<br><br>
<table>
<thead>
<tr>
<th>{{this.h_nebid}}</th>
<th>{{this.h_catalognumber}}</th>
<th>{{this.h_organism}}</th>
<th>{{this.h_depositor}}</th>
<th>{{this.h_productionstatus}}</th>
<th>{{this.h_productname}}</th>
<th>{{this.h_depositdate}}</th>
</tr>
</thead>
<tbody>
{{#each data as |record|}}
<tr>
<td>{{record.nebid}}</td>
<td>{{record.catalognumber}}</td>
<td>{{record.organism}}</td>
<td>{{record.depositor}}</td>
<td>{{record.productionstatus}}</td>
<td>{{record.productname}}</td>
<td>{{record.depositdate}}</td>
</tr>
{{else}}
{{/each}}
</tbody>
</table>
</div>
{{/if}}
{{else}}
<div>
<form class="form-style-4" id="userSubmit" {{action "search12" on="submit"}}>
<div class="form-check">
<input class="form-check-input" type="radio" name="andorRadios" id="or" checked={{this.or}} onclick={{action (mut this.or) value="target.checked"}}>
<label class="form-check-label" for="or">
SEARCH TYPE "OR"
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="andorRadios" id="and" checked={{this.and}} onclick={{action (mut this.and) value="target.checked"}}>
<label class="form-check-label" for="and">
SEARCH TYPE "AND"
</label>
</div>
<br>
<hr>
<label for="nebid">NEBID:</label>
<input id="nebid" type="number" max="99999999" min="0" inputmode="numeric" value={{this.nebid}} oninput={{action (mut this.nebid) value="target.value"}}><br><br>
<label for="catalognumber">Catalog Number:</label>
<input id="catalognumber" value={{this.catalognumber}} oninput={{action (mut this.catalognumber) value="target.value"}}><br><br>
<label for="organism">Organism:</label>
{{input id="organism" class = "inputField" type="text" value=this.organism}}<br><br>
<label for="depositor">Depositor:</label>
{{input id="depositor" class = "inputField" type="text" value=this.depositor}}<br><br>
<label for="productionstatus">Status:</label>
{{input id="productionstatus" class = "inputField" type="text" value=this.productionstatus}}<br><br>
<label for="productname">Product Name:</label>
{{input id="productname" class = "inputField" type="text" value=this.productname}}<br><br>
<label for="depositdate">Deposit Date:</label>
{{input id="depositdate" class = "inputField" type="date" value=this.depositdate}}<br><br>
<br>
<br>
<div>
<button type="submit" name="search" style="background-color:#f2661B; color:#ffffff;">Search</button>
</div>
</form>
</div>
{{/if}}
Also there is some details as I was building it in this question:
https://discuss.emberjs.com/t/ember-search-app/