{"ast":null,"code":"import _objectSpread from \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectSpread2\";\nimport _toConsumableArray from \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/toConsumableArray\";\nimport _slicedToArray from \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\n\nvar _this = this,\n _jsxFileName = \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/pages/Crud.js\";\n\nimport React, { useState, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { DataTable } from 'primereact/datatable';\nimport { Column } from 'primereact/column';\nimport { Toast } from 'primereact/toast';\nimport { Button } from 'primereact/button';\nimport { FileUpload } from 'primereact/fileupload';\nimport { Rating } from 'primereact/rating';\nimport { Toolbar } from 'primereact/toolbar';\nimport { InputTextarea } from 'primereact/inputtextarea';\nimport { RadioButton } from 'primereact/radiobutton';\nimport { InputNumber } from 'primereact/inputnumber';\nimport { Dialog } from 'primereact/dialog';\nimport { InputText } from 'primereact/inputtext';\nimport { ProductService } from '../service/ProductService';\n\nvar Crud = function Crud() {\n var emptyProduct = {\n id: null,\n name: '',\n image: null,\n description: '',\n category: null,\n price: 0,\n quantity: 0,\n rating: 0,\n inventoryStatus: 'INSTOCK'\n };\n\n var _useState = useState(null),\n _useState2 = _slicedToArray(_useState, 2),\n products = _useState2[0],\n setProducts = _useState2[1];\n\n var _useState3 = useState(false),\n _useState4 = _slicedToArray(_useState3, 2),\n productDialog = _useState4[0],\n setProductDialog = _useState4[1];\n\n var _useState5 = useState(false),\n _useState6 = _slicedToArray(_useState5, 2),\n deleteProductDialog = _useState6[0],\n setDeleteProductDialog = _useState6[1];\n\n var _useState7 = useState(false),\n _useState8 = _slicedToArray(_useState7, 2),\n deleteProductsDialog = _useState8[0],\n setDeleteProductsDialog = _useState8[1];\n\n var _useState9 = useState(emptyProduct),\n _useState10 = _slicedToArray(_useState9, 2),\n product = _useState10[0],\n setProduct = _useState10[1];\n\n var _useState11 = useState(null),\n _useState12 = _slicedToArray(_useState11, 2),\n selectedProducts = _useState12[0],\n setSelectedProducts = _useState12[1];\n\n var _useState13 = useState(false),\n _useState14 = _slicedToArray(_useState13, 2),\n submitted = _useState14[0],\n setSubmitted = _useState14[1];\n\n var _useState15 = useState(null),\n _useState16 = _slicedToArray(_useState15, 2),\n globalFilter = _useState16[0],\n setGlobalFilter = _useState16[1];\n\n var toast = useRef(null);\n var dt = useRef(null);\n useEffect(function () {\n var productService = new ProductService();\n productService.getProducts().then(function (data) {\n return setProducts(data);\n });\n }, []);\n\n var formatCurrency = function formatCurrency(value) {\n return value.toLocaleString('en-US', {\n style: 'currency',\n currency: 'USD'\n });\n };\n\n var openNew = function openNew() {\n setProduct(emptyProduct);\n setSubmitted(false);\n setProductDialog(true);\n };\n\n var hideDialog = function hideDialog() {\n setSubmitted(false);\n setProductDialog(false);\n };\n\n var hideDeleteProductDialog = function hideDeleteProductDialog() {\n setDeleteProductDialog(false);\n };\n\n var hideDeleteProductsDialog = function hideDeleteProductsDialog() {\n setDeleteProductsDialog(false);\n };\n\n var saveProduct = function saveProduct() {\n setSubmitted(true);\n\n if (product.name.trim()) {\n var _products = _toConsumableArray(products);\n\n var _product = _objectSpread({}, product);\n\n if (product.id) {\n var index = findIndexById(product.id);\n _products[index] = _product;\n toast.current.show({\n severity: 'success',\n summary: 'Successful',\n detail: 'Product Updated',\n life: 3000\n });\n } else {\n _product.id = createId();\n _product.image = 'product-placeholder.svg';\n\n _products.push(_product);\n\n toast.current.show({\n severity: 'success',\n summary: 'Successful',\n detail: 'Product Created',\n life: 3000\n });\n }\n\n setProducts(_products);\n setProductDialog(false);\n setProduct(emptyProduct);\n }\n };\n\n var editProduct = function editProduct(product) {\n setProduct(_objectSpread({}, product));\n setProductDialog(true);\n };\n\n var confirmDeleteProduct = function confirmDeleteProduct(product) {\n setProduct(product);\n setDeleteProductDialog(true);\n };\n\n var deleteProduct = function deleteProduct() {\n var _products = products.filter(function (val) {\n return val.id !== product.id;\n });\n\n setProducts(_products);\n setDeleteProductDialog(false);\n setProduct(emptyProduct);\n toast.current.show({\n severity: 'success',\n summary: 'Successful',\n detail: 'Product Deleted',\n life: 3000\n });\n };\n\n var findIndexById = function findIndexById(id) {\n var index = -1;\n\n for (var i = 0; i < products.length; i++) {\n if (products[i].id === id) {\n index = i;\n break;\n }\n }\n\n return index;\n };\n\n var createId = function createId() {\n var id = '';\n var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n\n for (var i = 0; i < 5; i++) {\n id += chars.charAt(Math.floor(Math.random() * chars.length));\n }\n\n return id;\n };\n\n var exportCSV = function exportCSV() {\n dt.current.exportCSV();\n };\n\n var confirmDeleteSelected = function confirmDeleteSelected() {\n setDeleteProductsDialog(true);\n };\n\n var deleteSelectedProducts = function deleteSelectedProducts() {\n var _products = products.filter(function (val) {\n return !selectedProducts.includes(val);\n });\n\n setProducts(_products);\n setDeleteProductsDialog(false);\n setSelectedProducts(null);\n toast.current.show({\n severity: 'success',\n summary: 'Successful',\n detail: 'Products Deleted',\n life: 3000\n });\n };\n\n var onCategoryChange = function onCategoryChange(e) {\n var _product = _objectSpread({}, product);\n\n _product['category'] = e.value;\n setProduct(_product);\n };\n\n var onInputChange = function onInputChange(e, name) {\n var val = e.target && e.target.value || '';\n\n var _product = _objectSpread({}, product);\n\n _product[\"\".concat(name)] = val;\n setProduct(_product);\n };\n\n var onInputNumberChange = function onInputNumberChange(e, name) {\n var val = e.value || 0;\n\n var _product = _objectSpread({}, product);\n\n _product[\"\".concat(name)] = val;\n setProduct(_product);\n };\n\n var leftToolbarTemplate = function leftToolbarTemplate() {\n return /*#__PURE__*/React.createElement(React.Fragment, {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 173,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"my-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 174,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(Button, {\n label: \"New\",\n icon: \"pi pi-plus\",\n className: \"p-button-success mr-2\",\n onClick: openNew,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 175,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Button, {\n label: \"Delete\",\n icon: \"pi pi-trash\",\n className: \"p-button-danger\",\n onClick: confirmDeleteSelected,\n disabled: !selectedProducts || !selectedProducts.length,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 176,\n columnNumber: 21\n }\n })));\n };\n\n var rightToolbarTemplate = function rightToolbarTemplate() {\n return /*#__PURE__*/React.createElement(React.Fragment, {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 184,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(FileUpload, {\n mode: \"basic\",\n accept: \"image/*\",\n maxFileSize: 1000000,\n label: \"Import\",\n chooseLabel: \"Import\",\n className: \"mr-2 inline-block\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 185,\n columnNumber: 17\n }\n }), /*#__PURE__*/React.createElement(Button, {\n label: \"Export\",\n icon: \"pi pi-upload\",\n className: \"p-button-help\",\n onClick: exportCSV,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 186,\n columnNumber: 17\n }\n }));\n };\n\n var codeBodyTemplate = function codeBodyTemplate(rowData) {\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-column-title\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 194,\n columnNumber: 17\n }\n }, \"Code\"), rowData.code);\n };\n\n var nameBodyTemplate = function nameBodyTemplate(rowData) {\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-column-title\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 203,\n columnNumber: 17\n }\n }, \"Name\"), rowData.name);\n };\n\n var imageBodyTemplate = function imageBodyTemplate(rowData) {\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-column-title\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 212,\n columnNumber: 17\n }\n }, \"Image\"), /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/demo/images/product/\".concat(rowData.image),\n alt: rowData.image,\n className: \"shadow-2\",\n width: \"100\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 213,\n columnNumber: 17\n }\n }));\n };\n\n var priceBodyTemplate = function priceBodyTemplate(rowData) {\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-column-title\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 221,\n columnNumber: 17\n }\n }, \"Price\"), formatCurrency(rowData.price));\n };\n\n var categoryBodyTemplate = function categoryBodyTemplate(rowData) {\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-column-title\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 230,\n columnNumber: 17\n }\n }, \"Category\"), rowData.category);\n };\n\n var ratingBodyTemplate = function ratingBodyTemplate(rowData) {\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-column-title\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 239,\n columnNumber: 17\n }\n }, \"Reviews\"), /*#__PURE__*/React.createElement(Rating, {\n value: rowData.rating,\n readonly: true,\n cancel: false,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 240,\n columnNumber: 17\n }\n }));\n };\n\n var statusBodyTemplate = function statusBodyTemplate(rowData) {\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(\"span\", {\n className: \"p-column-title\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 248,\n columnNumber: 17\n }\n }, \"Status\"), /*#__PURE__*/React.createElement(\"span\", {\n className: \"product-badge status-\".concat(rowData.inventoryStatus.toLowerCase()),\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 249,\n columnNumber: 17\n }\n }, rowData.inventoryStatus));\n };\n\n var actionBodyTemplate = function actionBodyTemplate(rowData) {\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"actions\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 256,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(Button, {\n icon: \"pi pi-pencil\",\n className: \"p-button-rounded p-button-success mr-2\",\n onClick: function onClick() {\n return editProduct(rowData);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 257,\n columnNumber: 17\n }\n }), /*#__PURE__*/React.createElement(Button, {\n icon: \"pi pi-trash\",\n className: \"p-button-rounded p-button-warning mt-2\",\n onClick: function onClick() {\n return confirmDeleteProduct(rowData);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 258,\n columnNumber: 17\n }\n }));\n };\n\n var header = /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex flex-column md:flex-row md:justify-content-between md:align-items-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 264,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n className: \"m-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 265,\n columnNumber: 13\n }\n }, \"Manage Products\"), /*#__PURE__*/React.createElement(\"span\", {\n className: \"block mt-2 md:mt-0 p-input-icon-left\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 266,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-search\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 267,\n columnNumber: 17\n }\n }), /*#__PURE__*/React.createElement(InputText, {\n type: \"search\",\n onInput: function onInput(e) {\n return setGlobalFilter(e.target.value);\n },\n placeholder: \"Search...\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 268,\n columnNumber: 17\n }\n })));\n var productDialogFooter = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {\n label: \"Cancel\",\n icon: \"pi pi-times\",\n className: \"p-button-text\",\n onClick: hideDialog,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 275,\n columnNumber: 13\n }\n }), /*#__PURE__*/React.createElement(Button, {\n label: \"Save\",\n icon: \"pi pi-check\",\n className: \"p-button-text\",\n onClick: saveProduct,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 276,\n columnNumber: 13\n }\n }));\n var deleteProductDialogFooter = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {\n label: \"No\",\n icon: \"pi pi-times\",\n className: \"p-button-text\",\n onClick: hideDeleteProductDialog,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 281,\n columnNumber: 13\n }\n }), /*#__PURE__*/React.createElement(Button, {\n label: \"Yes\",\n icon: \"pi pi-check\",\n className: \"p-button-text\",\n onClick: deleteProduct,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 282,\n columnNumber: 13\n }\n }));\n var deleteProductsDialogFooter = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {\n label: \"No\",\n icon: \"pi pi-times\",\n className: \"p-button-text\",\n onClick: hideDeleteProductsDialog,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 287,\n columnNumber: 13\n }\n }), /*#__PURE__*/React.createElement(Button, {\n label: \"Yes\",\n icon: \"pi pi-check\",\n className: \"p-button-text\",\n onClick: deleteSelectedProducts,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 288,\n columnNumber: 13\n }\n }));\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid crud-demo\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 293,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 294,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 295,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(Toast, {\n ref: toast,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 296,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Toolbar, {\n className: \"mb-4\",\n left: leftToolbarTemplate,\n right: rightToolbarTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 297,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(DataTable, {\n ref: dt,\n value: products,\n selection: selectedProducts,\n onSelectionChange: function onSelectionChange(e) {\n return setSelectedProducts(e.value);\n },\n dataKey: \"id\",\n paginator: true,\n rows: 10,\n rowsPerPageOptions: [5, 10, 25],\n className: \"datatable-responsive\",\n paginatorTemplate: \"FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown\",\n currentPageReportTemplate: \"Showing {first} to {last} of {totalRecords} products\",\n globalFilter: globalFilter,\n emptyMessage: \"No products found.\",\n header: header,\n responsiveLayout: \"scroll\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 299,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Column, {\n selectionMode: \"multiple\",\n headerStyle: {\n width: '3rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 304,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"code\",\n header: \"Code\",\n sortable: true,\n body: codeBodyTemplate,\n headerStyle: {\n width: '14%',\n minWidth: '10rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 305,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"name\",\n header: \"Name\",\n sortable: true,\n body: nameBodyTemplate,\n headerStyle: {\n width: '14%',\n minWidth: '10rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 306,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n header: \"Image\",\n body: imageBodyTemplate,\n headerStyle: {\n width: '14%',\n minWidth: '10rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 307,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"price\",\n header: \"Price\",\n body: priceBodyTemplate,\n sortable: true,\n headerStyle: {\n width: '14%',\n minWidth: '8rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 308,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"category\",\n header: \"Category\",\n sortable: true,\n body: categoryBodyTemplate,\n headerStyle: {\n width: '14%',\n minWidth: '10rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 309,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"rating\",\n header: \"Reviews\",\n body: ratingBodyTemplate,\n sortable: true,\n headerStyle: {\n width: '14%',\n minWidth: '10rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 310,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"inventoryStatus\",\n header: \"Status\",\n body: statusBodyTemplate,\n sortable: true,\n headerStyle: {\n width: '14%',\n minWidth: '10rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 311,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n body: actionBodyTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 312,\n columnNumber: 25\n }\n })), /*#__PURE__*/React.createElement(Dialog, {\n visible: productDialog,\n style: {\n width: '450px'\n },\n header: \"Product Details\",\n modal: true,\n className: \"p-fluid\",\n footer: productDialogFooter,\n onHide: hideDialog,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 315,\n columnNumber: 21\n }\n }, product.image && /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/demo/images/product/\".concat(product.image),\n alt: product.image,\n width: \"150\",\n className: \"mt-0 mx-auto mb-5 block shadow-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 316,\n columnNumber: 43\n }\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: \"field\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 317,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"name\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 318,\n columnNumber: 29\n }\n }, \"Name\"), /*#__PURE__*/React.createElement(InputText, {\n id: \"name\",\n value: product.name,\n onChange: function onChange(e) {\n return onInputChange(e, 'name');\n },\n required: true,\n autoFocus: true,\n className: classNames({\n 'p-invalid': submitted && !product.name\n }),\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 319,\n columnNumber: 29\n }\n }), submitted && !product.name && /*#__PURE__*/React.createElement(\"small\", {\n className: \"p-invalid\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 320,\n columnNumber: 60\n }\n }, \"Name is required.\")), /*#__PURE__*/React.createElement(\"div\", {\n className: \"field\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 322,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"description\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 323,\n columnNumber: 29\n }\n }, \"Description\"), /*#__PURE__*/React.createElement(InputTextarea, {\n id: \"description\",\n value: product.description,\n onChange: function onChange(e) {\n return onInputChange(e, 'description');\n },\n required: true,\n rows: 3,\n cols: 20,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 324,\n columnNumber: 29\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"field\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 327,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"label\", {\n className: \"mb-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 328,\n columnNumber: 29\n }\n }, \"Category\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"formgrid grid\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 329,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"field-radiobutton col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 330,\n columnNumber: 33\n }\n }, /*#__PURE__*/React.createElement(RadioButton, {\n inputId: \"category1\",\n name: \"category\",\n value: \"Accessories\",\n onChange: onCategoryChange,\n checked: product.category === 'Accessories',\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 331,\n columnNumber: 37\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"category1\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 332,\n columnNumber: 37\n }\n }, \"Accessories\")), /*#__PURE__*/React.createElement(\"div\", {\n className: \"field-radiobutton col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 334,\n columnNumber: 33\n }\n }, /*#__PURE__*/React.createElement(RadioButton, {\n inputId: \"category2\",\n name: \"category\",\n value: \"Clothing\",\n onChange: onCategoryChange,\n checked: product.category === 'Clothing',\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 335,\n columnNumber: 37\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"category2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 336,\n columnNumber: 37\n }\n }, \"Clothing\")), /*#__PURE__*/React.createElement(\"div\", {\n className: \"field-radiobutton col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 338,\n columnNumber: 33\n }\n }, /*#__PURE__*/React.createElement(RadioButton, {\n inputId: \"category3\",\n name: \"category\",\n value: \"Electronics\",\n onChange: onCategoryChange,\n checked: product.category === 'Electronics',\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 339,\n columnNumber: 37\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"category3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 340,\n columnNumber: 37\n }\n }, \"Electronics\")), /*#__PURE__*/React.createElement(\"div\", {\n className: \"field-radiobutton col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 342,\n columnNumber: 33\n }\n }, /*#__PURE__*/React.createElement(RadioButton, {\n inputId: \"category4\",\n name: \"category\",\n value: \"Fitness\",\n onChange: onCategoryChange,\n checked: product.category === 'Fitness',\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 343,\n columnNumber: 37\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"category4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 344,\n columnNumber: 37\n }\n }, \"Fitness\")))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"formgrid grid\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 349,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"field col\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 350,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"price\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 351,\n columnNumber: 33\n }\n }, \"Price\"), /*#__PURE__*/React.createElement(InputNumber, {\n id: \"price\",\n value: product.price,\n onValueChange: function onValueChange(e) {\n return onInputNumberChange(e, 'price');\n },\n mode: \"currency\",\n currency: \"USD\",\n locale: \"en-US\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 352,\n columnNumber: 33\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"field col\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 354,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"quantity\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 355,\n columnNumber: 33\n }\n }, \"Quantity\"), /*#__PURE__*/React.createElement(InputNumber, {\n id: \"quantity\",\n value: product.quantity,\n onValueChange: function onValueChange(e) {\n return onInputNumberChange(e, 'quantity');\n },\n integeronly: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 356,\n columnNumber: 33\n }\n })))), /*#__PURE__*/React.createElement(Dialog, {\n visible: deleteProductDialog,\n style: {\n width: '450px'\n },\n header: \"Confirm\",\n modal: true,\n footer: deleteProductDialogFooter,\n onHide: hideDeleteProductDialog,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 361,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex align-items-center justify-content-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 362,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-exclamation-triangle mr-3\",\n style: {\n fontSize: '2rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 363,\n columnNumber: 29\n }\n }), product && /*#__PURE__*/React.createElement(\"span\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 364,\n columnNumber: 41\n }\n }, \"Are you sure you want to delete \", /*#__PURE__*/React.createElement(\"b\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 364,\n columnNumber: 79\n }\n }, product.name), \"?\"))), /*#__PURE__*/React.createElement(Dialog, {\n visible: deleteProductsDialog,\n style: {\n width: '450px'\n },\n header: \"Confirm\",\n modal: true,\n footer: deleteProductsDialogFooter,\n onHide: hideDeleteProductsDialog,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 368,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex align-items-center justify-content-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 369,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-exclamation-triangle mr-3\",\n style: {\n fontSize: '2rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 370,\n columnNumber: 29\n }\n }), product && /*#__PURE__*/React.createElement(\"span\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 371,\n columnNumber: 41\n }\n }, \"Are you sure you want to delete the selected products?\"))))));\n};\n\nvar comparisonFn = function comparisonFn(prevProps, nextProps) {\n return prevProps.location.pathname === nextProps.location.pathname;\n};\n\nexport default React.memo(Crud, comparisonFn);","map":{"version":3,"names":["React","useState","useEffect","useRef","classNames","DataTable","Column","Toast","Button","FileUpload","Rating","Toolbar","InputTextarea","RadioButton","InputNumber","Dialog","InputText","ProductService","Crud","emptyProduct","id","name","image","description","category","price","quantity","rating","inventoryStatus","products","setProducts","productDialog","setProductDialog","deleteProductDialog","setDeleteProductDialog","deleteProductsDialog","setDeleteProductsDialog","product","setProduct","selectedProducts","setSelectedProducts","submitted","setSubmitted","globalFilter","setGlobalFilter","toast","dt","productService","getProducts","then","data","formatCurrency","value","toLocaleString","style","currency","openNew","hideDialog","hideDeleteProductDialog","hideDeleteProductsDialog","saveProduct","trim","_products","_product","index","findIndexById","current","show","severity","summary","detail","life","createId","push","editProduct","confirmDeleteProduct","deleteProduct","filter","val","i","length","chars","charAt","Math","floor","random","exportCSV","confirmDeleteSelected","deleteSelectedProducts","includes","onCategoryChange","e","onInputChange","target","onInputNumberChange","leftToolbarTemplate","rightToolbarTemplate","codeBodyTemplate","rowData","code","nameBodyTemplate","imageBodyTemplate","priceBodyTemplate","categoryBodyTemplate","ratingBodyTemplate","statusBodyTemplate","toLowerCase","actionBodyTemplate","header","productDialogFooter","deleteProductDialogFooter","deleteProductsDialogFooter","width","minWidth","fontSize","comparisonFn","prevProps","nextProps","location","pathname","memo"],"sources":["/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/pages/Crud.js"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { DataTable } from 'primereact/datatable';\nimport { Column } from 'primereact/column';\nimport { Toast } from 'primereact/toast';\nimport { Button } from 'primereact/button';\nimport { FileUpload } from 'primereact/fileupload';\nimport { Rating } from 'primereact/rating';\nimport { Toolbar } from 'primereact/toolbar';\nimport { InputTextarea } from 'primereact/inputtextarea';\nimport { RadioButton } from 'primereact/radiobutton';\nimport { InputNumber } from 'primereact/inputnumber';\nimport { Dialog } from 'primereact/dialog';\nimport { InputText } from 'primereact/inputtext';\nimport { ProductService } from '../service/ProductService';\n\nconst Crud = () => {\n let emptyProduct = {\n id: null,\n name: '',\n image: null,\n description: '',\n category: null,\n price: 0,\n quantity: 0,\n rating: 0,\n inventoryStatus: 'INSTOCK'\n };\n\n const [products, setProducts] = useState(null);\n const [productDialog, setProductDialog] = useState(false);\n const [deleteProductDialog, setDeleteProductDialog] = useState(false);\n const [deleteProductsDialog, setDeleteProductsDialog] = useState(false);\n const [product, setProduct] = useState(emptyProduct);\n const [selectedProducts, setSelectedProducts] = useState(null);\n const [submitted, setSubmitted] = useState(false);\n const [globalFilter, setGlobalFilter] = useState(null);\n const toast = useRef(null);\n const dt = useRef(null);\n\n useEffect(() => {\n const productService = new ProductService();\n productService.getProducts().then(data => setProducts(data));\n }, []);\n\n const formatCurrency = (value) => {\n return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });\n }\n\n const openNew = () => {\n setProduct(emptyProduct);\n setSubmitted(false);\n setProductDialog(true);\n }\n\n const hideDialog = () => {\n setSubmitted(false);\n setProductDialog(false);\n }\n\n const hideDeleteProductDialog = () => {\n setDeleteProductDialog(false);\n }\n\n const hideDeleteProductsDialog = () => {\n setDeleteProductsDialog(false);\n }\n\n const saveProduct = () => {\n setSubmitted(true);\n\n if (product.name.trim()) {\n let _products = [...products];\n let _product = { ...product };\n if (product.id) {\n const index = findIndexById(product.id);\n\n _products[index] = _product;\n toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });\n }\n else {\n _product.id = createId();\n _product.image = 'product-placeholder.svg';\n _products.push(_product);\n toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });\n }\n\n setProducts(_products);\n setProductDialog(false);\n setProduct(emptyProduct);\n }\n }\n\n const editProduct = (product) => {\n setProduct({ ...product });\n setProductDialog(true);\n }\n\n const confirmDeleteProduct = (product) => {\n setProduct(product);\n setDeleteProductDialog(true);\n }\n\n const deleteProduct = () => {\n let _products = products.filter(val => val.id !== product.id);\n setProducts(_products);\n setDeleteProductDialog(false);\n setProduct(emptyProduct);\n toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });\n }\n\n const findIndexById = (id) => {\n let index = -1;\n for (let i = 0; i < products.length; i++) {\n if (products[i].id === id) {\n index = i;\n break;\n }\n }\n\n return index;\n }\n\n const createId = () => {\n let id = '';\n let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n for (let i = 0; i < 5; i++) {\n id += chars.charAt(Math.floor(Math.random() * chars.length));\n }\n return id;\n }\n\n const exportCSV = () => {\n dt.current.exportCSV();\n }\n\n const confirmDeleteSelected = () => {\n setDeleteProductsDialog(true);\n }\n\n const deleteSelectedProducts = () => {\n let _products = products.filter(val => !selectedProducts.includes(val));\n setProducts(_products);\n setDeleteProductsDialog(false);\n setSelectedProducts(null);\n toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });\n }\n\n const onCategoryChange = (e) => {\n let _product = { ...product };\n _product['category'] = e.value;\n setProduct(_product);\n }\n\n const onInputChange = (e, name) => {\n const val = (e.target && e.target.value) || '';\n let _product = { ...product };\n _product[`${name}`] = val;\n\n setProduct(_product);\n }\n\n const onInputNumberChange = (e, name) => {\n const val = e.value || 0;\n let _product = { ...product };\n _product[`${name}`] = val;\n\n setProduct(_product);\n }\n\n const leftToolbarTemplate = () => {\n return (\n \n
\n
\n
\n )\n }\n\n const rightToolbarTemplate = () => {\n return (\n \n \n