@theaimegroup/aime-component-library
Version:
AIME Component Library
850 lines (818 loc) • 249 kB
JavaScript
import React, { useState, useRef, useEffect } from 'react';
import { gql, useQuery, useMutation, useSubscription, useLazyQuery } from '@apollo/client';
import { Text, Stack, HStack as HStack$1, Flex as Flex$1 } from '@chakra-ui/layout';
import { VStack, Select, HStack, useToast, Text as Text$1, Spinner, Image, Grid, GridItem, Stack as Stack$1, SimpleGrid, Tag, TagLabel, Checkbox, Input, Button, Modal, ModalOverlay, ModalContent, ModalCloseButton, ModalBody, Drawer, DrawerOverlay, DrawerContent, DrawerCloseButton, DrawerHeader, DrawerBody, Table, Thead, Tr, Th, Tbody, Td, IconButton, Menu, MenuButton, MenuList, MenuItem, ModalHeader, Flex, ModalFooter, AlertDialog, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, Badge, Box, InputGroup, InputRightElement, Circle, InputLeftElement, Divider, Textarea, Tabs, TabList, Tab, TabPanels, TabPanel, Heading, Spacer, WrapItem, Avatar, FormControl, Alert, AlertTitle, AlertDescription, Link } from '@chakra-ui/react';
import { snakeCase, capitalCase } from 'change-case';
import axios from 'axios';
import { DeleteIcon, AddIcon, SearchIcon, Search2Icon } from '@chakra-ui/icons';
import { useNavigate } from 'react-router-dom';
import Moment from 'react-moment';
import { Chart } from 'react-google-charts';
import Rating from 'react-rating';
import BlogDetail from '@ericnjeru/aime-blog';
import { Editor } from 'react-draft-wysiwyg';
import Draft, { EditorState, convertToRaw } from 'draft-js';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import draftToHtml from 'draftjs-to-html';
import { stateFromHTML } from 'draft-js-import-html';
import { PieChart, Pie, Cell, Tooltip, BarChart, CartesianGrid, XAxis, YAxis, Legend, Bar, LineChart, Line } from 'recharts';
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 = gql(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), getQuery);
var _b = useQuery(theQuery), data = _b.data, loading = _b.loading, error = _b.error;
if (loading) {
return React.createElement("div", null, "Loading...");
}
if (error) {
console.log("error ", error);
return React.createElement("div", null, "Error... ");
}
if (!data) {
return React.createElement(Text, null, "No data");
}
return (React.createElement(VStack, { alignItems: "center" },
React.createElement(Text, { className: "interFonts", fontWeight: "500", fontSize: "13px", color: "#626D85", textAlign: "right" }, placeholder),
React.createElement(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.createElement("option", null,
"Select ",
placeholder), (_a = data[tableName]) === null || _a === void 0 ? void 0 :
_a.map(function (item) { return (React.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 = 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 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 = 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 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 = 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(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(snakeCase(col[i].name), ": $").concat(snakeCase(col[i].name));
if (i !== col.length - 1) {
updateBody += ',';
}
}
updateBody += "}";
var updateQuery = 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 = 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 = snakeCase(singlePrimaryKeyCol.name);
var inputParams = "$".concat(singlePrimaryKeyColName, ": ").concat(singlePrimaryKeyColType);
var conditions = "".concat(singlePrimaryKeyColName, ": $").concat(singlePrimaryKeyColName);
var deleteQuery = 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.createElement(HStack, { alignItems: "center" },
React.createElement(Text, { w: "15%", className: "interFonts", fontWeight: "500", fontSize: "13px", color: "#626D85", textAlign: "right" }, placeholder),
React.createElement(Select, { textAlign: "center", color: "#626D85", w: "85%", placeholder: placeholder, onChange: function (e) {
OnChange(e.target.value);
}, value: value }, options.map(function (option) {
return (React.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 = useToast();
var _a = 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({
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.createElement(React.Fragment, null,
React.createElement(Stack, { borderColor: "", w: "100%", spacing: "7px" },
React.createElement(Text$1, { color: color, fontFamily: "MaisonBook", fontSize: "13px", fontStyle: "normal", fontWeight: "700", lineHeight: "16px", letterSpacing: "0.20000001192092896px", textAlign: "left" }, label),
React.createElement(Stack, { onClick: openFilerChooser, cursor: "pointer", alignItems: "center", justifyContent: "center", bg: "transparent", h: height, borderRadius: "8px", border: "1px solid #DFE0EB" }, uploading ?
React.createElement(Spinner, { color: "#9FA2B4", size: 'md' })
:
React.createElement(HStack, { spacing: "12px" },
React.createElement(Image, { src: uploadIcon }),
React.createElement(Text$1, { fontFamily: "MaisonBold", color: "#B0B1B5", fontSize: "14px", fontStyle: "normal", fontWeight: "700", lineHeight: "14px", letterSpacing: "0.50000001192092896px" }, "Upload Image")))),
React.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 = gql(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), getQuery);
var _b = useQuery(theQuery), data = _b.data, loading = _b.loading, error = _b.error;
if (loading) {
return React.createElement("div", null, "Loading...");
}
if (error) {
console.log("error ", error);
return React.createElement("div", null, "Error... ");
}
if (!data) {
return React.createElement(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.createElement(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.createElement(GridItem, { key: catIndex },
React.createElement(Text, { w: "100%", className: "interFonts", fontWeight: "700", fontSize: "13px", color: "#626D85", textAlign: "left" }, category),
React.createElement(Stack$1, { gap: 2, mt: 2 }, categoryItems === null || categoryItems === void 0 ? void 0 : categoryItems.map(function (item, itemIndex) { return (React.createElement(SimpleGrid, { key: itemIndex, alignItems: "left", columns: 2 },
item.color ?
React.createElement(Tag, { w: "fit-content", size: "lg", variant: 'solid', colorScheme: item.color },
React.createElement(TagLabel, null, item.name))
:
React.createElement(Text, { w: "15%", className: "interFonts", fontWeight: "500", fontSize: "13px", color: "#626D85", textAlign: "right" }, item.name),
React.createElement(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 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.createElement(Stack$1, { mt: "-10px" }, panels === null || panels === void 0 ? void 0 :
panels.map(function (panel, panelIndex) {
return (React.createElement(Stack$1, { key: panelIndex },
React.createElement("br", null),
React.createElement(Text, { fontFamily: "Inter", fontWeight: "700", fontStyle: "normal", fontSize: "17px", lineHeight: "20.57px", color: "#4138C2" }, panel.title),
React.createElement(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.createElement(GridItem, { key: colFieldIndex, w: "100%", colSpan: tablecolField.hasManyRelationship ? panel === null || panel === void 0 ? void 0 : panel.panels.length : 1 },
(!isImage(tablecolField)) &&
React.createElement(HStack, { fontFamily: "Inter", fontWeight: "700", fontStyle: "normal", fontSize: "13px", lineHeight: "18px", color: "black", mb: "5px" },
React.createElement(Text, null, underScoreToCapitalize(underScoreToCapitalize(colFieldName))),
React.createElement(Text, { hidden: !tablecolField.isRequired, color: "red" }, "*")),
tablecolField.isForeignKey &&
React.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.createElement(HStack, null,
React.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.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.createElement(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.createElement(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.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.createElement(HStack, { justify: "flex-end", spacing: "6px" },
React.createElement(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.createElement(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 = 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 = 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 = useState(props.formdata), formdata = _c[0], setFormData = _c[1];
var _d = useState(false), isSaving = _d[0], setIsSaving = _d[1];
var updatebyPk = updateTableByPrimaryKey(tablename, col);
var updateByPrimaryKey = useMutation(updatebyPk)[0];
var addRecord = 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.createElement(Stack$1, { bg: props.secondaryColor, padding: 4 },
addEditDisplayType == AddEditDisplayType.Modal &&
React.createElement(Modal, { isOpen: open, onClose: props.close },
React.createElement(ModalOverlay, null),
React.createElement(ModalContent, { maxW: "80vw" },
React.createElement(ModalCloseButton, null),
React.createElement(ModalBody, null,
React.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.createElement(Drawer, { size: "xl", isOpen: true, placement: 'right', onClose: function () {
console.log("close");
} },
React.createElement(DrawerOverlay, null),
React.createElement(DrawerContent, null,
React.createElement(DrawerCloseButton, { onClick: function () {
props.close();
} }),
React.createElement(DrawerHeader, null, title),
React.createElement(DrawerBody, null,
React.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.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 = useToast();
var isModal = props.isModal, title = props.title, tablename = props.tablename, col = props.col;
var searchQuery = getSearchQuery(tablename, col);
var _a = useQuery(searchQuery), loading = _a.loading, error = _a.error, data = _a.data, refetch = _a.refetch;
var _b = useState(null), formdata = _b[0], setFormData = _b[1];
//delete row
var _c = useMutation(deleteRecordByPrimaryKey(tablename, col)), deleteRow = _c[0], deleteLoading = _c[1].loading;
//modal
var _d = useState(false), isAddEdit = _d[0], setIsAddEdit = _d[1];
var _e = 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.createElement("div", null, "Loading...");
}
if (error) {
console.log("error ", error);
return React.createElement("div", null, "Error...");
}
if (data)
return (React.createElement(React.Fragment, null, isAddEdit == false ? (React.createElement(Stack, null,
React.createElement(Stack, { isInline: true, justify: "space-between" },
React.createElement(Text$1, { fontWeight: "700", className: "interFonts", fontSize: "17px" }, title),
React.createElement(Stack, { isInline: true },
React.createElement(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.createElement(Table, { size: "sm", variant: "none", bgColor: "#F3F4F8" },
React.createElement(Thead, { h: "35px", borderBottom: "1px solid", borderColor: "#D9E2EC" },
React.createElement(Tr, { fontWeight: "500", fontSize: "11px", className: "interFonts" }, getColumnsWithoutForeignkey(col).map(function (item) {
return (React.createElement(Th, { borderRight: "2px solid #D9E2EC", color: "#626D85", key: item.name }, underScoreToCapitalize(item.name)));
}))),
React.createElement(Tbody, null, data["".concat(tablename)].map(function (item) { return (React.createElement(Tr, { h: "50px", borderBottom: "1px solid", borderColor: "#D9E2EC", fontWeight: "500", fontSize: "11px", className: "interFonts", cursor: "pointer" },
getColumnsWithoutForeignkey(col).map(function (mycol) {
return (React.createElement(Td, { color: "black", onClick: function () { return editRecord(item); } }, item[mycol.name]));
}),
React.createElement(Th, null,
React.createElement(IconButton, { disabled: deleteLoading, onClick: function () {
deleteRecord(item);
}, variant: "outline", colorScheme: "red.200", ml: 2, size: "xs", icon: React.createElement(DeleteIcon, null), "aria-label": "Delete" })))); }))))) : (React.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.createElement("div", null, "No Data");
}
function CustomStaticDropDownBlue(props) {
var options = props.options, placeholder = props.placeholder, OnChange = props.OnChange;
return (React.createElement(React.Fragment, null,
React.createElement(Menu, { gutter: 0 },
React.createElement(MenuButton, { borderTopRightRadius: "2.89px", borderTopLeftRadius: "2.89px", bg: "#3F8DF1", w: "130px", h: "28px", color: "white", className: "interFonts", fontWeight: "700", fontSize: "12px" },
React.createElement(HStack, { justifyContent: "space-around", w: "100%", pl: "22px" },
React.createElement(Text, { textAlign: "center" }, placeholder),
React.createElement(Image, { alignSelf: "right", src: whiteDropArrow$1 }))),
React.createElement(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.createElement(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.createElement(React.Fragment, null,
React.createElement(Menu, { gutter: 0 },
React.createElement(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.createElement(HStack, { justifyContent: "space-around", w: "100%", pl: "21px" },
React.createElement(Text, { textAlign: "center" }, placeholder),
React.createElement(Image, { alignSelf: "right", src: blackDrop }))),
React.createElement(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.createElement(MenuItem, { lineHeight: "14.52px", letterSpacing: "0.04px", paddingLeft: "7px", borderBottom: "1px solid #626D85", color: "#626D85", className: "interFonts", fontWeight: "700", fontSize: "12px", onClick: function () {
OnChange(option.value);
} }, option.label));
})))));
}
function CustomOffer(props) {
var open = props.open, title = props.title, validity = props.validity, description = props.description, productName = props.productName, offerImage = props.offerImage, logo = props.logo, redeem = props.redeem;
return (React.createElement(React.Fragment, null,
React.createElement(Modal, { size: "xl", isOpen: open, onClose: props.close },
React.createElement(ModalOverlay, null),
React.createElement(ModalContent, null,
React.createElement(ModalHeader, null,
React.createElement(Text$1, { textAlign: "left", className: "interFonts", fontWeight: "700", color: "black", fontSize: "17px", lineHeight: "20.57px" }, title)),
React.createElement(ModalCloseButton, null),
React.createElement(ModalBody, { p: "0" },
React.createElement(Flex, { justify: "center", align: "center", h: "auto", w: "100%" },
React.createElement(Stack$1, { h: "100%", spacing: "0px" },
React.createElement(Flex, { bg: "white", align: "center", justify: "center" },
React.createElement(Image, { h: "55px", w: "228px", left: "606px", top: "175px", "border-radius": "0px", src: logo })),
React.createElement(Image, { height: "426px", width: "100%", left: "407px", top: "231px", "border-radius": "0px", src: offerImage }),
React.createElement(Flex, { bg: "white", align: "center", justify: "center", pt: "24px", mx: "59px" },
React.createElement(Text$1, { fontFamily: "Inter", fontSize: "16px", fontStyle: "normal", fontWeight: "500", lineHeight: "18px", letterSpacing: "0em", textAlign: "center" },
"Here\u2019s a little gift from us for purchasing",
" ",
React.createElement(Text$1, { as: "span", fontFamily: "Inter", fontSize: "16px", fontStyle: "normal", fontWeight: "700", lineHeight: "18px", letterSpacing: "0em", textAlign: "center" },