gd-sprest-bs
Version:
SharePoint JavaScript, TypeScript and Web Components designed using the Bootstrap framework.
303 lines (302 loc) • 16.5 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SPFxListFormWebPart = void 0;
var gd_bs_1 = require("gd-bs");
var gd_sprest_1 = require("gd-sprest");
var listForm_1 = require("../../components/listForm");
var wpSPFx_1 = require("./wpSPFx");
/**
* List Form WebPart
*/
var SPFxListFormWebPart = function (wpProps) {
// See if we have already rendered the form
if (wpProps.spfx.domElement.querySelector("form")) {
return;
}
// Set the base properties
var baseProps = {
render: function (el, cfg) {
// Set the list form properties
var listProps = {
itemId: wpProps.spfx.context.itemId,
listName: wpProps.spfx.context.list.title
};
// Call the get list information event
listProps = wpProps.onGetListInfo ? wpProps.onGetListInfo(listProps) : listProps;
// Load the list information
gd_sprest_1.Helper.ListForm.create(listProps).then(function (info) {
// See if this is the display form
var isDisplay = wpProps.spfx.displayMode == gd_sprest_1.SPTypes.FormDisplayMode.Display;
if (isDisplay) {
// Set the display form properties
var dispProps = {
el: wpProps.spfx.domElement,
info: info,
rowClassName: "mb-3"
};
// Call the rendering event
dispProps = wpProps.onDisplayFormRendering ? wpProps.onDisplayFormRendering(dispProps) : dispProps;
// Render the display form
wp.DisplayForm = listForm_1.ListForm.renderDisplayForm(dispProps);
// Call the rendered event
wpProps.onDisplayFormRendered ? wpProps.onDisplayFormRendered(wp.DisplayForm) : null;
}
else {
// Render the edit form
var editProps = {
el: wpProps.spfx.domElement,
info: info,
controlMode: info.item ? gd_sprest_1.SPTypes.ControlMode.Edit : gd_sprest_1.SPTypes.ControlMode.New,
rowClassName: "mb-3"
};
// Call the rendering event
editProps = wpProps.onEditFormRendering ? wpProps.onEditFormRendering(editProps) : editProps;
// Render the edit form
wp.EditForm = listForm_1.ListForm.renderEditForm(editProps);
// Call the rendered event
wpProps.onEditFormRendered ? wpProps.onEditFormRendered(wp.EditForm) : null;
}
// Render the footer
var elFooter = document.createElement("div");
elFooter.classList.add("footer");
wpProps.spfx.domElement.appendChild(elFooter);
// Set the footer properties
var btnSave = null;
var footerProps = isDisplay ? {
el: elFooter,
tooltips: [
{
content: "Closes the form.",
btnProps: {
text: "Close",
type: gd_bs_1.Components.ButtonTypes.OutlineDark,
onClick: function () {
// Call the close event
wpProps.spfx.formClosed();
}
}
}
]
} : {
el: elFooter,
tooltips: [
{
content: "Saves the item.",
btnProps: {
text: info.item ? "Update" : "Save",
type: gd_bs_1.Components.ButtonTypes.OutlinePrimary,
assignTo: function (btn) { btnSave = btn; },
onClick: function () {
// Ensure the form is valid
if (wp.EditForm.isValid()) {
var values = wp.EditForm.getValues();
// Disable the button
btnSave.disable();
// Call the saving event
values = wpProps.onSaving ? wpProps.onSaving(values) : values;
// Save the item
wp.EditForm.save(values).then(
// Success
function (item) {
// Call the saved event
wpProps.onSaved ? wpProps.onSaved(item) : null;
// Enable the button
btnSave.enable();
// Call the save event
wpProps.spfx.formSaved();
},
// Error
function (err) {
// TODO
});
}
}
}
},
{
content: "Cancels the request.",
btnProps: {
text: "Cancel",
type: gd_bs_1.Components.ButtonTypes.OutlineDanger,
onClick: function () {
// Call the close event
wpProps.spfx.formClosed();
}
}
}
]
};
// Call the rendering method
footerProps = wpProps.onEditFooterRendering ? wpProps.onEditFooterRendering(footerProps) : footerProps;
if (footerProps) {
// Render the footer
gd_bs_1.Components.TooltipGroup(footerProps);
}
});
},
renderEdit: function (el) {
var elBody = null;
var elFooter = null;
// Render a modal
var modal = gd_bs_1.Components.Modal({
el: el,
title: "List Form Configuration (" + wp.Configuration.ListName + ")",
onRenderBody: function (el) { elBody = el; },
onRenderFooter: function (el) { elFooter = el; }
});
// Render the configure list button
gd_bs_1.Components.Button({
el: el,
text: "Configure List",
onClick: function () {
// Clear the body
while (elBody.firstChild) {
elBody.removeChild(elBody.firstChild);
}
// Clear the footer
while (elFooter.firstChild) {
elFooter.removeChild(elFooter.firstChild);
}
// Ensure a list has been selected
if (wp.Configuration.ListId) {
// Show a loading message
gd_bs_1.Components.Alert({
el: elBody,
type: gd_bs_1.Components.AlertTypes.Primary,
content: "Loading the list data..."
});
// Get the content types
(0, gd_sprest_1.Web)(wp.Configuration.WebUrl).Lists().getById(wp.Configuration.ListId).ContentTypes().execute(function (cts) {
var items = [];
// Clear the body
while (elBody.firstChild) {
elBody.removeChild(elBody.firstChild);
}
// Parse the content types
for (var i = 0; i < cts.results.length; i++) {
var ct = cts.results[i];
// Add the item
items.push({
data: ct,
text: ct.Name,
value: ct.Id.StringValue
});
}
// Render a form
var form = gd_bs_1.Components.Form({
el: elBody,
controls: [
{
name: "ContentType",
label: "Content Type",
type: gd_bs_1.Components.FormControlTypes.Dropdown,
items: items,
required: true
},
{
name: "ComponentId",
label: "Component ID",
type: gd_bs_1.Components.FormControlTypes.TextField,
required: true,
value: wpProps.componentId
},
{
name: "ComponentProps",
label: "Component Properties",
type: gd_bs_1.Components.FormControlTypes.TextArea,
value: wpProps.componentProps
}
]
});
// Render the footer
gd_bs_1.Components.TooltipGroup({
el: elFooter,
tooltips: [
{
content: "Clears the list forms and reverts back to the default forms.",
btnProps: {
text: "Clear Custom Forms",
type: gd_bs_1.Components.ButtonTypes.OutlineDanger,
onClick: function () {
// Ensure an item is selected
if (form.isValid()) {
var values = form.getValues();
var item = values["ContentType"];
// Clear the form component properties
(0, gd_sprest_1.Web)(wp.Configuration.WebUrl).Lists().getById(wp.Configuration.ListId).ContentTypes(item.value).update({
DisplayFormClientSideComponentId: "",
DisplayFormClientSideComponentProperties: "",
EditFormClientSideComponentId: "",
EditFormClientSideComponentProperties: "",
NewFormClientSideComponentId: "",
NewFormClientSideComponentProperties: ""
}).execute(function () {
// Close the modal
modal.hide();
});
}
}
}
},
{
content: "Applies the custom list forms to the selected list.",
btnProps: {
text: "Apply Custom Forms",
type: gd_bs_1.Components.ButtonTypes.OutlineSuccess,
onClick: function () {
// Ensure an item is selected
if (form.isValid()) {
var values = form.getValues();
var item = values["ContentType"];
// Set the form component properties
(0, gd_sprest_1.Web)(wp.Configuration.WebUrl).Lists().getById(wp.Configuration.ListId).ContentTypes(item.value).update({
DisplayFormClientSideComponentId: values["ComponentId"],
DisplayFormClientSideComponentProperties: values["ComponentProps"],
EditFormClientSideComponentId: values["ComponentId"],
EditFormClientSideComponentProperties: values["ComponentProps"],
NewFormClientSideComponentId: values["ComponentId"],
NewFormClientSideComponentProperties: values["ComponentProps"]
}).execute(function () {
// Close the modal
modal.hide();
});
}
}
}
}
]
});
});
// Display the modal
modal.show();
}
else {
// Render an error
gd_bs_1.Components.Alert({
el: elBody,
type: gd_bs_1.Components.AlertTypes.Danger,
content: "Edit the webpart and select a list to apply the solution to."
});
// Display the modal
modal.show();
}
}
});
}
};
// Return the webpart
var wp = (0, wpSPFx_1.SPFxListWebPart)(__assign(__assign({}, wpProps), baseProps));
return wp;
};
exports.SPFxListFormWebPart = SPFxListFormWebPart;