task table fixed
This commit is contained in:
parent
1aac5f664f
commit
f2ebae81b0
@ -96,116 +96,116 @@ const Tasks = () => {
|
|||||||
<div className="col-lg-12">
|
<div className="col-lg-12">
|
||||||
<div className="card">
|
<div className="card">
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<div className="row ml-0 mr-0 mb-10">
|
<div className="row ml-0 mr-0 mb-10">
|
||||||
<div className="col-lg-1 col-md-2 col-6">
|
<div className="col-lg-1 col-md-2 col-6">
|
||||||
<div className="dataTables_length">
|
<div className="dataTables_length">
|
||||||
<label className="w-100">
|
<label className="w-100">
|
||||||
Show
|
Show
|
||||||
<select
|
<select
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setItemPerPage(e.target.value);
|
setItemPerPage(e.target.value);
|
||||||
setCurrentPage(1);
|
setCurrentPage(1);
|
||||||
}}
|
}}
|
||||||
className="form-control"
|
className="form-control"
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
>
|
>
|
||||||
<option value="10">10</option>
|
<option value="10">10</option>
|
||||||
<option value="25">25</option>
|
<option value="25">25</option>
|
||||||
<option value="50">50</option>
|
<option value="50">50</option>
|
||||||
<option value="100">100</option>
|
<option value="100">100</option>
|
||||||
</select>
|
</select>
|
||||||
entries
|
entries
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-lg-3 col-md-5 col-12">
|
<div className="col-lg-3 col-md-5 col-12">
|
||||||
<label>TM Name:</label>
|
<label>TM Name:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Trade name"
|
placeholder="TM name"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
ref={tmnameRef}
|
ref={tmnameRef}
|
||||||
onChange={handleSearchChange}
|
onChange={handleSearchChange}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-lg-3 col-md-5 col-12">
|
<div className="col-lg-3 col-md-5 col-12">
|
||||||
<label>SC Name:</label>
|
<label>SC Name:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Trade name"
|
placeholder="SC name"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
ref={scnameRef}
|
ref={scnameRef}
|
||||||
onChange={handleSearchChange}
|
onChange={handleSearchChange}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-lg-2 col-md-4 col-4">
|
<div className="col-lg-2 col-md-4 col-4">
|
||||||
<label>Start Date:</label>
|
<label>Start Date:</label>
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
ref={startDateRef}
|
ref={startDateRef}
|
||||||
onChange={handleSearchChange}
|
onChange={handleSearchChange}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-lg-2 col-md-4 col-4">
|
<div className="col-lg-2 col-md-4 col-4">
|
||||||
<label>End Date:</label>
|
<label>End Date:</label>
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
ref={endDateRef}
|
ref={endDateRef}
|
||||||
onChange={handleSearchChange}
|
onChange={handleSearchChange}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-lg-1 col-md-4 col-4">
|
<div className="col-lg-1 col-md-4 col-4">
|
||||||
<label>Status:</label>
|
<label>Status:</label>
|
||||||
<select
|
<select
|
||||||
className="form-control"
|
className="form-control"
|
||||||
ref={statusnameRef}
|
ref={statusnameRef}
|
||||||
onChange={handleSearchChange}
|
onChange={handleSearchChange}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
>
|
>
|
||||||
<option value="">All</option>
|
<option value="">All</option>
|
||||||
<option value="New">New</option>
|
<option value="New">New</option>
|
||||||
<option value="Pending">Pending</option>
|
<option value="Pending">Pending</option>
|
||||||
<option value="Completed">Completed</option>
|
<option value="Completed">Completed</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style jsx>{`
|
<style jsx>{`
|
||||||
@media (max-width: 1200px) {
|
@media (max-width: 1200px) {
|
||||||
.col-lg-1 {
|
.col-lg-1 {
|
||||||
flex: 0 0 20%;
|
flex: 0 0 20%;
|
||||||
max-width: 20%;
|
max-width: 20%;
|
||||||
}
|
}
|
||||||
.col-lg-2 {
|
.col-lg-2 {
|
||||||
flex: 0 0 37%;
|
flex: 0 0 37%;
|
||||||
max-width: 37%;
|
max-width: 37%;
|
||||||
}
|
}
|
||||||
.col-lg-3 {
|
.col-lg-3 {
|
||||||
flex: 0 0 40%;
|
flex: 0 0 40%;
|
||||||
max-width: 40%;
|
max-width: 40%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.col-lg-1,
|
.col-lg-1,
|
||||||
.col-lg-2,
|
.col-lg-2,
|
||||||
.col-lg-3,
|
.col-lg-3,
|
||||||
.col-md-2,
|
.col-md-2,
|
||||||
.col-md-4,
|
.col-md-4,
|
||||||
.col-md-5,
|
.col-md-5,
|
||||||
.col-4,
|
.col-4,
|
||||||
.col-6,
|
.col-6,
|
||||||
.col-12 {
|
.col-12 {
|
||||||
flex: 0 0 100%;
|
flex: 0 0 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`}</style>
|
`}</style>
|
||||||
|
|
||||||
<div className="table-responsive table-shoot mt-3">
|
<div className="table-responsive table-shoot mt-3">
|
||||||
<table
|
<table
|
||||||
@ -230,7 +230,7 @@ const Tasks = () => {
|
|||||||
className="text-start"
|
className="text-start"
|
||||||
style={{ border: "1px solid" }}
|
style={{ border: "1px solid" }}
|
||||||
>
|
>
|
||||||
Due Date
|
Task Assigned Date
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
className="text-start"
|
className="text-start"
|
||||||
@ -250,6 +250,12 @@ const Tasks = () => {
|
|||||||
>
|
>
|
||||||
Sales Coordinator
|
Sales Coordinator
|
||||||
</th>
|
</th>
|
||||||
|
<th
|
||||||
|
className="text-start"
|
||||||
|
style={{ border: "1px solid" }}
|
||||||
|
>
|
||||||
|
Due Date
|
||||||
|
</th>
|
||||||
<th
|
<th
|
||||||
className="text-start"
|
className="text-start"
|
||||||
style={{ border: "1px solid" }}
|
style={{ border: "1px solid" }}
|
||||||
@ -283,7 +289,7 @@ const Tasks = () => {
|
|||||||
className="text-start"
|
className="text-start"
|
||||||
style={{ border: "1px solid" }}
|
style={{ border: "1px solid" }}
|
||||||
>
|
>
|
||||||
{new Date(task.taskDueDate).toLocaleString(
|
{new Date(task.createdAt).toLocaleString(
|
||||||
"en-IN",
|
"en-IN",
|
||||||
{
|
{
|
||||||
month: "short",
|
month: "short",
|
||||||
@ -310,6 +316,19 @@ const Tasks = () => {
|
|||||||
>
|
>
|
||||||
{task.taskAssignedTo.name}
|
{task.taskAssignedTo.name}
|
||||||
</td>
|
</td>
|
||||||
|
<td
|
||||||
|
className="text-start"
|
||||||
|
style={{ border: "1px solid" }}
|
||||||
|
>
|
||||||
|
{new Date(task.taskDueDate).toLocaleString(
|
||||||
|
"en-IN",
|
||||||
|
{
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
<td
|
<td
|
||||||
className="text-start"
|
className="text-start"
|
||||||
style={{ border: "1px solid" }}
|
style={{ border: "1px solid" }}
|
||||||
|
Loading…
Reference in New Issue
Block a user