Commit e7d5c9bb authored by Alessandro Abluton's avatar Alessandro Abluton 🤖

Big refactor, completed team's route but still working on improvements

parent 2d6c709b
window.env = {
// MEDIA
// Online Simcaa.it
// "PathImages": "http://www.simcaa.it/media/symbols/",
// "WaterImages": "http://www.simcaa.it/media/specialchar/",
// "CustomImage": "http://www.simcaa.it/demo/media/custom/",
// "ApiImageUpload": "http://www.simcaa.it/demo/apisimcaa-graphql/public/graphql/imageupload",
// "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/",
"PathImages": "http://www.simcaa.it/media/symbols/",
"WaterImages": "http://www.simcaa.it/media/specialchar/",
"CustomImage": "http://www.simcaa.it/demo/media/custom/",
"ApiImageUpload": "http://www.simcaa.it/demo/apisimcaa-graphql/public/graphql/imageupload",
"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/",
// Local
/*
"PathImages": "http://10.0.0.132/media/symbols/",
"WaterImages": "http://10.0.0.132/media/watermark/",
"CustomImage": "http://10.0.0.132/media/custom/",
......@@ -17,19 +18,20 @@ window.env = {
"ApiSymbolUpload": "http://10.0.0.132:8085/graphql/imageuploadtmp",
"MediaImage": "http://10.0.0.132/media/images/",
"TmpImage": "http://10.0.0.132/media/tmp/",
*/
// API SERVER
// Online Simcaa.it
// "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",
// "RestApiDuplicateProject": "http://www.simcaa.it/demo/apisimcaa-graphql/public/graphql/duplicateproject",
// "RestApiDuplicateChapter": "http://www.simcaa.it/demo/apisimcaa-graphql/public/graphql/duplicatechapter",
"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",
"RestApiDuplicateProject": "http://www.simcaa.it/demo/apisimcaa-graphql/public/graphql/duplicateproject",
"RestApiDuplicateChapter": "http://www.simcaa.it/demo/apisimcaa-graphql/public/graphql/duplicatechapter",
// Local
/*
"GraphQLServer": "http://10.0.0.132:8085/graphql/query",
"GraphQLServerNoAuth": "http://10.0.0.132:8085/graphql/query/noauth",
"GraphQLLogin": "http://10.0.0.132:8085/graphql/login",
......@@ -38,7 +40,7 @@ window.env = {
"RestApiCard": "http://10.0.0.132:8085/graphql/card",
"RestApiDuplicateProject": "http://10.0.0.132:8085/graphql/duplicateproject",
"RestApiDuplicateChapter": "http://10.0.0.132:8085/graphql/duplicatechapter",
*/
// CSS - remote
// "SemanticCSS": "http://10.0.0.132/includes/css/semantic.min.css",
// "StyleCSS": "http://10.0.0.132/includes/css/style.css",
......
......@@ -22,10 +22,11 @@ class Admin extends Component{
<Component />
)
}
componentDidUpdate(){
this.props.saveTeamsToStore
this.props.saveRolesToStore
this.props.saveUserTeamsToStore
componentDidMount(){
this.props.saveTeamsToStore()
this.props.saveRolesToStore()
this.props.saveUserTeamsToStore()
}
render(){
// <Route path="/admin/home" render={this.isLogged.bind(this, Helper)}/>
......@@ -55,9 +56,9 @@ const mapStateToProps = (state)=>{
}
const mapDispatchToProps = (dispatch) => {
return {
saveTeamsToStore: dispatch(saveTeams()),
saveRolesToStore: dispatch(saveRoles()),
saveUserTeamsToStore: dispatch(saveUserTeams())
saveTeamsToStore: ()=> dispatch(saveTeams()),
saveRolesToStore: ()=> dispatch(saveRoles()),
saveUserTeamsToStore: ()=> dispatch(saveUserTeams())
}
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(translate('translations')(Admin)))
import React, { Component } from 'react'
import { Modal, Button, Icon, Form, Message, Popup, Transition } from 'semantic-ui-react'
import { translate } from 'react-i18next'
import { withApolloFetch } from '../../withApolloFetch'
import { withRouter} from 'react-router-dom'
import UsrTable from './UsrTable'
class AddUserModal extends Component{
constructor(props){
super(props);
this.state={
name: '',
email: '',
username: '',
result: false,
open: false,
usrsFound: [],
groups: [],
teams: [],
loading: false,
interror: false,
missingData: false
}
}
nameChange(e){
this.setState({name: e.target.value});
}
emailChange(e){
this.setState({email: e.target.value});
}
userChange(e){
this.setState({username: e.target.value});
}
toggleReveal(){
let search = '';
let last = true;
if(this.state.name !== ''){
search += `name: "${this.state.name}"`;
last=false
}
if(this.state.username !== ''){
if(last)
search += `user: "${this.state.username}"`;
else {
search += ` , user: "${this.state.username}"`;
}
last = false
}
if(this.state.email !== ''){
if(last)
search += ` email: "${this.state.email}"`;
else {
search += ` , email: "${this.state.email}"`;
}
last = false
}
if(search !== ''){
let query=`
query getUsers {
caa_users (${search}){
data{
id
name
user
email
organization
link_web
role_id
}
}
roles{
data {
id
role_desc
}
}
}
`
this.setState({loading: true});
this.props.apolloFetch({query}).then((data)=>{
if(data.hasOwnProperty('errors')){
this.setState({interror: true, loading: false})
}else{
this.setState({
loading: false,
result: true,
usrsFound: data.data.caa_users.data,
roles: data.data.roles.data
});
}
})
.catch(error=>{console.log(error);})
}else{
//ERRORE NESSUN PARAMETRO DI RICERCA INSERITO
this.setState({missingData: true});
}
}
close(){
this.setState({
interror: false,
result: false,
open: false
});
}
closeMissingError(){
this.setState({missingData: false});
}
render(){
const { t } = this.props
return(
<Modal trigger={<Popup trigger={<Button circular floated="right" onClick={()=>this.setState({open:true})} icon={<Icon circular name="add user" size="big"/>} />} content={t("POPUP_ADD")}/>} open={this.state.open} onClose={()=>this.close()}>
<Modal.Header>{t("ALLGROUPS_ADDUSR_H")}</Modal.Header>
<Modal.Content>
<p>{t("ADDUSR_HELPER")}</p>
<Form>
<Form.Group widths='equal'>
<Form.Field>
<label>{t("ADDUSR_SEARCH_NAME")}</label>
<input placeholder={t("TBL_NAME")}
value={this.state.name}
onChange={this.nameChange.bind(this)}
/>
</Form.Field>
<Form.Field>
<label>{t("ADDUSR_SEARCH_EMAIL")}</label>
<input placeholder='email'
value={this.state.email}
onChange={this.emailChange.bind(this)}
/>
</Form.Field>
<Form.Field>
<label>{t("ADDUSR_SEARCH_USER")}</label>
<input placeholder={t("TBL_USR")}
value={this.state.username}
onChange={this.userChange.bind(this)}
/>
</Form.Field>
</Form.Group>
</Form>
<Message negative compact style={{position: 'absolute', left:'50%', transform: 'translate(-50%)'}} hidden={!this.state.missingData} onDismiss={()=>this.closeMissingError()}>
<Message.Header> {t("INTERROR_HEADER")} </Message.Header>
<p>{t("ADDUSR_MISSING_DATA")}</p>
</Message>
<Transition visible={this.state.result} animation='scale' duration={700}>
<UsrTable action='add' users={this.state.usrsFound} team={this.props.team} userTeam={this.props.userTeam} roles={this.state.roles} update={this.props.update} showError={this.props.showError} closeModal={()=>this.close()}/>
</Transition>
</Modal.Content>
<Modal.Actions>
<Button.Group>
<Button primary loading={this.state.loading} onClick={this.toggleReveal.bind(this)}>{t("ADDUSR_SEARCH_BTN")}</Button>
<Button.Or text='or'/>
<Button negative onClick={this.close.bind(this)}>{t("BTN_DENY")}</Button>
</Button.Group>
</Modal.Actions>
</Modal>
)
}
}
export default translate('translations') (withRouter(withApolloFetch(AddUserModal)))
import React, { Component } from 'react'
import {Header, Dimmer, Segment, Loader, Message} from 'semantic-ui-react'
import { translate } from 'react-i18next'
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 } = 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))
import React, { Component } from 'react'
import {Table, Button, Popup, Icon, Confirm} from 'semantic-ui-react'
import { translate } from 'react-i18next'
import {withApolloFetch} from '../../withApolloFetch'
class UsrTable extends Component{
constructor(props){
super(props)
this.state={
openConfirmDelete: false
}
}
openConfirm(id){
this.setState({openConfirmDelete: true, idToDelete: id, loading: true});
}
handleCancel(){
this.setState({openConfirmDelete: false});
}
handleDelete(){
//QUERY DELETE DA TEAM
let id_record = 0
for(let i=0; i<this.props.userTeam.length; i++){
if(this.props.userTeam[i].user_id === this.state.idToDelete && this.props.userTeam[i].team_id === this.props.team){
id_record = this.props.userTeam[i].userteam_id
}
}
let query = `
mutation removeFromTeam{
deleteCaaUserTeam(id: ${id_record}){
id
}
}`
this.props.apolloFetch({ query })
.then((data) => {
if(data.hasOwnProperty('errors')){
this.props.showError();
}else{
this.setState({openConfirmDelete: false, loading:false})
this.props.update();
}
})
.catch((error) => {
console.log(error);
})
}
addUser(id){
let query = `
mutation addToTeam{
createCaaUserTeam(iduser: ${id},
idteam: ${this.props.team}){
id
}
}`
this.setState({loading: true})
this.props.apolloFetch({ query })
.then((data) => {
if(data.hasOwnProperty('errors')){
this.props.showError();
}else{
this.setState({loading: false});
this.props.update();
this.props.closeModal();
}
})
.catch((error) => {
console.log(error);
})
}
render(){
console.log(this.props);
const { t } = this.props
let tableLayout = this.props.users.map((item)=>{
let actionLayout= <div/>
if(this.props.action==='add'){
actionLayout = <Popup
trigger={<Button circular icon={<Icon name='add user' size='large'/>} onClick={()=>this.addUser(item.id)}/>}
content= {t("POPUP_ADD")}
/>
}else if(this.props.action==='delete'){
actionLayout = <Popup
trigger={<Button circular icon={<Icon name='remove user' size='large'/>} onClick={()=>this.openConfirm(item.id)}/>}
content= {t("POPUP_DEL")}
/>
}
let role=<div/>
for(let i=0; i<this.props.roles.length; i++){
if(this.props.roles[i].id === item.role_id){
role=this.props.roles[i].role_desc
break;
}
}
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>
{role}
</Table.Cell>
<Table.Cell>
{actionLayout}
</Table.Cell>
</Table.Row>
)
});
//ho costruito le righe della tabella, ora ritorno la tabella
if(this.props.action==='delete'){
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_ACTION")}</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{tableLayout}
</Table.Body>
</Table>
<Confirm
open={this.state.openConfirmDelete}
header={t("DELETE_CNF_H")}
content={t("ALLGROUPS_REMOVE")}
onCancel={this.handleCancel.bind(this)}
onConfirm={this.handleDelete.bind(this)}
/>
</div>
)
}else if(this.props.action === 'add'){
return(
<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_ACTION")}</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{tableLayout}
</Table.Body>
</Table>
)
}
}
}
export default withApolloFetch(translate('translations')(UsrTable))
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 { withRouter } from 'react-router-dom'
import {apolloFetch} from '../../store/apolloFetchUtils'
import {connect} from 'react-redux'
import UsrConfig from './UsrConfig'
import NewUserForm from './NewUserForm'
class AllUsers extends Component{
constructor(props){
super(props)
this.update = this.update.bind(this)
this.state={
openConfirmDelete: false
}
}
openConfirm(id){
this.setState({idToDelete: id},()=>{
this.setState({openConfirmDelete: true})
})
}
handleDelete(){
let query = `
mutation delUser {
deleteCaaUser(id: ${this.state.idToDelete}){
id
}
}
`
apolloFetch({ query })
.then((data) => {
this.setState({openConfirmDelete: false});
this.componentWillMount()
})
.catch((error) => {
console.log(error);
})
}
handleCancel(){
this.setState({openConfirmDelete: false})
}
update(){
this.componentWillMount();
}
render(){
const { t, i18n } = this.props
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.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>
<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>