{"ast":null,"code":"import _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/components/ListDemo.js\";\n\nimport React, { useState, useEffect } from 'react';\nimport { DataView, DataViewLayoutOptions } from 'primereact/dataview';\nimport { Button } from 'primereact/button';\nimport { Dropdown } from 'primereact/dropdown';\nimport { Rating } from 'primereact/rating';\nimport { PickList } from 'primereact/picklist';\nimport { OrderList } from 'primereact/orderlist';\nimport { ProductService } from '../service/ProductService';\n\nvar ListDemo = function ListDemo() {\n var listValue = [{\n name: 'San Francisco',\n code: 'SF'\n }, {\n name: 'London',\n code: 'LDN'\n }, {\n name: 'Paris',\n code: 'PRS'\n }, {\n name: 'Istanbul',\n code: 'IST'\n }, {\n name: 'Berlin',\n code: 'BRL'\n }, {\n name: 'Barcelona',\n code: 'BRC'\n }, {\n name: 'Rome',\n code: 'RM'\n }];\n\n var _useState = useState(listValue),\n _useState2 = _slicedToArray(_useState, 2),\n picklistSourceValue = _useState2[0],\n setPicklistSourceValue = _useState2[1];\n\n var _useState3 = useState([]),\n _useState4 = _slicedToArray(_useState3, 2),\n picklistTargetValue = _useState4[0],\n setPicklistTargetValue = _useState4[1];\n\n var _useState5 = useState(listValue),\n _useState6 = _slicedToArray(_useState5, 2),\n orderlistValue = _useState6[0],\n setOrderlistValue = _useState6[1];\n\n var _useState7 = useState(null),\n _useState8 = _slicedToArray(_useState7, 2),\n dataviewValue = _useState8[0],\n setDataviewValue = _useState8[1];\n\n var _useState9 = useState('grid'),\n _useState10 = _slicedToArray(_useState9, 2),\n layout = _useState10[0],\n setLayout = _useState10[1];\n\n var _useState11 = useState(null),\n _useState12 = _slicedToArray(_useState11, 2),\n sortKey = _useState12[0],\n setSortKey = _useState12[1];\n\n var _useState13 = useState(null),\n _useState14 = _slicedToArray(_useState13, 2),\n sortOrder = _useState14[0],\n setSortOrder = _useState14[1];\n\n var _useState15 = useState(null),\n _useState16 = _slicedToArray(_useState15, 2),\n sortField = _useState16[0],\n setSortField = _useState16[1];\n\n var sortOptions = [{\n label: 'Price High to Low',\n value: '!price'\n }, {\n label: 'Price Low to High',\n value: 'price'\n }];\n useEffect(function () {\n var productService = new ProductService();\n productService.getProducts().then(function (data) {\n return setDataviewValue(data);\n });\n }, []);\n\n var onSortChange = function onSortChange(event) {\n var value = event.value;\n\n if (value.indexOf('!') === 0) {\n setSortOrder(-1);\n setSortField(value.substring(1, value.length));\n setSortKey(value);\n } else {\n setSortOrder(1);\n setSortField(value);\n setSortKey(value);\n }\n };\n\n var dataviewHeader = /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid grid-nogutter\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 56,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-6\",\n style: {\n textAlign: 'left'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 57,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(Dropdown, {\n value: sortKey,\n options: sortOptions,\n optionLabel: \"label\",\n placeholder: \"Sort By Price\",\n onChange: onSortChange,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 58,\n columnNumber: 17\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-6\",\n style: {\n textAlign: 'right'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 60,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(DataViewLayoutOptions, {\n layout: layout,\n onChange: function onChange(e) {\n return setLayout(e.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 61,\n columnNumber: 17\n }\n })));\n\n var dataviewListItem = function dataviewListItem(data) {\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 68,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex flex-column md:flex-row align-items-center p-3 w-full\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 69,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/demo/images/product/\".concat(data.image),\n alt: data.name,\n className: \"my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 70,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex-1 text-center md:text-left\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 71,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"font-bold text-2xl\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 72,\n columnNumber: 25\n }\n }, data.name), /*#__PURE__*/React.createElement(\"div\", {\n className: \"mb-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 73,\n columnNumber: 25\n }\n }, data.description), /*#__PURE__*/React.createElement(Rating, {\n value: data.rating,\n readonly: true,\n cancel: false,\n className: \"mb-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 74,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex align-items-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 75,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-tag mr-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 76,\n columnNumber: 29\n }\n }), /*#__PURE__*/React.createElement(\"span\", {\n className: \"font-semibold\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 77,\n columnNumber: 29\n }\n }, data.category))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex flex-row md:flex-column justify-content-between w-full md:w-auto align-items-center md:align-items-end mt-5 md:mt-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 80,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-2xl font-semibold mb-2 align-self-center md:align-self-end\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 81,\n columnNumber: 25\n }\n }, \"$\", data.price), /*#__PURE__*/React.createElement(Button, {\n icon: \"pi pi-shopping-cart\",\n label: \"Add to Cart\",\n disabled: data.inventoryStatus === 'OUTOFSTOCK',\n className: \"mb-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 82,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(\"span\", {\n className: \"product-badge status-\".concat(data.inventoryStatus.toLowerCase()),\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 83,\n columnNumber: 25\n }\n }, data.inventoryStatus))));\n };\n\n var dataviewGridItem = function dataviewGridItem(data) {\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 md:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 92,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card m-3 border-1 surface-border\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 93,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex align-items-center justify-content-between\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 94,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex align-items-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 95,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-tag mr-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 96,\n columnNumber: 29\n }\n }), /*#__PURE__*/React.createElement(\"span\", {\n className: \"font-semibold\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 97,\n columnNumber: 29\n }\n }, data.category)), /*#__PURE__*/React.createElement(\"span\", {\n className: \"product-badge status-\".concat(data.inventoryStatus.toLowerCase()),\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 99,\n columnNumber: 25\n }\n }, data.inventoryStatus)), /*#__PURE__*/React.createElement(\"div\", {\n className: \"text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 101,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/demo/images/product/\".concat(data.image),\n alt: data.name,\n className: \"w-9 shadow-2 my-3 mx-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 102,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: \"text-2xl font-bold\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 103,\n columnNumber: 25\n }\n }, data.name), /*#__PURE__*/React.createElement(\"div\", {\n className: \"mb-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 104,\n columnNumber: 25\n }\n }, data.description), /*#__PURE__*/React.createElement(Rating, {\n value: data.rating,\n readonly: true,\n cancel: false,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 105,\n columnNumber: 25\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex align-items-center justify-content-between\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 107,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-2xl font-semibold\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 108,\n columnNumber: 25\n }\n }, \"$\", data.price), /*#__PURE__*/React.createElement(Button, {\n icon: \"pi pi-shopping-cart\",\n disabled: data.inventoryStatus === 'OUTOFSTOCK',\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 109,\n columnNumber: 25\n }\n }))));\n };\n\n var itemTemplate = function itemTemplate(data, layout) {\n if (!data) {\n return;\n }\n\n if (layout === 'list') {\n return dataviewListItem(data);\n } else if (layout === 'grid') {\n return dataviewGridItem(data);\n }\n };\n\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid list-demo\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 130,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 131,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 132,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 133,\n columnNumber: 21\n }\n }, \"DataView\"), /*#__PURE__*/React.createElement(DataView, {\n value: dataviewValue,\n layout: layout,\n paginator: true,\n rows: 9,\n sortOrder: sortOrder,\n sortField: sortField,\n itemTemplate: itemTemplate,\n header: dataviewHeader,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 134,\n columnNumber: 21\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 lg:col-8\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 138,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 139,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 140,\n columnNumber: 21\n }\n }, \"PickList\"), /*#__PURE__*/React.createElement(PickList, {\n source: picklistSourceValue,\n target: picklistTargetValue,\n sourceHeader: \"From\",\n targetHeader: \"To\",\n itemTemplate: function itemTemplate(item) {\n return /*#__PURE__*/React.createElement(\"div\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 141,\n columnNumber: 151\n }\n }, item.name);\n },\n onChange: function onChange(e) {\n setPicklistSourceValue(e.source);\n setPicklistTargetValue(e.target);\n },\n sourceStyle: {\n height: '200px'\n },\n targetStyle: {\n height: '200px'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 141,\n columnNumber: 21\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 lg:col-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 146,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 147,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 148,\n columnNumber: 21\n }\n }, \"OrderList\"), /*#__PURE__*/React.createElement(OrderList, {\n value: orderlistValue,\n listStyle: {\n height: '200px'\n },\n className: \"p-orderlist-responsive\",\n rows: 10,\n header: \"Cities\",\n itemTemplate: function itemTemplate(item) {\n return /*#__PURE__*/React.createElement(\"div\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 149,\n columnNumber: 172\n }\n }, item.name);\n },\n onChange: function onChange(e) {\n return setOrderlistValue(e.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 149,\n columnNumber: 21\n }\n }))));\n};\n\nvar comparisonFn = function comparisonFn(prevProps, nextProps) {\n return prevProps.location.pathname === nextProps.location.pathname;\n};\n\nexport default React.memo(ListDemo, comparisonFn);","map":{"version":3,"names":["React","useState","useEffect","DataView","DataViewLayoutOptions","Button","Dropdown","Rating","PickList","OrderList","ProductService","ListDemo","listValue","name","code","picklistSourceValue","setPicklistSourceValue","picklistTargetValue","setPicklistTargetValue","orderlistValue","setOrderlistValue","dataviewValue","setDataviewValue","layout","setLayout","sortKey","setSortKey","sortOrder","setSortOrder","sortField","setSortField","sortOptions","label","value","productService","getProducts","then","data","onSortChange","event","indexOf","substring","length","dataviewHeader","textAlign","e","dataviewListItem","image","description","rating","category","price","inventoryStatus","toLowerCase","dataviewGridItem","itemTemplate","item","source","target","height","comparisonFn","prevProps","nextProps","location","pathname","memo"],"sources":["/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/ListDemo.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { DataView, DataViewLayoutOptions } from 'primereact/dataview';\nimport { Button } from 'primereact/button';\nimport { Dropdown } from 'primereact/dropdown';\nimport { Rating } from 'primereact/rating';\nimport { PickList } from 'primereact/picklist';\nimport { OrderList } from 'primereact/orderlist';\nimport { ProductService } from '../service/ProductService';\n\nconst ListDemo = () => {\n const listValue = [\n { name: 'San Francisco', code: 'SF' },\n { name: 'London', code: 'LDN' },\n { name: 'Paris', code: 'PRS' },\n { name: 'Istanbul', code: 'IST' },\n { name: 'Berlin', code: 'BRL' },\n { name: 'Barcelona', code: 'BRC' },\n { name: 'Rome', code: 'RM' },\n ];\n\n const [picklistSourceValue, setPicklistSourceValue] = useState(listValue);\n const [picklistTargetValue, setPicklistTargetValue] = useState([]);\n const [orderlistValue, setOrderlistValue] = useState(listValue);\n const [dataviewValue, setDataviewValue] = useState(null);\n const [layout, setLayout] = useState('grid');\n const [sortKey, setSortKey] = useState(null);\n const [sortOrder, setSortOrder] = useState(null);\n const [sortField, setSortField] = useState(null);\n\n const sortOptions = [\n { label: 'Price High to Low', value: '!price' },\n { label: 'Price Low to High', value: 'price' }\n ];\n\n useEffect(() => {\n const productService = new ProductService();\n productService.getProducts().then(data => setDataviewValue(data));\n }, []);\n\n const onSortChange = (event) => {\n const value = event.value;\n\n if (value.indexOf('!') === 0) {\n setSortOrder(-1);\n setSortField(value.substring(1, value.length));\n setSortKey(value);\n }\n else {\n setSortOrder(1);\n setSortField(value);\n setSortKey(value);\n }\n };\n\n const dataviewHeader = (\n