@theaimegroup/aime-component-library
Version:
AIME Component Library
838 lines (804 loc) • 272 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var client = require('@apollo/client');
var layout = require('@chakra-ui/layout');
var react = require('@chakra-ui/react');
var changeCase = require('change-case');
var axios = require('axios');
var icons = require('@chakra-ui/icons');
var reactRouterDom = require('react-router-dom');
var Moment = require('react-moment');
var reactGoogleCharts = require('react-google-charts');
var Rating = require('react-rating');
var BlogDetail = require('@ericnjeru/aime-blog');
var reactDraftWysiwyg = require('react-draft-wysiwyg');
var Draft = require('draft-js');
require('react-draft-wysiwyg/dist/react-draft-wysiwyg.css');
var draftToHtml = require('draftjs-to-html');
var draftJsImportHtml = require('draft-js-import-html');
var recharts = require('recharts');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
var Moment__default = /*#__PURE__*/_interopDefaultLegacy(Moment);
var Rating__default = /*#__PURE__*/_interopDefaultLegacy(Rating);
var BlogDetail__default = /*#__PURE__*/_interopDefaultLegacy(BlogDetail);
var Draft__default = /*#__PURE__*/_interopDefaultLegacy(Draft);
var draftToHtml__default = /*#__PURE__*/_interopDefaultLegacy(draftToHtml);
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = "body {\r\n margin: 0;\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\r\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\r\n sans-serif;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\ncode {\r\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\r\n monospace;\r\n}\r\n\r\n/*\r\n* below css is copied from Hunesh's repo\r\n*/\r\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;400;500;700&display=swap');\r\n@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');\r\n\r\n@font-face {\r\n font-family: 'Maison Neue';\r\n\r\n src: local('Maison Neue'),\r\n url(./fonts/MaisonNeue-Demi.ttf) format(\"truetype\")\r\n}\r\n\r\n@font-face {\r\n font-family: 'MaisonBook';\r\n\r\n src: url(./fonts/MaisonNeue-Book.ttf) format(\"truetype\")\r\n}\r\n\r\n\r\n.Masion-neue {\r\n font-family: 'Maison Neue';\r\n}\r\n\r\n.Masion-Book {\r\n font-family: 'MaisonBook';\r\n}\r\n\r\n.interFonts {\r\n font-family: 'Inter', sans-serif;\r\n}\r\n\r\n.tablee {\r\n padding: 10px;\r\n}";
styleInject(css_248z);
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(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);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __awaiter(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());
});
}
function __generator(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 };
}
}
function __spreadArray(to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
to[j] = from[i];
return to;
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
}
function DropdownSelect(props) {
var _a;
var displayColumns = props.displayColumns, tableName = props.tableName, cols = props.cols, placeholder = props.placeholder, OnChange = props.OnChange, defaultValue = props.defaultValue, returnColumn = props.returnColumn;
// create a function to generate graphql query
var generateQuery = function (tableName, cols) {
var query = "query {\n ".concat(tableName, " {\n ").concat(cols.join("\n"), "\n }\n }");
return query;
};
var getQuery = generateQuery(tableName, cols);
var theQuery = client.gql(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), getQuery);
var _b = client.useQuery(theQuery), data = _b.data, loading = _b.loading, error = _b.error;
if (loading) {
return React__default["default"].createElement("div", null, "Loading...");
}
if (error) {
console.log("error ", error);
return React__default["default"].createElement("div", null, "Error... ");
}
if (!data) {
return React__default["default"].createElement(layout.Text, null, "No data");
}
return (React__default["default"].createElement(react.VStack, { alignItems: "center" },
React__default["default"].createElement(layout.Text, { className: "interFonts", fontWeight: "500", fontSize: "13px", color: "#626D85", textAlign: "right" }, placeholder),
React__default["default"].createElement(react.Select, { textAlign: "left", color: "#626D85", value: defaultValue !== null && defaultValue !== void 0 ? defaultValue : "", placeholder: placeholder, onChange: function (e) {
if (returnColumn === "id") {
OnChange(parseInt(e.target.value));
}
else {
OnChange(e.target.value);
}
} },
React__default["default"].createElement("option", null,
"Select ",
placeholder), (_a = data[tableName]) === null || _a === void 0 ? void 0 :
_a.map(function (item) { return (React__default["default"].createElement("option", { key: item.id, value: item[returnColumn] }, displayColumns.map(function (col, key) {
return key === displayColumns.length - 1 ? item[col] : item[col] + " ";
}))); }))));
}
var templateObject_1$c;
//transform underscore value to Capitalise
//npm_test_clients to NPM Test Clients
function underScoreToCapitalize(str) {
var strArr = str.split("_");
var result = "";
for (var i = 0; i < strArr.length; i++) {
strArr[i] = strArr[i].charAt(0).toUpperCase() + strArr[i].slice(1);
result += strArr[i];
if (i < strArr.length - 1) {
result += " ";
}
}
return result;
}
//convert given a col 'type' to html input type
function convertColTypeToInputType(colType) {
switch (colType) {
case "Int":
case "Int!":
return "number";
case "String":
case "String!":
return "text";
case "date":
case "date!":
case "Date!":
case "Date":
return "date";
case "numeric":
case "Numeric":
case "numeric!":
case "Numeric!":
case "select":
case "Select":
case "select!":
case "Select!":
return "number";
case "image":
case "Image":
case "image!":
case "Image!":
return "text";
default:
return "text";
}
}
function getType(type) {
switch (type) {
case "image":
case "image!":
return "String";
case "video":
case "video!":
return "String";
case "audio":
case "audio!":
return "String";
default:
return type;
}
}
function getSinglePrimaryKey$1(col) {
var singlePrimaryKeyCol = null;
for (var i = 0; i < col.length; i++) {
if (col[i].isPrimary) {
singlePrimaryKeyCol = changeCase.snakeCase(col[i].name);
break;
}
}
return singlePrimaryKeyCol !== null && singlePrimaryKeyCol !== void 0 ? singlePrimaryKeyCol : 'id';
}
function getSinglePrimaryKeyCol(col) {
var singlePrimaryKeyCol = null;
for (var i = 0; i < col.length; i++) {
if (col[i].isPrimary) {
singlePrimaryKeyCol = col[i];
break;
}
}
/* Add default id column to be returned */
var defaultPrimaryKey = {
name: "id",
type: "Int!",
isPrimary: true,
isForeignKey: false
};
return singlePrimaryKeyCol !== null && singlePrimaryKeyCol !== void 0 ? singlePrimaryKeyCol : defaultPrimaryKey;
}
function getColumnsWithoutForeignkey(col) {
var result = [];
for (var i = 0; i < col.length; i++) {
if (col[i].isForeignKey) {
continue;
}
result.push(col[i]);
}
return result;
}
/*
* Builds get query given table name and cols sorted by primary key
* */
function getSearchQuery(tablename, col) {
var primaryKeyCol = getSinglePrimaryKey$1(col);
var cols = col.map(function (c) { return changeCase.snakeCase(c.name); });
var colBody = '{';
for (var i = 0; i < cols.length; i++) {
colBody += cols[i];
if (i !== cols.length - 1) {
colBody += ',';
}
}
colBody += '}';
var sortingParams = "(order_by:{".concat(primaryKeyCol, ": desc})");
var query = client.gql(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["query{", "", "", "}"], ["query{", "", "", "}"])), tablename, sortingParams, colBody);
return query;
}
/*
* Builds subscription query given table name and cols sorted by primary key
* */
function getSubscriptionQuery(tablename, col) {
var primaryKeyCol = getSinglePrimaryKey$1(col);
col = col.map(function (c) { return changeCase.snakeCase(c.name); });
var colBody = '{';
for (var i = 0; i < col.length; i++) {
colBody += col[i];
if (i !== col.length - 1) {
colBody += ',';
}
}
colBody += '}';
var sortingParams = "(order_by:{".concat(primaryKeyCol, ": asc})");
var query = client.gql(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["subscription{", "", "", "}"], ["subscription{", "", "", "}"])), tablename, sortingParams, colBody);
return query;
}
/*
* query for hasura update by primary key
* */
function updateTableByPrimaryKey(tablename, col) {
var singlePrimaryKeyCol = getSinglePrimaryKey$1(col);
var updateInputs = "$".concat(singlePrimaryKeyCol, ": Int,");
for (var i = 0; i < col.length; i++) {
updateInputs += "$".concat(changeCase.snakeCase(col[i].name), ": ").concat(getType(col[i].type));
if (i !== col.length - 1) {
updateInputs += ',';
}
}
var updateConditions = "{".concat(singlePrimaryKeyCol, ": {_eq:$").concat(singlePrimaryKeyCol, "}}");
var updateBody = "{";
for (var i = 0; i < col.length; i++) {
updateBody += "".concat(changeCase.snakeCase(col[i].name), ": $").concat(changeCase.snakeCase(col[i].name));
if (i !== col.length - 1) {
updateBody += ',';
}
}
updateBody += "}";
var updateQuery = client.gql(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["mutation updateTable (", ") {\n update_", "(where: ", ", _set: ", ") {\n affected_rows\n }\n }"], ["mutation updateTable (", ") {\n update_", "(where: ", ", _set: ", ") {\n affected_rows\n }\n }"])), updateInputs, tablename, updateConditions, updateBody);
return updateQuery;
}
function addTableRecord(tablename, col) {
var singlePrimaryKeyCol = getSinglePrimaryKey$1(col);
var insertQuery = client.gql(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["mutation insert_single_", "($object: ", "_insert_input!) {\n insert_", "_one(\n object: $object\n ) {\n ", "\n }\n }"], ["mutation insert_single_", "($object: ", "_insert_input!) {\n insert_", "_one(\n object: $object\n ) {\n ", "\n }\n }"])), tablename, tablename, tablename, singlePrimaryKeyCol);
return insertQuery;
}
function deleteRecordByPrimaryKey(tablename, col) {
var singlePrimaryKeyCol = getSinglePrimaryKeyCol(col);
var singlePrimaryKeyColType = singlePrimaryKeyCol.type;
var singlePrimaryKeyColName = changeCase.snakeCase(singlePrimaryKeyCol.name);
var inputParams = "$".concat(singlePrimaryKeyColName, ": ").concat(singlePrimaryKeyColType);
var conditions = "".concat(singlePrimaryKeyColName, ": $").concat(singlePrimaryKeyColName);
var deleteQuery = client.gql(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n mutation delete_an_object(", ") {\n delete_", "_by_pk (\n ", "\n ) {\n ", "\n }\n }\n "], ["\n mutation delete_an_object(", ") {\n delete_", "_by_pk (\n ", "\n ) {\n ", "\n }\n }\n "])), inputParams, tablename, conditions, singlePrimaryKeyColName);
return deleteQuery;
}
var templateObject_1$b, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5;
function CustomStaticDropDown(props) {
var value = props.value, options = props.options, placeholder = props.placeholder, OnChange = props.OnChange;
return (React__default["default"].createElement(react.HStack, { alignItems: "center" },
React__default["default"].createElement(layout.Text, { w: "15%", className: "interFonts", fontWeight: "500", fontSize: "13px", color: "#626D85", textAlign: "right" }, placeholder),
React__default["default"].createElement(react.Select, { textAlign: "center", color: "#626D85", w: "85%", placeholder: placeholder, onChange: function (e) {
OnChange(e.target.value);
}, value: value }, options.map(function (option) {
return (React__default["default"].createElement("option", { key: option.value, value: option.value }, option.label));
}))));
}
var whiteDropArrow$1 = "https://firebasestorage.googleapis.com/v0/b/mvprun-auth.appspot.com/o/whiteDropArrow.svg?alt=media&token=80af242c-dab7-40a7-bce6-394267298c43";
var blackDrop = "https://firebasestorage.googleapis.com/v0/b/mvprun-auth.appspot.com/o/blackDropArrow.svg?alt=media&token=25497b5f-fb20-44f6-9e7b-ef1d0c810ca1";
var userLight = "https://firebasestorage.googleapis.com/v0/b/mvprun-auth.appspot.com/o/user_light.svg?alt=media&token=bef90389-9594-4aa9-8d73-99022ec91d92";
var uploadIcon = "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/uploadIcon.svg?alt=media&token=5c5650be-aa0e-49de-9bc7-dcf1d706d1e3";
var messagesIcon = "https://firebasestorage.googleapis.com/v0/b/mvprun-auth.appspot.com/o/Group%2018333.png?alt=media&token=528cab76-8ac8-4e68-acc6-13f0bf85dd01";
var userIcon = "https://firebasestorage.googleapis.com/v0/b/mvprun-auth.appspot.com/o/Group%2018416.png?alt=media&token=35bab344-a5f4-4a7d-8f21-826c2e4504cd";
var chevronRight = "https://firebasestorage.googleapis.com/v0/b/mvprun-auth.appspot.com/o/Icons.png?alt=media&token=83d59b84-5956-4a48-8ac4-7dfa06d384fa";
var editIcon = "https://firebasestorage.googleapis.com/v0/b/mvprun-auth.appspot.com/o/edit-icon.png?alt=media&token=17b6a581-610b-4429-b09f-b22821be7820";
var deleteIcon = "https://firebasestorage.googleapis.com/v0/b/mvprun-auth.appspot.com/o/delete-icon.png?alt=media&token=8f19d72d-4e38-4384-8783-371b1bc849bf";
function PhotoUpload$1(props) {
var onUpload = props.onUpload, label = props.label, height = props.height, color = props.color;
var toast = react.useToast();
var _a = React.useState(false), uploading = _a[0], setUploading = _a[1];
var uploadUrl = 'https://image-uploading-servers.herokuapp.com/upload';
var getFile = function (e) {
uploadFile(e.target.files[0]);
};
var uploadFile = function (fileData) {
if (!fileData)
return;
var data = new FormData();
data.append("file", fileData);
setUploading(true);
axios__default["default"]({
method: "POST",
url: uploadUrl,
data: data,
}).then(function (res) {
onUpload(res.data.url);
resetFilerChooser();
setUploading(false);
toast({
title: 'Uploaded.',
description: "File uploaded",
status: 'success',
duration: 5000,
isClosable: true,
});
}).catch(function (e) {
resetFilerChooser();
console.log("error ", e);
setUploading(false);
toast({
title: 'Failed.',
description: "Uploaded Failed Try Again",
status: 'error',
duration: 5000,
isClosable: true,
});
});
};
var openFilerChooser = function (e) {
// @ts-ignore
document.getElementById("photofile").click();
};
var resetFilerChooser = function () {
// @ts-ignore
document.getElementById("photofile").value = "";
};
return (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(layout.Stack, { borderColor: "", w: "100%", spacing: "7px" },
React__default["default"].createElement(react.Text, { color: color, fontFamily: "MaisonBook", fontSize: "13px", fontStyle: "normal", fontWeight: "700", lineHeight: "16px", letterSpacing: "0.20000001192092896px", textAlign: "left" }, label),
React__default["default"].createElement(layout.Stack, { onClick: openFilerChooser, cursor: "pointer", alignItems: "center", justifyContent: "center", bg: "transparent", h: height, borderRadius: "8px", border: "1px solid #DFE0EB" }, uploading ?
React__default["default"].createElement(react.Spinner, { color: "#9FA2B4", size: 'md' })
:
React__default["default"].createElement(react.HStack, { spacing: "12px" },
React__default["default"].createElement(react.Image, { src: uploadIcon }),
React__default["default"].createElement(react.Text, { fontFamily: "MaisonBold", color: "#B0B1B5", fontSize: "14px", fontStyle: "normal", fontWeight: "700", lineHeight: "14px", letterSpacing: "0.50000001192092896px" }, "Upload Image")))),
React__default["default"].createElement("input", { type: "file", id: "photofile", onChange: getFile, style: { display: "none" } })));
}
function MultipleSelect(props) {
var _a;
props.displayColumns; var tableName = props.tableName, cols = props.cols; props.placeholder; var OnChange = props.OnChange, defaultValues = props.defaultValues; props.returnColumn;
// create a function to generate graphql query
var generateQuery = function (tableName, cols) {
var query = "query {\n ".concat(tableName, " {\n ").concat(cols.join("\n"), "\n }\n }");
return query;
};
var getQuery = generateQuery(tableName, cols);
var theQuery = client.gql(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), getQuery);
var _b = client.useQuery(theQuery), data = _b.data, loading = _b.loading, error = _b.error;
if (loading) {
return React__default["default"].createElement("div", null, "Loading...");
}
if (error) {
console.log("error ", error);
return React__default["default"].createElement("div", null, "Error... ");
}
if (!data) {
return React__default["default"].createElement(layout.Text, null, "No data");
}
var categories = (_a = data[tableName]) === null || _a === void 0 ? void 0 : _a.map(function (item) {
return item.category;
});
categories = Array.from(new Set(categories));
return (React__default["default"].createElement(react.Grid, { px: "10%", border: "1px", p: "2", borderColor: "gray.200", templateColumns: "repeat(".concat(categories.length === 0 ? 1 : categories.length, ", 1fr)"), gap: 4 }, categories === null || categories === void 0 ? void 0 : categories.map(function (category, catIndex) {
var _a;
var categoryItems = (_a = data[tableName]) === null || _a === void 0 ? void 0 : _a.filter(function (item) { return item.category === category; });
return (React__default["default"].createElement(react.GridItem, { key: catIndex },
React__default["default"].createElement(layout.Text, { w: "100%", className: "interFonts", fontWeight: "700", fontSize: "13px", color: "#626D85", textAlign: "left" }, category),
React__default["default"].createElement(react.Stack, { gap: 2, mt: 2 }, categoryItems === null || categoryItems === void 0 ? void 0 : categoryItems.map(function (item, itemIndex) { return (React__default["default"].createElement(react.SimpleGrid, { key: itemIndex, alignItems: "left", columns: 2 },
item.color ?
React__default["default"].createElement(react.Tag, { w: "fit-content", size: "lg", variant: 'solid', colorScheme: item.color },
React__default["default"].createElement(react.TagLabel, null, item.name))
:
React__default["default"].createElement(layout.Text, { w: "15%", className: "interFonts", fontWeight: "500", fontSize: "13px", color: "#626D85", textAlign: "right" }, item.name),
React__default["default"].createElement(react.Checkbox, { size: 'lg', isChecked: defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.includes(item.id), onChange: function (e) {
var onChangeValues = defaultValues ? JSON.parse(defaultValues) : [];
if (!e.target.checked) {
onChangeValues = onChangeValues === null || onChangeValues === void 0 ? void 0 : onChangeValues.filter(function (val) { return val !== item.id; });
}
else {
onChangeValues.push(item.id);
}
onChangeValues = JSON.stringify(onChangeValues);
OnChange(onChangeValues);
} }))); }))));
})));
}
var templateObject_1$a;
function AddEditForm(props) {
var isSaving = props.isSaving, formdata = props.formdata, setFormData = props.setFormData, col = props.col, panels = props.panels, onSave = props.onSave;
function getFieldData(field) {
return formdata[field];
}
function handleChange(value, field) {
var formDataTemp = __assign({}, formdata);
formDataTemp[field] = value;
setFormData(formDataTemp);
}
function handleChangeSelect(value, field) {
var formDataTemp = __assign({}, formdata);
formDataTemp[field] = value;
setFormData(formDataTemp);
}
function findColFieldByColName(colName) {
var cl = col.find(function (c) { return changeCase.snakeCase(c.name) == colName; });
return cl;
}
function checkForStaticDropDown(tablecolField) {
if (typeof (tablecolField === null || tablecolField === void 0 ? void 0 : tablecolField.staticDropDown) !== 'undefined' && (tablecolField === null || tablecolField === void 0 ? void 0 : tablecolField.staticDropDown)) {
return true;
}
return false;
}
function isImage(tablecolField) {
if ((tablecolField === null || tablecolField === void 0 ? void 0 : tablecolField.type) == 'image' || (tablecolField === null || tablecolField === void 0 ? void 0 : tablecolField.type) == 'image!') {
return true;
}
return false;
}
return (React__default["default"].createElement(react.Stack, { mt: "-10px" }, panels === null || panels === void 0 ? void 0 :
panels.map(function (panel, panelIndex) {
return (React__default["default"].createElement(react.Stack, { key: panelIndex },
React__default["default"].createElement("br", null),
React__default["default"].createElement(layout.Text, { fontFamily: "Inter", fontWeight: "700", fontStyle: "normal", fontSize: "17px", lineHeight: "20.57px", color: "#4138C2" }, panel.title),
React__default["default"].createElement(react.Grid, { px: "10%", border: "1px", p: "2", borderColor: "gray.200", templateColumns: "repeat(".concat((panel === null || panel === void 0 ? void 0 : panel.panels.length) >= 6 ? 3 : panel === null || panel === void 0 ? void 0 : panel.panels.length, ", 1fr)"), gap: 6 }, panel === null || panel === void 0 ? void 0 : panel.panels.map(function (colFieldName, colFieldIndex) {
var tablecolField = findColFieldByColName(colFieldName);
return (React__default["default"].createElement(react.GridItem, { key: colFieldIndex, w: "100%", colSpan: tablecolField.hasManyRelationship ? panel === null || panel === void 0 ? void 0 : panel.panels.length : 1 },
(!isImage(tablecolField)) &&
React__default["default"].createElement(react.HStack, { fontFamily: "Inter", fontWeight: "700", fontStyle: "normal", fontSize: "13px", lineHeight: "18px", color: "black", mb: "5px" },
React__default["default"].createElement(layout.Text, null, underScoreToCapitalize(underScoreToCapitalize(colFieldName))),
React__default["default"].createElement(layout.Text, { hidden: !tablecolField.isRequired, color: "red" }, "*")),
tablecolField.isForeignKey &&
React__default["default"].createElement(DropdownSelect, { tableName: tablecolField.tableName, cols: tablecolField.cols, placeholder: tablecolField.placeholder, returnColumn: tablecolField.returnColumn, displayColumns: tablecolField.displayColumns, defaultValue: formdata[tablecolField.name], OnChange: function (val) {
handleChangeSelect(val, tablecolField.name);
} }),
!tablecolField.isForeignKey && (isImage(tablecolField)) &&
React__default["default"].createElement(react.HStack, null,
React__default["default"].createElement(PhotoUpload$1, { height: "40px", color: "black", label: underScoreToCapitalize(tablecolField.name), onUpload: function (file) {
var formDataTemp = __assign({}, formdata);
formDataTemp[tablecolField.name] = file;
setFormData(formDataTemp);
} })),
checkForStaticDropDown(tablecolField) &&
React__default["default"].createElement(CustomStaticDropDown, { value: getFieldData(tablecolField.name), options: tablecolField.staticDropDown, placeholder: underScoreToCapitalize(tablecolField.name), OnChange: function (val) {
handleChangeSelect(val, tablecolField.name);
} }),
(tablecolField.type === "Boolean" || tablecolField.type === "Boolean!") &&
React__default["default"].createElement(react.Checkbox, { size: 'lg', isChecked: getFieldData(tablecolField.name), onChange: function (e) {
handleChange(e.target.checked, tablecolField.name);
} }),
(tablecolField.type === "String" || tablecolField.type === "String!")
&& !tablecolField.hasManyRelationship &&
React__default["default"].createElement(react.Input, { display: (isImage(tablecolField) || tablecolField.isForeignKey) ? 'none' : 'block', type: convertColTypeToInputType(tablecolField.type), readOnly: tablecolField.isPrimary, onChange: function (e) {
handleChange(e.target.value, tablecolField.name);
}, value: getFieldData(tablecolField.name), h: "38px", border: "1px solid ", borderColor: "#ACABAB", borderRadius: "4px", placeholder: underScoreToCapitalize(tablecolField.name) }),
tablecolField.hasManyRelationship &&
React__default["default"].createElement(MultipleSelect, { tableName: tablecolField.tableName, cols: tablecolField.cols, placeholder: tablecolField.placeholder, returnColumn: tablecolField.returnColumn, displayColumns: tablecolField.displayColumns, defaultValues: getFieldData(tablecolField.name), OnChange: function (val) {
handleChange(val, tablecolField.name);
} })));
}))));
}),
React__default["default"].createElement(react.HStack, { justify: "flex-end", spacing: "6px" },
React__default["default"].createElement(react.Button, { onClick: function () {
props.close();
}, disabled: isSaving, fontWeight: "700", fontSize: "12px", border: "1px", className: "interFonts", w: "100px", h: "30px", alignSelf: "flex-end", borderRadius: "2.89px", bg: props.secondaryColor, color: props.primaryColor, _hover: {
bg: props.primaryColor,
color: props.secondaryColor
} }, "Cancel"),
React__default["default"].createElement(react.Button, { isLoading: isSaving, onClick: onSave, fontWeight: "700", fontSize: "12px", border: "1px", className: "interFonts", w: "110px", h: "32px", variant: "solid", alignSelf: "flex-end", borderRadius: "2.89px", bg: props.secondaryColor, color: props.primaryColor, _hover: {
bg: props.primaryColor,
color: props.secondaryColor
} }, "Save"))));
}
function getSinglePrimaryKey(col) {
var singlePrimaryKeyCol = null;
for (var i = 0; i < col.length; i++) {
if (col[i].isPrimary) {
singlePrimaryKeyCol = changeCase.snakeCase(col[i].name);
break;
}
}
return singlePrimaryKeyCol !== null && singlePrimaryKeyCol !== void 0 ? singlePrimaryKeyCol : 'id';
}
//Table
var RecordDisplayType;
(function (RecordDisplayType) {
RecordDisplayType[RecordDisplayType["Table"] = 0] = "Table";
RecordDisplayType[RecordDisplayType["Grid"] = 1] = "Grid";
})(RecordDisplayType || (RecordDisplayType = {}));
var AddEditDisplayType;
(function (AddEditDisplayType) {
AddEditDisplayType[AddEditDisplayType["Modal"] = 0] = "Modal";
AddEditDisplayType[AddEditDisplayType["Drawer"] = 1] = "Drawer";
AddEditDisplayType[AddEditDisplayType["Simple"] = 2] = "Simple";
})(AddEditDisplayType || (AddEditDisplayType = {}));
function CustomEditModal(props) {
var toast = react.useToast();
var title = props.title, open = props.open, tablename = props.tablename, col = props.col, isUpdate = props.isUpdate; props.isModal; var panels = props.panels, _a = props.addEditDisplayType, addEditDisplayType = _a === void 0 ? 1 : _a; props.recordsDisplayType;
var _c = React.useState(props.formdata), formdata = _c[0], setFormData = _c[1];
var _d = React.useState(false), isSaving = _d[0], setIsSaving = _d[1];
var updatebyPk = updateTableByPrimaryKey(tablename, col);
var updateByPrimaryKey = client.useMutation(updatebyPk)[0];
var addRecord = client.useMutation(addTableRecord(tablename, col))[0];
var isFieldRequired = function (field) {
var item = col === null || col === void 0 ? void 0 : col.find(function (item) { return item.name === field; });
return item === null || item === void 0 ? void 0 : item.isRequired;
};
function save() {
var _a;
if (isSaving) {
return;
}
var requiredFields = [];
(_a = Object.entries(formdata)) === null || _a === void 0 ? void 0 : _a.forEach(function (_a) {
var property = _a[0], value = _a[1];
if (isFieldRequired(property) && !value) {
requiredFields.push(underScoreToCapitalize(underScoreToCapitalize(property)));
}
});
var requiredFieldsLength = requiredFields.length;
if (requiredFieldsLength > 0) {
toast({
title: "Validation Error",
description: "".concat(requiredFields.join(", "), " ").concat(requiredFieldsLength === 1 ? 'field is' : 'fields are', " required"),
status: "error",
duration: 9000,
isClosable: true
});
return;
}
setIsSaving(true);
if (isUpdate) {
console.log("isUpdate ", formdata);
updateByPrimaryKey({
variables: formdata
}).then(function (res) {
setIsSaving(false);
props.refetch();
}).catch(function (e) {
toast({
title: "Error",
description: e.message,
status: "error",
duration: 9000,
isClosable: true
});
setIsSaving(false);
console.log("error ", e);
console.log("query ", updatebyPk);
});
}
else {
//remove primary key
var singlePrimaryKeyCol = getSinglePrimaryKey(col);
delete formdata[singlePrimaryKeyCol];
//ADD RECORD
addRecord({
variables: {
object: formdata
}
}).then(function (r) {
setIsSaving(false);
props.refetch();
}).catch(function (e) {
setIsSaving(false);
console.log("error ", e);
toast({
title: "Error",
description: e.message,
status: "error",
duration: 9000,
isClosable: true
});
});
}
}
return (React__default["default"].createElement(react.Stack, { bg: props.secondaryColor, padding: 4 },
addEditDisplayType == AddEditDisplayType.Modal &&
React__default["default"].createElement(react.Modal, { isOpen: open, onClose: props.close },
React__default["default"].createElement(react.ModalOverlay, null),
React__default["default"].createElement(react.ModalContent, { maxW: "80vw" },
React__default["default"].createElement(react.ModalCloseButton, null),
React__default["default"].createElement(react.ModalBody, null,
React__default["default"].createElement(AddEditForm, { primaryColor: props.primaryColor, secondaryColor: props.secondaryColor, col: col, close: props.close, formdata: formdata, setFormData: setFormData, onSave: save, isSaving: isSaving, panels: panels, refetch: function () {
props.refetch();
} })))),
addEditDisplayType == AddEditDisplayType.Drawer &&
React__default["default"].createElement(react.Drawer, { size: "xl", isOpen: true, placement: 'right', onClose: function () {
console.log("close");
} },
React__default["default"].createElement(react.DrawerOverlay, null),
React__default["default"].createElement(react.DrawerContent, null,
React__default["default"].createElement(react.DrawerCloseButton, { onClick: function () {
props.close();
} }),
React__default["default"].createElement(react.DrawerHeader, null, title),
React__default["default"].createElement(react.DrawerBody, null,
React__default["default"].createElement(AddEditForm, { primaryColor: props.primaryColor, secondaryColor: props.secondaryColor, col: col, close: props.close, formdata: formdata, setFormData: setFormData, onSave: save, isSaving: isSaving, panels: panels, refetch: function () {
props.refetch();
} })))),
addEditDisplayType == AddEditDisplayType.Simple &&
React__default["default"].createElement(AddEditForm, { primaryColor: props.primaryColor, secondaryColor: props.secondaryColor, col: col, close: props.close, formdata: formdata, setFormData: setFormData, onSave: save, isSaving: isSaving, panels: panels, refetch: function () {
props.refetch();
} })));
}
function CustomTable(props) {
var toast = react.useToast();
var isModal = props.isModal, title = props.title, tablename = props.tablename, col = props.col;
var searchQuery = getSearchQuery(tablename, col);
var _a = client.useQuery(searchQuery), loading = _a.loading, error = _a.error, data = _a.data, refetch = _a.refetch;
var _b = React.useState(null), formdata = _b[0], setFormData = _b[1];
//delete row
var _c = client.useMutation(deleteRecordByPrimaryKey(tablename, col)), deleteRow = _c[0], deleteLoading = _c[1].loading;
//modal
var _d = React.useState(false), isAddEdit = _d[0], setIsAddEdit = _d[1];
var _e = React.useState(false), isUpdate = _e[0], setIsUpdate = _e[1];
var addRecord = function () {
var item = {};
for (var i = 0; i < col.length; i++) {
item[col[i].name] = "";
}
setFormData(item);
setIsUpdate(false);
setIsAddEdit(true);
};
var editRecord = function (item) {
setFormData(item);
setIsUpdate(true);
setIsAddEdit(true);
};
var deleteRecord = function (item) {
var _a;
if (deleteLoading) {
return;
}
var primaryKey = getSinglePrimaryKey$1(col);
var deleteObj = (_a = {},
_a[primaryKey] = item[primaryKey],
_a);
var confirm = window.confirm("Are you sure?");
if (confirm) {
deleteRow({
variables: deleteObj,
})
.then(function (r) {
refetch();
})
.catch(function (e) {
console.log("error ", e);
toast({
title: "Error",
description: e.message,
status: "error",
duration: 9000,
isClosable: true,
});
});
}
};
if (loading) {
return React__default["default"].createElement("div", null, "Loading...");
}
if (error) {
console.log("error ", error);
return React__default["default"].createElement("div", null, "Error...");
}
if (data)
return (React__default["default"].createElement(React__default["default"].Fragment, null, isAddEdit == false ? (React__default["default"].createElement(layout.Stack, null,
React__default["default"].createElement(layout.Stack, { isInline: true, justify: "space-between" },
React__default["default"].createElement(react.Text, { fontWeight: "700", className: "interFonts", fontSize: "17px" }, title),
React__default["default"].createElement(layout.Stack, { isInline: true },
React__default["default"].createElement(react.Button, { onClick: function () {
addRecord();
}, fontWeight: "700", fontSize: "12px", color: "white", border: "1px", className: "interFonts", w: "76px", h: "28px", bg: "#009CC4", alignSelf: "flex-end", borderRadius: "2.89px", _hover: {
color: "#009CC4",
bg: "white",
border: "1px solid #009CC4",
} }, "Create"))),
React__default["default"].createElement(react.Table, { size: "sm", variant: "none", bgColor: "#F3F4F8" },
React__default["default"].createElement(react.Thead, { h: "35px", borderBottom: "1px solid", borderColor: "#D9E2EC" },
React__default["default"].createElement(react.Tr, { fontWeight: "500", fontSize: "11px", className: "interFonts" }, getColumnsWithoutForeignkey(col).map(function (item) {
return (React__default["default"].createElement(react.Th, { borderRight: "2px solid #D9E2EC", color: "#626D85", key: item.name }, underScoreToCapitalize(item.name)));
}))),
React__default["default"].createElement(react.Tbody, null, data["".concat(tablename)].map(function (item) { return (React__default["default"].createElement(react.Tr, { h: "50px", borderBottom: "1px solid", borderColor: "#D9E2EC", fontWeight: "500", fontSize: "11px", className: "interFonts", cursor: "pointer" },
getColumnsWithoutForeignkey(col).map(function (mycol) {
return (React__default["default"].createElement(react.Td, { color: "black", onClick: function () { return editRecord(item); } }, item[mycol.name]));
}),
React__default["default"].createElement(react.Th, null,
React__default["default"].createElement(react.IconButton, { disabled: deleteLoading, onClick: function () {
deleteRecord(item);
}, variant: "outline", colorScheme: "red.200", ml: 2, size: "xs", icon: React__default["default"].createElement(icons.DeleteIcon, null), "aria-label": "Delete" })))); }))))) : (React__default["default"].createElement(CustomEditModal, { title: title, open: isAddEdit, tablename: tablename, col: col, isUpdate: isUpdate, formdata: formdata, isModal: isModal, close: function () { return setIsAddEdit(false); }, refetch: function () {
setIsAddEdit(false);
refetch();
} }))));
return React__default["default"].createElement("div", null, "No Data");
}
function CustomStaticDropDownBlue(props) {
var options = props.options, placeholder = props.placeholder, OnChange = props.OnChange;
return (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(react.Menu, { gutter: 0 },
React__default["default"].createElement(react.MenuButton, { borderTopRightRadius: "2.89px", borderTopLeftRadius: "2.89px", bg: "#3F8DF1", w: "130px", h: "28px", color: "white", className: "interFonts", fontWeight: "700", fontSize: "12px" },
React__default["default"].createElement(react.HStack, { justifyContent: "space-around", w: "100%", pl: "22px" },
React__default["default"].createElement(layout.Text, { textAlign: "center" }, placeholder),
React__default["default"].createElement(react.Image, { alignSelf: "right", src: whiteDropArrow$1 }))),
React__default["default"].createElement(react.MenuList, { py: 0, borderBottom: "none", borderRadius: "none", borderTop: "0.96px solid", borderRight: "0.96px solid", borderLeft: "0.96px solid", borderColor: "#626D85", maxWidth: '130px', minWidth: '130px' }, options.map(function (option, index) {
return (React__default["default"].createElement(react.MenuItem, { lineHeight: "14.52px", letterSpacing: "0.04px", paddingLeft: "7px", borderBottom: "0.96px solid #626D85", color: "#626D85", className: "interFonts", fontWeight: "700", fontSize: "12px", onClick: function () {
OnChange(option.value);
} }, option.label));
})))));
}
function CustomStaticDropDownWhite(props) {
var options = props.options, placeholder = props.placeholder, OnChange = props.OnChange;
return (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(react.Menu, { gutter: 0 },
React__default["default"].createElement(react.MenuButton, { border: "1px solid black", borderTopRightRadius: "2.89px", borderTopLeftRadius: "2.89px", bg: "white", w: "107px", h: "28px", color: "black", className: "interFonts", fontWeight: "700", fontSize: "12px" },
React__default["default"].createElement(react.HStack, { justifyContent: "space-around", w: "100%", pl: "21px" },
React__default["default"].createElement(layout.Text, { textAlign: "center" }, placeholder),
React__default["default"].createElement(react.Image, { alignSelf: "right", src: blackDrop }))),
React__default["default"].createElement(react.MenuList, { py: 0, borderBottom: "none", borderTop: "none", borderRadius: "none", borderRight: "0.96px solid", borderLeft: "0.96px solid", borderColor: "#626D85", maxWidth: "107px", minWidth: "107px" }, options.map(function (option, index) {
return (React