Skip to content

Commit 8483071

Browse files
AzzooAzzoo
authored
Merge pull request #143 from Azzoo/main
Demo changes
2 parents 192098c + e845ce3 commit 8483071

File tree

24 files changed

+611
-391
lines changed

24 files changed

+611
-391
lines changed

‎src/assets/photo-icon.png‎

87 Bytes
Loading

‎src/components/agencies/form-data/form-data.css‎

Lines changed: 36 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11

22
/* Form info */
3-
.form-content {
3+
.agency-form-data .form-content {
44
padding: 15px;
55
}
66

7-
.form-content-menu {
7+
.agency-form-data .form-content-menu {
88
width: 20%;
99
border-right: solid 1px #dadada;
1010
padding: 2em;
1111
}
1212

13-
.form-menu-item {
13+
.agency-form-data .form-menu-item {
1414
padding: 10px 0;
1515
border-bottom: 1px solid;
1616
cursor: pointer;
@@ -37,25 +37,12 @@
3737
font-weight: 700;
3838
}
3939

40-
.form-menu-item .form-empty button {
41-
margin-right: 0;
42-
}
43-
44-
.form-menu-item .form-empty .title {
45-
height: 100%;
46-
color: #dadada;
47-
font-size: 2.5em;
48-
}
4940

50-
.form-menu-item .form-search {
51-
width: 100%;
52-
}
53-
54-
.form-search-panel {
41+
.agency-form-data .form-search-panel {
5542
padding-left: 25px;
5643
}
5744

58-
.form-search-field {
45+
.agency-form-data .form-search-field {
5946
border: 1px solid #DADADA;
6047
border-radius: 3px;
6148
height: 35px;
@@ -65,11 +52,11 @@
6552
padding-left: 5px
6653
}
6754

68-
.form-search-field .search-field{
55+
.agency-form-data .form-search-field .search-field{
6956
border: none;
7057
}
7158

72-
.form-checkbox-list {
59+
.agency-form-data .form-checkbox-list {
7360
margin-left: 25px;
7461
}
7562

@@ -83,7 +70,35 @@
8370
border-bottom: none;
8471
}
8572

86-
.form-info-box {
73+
.agency-form-data .form-info-box {
8774
padding: 1em 2em;
75+
display: flex;
8876
border-bottom: solid 1px #DADADA;
8977
}
78+
79+
.agency-form-data .form-info-box .name{
80+
width: 100%;
81+
}
82+
83+
.agency-form-data .form-info-box .inline-btn{
84+
color: #0a4074;
85+
cursor: pointer;
86+
}
87+
88+
.agency-form-data .form-info-box .inline-btn:hover{
89+
text-decoration: underline;
90+
}
91+
92+
.agency-form-data .form-empty button {
93+
margin-right: 0;
94+
}
95+
96+
.agency-form-data .form-empty .title {
97+
height: 100%;
98+
color: #dadada;
99+
font-size: 2.5em;
100+
}
101+
102+
.agency-form-data .form-search {
103+
width: 100%;
104+
}

‎src/components/agencies/form-data/form-data.js‎

Lines changed: 65 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import NewDialog from "./new-dialog.js";
33

44
import SearchIcon from "@material-ui/icons/Search";
55
import { withTranslation } from "react-i18next";
6-
import "./form-data.css";
6+
7+
import "../form-data/form-data.css";
78

89
import CustomMenuService from "./../../../services/custom-menu.service";
910

@@ -37,8 +38,7 @@ class AgencyFormData extends Component {
3738
const item = menuItems[activeItem];
3839
const data = {}
3940
data[activeItem] = item.data;
40-
menuService.updateMenus(menuId, { $set: data }).then((result)=>{
41-
41+
menuService.updateMenus(menuId, { $set: data }).then((result)=>{
4242
}).catch((err)=>{
4343

4444
});
@@ -61,6 +61,21 @@ class AgencyFormData extends Component {
6161
}
6262
}
6363

64+
65+
deleteItem = (tab, itemIndex) => {
66+
const { menuItems } = this.state;
67+
const item = menuItems[tab];
68+
if (item && item.data && itemIndex < item.data.length){
69+
item.data.splice(itemIndex, 1);
70+
this.setState({
71+
menuItems: menuItems,
72+
dialogDisplayed: false
73+
});
74+
this.saveData();
75+
}
76+
}
77+
78+
6479
changeCurrentTab = (tab) => {
6580
this.setState({activeItem: tab});
6681
}
@@ -97,80 +112,80 @@ class AgencyFormData extends Component {
97112
render() {
98113

99114
const { menuItems, dialogDisplayed, activeItem } = this.state;
100-
const { t, agency } = this.props;
101-
115+
const { t } = this.props;
102116
const item = menuItems[activeItem];
103117

104118
return <div className="agency-form-data flex-row full-view">
105119
<div className="flex-column justify-between form-content-menu">
106-
<div onClick={()=>this.changeCurrentTab("activities")} className={"form-menu-item" + (activeItem == "activities" || activeItem == "gear" || activeItem == "fishery" ? " active-form-menu-item": "")}>
120+
<div onClick={()=>this.changeCurrentTab("activities")} className={"form-menu-item" + (activeItem === "activities" || activeItem === "gear" || activeItem === "fishery" ? " active-form-menu-item": "")}>
107121
Activity
108122
</div>
109-
<div onClick={()=>this.changeCurrentTab("activities")} className={"form-menu-item sub-item" + (activeItem == "activities" ? " active-form-menu-item": "")}>
123+
<div onClick={()=>this.changeCurrentTab("activities")} className={"form-menu-item sub-item" + (activeItem === "activities" ? " active-form-menu-item": "")}>
110124
Activity
111125
</div>
112-
<div onClick={()=>this.changeCurrentTab("species")} className={"form-menu-item sub-item" + (activeItem == "species" ? " active-form-menu-item": "")}>
126+
<div onClick={()=>this.changeCurrentTab("species")} className={"form-menu-item sub-item" + (activeItem === "species" ? " active-form-menu-item": "")}>
113127
Fishery
114128
</div>
115-
<div onClick={()=>this.changeCurrentTab("gear")} className={"form-menu-item sub-item" + (activeItem == "gear" ? " active-form-menu-item": "")}>
129+
<div onClick={()=>this.changeCurrentTab("gear")} className={"form-menu-item sub-item" + (activeItem === "gear" ? " active-form-menu-item": "")}>
116130
Gear
117131
</div>
118-
<div onClick={()=>this.changeCurrentTab("fisheries")} className={"form-menu-item" + (activeItem == "fisheries" ? " active-form-menu-item": "")}>
132+
<div onClick={()=>this.changeCurrentTab("fisheries")} className={"form-menu-item" + (activeItem === "fisheries" ? " active-form-menu-item": "")}>
119133
Catch
120134
</div>
121-
<div onClick={()=>this.changeCurrentTab("emsTypes")} className={"form-menu-item" + (activeItem == "emsTypes" ? " active-form-menu-item": "")}>
135+
<div onClick={()=>this.changeCurrentTab("emsTypes")} className={"form-menu-item" + (activeItem === "emsTypes" ? " active-form-menu-item": "")}>
122136
EMS
123137
</div>
124-
<div onClick={()=>this.changeCurrentTab("ports")} className={"form-menu-item" + (activeItem == "ports" ? " active-form-menu-item": "")}>
138+
<div onClick={()=>this.changeCurrentTab("ports")} className={"form-menu-item" + (activeItem === "ports" ? " active-form-menu-item": "")}>
125139
Vessel flag State
126140
</div>
127-
<div onClick={()=>this.changeCurrentTab("violationCodes")} className={"form-menu-item" + (activeItem == "violationCodes" ? " active-form-menu-item": "")}>
141+
<div onClick={()=>this.changeCurrentTab("violationCodes")} className={"form-menu-item" + (activeItem === "violationCodes" ? " active-form-menu-item": "")}>
128142
Violation Codes
129143
</div>
130-
<div onClick={()=>this.changeCurrentTab("violationDescriptions")} className={"form-menu-item" + (activeItem == "violationDescriptions" ? " active-form-menu-item": "")}>
144+
<div onClick={()=>this.changeCurrentTab("violationDescriptions")} className={"form-menu-item" + (activeItem === "violationDescriptions" ? " active-form-menu-item": "")}>
131145
Violations Descriptions
132146
</div>
133147
</div>
134148
{item && item.data && item.data.length
135149
?
136-
<div className="flex-column form-content form-search">
137-
<div className="flex-row justify-between align-center form-search-panel">
138-
<div>
139-
<h3>{item.data.length + ' ' + item.title} </h3>
140-
</div>
141-
<div className="form-search-field">
142-
<div className="search-icon">
143-
<SearchIcon />
150+
<div className="flex-column form-content form-search">
151+
<div className="flex-row justify-between align-center form-search-panel">
152+
<div>
153+
<h3>{item.data.length + ' ' + item.title} </h3>
144154
</div>
145-
<input
146-
className="search-field"
147-
type="search"
148-
placeholder="Search Species"
149-
></input>
155+
<div className="form-search-field">
156+
<div className="search-icon">
157+
<SearchIcon />
158+
</div>
159+
<input
160+
className="search-field"
161+
type="search"
162+
placeholder={t("BUTTONS.SEARCH") + " " + item.title}
163+
></input>
164+
</div>
165+
<button className="blue-btn" onClick={this.showDialog}>
166+
{item.btn}
167+
</button>
168+
</div>
169+
<div className="form-checkbox-list">
170+
{item.data.map((item, ind) => (
171+
<div
172+
className="flex-row align-center form-info-box"
173+
key={ind}
174+
>
175+
<input className="check-item" type="checkbox" />
176+
<span className="name">{item}</span>
177+
<span className="inline-btn" onClick={()=>this.deleteItem(activeItem, ind)}>{t("BUTTONS.DELETE")}</span>
178+
</div>
179+
))}
180+
</div>
150181
</div>
151-
<button className="blue-btn" onClick={this.showDialog}>
152-
{item.btn}
153-
</button>
154-
</div>
155-
<div className="form-checkbox-list">
156-
{item.data.map((item, ind) => (
157-
<div
158-
className="flex-row align-center form-info-box"
159-
key={ind}
160-
>
161-
<input className="check-item" type="checkbox" />
162-
{item}
163-
</div>
164-
))}
165-
</div>
166-
</div>
167-
: <div className="flex-column full-view align-center form-content form-empty">
168-
<div className="title flex-row align-center justify-center">No {item.title}</div>
169-
<button className="blue-btn" onClick={this.showDialog}>
170-
{item.btn}
171-
</button>
172-
</div>
173-
}
182+
: <div className="flex-column full-view align-center form-content form-empty">
183+
<div className="title flex-row align-center justify-center">No {item.title}</div>
184+
<button className="blue-btn" onClick={this.showDialog}>
185+
{item.btn}
186+
</button>
187+
</div>
188+
}
174189
{dialogDisplayed && <NewDialog onApply={this.dialogClosed} title={item.title} lineText={item.btn}></NewDialog>}
175190
</div>;
176191
}

‎src/components/crew/crew-view/crew-view.component.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { withTranslation } from "react-i18next";
44
import SeeAll from "../../partials/see-all-link/see-all-link";
55
import TextViewer from "../../partials/text-viewer/text-viewer";
66

7-
import HeaderOverview from "./../../partials/overview-pages/header-overview-page/header-overview-page.component";
87
import BoardingsOverview from "./../../partials/overview-pages/boardings-overview/boardings-overview.component";
98
import ViolationsOverview from "./../../partials/overview-pages/violations-overview/violations-overview.component";
109
import PhotosOverview from "./../../partials/overview-pages/photo-overview/photo-overview.component";
@@ -18,11 +17,12 @@ class CrewViewPage extends Component {
1817

1918
return (
2019
<div className="flex-column align-center padding-top crew-view-page">
21-
<HeaderOverview
22-
mainText="Marlin Nemo"
23-
subText="Crew Member"
24-
img="user-icon"
25-
/>
20+
<div className="flex-row align-center standard-view">
21+
<div>
22+
<div className="item-label">Crew Member</div>
23+
<div className="item-name">Marlin Nemo</div>
24+
</div>
25+
</div>
2626
<div className="flex-row justify-between standard-view">
2727
<div className="flex-column box-shadow padding white-bg margin-top vessels-section">
2828
<div className="flex-row justify-between">

‎src/components/crew/crew.component.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -289,7 +289,7 @@ class Crew extends Component {
289289
<tr
290290
className="table-row row-body"
291291
key={ind}
292-
onClick={() => history.push(VIEW_CREW_PAGE)}
292+
// onClick={() => history.push(VIEW_CREW_PAGE)}
293293
>
294294
<td>
295295
<div className="flex-row align-center">

‎src/components/partials/custom-select/custom-select.js‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,21 +24,18 @@ class CustomSelect extends Component {
2424
};
2525

2626
setSelected = (option) => {
27-
const {currentPath} = this.props;
2827
const newPath = option === "All" ? "home" : option.toLowerCase();
28+
history.push(`/${newPath}`);
2929

30-
if (`/${newPath}` !== currentPath) {
31-
history.push(`#/${newPath}`);
32-
}
3330
resetSearch();
3431

3532
this.setState({ selected: option });
3633
};
3734

38-
componentDidMount(){
39-
const {currentPath} = this.props;
35+
componentDidMount() {
36+
const currPath = this.props.match.path.match(/[a-zA-Z]+/g)[0];
4037
this.setState({
41-
selected: currentPath === "home" ? "All" : currentPath,
38+
selected: currPath === "home" ? "All" : currPath,
4239
});
4340
}
4441

0 commit comments

Comments
 (0)