I'm currently developing a small Ionic 4 project for college that uses Google Firebase to save and store data, which will be used by the nursing course / class to make things easier for them when it comes to saving patients' data and test details.
In the page that shows all registered patients, I have an ion-searchbar which will be used to filter the patients by name and a ng-container with a *ngFor that pulls all registered patients from the database and puts them into ion-cards.
<ion-searchbar placeholder="Search..." expand="full" color="abwb" [(ngModel)]="searchQuery" (ionChange)="search()"></ion-searchbar>
<ng-container *ngFor="let patient of dBase">
<ion-card color="abwb">
<ion-card-header style="font-weight: bold">{{patient.name}}</ion-card-header>
<ion-card-content>
<ion-button [routerLink]="['/pat-prf', patient.id]" color="bwab">PROFILE<ion-icon name="person" slot="start"></ion-icon></ion-button>
<ion-button [routerLink]="['/pat-tst', patient.id]" color="bwab">TESTS<ion-icon name="list-box" slot="start"></ion-icon></ion-button>
</ion-card-content>
</ion-card>
</ng-container>
I managed to get the value from what's being typed into the search field to be displayed via a console.log() action, but I have no idea on how to make it actually go and search the database for the specified names OR to make the ng-container only show the cards with names that match.
I've been told I had to use a *ngIf to do such a thing, but I honestly got no idea how to use it properly for this kind of thing. Can anyone point me in the right direction?
You have two solutions, a Frontend solution and a Backend solution.
The Frontend solution
The frontend is to filter out the list that you have from the server. This is can use the Array.prototype.filter(). In order to make this work, the backend should return all the patients without pagination (Which can work for small list, but not preferred for big one).
// allPatients will contain all the results from the server and dBase will be filtered
private allPatients = [];
ngOnInit() {
this.httpClient.get(MY_API_TO_GET_PATIENTS)
.subscribe(response => this.allPatients = this.dBase = response )
}
search() {
this.dBase = allPatients.filter(item => item.name.includes(this.searchQuery));
}
The Backend solution
In this solution, we will send a request to the Backend that contains the search query. Then, the Backend will respond with the results that met the search query. Here we will need only to send a new request to the server each time the user enters a new value.
search() {
this.httpClient.get(MY_URL, {params: {searchQuery: this.searchQuery})
.subscribe(response => this.dBase = response )
}
Related
I'm implementing a project with Next.js and I've been trying to find out the best way I could achieve the following.
I have a page /home that calls an API with getServerSideProps and receives information that is printed to the page in multiple of this components:
function PlaylistItem({playlistName,id,description,background} : { playlistName : string, id : string, description : string, background : string}) {
return (
<a className='flex-col justify-center flex text-center items-center cursor-pointer mb-6' href='/difficulty'>
<div className=' w-[100px] h-[100px] rounded-full' style={{backgroundImage: `url(${background})`,backgroundPosition:"center",backgroundSize:"cover"}}></div>
<p className='mt-2'>{playlistName}</p>
</a>
)
}
export default PlaylistItem
Depending on which of those components the user clicks, I want to pass the props (id, playlistName, etc) to the next page stated in the anchor tag.
I saw that I could achieve that with dynamic routes and passing the values as queries, but is it really the best way I could to this?
The ideal way to accomplish this is by using dynamic routes, also utilise cookies to save and get into the next page if you don't require share url capability for next page.
dynamic routes the only one way to achieve this
I have a list.gsp that displays list of items which is restful. It displays well but It gives me error when I click next or page no. My mapping is:
"/request/list/$sort?/$order?/$max?/$offset?"(controller:"request"){
action = [GET:"list"]
}
My view pagination is:
<div class="paginationlayer">
<span >
<g:paginate next="Next" prev="Back"
total="${ total }" /></span>
</div>
I tried using name url mapping like this:
name requestURL: "/list/$sort?/$order?/$max?/$offset?"{
controller = 'request'
action = 'list'
}
and out some mapping in the view like this mapping="requestURL", I even added params in the pagination, or hardcoded params like offset, max etc but still the same.
but still it gives me HTTP Status 404 when I click "next" it seems that the url loses its map and becomes something like this : http://localhost:8081/client/request/%5BGET%3Alist%5D?offset=10&max=10&order=desc
as basic as it may sound, the solution was to put action="list" to the pagination. Didn't occur to me coz all my paginations work with out it.
<span class="gadgetNumber">
<g:paginate next="Next" prev="Back"
maxsteps="0" action="list"
total="${ printRequestInstanceTotal }" /></span>
There is no need to list all possible parameters in UrlMappings.groovy: whatever you may need will still be available via the params object or via action method attributes.
Please try rewriting the url mapping as
"/request/list"(controller:"request"){
action = [GET:"list"]
}
This will probably resolve your issue and save us the (possibly considerable) effort of determining why exactly your URL mapping isn't being accepted.
I'm trying to make a simple extension of the table element. Where you can click a td, then it becomes editable, and when you edit the data it gets automatically persisted via a REST service.
Here's what I got so far
As you can see, you can click the td's and edit them, but the data does not get persisted to the other side (which is firebase in this case). That's because the data in the td's aren't bound anymore to the data-property from which they came. Can somebody tell me how I can bind them to that property again? Or any other way I can persist the data to the correct row and key?
As far as I know contenteditable change events are not supported by polymer.
You could use the onkeys to update the model manually.
In a on-* handler, you can access the named model instance using: e.target.templateInstance.model.:
<polymer-element name="x-foo">
<template>
<template repeat="{{user in users}}">
<div on-click="{{clickHandler}}">{{user.name}}</div>
</template>
</template>
<script>
Polymer('x-foo', {
clickHandler: function(e, detail, sender) {
console.log(sender.templateInstance.model.user.name);
}
});
</script>
</polymer-element>
Sevesta told me that it could only be done manually, so I gave every td extra data-attributes so I could identify them and then at the stopEditing() function I update the models manually.
See here.
I'm using Laravel 4, and I have two tables related 'Many to many': 'Actividad' and 'Material'. Every Actividad can have one or more Materials, and every Material can belong to one or more Actividad.
So, I have made a form to create a new Actividad where you can save one or more Materials. I've done that with a multiselect input. Like that:
{{ Form::label('material_id', 'Material necesario:') }}
<p>{{ Form::select('material_id', $material_id, Input::old('material_id'), array('multiple')) }}</p>
I don't know if I'm doing correctly but, before saving anything, my first problem is that I'm only obtaining one result. I suppose I should get every option 'checked' in the form... The relevant part of my Controller is:
$material = Input::get('material_id');
return var_dump($material);
I should obtain a list of options selected, but the result of that in my browser is:
string(1) "1"
This is the first time I'm working with tables related in this way, and probably I'm doing something wrong (in the form, in my controller, in my Models,...)
Thank you very much for your help!!
Just change your code to this
{{ Form::select('material_id[]', $material_id, Input::old('material_id'), array('multiple')) }}
I hope this helps.
if you are using custom response handlers on the client side such in the case of submitting info with AJAX, all you need to do is to simple add "[]" to the name of the select control.
e.g.
<select name="material_id[]" multiple>
This is the same case as with regular PHP. The other methods are required if you want Laravel to handle the form elements for you when rendering a new response/view. ( page reload ). This reload doesn't happen with REST requests.
I have a simple search form I want to reuse across multiple pages in my codeigniter application. For example, right now I have a search form in the sidebar and I'm planning on displaying that sidebar on the index, about, and other pages.
I want to have the form validation display errors on the same page the users submits the form from.
For example:
User is on About page.
User submits form with invalid data
User sees error in the sidebar on the About page
and
User is on Index page.
User submits form with invalid data
User sees error in the sidebar on the Index page
But I'd like to reuse that form validation logic. I just want it to display the error on whichever page the user posted from.
Any ideas how to do that? Sorry for the noob question, I'm pretty new to CI.
Here you have to think globally.
Step.1 : Make one view file : display.php
which contains :
<div id = "main">
<div id = "header">
[load header file here]
</div>
<?php
if(validation_errors() != '') {
?>
<div id = "error">
<?=validation_errors()?>
</div>
<?php
}
?>
<div id = "content">
<?=$page?>
</div>
<div id = "footer">
[load footer file here]
</div>
</div>
Step.2 : About us Page.(controlller)
.... Your data ....
at end of controller function
$data['page'] = 'aboutus';
$this->load->view('display',$data);
With regards to your comment on the above question you could use Flash data
With the assumption that you have the session library loaded, here is a helper function.
function last_page($page = null){
$ci = get_instance();
if($page === null)
return $ci->session->flashdata('last_page');
$ci->session->set_flashdata('last_page', $page);
}
then you can call last_page('about'); at the top of the about page, and then when you want to find out what the last page you were on was you can just call last_page(); with no params.
In the User Guide, there's different ways to configure sets/groups of rules. Then you can simply have something like:
if ($this->form_validation->run('signup') == FALSE)
{
$this->load->view('myform');
}
else
{
$this->load->view('formsuccess');
}
Which will run your "signup" group of validations. To me, this is the cleanest way to achieve reusable validation rules.
This is a perfectly valid question.
I'm not a PHP expert, nor a CI expert, but the fact is sometimes you want to post to a controller that didn't create the view from which you're posting. Which means posting back to itself is not going to work.
I came across this post on the Ellislab forum:
http://ellislab.com/forums/viewthread/217176/
On this page, There are 2 methods of going about it. Both of which use flashdata and both of which are totally valid, IMHO.
The first: create a helper function
http://ellislab.com/forums/viewreply/1003010/
The second: extend the CI_Form_Validation Class.
http://ellislab.com/forums/viewreply/1047536/
The second is the way I went as it seems cleanest although some may argue whether the form validation class should know anything about flash data.