1+ import "./ManageDetail.scss" ;
2+ import "../styles/access_card.scss" ;
3+ import React , { useEffect , useState } from "react" ;
4+ import { getByManageIdentifiers , publicServiceProviderByDetail } from "../api/index.js" ;
5+ import I18n from "../locale/I18n.js" ;
6+ import { useNavigate , useParams } from "react-router-dom" ;
7+ import { Button , Loader } from "@surfnet/sds" ;
8+ import PlaceHolderImage from "@surfnet/sds/icons/placeholder-image.svg" ;
9+ import { providerName , providerOrganizationName } from "../utils/Manage.js" ;
10+ import { isEmpty , stopEvent } from "../utils/Utils.js" ;
11+ import ConfirmationDialog from "../components/ConfirmationDialog.jsx" ;
12+
13+ const ManageDetail = ( ) => {
14+
15+ const { manageType, manageId} = useParams ( ) ;
16+ const navigate = useNavigate ( ) ;
17+ const [ loading , setLoading ] = useState ( true ) ;
18+ const [ serviceProvider , setServiceProvider ] = useState ( { } ) ;
19+ const [ connection , setConnection ] = useState ( { } ) ;
20+ const [ section , setSection ] = useState ( { } ) ;
21+ const [ confirmation , setConfirmation ] = useState ( { } ) ;
22+
23+ useEffect ( ( ) => {
24+ publicServiceProviderByDetail ( manageType , manageId )
25+ . then ( res => {
26+ setServiceProvider ( res ) ;
27+ //We can't combine the two calls, as getByManageIdentifiers might throw a 404
28+ getByManageIdentifiers ( manageType , manageId )
29+ . then ( conn => setConnection ( conn ) )
30+ . catch ( ( ) => true ) ;
31+ setLoading ( false ) ;
32+ } )
33+ . catch ( ( ) => {
34+ navigate ( "/404" ) ;
35+ } ) ;
36+ } , [ manageType , manageId ] ) ; // eslint-disable-line react-hooks/exhaustive-deps
37+
38+ if ( loading ) {
39+ return < Loader />
40+ }
41+
42+ const renderCurrentSection = ( ) => {
43+ switch ( section ) {
44+ case "migrate" : {
45+ return "Migrate" ;
46+ }
47+ case "import" : {
48+ return "Import" ;
49+ }
50+ }
51+ return < code > { JSON . stringify ( connection ) } </ code >
52+ }
53+
54+ const backToSystem = e => {
55+ stopEvent ( e ) ;
56+ navigate ( "/system/manage" ) ;
57+ }
58+
59+ const renderLogo = metaDataFields => {
60+ const logoUrl = metaDataFields [ "logo:0:url" ] ;
61+ return isEmpty ( logoUrl ) ? < PlaceHolderImage /> : < img src = { logoUrl } alt = "" />
62+ }
63+
64+ /**
65+ * TODO. There are two options:
66+ *
67+ * 1) Not present in Access database, choose organization, import as application or as connection under application X?
68+ * 2) Present in Access database, choose other organization, move the application of the connection to different organization?
69+ *
70+ * First provide status in Chip, then based on 1/ or 2/, show the information needs to be filled in with dynamic components
71+ */
72+
73+ const renderApp = ( ) => {
74+ return (
75+ < >
76+ < div className = "manage-detail-top" >
77+ < a href = "/#" onClick = { backToSystem } > { I18n . t ( "manageDetail.backToSystem" ) } </ a >
78+ </ div >
79+ < div className = "inner-manage-detail-container" >
80+ < div className = "manage-detail" >
81+ < div className = "meta-data" >
82+ { renderLogo ( serviceProvider . data . metaDataFields ) }
83+ < div className = "meta-data-name" >
84+ < p className = "organization" >
85+ { providerOrganizationName ( I18n . locale , serviceProvider ) }
86+ </ p >
87+ < p className = "name" >
88+ { providerName ( I18n . locale , serviceProvider ) }
89+ </ p >
90+ </ div >
91+
92+ < Button onClick = { ( ) => alert ( "todo" ) }
93+ txt = { I18n . t ( "manageDetail.import" ) } />
94+ </ div >
95+ { renderCurrentSection ( ) }
96+ </ div >
97+ </ div >
98+ </ >
99+ ) ;
100+ }
101+
102+ const { open, cancel, isError, action, question, title, okButton} = confirmation ;
103+
104+ return (
105+ < div className = { `manage-detail-container` } >
106+ { open && < ConfirmationDialog confirm = { action }
107+ cancel = { cancel }
108+ isError = { isError }
109+ confirmationTxt = { okButton }
110+ confirmationHeader = { title }
111+ question = { question } >
112+ </ ConfirmationDialog > }
113+ < div className = "inner-manage-detail-container" >
114+ { renderApp ( ) }
115+ </ div >
116+ </ div >
117+ ) ;
118+ }
119+
120+ export default ManageDetail ;
0 commit comments