Commit 7e86e8b3 authored by Alessandro Abluton's avatar Alessandro Abluton 🤖

Big refactor, leaving one route for a root component which handles all the operations

parent c4ffaeac
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
This diff is collapsed.
File mode changed from 100644 to 100755
window.env = {
// MEDIA
// Online Simcaa.it
// "PathImages": "http://www.simcaa.it/demo/media/symbols/",
"CustomImage": "http://www.simcaa.it/demo/media/custom/",
// "ApiImageUpload": "http://www.simcaa.it/demo/apisimcaa-graphql/public/graphql/imageupload",
"PathImages": "http://www.simcaa.it/demo/media/symbols/",
"CustomImage": "http://www.simcaa.it/demo2/media/custom/",
// "ApiSymbolUpload": "http://www.simcaa.it/demo/apisimcaa-graphql/public/graphql/imageuploadtmp",
"MediaImage": "http://www.simcaa.it/demo/media/images/",
"TmpImage": "http://www.simcaa.it/demo/media/tmp/",
// "ApiImageUpload": "http://www.simcaa.it/demo/apisimcaa-graphql/public/graphql/imageupload",
"MediaImage": "http://www.simcaa.it/demo2/media/images/",
"TmpImage": "http://www.simcaa.it/demo2/media/tmp/",
"ApiImageUpload": "http://www.simcaa.it/demo2/apisimcaa-graphql/public/graphql/imageupload",
"ApiSymbolUpload": "http://www.simcaa.it/demo2/apisimcaa-graphql/public/graphql/imageuploadtmp",
// Local
"PathImages": "http://10.0.0.132/media/symbols/",
//"PathImages": "http://10.0.0.132/media/symbols/",
// "CustomImage": "http://10.0.0.132/media/custom/",
// "ApiImageUpload": "http://10.0.0.132:8085/graphql/imageupload",
// "ApiSymbolUpload": "http://10.0.0.132:8085/graphql/imageuploadtmp",
......@@ -21,12 +21,12 @@ window.env = {
// TEMP: DEMO2 (DELETE LATER)
// Online Simcaa.it
"GraphQLServer": "http://www.simcaa.it/demo2/apisimcaa-graphql/public/graphql/query",
"GraphQLServerNoAuth": "http://www.simcaa.it/demo2/apisimcaa-graphql/public/graphql/query/noauth",
"GraphQLLogin": "http://www.simcaa.it/demo2/apisimcaa-graphql/public/graphql/login",
"GraphQLCurrentUser": "http://www.simcaa.it/demo2/apisimcaa-graphql/public/graphql/me",
"GraphQLRefreshToken": "http://www.simcaa.it/demo2/apisimcaa-graphql/public/graphql/jwtrefresh",
"RestApiCard": "http://www.simcaa.it/demo2/apisimcaa-graphql/public/graphql/card",
"GraphQLServer": "http://www.simcaa.it/demo/apisimcaa-graphql/public/graphql/query",
"GraphQLServerNoAuth": "http://www.simcaa.it/demo/apisimcaa-graphql/public/graphql/query/noauth",
"GraphQLLogin": "http://www.simcaa.it/demo/apisimcaa-graphql/public/graphql/login",
"GraphQLCurrentUser": "http://www.simcaa.it/demo/apisimcaa-graphql/public/graphql/me",
"GraphQLRefreshToken": "http://www.simcaa.it/demo/apisimcaa-graphql/public/graphql/jwtrefresh",
"RestApiCard": "http://www.simcaa.it/demo/apisimcaa-graphql/public/graphql/card",
// Local
......
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
......@@ -4,7 +4,7 @@
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"sizes": "64x64",
"type": "image/png"
}
],
......
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
......@@ -35,7 +35,7 @@ class App extends Component {
<Route path="/project/:projectid?" render={this.isLogged.bind(this, Project)} />
<Route path="/layout/:mode?/:projectid?/:chapterid?" render={this.isLogged.bind(this, LayoutExport)} />
<Route path="/login" render={() => (<Login />)}/>
<Route path="/administration" render={this.isLogged.bind(this, Admin)} />
<Route path="/admin" render={this.isLogged.bind(this, Admin)} />
<Route path="/init" render={this.isLogged.bind(this, InitProgress)} />
<Route path="/teamselect" render={this.isLogged.bind(this, SelectTeam)} />
</div>
......
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
import React, { Component } from 'react'
import { withApolloFetch } from '../withApolloFetch'
import { withRouter, Route, Redirect } from 'react-router-dom'
import { withRouter, Route, Redirect, HashRouter } from 'react-router-dom'
import { withCurrentUser} from '../withCurrentUser'
import { translate, Trans } from 'react-i18next'
import { Container, Menu, Segment } from 'semantic-ui-react'
import AdminMenu from './Menu'
import AllUsers from './allusers/AllUsers'
import AllGroups from './allgroups/AllGroups'
import Helper from './Helper'
import { Container, Menu, Segment, Grid } from 'semantic-ui-react'
import {apolloFetch, apolloFetchNoAuth} from '../store/apolloFetchUtils'
import {connect} from 'react-redux'
import {saveAdminData} from '../store/actions/AdministrationActions'
import AdminMenu from './components/Menu'
import RootModal from './containers/RootModal'
import RootComponent from './containers/RootComponent'
import Helper from './components/Helper'
class Admin extends Component{
isLogged(Component) {
let jwt = sessionStorage.getItem('jwt')
......@@ -17,18 +23,65 @@ class Admin extends Component{
<Component />
)
}
componentDidUpdate(){
let query=`
query getAdminData {
roles{
data {
id
role_desc
}
}
user_teams{
data{
userteam_id
user_id
team_id
}
}
team{
data {
id
name
email
}
}
}
`
apolloFetch({query})
.then((data)=>{
//salvo i dati sullo store
this.props.saveDataToStore(data.data.roles.data, data.data.team.data, data.data.user_teams.data)
})
}
render(){
return (
<div>
<AdminMenu/>
<Route exact path="/administration" render={() => (
<Redirect to="/administration/home" />
)}/>
<Route path="/administration/home" render={this.isLogged.bind(this, Helper)}/>
<Route path="/administration/allusers" render={this.isLogged.bind(this, AllUsers)} />
<Route path="/administration/allgroups" render={this.isLogged.bind(this, AllGroups)} />
<Grid container verticalAlign="middle">
<Grid.Row column={1} centered>
<Grid.Column>
<Route exact path="/admin" render={() => (
<Redirect to="/admin/home" />
)}/>
<Route path="/admin/home" render={this.isLogged.bind(this, Helper)}/>
<Route path="/admin/overview" render={this.isLogged.bind(this, RootComponent)} />
</Grid.Column>
</Grid.Row>
</Grid>
<RootModal/>
</div>
);
}
}
export default withRouter(translate('translations')(withRouter(withApolloFetch(withCurrentUser(Admin)))))
const mapStateToProps = (state)=>{
return{}
}
const mapDispatchToProps = (dispatch) => {
return {
saveDataToStore: (roles, teams, user_teams) => dispatch(saveAdminData(roles, teams, user_teams))
}
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(translate('translations')(Admin)))
File mode changed from 100644 to 100755
import React, { Component } from 'react'
import {Header, Dimmer, Segment, Loader, Message} from 'semantic-ui-react'
import { translate, Trans } from 'react-i18next'
import { withRouter } from 'react-router-dom'
import {withApolloFetch} from '../../withApolloFetch'
import UsrTable from './UsrTable'
import AddUserModal from './AddUserModal'
class AllGroups extends Component{
constructor(props){
super(props)
this.update = this.update.bind(this)
this.showError = this.showError.bind(this)
this.state={
lock: 0,
users: [],
teams: [],
groups: [],
interror: false
}
}
update(){
this.componentWillMount();
}
showError(){
this.setState({interror: true});
}
componentWillMount(){
let query = `
query getAllUsers {
caa_users {
data{
id
name
user
email
organization
link_web
role_id
}
}
roles{
data {
id
role_desc
}
}
user_teams{
data{
userteam_id
user_id
team_id
}
}
team{
data {
id
name
}
}
}
`
this.props.apolloFetch({query})
.then((data)=>{
this.setState({
lock:1,
users: data.data.caa_users.data,
roles: data.data.roles.data,
teams: data.data.team.data,
user_teams: data.data.user_teams.data
})
})
.catch((error)=>{
console.log(error);
})
}
cancelError(){
this.setState({
interror: false
})
}
findUser(user_id){
return this.state.users[this.state.users.findIndex((usr)=>usr.id===user_id)]
}
render(){
const { t, i18n } = this.props
if(this.state.lock===0){
return(
<Dimmer active>
<Loader size='massive'>{t("LOADING")}</Loader>
</Dimmer>
)
}else{
let teamTables = this.state.teams.map((team, idx)=>{
let usrs = []
//creo lista di utenti appartenenti a quel gruppo
for(let i=0; i<this.state.user_teams.length; i++){
if(this.state.user_teams[i].team_id === team.id){
usrs.push(this.findUser(this.state.user_teams[i].user_id))
}
}
let margin = ((idx===0) ? '10px' : '65px')
//aggiungo tabella di questo team
return(
<Segment style={{marginTop: margin}} key={idx}>
<Header as="h4">{team.name}</Header>
<UsrTable update={this.update} action='delete' users={usrs} userTeam={this.state.user_teams} team={team.id} roles={this.state.roles} showError={this.showError}/>
<AddUserModal team={team.id} update={this.update.bind(this)} userTeam={this.state.user_teams} showError={this.showError.bind(this)}/>
</Segment>
)
});
//renderizzo tutte le tabelle
return(
<div>
{teamTables}
<Message negative compact style={{position: 'absolute', left:'50%', transform: 'translate(-50%)'}} hidden={!this.state.interror} onDismiss={()=>this.cancelError()}>
<Message.Header> {t("INTERROR_HEADER")} </Message.Header>
<p>{t("INTERROR_BODY")}</p>
</Message>
</div>
)
}
}
}
export default withApolloFetch(translate('translations') (AllGroups))
File mode changed from 100644 to 100755
import React, { Component, Link } from 'react'
import {Container, Header, Table, Dimmer, Segment, Loader, Button, Popup, Icon, Confirm, Modal, Form} from 'semantic-ui-react'
import { translate, Trans } from 'react-i18next'
import {withApolloFetch} from '../../withApolloFetch'
import { withRouter } from 'react-router-dom'
import {apolloFetch} from '../../store/apolloFetchUtils'
import {connect} from 'react-redux'
import UsrConfig from './UsrConfig'
import NewUserForm from './NewUserForm'
......@@ -11,55 +14,9 @@ class AllUsers extends Component{
super(props)
this.update = this.update.bind(this)
this.state={
lock: 0,
users: [],
groups: [],
teams: [],
openConfirmDelete: false
}
}
componentWillMount(){
let query = `
query getAllUsers {
caa_users {
data{
id
name
user
email
organization
link_web
role_id
}
}
roles{
data {
id
role_desc
}
}
team{
data {
id
name
}
}
}
`
this.props.apolloFetch({query})
.then((data)=>{
this.setState({
lock:1,
users: data.data.caa_users.data,
roles: data.data.roles.data,
teams: data.data.team.data
})
})
.catch((error)=>{
console.log(error);
})
}
openConfirm(id){
this.setState({idToDelete: id},()=>{
this.setState({openConfirmDelete: true})
......@@ -74,7 +31,7 @@ class AllUsers extends Component{
}
}
`
this.props.apolloFetch({ query })
apolloFetch({ query })
.then((data) => {
this.setState({openConfirmDelete: false});
this.componentWillMount()
......@@ -94,115 +51,121 @@ class AllUsers extends Component{
render(){
const { t, i18n } = this.props
if(this.state.lock===1){
let tableLayout = this.state.users.map((item)=>{
let team=""
let group=""
for(let i=0; i<this.state.teams.length; i++){
if(this.state.teams[i].id === item.team_id){
team=this.state.teams[i].name
}
let tableLayout = this.props.users.map((item)=>{
let team=""
let group=""
for(let i=0; i<this.props.teams.length; i++){
if(this.props.teams[i].id === item.team_id){
team=this.props.teams[i].name
}
for(let i=0; i<this.state.groups.length; i++){
if(this.state.roles[i].id === item.role_id){
group=this.state.groups[i].desc_group
}
}
for(let i=0; i<this.props.roles.length; i++){
if(this.props.roles[i].id === item.role_id){
group=this.props.roles[i].role_desc
}
return(
<Table.Row key={item.id}>
<Table.Cell>
{item.id}
</Table.Cell>
<Table.Cell>
{item.name}
</Table.Cell>
<Table.Cell>
{item.user}
</Table.Cell>
<Table.Cell>
{item.email}
</Table.Cell>
<Table.Cell>
{item.organization}
</Table.Cell>
<Table.Cell>
{item.link_web}
</Table.Cell>
<Table.Cell>
{group}
</Table.Cell>
<Table.Cell>
{team}
</Table.Cell>
<Table.Cell style={{display: "flex"}}>
<Popup
trigger={<Button circular icon={<Icon name='remove user' size='large'/>} onClick={()=>this.openConfirm(item.id)}/>}
content= {t("POPUP_DEL")}
/>
<Popup
trigger={
<UsrConfig trigger={<Button circular icon={<Icon name='configure' size='large'/>} />}
id={item.id}
name={item.name}
email={item.email}
organization = {item.organization}
link_web = {item.link_web}
update = {()=>{this.update()}}
/>
}
content= {t("POPUP_MOD")}
/>
</Table.Cell>
</Table.Row>
)
});
const tableStyle={
marginTop: '15px'
}
return(
<div>
<Segment style={tableStyle}>
<Table celled padded textAlign='center' >
<Table.Header>
<Table.Row>
<Table.HeaderCell>ID</Table.HeaderCell>
<Table.HeaderCell>{t("TBL_NAME")}</Table.HeaderCell>
<Table.HeaderCell>{t("TBL_USR")}</Table.HeaderCell>
<Table.HeaderCell>{t("TBL_EMAIL")}</Table.HeaderCell>
<Table.HeaderCell>{t("TBL_ORG")}</Table.HeaderCell>
<Table.HeaderCell>{t("TBL_LWEB")}</Table.HeaderCell>
<Table.HeaderCell>{t("TBL_GROUP")}</Table.HeaderCell>
<Table.HeaderCell>{t("TBL_TEAM")}</Table.HeaderCell>
<Table.HeaderCell>{t("TBL_ACTION")}</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{tableLayout}
</Table.Body>
</Table>
<Table.Row key={item.id}>
<Table.Cell>
{item.id}
</Table.Cell>
<Table.Cell>
{item.name}
</Table.Cell>
<Table.Cell>
{item.user}
</Table.Cell>
<Table.Cell>
{item.email}
</Table.Cell>
<Table.Cell>
{item.organization}
</Table.Cell>
<Table.Cell>
{item.link_web}
</Table.Cell>
<Table.Cell>
{group}
</Table.Cell>
<Table.Cell>
{team}
</Table.Cell>
<Table.Cell style={{display: "flex"}}>
<Popup
trigger={<Button circular icon={<Icon name='remove user' size='large'/>} onClick={()=>this.openConfirm(item.id)}/>}
content= {t("POPUP_DEL")}
/>
<Popup
trigger={
<UsrConfig trigger={<Button circular icon={<Icon name='configure' size='large'/>} />}
id={item.id}
name={item.name}
email={item.email}
organization = {item.organization}
link_web = {item.link_web}
update = {()=>{this.update()}}
/>
}
content= {t("POPUP_MOD")}
/>
</Table.Cell>
</Table.Row>
<NewUserForm
update = {()=>{this.update()}}/>
</Segment>
<Confirm
open={this.state.openConfirmDelete}
header={t("DELETE_CNF_H")}
content={t("DELETE_CNF_C")}
onCancel={this.handleCancel.bind(this)}
onConfirm={this.handleDelete.bind(this)}
/>
</div>
)
}else{
return(
<Dimmer active>
<Loader size='massive'>{t("LOADING")}</Loader>
</Dimmer>
)
});
const tableStyle={
marginTop: '15px'
}
return(
<div>
<Table celled padded textAlign='center' >
<Table.Header>
<Table.Row>
<Table.HeaderCell>ID</Table.HeaderCell>
<Table.HeaderCell>{t("TBL_NAME")}</Table.HeaderCell>
<Table.HeaderCell>{t("TBL_USR")}</Table.HeaderCell>
<Table.HeaderCell>{t("TBL_EMAIL")}</Table.HeaderCell>
<Table.HeaderCell>{t("TBL_ORG")}</Table.HeaderCell>
<Table.HeaderCell>{t("TBL_LWEB")}</Table.HeaderCell>
<Table.HeaderCell>{t("TBL_GROUP")}</Table.HeaderCell>
<Table.HeaderCell>{t("TBL_TEAM")}</Table.HeaderCell>
<Table.HeaderCell>{t("TBL_ACTION")}</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{tableLayout}
</Table.Body>
</Table>
<NewUserForm
update = {()=>{this.update()}}
roles = {this.props.roles}
teams = {this.props.teams}/>
<Confirm
open={this.state.openConfirmDelete}
header={t("DELETE_CNF_H")}
content={t("DELETE_CNF_C")}
onCancel={this.handleCancel.bind(this)}
onConfirm={this.handleDelete.bind(this)}
/>
</div>
)
}
}
export default withApolloFetch(withRouter(translate('translations')(AllUsers)))
const mapStateToProps = (state) => {
return {
curUser: state.user,
teams: state.adminReducer.teams,
roles: state.adminReducer.roles,
users: state.adminReducer.users
}
}
/*const mapDispatchToProps = (dispatch) => {
return {
openModalCreateUser: (team_id) => dispatch(openModalCreateUser(team_id)),
openModalAddUser: (team_id) => dispatch(openModalAddUser(team_id)),
openModalManageTeam: (team_id) => dispatch(openModalManageTeam(team_id))
}
}*/
export default connect(mapStateToProps)(withRouter(translate('translations')(AllUsers)))
......@@ -25,43 +25,25 @@ class NewUserForm extends Component{
}
}
componentWillMount(){
this.setState({loading: true});
let query = `
query{
roles{
data {
id
role_desc
}
}
team{
data {
id
name
}
}
}`;
this.props.apolloFetch({query}).then((data)=>{
let tmp = []
data.data.roles.data.map((role)=>{
tmp.push({
text: role.role_desc,
value: role.id
})
return null;
});
this.setState({groups: tmp})
tmp = []
data.data.team.data.map((team)=>{
tmp.push({
text: team.name,
value: team.id