sp-app-react
Version:
React based Controls and Utilities for building applications in SharePoint
597 lines (596 loc) • 34.6 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);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
to[j] = from[i];
return to;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SPApp = exports.SPAppContext = void 0;
var react_1 = __importStar(require("react"));
var formik_1 = require("formik");
var sp_1 = require("@pnp/sp");
var Yup = __importStar(require("yup"));
var react_2 = require("@fluentui/react");
sp_1.sp.setup({
sp: {
headers: {
"Accept": "application/json;odata=verbose"
}
},
});
var pnpLists = sp_1.sp.web.lists;
exports.SPAppContext = react_1.default.createContext({
spAppSchema: [],
lists: {},
addItem: function (listName) { },
deleteItem: function (item, listName) { },
values: {}
});
function SPApp(_a) {
var _this = this;
var spAppSchema = _a.spAppSchema, formID = _a.formID, children = _a.children;
var _b = __read(react_1.useState({
loaded: false,
lists: {},
listData: {}
}), 2), state = _b[0], setState = _b[1];
//OnComponentMount
react_1.useEffect(function () {
loadApp();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
var fieldIsUserField = function (listName, fieldName, lists) {
var SPListfield = lists[listName].fields.filter(function (v) { return v.InternalName == fieldName; })[0];
return ["User", "UserMulti"].includes(SPListfield.TypeAsString);
};
var trasformSPFieldSchema = function (listName, fields, state) {
var lists = state.lists;
if (lists[listName])
return fields.map(function (field) { return fieldIsUserField(listName, field.name, lists) ? __assign(__assign({}, field), { name: field.name + "Id" }) : field; });
else
throw ("Function trasformSPFieldSchema Errored - No " + listName + " list found in state.lists");
};
var getListForeignKey = function (name) {
return spAppSchema.filter(function (v) { return v.name == name; })[0].fields.filter(function (v) { return v.foreignKey; })[0].name || "";
};
var getListFieldNames = function (name, state) {
var list = spAppSchema.filter(function (v) { return v.name === name; })[0];
if (list)
return __spreadArray(__spreadArray([], __read(trasformSPFieldSchema(name, list.fields, state).map(function (v) { return v.name; }))), ["ID"]);
else
throw ("Function getListFieldNames Errored - No " + name + " list found in spAppSchema");
};
var loadApp = function () { return __awaiter(_this, void 0, void 0, function () {
var newState, _a, _b, _c, _d, _e, _f, e_1;
var _this = this;
return __generator(this, function (_g) {
switch (_g.label) {
case 0:
newState = __assign({}, state);
_g.label = 1;
case 1:
_g.trys.push([1, 5, , 6]);
_a = newState;
_c = (_b = Object).fromEntries;
return [4 /*yield*/, Promise.all(spAppSchema.map(function (v) { return __awaiter(_this, void 0, void 0, function () {
var list, _a;
return __generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, pnpLists.getByTitle(v.name).get()];
case 1:
list = _b.sent();
_a = list;
return [4 /*yield*/, pnpLists.getByTitle(v.name).fields.get()];
case 2:
_a.fields = _b.sent();
return [2 /*return*/, [v.name, list]];
}
});
}); }))];
case 2:
_a.lists = _c.apply(_b, [_g.sent()]);
if (!formID) return [3 /*break*/, 4];
_d = newState;
_f = (_e = Object).fromEntries;
return [4 /*yield*/, Promise.all(spAppSchema.map(function (list) { return __awaiter(_this, void 0, void 0, function () {
var listData, _a, _b, _c;
var _d, _e, _f, _g;
var _this = this;
return __generator(this, function (_h) {
switch (_h.label) {
case 0:
if (!list.parent) return [3 /*break*/, 2];
return [4 /*yield*/, (_d = pnpLists.getByTitle(list.name).items).select.apply(_d, __spreadArray([], __read(getListFieldNames(list.name, newState)))).filter(getListForeignKey(list.name) + " eq " + formID).get()];
case 1:
_a = _h.sent();
return [3 /*break*/, 4];
case 2: return [4 /*yield*/, (_e = pnpLists.getByTitle(list.name).items.getById(formID)).select.apply(_e, __spreadArray([], __read(getListFieldNames(list.name, newState)))).get()];
case 3:
_a = _h.sent();
_h.label = 4;
case 4:
listData = _a;
if (!Array.isArray(listData)) return [3 /*break*/, 6];
return [4 /*yield*/, Promise.all(listData.map(function (item) { return __awaiter(_this, void 0, void 0, function () {
var _a;
var _b, _c;
return __generator(this, function (_d) {
switch (_d.label) {
case 0:
_a = [__assign({}, item)];
_b = {};
_c = {};
return [4 /*yield*/, pnpLists.getByTitle(list.name).items.getById(item.ID).attachmentFiles.get()];
case 1: return [2 /*return*/, (__assign.apply(void 0, _a.concat([(_b.AttachmentFiles = (_c.results = _d.sent(), _c), _b)])))];
}
});
}); }))];
case 5:
_b = _h.sent();
return [3 /*break*/, 8];
case 6:
_c = [__assign({}, listData)];
_f = {};
_g = {};
return [4 /*yield*/, pnpLists.getByTitle(list.name).items.getById(formID).attachmentFiles.get()];
case 7:
_b = __assign.apply(void 0, _c.concat([(_f.AttachmentFiles = (_g.results = _h.sent(), _g), _f)]));
_h.label = 8;
case 8:
listData = _b;
return [2 /*return*/, [list.name, listData]];
}
});
}); }))];
case 3:
_d.listData = _f.apply(_e, [_g.sent()]);
_g.label = 4;
case 4: return [3 /*break*/, 6];
case 5:
e_1 = _g.sent();
console.error(e_1);
newState.loadError = e_1;
return [3 /*break*/, 6];
case 6:
newState.loaded = true;
setState(newState);
return [2 /*return*/];
}
});
}); };
var getTypeDefaultValue = function (type) {
switch (type) {
case "MultiChoice":
case "UserMulti":
return {
results: []
};
case "Boolean":
return false;
case "Text":
case "Choice":
case "Note":
case "DateTime":
case "Integer":
case "Number":
case "User":
default:
return "";
}
};
var getFieldDefaultValue = function (listName, fieldName) {
var lists = state.lists;
var field = lists[listName].fields.filter(function (field) { return field.InternalName == fieldName; })[0];
if (field) {
if (field.DefaultValue) {
if (field.TypeAsString === "MultiChoice")
return { results: [field.DefaultValue] };
if (field.TypeAsString === "Boolean")
return field.DefaultValue === "1";
return field.DefaultValue;
}
// return field.TypeAsString === "MultiChoice" ? {results: [field.DefaultValue]} : field.DefaultValue
else
return getTypeDefaultValue(field.TypeAsString);
}
else
throw ("Function getFieldDefaultValue Errored - No " + fieldName + " field found in list " + listName);
};
var getListDefaultValues = function (list) {
var lists = state.lists;
return Object.fromEntries(list.fields.map(function (field) { return ([
fieldIsUserField(list.name, field.name, lists) ? field.name + "Id" : field.name,
field.defaultValue || getFieldDefaultValue(list.name, field.name)
]); }));
};
var getDefaultValues = function () {
var listData = state.listData;
if (formID) {
return Object.fromEntries(Object.entries(listData).map(function (v) {
var name = v[0];
var data = v[1];
var listSchema = spAppSchema.filter(function (listSchema) { return listSchema.name === name; })[0];
return [name, Array.isArray(data)
? data.map(function (item) { return (__assign(__assign({}, getListDefaultValues(listSchema)), removeNullValues(item))); })
: __assign(__assign({}, getListDefaultValues(listSchema)), removeNullValues(data))];
}));
}
else
return Object.fromEntries(spAppSchema.map(function (list) {
return list.parent
? [list.name, list.defaultItems ? __spreadArray([], __read(Array(list.defaultItems))).map(function (i) { return getListDefaultValues(list); }) : []]
: [list.name, getListDefaultValues(list)];
}));
};
var getYupType = function (type) {
switch (type) {
case "Text":
case "Choice":
case "Note":
case "DateTime":
return Yup.string().required("This field cannot be blank");
case "Integer":
case "Number":
case "User":
return Yup.mixed().required("This field cannot be blank");
case "MultiChoice":
case "UserMulti":
return Yup.object().shape({
results: Yup.array().min(1, "This field cannot be blank")
});
case "Boolean":
return Yup.boolean().required("This field cannot be blank");
default:
return Yup.mixed().required("This field cannot be blank");
}
};
var getSPListFieldValidation = function (listName, fieldName, required) {
var lists = state.lists;
var field = lists[listName].fields.filter(function (v) { return v.InternalName === fieldName; })[0];
return field.Required || required ? getYupType(field.TypeAsString) : Yup.mixed();
};
var validationSchema = Yup.lazy(function (values) {
return Yup.object().shape(Object.fromEntries(spAppSchema.map(function (list) {
var fieldsValidation = Object.fromEntries(list.fields.map(function (field) { return [
fieldIsUserField(list.name, field.name, state.lists)
? field.name + "Id"
: field.name,
field.validation //if field validation function provided
? field.validation(values)
: getSPListFieldValidation(list.name, field.name, field.required)
]; }));
return [list.name, list.parent //If Child List
? list.validation //if list validation function provided
? list.validation(values, Yup.array(Yup.object().shape(fieldsValidation)))
: Yup.array(Yup.object().shape(fieldsValidation))
: Yup.object().shape(fieldsValidation)
];
})));
});
var saveAttachments = function (files, item) { return __awaiter(_this, void 0, void 0, function () {
var deleteFiles, addFiles, attachmentFiles;
var _a;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
deleteFiles = files.filter(function (i) {
return (i.__metadata.deleted || i.__metadata.updated);
})
.map(function (i) {
return i.FileName;
});
addFiles = files.filter(function (i) {
return (i.__metadata.unsaved || i.__metadata.updated);
})
.map(function (i) {
return {
name: i.FileName,
content: i.__metadata.fileObj
};
});
if (!(deleteFiles.length > 0)) return [3 /*break*/, 2];
return [4 /*yield*/, (_a = item.attachmentFiles).deleteMultiple.apply(_a, __spreadArray([], __read(deleteFiles)))];
case 1:
_b.sent();
_b.label = 2;
case 2:
if (!(addFiles.length > 0)) return [3 /*break*/, 4];
return [4 /*yield*/, item.attachmentFiles.addMultiple(addFiles)];
case 3:
_b.sent();
_b.label = 4;
case 4: return [4 /*yield*/, item.attachmentFiles.get()];
case 5:
attachmentFiles = _b.sent();
return [2 /*return*/, attachmentFiles];
}
});
}); };
var loaded = state.loaded, loadError = state.loadError;
return react_1.default.createElement(react_1.default.Fragment, null, loaded && !loadError ? react_1.default.createElement(formik_1.Formik, { initialValues: getDefaultValues(), enableReinitialize: true, onSubmit: _onSubmit, validateOnMount: true, validationSchema: validationSchema, validateOnChange: true, validateOnBlur: false }, function (formikBag) {
var values = formikBag.values, setValues = formikBag.setValues;
var saveApp = function (listName, valuesOverride) { return __awaiter(_this, void 0, void 0, function () {
var formikValues, primaryListSchema_1, savedPrimaryList, _a, _b, e_2;
var _this = this;
return __generator(this, function (_c) {
switch (_c.label) {
case 0:
formikValues = valuesOverride ? __assign({}, valuesOverride) : __assign({}, values);
_c.label = 1;
case 1:
_c.trys.push([1, 6, , 7]);
primaryListSchema_1 = spAppSchema.filter(function (v) { return v.primary; })[0];
if (!primaryListSchema_1)
throw ("SPAppSchema Error: No primary list found in spAppSchema array.");
if (!formikValues[primaryListSchema_1.name])
throw ("SPAppSchema Error: Primary list name not found in initial formik values object.");
if (!!formikValues[primaryListSchema_1.name].ID) return [3 /*break*/, 3];
return [4 /*yield*/, pnpLists.getByTitle(primaryListSchema_1.name).items.add(resetNullValues(formikValues[primaryListSchema_1.name]))];
case 2:
savedPrimaryList = _c.sent();
formikValues[primaryListSchema_1.name].ID = savedPrimaryList.data.ID;
_c.label = 3;
case 3:
if (!formikValues[primaryListSchema_1.name].ID) return [3 /*break*/, 5];
_b = (_a = Object).fromEntries;
return [4 /*yield*/, Promise.all(Object.entries(formikValues)
.filter(function (v) { return v[0] == listName || !listName; })
.map(function (_a) {
var _b = __read(_a, 2), listName = _b[0], data = _b[1];
return __awaiter(_this, void 0, void 0, function () {
var _c, newData, _d;
var _e;
var _this = this;
return __generator(this, function (_f) {
switch (_f.label) {
case 0:
if (!Array.isArray(data)) return [3 /*break*/, 2];
_c = [listName];
return [4 /*yield*/, Promise.all(data.map(function (item) { return __awaiter(_this, void 0, void 0, function () {
var newItem, fkFieldName, _a, _b;
var _c, _d;
return __generator(this, function (_e) {
switch (_e.label) {
case 0:
newItem = __assign({}, item);
if (!(item.ID && item.__metadata && item.__metadata.deleted)) return [3 /*break*/, 2];
return [4 /*yield*/, pnpLists.getByTitle(listName).items.getById(item.ID).delete()];
case 1:
_e.sent();
return [2 /*return*/, item];
case 2:
fkFieldName = spAppSchema.filter(function (v) { return v.name == listName; })[0].fields.filter(function (v) { return v.foreignKey; })[0].name;
newItem[fkFieldName] = formikValues[primaryListSchema_1.name].ID;
if (!item.ID) return [3 /*break*/, 4];
return [4 /*yield*/, pnpLists.getByTitle(listName).items.getById(item.ID).update(resetNullValues(newItem))
//else Create if item does not exist
];
case 3:
_e.sent();
return [3 /*break*/, 6];
case 4:
_a = [__assign({}, item)];
_c = {};
return [4 /*yield*/, pnpLists.getByTitle(listName).items.add(resetNullValues(newItem))];
case 5:
newItem = __assign.apply(void 0, _a.concat([(_c.ID = (_e.sent()).data.ID, _c)]));
_e.label = 6;
case 6:
if (!(newItem.AttachmentFiles && newItem.AttachmentFiles.results && newItem.ID)) return [3 /*break*/, 8];
_b = newItem;
_d = {};
return [4 /*yield*/, saveAttachments(newItem.AttachmentFiles.results, pnpLists.getByTitle(listName).items.getById(newItem.ID))];
case 7:
_b.AttachmentFiles = (_d.results = _e.sent(), _d);
_e.label = 8;
case 8: return [2 /*return*/, newItem];
}
});
}); }))];
case 1: return [2 /*return*/, _c.concat([(_f.sent()).filter(function (item) { return item.__metadata && !item.__metadata.deleted || !item.__metadata; })])]; //filter deleted items from returned array
case 2:
if (!(typeof data === 'object')) return [3 /*break*/, 6];
return [4 /*yield*/, pnpLists.getByTitle(listName).items.getById(data.ID).update(resetNullValues(data))];
case 3:
_f.sent();
newData = __assign({}, data);
if (!(data.AttachmentFiles && data.AttachmentFiles.results && data.ID)) return [3 /*break*/, 5];
_d = newData;
_e = {};
return [4 /*yield*/, saveAttachments(data.AttachmentFiles.results, pnpLists.getByTitle(listName).items.getById(data.ID))];
case 4:
_d.AttachmentFiles = (_e.results = _f.sent(), _e);
_f.label = 5;
case 5: return [2 /*return*/, [listName, newData]];
case 6: throw ("Formik Value " + listName + " is neither Array or Object and cannot be saved.");
}
});
});
}))];
case 4:
formikValues = _b.apply(_a, [_c.sent()]);
_c.label = 5;
case 5: return [3 /*break*/, 7];
case 6:
e_2 = _c.sent();
console.error(e_2);
return [3 /*break*/, 7];
case 7:
setValues(formikValues);
return [2 /*return*/, formikValues];
}
});
}); };
var deleteApp = function (listName) { return __awaiter(_this, void 0, void 0, function () {
var listData;
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
listData = state.listData;
return [4 /*yield*/, Promise.all(Object.entries(listData)
.filter(function (_a) {
var _b = __read(_a, 1), listDataKey = _b[0];
return listName ? listName === listDataKey : true;
})
.map(function (_a) {
var _b = __read(_a, 2), listName = _b[0], data = _b[1];
return __awaiter(_this, void 0, void 0, function () {
return __generator(this, function (_c) {
switch (_c.label) {
case 0:
if (!Array.isArray(data)) return [3 /*break*/, 2];
return [4 /*yield*/, Promise.all(data.map(function (item) { return pnpLists.getByTitle(listName).items.getById(item.ID).delete(); }))];
case 1: return [2 /*return*/, _c.sent()];
case 2: return [2 /*return*/, pnpLists.getByTitle(listName).items.getById(data.ID).delete()];
}
});
});
}))];
case 1:
_a.sent();
setState(__assign(__assign({}, state), { listData: Object.fromEntries(spAppSchema.map(function (v) { return v.parent ? [v.name, []] : [v.name, {}]; })) }));
return [2 /*return*/];
}
});
}); };
var addItem = function (listName, item) {
var newValues = __assign({}, values);
if (!Array.isArray(newValues[listName]))
throw "List is not an array.";
var listSchema = spAppSchema.filter(function (v) { return v.name === listName; })[0];
if (!listSchema)
throw "List " + listName + " Schema not found in spAppSchema.";
newValues[listName] = __spreadArray(__spreadArray([], __read(newValues[listName])), [item ? item : getListDefaultValues(listSchema)]);
setValues(newValues);
};
var deleteItem = function (item, listName) {
var newValues = __assign({}, values);
if (!Array.isArray(newValues[listName]))
throw "List is not an array.";
var index = newValues[listName].indexOf(item);
if (!newValues[listName].includes(item))
throw "Item not found in list array.";
if (item.ID)
newValues[listName][index] = __assign(__assign({}, newValues[listName][index]), { __metadata: { deleted: true } });
else
newValues[listName].splice(index, 1);
setValues(newValues);
};
return react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(exports.SPAppContext.Provider, { value: {
spAppSchema: spAppSchema,
lists: state.lists,
addItem: addItem,
deleteItem: deleteItem,
values: values
} }, formik_1.isFunction(children) ? children({ formikBag: formikBag, saveApp: saveApp, deleteApp: deleteApp }) : children));
})
: loadError
? react_1.default.createElement(react_2.MessageBar, { messageBarType: react_2.MessageBarType.error, isMultiline: true },
"Error Loading Form - ",
loadError.message)
: null);
//Private Functions
function _onSubmit(values, actions) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
actions.setSubmitting(true);
//const savedState = await saveForm(values, true)
actions.setSubmitting(false);
return [2 /*return*/];
});
});
}
}
exports.SPApp = SPApp;
function removeNullValues(object) {
return Object.fromEntries(Object.entries(object).filter(function (v) { return v[1] !== null; }));
}
function resetNullValues(values) {
return Object.fromEntries(Object.entries(values).map(function (item) {
return (item[1] == "" || item[1] == 0) ? [item[0], null] : item;
}));
}