OBJETIVOS INSTITUCIONALES

Objetivo Institucional:

<select id="slObjInst" style="max-width:19px" ></select>
		</div>
		<div class="col-xs-4">
			<span>Código: </span><span> </span>
			<input type="text" id="codObjInst" />
		</div>
		<div class="col-xs-2">
			<a class="btn btn-info" id="btnCrearRelacion_ObjInst" onclick="saveRelacionObjInst()">Relacionar</a>
		</div>
		<br />
		<div class="col-xs-12">
			<span id="validateRelacion" style="color: red; display: none">No se puede crear la relación.</span>
		</div>
	</div>
	<div id="vistasObjInst">
	</div>
</div>

<script type="text/javascript">
	var idOGestor=""
	var ObjetivosInstitucionalesGUID="Objetivos Institucionales";
	var objInst=[];
	$(document).ready(function(){
		devolverListas(["Objetivos Institucionales"],true,function(g){
			ObjetivosInstitucionalesGUID = g[0];
			idOGestor=GetUrlKeyValue("ID");
			pintarObjetivosInstitucionales(false);
			$("#slObjInst").on("change", function () {
				if($("#slObjInst").val()=="0"){
					$("#titObjInst").val("");
					$("#codObjInst").val("");
				}
				else{
					var objetivoSeleccionado=objInst.find(x=>x.Title==$("#slObjInst :selected").text());
					$("#titObjInst").val(objetivoSeleccionado.Title);
					$("#codObjInst").val(objetivoSeleccionado.Codigo);
				}
			});
			$(document).on("click", ".imgBorrarRelacionObjInst", function () {
				deleteRelacionObjInst($(this).attr("data-id"));
			});
		});
	});

function pintarObjetivosInstitucionales(refresh){
		objInst=[];
		var fieldsToRead = "<ViewFields>" +
				"<FieldRef Name='ID' />" +
				"<FieldRef Name='Title' />" +
				"<FieldRef Name='ObjetivoInstitucional' />" +
				"<FieldRef Name='Codigo' />" +
				"<FieldRef Name='OrganoGestor' />" +
			"</ViewFields>";
		$().SPServices({
			operation: "GetListItems",
			async: true,
			listName: ObjetivosInstitucionalesGUID,
			CAMLViewFields: fieldsToRead,
			CAMLQuery: "<Query><Where></Where></Query>",
			completefunc: function (xData, Status) {
				$(xData.responseXML).SPFilterNode("z:row").each(function () {
					var id=$(this).attr("ows_ID");
					var title=$(this).attr("ows_Title");
					var objetivoInstitucional=$(this).attr("ows_ObjetivoInstitucional")?$(this).attr("ows_ObjetivoInstitucional"):title;
					if(objInst.find(x=>x.Title==objetivoInstitucional)==undefined){
						var codigo=$(this).attr("ows_Codigo")?$(this).attr("ows_Codigo"):"";
						objInst.push({"ID":id,"Title":objetivoInstitucional,"Codigo":codigo,"Relacionado":false});
					}
					var organoGestor=$(this).attr("ows_OrganoGestor")!=undefined?$(this).attr("ows_OrganoGestor").split(';')[0]:"0";
					if(idOGestor==organoGestor){
						objInst.find(x=>x.Title==objetivoInstitucional).ID=id;
						objInst.find(x=>x.Title==objetivoInstitucional).Relacionado=true;
					}
				});
				$("#vistasObjInst").html("");
				$("#slObjInst").html("");
				var htmlTable = "<table class='ms-listviewtable'><tr valign='top' role='row' class='ms-viewheadertr ms-vhltr'><th class='ms-vh2' role='columnheader' scope='col'></th><th class='ms-vh2' role='columnheader' scope='col'><div class='ms-vh-div'>Objetivo Institucional</div></th><th class='ms-vh2' role='columnheader' scope='col'><div class='ms-vh-div'>Código</div></th></tr>";
				var htmlSelect="<option value='0' selected='selected' >Seleccione un objetivo para rellenar los campos automáticamente</option>";
				$.each(objInst,function(o){
					if(objInst[o].Relacionado)
						htmlTable += "<tr class='ms-itmHoverEnabled ms-itmhover' role='row' ><td role='gridcell' class='ms-cellstyle ms-vb-title' height='100%'><span title='Eliminar' class='fa fa-trash imgBorrarRelacionObjInst' data-id='" + objInst[o].ID + "' ></span></td><td role='gridcell' class='ms-cellstyle ms-vb-title' height='100%'><div class='ms-vb itx' >" + objInst[o].Title + "</div></td><td role='gridcell' class='ms-cellstyle ms-vb-title' height='100%'><div class='ms-vb itx' >" + objInst[o].Codigo + "</div></td></tr>";
					else
						htmlSelect+="<option value='"+objInst[o].ID+"' >"+objInst[o].Title+"</option>";
				})
				$("#vistasObjInst").html(htmlTable);
				$("#slObjInst").html(htmlSelect);
				if(refresh)
					window.parent.eval("window.waitDialog.close();");
			}
		});	
	}

function saveRelacionObjInst(){
		if(validateRelacion()){
			window.parent.eval("window.waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Creando relación...', 'Por favor espere un momento', 130, 480);");
			//var objetivoSeleccionado=objInst[$("#slObjInst").val()];
			var datos = [];
			datos.push(["Title","Ver"],["ObjetivoInstitucional", $("#titObjInst").val()],["Codigo", $("#codObjInst").val()],["OrganoGestor", idOGestor]);
			$().SPServices({
				operation: "UpdateListItems",
				async: true,
				batchCmd: "New",
				listName: ObjetivosInstitucionalesGUID,
				valuepairs: datos,
				completefunc: function (xData, Status) {
					console.log("Creado " + Status);
					$("#slObjInst").val("0");
					$("#slObjInst").trigger("change");
					setTimeout(function () {
						pintarObjetivosInstitucionales(true);
					}, 100);
				}
			});
		}
	}

function deleteRelacionObjInst(itemID) {
		window.parent.eval("window.waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Eliminando relación...', 'Por favor espere un momento', 130, 480);");
		$().SPServices({
			operation:"UpdateListItems",
			async: true,
			batchCmd: "Delete",
			listName: ObjetivosInstitucionalesGUID,
			ID: itemID,
			completefunc:function(xData, Status)
			{
				console.log("Borrado "+Status);
				setTimeout(function () {
					pintarObjetivosInstitucionales(true);
				}, 100);
			}
		});
	}
	
	function validateRelacion() {
        var guardar = true;
        var message = "";
        var titObjInst = $("#titObjInst").val();
        if (titObjInst == "") {
            message += "Por favor introduzca un Objetivo Institucional.";
            guardar = false;
        }
        var codObjInst = $("#codObjInst").val();
        if (codObjInst == "") {
            message += "Por favor introduzca un Código.";
            guardar = false;
        }
        if (!guardar) {
            $("#validateRelacion").text(message);
            $("#validateRelacion").css("display", "");
            $("#titObjInst").on('change', function () {
                validateRelacion();
            });
            $("#codObjInst").on('change', function () {
                validateRelacion();
            });
        }
        else
            $("#validateRelacion").css("display", "none");

return guardar;
    }
</script>
			
			
<style type="text/css">
	.ms-viewheadertr ms-vhltr{
		background-color: #00addf;
		color: white;
	}
	.imgBorrarRelacionObjInst {
        color: #DD4F43;
        cursor: pointer;
    }

</style>