office-dynamixs-ai/dynamixs-ai-app/docker/deployments/dynamixs-ai.war/pages/admin/organisation.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:i="http://java.sun.com/jsf/composite/imixs" xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:marty="http://java.sun.com/jsf/composite/marty" template="/layout/template.xhtml">


	<!-- 
	  Organisation diagram for processes and spaces based on OrgChart
	  
	  See: https://github.com/dabeng/OrgChart
	
	 -->

	<ui:define name="scripts">
		<link
			href="#{facesContext.externalContext.requestContextPath}/layout/css/jquery.orgchart.css?build=#{app.application_build_timestamp}"
			type="text/css" rel="stylesheet" />
		<link
			href="#{facesContext.externalContext.requestContextPath}/layout/css/office-theme-organigram.css?build=#{app.application_build_timestamp}"
			type="text/css" rel="stylesheet" />

		<script type="text/javascript"
			src="#{facesContext.externalContext.requestContextPath}/js/jquery.orgchart.js"></script>
		<script type="text/javascript"
			src="#{facesContext.externalContext.requestContextPath}/js/imixs-office.organigram.js"></script>
		<script type="text/javascript">
			/*<![CDATA[*/

			// compute data structure by OrganigramController			
			datasource_processes =#{ organigramController.processDatasource };
			datasource_spaces = #{ organigramController.spaceDatasource };
			direction = "#{propertyController.getProperty('organigram.direction','t2b')}";
			verticalLevel = #{ propertyController.getProperty('organigram.verticalLevel', '4') };

			/*]]>*/
		</script>
	</ui:define>

	<ui:define name="content">
		<f:view>
			<h:form id="organisation_form_id">
				<div class="imixs-header">
					<h1 style="text-align: center;">#{message['organigram.title']}</h1>
				</div>
				<div class="imixs-body organigram-container">
					<div id="organigram-processes" style="border-right: 1px solid #eee; height: 100%;"></div>
					<div id="organigram-spaces"></div>
				</div>

				<div class="imixs-footer" style="padding-top: 20px;">
					<h:commandButton value="#{message['nav.admin_processlist']}"
						actionListener="#{workflowController.reset}" immediate="true" styleClass="imixs-action"
						action="/pages/admin/processlist?faces-redirect=true" />
					<h:commandButton value="#{message['nav.admin_spaces']}" actionListener="#{workflowController.reset}"
						immediate="true" styleClass="imixs-action" action="/pages/admin/spaces?faces-redirect=true" />
					<h:commandButton value="#{message.close}" immediate="true" styleClass="imixs-close-action"
						action="notes" />
				</div>




				<!-- Node Details template (called via ajax form imixs-office-organigram.js 
	
					The Template  provides a jsf commandScript which called by teh organigram.js 
						
					See also:
					https://stackoverflow.com/questions/16588327/how-to-invoke-a-jsf-managed-bean-on-a-html-dom-event-using-native-javascript
					https://dzone.com/articles/execute-a-jsf-ajax-request-by-just-a-function-call
					https://www.w3schools.com/howto/howto_js_autocomplete.asp
			 	-->
				<h:inputHidden id="selected_node_id" value="#{organigramController.selectedNodeID}" />
				<h:commandScript name="loadTeamDetails" execute="selected_node_id"
					action="#{organigramController.loadNode()}" render="node-details-template"
					onevent="showNodeDetails">
				</h:commandScript>


				<h:panelGroup id="node-details-template" style="display:none;">
					<ui:param name="selectedNode" value="#{organigramController.selectedNode}"></ui:param>
					<ui:param name="selectedNodeID" value="#{organigramController.selectedNodeID}"></ui:param>

					<!-- the node detail block -->
					<h:panelGroup layout="block" styleClass="node-details" rendered="#{! empty selectedNode}">


						<!-- process -->
						<ui:fragment rendered="#{selectedNode.item['type'] eq 'process'}">
							<div class="teams">
								<div class="members">
									<p class="lead">
										<strong>#{selectedNode.item['process.manager.label']}</strong>
									</p>
									<ui:repeat var="member" value="#{selectedNode.itemList['process.manager']}">
										<p>#{userController.getUserName(member)}</p>
									</ui:repeat>

								</div>
								<div class="members">
									<p class="lead">
										<strong>#{selectedNode.item['process.team.label']}</strong>
									</p>
									<ui:repeat var="member" value="#{selectedNode.itemList['process.team']}">
										<p>#{userController.getUserName(member)}</p>
									</ui:repeat>
								</div>
								<div class="members">
									<p class="lead">
										<strong>#{selectedNode.item['process.assist.label']}</strong>
									</p>
									<ui:repeat var="member" value="#{selectedNode.itemList['process.assist']}">
										<p>#{userController.getUserName(member)}</p>
									</ui:repeat>
								</div>
							</div>
							<div class="controls">
								<a href="/pages/admin/process.xhtml?id=#{selectedNodeID}"
									onclick="event.stopPropagation();"><span class="typcn typcn-pencil"></span></a>
							</div>
						</ui:fragment>


						<!-- space -->
						<ui:fragment rendered="#{selectedNode.item['type'] eq 'space'}">
							<div class="teams">
								<div class="members">
									<p class="lead">
										<strong>#{selectedNode.item['space.manager.label']}</strong>
									</p>
									<ui:repeat var="member" value="#{selectedNode.itemList['space.manager']}">
										<p>#{userController.getUserName(member)}</p>
									</ui:repeat>

								</div>
								<div class="members">
									<p class="lead">
										<strong>#{selectedNode.item['space.team.label']}</strong>
									</p>
									<ui:repeat var="member" value="#{selectedNode.itemList['space.team']}">
										<p>#{userController.getUserName(member)}</p>
									</ui:repeat>
								</div>
								<div class="members">
									<p class="lead">
										<strong>#{selectedNode.item['space.assist.label']}</strong>
									</p>
									<ui:repeat var="member" value="#{selectedNode.itemList['space.assist']}">
										<p>#{userController.getUserName(member)}</p>
									</ui:repeat>
								</div>
							</div>
							<!-- custom form -->
							<ui:include src="/pages/admin/sub_organisation_custom.xhtml">
								<ui:param name="selectedNode" value="#{selectedNode}" />
							</ui:include>
							<div class="controls">
								<a href="/pages/admin/space.xhtml?id=#{selectedNodeID}"
									onclick="event.stopPropagation();"><span class="typcn typcn-pencil"></span></a>
								<a href="/pages/admin/space.xhtml?parent=#{selectedNodeID}"
									onclick="event.stopPropagation();"><span class="typcn typcn-folder-add"></span></a>
							</div>
						</ui:fragment>
					</h:panelGroup>
				</h:panelGroup>

			</h:form>


		</f:view>
	</ui:define>

</ui:composition>