Skip to content
GitLab
Commit a5918332 authored by christopher.fernandes's avatar christopher.fernandes
Browse files

Task #57218: Changed the manage page layout to fit tabs

parent 8cc50008
master accept_file_type cards-value-changes delete-form delete-user form-issue inspector-model label-change
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 74 additions and 93 deletions
+74 -93
public/css/new.css
+ 8
− 0
View file @ a5918332
......@@ -165,6 +165,14 @@ h3 {
cursor: pointer;
}
.form-check-inline .custom-checkbox .form-check-input {
position: relative;
}
.form-check-inline .custom-checkbox, .form-radio-inline .custom-radio {
padding: 12px;
}
.custom-radio {
padding: 12px;
}
......
src/components/common/Header.tsx
+ 3
− 1
View file @ a5918332
......@@ -110,7 +110,9 @@ class Header extends Component<LoginProps, LoginState> {
}`}>ALL APPLICATIONS</Link>
</li>
<li className="mr-5">
<Link to={"/forms"} className={`${this.props.history.location.pathname.match("/forms")
<Link to={"/manage"} className={
`${this.props.history.location.pathname.match("/manage") ||
this.props.history.location.pathname.match("/forms")
? "active"
: ""
}`}>MANAGE</Link>
......
src/components/form/AddForm.js
+ 3
− 3
View file @ a5918332
......@@ -206,7 +206,7 @@ class AddForm extends Component {
Notify.success(response.statusInfo.statusMessage);
// this.props.updateParent(response.responseData.id);
setTimeout(() => {
this.props.history.push("/forms");
this.props.history.push("/manage");
}, 500);
} else {
Notify.error(response.statusInfo.errorMessage);
......@@ -268,10 +268,10 @@ class AddForm extends Component {
</>
)}
</div>
<div className="col-sm-12 col-md-12 col-lg-3 mt-4 mt-md-0">
<div className="col-sm-12 col-md-12 col-lg-4 mt-4 mt-md-0">
<div className=" pull-right">
<button
onClick={(e) => this.props.history.push("/forms")}
onClick={(e) => this.props.history.push("/manage")}
type="button"
id="submit"
className="btn btn-default smf-btn-default"
......
src/components/form/ListForms.js
+ 58
− 87
View file @ a5918332
......@@ -5,6 +5,7 @@ import { FormService } from "../../services/form.service";
import { APP } from "../../constants";
import Notify from "../../helpers/notify";
import Header from "./../common/Header";
import { BtnTwo } from "../buttons";
class ListForms extends Component {
constructor(props) {
......@@ -66,102 +67,72 @@ class ListForms extends Component {
}
};
static propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired,
};
// static propTypes = {
// match: PropTypes.object.isRequired,
// location: PropTypes.object.isRequired,
// history: PropTypes.object.isRequired,
// };
render() {
return (
<Fragment>
<Header history={this.props.history} />
<div className="container-fluid main-container h-100 heightMin">
<div className="container dashboard-inner-container">
<div className="row tabText">
<div className="row col-md-12">
<div className="row col-md-12 mt-5">
<div className="col-md-12">
<h2 className="mb-4">Manage</h2>
</div>
</div>
<div className="row col-md-12 mt-4">
<div className="col-md-4">
<div className="form-group has-search">
<i className="material-icons form-control-feedback">
search
</i>
<input
type="text"
className="form-control"
id="search-roles"
placeholder="Search for an application"
autoComplete="off"
onKeyUp={(event) => this.searchForms(event)}
/>
</div>
</div>
<div className="col-md-8">
<div className="row pt-2">
<div className="col-sm-12 col-md-4">
<form className="">
<div className="input-group mb-2 mr-sm-2">
<input
type="text"
className="form-control"
id="search-roles"
placeholder="Search for an application"
autoComplete="off"
onKeyUp={(event) => this.searchForms(event)}
/>
</div>
</form>
{/* <div className="col-md-8">
<Link to="/forms/add" className="pull-right">
<button className="btn btn-default smf-btn-default-inverse">
Create new
</button>
</Link>
</div>
</div>
<div className="row col-md-12 mt-4" id="forms-container">
{/* {this.state.forms.map((form, key) => (
<div className="col-md-4 form-item mb-4" key={key}>
<div
className="application-item"
style={{ minHeight: "150px", backgroundColor: "#fff" }}
>
<h3 className="form-title">{form.title}</h3>
<p className="h3-subheading">
{form.description != null
? form.description
: "Application form"}
</p>
<Link
to={"/forms/" + form.id + "/edit"}
className="btn btn-default smf-btn-default highlighted mt-3"
>
Edit
</Link>
</div>
</div>
))} */}
<table className="table table-smf">
<thead className="thead-light">
<tr>
<th scope="col">Form name</th>
<th scope="col">Status</th>
{/* <th scope="col">Published/created on</th> */}
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
{this.state.forms.map((form, key) => (
<tr key={key} className="form-item">
<th scope="row" className="form-title">
{form.title}
</th>
<td>Published</td>
{/* <td></td> */}
<td className="td-preview">
<Link to={`/forms/${form.id}`}>Preview</Link>
</td>
<td className="td-preview">
<Link to={`/forms/${form.id}/edit`}>Edit</Link>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div> */}
</div>
<div className="col-sm-12 col-md-8 text-right">
<BtnTwo btnType="button" label="Create new" isLink={true} link={`/forms/add`} floatBottom={false} isModal={false} />
</div>
</div>
<div className="row pt2">
<div className="col-12" id="forms-container">
<table className="table table-smf">
<thead className="thead-light">
<tr>
<th scope="col">Form name</th>
<th scope="col">Status</th>
{/* <th scope="col">Published/created on</th> */}
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
{this.state.forms.map((form, key) => (
<tr key={key} className="form-item">
<th scope="row" className="form-title">
{form.title}
</th>
<td>Published</td>
{/* <td></td> */}
<td className="td-preview">
<Link to={`/forms/${form.id}`}>Preview</Link>
</td>
<td className="td-preview">
<Link to={`/forms/${form.id}/edit`}>Edit</Link>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</Fragment>
......
src/components/tabs/TabOne.tsx
+ 2
− 2
View file @ a5918332
......@@ -17,7 +17,7 @@ export const TabOne = ({ tabId, tabContentId, tabList }: TabOneProps) => {
<ul className="nav nav-tabs" id={tabId} role="tablist">
{tabList && tabList.map((i: any, j: any) => {
return (
<li className="nav-item me-3" role="presentation">
<li className="nav-item me-3" role="presentation" key={j}>
<button className={`${j === 0 ? `tab_one nav-link active` : `tab_one nav-link`}`} id={i.ariaLabelled} data-toggle="tab" data-target={`#${i.id}`} type="button" role="tab" aria-controls={i.id} aria-selected="true">{i.label}</button>
</li>
);
......@@ -26,7 +26,7 @@ export const TabOne = ({ tabId, tabContentId, tabList }: TabOneProps) => {
<div className="tab-content mt-4" id={tabContentId}>
{tabList && tabList.map((m: any, n: any) => {
return (
<div className={`${n === 0 ? "tab-pane fade show active" : "tab-pane fade"}`} id={m.id} role="tabpanel" aria-labelledby={m.ariaLabelled}>{m.children && <>{m.children}</>}</div>
<div className={`${n === 0 ? "tab-pane fade show active" : "tab-pane fade"}`} id={m.id} key={m.id}role="tabpanel" aria-labelledby={m.ariaLabelled}>{m.children && <>{m.children}</>}</div>
);
})}
</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment