{"version":3,"sources":["webpack:///./Scripts/Actions/Rutab/MediaFolderExplorer.action.js","webpack:///./Scripts/Components/Rutab/RutabMediaFolderExplorer.js","webpack:///./Scripts/Hooks/PopStateQueryHook.js"],"names":["loadError","error","type","MEDIAEXPLORER_LOAD_ERROR","payload","receive","data","blockSystemId","MEDIAFOLDEREXPLORER_RECIVE","mediaFolder","MediaFolderExplorer","rootfolderId","dispatch","useDispatch","mediaFolderExplorer","useSelector","state","currentfolder","setCurrentFolder","useState","folderSystemId","setFolderSystemId","query","setQuery","window","location","search","listenToPopstate","winquery","trim","useEffect","addEventListener","removeEventListener","usePopStateQueryHook","folderSystemIdFromQuery","GetSelectedMediaFolderFromQuery","folderId","getState","get","then","response","json","catch","ex","catchError","loadMediaFolder","foundFolder","mediaFolders","find","folder","URLSearchParams","SetQueryParam","queryParams","set","history","pushState","toString","FormatLineBreaks","text","replace","BreadCrumbs","GetSeparator","i","breadCrumbs","map","length","key","name","onClick","systemId","className","childFolders","src","dangerouslySetInnerHTML","__html","files","file","target","href","url","GetImageForContentType","contentType"],"mappings":"iMAIA,MAUaA,EAAaC,IAAD,CACrBC,KAAMC,yBACNC,QAAS,CACLH,WAIKI,EAAU,CAACC,EAAMC,KAAP,CACnBL,KAAMM,KACNJ,QAAS,CACLK,YAAa,CAACF,gBAAeD,WCnBxBI,EAAsB,EAAGC,eAAcJ,oBAChD,MAAMK,GAAWC,UACXC,GAAsBC,SAAaC,GAAUA,EAAMF,uBAClDG,EAAeC,IAAoBC,cAAS,KAC5CC,EAAgBC,IAAqBF,gBACtCG,ECR0B,MAChC,MAAOA,EAAOC,IAAYJ,cAASK,OAAOC,SAASC,QAE7CC,EAAmB,KACrB,IAAIC,EAAWJ,OAAOC,SAASC,OAEf,MAAZE,GAAwC,KAApBA,EAASC,SAE7BD,EAAW,KAGfL,EAASK,IAUb,OAPAE,gBAAU,KACNN,OAAOO,iBAAiB,WAAYJ,GAC7B,KACHH,OAAOQ,oBAAoB,WAAYL,MAE5C,IAEIL,GDbOW,IAEdH,gBAAU,KACN,IAAII,EAA0BC,EAAgC5B,GAE1D2B,IAA4Bd,GAC5BC,EAAkBa,KAEvB,CAACZ,KAEJQ,gBAAU,KACFV,GACAR,EDhBmB,EAACwB,EAAUzB,EAAcJ,IAAkB,CAACK,EAAUyB,KACzEC,QAHA,oBAGQF,EAAW,IAAMzB,GAC5B4B,MAAMC,GAAaA,EAASC,SAC5BF,MAAMjC,GAASM,EAASP,EAAQC,EAAMC,MACtCmC,OAAOC,GAAO/B,GAASgC,OAAWD,GAAK1C,GAAUD,EAAUC,QCY/C4C,CAAgBzB,EAAgBT,EAAcJ,MAE5D,CAACa,KAEJU,gBAAU,KACN,IAAIgB,EAAchC,EAAoBiC,aAAaC,MAAMC,GAAWA,EAAOxC,YAAYF,gBAAkBA,IAErGuC,GACA5B,EAAiB4B,EAAYrC,eAElC,CAACK,IAEJ,MAAMqB,EAAmC5B,GACnB,IAAI2C,gBAAgB1B,OAAOC,SAASC,QAErCY,IAAI/B,IAAkBI,EAGrCwC,EAAgB,CAAC5C,EAAea,KAElC,IAAIgC,EAAc,IAAIF,gBAAgB1B,OAAOC,SAASC,QAEtD0B,EAAYC,IAAI9C,EAAea,GAE/BkC,QAAQC,UAAU,KAAM,KAAM,IAAMH,EAAYI,YAEhDnC,EAAkBD,IAGhBqC,EAAoBC,GACfA,EAAKC,QAAQ,kBAAmB,SAGrCC,EAAc,KAChB,MAAMC,EAAgBC,IAClB,GAAIA,EAAI,EACJ,OAAQ,wCAIhB,OACI,2BACK7C,GAAeX,MAAMyD,aAAaC,KAAI,CAACf,EAAQa,IACxC7C,EAAcX,KAAKyD,YAAYE,OAAS,IAAMH,EACtC,gCAAGD,EAAaC,GAAG,qBAAGI,IAAKJ,GAAIb,EAAOkB,OAEtC,gCAAGN,EAAaC,GAAG,qBAAGI,IAAKJ,EAAGM,QAAS,IAAMjB,EAAc5C,EAAe0C,EAAOoB,WAAYpB,EAAOkB,WAOhI,OACI,uBAAKG,UAAU,uDACX,gBAACV,EAAD,MACA,uBAAKU,UAAU,YACVrD,GAAeX,MAAMiE,cAAcP,KAAI,CAACf,EAAQa,IAC7C,uBAAKQ,UAAU,wDAAwDJ,IAAKJ,GACxE,uBAAKQ,UAAU,eACX,uBAAKE,IAAI,0BAA0BJ,QAAS,IAAMjB,EAAc5C,EAAe0C,EAAOoB,aAE1F,uBAAKC,UAAU,uCACX,qBAAGA,UAAU,qBAAqBF,QAAS,IAAMjB,EAAc5C,EAAe0C,EAAOoB,UAAWI,wBAAyB,CAACC,OAAQjB,EAAiBR,EAAOkB,aAIrKlD,GAAeX,MAAMqE,OAAOX,KAAI,CAACY,EAAMd,IACpC,uBAAKQ,UAAU,wDAAwDJ,IAAKJ,GACxE,qBAAGe,OAAO,SAASC,KAAMF,EAAKG,IAAKT,UAAU,eACzC,gBAACU,EAAD,CAAwBC,YAAaL,EAAKK,eAE9C,uBAAKX,UAAU,uCACX,qBAAGO,OAAO,SAASC,KAAMF,EAAKG,IAAKT,UAAU,0BAA0BG,wBAAyB,CAACC,OAAQjB,EAAiBmB,EAAKT,gBASrJa,EAAyB,EAAGC,kBAC9B,OAAQA,GACJ,IAAK,kBACD,OAAO,uBAAKT,IAAI,yBACpB,IAAK,2BAEL,IAAK,kBAEL,IAAK,+BACD,OAAO,uBAAKA,IAAI,yBACpB,IAAK,oEACD,OAAO,uBAAKA,IAAI,0BACpB,QACI,OAAO,uBAAKA,IAAI,+BAI5B","file":"727.c403d4d0b1bcd7c1b360.js","sourcesContent":["import { get } from '../../Services/http';\r\nimport { catchError } from '../Error.action';\r\nimport { MEDIAFOLDEREXPLORER_LOAD_ERROR, MEDIAFOLDEREXPLORER_RECIVE } from '../../Rutab/RutabConstants';\r\n\r\nconst url = '/api/mediafolder/';\r\n\r\nexport const loadMediaFolder = (folderId, rootfolderId, blockSystemId) => (dispatch, getState) => {\r\n    return (get(url+folderId + '/' + rootfolderId)\r\n        .then((response) => response.json())\r\n        .then((data) => dispatch(receive(data, blockSystemId)))\r\n        .catch((ex) => dispatch(catchError(ex, (error) => loadError(error)))\r\n        ));\r\n};\r\n\r\nexport const loadError = (error) => ({\r\n    type: MEDIAEXPLORER_LOAD_ERROR,\r\n    payload: {\r\n        error,\r\n    },\r\n});\r\n\r\nexport const receive = (data, blockSystemId) => ({\r\n    type: MEDIAFOLDEREXPLORER_RECIVE,\r\n    payload: {\r\n        mediaFolder: {blockSystemId, data},        \r\n    },\r\n});","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { loadMediaFolder } from '../../Actions/Rutab/MediaFolderExplorer.action';\r\nimport { usePopStateQueryHook } from '../../Hooks/PopStateQueryHook';\r\n\r\nexport const MediaFolderExplorer = ({ rootfolderId, blockSystemId }) => {\r\n    const dispatch = useDispatch();\r\n    const mediaFolderExplorer = useSelector((state) => state.mediaFolderExplorer);\r\n    const [currentfolder, setCurrentFolder] = useState([]);\r\n    const [folderSystemId, setFolderSystemId] = useState();\r\n    const query = usePopStateQueryHook();\r\n\r\n    useEffect(() => {\r\n        let folderSystemIdFromQuery = GetSelectedMediaFolderFromQuery(blockSystemId);\r\n\r\n        if (folderSystemIdFromQuery !== folderSystemId) {\r\n            setFolderSystemId(folderSystemIdFromQuery)\r\n        }\r\n    }, [query]);\r\n\r\n    useEffect(() => {\r\n        if (folderSystemId) {\r\n            dispatch(loadMediaFolder(folderSystemId, rootfolderId, blockSystemId));\r\n        }\r\n    }, [folderSystemId])\r\n\r\n    useEffect(() => {\r\n        let foundFolder = mediaFolderExplorer.mediaFolders.find((folder) => folder.mediaFolder.blockSystemId === blockSystemId);\r\n\r\n        if (foundFolder) {\r\n            setCurrentFolder(foundFolder.mediaFolder)\r\n        }\r\n    }, [mediaFolderExplorer])\r\n\r\n    const GetSelectedMediaFolderFromQuery = (blockSystemId) => {\r\n        const urlParams = new URLSearchParams(window.location.search);\r\n\r\n        return urlParams.get(blockSystemId) ?? rootfolderId\r\n    }\r\n\r\n    const SetQueryParam = (blockSystemId, folderSystemId) => {\r\n\r\n        let queryParams = new URLSearchParams(window.location.search);\r\n\r\n        queryParams.set(blockSystemId, folderSystemId);\r\n\r\n        history.pushState(null, null, \"?\" + queryParams.toString());\r\n\r\n        setFolderSystemId(folderSystemId);\r\n    }\r\n\r\n    const FormatLineBreaks = (text) => {\r\n        return text.replace(/(?:\\r\\n|\\r|\\n)/g, '<br/>');\r\n    }\r\n\r\n    const BreadCrumbs = () => {\r\n        const GetSeparator = (i) => {\r\n            if (i > 0) {\r\n                return (<> / </>)\r\n            }\r\n        }\r\n\r\n        return (\r\n            <div>\r\n                {currentfolder?.data?.breadCrumbs?.map((folder, i) => {\r\n                    if (currentfolder.data.breadCrumbs.length - 1 === i) {\r\n                        return (<>{GetSeparator(i)}<b key={i}>{folder.name}</b></>);\r\n                    } else {\r\n                        return (<>{GetSeparator(i)}<a key={i} onClick={() => SetQueryParam(blockSystemId, folder.systemId)}>{folder.name}</a></>);\r\n                    }\r\n                })}\r\n            </div>\r\n        )\r\n    }\r\n\r\n    return (\r\n        <div className='desktop-container block-spacing file-explorer-block'>\r\n            <BreadCrumbs />\r\n            <div className='row mt-1'>\r\n                {currentfolder?.data?.childFolders?.map((folder, i) => (\r\n                    <div className='columns small-6 large-3 d-flex flex-column h-100 mt-2' key={i}>\r\n                        <div className='img-wrapper'>\r\n                            <img src=\"/images/folder_icon.png\" onClick={() => SetQueryParam(blockSystemId, folder.systemId)} />\r\n                        </div>\r\n                        <div className='align-self-middle text--center mt-1'>\r\n                            <a className='font-weight-medium' onClick={() => SetQueryParam(blockSystemId, folder.systemId)} dangerouslySetInnerHTML={{__html: FormatLineBreaks(folder.name)}}></a>\r\n                        </div>\r\n                    </div>\r\n                ))}\r\n                {currentfolder?.data?.files?.map((file, i) => ( \r\n                    <div className='columns small-6 large-3 d-flex flex-column h-100 mt-2' key={i}>\r\n                        <a target='_blank' href={file.url} className='img-wrapper'>\r\n                            <GetImageForContentType contentType={file.contentType} />                            \r\n                        </a>\r\n                        <div className='align-self-middle text--center mt-1'>\r\n                            <a target='_blank' href={file.url} className='font-weight-medium link' dangerouslySetInnerHTML={{__html: FormatLineBreaks(file.name)}}></a>    \r\n                        </div>\r\n                    </div>\r\n                ))}\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n\r\nconst GetImageForContentType = ({ contentType }) => {\r\n    switch (contentType) {\r\n        case 'application/pdf':\r\n            return <img src=\"/images/pdf_icon.png\" />; //.pdf\r\n        case 'application/octet-stream':\r\n            return <img src=\"/images/zip_icon.png\" />; //.knxprod\r\n        case 'application/zip':\r\n            return <img src=\"/images/zip_icon.png\" />; //.zip\r\n        case 'application/x-rar-compressed':\r\n            return <img src=\"/images/zip_icon.png\" />; //.rar\r\n        case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':\r\n            return <img src=\"/images/file_icon.png\" />; //.xlsx\r\n        default:\r\n            return <img src=\"/images/pdf-download.png\" />; //.*\r\n    }\r\n}\r\n\r\nexport default MediaFolderExplorer;","import React, { useEffect, useState } from 'react';\r\n\r\nexport const usePopStateQueryHook = () => {\r\n    const [query, setQuery] = useState(window.location.search);\r\n\r\n    const listenToPopstate = () => {\r\n        let winquery = window.location.search;\r\n        \r\n        if (winquery == null || winquery.trim() === \"\")\r\n        {\r\n            winquery = '?';\r\n        }\r\n\r\n        setQuery(winquery);\r\n    };\r\n\r\n    useEffect(() => {\r\n        window.addEventListener(\"popstate\", listenToPopstate);\r\n        return () => {\r\n            window.removeEventListener(\"popstate\", listenToPopstate);\r\n        };\r\n    }, []);\r\n\r\n    return query;\r\n};\r\n"],"sourceRoot":""}