Added screen of work status and modified the type of work screen to s…

…elect work status and type of photos

trena_dashboard/src/components/form/MultipleSelector.tsx

@@ -0,0 +1,55 @@
+import React, {useState} from "react";
+
+
+interface MultipleSelectorProps {
+    options: string[]
+    selected: Set<string>
+    onSelectionChanged?: (selected: Set<string>) => void
+}
+
+export const MultipleSelector: React.FC<MultipleSelectorProps> = (props) => {
+
+    const {options, selected, onSelectionChanged} = props
+    const [state, setState] = useState({selected: selected})
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const index = event.target.name
+        const currSelected = toggleIndex(index)
+        if (onSelectionChanged) {
+            onSelectionChanged(currSelected)
+        }
+        setState((prevState) => {
+            return {...prevState, selected: currSelected}
+        })
+    }
+
+    const toggleIndex = (index: string): Set<string> => {
+        let currSelected = new Set(state.selected)
+        if (currSelected.has(index)) {
+            currSelected.delete(index)
+        } else {
+            currSelected.add(index)
+        }
+        return currSelected
+    }
+
+
+    return (
+        <div>
+            {options.map((option, index) => {
+                    return (
+                        <div className="block" key={index}>
+                            <label className="checkbox">
+                                <input type="checkbox" name={index.toString()}
+                                       checked={state.selected.has(index.toString())}
+                                       onChange={handleChange}/>
+                                {" " + option}
+                            </label>
+                        </div>
+
+                    )
+                }
+            )}
+        </div>
+    )
+}

trena_dashboard/src/components/lists/ListTypePhoto.tsx

@@ -6,7 +6,7 @@ import {ItemTypePhoto} from "./items/ItemTypePhoto";
 import {Search} from "../form/Search";
 import {DeleteView} from "../../views/DeleteView";
 import {TypePhoto} from "../../core/models/TypePhoto";
