myprojectpackageprav
Version:
My package in npm
110 lines • 11.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var buttons_1 = tslib_1.__importDefault(require("../../../components/buttons/buttons"));
var pointsofcontact_data_1 = require("./pointsofcontact-data");
var input_text_1 = tslib_1.__importDefault(require("../../../utils/controls/input-text"));
var input_select_1 = tslib_1.__importDefault(require("../../../utils/controls/input-select"));
var PointsofContact = function () {
var _a = (0, react_1.useState)(false), showAddPopup = _a[0], setshowAddPopup = _a[1];
var _b = (0, react_1.useState)(false), showedit = _b[0], setshowedit = _b[1];
var listItems = pointsofcontact_data_1.POCdata.map(function (links) {
return react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("li", { tabIndex: 0, "aria-live": "polite", className: "border-radius my-2 p-relative list-type-none bordered1 whitebg" },
react_1.default.createElement("div", { className: "d-flex flex-row flex-lg-row align-items-center justify-content-lg-between w-100 flex-wrap settingPoc py-2 px-3" },
react_1.default.createElement("div", { className: "my-1 col-12 Name" },
react_1.default.createElement("div", { className: "subtitle-color font12 montserratSemibold pb-1" }, links.titlelabel),
react_1.default.createElement("div", { className: "darktext font12 montserratSemibold" }, links.title)),
react_1.default.createElement("div", { className: "dividerdashed vertical mx-2 d-none d-lg-block" }),
react_1.default.createElement("div", { className: "my-1 col-12 PhoneNumber" },
react_1.default.createElement("div", { className: "subtitle-color font12 montserratSemibold pb-1" }, links.phonelabel),
react_1.default.createElement("div", { className: "darktext font12 montserratSemibold" }, links.phone)),
react_1.default.createElement("div", { className: "dividerdashed vertical mx-2 d-none d-lg-block" }),
react_1.default.createElement("div", { className: "my-1 col-12 Modified" },
react_1.default.createElement("div", { className: "subtitle-color font12 montserratSemibold pb-1" }, links.modifiedlabel),
react_1.default.createElement("div", { className: "darktext font12 montserratSemibold" }, links.modifiedcontent)),
react_1.default.createElement("div", { className: "dividerdashed vertical mx-2 d-none d-lg-block" }),
react_1.default.createElement("div", { className: "my-1 col-12 IsArchived" },
react_1.default.createElement("div", { className: "subtitle-color font12 montserratSemibold pb-1" }, links.archivedlabel),
react_1.default.createElement("div", { className: "darktext font12 montserratSemibold" }, links.archivedcontent)),
react_1.default.createElement("div", { className: "dividerdashed vertical mx-2 d-none d-lg-block" }),
react_1.default.createElement("div", { className: "d-flex align-items-center col-12 Actions flex-wrap me-2" },
react_1.default.createElement(buttons_1.default, { label: "Edit", className: 'btn-sm sourcesansprosemibold font12 btn-bgcolor10 title-color1 border-radius text-uppercase text-nowrap my-1 mx-2', icon: "icon-pencil font-10 pe-1", type: "button", onClick: function () {
setshowedit(true);
setshowAddPopup(false);
} }),
react_1.default.createElement(buttons_1.default, { label: "Delete", className: 'btn-sm sourcesansprosemibold font12 btn-bgcolor10 title-color1 border-radius text-uppercase text-nowrap my-1 mx-2', icon: "icon-trashbin font-10 pe-1", type: "button" }))),
showedit ? (react_1.default.createElement("div", { className: "settingseditpopup w-100 position-relative p-3 mb-3 bordered0 border-top " },
react_1.default.createElement("div", { className: "row" },
react_1.default.createElement("div", { className: "col-sm-12 col-lg-4 mb-2" },
react_1.default.createElement(input_text_1.default, { inputProps: {
id: " PointsofContact ",
name: " Points of Contact ",
placeholder: "Enter Name or email address..",
className: "latomedium font13 darktext mb-2",
}, label: " Points of Contact ", isMandatory: true, infoClassName: "tool-tip tooltip-top", info: " Points of Contact ", infoIcon: "icon-info", isInfo: true, type: "peopel-picker", formClassName: "d-flex flex-column" })),
react_1.default.createElement("div", { className: "col-sm-12 col-lg-4 mb-2" },
react_1.default.createElement(input_text_1.default, { inputProps: {
id: "PhoneNumber",
name: " Phone Number ",
placeholder: "Enter Phone Number",
className: "latomedium font13 darktext mb-2",
}, label: " Phone Number", infoClassName: "tool-tip tooltip-top font12 p-1", info: "Phone Number", infoIcon: "icon-info", isInfo: true, formClassName: "d-flex flex-column" })),
react_1.default.createElement("div", { className: "col-sm-12 col-lg-4 mb-2" },
react_1.default.createElement(input_select_1.default, { inputProps: {
id: "IsArchived ",
name: " Is Archived ",
className: "latomedium font13 darktext mb-2",
}, label: "Is Archived ", infoClassName: "tool-tip tooltip-top font12 p-1", info: "Is Archived ", infoIcon: "icon-info", isInfo: true, formClassName: "d-flex flex-column" }))),
react_1.default.createElement("div", { className: "d-flex py-1 flex-wrap" },
react_1.default.createElement("div", { className: "ms-auto settingsbtns d-flex" },
react_1.default.createElement(buttons_1.default, { label: "Update", className: "border-radius py-1 px-2 btn-bgcolor11 ms-2 whitetext montserratbold font12 text-uppercase btn-xs", icon: "icon-update font-11 pe-1", type: "button" }),
react_1.default.createElement(buttons_1.default, { label: "Cancel", className: "py-1 px-2 border-radius btn-border1 ms-2 montserratbold font12 text-uppercase btn-xs", icon: "icon-close color-primary font-9 pe-1", type: "button", onClick: function () {
setshowedit(false);
} }))))) : ("")));
});
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "mb-2 d-flex align-items-center bgcolor-primary px-2 py-1 whitetext border-radius1 " },
react_1.default.createElement("div", { className: "d-flex align-items-center py-2" },
react_1.default.createElement("h2", { tabIndex: 0, "aria-label": ' Points of Contact', className: "font-14 d-flex align-items-center" },
" ",
react_1.default.createElement("span", { className: "icon-adduser font-12 pe-2" }),
" Points of Contact")),
react_1.default.createElement("div", { className: 'ms-auto' },
react_1.default.createElement(buttons_1.default, { label: "Add", className: "btn-xs montserratBold font12 text-uppercase text-color1 addbtn border-radius px-2", icon: "icon-add font-10 pe-1", type: "button", onClick: function () {
setshowAddPopup(!showAddPopup);
} }))),
showAddPopup ? (react_1.default.createElement("div", { className: "settingsaddpopup w-100 my-2 border-radius whitebg d-inline-block bordered1" },
react_1.default.createElement("div", { className: "p-3 border-bottom1 " },
react_1.default.createElement("h4", { className: "m-0 p-0 d-inline-block font15 montserratSemibold textcolor4 text-uppercase" },
react_1.default.createElement("span", { tabIndex: 0, "aria-label": "Add Points Of Contact" }, "Add Points Of Contact"))),
react_1.default.createElement("div", { className: "px-3 py-1" },
react_1.default.createElement("div", { className: "row" },
react_1.default.createElement("div", { className: "col-sm-12 col-lg-6 mb-2" },
react_1.default.createElement(input_text_1.default, { inputProps: {
id: " PointsofContact ",
name: " Points of Contact ",
placeholder: "Enter Name or email address..",
className: "latomedium font13 darktext mb-2",
}, label: " Points of Contact ", isMandatory: true, infoClassName: "tool-tip tooltip-top", info: " Points of Contact ", infoIcon: "icon-info", isInfo: true, type: "peopel-picker", formClassName: "d-flex flex-column" })),
react_1.default.createElement("div", { className: "col-sm-12 col-lg-6 mb-2" },
react_1.default.createElement(input_text_1.default, { inputProps: {
id: "PhoneNumber",
name: " Phone Number ",
placeholder: "Enter Phone Number",
className: "latomedium font13 darktext mb-2",
}, label: " Phone Number", infoClassName: "tool-tip tooltip-top font12 p-1", info: "Phone Number", infoIcon: "icon-info", isInfo: true, formClassName: "d-flex flex-column" }))),
react_1.default.createElement("div", { className: " d-flex py-1 flex-wrap" },
react_1.default.createElement("div", { className: "ms-auto settingsbtns d-flex" },
react_1.default.createElement(buttons_1.default, { label: "Save", className: "border-radius py-1 px-2 btn-bgcolor9 ms-2 whitetext montserratbold font12 text-uppercase btn-xs", icon: "icon-save font-11 pe-1", type: "button" }),
react_1.default.createElement(buttons_1.default, { label: "Cancel", className: "py-1 px-2 border-radius bordered ms-2 montserratbold font12 text-uppercase btn-xs", icon: "icon-close color-primary font-9 pe-1", type: "button", onClick: function () {
setshowAddPopup(false);
} })))))) : (""),
react_1.default.createElement("div", { className: "py-0" },
react_1.default.createElement("div", { className: "" },
react_1.default.createElement("div", { className: "list w-100" },
react_1.default.createElement("ul", { className: "m-0 p-0" }, listItems))))));
};
exports.default = PointsofContact;
//# sourceMappingURL=pointsofcontact.js.map