Search Bar in React+Rails+Redux
Step 01: In Actions :: add exam or vehicle or model name in short or any other name you want in the Actions.
Step 02: In Services :: add search option with if else condition in that with BASE_url.
Step 03: Changes at the front end Page :
A: handleOnChange
B: handleSubmit
C: Add Search Form
Step 04: Add Search Method with If else Condition in Index Section.
..................................................................................................................................................
Step 01: Index.js Page : Add Dynamic Search Method in Front End - React
A:::::::::::::::::::::: Add Import Methods :::::::::::::
import {
ListGroup,
ListGroupItem,
Nav,
Navbar,
NavItem,
NavLink,
Popover,
PopoverBody,
} from 'reactstrap';
import {
Form,
FormFeedback,
FormGroup,
FormText,
Input,
Label,
} from "reactstrap";
B::::::::::::::::::::: Define The State :::::::::::::::
constructor(props) {
super(props);
this.state = {
exam: {
name: "",
},
submitted: false,
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.goBack = this.goBack.bind(this);
}
C:::::::::::::::: Add the handleOnChange Method ::::::::::::::::
handleChange(event) {
const { name, value } = event.target;
const { exam } = this.state;
const inputValue = name === "image" ? event.target.files[0] : value;
this.setState({
exam: { ...exam, [name]: inputValue },
});
}
D ::::::::::::::::::: Add the handleSubmit Method :::::::::::::::::::::::::
handleSubmit(event) {
event.preventDefault();
this.setState({ submitted: true });
const { exam } = this.state;
this.props.getExams(exam);
}
E :::::::::::::::::::::: Add in the componentwillMount Method::::::::::::::::::::::::::::
componentWillMount() {
this.props.getExams();
}
F ::::::::::::::::::::::::: Add Form Method in Index Section
<Form
name="form"
className="form-horizontal"
role="form"
onSubmit={this.handleSubmit}
>
<FormGroup row>
<Col sm={5}>
<Input
type="text"
name="name"
placeholder="Search Exam With Name"
value={exam.name}
onChange={this.handleChange}
autoFocus
/>
{submitted && !exam.name && (
<div style={{ color: "red" }} className="help-block">
</div>
)}
</Col>
<Col sm={2}>
<Button type="submit">Submit</Button>
</Col>
</FormGroup>
</Form>
G ::::::::::::::::::::::::: Define Staff at the index section
const { exam, submitted } = this.state;
....................................................
test routes fees batch section standard attendance syllabus homework
address profile timetable subject help users
static search method
fee batch help homework test testmark syllabus users
now
notices sections standards addresses profiles subjects attendances smses
address, profile:hold
not done static+dynamic+index =
student_results :: done
fee_group :: done
admit_cards action : done
leave_applications done
time_tables done
student :already done
exam :already done
vehicle :already done
route :already done
batches :already done
staff :already done
studentsresults: ok
tests :error
testmarks: yet leave again see
notices : ok
fee : ok
feegroup: done
sms: not working after apply
section : ok
standards : ok
admitcard ;after ::: and admit cards mein hi error aa rahi hai backend ki nai aa rahe hain.
leave_application:search bar is texting but not search
attendance: not coming index
syllabuses:error
homework ; not coming after apply
address: all are coming
profile: done
timetable : request is not going or if conditions are not working properly first correct it ::: exam ka concept hai ismein kafi errors hain....ise leave karo abhi...
exam is with this timetable so will consider it after and thas why it is giving error
subject : error
help : done
admin:after
sms : apply search method but not fixed
Note: Also make api for all the things...and check all the things with the postman also
timetable ka frontend theek karo
attendances ka backend theek karo
Add Other details ::::
FAQ :: question:description answer:description
Registrations :: table done
vacancies :: subject:title message:description
Join Us Post Your Resume :: Add Recruitment Details :: resume and resumes:: table done
Fee_structure ::
standards fees
Other_fee :
applcation_fee:
admission_fee:
refundable _security_deposit_fee
hostel_fee
exam_fee
transport _fee
Instructions:
contact_us : website_name , admission_enquiry_email,general_enquiry_email,telephone_no
School_details:
school_name
no_of_employees
no_of_student
address_of_school
admin_email
add chat_application at the school_app
You can add route in every map
reach _us : Add Map of the Particular School with particular address
call_directly by the website :: see the method::
add payment gateway in school fees...when fees is submitted
whenever student or parent submit the fee he will get notified by the sms : add sms at the fee section
SchoolDetails Table : made
ContactTable : made
ResumeTable: made
FeeStructureTable: made
RegistrationTable: made
Vacancy Table : made
OtherFee table: made
Query table : made
NewsLetter table: made
Library table: made
NoDue table : made
Library Structure: made
Note: rails g moel Library student_name:string book_name:string fees_paid:boolean any_dues:string
rails g model NoDue name:string no_due:boolean tc_issued:boolean cc_issued:boolean migration_issued:string behaviour_status:string hostel_due:boolean account_due:boolean library_due:boolean mess_due:boolean
rails g model NoDue name:string no_due:boolean tc_issued:boolean migration_received:boolean birth_certificate_received:boolean adahar_card_received:boolean character_certificate_received:boolean hostel_due:boolean account_due:boolean library_due:boolean pending_payment:string mess_due:boolean
rails g model StudentStatus name:string migration_received:boolean i-card_issued:boolean birth_certiciate_received:boolean fee_payment:boolean behaviour_status:string
school_details contacts resumes fee_structures registrations vacancies other_fees queries auhthority_messages details admissions new_letters libraries library_structures no_dues student_status
Comments
Post a Comment