@ -2,14 +2,14 @@ import "../style/home/home.css"
import { Header } from "./template/Header" import { Header } from "./template/Header"
import { BASE } from "../Constants" import { BASE } from "../Constants"
import Draggable from "react-draggable" ; import Draggable from "react-draggable"
import { NULL_POS } from "../components/arrows/Pos" ; import { NULL_POS } from "../components/arrows/Pos"
import { contains } from "../components/arrows/Box" ; import { contains } from "../components/arrows/Box"
import React , { useRef , useState } from "react" ; import React , { useRef , useState } from "react"
import { fetchAPI } from "../Fetcher" import { fetchAPI } from "../Fetcher"
import { User } from "../model/User" ; import { User } from "../model/User"
import { FaShare } from "react-icons/fa" ; import { FaShare } from "react-icons/fa"
import { SaveStates } from "../components/editor/SavingState" ; import { SaveStates } from "../components/editor/SavingState"
interface Tactic { interface Tactic {
id : number
id : number
@ -58,13 +58,18 @@ function Body({
lastTactics : Tactic [ ]
lastTactics : Tactic [ ]
allTactics : Tactic [ ]
allTactics : Tactic [ ]
teams : Team [ ]
teams : Team [ ]
user : User
user : User
} ) { } ) {
const widthPersonalSpace = 78
const widthPersonalSpace = 78
const widthSideMenu = 100 - widthPersonalSpace
const widthSideMenu = 100 - widthPersonalSpace
return (
return (
< div id = "body" >
< div id = "body" >
< PersonalSpace width = { widthPersonalSpace } allTactics = { allTactics } teams = { teams } user = { user } / >
< PersonalSpace
width = { widthPersonalSpace }
allTactics = { allTactics }
teams = { teams }
user = { user }
/ >
< SideMenu
< SideMenu
width = { widthSideMenu }
width = { widthSideMenu }
lastTactics = { lastTactics }
lastTactics = { lastTactics }
@ -84,12 +89,14 @@ function SideMenu({
teams : Team [ ]
teams : Team [ ]
} ) { } ) {
return (
return (
< div id = "side-menu" style = { {
< div
width : width + "%" ,
id = "side-menu"
style = { {
width : width + "%" ,
} } >
} } >
< div id = "side-menu-content" >
< div id = "side-menu-content" >
< TeamList teams = { teams } / >
< TeamList teams = { teams } / >
< TacticList lastTactics = { lastTactics } / >
< TacticList lastTactics = { lastTactics } / >
< / div >
< / div >
< / div >
< / div >
)
)
@ -103,8 +110,8 @@ function PersonalSpace({
} : { } : {
width : number
width : number
allTactics : Tactic [ ]
allTactics : Tactic [ ]
teams : Team [ ]
teams : Team [ ]
user : User
user : User
} ) { } ) {
return (
return (
< div
< div
@ -113,7 +120,11 @@ function PersonalSpace({
width : width + "%" ,
width : width + "%" ,
} } >
} } >
< TitlePersonalSpace / >
< TitlePersonalSpace / >
< BodyPersonalSpace allTactics = { allTactics } teams = { teams } user = { user } / >
< BodyPersonalSpace
allTactics = { allTactics }
teams = { teams }
user = { user }
/ >
< / div >
< / div >
)
)
} }
@ -132,8 +143,8 @@ function TableData({
user ,
user ,
} : { } : {
allTactics : Tactic [ ]
allTactics : Tactic [ ]
teams : Team [ ]
teams : Team [ ]
user : User
user : User
} ) { } ) {
const nbRow = Math . floor ( allTactics . length / 3 ) + 1
const nbRow = Math . floor ( allTactics . length / 3 ) + 1
let listTactic = Array ( nbRow )
let listTactic = Array ( nbRow )
@ -153,8 +164,12 @@ function TableData({
i = 0
i = 0
while ( i < nbRow ) {
while ( i < nbRow ) {
listTactic [ i ] = listTactic [ i ] . map ( ( tactic : Tactic , i ) = > (
listTactic [ i ] = listTactic [ i ] . map ( ( tactic : Tactic , index : number ) = > (
< DraggableTableDataElement key = { i } tactic = { tactic } teams = { teams } / >
< DraggableTableDataElement
key = { index }
tactic = { tactic }
teams = { teams }
/ >
) )
) )
i ++
i ++
}
}
@ -172,57 +187,67 @@ function TableData({
return data
return data
} }
function DraggableTableDataElement ( { function DraggableTableDataElement ( {
tactic ,
tactic ,
teams ,
teams ,
} : { } : {
tactic : Tactic
tactic : Tactic
teams : Team [ ]
teams : Team [ ]
} ) { } ) {
const ref = useRef < HTMLDivElement > ( null )
const ref = useRef < HTMLDivElement > ( null )
const [ dragging , setDragging ] = useState ( false )
const [ dragging , setDragging ] = useState ( false )
const [ hovered , setHovered ] = useState ( false ) ;
const [ hovered , setHovered ] = useState ( false )
const handleButtonClick = ( event : React.MouseEvent < HTMLButtonElement > ) = > {
const handleButtonClick = ( event : React.MouseEvent < HTMLButtonElement > ) = > {
event . stopPropagation ( ) ;
event . stopPropagation ( )
if ( ! dragging ) {
if ( ! dragging ) {
const userEmail = window . prompt ( "Entrez l'email à qui partager la tactique :" ) ;
const userEmail = window . prompt (
if ( userEmail != null ) {
"Entrez l'email à qui partager la tactique :" ,
onShareTactic ( userEmail , tactic ) ;
)
if ( userEmail != null ) {
onShareTactic ( userEmail , tactic )
}
}
} else {
} else {
setDragging ( false ) ;
setDragging ( false )
}
}
}
} ;
return (
return (
< Draggable position = { NULL_POS }
< Draggable
position = { NULL_POS }
nodeRef = { ref }
nodeRef = { ref }
onDrag = { ( ) = > setDragging ( true ) }
onDrag = { ( ) = > setDragging ( true ) }
onStop = { ( ) = > { if ( dragging ) {
onStop = { ( ) = > {
onDropTactic ( ref . current . getBoundingClientRect ( ) , tactic , teams )
if ( dragging ) {
if ( ref . current ) {
onDropTactic (
ref . current . getBoundingClientRect ( ) ,
tactic ,
teams ,
)
}
}
} }
>
< td key = { tactic . id }
ref = { ref }
className = "data"
onClick = { ( ) = > { if ( ! dragging ) {
location . pathname = BASE + "/tactic/" + tactic . id + "/edit"
}
}
else {
} } >
< td
key = { tactic . id }
ref = { ref as React . RefObject < HTMLTableDataCellElement > }
className = "data"
onClick = { ( ) = > {
if ( ! dragging ) {
location . pathname =
BASE + "/tactic/" + tactic . id + "/edit"
} else {
setDragging ( false )
setDragging ( false )
}
}
} }
} }
onMouseEnter = { ( ) = > setHovered ( true ) }
onMouseEnter = { ( ) = > setHovered ( true ) }
onMouseLeave = { ( ) = > setHovered ( false ) }
onMouseLeave = { ( ) = > setHovered ( false ) } >
>
{ truncateString ( tactic . name , 25 ) }
{ truncateString ( tactic . name , 25 ) }
{ hovered && (
{ hovered && (
< div className = "share-icon-container" >
< div className = "share-icon-container" >
< button className = "share-button share-icon-button" onClick = { handleButtonClick } >
< button
className = "share-button share-icon-button"
onClick = { handleButtonClick } >
< FaShare className = "share-icon" / >
< FaShare className = "share-icon" / >
< / button >
< / button >
< / div >
< / div >
@ -238,14 +263,14 @@ function BodyPersonalSpace({
user ,
user ,
} : { } : {
allTactics : Tactic [ ]
allTactics : Tactic [ ]
teams : Team [ ]
teams : Team [ ]
user : User
user : User
} ) { } ) {
let data
let data
if ( allTactics . length == 0 ) {
if ( allTactics . length == 0 ) {
data = < p > Aucune tactique cr é é e ! < / p >
data = < p > Aucune tactique cr é é e ! < / p >
} else {
} else {
data = < TableData allTactics = { allTactics } teams = { teams } user = { user } / >
data = < TableData allTactics = { allTactics } teams = { teams } user = { user } / >
}
}
return (
return (
@ -298,7 +323,9 @@ function SetButtonTactic({ tactics }: { tactics: Tactic[] }) {
} }
function SetButtonTeam ( { teams } : { teams : Team [ ] } ) { function SetButtonTeam ( { teams } : { teams : Team [ ] } ) {
const listTeam = teams . map ( ( teams , i ) = > < ButtonTeam key = { i } team = { teams } / > )
const listTeam = teams . map ( ( teams , i ) = > (
< ButtonTeam key = { i } team = { teams } / >
) )
return < div className = "set-button" > { listTeam } < / div >
return < div className = "set-button" > { listTeam } < / div >
} }
@ -339,37 +366,62 @@ function truncateString(name: string, limit: number): string {
return name
return name
} }
function onDropTactic ( ref : DOMRect , tactic : Tactic , teams : Team [ ] ) { function onDropTactic ( ref : DOMRect , tactic : Tactic , teams : Team [ ] ) {
let shared = false ;
let shared = false
for ( const team of teams ) {
for ( const team of teams ) {
if ( contains ( ref , document . getElementById ( ` button-team- ${ team . id } ` ) ! . getBoundingClientRect ( ) ) ) {
if (
contains (
ref ,
document
. getElementById ( ` button-team- ${ team . id } ` ) !
. getBoundingClientRect ( ) ,
)
) {
if ( ! shared ) {
if ( ! shared ) {
shareTacticToTeam ( tactic , team ) ;
shareTacticToTeam ( tactic , team )
shared = true ;
shared = true
}
}
}
}
}
}
} }
async function onShareTactic ( email : string , tactic : Tactic ) { async function onShareTactic ( email : string , tactic : Tactic ) {
const canShareResponse = await fetchAPI ( ` tactic/ ${ tactic . id } /can-share ` , tactic ) ;
const canShareResponse = await fetchAPI (
` tactic/ ${ tactic . id } /can-share ` ,
tactic ,
)
if ( canShareResponse . ok ) {
if ( canShareResponse . ok ) {
const shareToAccountResponse = await fetchAPI ( ` tactic/ ${ tactic . id } /share-to-account ` , email ) ;
const shareToAccountResponse = await fetchAPI (
` tactic/ ${ tactic . id } /share-to-account ` ,
{ email } ,
)
if ( ! shareToAccountResponse . ok ) {
if ( ! shareToAccountResponse . ok ) {
alert ( "Une erreur s'est produite lors du partage de la tactique avec ce compte" ) ;
alert (
"Une erreur s'est produite lors du partage de la tactique avec ce compte" ,
)
}
}
} else {
} else {
alert ( "Vous ne pouvez pas partager cette tactique" ) ;
alert ( "Vous ne pouvez pas partager cette tactique" )
}
}
} }
async function shareTacticToTeam ( tactic : Tactic , team : Team ) {
async function shareTacticToTeam ( tactic : Tactic , team : Team ) { const canShare = await fetchAPI (
const canShare = await fetchAPI ( ` tactic/ ${ tactic . id } /can-share-to-team ` , team ) . then ( ( r ) = > r . ok )
` tactic/ ${ tactic . id } /can-share-to-team ` ,
if ( canShare && confirm ( "Etes-vous sûr de vouloir partager la tactique " + tactic . name + " avec l'équipe " + team . name ) ) {
team ,
) . then ( ( r ) = > r . ok )
if (
canShare &&
confirm (
"Etes-vous sûr de vouloir partager la tactique " +
tactic . name +
" avec l'équipe " +
team . name ,
)
) {
fetchAPI ( ` tactic/ ${ tactic . id } /share-to-team ` , team )
fetchAPI ( ` tactic/ ${ tactic . id } /share-to-team ` , team )
}
}
if ( ! canShare ) {
if ( ! canShare ) {
alert ( "Vous ne pouvez pas partager cette tactique à cette équipe" )
alert ( "Vous ne pouvez pas partager cette tactique à cette équipe" )
}
}
} }
