UV_SAIC_GUI/src/main/resources/templates/components/form_procedure.html

<div id="accordion">
	<div class="card">
		<div class="card-header pointer collapsed" id="headingSummary" onclick="loadFlowDiagramDelayed();" data-toggle="collapse" data-target="#collapseSummary" aria-expanded="false" aria-controls="collapseSummary">
			<h6 class="mb-0">
				<strong>Resumen</strong>
				<span style="float:right;font-size: 21px; "><i class="fas fa-caret-down"></i></span>
			</h6>
		</div>
		<div id="collapseSummary" class="collapse" aria-labelledby="headingSummary" data-parent="#accordion">
			<div class="card-body">
				<div class="btn-toolbar mermaid-tools" role="toolbar" style="float:left;">
					<div class="btn-group w-auto ml-auto pointer" role="group" aria-label="downloadDiagram">
						<span class="btn btn-secondary pointer" style="width:38px; height:38px; padding:6px" onclick="downloadFlowDiagram();"><i class="fas fa-download"></i></span>
					</div>
				</div>
				<div class="mermaid"></div>
			</div>
		</div>
	</div>
	<div class="card">
		<div class="card-header pointer" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
			<h6 class="mb-0">
				<strong th:text="#{admin.procedures.info.procedure}">Información del procedimiento</strong>
				<span style="float:right;font-size: 21px; "><i class="fas fa-caret-down"></i></span>
			</h6>
		</div>
		<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
			<div class="card-body">
				<div class="form-group row">
					<div class="col-2">
						<label th:text="#{admin.procedures.form.id}">ID</label>
						<input type="text" name="idProces" id="idProces" class="form-control" onchange="checkProcedureId(this.value);" th:value="${procedure.idProces}" required th:attr="readonly=(${action} == 'edit' ? 'true' : 'false')">
					</div>
					<div class="col-4">
						<label th:text="#{admin.procedures.form.nameProcedure}">Código</label>
						<input type="text" name="nomProces" id="nomProces" class="form-control" th:value="${procedure.nomProces}" required>
					</div>
					<div class="col-4">
						<label th:text="#{admin.procedures.form.subtitleProcedure}">Dimensión abreviada</label>
						<input type="text" name="subTitol" id="subTitol" class="form-control" th:value="${procedure.subTitol}">
					</div>
					<div class="col-2">
						<label th:text="#{admin.procedures.form.context}">Ambito</label>
						<select class="form-control pointer" name="ambit" id="ambit" required>
							<option th:selected="${procedure.ambit=='U'}" value="U">U</option>
							<option th:selected="${procedure.ambit=='C'}" value="C">C</option>
							<option th:selected="${procedure.ambit=='T'}" value="T">T</option>
						</select>
					</div>

				</div>
				<div class="form-group row">
					<div class="col">
						<label th:text="#{admin.procedures.form.version}">Versión</label>
						<input type="number" name="versio" id="versio" class="form-control" th:value="${procedure.versio}" required>
					</div>
					<div class="col">
						<label th:text="#{admin.procedures.form.activationYear}">Curso de activación</label>
						<input type="number" name="cursActivacio" id="cursActivacio" class="form-control" th:value="${procedure.cursActivacio}" required>
					</div>
					<div class="col">
						<label th:text="#{admin.procedures.form.evalYear}">Curso evaluado</label>
						<input type="number" name="cursAvaluat" id="cursAvaluat" class="form-control" th:value="${procedure.cursAvaluat}" required>
					</div>
				</div>
				<div class="form-group">
					<label th:text="#{admin.procedures.form.titleCas}">Titulo cas</label>
					<input type="text" name="titolCas" id="titolCas" class="form-control" th:value="${procedure.titolCas}">
				</div>
				<div class="form-group">
					<label th:text="#{admin.procedures.form.titleVal}">Titulo val</label>
					<input type="text" name="titolVal" id="titolVal" class="form-control" th:value="${procedure.titolVal}">
				</div>
				<div class="form-group">
					<label th:text="#{admin.procedures.form.descriptionCas}">Descripción cas</label>
					<textarea name="descripcioCas" id="descripcioCas" class="form-control" th:text="${procedure.descripcioCas}"></textarea>
				</div>
				<div class="form-group">
					<label th:text="#{admin.procedures.form.descriptionVal}">Descripción val</label>
					<textarea name="descripcioVal" id="descripcioVal" class="form-control" th:text="${procedure.descripcioVal}"></textarea>
				</div>
				<div class="form-group">
					<label th:text="#{admin.procedures.form.comments}">Comentarios</label>
					<textarea name="comentaris" id="comentaris" class="form-control" th:text="${procedure.comentaris}"></textarea>
				</div>
			</div>
		</div>
	</div>
	<div class="card card-task" th:each="item,i : ${tasks}">
		<div class="card-header pointer collapsed" data-toggle="collapse" th:attr="data-target='#collapseTask'+${i.index}, id='heading'+${i.index}, aria-controls='collapseTask'+${i.index}" aria-expanded="false">
			<h6 class="mb-0">
				<strong th:text="#{admin.procedures.info.task}+' '+${i.index+1}"></strong>
				<span style="float:right;font-size: 21px;"><i class="fas fa-caret-down"></i></span>
			</h6>
		</div>
		<div th:attr="id='collapseTask'+${i.index}, aria-labelledby='heading'+${i.index}" class="collapse" data-parent="#accordion">
			<div class="card-body">
				<div>
					<div class="form-group">
						<span class="btn btn-danger pointer"
							style="float:right;font-size: 14px;border-radius:50px;margin-right:10px;"
							th:onclick="'removeTask(\''+${i.index}+'\');'"><i class="fas fa-trash"></i></span>
						</br>
					</div>
					<div class="form-group row">
						<div class="col-3">
							<label th:text="#{admin.procedures.form.taskp}">ID Tascap</label>
							<input type="text" name="idTascap[]" class="form-control" th:value="${item.idTascap}" required th:attr="readonly=(${action} == 'edit' ? 'true' : 'false')">
						</div>
						<div class="col-3">
							<label th:text="#{admin.procedures.form.limitDate}">Fecha límite</label>
							<div class="input-group date datepicker">
								<input data-date-format="dd/mm/yyyy" type="text" name="dataLimit[]" th:value="${item.dataLim}" class="form-control uv-datePicker" required pattern=".{1,}" autocomplete="off">
								<div class="input-group-prepend uv-date-icon">
									<div class="input-group-addon input-group-text">
										<span class="fa fa-calendar"></span>
									</div>
								</div>
							</div>
						</div>
						<div class="col-3">
							<label th:text="#{admin.procedures.form.type}">Tipo</label>
							<select class="form-control pointer" name="tipus[]" required onchange="changeType(this);">
								<option th:selected="${item.idTipus==tt.tipus}" th:attr="value=${tt.tipus}" th:each="tt : ${tipus}" th:text="${tt.descripcio}">Tipo</option>
							</select>
						</div>
						<div class="col-3">
							<label th:text="#{admin.procedures.form.role}">ID Rol</label>
							<select class="form-control" name="idRol[]" required>
								<option th:each="role : ${roles}"
									th:text="${#locale.language} == 'es' ? ${role.descripcioCas}:${role.descripcioVal}" th:attr="value=${role.idRol}" th:selected="${role.idRol==item.idRol}"></option>
							</select>
						</div>
					</div>
					<div class="form-group row">
						<div class="col-3">
							<label th:text="#{admin.procedures.form.next}">ID Siguiente tarea</label>
							<input type="text" name="idTascaSeg[]" class="form-control" th:value="${item.idTascaSeg}" required>
						</div>
						<div class="col-3">
							<label th:text="#{admin.procedures.form.next2}">ID Siguiente tarea 2</label>
							<input type="text" name="idTascaSeg2[]" class="form-control" th:value="${item.idTascaSeg2}">
						</div>
						<div class="col-3">
							<label th:text="#{admin.procedures.form.options}">Opciones</label>
							<input type="text" name="opcions[]" class="form-control" th:value="${item.opcions}">
						</div>
						<div class="col-3">
							<label th:text="#{admin.procedures.form.report}">¿Genera informe?</label>
							<select class="form-control" name="informe[]" required>
								<option th:selected="${item.informe}" value="true">Si</option>
								<option th:selected="${!item.informe}" value="false">No</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label th:text="#{admin.procedures.form.titleCas}">Titulo cas</label>
						<input type="text" name="titolCas[]" class="form-control task" th:value="${item.titolCas}">
					</div>
					<div class="form-group">
						<label th:text="#{admin.procedures.form.titleVal}">Titulo val</label>
						<input type="text" name="titolVal[]" class="form-control task" th:value="${item.titolVal}">
					</div>
					<div class="form-group">
						<label th:text="#{admin.procedures.form.descriptionCas}">Descripción cas</label>
						<textarea name="descripcioCas[]" class="form-control task"
							th:text="${item.descripcioCas}"></textarea>
					</div>
					<div class="form-group">
						<label th:text="#{admin.procedures.form.descriptionVal}">Descripción val</label>
						<textarea name="descripcioVal[]" class="form-control task"
							th:text="${item.descripcioVal}"></textarea>
					</div>
					<div id="evidence1Fields" th:style="${item.idTipus == 11 or item.idTipus == 15 ? 'display:none;' : ''}">
						<div class="form-group row">
							<div class="col-3">
								<label th:text="#{admin.procedures.form.evCode}">Código evidencia</label>
								<input type="text" name="codiEvidencia[]" class="form-control task" th:value="${item.codiEvidencia}">
							</div>
						</div>
						<div class="form-group row">
							<div class="col-6">
								<label th:text="#{admin.procedures.form.nameEvCas}">Nombre evidencia cas</label>
								<input type="text" name="nomEvidenciaCas[]" class="form-control task" th:value="${item.nomEvidenciaCas}">
							</div>
							<div class="col-6">
								<label th:text="#{admin.procedures.form.nameEvVal}">Nombre evidencia val</label>
								<input type="text" name="nomEvidenciaVal[]" class="form-control task" th:value="${item.nomEvidenciaVal}">
							</div>
						</div>
					</div>
					<div class="hiddenFields" id="evidence11Fields" th:style="${item.idTipus != 11 and item.idTipus != 15 ? 'display:none;' : ''}">
						<div class="form-group row">
							<div class="col-8">
								<label>Plantilla</label>
								<select class="selectpicker" name="idPlantilla[]" data-live-search="true" data-width="100%" data-actions-box="true" th:attr="data-none-selected-text=#{global.selectors.noData}">
									<option th:each="template : ${templates}"
										th:text="${#locale.language} == 'es' ? ${template.codi}+' {v'+${template.versio}+'} ['+${template.ambit}+'] '+${template.nomCas}:${template.codi}+' {v'+${template.versio}+'} ['+${template.ambit}+'] '+${template.nomVal}"
										th:attr="value=${template.idPlantilla}" th:selected="${#strings.equals(item.codiEvidencia, #strings.toString(template.idPlantilla))}">
									</option>
								</select>
							</div>
						</div>
					</div>
					<hr>
				</div>
			</div>
		</div>
	</div>
</div>
<span class="btn btn-success pointer" onclick="newTask();" style="margin-top:15px; float:right;"> 
	<i class="fas fa-plus"></i> 
	<span th:text="#{admin.procedures.form.addTask}">Añadir tarea</span>
</span>
<div class="uv-table-group" id="actionFields" style="margin-top:20px;">
	<button class="btn btn-primary" id="formSubmit" type="submit" th:if="${action == 'new' or action == 'duplicate'}"> 
		<i class="fas fa-plus"></i> 
		<span th:text="#{admin.procedures.confirm}">Confirmar</span>
	</button>
	<button class="btn btn-info" id="formSubmit" type="submit" th:if="${action == 'edit'}"> 
		<i class="fas fa-edit"></i>
		<span th:text="#{admin.procedures.confirm}">Confirmar</span>
	</button>
</div>