gd-sprest-js
Version:
SharePoint 2013/Online js components.
296 lines (295 loc) • 10.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var gd_sprest_1 = require("gd-sprest");
var fabric_1 = require("../fabric");
var _1 = require(".");
/**
* Item Form
*/
exports.ListFormPanel = function (props) {
var _formDisplay = null;
var _formEdit = null;
var _formInfo = null;
/**
* Methods
*/
// Add the menu click events
var addMenuClickEvents = function () {
var buttons = null;
// Cancel buttons
buttons = _panel.get()._panel.querySelectorAll(".ms-CommandButton-attachments");
for (var i = 0; i < buttons.length; i++) {
// Add a click event
buttons[i].addEventListener("click", function (ev) {
// Disable postback
ev ? ev.preventDefault() : null;
// Display the attachments
_dialog.open();
});
}
// Cancel buttons
buttons = _panel.get()._panel.querySelectorAll(".ms-CommandButton-cancel");
for (var i = 0; i < buttons.length; i++) {
// Add a click event
buttons[i].addEventListener("click", function (ev) {
// Disable postback
ev ? ev.preventDefault() : null;
// Render the form
renderForm(gd_sprest_1.SPTypes.ControlMode.Display);
});
}
// Close buttons
buttons = _panel.get()._panel.querySelectorAll(".ms-CommandButton-close");
for (var i = 0; i < buttons.length; i++) {
// Add a click event
buttons[i].addEventListener("click", function (ev) {
// Disable postback
ev ? ev.preventDefault() : null;
// Close the panel
_panel.hide();
});
}
// Set the edit button click event
buttons = _panel.get()._panel.querySelectorAll(".ms-CommandButton-edit");
for (var i = 0; i < buttons.length; i++) {
// Add a click event
buttons[i].addEventListener("click", function (ev) {
// Disable postback
ev ? ev.preventDefault() : null;
// Render the form
renderForm(gd_sprest_1.SPTypes.ControlMode.Edit);
});
}
// Set the save button click event
buttons = _panel.get()._panel.querySelectorAll(".ms-CommandButton-save");
for (var i = 0; i < buttons.length; i++) {
// Add a click event
buttons[i].addEventListener("click", function (ev) {
// Disable postback
ev ? ev.preventDefault() : null;
// Validate the form
if (validate() == false) {
// Display an error message
var errorMessage = _panel.get()._panel.querySelector(".form-error");
if (errorMessage) {
// Set the error message
errorMessage.innerHTML = "The form contains errors.";
}
// Return
return;
}
// Render a saving message
var content = _panel.updateContent("");
fabric_1.Spinner({
el: content,
text: "Saving the item..."
});
// Get the form values
_formEdit.getValues().then(function (formValues) {
// Save the item
_1.ListForm.saveItem(_formInfo, formValues).then(function (formInfo) {
// Update the form info
_formInfo = formInfo;
// Render the form
renderForm(gd_sprest_1.SPTypes.ControlMode.Display);
});
});
});
}
};
// Render the form
var renderForm = function (controlMode) {
if (controlMode === void 0) { controlMode = gd_sprest_1.SPTypes.ControlMode.Display; }
// Clear the form references
_formDisplay = null;
_formEdit = null;
// Render the menu
renderMenu(controlMode);
// Update the panel content
var content = _panel.updateContent([
'<div class="ms-ListForm">',
'<label class="ms-Label ms-fontColor-redDark form-error error"></label>',
'<div></div>',
'</div>'
].join('\n'));
// Get the form element
var elForm = content.children[0].children[1];
// See if this is a new/edit form
if (controlMode == gd_sprest_1.SPTypes.ControlMode.Edit || controlMode == gd_sprest_1.SPTypes.ControlMode.New) {
// Render the edit form
_formEdit = _1.ListForm.renderEditForm({
el: elForm,
info: _formInfo,
});
}
else {
// Render the display form
_formDisplay = _1.ListForm.renderDisplayForm({
el: elForm,
info: _formInfo
});
}
// Add the menu click event
addMenuClickEvents();
};
// Render the menu
var renderMenu = function (controlMode) {
// Determine the main commands
var mainCommands = null;
switch (controlMode) {
// Display
case gd_sprest_1.SPTypes.ControlMode.Display:
mainCommands = [
{
className: "ms-CommandButton-edit",
icon: "Edit",
text: "Edit"
},
{
className: "ms-CommandButton-close",
icon: "Cancel",
text: "Close"
}
];
// See if we are loading attachments
if (props.loadAttachments) {
// Add the attachments button
mainCommands.push({
className: "ms-CommandButton-attachments",
icon: "Attach",
text: "Attachments"
});
}
break;
// Edit
case gd_sprest_1.SPTypes.ControlMode.Edit:
mainCommands = [
{
className: "ms-CommandButton-cancel",
icon: "Back",
text: "Cancel"
},
{
className: "ms-CommandButton-save",
icon: "Save",
text: "Update"
}
];
break;
// New
case gd_sprest_1.SPTypes.ControlMode.New:
mainCommands = [
{
className: "ms-CommandButton-save",
icon: "Save",
text: "Save"
},
{
className: "ms-CommandButton-close",
icon: "Cancel",
text: "Close"
}
];
break;
}
// Render the menu
fabric_1.CommandBar({
className: "ms-CommandBar--navBar",
el: _panel.get()._panel.querySelector(".ms-Panel-header"),
mainCommands: mainCommands,
sideCommands: [
{
className: "ms-CommandButton-close",
icon: "Cancel"
}
]
});
};
// Method to validate the form
var validate = function () {
// Get the fields
var fields = _panel.get()._panel.querySelectorAll(".ms-ListForm > div");
for (var i = 0; i < fields.length; i++) {
// See if there is an error message
var errorMessage = fields[i].querySelector(".ms-Label.error");
if (errorMessage && errorMessage.innerText) {
// Form contains error
return false;
}
}
// Form is valid
return true;
};
/**
* Main
*/
// Render the template
props.el.innerHTML = "<div></div><div></div>";
// Create the attachments dialog
var _dialog = fabric_1.Dialog({
el: props.el.children[0],
showCloseButton: true,
title: "Attachments"
});
// Create the panel
var _panel = fabric_1.Panel({
className: props.className,
el: props.el.children[1],
headerText: props.panelTitle,
isBlocking: props.panelIsBlocking,
panelType: typeof (props.panelType) === "number" ? props.panelType : fabric_1.PanelTypes.Large,
showCloseButton: false
});
// Create an instance of the list form
_1.ListForm.create({
cacheKey: props.cacheKey,
excludeFields: props.excludeFields,
fields: props.fields,
item: props.item,
itemId: props.itemId,
listName: props.listName,
loadAttachments: props.loadAttachments,
query: props.query,
webUrl: props.webUrl
}).then(function (formInfo) {
// Save the form information
_formInfo = formInfo;
// See if we are loading the attachments
if (props.loadAttachments) {
// Render the attachments view
_1.ListForm.renderAttachmentsView({
el: _dialog.getContent(),
info: _formInfo
});
}
// See if the panel is open
if (_panel.isOpen()) {
// Render the panel
renderForm(props.controlMode);
}
});
// Return the panel
return {
getForm: function () { return _formDisplay || _formEdit; },
show: function (controlMode) {
if (controlMode === void 0) { controlMode = gd_sprest_1.SPTypes.ControlMode.Display; }
// See if the panel is open
if (_panel.isOpen()) {
return;
}
// See if the list info exists
if (_formInfo) {
// Show the form
_panel.show();
// Render the form
renderForm(props.controlMode);
}
else {
// Show the panel
var content = _panel.show(_formInfo ? "" : "<div class='spinner'></div>");
// Render a spinner
fabric_1.Spinner({ el: content.querySelector(".spinner"), text: "Loading..." });
}
}
};
};