-import TypePhotoCRUDView from "../../views/TypePhotoCRUDView";
+import TypePhotoCRUDView from "../../views/typePhoto/TypePhotoCRUDView";
 
 export const ListTypePhoto = observer(() => {
     const {typePhotoStore, viewStore} = useStores()

trena_dashboard/src/components/lists/ListTypeWork.tsx

@@ -17,7 +17,7 @@ export const ListTypeWork = observer(() => {
     }
 
     const handleAddClick = () => {
-        let mTypeWork: TypeWork = {name: ""}
+        let mTypeWork: TypeWork = {name: "", status_list: []}
         createTypeWorkView(
             "Adicionar tipo de obra",
             "Adicionar",

trena_dashboard/src/components/lists/ListWorkStatus.tsx

@@ -7,7 +7,7 @@ import {Search} from "../form/Search";
 import {DeleteView} from "../../views/DeleteView";
 import {TypePhoto} from "../../core/models/TypePhoto";
 import {WorkStatus} from "../../core/models/WorkStatus";
-import WorkStatusCRUDView from "../../views/WorkStatusCRUDView";
+import WorkStatusCRUDView from "../../views/workStatus/WorkStatusCRUDView";
 
 export const ListWorkStatus = observer(() => {
     const {workStatusStore, viewStore} = useStores()

trena_dashboard/src/components/lists/TagList.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+interface TagListProps {
+    tags: string[]
+}
+
+export const TagList: React.FC<TagListProps> = (props) => {
+
+    const {tags} = props
+
+    return (
+        <div>
+            <div className="tags">
+                {tags.map((tag, index) => {
+                    return <span className="tag is-medium is-rounded is-info" key={index}>{tag}</span>
+                })}
+            </div>
+        </div>
+    )
+}

trena_dashboard/src/components/menus/NavigationMenu.tsx

@@ -15,6 +15,7 @@ export const NavigationMenu: React.FC<any> = () => {
             <ul className="menu-list is-active">
                 <NavLink activeClassName="is-active" to="/" exact={true}>Home</NavLink>
                 <NavLink activeClassName="is-active" to="/typeOfWork">Tipos de Obra</NavLink>
+                <NavLink activeClassName="is-active" to="/typePhoto">Tipos de Fotos</NavLink>
                 <NavLink activeClassName="is-active" to="/publicWork">Obras Públicas</NavLink>
                 <NavLink activeClassName="is-active" to="/workStatus">Estados das Obras</NavLink>
                 <NavLink activeClassName="is-active" to="/users">Usuários</NavLink>

trena_dashboard/src/core/models/TypeWork.tsx

@@ -1,4 +1,5 @@
 export type TypeWork = {
     flag?: number,
-    name: ""
+    name: "",
+    status_list: number[]
 }

trena_dashboard/src/screens/MainScreen.tsx

@@ -8,6 +8,7 @@ import {useStores} from "../core/contexts/UseStores";
 import {NavigationMenu} from "../components/menus/NavigationMenu";
 import {UserManagementScreen} from "./UserManagementScreen";
 import {WorkStatusScreen} from "./WorkStatusScreen";
+import {TypePhotoScreen} from "./TypePhotoScreen";
 
 export const MainScreen = observer(() => {
 
@@ -33,6 +34,9 @@ export const MainScreen = observer(() => {
                         <Route path="/typeOfWork">
                             <TypeOfWorkScreen/>
                         </Route>
+                        <Route path="/typePhoto">
+                            <TypePhotoScreen/>
+                        </Route>
                         <Route path="/publicWork">
                             <PublicWorkScreen/>
                         </Route>

trena_dashboard/src/screens/TypeOfWorkScreen.tsx

@@ -1,25 +1,21 @@
 import React from "react";
 import {ListTypeWork} from "../components/lists/ListTypeWork";
 import {useStores} from "../core/contexts/UseStores";
-import {ListTypePhoto} from "../components/lists/ListTypePhoto";
+import {TypePhotoBox} from "../views/typePhoto/TypePhotoBox";
+import {WorkStatusBox} from "../views/workStatus/WorkStatusBox";
 
-
-interface ScreenTypeOfWorkProps {
-
-}
-
-export const TypeOfWorkScreen: React.FC<ScreenTypeOfWorkProps> = (props) => {
-    const {typeWorkStore, typePhotoStore} = useStores()
+export const TypeOfWorkScreen: React.FC<any> = (props) => {
+    const {typeWorkStore} = useStores()
     typeWorkStore.loadTypeWorkList()
-    typePhotoStore.loadTypePhotoList()
 
     return (
         <div className="columns">
             <div className="column is-one-third">
                 <ListTypeWork/>
             </div>
             <div className="column">
-                <ListTypePhoto/>
+                <TypePhotoBox/>
+                <WorkStatusBox/>
             </div>
         </div>
     )

trena_dashboard/src/screens/TypePhotoScreen.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import {useStores} from "../core/contexts/UseStores";
+import {ListTypePhoto} from "../components/lists/ListTypePhoto";
+
+export const TypePhotoScreen: React.FC<any> = (props) => {
+    const {typePhotoStore} = useStores()
+    typePhotoStore.loadTypePhotoList()
+
+    return (
+        <div className="columns">
+            <div className="column is-two-thirds">
+                <ListTypePhoto/>
+            </div>
+            <div className="column">
+            </div>
+        </div>
+    )
+}

trena_dashboard/src/views/typePhoto/TypePhotoBox.tsx

@@ -0,0 +1,60 @@
+import {observer} from "mobx-react";
+import React from "react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faEdit} from "@fortawesome/free-solid-svg-icons";
+import {useStores} from "../../core/contexts/UseStores";
+import TypePhotoSelect from "./TypePhotoSelect";
+
+export const TypePhotoBox: React.FC<any> = observer((props) => {
+    const {viewStore, typePhotoStore, typeWorkStore} = useStores()
+    const selectedTypeWork = typeWorkStore.selectedTypeWork
+
+    const handleOnEditClicked = async () => {
+        await typePhotoStore.loadTypePhotoList()
+        const options = typePhotoStore.typePhotoList
+        let mSelected = []
+        let workStatusSelect = {
+            title: "Selecionar tipos de fotos",
+            confirmButton: "Selecionar",
+            onConfirmClick: () => {
+
+            },
+            contentView:
+                <TypePhotoSelect
+                    options={options.map(option => option.name)}
+                    onChangeSelectedOptions={(selectedOptions) => {
+                        mSelected = selectedOptions
+                    }}
+                />
+        }
+        viewStore.setViewInModal(workStatusSelect)
+    }
+
+    return (
+        <div className="panel">
+            <div className="panel-heading">
+                <nav className="level">
+                    <div className="level-left">
+                        <div className="level-item">
+                            Tipos de fotos
+                        </div>
+                    </div>
+                    <div className="level-right">
+                        <div className="level-item">
+                            <button className="button is-info" onClick={handleOnEditClicked}
+                                    disabled={!selectedTypeWork}>
+                                <span className="icon is-small">
+                                    <FontAwesomeIcon icon={faEdit}/>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </nav>
+            </div>
+            <div className="panel-block" style={{
+                minHeight: 250,
+            }}>
+            </div>
+        </div>
+    )
+})

trena_dashboard/src/views/TypePhotoCRUDView.tsx → trena_dashboard/src/views/typePhoto/TypePhotoCRUDView.tsx

@@ -1,8 +1,8 @@
-import {BaseCRUDView} from "../components/base/BaseCRUDView";
-import {TypePhoto} from "../core/models/TypePhoto";
-import {InputField} from "../components/form/InputField";
+import {BaseCRUDView} from "../../components/base/BaseCRUDView";
+import {TypePhoto} from "../../core/models/TypePhoto";
+import {InputField} from "../../components/form/InputField";
 import React from "react";
-import {InputTextArea} from "../components/form/InputTextArea";
+import {InputTextArea} from "../../components/form/InputTextArea";
 
 
 interface TypePhotoCRUDViewProps {

trena_dashboard/src/views/typePhoto/TypePhotoSelect.tsx

@@ -0,0 +1,47 @@
+import {BaseCRUDView} from "../../components/base/BaseCRUDView";
+import {MultipleSelector} from "../../components/form/MultipleSelector";
+import React from "react";
+
+interface TypePhotoSelectProps {
+    options: string[]
+    onChangeSelectedOptions?: (selectedOptions: number[]) => void
+}
+
+const initialState = {
+    selectedOptions: []
+}
+
+type TypePhotoSelectState = typeof initialState
+
+export default class TypePhotoSelect extends BaseCRUDView<TypePhotoSelectProps, TypePhotoSelectState>{
+
+    isValid(): boolean {
+        let valid = true
+        Object.values(this.state).forEach(value => {
+            if (!value) {
+                valid = false
+            }
+        })
+        return valid
+    }
+
+    handleWorkChange = (selected: Set<string>) => {
+        if (this.props.onChangeSelectedOptions) {
+            this.props.onChangeSelectedOptions([selected.values()].map(value => {
+                return value as unknown as number;
+            }))
+        }
+    }
+
+    onChange = (value: TypePhotoSelectState) => {
+
+    }
+
+    render() {
+        return(
+            <div className="container has-text-left">
+                <MultipleSelector options={this.props.options} selected={new Set<string>()} onSelectionChanged={this.handleWorkChange}/>
+            </div>
+        )
+    }
+}