\n
\n \n );\n }\n}\n\nconst style = (primaryColor, customColor) => css`\n background-color: ${colors.white};\n border-bottom: 1px ${colors.midGrey} solid;\n overflow: hidden;\n flex: ${common.topBarHeight + 1}px 0 0;\n\n .scroll-hider {\n // This is added because of x-axes scrolling lagging on IOS 11.3\n -webkit-overflow-scrolling: touch;\n\n overflow-x: auto;\n white-space: nowrap;\n }\n\n svg {\n vertical-align: sub;\n width: 1.25rem;\n height: 1.25rem;\n margin-right: 0.15rem;\n }\n\n div.tab {\n line-height: ${common.topBarHeight - 3}px;\n padding: 0 2rem;\n display: inline-block;\n color: ${colors.darkGrey};\n\n &.active {\n border-bottom: 3px ${primaryColor} solid;\n color: ${primaryColor};\n }\n }\n`;\n\nTabBar.propTypes = {\n /** Numerical value which determines current active tab */\n activeTabIndex: PropTypes.number,\n /** Array which holds tab title */\n tabs: PropTypes.array,\n /** Override component style with this */\n style: PropTypes.object,\n};\n\nconst mapStateToProps = (state) => ({\n primaryColor: state.appConfig.primaryColor,\n});\nexport default connect(mapStateToProps)(TabBar);\n","import React, { Component } from \"react\";\nimport { css } from \"emotion\";\nimport { connect } from \"react-redux\";\nimport { ChevronDownIcon } from \"mdi-react\";\nimport PropTypes from \"prop-types\";\n//Style\nimport common from \"../../style/common\";\nimport colors from \"../../style/colors\";\n\n/** This is a customly styled drop-down list\n *\n * It accepts the following props:\n * @param {*} props - A react style object\n * @param {object} style - A react style object\n * @param {string} className - A class or a list of classes\n * @param {function} onChange - Fires when somthing is is selected\n * @param {string} initText - The placeholder text to appear before something is selected\n * @param {string} placeholder - Can be used instead of initText\n * @param {Object[]} dropDownListContent - an array of elements to show.\n * @param {integer} dropDownListContent[].id - Id of the element to show.\n * @param {string} dropDownListContent[].title - Title of the element to show.\n * @\n * \n * OR\n *\n * [{ value: XX, name: YY}]\n * ```\n * \n * EXAMPLE:\n * \n * ```\n * \n {tabs.map((tab, tabIndex) => (\n this.onClickProxy(tab.onClick, e)}\n key={tabIndex}\n style={{ borderBottomColor: tab.color }}\n >\n {tab.title}\n
\n ))}\n \n this.dropdownChanged(e)}\n name={this.props.name}\n >\n \n {this.props.dropDownListContent &&\n this.props.dropDownListContent.map((item, itemIndex) => (\n \n ))}\n \n
\n );\n }\n}\n\nconst componentStyle = (props) => css`\n display: flex;\n align-items: end;\n\n select option:hidden {\n display: none;\n }\n\n select {\n background: none;\n width: 100%;\n border: 1px solid ${colors.midGrey};\n background: transparent;\n padding-left: 1rem;\n padding-right: 2.5rem;\n display: block;\n height: ${props.height ? props.height : \"40px\"};\n font-size: 1rem;\n font-family: ${common.fontStack};\n appearance: none;\n color: #6e6e6e;\n\n &:focus {\n outline: 0;\n border: 1px solid ${props.primaryColor};\n }\n }\n\n svg {\n margin-left: -40px;\n height: 40px;\n pointer-events: none;\n }\n`;\n\nDropDownList.propTypes = {\n /** object for overriding css styles */\n style: PropTypes.object,\n /** A class or a list of classes used for selecting classes that live inside DropDownList.jsx*/\n className: PropTypes.string,\n /** Function to be executed when an item is selected */\n onChange: PropTypes.func,\n /** The text that appears before anything is selected */\n initText: PropTypes.string,\n /** The elements to be shown in the dropdownlist, look above for required structure on the elements */\n dropDownListContent: PropTypes.array,\n};\n\nconst mapStateToProps = (state) => ({\n primaryColor: state.appConfig.primaryColor,\n});\n\nexport default connect(mapStateToProps)(DropDownList);\n","import React, { useState, useEffect } from \"react\";\nimport { css } from \"emotion\";\nimport ScrollView from \"./ScrollView\";\nimport PropTypes from \"prop-types\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { durations } from \"../../config/animations\";\n\n/** Used in conjunction with tabBar component. This component shows whatever content, that is in the current tab */\nconst TabView = props => {\n const { activeTabIndex, tabs, useScrollView, style } = props;\n const [animationDirection, setAnimationDirection] = useState(\"\");\n const [currActiveTabIndex, setCurrActiveTabIndex] = useState(0);\n const [scrollMap, setScrollMap] = useState({});\n\n useEffect(() => {\n // Set direction\n if (currActiveTabIndex >= activeTabIndex) {\n setAnimationDirection(\"left\");\n } else {\n setAnimationDirection(\"right\");\n }\n\n // Set state variable to actually trigger tab change\n setCurrActiveTabIndex(activeTabIndex);\n\n // Restores scroll-position\n if (scrollMap[activeTabIndex]) {\n // Wait for next frame (div will not be mounted before repaint)\n requestAnimationFrame(() => {\n // Update scroll pos\n document.getElementById(`scroll-view-${activeTabIndex}`).scrollTo(0, scrollMap[activeTabIndex]);\n });\n }\n\n // eslint-disable-next-line\n }, [activeTabIndex]);\n\n // Updates map of stored scroll positions. Consider debouncing this. I saw no perfomance issues though\n function updateScrollMap(index, scrollTop) {\n setScrollMap({\n ...scrollMap,\n [index]: scrollTop\n });\n }\n\n return (\n \n {tabs.map((tab, index) => (\n \n {useScrollView === false ? (\n updateScrollMap(index, e.target.scrollTop)}\n onScrollEnd={() => (props.onScrollEnd ? props.onScrollEnd(index) : null)}\n data-test-id=\"scroll-view\"\n >\n {tab}\n \n )}\n \n ))}\n
\n );\n};\n\nconst componentStyle = tabIndex => css`\n width: 100%;\n height: 100%;\n white-space: nowrap;\n overflow: hidden;\n position: relative;\n\n .tab {\n position: absolute;\n width: 100%;\n height: 100%;\n vertical-align: top;\n }\n .tab-left-enter {\n opacity: 0;\n transform: translateX(-200px);\n }\n .tab-left-enter-active {\n opacity: 1;\n transform: translateX(0px);\n transition: opacity ${durations.normal}ms ease, transform ${durations.normal}ms ease;\n }\n .tab-left-exit {\n opacity: 1;\n transform: translateX(0px);\n }\n .tab-left-exit-active {\n opacity: 0;\n transform: translateX(200px);\n transition: opacity ${durations.normal}ms ease, transform ${durations.normal}ms ease;\n }\n\n .tab-right-enter {\n opacity: 0;\n transform: translateX(200px);\n }\n .tab-right-enter-active {\n opacity: 1;\n transform: translateX(0px);\n transition: opacity ${durations.normal}ms ease, transform ${durations.normal}ms ease;\n }\n .tab-right-exit {\n opacity: 1;\n transform: translateX(0px);\n }\n .tab-right-exit-active {\n opacity: 0;\n transform: translateX(-200px);\n transition: opacity ${durations.normal}ms ease, transform ${durations.normal}ms ease;\n }\n`;\n\nTabView.propTypes = {\n /** Array of all possible tabs */\n tabs: PropTypes.array,\n /** index of current active Tab */\n activeTabIndex: PropTypes.number,\n /** Function to be executed when the user scrolls on the current tab, can be used to enable lazyloading */\n onScroll: PropTypes.func,\n /** Boolean to indicate if the current implementation of tabView uses Scrollview component */\n useScrollView: PropTypes.bool,\n /** Object to override style on tabs */\n tabStyle: PropTypes.object\n};\nexport default TabView;\n","import React from \"react\";\r\nimport { css } from \"emotion\";\r\nimport colors from \"../../style/colors\";\r\nimport PropTypes from \"prop-types\";\r\n\r\n/** used for displaying item as part of a list, usecase could be: users on a highscore, events you can sign up to etc. \r\n * ```\r\n * \n {tab}\n
\n ) : (\n {props.itemNumberLeft}
}\r\n {/* Icon left */}\r\n {props.iconLeft && {props.iconLeft}
}\r\n {/* Image left */}\r\n {props.imageLeft && {props.imageLeft}
}\r\n \r\n
\r\n {props.notificationsRight && \r\n {props.title}\r\n
\r\n\r\n {props.subTitle}\r\n
\r\n{props.notificationsRight}
}\r\n {props.iconRight && {props.iconRight}
}\r\n {props.contentRight && {props.contentRight}
}\r\n \r\n);\r\n\r\nconst componentStyle = (props) => css`\r\n margin-bottom: -1px;\r\n background-color: ${colors.white};\r\n border-top: 1px solid ${colors.midGrey};\r\n border-bottom: 1px solid ${colors.midGrey};\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 1rem 1rem;\r\n color: ${colors.black};\r\n flex-shrink: 0;\r\n\r\n &.enable-max-width {\r\n @media screen and (min-width: ${props.maxWidth}px) {\r\n max-width: ${props.maxWidth}px;\r\n margin-left: auto !important;\r\n margin-right: auto !important;\r\n border: 1px solid ${colors.midGrey};\r\n }\r\n }\r\n\r\n &:active,\r\n &:hover {\r\n ${props.clickable && `background-color: ${colors.ultraLightGrey};`}\r\n ${props.clickable && `cursor: pointer;`}\r\n }\r\n\r\n .icon-left {\r\n margin-right: ${props.imageLeft === false ? \"5px\" : \"0.5rem\"};\r\n margin-left: ${props.imageLeft === false ? \"-5px\" : \"initial\"};\r\n }\r\n .icon-right {\r\n margin-right: 0rem;\r\n }\r\n .icon-left,\r\n .icon-right {\r\n flex-basis: 20px;\r\n flex-shrink: 0;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n .content {\r\n flex: 1 1 100%;\r\n overflow: hidden;\r\n min-width: 0;\r\n padding-right: 0.5rem;\r\n\r\n /* Default option */\r\n &.nowrap {\r\n .title {\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .meta {\r\n color: ${colors.darkGrey};\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n }\r\n\r\n /* Wraps content to new line if it overflows */\r\n &.wrap {\r\n .title {\r\n white-space: initial;\r\n }\r\n\r\n .meta {\r\n color: ${colors.darkGrey};\r\n white-space: initial;\r\n }\r\n }\r\n }\r\n .image-wrapper {\r\n width: 30px;\r\n height: 30px;\r\n border: 1px #ccc solid;\r\n border-radius: 50%;\r\n flex: 0 0 30px;\r\n margin-right: 0.5rem;\r\n }\r\n`;\r\n\r\nListItem.propTypes = {\r\n /** Used for displaying an icon on the left side */\r\n iconLeft: PropTypes.object,\r\n /** Used for displaying an image on the left side */\r\n imageLeft: PropTypes.object,\r\n /** Used for displaying an icon on the right side */\r\n iconRight: PropTypes.object,\r\n /** Used for displaying text-based content on the right side */\r\n contentRight: PropTypes.string,\r\n /** Content main title, for related info, use subtitle Prop */\r\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\r\n /** Descriptive textblock related to title prop */\r\n subTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\r\n /** used for deciding if content should wrap */\r\n wrapContent: PropTypes.bool,\r\n};\r\nexport default ListItem;\r\n","// Side menu\r\nexport const OPEN_SIDE_MENU = \"OPEN_SIDE_MENU\";\r\nexport const CLOSE_SIDE_MENU = \"CLOSE_SIDE_MENU\";\r\n\r\n// Language\r\nexport const GET_LANGUAGE = \"GET_LANGUAGE\";\r\nexport const GET_LANGUAGE_SUCCESS = \"GET_LANGUAGE_SUCCESS\";\r\nexport const GET_LANGUAGE_FAILURE = \"GET_LANGUAGE_FAILURE\";\r\n\r\n// Pages\r\nexport const GET_PAGES = \"GET_PAGES\";\r\nexport const GET_PAGES_SUCCESS = \"GET_PAGES_SUCCESS\";\r\nexport const GET_PAGES_FAILURE = \"GET_PAGES_FAILURE\";\r\nexport const SET_TRANSITION_DIRECTION = \"SET_TRANSITION_DIRECTION\";\r\n\r\n// Paper\r\nexport const DOCUMENTS = {\r\n CANCEL: {\r\n REQUEST: \"CANCEL_DOCUMENTS_PENDING\",\r\n SUCCESS: \"CANCEL_DOCUMENTS_SUCCESS\",\r\n FAILURE: \"CANCEL_DOCUMENTS_FAILURE\",\r\n },\r\n EDIT: {\r\n REQUEST: \"EDIT_DOCUMENTS_PENDING\",\r\n SUCCESS: \"EDIT_DOCUMENTS_SUCCESS\",\r\n FAILURE: \"EDIT_DOCUMENTS_FAILURE\",\r\n },\r\n FETCH: {\r\n REQUEST: \"FETCH_DOCUMENTS_PENDING\",\r\n SUCCESS: \"FETCH_DOCUMENTS_SUCCESS\",\r\n FAILURE: \"FETCH_DOCUMENTS_FAILURE\",\r\n },\r\n RESET: \"RESET_DOCUMENTS\",\r\n SAVE: {\r\n REQUEST: \"SAVE_DOCUMENTS_PENDING\",\r\n SUCCESS: \"SAVE_DOCUMENTS_SUCCESS\",\r\n FAILURE: \"SAVE_DOCUMENTS_FAILURE\",\r\n },\r\n SETVIEW: \"SET_DOCUMENTS_VIEW\",\r\n SETFORM: \"SET_FORM\",\r\n};\r\n\r\nexport const WELDLOGS = {\r\n EDIT: {\r\n REQUEST: \"EDIT_WELDLOGS_PENDING\",\r\n SUCCESS: \"EDIT_WELDLOGS_SUCCESS\",\r\n FAILURE: \"EDIT_WELDLOGS_FAILURE\",\r\n },\r\n FETCH: {\r\n REQUEST: \"FETCH_WELDLOGS_PENDING\",\r\n SUCCESS: \"FETCH_WELDLOGS_SUCCESS\",\r\n FAILURE: \"FETCH_WELDLOGS_FAILURE\",\r\n },\r\n RESET: \"RESET_WELDLOGS\",\r\n SAVE: {\r\n REQUEST: \"SAVE_WELDLOGS_PENDING\",\r\n SUCCESS: \"SAVE_WELDLOGS_SUCCESS\",\r\n FAILURE: \"SAVE_WELDLOGS_FAILURE\",\r\n },\r\n SETFORM: \"SET_FORM\",\r\n SETFORMPROP: \"SET_FORM_PROP\",\r\n};\r\n\r\nexport const USERS = {\r\n FETCH: {\r\n REQUEST: \"FETCH_USERS_PENDING\",\r\n SUCCESS: \"FETCH_USERS_SUCCESS\",\r\n FAILURE: \"FETCH_USERS_FAILURE\",\r\n },\r\n SETUSER: \"SET_USER\",\r\n};\r\n\r\nexport const REDMARKLOGS = {\r\n EDIT: {\r\n REQUEST: \"EDIT_REDMARKLOGS_PENDING\",\r\n SUCCESS: \"EDIT_REDMARKLOGS_SUCCESS\",\r\n FAILURE: \"EDIT_REDMARKLOGS_FAILURE\",\r\n },\r\n FETCH: {\r\n REQUEST: \"FETCH_REDMARKLOGS_PENDING\",\r\n SUCCESS: \"FETCH_REDMARKLOGS_SUCCESS\",\r\n FAILURE: \"FETCH_REDMARKLOGS_FAILURE\",\r\n },\r\n RESET: \"RESET_REDMARKLOGS\",\r\n SAVE: {\r\n REQUEST: \"SAVE_REDMARKLOGS_PENDING\",\r\n SUCCESS: \"SAVE_REDMARKLOGS_SUCCESS\",\r\n FAILURE: \"SAVE_REDMARKLOGS_FAILURE\",\r\n },\r\n SETFORM: \"SET_FORM\",\r\n SETFORMPROP: \"SET_FORM_PROP\",\r\n};\r\n\r\nexport const SET_TOOL = \"SET_TOOL\";\r\n\r\n// Auth\r\nexport const UPDATE_USER_DATA = \"UPDATE_USER_DATA\";\r\nexport const SIGN_IN = \"SIGN_IN\";\r\nexport const SIGN_IN_SUCCESS = \"SIGN_IN_SUCCESS\";\r\nexport const SIGN_IN_FAILURE = \"SIGN_IN_FAILURE\";\r\nexport const AD_SIGN_IN_FAILURE = \"AD_SIGN_IN_FAILURE\";\r\nexport const AD_SIGN_IN_FAILURE_HANDLED = \"AD_SIGN_IN_FAILURE_HANDLED\";\r\nexport const SIGN_IN_FAILURE_HANDLED = \"SIGN_IN_FAILURE_HANDLED\";\r\nexport const SIGN_OUT = \"SIGN_OUT\";\r\nexport const CHECK_TOKEN = \"CHECK_TOKEN\";\r\nexport const CHECK_TOKEN_VALID = \"CHECK_TOKEN_VALID\";\r\nexport const CHECK_TOKEN_INVALID = \"CHECK_TOKEN_INVALID\";\r\nexport const CHECK_TOKEN_SERVICE_UNAVAILABLE = \"CHECK_TOKEN_SERVICE_UNAVAILABLE\";\r\nexport const RENEW_TOKEN = \"RENEW_TOKEN\";\r\nexport const RENEW_TOKEN_SUCCESS = \"RENEW_TOKEN_SUCCESS\";\r\nexport const RENEW_TOKEN_FAILURE = \"RENEW_TOKEN_FAILURE\";\r\nexport const RENEW_PASSWORD_SUCCESS = \"RENEW_PASSWORD_SUCCESS\";\r\nexport const RENEW_PASSWORD_FAILED = \"RENEW_PASSWORD_FAILED\";\r\nexport const RENEW_PASSWORD_HANDLED = \"RENEW_PASSWORD_HANDLED\";\r\n\r\n// App Config\r\nexport const GET_APP_CONFIG = \"GET_APP_CONFIG\";\r\nexport const GET_APP_CONFIG_SUCCESS = \"GET_APP_CONFIG_SUCCESS\";\r\nexport const GET_APP_CONFIG_FAILURE = \"GET_APP_CONFIG_FAILURE\";\r\nexport const SET_APP_LANGUAGE = \"SET_APP_LANGUAGE\";\r\nexport const CLEAR_APP_CONFIG_LOGIN_TYPES = \"CLEAR_APP_CONFIG_LOGIN_TYPES\";\r\n\r\n// UI\r\n// -> Context menu\r\nexport const SHOW_CONTEXT_MENU = \"SHOW_CONTEXT_MENU\";\r\nexport const HIDE_CONTEXT_MENU = \"HIDE_CONTEXT_MENU\";\r\nexport const CLEAR_CONTEXT_MENU_ACTIONS = \"CLEAR_CONTEXT_MENU_ACTIONS\";\r\n\r\n// -> Dialog\r\nexport const SHOW_DIALOG = \"SHOW_DIALOG\";\r\nexport const HIDE_DIALOG = \"HIDE_DIALOG\";\r\nexport const CLEAR_DIALOG = \"CLEAR_DIALOG\";\r\n\r\n// -> Lightbox\r\nexport const SHOW_LIGHT_BOX = \"SHOW_LIGHT_BOX\";\r\nexport const HIDE_LIGHT_BOX = \"HIDE_LIGHT_BOX\";\r\n\r\n// -> Modal page\r\nexport const SHOW_MODAL_PAGE = \"SHOW_MODAL_PAGE\";\r\nexport const UPDATE_MODAL_PAGE_CONTENT = \"UPDATE_MODAL_PAGE_CONTENT\";\r\nexport const HIDE_MODAL_PAGE = \"HIDE_MODAL_PAGE\";\r\nexport const CLEAR_MODAL_PAGE = \"CLEAR_MODAL_PAGE\";\r\n\r\n// -> Tab bar navigation\r\nexport const SET_ACTIVE_TAB = \"SET_ACTIVE_TAB\";\r\n\r\n// -> Work hour modal\r\nexport const TOGGLE_WORK_HOUR_MODAL = \"TOGGLE_WORK_HOUR_MODAL\";\r\n/******************************* SEMCO ****************************/\r\n/* If there are too many of theese find a way to seperate them from the main bundle */\r\nexport const SC_SET_SELECTED_PROJECT = \"SC_SET_SELECTED_PROJECT\";\r\n","import getAppName from \"./get-app-name\";\n\nexport default (state) => {\n try {\n const stateToSave = {\n appConfig: state.appConfig,\n auth: state.auth,\n language: state.language,\n pages: state.pages,\n semcompletion: state.semcompletion,\n users: state.users,\n };\n\n const serializedState = JSON.stringify(stateToSave);\n localStorage.setItem(`${getAppName()}-state`, serializedState);\n } catch (err) {\n // Could not write state to localstorage\n }\n};\n","import { createStore, applyMiddleware } from \"redux\";\r\nimport { composeWithDevTools } from \"redux-devtools-extension\";\r\n\r\nimport loadStateFromLocalStorage from \"./utilities/load-state-from-local-storage\";\r\nimport saveStateToLocalStorage from \"./utilities/save-state-to-local-storage\";\r\nimport thunk from \"redux-thunk\";\r\nimport rootReducer from \"./reducers\"; // reducers/index.js\r\n\r\n// Load initial state\r\nconst initialState = loadStateFromLocalStorage();\r\n\r\n// Register middleware\r\nconst middleware = [thunk];\r\n\r\n// Create store\r\nconst store = createStore(rootReducer, initialState, composeWithDevTools(applyMiddleware(...middleware)));\r\n\r\n// Save state to ls after 2s of redux-inactivity\r\nlet timeout;\r\nstore.subscribe(() => {\r\n clearTimeout(timeout);\r\n timeout = setTimeout(() => {\r\n saveStateToLocalStorage({ ...store.getState() });\r\n }, 2000);\r\n});\r\n\r\nexport default store;\r\n","import {\r\n SIGN_IN,\r\n SIGN_IN_SUCCESS,\r\n SIGN_IN_FAILURE,\r\n SIGN_IN_FAILURE_HANDLED,\r\n AD_SIGN_IN_FAILURE,\r\n SIGN_OUT,\r\n CHECK_TOKEN,\r\n CHECK_TOKEN_VALID,\r\n CHECK_TOKEN_INVALID,\r\n CHECK_TOKEN_SERVICE_UNAVAILABLE,\r\n RENEW_TOKEN_SUCCESS,\r\n RENEW_TOKEN_FAILURE,\r\n UPDATE_USER_DATA,\r\n RENEW_PASSWORD_FAILED,\r\n RENEW_PASSWORD_SUCCESS,\r\n RENEW_PASSWORD_HANDLED,\r\n AD_SIGN_IN_FAILURE_HANDLED\r\n} from \"../actions/actionTypes\";\r\n\r\nconst initialState = {\r\n renewPasswordSuccess: false,\r\n renewPasswordError: false,\r\n signingIn: false,\r\n signInError: false,\r\n adLoginFailed: false,\r\n isAuthenticated: false,\r\n checkingToken: false,\r\n user: {},\r\n token: null\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n switch (action.type) {\r\n case UPDATE_USER_DATA:\r\n return {\r\n ...state,\r\n user: action.payload\r\n };\r\n\r\n case SIGN_IN:\r\n return {\r\n ...state,\r\n signingIn: true\r\n };\r\n\r\n case SIGN_IN_SUCCESS:\r\n return {\r\n ...state,\r\n signingIn: false,\r\n signInError: false,\r\n isAuthenticated: true,\r\n token: action.payload.token,\r\n user: action.payload.user\r\n };\r\n\r\n case SIGN_IN_FAILURE:\r\n return {\r\n ...state,\r\n signingIn: false,\r\n signInError: true,\r\n isAuthenticated: false,\r\n token: null,\r\n user: {}\r\n };\r\n\r\n case SIGN_IN_FAILURE_HANDLED:\r\n return {\r\n ...state,\r\n signInError: false\r\n };\r\n\r\n case AD_SIGN_IN_FAILURE:\r\n return {\r\n ...state,\r\n adLoginFailed: true\r\n };\r\n\r\n case AD_SIGN_IN_FAILURE_HANDLED:\r\n return {\r\n ...state,\r\n adLoginFailed: false\r\n };\r\n\r\n case SIGN_OUT:\r\n return {\r\n ...state,\r\n signingIn: false,\r\n signInError: false,\r\n isAuthenticated: false,\r\n token: null,\r\n user: {}\r\n };\r\n\r\n case CHECK_TOKEN:\r\n return {\r\n ...state,\r\n checkingToken: true\r\n };\r\n\r\n case CHECK_TOKEN_VALID:\r\n return {\r\n ...state,\r\n isAuthenticated: true,\r\n checkingToken: false\r\n };\r\n\r\n case CHECK_TOKEN_INVALID:\r\n return {\r\n ...state,\r\n signingIn: false, // Prevent eternal spinner-bug\r\n isAuthenticated: false,\r\n token: null,\r\n checkingToken: false\r\n };\r\n\r\n case CHECK_TOKEN_SERVICE_UNAVAILABLE:\r\n return {\r\n ...state,\r\n signingIn: false, // Prevent eternal spinner-bug\r\n checkingToken: false\r\n };\r\n\r\n case RENEW_TOKEN_SUCCESS:\r\n return {\r\n ...state,\r\n token: action.payload.token, // Token\r\n user: action.payload.user // Token\r\n };\r\n\r\n case RENEW_TOKEN_FAILURE:\r\n return {\r\n ...state,\r\n isAuthenticated: false,\r\n token: null,\r\n user: {}\r\n };\r\n\r\n case RENEW_PASSWORD_FAILED:\r\n return {\r\n ...state,\r\n renewPasswordError: true\r\n };\r\n\r\n case RENEW_PASSWORD_SUCCESS:\r\n return {\r\n ...state,\r\n renewPasswordSuccess: true\r\n };\r\n\r\n case RENEW_PASSWORD_HANDLED:\r\n return {\r\n ...state,\r\n renewPasswordError: false,\r\n renewPasswordSuccess: false\r\n };\r\n\r\n default:\r\n return state;\r\n }\r\n}\r\n","import {\r\n GET_APP_CONFIG,\r\n GET_APP_CONFIG_SUCCESS,\r\n GET_APP_CONFIG_FAILURE,\r\n SET_APP_LANGUAGE,\r\n CLEAR_APP_CONFIG_LOGIN_TYPES,\r\n} from \"../actions/actionTypes\";\r\n\r\nconst initialState = {\r\n loading: false,\r\n error: false,\r\n appId: null,\r\n title: \"\",\r\n primaryColor: \"\",\r\n apiUrl: \"\",\r\n icon: {\r\n baseURL: \"\",\r\n image: \"\",\r\n },\r\n frontPageImage: {\r\n baseURL: \"\",\r\n image: \"\",\r\n },\r\n customerLogo: {\r\n baseURL: \"\",\r\n image: \"\",\r\n },\r\n allowedLoginTypes: [],\r\n enableHighscore: false,\r\n language: \"en\",\r\n};\r\n\r\nexport default function (state = initialState, action) {\r\n switch (action.type) {\r\n case GET_APP_CONFIG:\r\n return {\r\n ...state,\r\n loading: true,\r\n };\r\n\r\n case GET_APP_CONFIG_SUCCESS:\r\n return {\r\n ...state,\r\n loading: false,\r\n appId: action.payload.appId,\r\n title: action.payload.title,\r\n primaryColor: action.payload.primaryColor,\r\n apiUrl: action.payload.apiUrl,\r\n icon: action.payload.icon,\r\n frontPageImage: action.payload.frontPageImage,\r\n customerLogo: action.payload.customerLogo,\r\n allowedLoginTypes: action.payload.allowedLoginTypes,\r\n enableHighscore: action.payload.enableHighscore,\r\n };\r\n\r\n case GET_APP_CONFIG_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: true,\r\n };\r\n\r\n case SET_APP_LANGUAGE:\r\n return {\r\n ...state,\r\n language: action.payload,\r\n };\r\n\r\n case CLEAR_APP_CONFIG_LOGIN_TYPES:\r\n return {\r\n ...state,\r\n allowedLoginTypes: [],\r\n };\r\n\r\n default:\r\n return state;\r\n }\r\n}\r\n","import {\r\n GET_LANGUAGE,\r\n GET_LANGUAGE_SUCCESS,\r\n GET_LANGUAGE_FAILURE,\r\n} from \"../actions/actionTypes\"\r\n\r\nconst initialState = {\r\n language: {},\r\n loading: true,\r\n error: false\r\n};\r\n\r\nexport default function (state = initialState, action) {\r\n switch (action.type) {\r\n\r\n case GET_LANGUAGE:\r\n return {\r\n ...state,\r\n loading: true,\r\n error: false\r\n };\r\n\r\n case GET_LANGUAGE_SUCCESS:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: false,\r\n language: action.payload\r\n };\r\n\r\n case GET_LANGUAGE_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: true\r\n };\r\n\r\n\r\n default:\r\n return state\r\n }\r\n}","import { GET_PAGES, SET_TRANSITION_DIRECTION, GET_PAGES_FAILURE, GET_PAGES_SUCCESS } from \"../actions/actionTypes\";\r\n\r\nconst initialState = {\r\n pages: [],\r\n loading: true,\r\n error: false,\r\n transitionDirection: \"\"\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n switch (action.type) {\r\n case GET_PAGES:\r\n return {\r\n ...state,\r\n loading: true,\r\n error: false\r\n };\r\n\r\n case GET_PAGES_FAILURE:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: true\r\n };\r\n\r\n case GET_PAGES_SUCCESS:\r\n return {\r\n ...state,\r\n loading: false,\r\n error: false,\r\n pages: action.payload\r\n };\r\n\r\n case SET_TRANSITION_DIRECTION:\r\n return {\r\n ...state,\r\n transitionDirection: action.payload\r\n };\r\n\r\n default:\r\n return state;\r\n }\r\n}\r\n","import { DOCUMENTS, SET_TOOL } from \"../actions/actionTypes\";\n\nconst INITIAL_STATE = {\n action: null,\n activeTool: null,\n editing: false,\n error: null,\n formLoading: false,\n imageHeight: \"\",\n imageURL: \"\",\n imageWidth: \"\",\n loading: true,\n svg: null,\n svgJSON: null,\n type: null,\n view: null,\n};\n\nexport default function (state = INITIAL_STATE, action) {\n const { payload, type } = action;\n\n switch (type) {\n case DOCUMENTS.RESET:\n return { ...state, ...INITIAL_STATE };\n case DOCUMENTS.SETVIEW:\n return { ...state, view: payload };\n\n case DOCUMENTS.FETCH.REQUEST:\n return {\n ...state,\n imageHeight: \"\",\n imageURL: \"\",\n imageWidth: \"\",\n loading: true,\n error: null,\n svg: null,\n svgJSON: null,\n };\n case DOCUMENTS.FETCH.SUCCESS:\n return { ...state, ...payload, error: null, loading: false };\n case DOCUMENTS.FETCH.FAILURE:\n return { ...state, error: payload, loading: false };\n\n case DOCUMENTS.CANCEL.REQUEST:\n return { ...state, action: \"cancel\", formLoading: true, error: null };\n case DOCUMENTS.CANCEL.SUCCESS:\n return { ...state, ...payload, action: null, editing: false, error: null, formLoading: false, type: null };\n case DOCUMENTS.CANCEL.FAILURE:\n return { ...state, action: null, error: payload, formLoading: false };\n\n case DOCUMENTS.EDIT.REQUEST:\n return { ...state, action: \"edit\", formLoading: true, error: null, type: payload };\n case DOCUMENTS.EDIT.SUCCESS:\n return { ...state, action: null, editing: true, error: null, formLoading: false };\n case DOCUMENTS.EDIT.FAILURE:\n return { ...state, action: null, error: payload, formLoading: false };\n\n case DOCUMENTS.SAVE.REQUEST:\n return { ...state, action: \"save\", formLoading: true, error: null };\n case DOCUMENTS.SAVE.SUCCESS:\n return { ...state, action: null, editing: false, error: null, formLoading: false, type: null };\n case DOCUMENTS.SAVE.FAILURE:\n return { ...state, action: null, error: payload, formLoading: false };\n\n case SET_TOOL:\n return { ...state, activeTool: payload };\n\n default:\n return state;\n }\n}\n","import {\r\n OPEN_SIDE_MENU,\r\n CLOSE_SIDE_MENU\r\n} from \"../actions/actionTypes\"\r\n\r\nconst initialState = {\r\n active: false\r\n}\r\n\r\nexport default function (state = initialState, action) {\r\n switch (action.type) {\r\n\r\n case OPEN_SIDE_MENU:\r\n return {\r\n ...state,\r\n active: true\r\n }\r\n\r\n case CLOSE_SIDE_MENU:\r\n return {\r\n ...state,\r\n active: false\r\n }\r\n\r\n default:\r\n return state\r\n }\r\n}","import { WELDLOGS } from \"../actions/actionTypes\";\n\nconst INITIAL_STATE = {\n data: [],\n end: false,\n error: null,\n form: null,\n formLoading: false,\n limit: 10,\n loading: false,\n offset: 0,\n};\n\nexport default (state = INITIAL_STATE, action) => {\n const { payload, type } = action;\n\n switch (type) {\n case WELDLOGS.SETFORM:\n return { ...state, form: payload };\n case WELDLOGS.SETFORMPROP:\n return { ...state, form: { ...state.form, [payload.key]: payload.value } };\n\n case WELDLOGS.FETCH.REQUEST:\n return { ...state, ...payload, loading: true };\n case WELDLOGS.FETCH.SUCCESS:\n if (payload.id) return { ...state, form: payload.data, error: null, loading: false };\n\n return {\n ...state,\n data: [...state.data, ...payload.data],\n end: payload.end,\n error: null,\n loading: false,\n offset: state.offset + 10,\n };\n case WELDLOGS.FETCH.FAILURE:\n return { ...state, error: payload, loading: false };\n\n case WELDLOGS.EDIT.REQUEST:\n return { ...state, formLoading: true, error: null };\n case WELDLOGS.EDIT.SUCCESS:\n return {\n ...state,\n data: payload.id ? [...state.data] : [payload.data, ...state.data],\n error: null,\n formLoading: false,\n form: payload.data,\n };\n case WELDLOGS.EDIT.FAILURE:\n return { ...state, error: payload, formLoading: false };\n\n case WELDLOGS.SAVE.REQUEST:\n return { ...state, formLoading: true, error: null };\n case WELDLOGS.SAVE.SUCCESS:\n return {\n ...state,\n data: state.data.map((d) => (d.id.toUpperCase() === payload.id.toUpperCase() ? payload : d)),\n error: null,\n form: null,\n formLoading: false,\n };\n case WELDLOGS.SAVE.FAILURE:\n return { ...state, action: null, error: payload, formLoading: false };\n\n case WELDLOGS.RESET:\n return { ...state, data: [], end: false, form: null };\n\n default:\n return state;\n }\n};\n","import { REDMARKLOGS } from \"../actions/actionTypes\";\n\nconst INITIAL_STATE = {\n data: [],\n end: false,\n error: null,\n form: null,\n formLoading: false,\n limit: 10,\n loading: false,\n offset: 0,\n};\n\nexport default (state = INITIAL_STATE, action) => {\n const { payload, type } = action;\n\n switch (type) {\n case REDMARKLOGS.SETFORM:\n return { ...state, form: payload };\n case REDMARKLOGS.SETFORMPROP:\n return { ...state, form: { ...state.form, [payload.key]: payload.value } };\n\n case REDMARKLOGS.FETCH.REQUEST:\n return { ...state, ...payload, loading: true };\n case REDMARKLOGS.FETCH.SUCCESS:\n if (payload.id) return { ...state, form: payload.data, error: null, loading: false };\n return { ...state, data: [...state.data, ...payload.data], end: payload.end, error: null, loading: false };\n case REDMARKLOGS.FETCH.FAILURE:\n return { ...state, error: payload, loading: false };\n\n case REDMARKLOGS.EDIT.REQUEST:\n return { ...state, formLoading: true, error: null };\n case REDMARKLOGS.EDIT.SUCCESS:\n return {\n ...state,\n data: payload.id ? [...state.data] : [payload.data, ...state.data],\n error: null,\n formLoading: false,\n form: payload.data,\n };\n case REDMARKLOGS.EDIT.FAILURE:\n return { ...state, error: payload, formLoading: false };\n\n case REDMARKLOGS.SAVE.REQUEST:\n return { ...state, formLoading: true, error: null };\n case REDMARKLOGS.SAVE.SUCCESS:\n return {\n ...state,\n data: state.data.map((d) => (d.id.toUpperCase() === payload.id.toUpperCase() ? payload : d)),\n error: null,\n form: null,\n formLoading: false,\n };\n case REDMARKLOGS.SAVE.FAILURE:\n return { ...state, action: null, error: payload, formLoading: false };\n\n case REDMARKLOGS.RESET:\n return { ...state, data: [], end: false, form: null };\n\n default:\n return state;\n }\n};\n","import {\r\n SHOW_CONTEXT_MENU,\r\n HIDE_CONTEXT_MENU,\r\n SHOW_DIALOG,\r\n HIDE_DIALOG,\r\n SHOW_MODAL_PAGE,\r\n UPDATE_MODAL_PAGE_CONTENT,\r\n HIDE_MODAL_PAGE,\r\n SHOW_LIGHT_BOX,\r\n HIDE_LIGHT_BOX,\r\n CLEAR_CONTEXT_MENU_ACTIONS,\r\n CLEAR_MODAL_PAGE,\r\n CLEAR_DIALOG,\r\n TOGGLE_WORK_HOUR_MODAL,\r\n} from \"../actions/actionTypes\";\r\n\r\nconst initialState = {\r\n contextMenu: {\r\n active: false,\r\n actions: [],\r\n defaultActionTitle: undefined,\r\n closeOnActionCallback: true,\r\n },\r\n Lightbox: {\r\n active: false,\r\n images: [],\r\n },\r\n modalPage: {\r\n active: false,\r\n title: null,\r\n content: null,\r\n closeCallback: null,\r\n actionRight: null,\r\n },\r\n dialog: {\r\n active: false,\r\n actions: [],\r\n title: null,\r\n content: null,\r\n icon: null,\r\n primaryActionTitle: null,\r\n secondaryActionTitle: null,\r\n primaryAction: null,\r\n styleType: null,\r\n disableSecondaryAction: false,\r\n },\r\n workHourModal: false,\r\n};\r\n\r\nexport default function (state = initialState, action) {\r\n switch (action.type) {\r\n // Context menu\r\n case SHOW_CONTEXT_MENU:\r\n // Let you dispatch actions as an array if no options are needed\r\n if (Array.isArray(action.payload)) {\r\n action.payload.actions = action.payload;\r\n }\r\n\r\n return {\r\n ...state,\r\n contextMenu: {\r\n active: true,\r\n actions: action.payload.actions,\r\n closeOnActionCallback: action.payload.closeOnActionCallback,\r\n defaultActionTitle: action.payload.defaultActionTitle || undefined,\r\n },\r\n };\r\n\r\n case HIDE_CONTEXT_MENU:\r\n return {\r\n ...state,\r\n contextMenu: {\r\n ...state.contextMenu,\r\n active: false,\r\n },\r\n };\r\n\r\n case CLEAR_CONTEXT_MENU_ACTIONS:\r\n return {\r\n ...state,\r\n contextMenu: {\r\n ...state.contextMenu,\r\n actions: [],\r\n },\r\n };\r\n\r\n // Lightbox\r\n case SHOW_LIGHT_BOX:\r\n return {\r\n ...state,\r\n Lightbox: {\r\n active: true,\r\n images: action.payload.images,\r\n },\r\n };\r\n\r\n case HIDE_LIGHT_BOX:\r\n return {\r\n ...state,\r\n Lightbox: {\r\n ...state.Lightbox,\r\n active: false,\r\n },\r\n };\r\n\r\n // Modal page\r\n case SHOW_MODAL_PAGE:\r\n return {\r\n ...state,\r\n modalPage: {\r\n active: true,\r\n title: action.payload.title,\r\n actionRight: action.payload.actionRight,\r\n content: action.payload.content,\r\n closeCallback: action.payload.closeCallback,\r\n },\r\n };\r\n\r\n case UPDATE_MODAL_PAGE_CONTENT:\r\n return {\r\n ...state,\r\n modalPage: {\r\n ...state.modalPage,\r\n ...action.payload,\r\n },\r\n };\r\n\r\n case HIDE_MODAL_PAGE:\r\n return {\r\n ...state,\r\n modalPage: {\r\n ...state.modalPage,\r\n active: false,\r\n },\r\n };\r\n\r\n case CLEAR_MODAL_PAGE:\r\n return {\r\n ...state,\r\n modalPage: {\r\n active: false,\r\n actionRight: null,\r\n title: null,\r\n closeCallback: null,\r\n content: null,\r\n },\r\n };\r\n\r\n // Dialog\r\n case SHOW_DIALOG:\r\n return {\r\n ...state,\r\n dialog: {\r\n active: true,\r\n ...action.payload,\r\n },\r\n };\r\n case HIDE_DIALOG:\r\n return {\r\n ...state,\r\n dialog: {\r\n ...state.dialog,\r\n active: false,\r\n },\r\n };\r\n case CLEAR_DIALOG:\r\n return {\r\n ...state,\r\n dialog: {\r\n active: false,\r\n actions: [],\r\n title: null,\r\n content: null,\r\n icon: null,\r\n primaryActionTitle: null,\r\n secondaryActionTitle: null,\r\n primaryAction: null,\r\n styleType: null,\r\n disableSecondaryAction: false,\r\n },\r\n };\r\n\r\n case TOGGLE_WORK_HOUR_MODAL:\r\n return {\r\n ...state,\r\n workHourModal: action.payload,\r\n };\r\n default:\r\n return state;\r\n }\r\n}\r\n","import { USERS } from \"../actions/actionTypes\";\n\nconst initialState = {\n loading: false,\n lists: [],\n selectedUser: null,\n};\n\nexport default (state = initialState, action) => {\n const { payload, type } = action;\n\n switch (type) {\n case USERS.FETCH.REQUEST:\n return { ...state, loading: true };\n case USERS.FETCH.SUCCESS:\n return { ...state, lists: payload, loading: false };\n case USERS.FETCH.FAILURE:\n return { ...state, loading: false };\n case USERS.SETUSER:\n return { ...state, selectedUser: payload };\n default:\n return state;\n }\n};\n","import { SC_SET_SELECTED_PROJECT } from \"../actions/actionTypes\";\n\nconst initialState = {\n selectedProject: {\n id: \"\",\n number: \"\",\n description: \"\",\n projectType: \"\",\n },\n};\n\nexport default function (state = initialState, action) {\n switch (action.type) {\n case SC_SET_SELECTED_PROJECT:\n return {\n ...state,\n selectedProject: {\n ...state.selectedProject,\n id: action.payload.id,\n number: action.payload.number,\n description: action.payload.description,\n projectType: action.payload.projectType,\n },\n };\n\n default:\n return state;\n }\n}\n","import { combineReducers } from \"redux\";\r\n\r\n// Reducers\r\nimport authReducer from \"./authReducer\";\r\nimport appConfigReducer from \"./appConfigReducer\";\r\nimport languageReducer from \"./languageReducer\";\r\nimport pagesReducer from \"./pagesReducer\";\r\nimport paper from \"./paperReducer\";\r\nimport sideMenuReducer from \"./sideMenuReducer\";\r\nimport weldLogReducer from \"./weldLogReducer\";\r\nimport redmarkLogReducer from \"./redmarkLogReducer\";\r\nimport uiReducer from \"./uiReducer\";\r\nimport userReducer from \"./userReducer\";\r\n\r\n// Semco\r\nimport semcompletionReducer from \"./semcompletionReducer\";\r\n\r\nexport default combineReducers({\r\n appConfig: appConfigReducer,\r\n auth: authReducer,\r\n language: languageReducer,\r\n pages: pagesReducer,\r\n paper,\r\n sideMenu: sideMenuReducer,\r\n ui: uiReducer,\r\n weldLog: weldLogReducer,\r\n redmarkLog: redmarkLogReducer,\r\n semcompletion: semcompletionReducer,\r\n users: userReducer,\r\n});\r\n","import getAppName from \"./get-app-name\";\n\nexport default () => {\n try {\n const serializedState = localStorage.getItem(`${getAppName()}-state`);\n if (!serializedState) return undefined;\n return JSON.parse(serializedState);\n } catch (err) {\n return undefined;\n }\n};\n","import {\r\n createBrowserHistory\r\n} from 'history'\r\nexport default createBrowserHistory()","import React from \"react\";\nimport { css } from \"emotion\";\nimport colors from \"../../style/colors\";\nimport { connect } from \"react-redux\";\nimport PropTypes from \"prop-types\";\n/** Component used for displaying an ongoing, unfinished action. It shows a contious spinner all the time,\n * so you need to have condition that handles this, otherwise, the spinner just confuses the user */\nconst Spinner = props => (\n \n \n {props.title &&
\n);\n\nconst style = props => css`\n .spinner {\n width: ${props.size || 38}px;\n height: ${props.size || 38}px;\n border-radius: 50%;\n border: 3px solid #000;\n border-color: ${props.color || props.primaryColor} ${props.color || props.primaryColor}\n ${props.color || props.primaryColor} rgba(0, 0, 0, 0);\n margin: 0 auto 0.5rem auto;\n animation: spin 0.7s infinite linear;\n }\n text-align: center;\n p.meta {\n color: ${colors.darkGrey};\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n`;\n\nconst mapStateToProps = state => ({\n primaryColor: state.appConfig.primaryColor\n});\n\nSpinner.propTypes = {\n /** Used for overiding primaryColor, in case you need a spinner in a different color than primaryColor */\n color: PropTypes.string,\n /** The applications primary color */\n primaryColor: PropTypes.string\n};\nexport default connect(mapStateToProps)(Spinner);\n","import React from \"react\";\r\nimport { durations } from \"../config/animations\";\r\n\r\nimport {\r\n SHOW_CONTEXT_MENU,\r\n HIDE_CONTEXT_MENU,\r\n SHOW_DIALOG,\r\n HIDE_DIALOG,\r\n CLEAR_DIALOG,\r\n SHOW_LIGHT_BOX,\r\n HIDE_LIGHT_BOX,\r\n SHOW_MODAL_PAGE,\r\n UPDATE_MODAL_PAGE_CONTENT,\r\n HIDE_MODAL_PAGE,\r\n CLEAR_CONTEXT_MENU_ACTIONS,\r\n CLEAR_MODAL_PAGE,\r\n TOGGLE_WORK_HOUR_MODAL,\r\n} from \"./actionTypes\";\r\n\r\n// Context menu\r\nexport function showContextMenu(payload) {\r\n return {\r\n type: SHOW_CONTEXT_MENU,\r\n payload,\r\n };\r\n}\r\nexport function hideContextMenu() {\r\n return function (dispatch, getState) {\r\n dispatch({\r\n type: HIDE_CONTEXT_MENU,\r\n });\r\n\r\n setTimeout(\r\n () =>\r\n dispatch({\r\n type: CLEAR_CONTEXT_MENU_ACTIONS,\r\n }),\r\n durations.normal\r\n );\r\n };\r\n}\r\n\r\n/** Creates a new dialog\r\n * @param {Object} dialog\r\n * @param {String} dialog.title\r\n * @param {ReactElement|String|Function} dialog.content\r\n * @param {ReactElement} dialog.icon\r\n * @param {String} dialog.primaryActionTitle\r\n * @param {Function} dialog.primaryAction\r\n * @param {String} dialog.secondaryActionTitle\r\n * @param {Function} dialog.secondaryAction\r\n * @param {Boolean} dialog.disableSecondaryOption\r\n */\r\nexport function showDialog(dialog) {\r\n return {\r\n type: SHOW_DIALOG,\r\n payload: dialog,\r\n };\r\n}\r\nexport function hideDialog() {\r\n return function (dispatch, getState) {\r\n dispatch({\r\n type: HIDE_DIALOG,\r\n });\r\n\r\n setTimeout(\r\n () =>\r\n dispatch({\r\n type: CLEAR_DIALOG,\r\n }),\r\n durations.normal\r\n );\r\n };\r\n}\r\n\r\n// Lightbox\r\nexport function showLightBox(payload) {\r\n return {\r\n type: SHOW_LIGHT_BOX,\r\n payload: payload,\r\n };\r\n}\r\n\r\nexport function hideLightBox(payload) {\r\n return {\r\n type: HIDE_LIGHT_BOX,\r\n };\r\n}\r\n\r\n// Modal page\r\nexport function showModalPage(payload) {\r\n return {\r\n type: SHOW_MODAL_PAGE,\r\n payload: payload,\r\n };\r\n}\r\n\r\n/**\r\n * @param {Object} payload\r\n * @param {Boolean} payload.active - Displays a spinner instead of action right\r\n * @param {String} payload.title - The title that is displayed in the TopBar\r\n * @param {ReactComponent} payload.content - The content in the ModalPage (For scrollable contant, wrap it in a ScrollView)\r\n * @param {function} payload.closeCallback - Function which is invoked before closing the modalpage. If the function is specified\r\n * the modalPage will not close itself. You'll have to manually import the hideModalPage action and call it. This feature is\r\n * usefull for prompting users before exiting a form with unsaved changes.\r\n * actionRight: null\r\n * @param {ReactComponent} payload.actionRight - The component that handles the primary modalPage action\r\n * `{props.title}
}\nClick Me
\n {allowedAmountOfImages > files.filter((f) => f.status === \"uploading\" || f.status === \"uploaded\").length && (\n \n )}\n\n {/* Image preview in post-like carousel */}\n {!disablePreview && files.filter((f) => f.status === \"uploading\" || f.status === \"uploaded\").length > 0 && (\n
\n );\n }\n}\n\nconst previewHeight = 150;\nconst componentHeight = 40;\n\nconst componentStyle = (primaryColor, boxPadding) => css`\n font-size: 1rem;\n color: ${colors.black};\n\n /* Upload button/Input */\n label {\n display: flex !important;\n align-items: center;\n height: ${componentHeight}px;\n background: ${colors.white};\n border: 1px ${colors.midGrey} solid;\n color: ${colors.black};\n font-family: ${common.fontStack};\n margin-bottom: ${boxPadding};\n border-radius: 3px;\n\n svg {\n position: relative;\n width: ${componentHeight}px;\n height: ${componentHeight}px;\n margin-right: 0.45rem;\n padding: 0.45rem;\n color: ${colors.darkGrey};\n border-right: 1px solid ${colors.midGrey};\n }\n }\n\n input[type=\"file\"] {\n display: none;\n }\n\n .image-preview-container {\n height: ${previewHeight}px;\n overflow: hidden;\n margin: 0 -${boxPadding};\n\n .scroll-hider {\n padding: 0 ${boxPadding};\n height: ${previewHeight + 50}px;\n white-space: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n .image-preview {\n width: 150px;\n white-space: initial;\n position: relative;\n vertical-align: top;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n height: 150px;\n min-width: 150px;\n max-width: 80vw;\n border: 1px ${colors.midGrey} solid;\n border-radius: 3px;\n margin-right: 0.5rem;\n\n img {\n width: 150%;\n }\n\n &:last-child {\n margin-right: 0;\n }\n\n /* Delete icon */\n svg {\n position: absolute;\n top: 0;\n right: 0;\n width: 2rem;\n height: 2rem;\n padding: 0.25rem;\n border-bottom-left-radius: 4px;\n color: ${colors.darkGrey};\n border: 1px solid ${colors.midGrey};\n background-color: ${colors.white};\n }\n }\n }\n /* Progress bar */\n .progress-bar-container {\n position: absolute;\n bottom: 0px;\n left: 0;\n width: 100%;\n height: 3px;\n display: flex;\n justify-content: space-between;\n\n .progress-bar {\n height: 3px;\n }\n\n .progress-bar.colored {\n background-color: ${primaryColor};\n }\n }\n`;\nconst mapStateToProps = (state) => ({\n primaryColor: state.appConfig.primaryColor,\n});\n\nexport default connect(mapStateToProps, null)(ImageUploadMultiple);\n","import React from 'react';\nimport { List, Tag, Typography } from 'antd';\n\nimport moment from 'moment';\n\nconst TimesheetListItem = props => {\n\tconst { employeeView = false, sheets = [], setSelectedTimesheet, setToggleModal } = props;\n\n\treturn (\n\t\t\n
\n )}\n \n {files.map((image, index) => {\n if (image.status === \"uploading\") {\n return (\n
\n \n
\n );\n }\n if (image.status === \"uploaded\") {\n return (\n \n \n \n
\n \n 
\n this.deleteFile(index)} />\n
\n );\n }\n return null;\n })}\n \n {row.map((column) => {\n const { disabled = false } = column;\n return (\n
\n ))}\n\n \n \n {column.type === \"dropdown\" && (\n ({ label: d.name, value: d.id })) : []}\n placeholder=\"Click to choose\"\n value={formData[column.id]}\n />\n )}\n {column.type === \"text\" && (\n
\n );\n })}\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n {\n setFormData({ ...formData, images: files });\n }}\n />\n
\n \n
\n \n \n
\n \n
\n \n {\n if (!project) {\n notification.error({\n duration: 7,\n message: \"FAILED\",\n description: `There's no selected Project, please select from the main menu`,\n });\n } else {\n savePunch();\n }\n }}\n >\n {formLoading &&
\n \n\t\t\t\t onCancelTimesheetRequest(id)}\n\t\t\t\t\tokText=\"Yes\"\n\t\t\t\t\tcancelText=\"No\">\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t setToggleSignaturePadModal(true)}\n\t\t\t\t\tkey=\"draft\"\n\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\tstyle={{ margin: '5px' }}>\n\t\t\t\t\t{`${draftSignedTimesheet ? 'Edit' : 'Add'} Signature`}\n\t\t\t\t\n\t\t\t\t{draftSignedTimesheet && (\n\t\t\t\t\t onApproveTimesheet(id)}\n\t\t\t\t\t\tkey=\"save\"\n\t\t\t\t\t\tstyle={{ margin: '5px' }}\n\t\t\t\t\t\ttype=\"primary\">\n\t\t\t\t\t\tApprove Timesheet\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t
\n\t\t);\n\n\tif (status !== 'Pending') {\n\t\tconst updateTimeStamp = status === 'Signed' ? signedDate : canceledDate;\n\n\t\tfooterButtons.unshift(\n\t\t\t{`${status} on ${moment(updateTimeStamp, 'YYYYMMDDHHmmss').format(\n\t\t\t\t'DD-MM-YYYY HH:mm'\n\t\t\t)} by ${updatedBy} ${canceledBySemsupport ? ' (Record Corrected)' : ''}`}
\n\t\t);\n\t}\n\n\tconst handleClose = () => {\n\t\tif (!draftSignedTimesheet) return setToggleModal(false);\n\n\t\tif (draftSignedTimesheet) {\n\t\t\tModal.confirm({\n\t\t\t\ttitle: 'Signature will be lost, are you sure to cancel?',\n\t\t\t\tonOk: () => {\n\t\t\t\t\tsetDraftSignedTimesheet(null);\n\t\t\t\t\tsetToggleModal(false);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t};\n\n\treturn (\n\t\t\n\t\t\t\t
\n\t\t\n\t);\n};\n\nexport default TimesheetRenderModal;\n","export default {\r\n topBarHeight: 50,\r\n boxShadowSubtle: \"0 2px 6px rgba(0, 0, 0, 0.1)\",\r\n fontStack: \"'Open Sans', sans-serif\"\r\n};\r\n","import { format, parse } from \"date-fns\";\n\n/* PARSE DATES */\n\nexport function parseDatetime(datetimeString) {\n /**\n * Expects a string-formatted timestamp and returns a human-friendly date\n * --------------\n * @parameter dateTimeString [string] a datetime string in the format of YYYYMMDDHHmm (201812302230)\n * @returns [string] formatted string 201812302230 -> 30/12-2018 22:30\n */\n\n return format(parse(datetimeString, \"yyyyMMddHHmm\", 0), \"dd/MM-yyyy HH:mm\");\n}\n\nexport function parseDate(dateString) {\n /**\n * Expects a string-formatted timestamp and returns a human-friendly date\n * --------------\n * @parameter dateTimeString [string] a datetime string in the format of YYYYMMDD (20181230)\n * @returns [string] formatted string 20181230 -> 30/12-2018\n */\n\n return format(parse(dateString, \"yyyyMMdd\", 0), \"dd/MM-yyyy\");\n}\n\nexport function parseTime(timeString) {\n /**\n * Expects a string-formatted timestamp and returns a human-friendly date\n * --------------\n * @parameter dateTimeString [string] a datetime string in the format of YYYYMMDDHHmm (0120)\n * @returns [string] formatted string 0120 -> 1:20\n */\n\n return format(parse(timeString, \"HHmm\", 0), \"HH:mm\");\n}\n\n/* GET DATES */\n\nexport function getDatetimeString() {\n /**\n * Returns now as a datetimeString (yyyyMMddHHmm)\n * --------------\n * No params\n * @returns [string] yyyyMMddHHmm example: 201801282359\n */\n\n return format(new Date(), \"yyyyMMddHHmm\");\n}\n\nexport function getTimeString() {\n /**\n * Returns now as a timeString (yyyyMMddHHmm)\n * --------------\n * No params\n * @returns [string] yyyyMMddHHmm example: 201801282359\n */\n\n return format(new Date(), \"HHmm\");\n}\n","import React from \"react\";\nimport { connect } from \"react-redux\";\nimport { css } from \"emotion\";\nimport { SearchIcon, CloseIcon } from \"mdi-react\";\nimport colors from \"../../style/colors\";\nimport PropTypes from \"prop-types\";\nimport InlineSpinner from \"./InlineSpinner\";\n\n/** Component used for search functionality\n * ```\n * IN IMPLEMENTING FILE:\n * filterContacts = event => {\n let filteredContacts = [...this.state.contacts];\n filteredContacts = filteredContacts.filter(\n item =>\n item.name.toLowerCase().search(event.target.value.toLowerCase()) !== -1 ||\n item.userGroup.title.toLowerCase().search(event.target.value.toLowerCase()) !== -1 ||\n item.masterGroup.title.toLowerCase().search(event.target.value.toLowerCase()) !== -1\n );\n this.setState({ filteredContacts, filterTerm: event.target.value });\n };\n * \n * \n {props.searching &&
\n);\n\nconst height = 40;\n\nconst style = primaryColor => css`\n display: flex;\n align-items: center;\n position: relative;\n background-color: ${colors.midLightGrey};\n border-radius: 3px;\n font-size: 1rem;\n color: ${colors.black};\n height: ${height}px;\n\n input {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n font-size: 1rem;\n background-color: transparent;\n border: 1px transparent solid;\n border-radius: 3px;\n padding: 0 2rem 0 0.75rem;\n\n &:focus {\n outline: 0;\n border: 1px ${primaryColor} solid;\n }\n }\n\n .right {\n position: absolute;\n right: 0.5rem;\n }\n\n svg {\n fill: ${colors.darkGrey};\n }\n`;\nSearchInput.propTypes = {\n /** Function which is executed to clear input */\n onClearSearch: PropTypes.func,\n /** Text value in input part of component, this is being used when searching */\n value: PropTypes.string,\n /** Boolean value used to decide if a search has been initiated. usecase could be that you dont want a user to type something while a search is ongoing */\n searching: PropTypes.bool,\n /** Function to be executed when something new has been typed */\n onChange: PropTypes.func,\n /** Placeholder text displayed when nothing has been typed */\n placeholder: PropTypes.string,\n /** Used to set className for styling */\n className: PropTypes.string\n};\nconst mapStateToProps = state => ({\n primaryColor: state.appConfig.primaryColor\n});\n\nexport default connect(mapStateToProps)(SearchInput);\n","import React from \"react\";\nimport { css } from \"emotion\";\nimport colors from \"../../style/colors\";\nimport Button from \"./Button\";\nimport { SmileySadIcon } from \"mdi-react\";\nimport PropTypes from \"prop-types\";\n\n/** Element to notify users of the current status of content, eg. No more readable posts, an error occured while fetching data. then use this component\n * Use icon to indicate how good/bad the current statusbox is\n * ```\n * \n * \n {props.icon ||
\n);\n\nconst componentStyle = props => css`\n svg {\n width: 2rem;\n height: 2rem;\n }\n\n margin-left: auto;\n margin-right: auto;\n padding: 0 3rem;\n text-align: center;\n color: ${colors.darkGrey};\n white-space: initial;\n`;\n\nStatusBox.propTypes = {\n /** Override styles locally */\n style: PropTypes.object,\n /** Svg icon from mdi-react which indicates severity of statusbox */\n icon: PropTypes.object,\n /** Main title of statusbox */\n title: PropTypes.string,\n /** More descriptive textblock to further explain the main title and status */\n content: PropTypes.string,\n /** Object holding logic regarding \"try again functionality\" */\n action: PropTypes.object\n};\nexport default StatusBox;\n","import store from \"../store\";\nimport history from \"./navigation-history\";\nimport getAppName from \"./get-app-name\";\nimport req from \"./request-utility\";\n\nimport { setTransitionModeToBackward, setTransitionModeToForward } from \"../actions/pagesActions\";\n\nexport default function(path, direction = \"backward\") {\n /**\n * Utiltity function to animate transitions between routes\n * -------------------------------------\n * Take two arguments:\n * @argument {string} path Required\n * @argument {string} directon optional (defaults to \"forward\")\n *\n * It dispatches an action setting the global transition state,\n * and hereafter animates the route transition according to the\n * dispatched state\n *\n * Special options for path:\n *\n * `BACK`\n * The previous route (\"pops\" a level off from the routes)\n * Example: pageNavigator(\"BACK\", \"backward\")\n * domain.com/users/12343/likes -> domain.com/users/12343\n *\n * `FRONTPAGE`\n * Goes to the frontpage\n */\n\n // Set the direction\n if (direction === \"forward\") {\n store.dispatch(setTransitionModeToForward());\n } else if (direction === \"backward\") {\n store.dispatch(setTransitionModeToBackward());\n }\n\n // Replaces double slashes with single (url.com/lorem//ipsum -> url.com/lorem/ipsum)\n path = path.replace(/\\/\\//gm, \"/\");\n\n // Special path arguments\n if (path === \"BACK\") {\n // Goes up one level in the paths\n path = history.location.pathname\n .split(\"/\")\n .slice(0, -1)\n .join(\"/\");\n }\n //implemented 29/04/2019 by niclas\n //comment: when navigating within a testsheet, we dont have a view for a single task within a jobpackage, so we would get a white screen if we use just BACK.\n //I figured that this functionality might be needed in other places where we don't have the intermediate view, and need to navigate further back than 1 level\n if (path === \"DOUBLEBACK\") {\n // Goes up two level in the paths\n path = history.location.pathname\n .split(\"/\")\n .slice(0, -2)\n .join(\"/\");\n }\n\n if (path === \"TRIPLEBACK\") {\n // Goes up two level in the paths\n path = history.location.pathname\n .split(\"/\")\n .slice(0, -3)\n .join(\"/\");\n }\n\n // Special path arguments\n if (path === \"FRONTPAGE\") {\n // Goes to frontpage\n path = `/${getAppName()}/`;\n }\n\n // Set the direction\n requestAnimationFrame(() => {\n history.replace(path);\n\n // Log app visit. Logic for duplicated visit-logs is handled in node api\n // It's fine to fire this request as many times a needed. The api will make sure\n // the log wont be registered multiple times. See business rules in Node-api for further details\n // req().post(\"statistics/app/visits\");\n });\n}\n","import React from \"react\";\r\nimport { css } from \"emotion\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport tinycolor from \"tinycolor2\";\r\n\r\n// Styles\r\nimport colors from \"../../style/colors\";\r\nimport common from \"../../style/common\";\r\n\r\n/** Bar element which always is placed at the top of an page. it holds 2 actions, and the page title\r\n *\r\n * ```\r\n * {props.title || \"Oops.\"}
}\n{props.content || \"An error occurred\"}
\n {props.action && (\n \n )}\n\r\n
\r\n);\r\n\r\nconst style = (atFrontPage, primaryColor) => css`\r\n width: 100vw;\r\n display: block;\r\n height: ${common.topBarHeight}px;\r\n background-color: ${atFrontPage ? colors.white : primaryColor};\r\n color: ${atFrontPage ? colors.black : colors.white};\r\n box-shadow: ${atFrontPage ? \"none\" : common.boxShadowSubtle};\r\n z-index: 1;\r\n flex-shrink: 0;\r\n\r\n svg {\r\n fill: ${atFrontPage ? colors.black : colors.white};\r\n /* background-color: ${atFrontPage ? colors.white : primaryColor}; */\r\n padding: ${common.topBarHeight * 0.256}px;\r\n height: ${common.topBarHeight}px;\r\n width: ${common.topBarHeight}px;\r\n\r\n &:active {\r\n fill: ${tinycolor(atFrontPage ? colors.black : colors.white)\r\n .setAlpha(0.8)\r\n .toString()};\r\n }\r\n }\r\n\r\n .action-left,\r\n .action-right {\r\n position: absolute;\r\n top: 0;\r\n }\r\n\r\n .action-right {\r\n right: 0;\r\n height: ${common.topBarHeight}px;\r\n overflow: hidden;\r\n }\r\n .action-left {\r\n left: 0;\r\n height: ${common.topBarHeight}px;\r\n overflow: hidden;\r\n }\r\n\r\n .title {\r\n font-weight: 700;\r\n text-align: center;\r\n line-height: ${common.topBarHeight}px;\r\n padding: 0 50px;\r\n\r\n p {\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n width: 100%;\r\n }\r\n\r\n img {\r\n max-height: 35px;\r\n margin-top: 0.5rem;\r\n }\r\n }\r\n`;\r\n\r\nconst mapStateToProps = state => ({\r\n primaryColor: state.appConfig.primaryColor\r\n});\r\n\r\nTopBar.propTypes = {\r\n /** Bool value that helps with styling element differently if its at the frontpage */\r\n atFrontPage: PropTypes.bool,\r\n /** Override styles with this */\r\n style: PropTypes.object,\r\n /** Click event to be executed when left Element is clicked */\r\n actionLeft: PropTypes.object,\r\n /** Click event to be executed when right Element is clicked */\r\n actionRight: PropTypes.object\r\n};\r\n\r\nexport default connect(mapStateToProps)(TopBar);\r\n","import React from \"react\";\nimport { css } from \"emotion\";\nimport PropTypes from \"prop-types\";\n\n/** Wrapper for non-button actions\n *\n * For accecibility reasons (and testability) it is strongly recommended to have\n * everything that is clickable inside a button. This is an attempt at creating a\n * \"invisible\" button wrapper to wrap elements in. Use it as is and apply styling\n * if nescecary\n *\n * @example\n * ```jsx\n * \r\n {props.actionLeft || \"\"}\r\n
\r\n {props.title && (\r\n \r\n
\r\n )}\r\n {/* Is positioned after topbar in markup to not have to specify a z-index for children */}\r\n {props.title}
\r\n\r\n {props.actionLeft || \"\"}\r\n
\r\n {props.actionRight || \"\"}
\r\n \n\t\t\t\t{loggedUserTypeDK != 'user' && (\n\t\t\t\t\t
\n\t\t\t{tableData.loading && \n\t\t\t\t\t\t
\n\t\t\t\t)}\n\t\t\t\t\n\t\t\t\t\t\t\t {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t onChange(e)}\n\t\t\t\t\t\t\t\t\t\t\tloading={foremanTeamMembersIsLoading}\n\t\t\t\t\t\t\t\t\t\t\toptions={\n\t\t\t\t\t\t\t\t\t\t\t\t!foremanTeamMembersIsLoading\n\t\t\t\t\t\t\t\t\t\t\t\t\t? foremanTeamMembers\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.filter(d => d.externalId)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.map(d => ({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: `${d.name} | Ticket No. ${\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\td.ticketNumber ? d.ticketNumber : 'N/A'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}`,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: d.id\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}))\n\t\t\t\t\t\t\t\t\t\t\t\t\t: []\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t {\n\t\t\t\t\t\t\t\treturn onChange(e)} />;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t {\n\t\t\t\t\t\t\t\treturn onChange(e)} />;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t
\n\t\t\t\t\tFrom:
\n\t\t\t\t\t\tTo:
\n\t\t\t\t\t\t\n\t\t\t\t\t\t onSubmit(e),\n\t\t\t\t\t\t\t\te => {\n\t\t\t\t\t\t\t\t\tnotification.error({\n\t\t\t\t\t\t\t\t\t\tduration: 1,\n\t\t\t\t\t\t\t\t\t\tmessage: 'FAILED',\n\t\t\t\t\t\t\t\t\t\tdescription: Object.keys(e).map(d => e[d].message)[0]\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t)}>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t)}\n\t\t\n\t\t\t\t\t ({\n\t\t\t\t\t\t\tlabel: `${d.name} | Ticket No. ${d.ticketNumber ? d.ticketNumber : 'N/A'}`,\n\t\t\t\t\t\t\tvalue: d.id\n\t\t\t\t\t\t}))}\n\t\t\t\t\t\tplaceholder=\"Select Foreman\"\n\t\t\t\t\t\tvalue={selectedForeman}\n\t\t\t\t\t\tonChange={e => setSelectedForeman(e.target.value)}\n\t\t\t\t\t/>\n\t\t\t\t
\n\t\t\t)}\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t{lang.timesheetNeedsSignature}{' '}\n\t\t\t\t\t\t\t\t{needsSignatureData.length > 0 ? <>{needsSignatureData.length} : ''}\n\t\t\t\t\t\t\t\t{(needsSignatureIsLoading || needsSignatureIsFetching) && (\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{lang.archive} {archiveData.length > 0 ? <>{archiveData.length} : ''}\n\t\t\t\t\t\t\t\t{(archiveIsLoading || archiveIsFetching) && (\n\t\t\t\t\t\t\t\t\t \n\t\t\t
\n\n\t\t\t\n\t\t\t\t
\n\t\t\n\t);\n};\n\nexport default TimesheetSignaturePadModal;\n","import React from 'react';\nimport { Modal, List, Button, Typography } from 'antd';\nimport moment from 'moment';\n\nconst TimesheetCorrectedModal = props => {\n\tconst { correctedBySemsupportData, isTimesheetSubmitting = false, onGenerateNewTimesheet } = props;\n\n\treturn (\n\t\t\n\t\t\t\t
\n\t\t\t{tableData.loading && \n\t\t\t\t\t {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t p.detailedReportingEnabled === 'YES')\n\t\t\t\t\t\t\t\t\t\t.map(p => ({ label: p.id, value: p.id }))}\n\t\t\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t ({\n\t\t\t\t\t\t\t\t\t\tlabel: p.name,\n\t\t\t\t\t\t\t\t\t\tvalue: `${p.id};${p.externalId}`\n\t\t\t\t\t\t\t\t\t}))}\n\t\t\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t {\n\t\t\t\t\t\t\t\treturn onChange(e)} />;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t {\n\t\t\t\t\t\t\t\treturn onChange(e)} />;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t
\n\t\t\t\t\tFrom:
\n\t\t\t\t\t\tTo:
\n\t\t\t\t\t\t\n\t\t\t\t\t\t onSubmit(e),\n\t\t\t\t\t\t\t\te => {\n\t\t\t\t\t\t\t\t\tnotification.error({\n\t\t\t\t\t\t\t\t\t\tduration: 1,\n\t\t\t\t\t\t\t\t\t\tmessage: 'FAILED',\n\t\t\t\t\t\t\t\t\t\tdescription: Object.keys(e).map(d => e[d].message)[0]\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t)}>\n\t\t\t\t\t\t\t onDownload(tableData.pdfFile)}\n\t\t\t\t\t\t\tdisabled={!tableData.pdfFile || tableData.loading}>\n\t\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t)}\n\t\t\n {loggedUserTypeDK != \"user\" && (\n
\n {tableData.loading && \n
\n )}\n \n {\n return (\n onChange(e)}\n options={[\n { label: \"Full Time App Users\", value: \"fulltime\" },\n { label: \"Temporary Time App Users\", value: \"temporary\" },\n ]}\n value={value}\n />\n );\n }}\n />\n
\n \n {\n return (\n onChange(e)}\n options={!foremenIsLoading ? foremen.all.map((d) => ({ label: d.name, value: d.id })) : []}\n value={value}\n />\n );\n }}\n />\n
\n \n
\n \n {\n return onChange(e)} />;\n }}\n />\n {\n return onChange(e)} />;\n }}\n />\n
\n {lang.timeSheetFromDate}:
\n{lang.timeSheetToDate}:
\n\n onSubmit(e),\n (e) => {\n notification.error({\n duration: 1,\n message: lang.notificationFailed,\n description: Object.keys(e).map((d) => e[d].message)[0],\n });\n }\n )}\n >\n
\n \n console.log(\"PDF Render Error: \", e)}\n // onLoadSuccess={(e) => console.log(e)}\n >\n
\n )}\n \n {loggedUserTypeDK != \"user\" && (\n
\n {tableData.loading && \n
\n )}\n \n {\n return (\n {\n setValue(\"employeeId\", \"\");\n onChange(e);\n }}\n options={[\n { label: \"Full Time App Users\", value: \"fulltime\" },\n { label: \"Temporary Time App Users\", value: \"temporary\" },\n ]}\n value={value}\n />\n );\n }}\n />\n
\n \n {\n return (\n onChange(e)}\n options={!foremenIsLoading ? foremen.all.map((d) => ({ label: d.name, value: d.id })) : []}\n value={value}\n />\n );\n }}\n />\n
\n \n
\n \n {\n return onChange(e)} />;\n }}\n />\n {\n return onChange(e)} />;\n }}\n />\n
\n {lang.timeSheetFromDate}:
\n{lang.timeSheetToDate}:
\n\n onSubmit(e),\n (e) => {\n notification.error({\n duration: 1,\n message: lang.notificationFailed,\n description: Object.keys(e).map((d) => e[d].message)[0],\n });\n }\n )}\n >\n
\n \n console.log(\"PDF Render Error: \", e)}\n // onLoadSuccess={(e) => console.log(e)}\n >\n
\n )}\n setClickCount(clickCount + 1)}>\r\n dispatch(setSelectedUser(e.target.value))}\r\n options={userList.map((d) => ({ label: d.name, value: d.externalId }))}\r\n changeGetPopupContainer={false}\r\n placeholder=\"Select an employee\"\r\n style={{ width: \"30%\" }}\r\n value={selectedUser}\r\n />\r\n )}\r\n
\r\n {semcoTimeCorrectionsNotification && \r\n {lang.hello}, {currentUser ? currentUser.name : userName}\r\n {!!project.number && (\r\n <>\r\n
\r\n \r\n {project.number} - {project.description}\r\n \r\n \r\n )}\r\n
\r\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((num, index) => (\r\n
\r\n )}\r\n\r\n {/* App misconfigured */}\r\n {pages.pages.length === 0 && !pages.loading && !pages.error && (\r\n \r\n
\r\n ))}\r\n \r\n
\r\n )}\r\n\r\n {/* Error getting pages */}\r\n {pages.pages.length === 0 && !pages.loading && pages.error && (\r\n \r\n {pages.pages\r\n .filter((el) => el.showAtFrontPage)\r\n .map((page, index) => (\r\n pageNavigator(linkPathCreator(page, \"absolute\"), \"forward\")}\r\n className={icons()}\r\n key={index}\r\n >\r\n {iconConverter(page.icon)}\r\n {page.title}\r\n {page.notifications > 0 && (\r\n
\r\n ))}\r\n \r\n )}\r\n \n {isReady && error && (\n /* This is intentionally not translated as the error could be that language-variables weren't fetched */\n
\n );\n};\n\nconst paddingSides = 1.5;\n\nconst componentStyle = (props) => css`\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n min-height: 110vh; /* Appr. viewport height in a mobile browser with toolbars visible */\n padding: 2rem ${paddingSides}rem 0 ${paddingSides}rem;\n\n .text-body {\n margin: 2rem;\n }\n .main-content {\n flex: 1 0 90%;\n }\n\n .need-help-container {\n margin-bottom: 4.5rem;\n }\n\n .extended-content {\n margin-top: 4rem;\n\n h2 {\n text-align: center;\n }\n\n ul {\n .header {\n font-weight: 700;\n margin-bottom: 0.5rem;\n color: ${colors.black};\n }\n\n li {\n margin-bottom: 2rem;\n }\n\n p {\n color: ${colors.darkGrey};\n }\n }\n }\n\n /* General \"global\" styles */\n svg {\n margin: 0 0.5rem 0 0.5rem;\n vertical-align: sub;\n }\n\n button {\n margin-bottom: 0.75rem;\n }\n\n svg.inline-svg-icon {\n display: inline-block;\n width: 1.5rem;\n height: 1.5rem;\n margin: 0;\n vertical-align: center;\n }\n\n .list-element {\n display: flex;\n align-items: center;\n margin-bottom: 1.5rem;\n\n .circled-number {\n margin-right: 1rem;\n border: 1px solid ${colors.midGrey};\n border-radius: -0.2rem;\n border-radius: 50%;\n text-align: center;\n min-width: 30px;\n height: 30px;\n color: ${props.appConfig.primaryColor};\n font-weight: bold;\n font-size: 1.2rem;\n margin-top: 0.2rem;\n }\n\n p {\n padding: 0;\n }\n }\n\n .seperator {\n margin: 0 -${paddingSides}rem;\n height: 1px;\n background-color: ${colors.midGrey};\n }\n\n .need-help {\n text-align: center;\n color: ${colors.darkGrey};\n padding: 0.5rem 1rem;\n margin: 0.5rem 0;\n text-decoration: underline;\n\n svg {\n margin-bottom: -2px;\n }\n\n &:active {\n background-color: ${colors.lightGrey};\n border-radius: 5px;\n }\n }\n`;\n\nconst mapStateToProps = (state) => ({\n userName: state.auth.user.name,\n lang: state.language.language,\n appConfig: state.appConfig,\n});\n\nexport default connect(mapStateToProps)(InstallationFlow);\n","/** @namespace breakpoints */\nexport default {\n xs: 600,\n md: 750,\n lg: 960,\n xl: 1200\n};\n","import React from \"react\";\nimport { css } from \"emotion\";\nimport colors from \"../../style/colors\";\nimport { CSSTransition } from \"react-transition-group\";\nimport tinycolor from \"tinycolor2\";\nimport { durations } from \"../../config/animations\";\n\nconst Overlay = props => {\n const { active, onClick } = props;\n\n return (\n \n {/* Hi and welcome-text */}\n
\n )}\n\n {/* Need help / more info */}\n {isReady && !error && !extended && (\n \n {lang.installationHello} {user} 👋\n
\n\n {lang.welcomeTo__placeholder__app.replace(/{{placeholder}}/g, props.appConfig.title)}\n
\n\n {/* Installation instructions */}\n\n {/* (1) */}\n\n
\n\n {/* (2) */}\n 1
\n \n {isIOS &&\n insertIcon(\n lang.iosClickOn__placeholderShareIcon__,\n \"{{placeholder-share-icon}}\",\n
\n
\n\n {/* (3) */}\n 2
\n \n {isIOS &&\n insertIcon(\n lang.iosChoose__placeholderAddToHomescreenIcon__,\n \"{{placeholder-add-to-homescreen-icon}}\",\n
\n
\n 3
\n {isIOS ? lang.iosOpenTheAppFromYourHomescreen : lang.androidOpentheAppFromYourHomescreen}
\n\n \n
\n )}\n\n {/* Extended guide */}\n {isReady && !error && extended && (\n <>\n setTimeout(() => setExtended(!extended), 200)}>\n
\n \n
\n\n {/* {lang.extendedInstallationGuide}
\nsetTimeout(() => setExtended(!extended), 200)}>\n {lang.hideHelp}\n
\n\n \n\n {/* Button list */}\n- \n {isIOS && (\n <>\n
- \n
\n {insertIcon(\n lang.cantFind__placeholder__icon,\n \"{{placeholder}}\",\n
\n\n )}\n {lang.cantFindShareIconContent}
\n \n - \n
\n {insertIcon(\n lang.cantFind__placeholder__icon,\n \"{{placeholder}}\",\n
\n\n )}\n \n {insertIcons(\n lang.cantFindAddToHomescreenIconContent__placeholderShareIcon____placeholderAddToHomescreenIcon__,\n /{{placeholder-share-icon}}|{{placeholder-add-to-homescreen-icon}}/,\n [\n
\n,\n ,\n ]\n )}\n \n - \n
I do not speak danish
\nScroll up and find the \"Change guide to english\" button above.
\n \n - \n
{lang.dontHaveAnIphone}
\n{lang.dontHaveAnIphoneContent}
\n \n - \n
{lang.alreadyAddedTheApp}
\n{lang.alreadyAddedTheAppContent}
\n \n \n )}\n
{lang.commonProblems}
\n\n
*/}\n \n )}\n \n {isIOS && phrases.device.ios[lang].commonProblemsHeadline}\n {isAndroid && phrases.device.android[lang].commonProblemsHeadline}\n
\n- \n
- \n
\n {isIOS && phrases.device.ios[lang].commonProblenmsbullet1Headline}\n {isAndroid && phrases.device.android[lang].phrase1}\n
\n\n {isIOS && phrases.device.ios[lang].commonProblenmsbullet1text}\n {isAndroid && phrases.device.android[lang].phrase1}\n
\n \n - \n
\n {isIOS && phrases.device.ios[lang].commonProblenmsbullet2Headline}\n {isAndroid && phrases.device.android[lang].phrase1}\n
\n\n {isIOS && phrases.device.ios[lang].commonProblenmsbullet2text}\n {isAndroid && phrases.device.android[lang].phrase1}\n
\n \n - \n
\n {isIOS && phrases.device.ios[lang].commonProblenmsbullet3Headline}\n {isAndroid && phrases.device.android[lang].phrase1}\n
\n\n {isIOS && phrases.device.ios[lang].commonProblenmsbullet3text}\n {isAndroid && phrases.device.android[lang].phrase1}\n
\n \n - \n
\n {isIOS && phrases.device.ios[lang].commonProblenmsbullet4Headline}\n {isAndroid && phrases.device.android[lang].phrase1}\n
\n\n {isIOS && phrases.device.ios[lang].commonProblenmsbullet4text}\n {isAndroid && phrases.device.android[lang].phrase1}\n
\n \n
props.onCloseGuide()}>\n {lang.closeGuide}\n
\n\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nconst componentStyles = () => css`\r\n .context-menu {\r\n position: fixed;\r\n bottom: 0px; /* Component enters with a spring animation, and needs extra padding in bottom */\r\n padding-bottom: 0px;\r\n left: 0;\r\n /* z-index: 6; */\r\n width: 100%;\r\n background-color: ${colors.white};\r\n will-change: auto;\r\n\r\n @media screen and (min-width: ${breakpoints.md}px) {\r\n width: ${breakpoints.md}px;\r\n bottom: 1rem;\r\n border-radius: 6px;\r\n left: 0;\r\n right: 0;\r\n margin-left: auto;\r\n margin-right: auto;\r\n overflow: hidden;\r\n }\r\n\r\n &.context-menu-enter {\r\n opacity: 0;\r\n transform: translate3d(0, 100%, 0);\r\n }\r\n &.context-menu-enter-active {\r\n transform: translate3d(0, 0%, 0);\r\n opacity: 1;\r\n transition: transform 190ms ease, opacity ${durations.normal}ms;\r\n }\r\n &.context-menu-exit {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n &.context-menu-exit-active {\r\n opacity: 0;\r\n transform: translate3d(0, 100%, 0);\r\n transition: transform ${durations.normal}ms ease, opacity ${durations.normal}ms;\r\n }\r\n\r\n .action {\r\n padding: 0.75rem;\r\n display: flex;\r\n position: relative;\r\n transition: ${durations.normal}ms;\r\n transition-delay: 400ms;\r\n\r\n &:active {\r\n background-color: ${colors.lightGrey};\r\n transition: 80ms;\r\n }\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n\r\n svg {\r\n padding: 0.25rem;\r\n fill: ${colors.darkGrey};\r\n margin-right: 0.5rem;\r\n }\r\n\r\n .seperator {\r\n position: absolute;\r\n height: 1px;\r\n bottom: 0;\r\n right: 0;\r\n background-color: ${colors.midGrey};\r\n width: 95%;\r\n }\r\n\r\n &.default-action {\r\n border-top: 1px ${colors.midGrey} solid;\r\n }\r\n }\r\n }\r\n`;\r\n\r\nContextMenu.propTypes = {\r\n /** Language object from redux, needed for easy translated text elements */\r\n lang: PropTypes.object\r\n};\r\nconst mapStateToProps = state => ({\r\n contextMenu: state.ui.contextMenu,\r\n lang: state.language.language\r\n});\r\nconst mapDispatchToProps = dispatch => ({\r\n hideContextMenu: bindActionCreators(hideContextMenu, dispatch)\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ContextMenu);\r\n","export default {\n phone: \"phone\",\n email: \"email\",\n ad: \"ad\"\n};\n","import React from \"react\";\nimport { LockIcon } from \"mdi-react\";\nimport { css } from \"emotion\";\n\nconst PhoneLogin = ({ onClick, password = \"\", active, hide }) => {\n return (\n \r\n {actions.map((action, actionIndex) => (\r\n {\r\n e.stopPropagation();\r\n action.callback();\r\n if (closeOnActionCallback !== false) props.hideContextMenu();\r\n }}\r\n >\r\n {action.icon} {action.title}\r\n {actionIndex !== actions.length - 1 && }\r\n
\r\n ))}\r\n\r\n \r\n
\r\n \n
\n
\n );\n};\n\nconst componentStyles = () => css`\n &.hide {\n opacity: 0;\n max-height: 0px;\n transition: opacity 400ms ease, max-height 400ms ease;\n }\n\n opacity: 1;\n max-height: 60px;\n transition: opacity 400ms ease, max-height 400ms ease;\n`;\n\nexport default PhoneLogin;\n","import React from \"react\";\nimport { css } from \"emotion\";\nimport { BackspaceIcon } from \"mdi-react\";\nimport colors from \"../../style/colors\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { durations } from \"../../config/animations\";\n\nconst Numpad = props => {\n const { active } = props;\n return (\n \n
\n\n \n
| props.onKeyPress(\"1\")}>\n 1\n | \nprops.onKeyPress(\"2\")}>\n 2\n | \nprops.onKeyPress(\"3\")}>\n 3\n | \n
| props.onKeyPress(\"4\")}>\n 4\n | \nprops.onKeyPress(\"5\")}>\n 5\n | \nprops.onKeyPress(\"6\")}>\n 6\n | \n
| props.onKeyPress(\"7\")}>\n 7\n | \nprops.onKeyPress(\"8\")}>\n 8\n | \nprops.onKeyPress(\"9\")}>\n 9\n | \n
| props.onKeyPress(\"delete\")}>\n | \n props.onKeyPress(\"0\")}>\n 0\n | \nprops.onKeyPress(\"+\")}>\n +\n | \n
{phone}
\n {phone.length !== 0 && !phoneEntered && }\n {phone.length === 0 && (\n \n )}\n \n\n setState({ ...state, email: e.target.value })}\n onFocus={() => setState({ ...state, showNumpad: false, phoneEntered: false })}\n onBlur={() => setState({ ...state, showNumpad: true })}\n />\n
\n\n \n setPhoneNumber(e.target.value)}\n placeholder={`Enter your phone number here`}\n value={phoneNumber}\n />\n \n
\n \n
\n Forgot your password?
\n\n Use the form below to reset your password. You will receive a new one to your phone\n
\n\n {\n window.location = `https://login.ekkoapp.dk/api/v2/sso/${getAppName()}`;\n }}\n >\n
\n );\n};\n\nexport default AdLogin;\n","import React from \"react\";\nimport { connect } from \"react-redux\";\nimport { bindActionCreators } from \"redux\";\nimport { hideModalPage } from \"../../actions/uiActions\";\nimport { css } from \"emotion\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { durations } from \"../../config/animations\";\nimport { CloseIcon } from \"mdi-react\";\nimport Page from \"./Page\";\nimport Overlay from \"./Overlay\";\n\n// Components\nimport TopBar from \"./TopBar\";\nimport ActionWrapper from \"./ActionWrapper\";\n\nconst ModalPage = props => {\n let { active, closeCallback, title, actionRight, content } = props.modalPage;\n\n return (\n <>\n \n \n e.stopPropagation()}\n >\n {/* Header */}\n \n {d.title}\n
\n );\n })}\n\n {primaryActionTitle && (\n \n \n {icon}\n {title}\n \n
\n\n {/* Content */}\n{content}
\n\n {/* Actions */}\n {actions.length !== 0 &&\n actions.map((d) => {\n const { disabled = false } = d;\n\n return (\n\n
\n\n \n
\n\n {/* Actual login part */}\n {currentLoginType === loginTypes.phone && \n {signingIn &&
\n \n \n
\n );\n }\n}\n\nconst componentHeight = 40; //px\n\nconst componentStyle = (primaryColor, boxPadding) => css`\n font-size: 1rem;\n color: ${colors.black};\n\n /* Upload button/Input */\n label {\n display: flex;\n position: relative;\n align-items: center;\n height: ${componentHeight}px;\n background: ${colors.white};\n border: 1px ${colors.midGrey} solid;\n color: ${colors.black};\n font-family: ${common.fontStack};\n margin-bottom: ${boxPadding};\n border-radius: 3px;\n\n svg {\n position: relative;\n width: ${componentHeight}px;\n height: ${componentHeight}px;\n margin-right: 0.45rem;\n padding: 0.45rem;\n color: ${colors.darkGrey};\n border-right: 1px solid ${colors.midGrey};\n }\n\n /* Progress bar */\n .progress-bar-container {\n position: absolute;\n bottom: 0px;\n left: 0;\n width: 100%;\n height: 3px;\n display: flex;\n justify-content: space-between;\n\n .progress-bar {\n height: 3px;\n }\n\n .progress-bar.colored {\n background-color: ${primaryColor};\n }\n }\n }\n\n input[type=\"file\"] {\n display: none;\n }\n`;\nconst mapStateToProps = (state) => ({\n primaryColor: state.appConfig.primaryColor,\n});\n\nImageUploadSingle.propTypes = {\n /** String value to be displayed while image is being uploaded*/\n placeholder: PropTypes.string,\n /** value used for providing a bit of padding in your own implementation */\n boxPadding: PropTypes.string,\n /** Used for overriding styles, on the specific implementation */\n style: PropTypes.string,\n /** The applications primary color */\n primaryColor: PropTypes.string,\n};\nexport default connect(mapStateToProps, null)(ImageUploadSingle);\n","import React from \"react\";\nimport { AccountCircleIcon } from \"mdi-react\";\nimport colors from \"../style/colors\";\n\nexport default (userObject, size = 36, styles = {}, callback) => {\n if (userObject.profilePicture && userObject.profilePicture.baseURL && userObject.profilePicture.image) {\n let imageUrl = `${userObject.profilePicture.baseURL}w_${size},h_${size},c_lfill,g_face/${userObject.profilePicture.image}`;\n return (\n \r\n {getProfilePicture(formData, 48)}\r\n
\r\n\r\n {/* TODO: Currently we are not checking for baseURL too, but we should! Once every profile picture has one... */}\r\n {!formData.profilePicture.image && (\r\n \r\n
\r\n {user.name}
\r\n\r\n {user.masterGroup.title}, {user.userGroup.title}\r\n
\r\n\r\n {/* TODO: Currently we are not checking for baseURL too, but we should! Once every profile picture has one... */}\r\n {formData.profilePicture.image && (\r\n this.setState({ formData: { ...formData, profilePicture: {} } })}>\r\n
\n {getProfilePicture(user, allowUserToEdit ? 45 : 256, {}, () => {\n showLightBox({\n images: [user.profilePicture],\n });\n })}\n \n // Showps context menu\n showContextMenu([\n {\n icon:
\n \n
\n\n {allowUserToEdit && (\n {user.name}
\n{user.masterGroup.title + \", \" + user.userGroup.title}
\n\n
\n \n
\n
\n
{user.about}
\n \n )}\n {user.skill && (\n <>\n\n
{user.skills}
\n \n )}\n {user.address && (\n <>\n\n
{user.address}
\n \n )}\n{parseDate(value.date)}
,\n center: value.description,\n right: value.points\n })),\n {\n left: \"\",\n center:Total:
,\n right: (\n\n {pointlog.length > 0 && pointlog.map(e => e.points).reduce((total, value) => total + value)}\n
\n )\n }\n ]}\n />\n * ```\n * PLEASE NOTE\n * ```\n * the values passed to the components structure is very important, otherwise, they won't show up as intended\n * ```\n * \n */\n\nconst TableList = props => {\n let result = (\n| {props.headerLeft} | \n{props.headerCenter} | \n{props.headerRight} | \n
|---|---|---|
| {value.left} | \n{value.center} | \n{value.right} | \n
\n {pointlog.length > 0 && pointlog.map(e => e.points).reduce((total, value) => total + value)}\n
\n )\n },\n ...pointlog.map(value => ({\n left:{parseDate(value.date)}
,\n center: value.description,\n right:{value.points}
\n })),\n {\n left: \"\",\n center:Total:
,\n right: (\n\n {pointlog.length > 0 && pointlog.map(e => e.points).reduce((total, value) => total + value)}\n
\n )\n }\n ]}\n />\n ))}\n \n );\n};\n\nexport default UserPointLog;\n","import React from \"react\";\nimport { css } from \"emotion\";\nimport { connect } from \"react-redux\";\n\n// Utilities\nimport colors from \"../../style/colors\";\n\nconst Toggle = props => (\n\n \n
\n);\n\nconst height = 30;\nconst transitionShort = \"140ms ease\";\nconst transitionLong = \"300ms ease\";\n\nconst componentStyles = props => css`\n width: ${height * 2}px;\n height: ${height}px;\n border: 1px ${props.on ? props.primaryColor : colors.midGrey} solid;\n border-radius: ${height / 2}px;\n background-color: ${props.on ? props.primaryColor || colors.midGrey : colors.ultraLightGrey};\n transition: background-color ${transitionLong}, border ${transitionLong};\n transition-delay: 45ms;\n cursor: pointer;\n\n .toggle {\n box-sizing: border-box;\n border: 1px ${props.on ? props.primaryColor : colors.midGrey} solid;\n border-radius: ${height / 2}px;\n height: ${height}px;\n width: ${height}px;\n background-color: ${colors.white};\n margin: -1px 0 0 -1px;\n transition: background-color ${transitionLong}, border ${transitionLong}, transform ${transitionShort};\n\n &.on {\n transition: background-color ${transitionLong}, border ${transitionLong}, transform ${transitionShort};\n transform: translate3d(${height}px, 0, 0);\n }\n }\n\n &.loading {\n background-color: transparent;\n border-color: transparent;\n\n .toggle {\n border-width: 3px;\n border-color: ${props.primaryColor} ${props.primaryColor} ${props.primaryColor} transparent;\n transition: background-color ${transitionLong}, border ${transitionLong}, transform ${transitionLong};\n animation: spin 0.7s infinite linear;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n }\n`;\n\nconst mapStateToProps = state => ({\n primaryColor: state.appConfig.primaryColor\n});\nexport default connect(mapStateToProps)(Toggle);\n","import React, { useState } from \"react\";\nimport { css } from \"emotion\";\nimport { connect } from \"react-redux\";\nimport { bindActionCreators } from \"redux\";\nimport { Col, Divider, Input, message, Modal, notification, Rate, Row } from \"antd\";\nimport ThumbsUpDown from \"@mui/icons-material/ThumbsUpDown\";\nimport req from \"../../utilities/request-utility\";\n\nimport { version } from \"../../../package.json\";\n\n// Redux actions\nimport { showDialog } from \"../../actions/uiActions\";\n\n// Styling\nimport colors from \"../../style/colors\";\n\n// Utilities\nimport clearLocalStorage from \"../../utilities/clear-local-storage\";\nimport getAppName from \"../../utilities/get-app-name\";\n\n// Components\nimport InlineSpinner from \"../ui/InlineSpinner\";\nimport ListItem from \"../ui/ListItem\";\nimport Toggle from \"../ui/Toggle\";\nimport Button from \"../ui/Button\";\nimport { AlertDecagramIcon, ChevronDownIcon } from \"mdi-react\";\nimport breakpoints from \"../../config/breakpoints\";\n\nconst UserSettings = (props) => {\n let {\n userData: user,\n settingsLoading: loading,\n settingsError: error,\n settings,\n lang,\n activeIdentifiers,\n updateSetting,\n showDialog,\n } = props;\n\n const [isModalVisible, setIsModalVisible] = useState(false);\n const [isFeedbackSubmitting, setIsFeedbackSubmitting] = useState(false);\n const [rating, setRating] = useState(0);\n const [feedback, setFeedback] = useState(\"\");\n const ratings = { 1: \"Very Dissatisfied\", 2: \"Dissatisfied\", 3: \"Neutral\", 4: \"Satisfied\", 5: \"Very Satisfied\" };\n\n const submitFeedback = async () => {\n try {\n setIsFeedbackSubmitting(true);\n if (rating === 0) {\n setIsFeedbackSubmitting(false);\n return notification.info({\n duration: 0,\n message: \"Please choose a star/s\",\n });\n }\n\n const data = {\n slug: \"semcotime-dk-feedback\",\n Subject: \"Semcotime DK App - A user rated the app\",\n recipients: [\"johndoe@semcomaritime.com \"], //placeholder only\n values: { Rating: rating, Value: ratings[rating], Feedback: feedback, User: user.name },\n };\n\n await req().post(`AHAMAtic/sendEmail/`, data);\n await req().post(`semcotime/ifs-feedback/`, data);\n\n setRating(0);\n setFeedback(\"\");\n setIsFeedbackSubmitting(false);\n setIsModalVisible(false);\n return notification.success({\n duration: 2,\n message: \"Thank you for your feedback!\",\n });\n } catch (error) {\n setIsFeedbackSubmitting(false);\n console.log(\"error: \", error);\n notification.error({\n duration: 2,\n message: \"Something went wrong when submitting feedback\",\n });\n }\n };\n\n return (\n <>\n \n {/* Spinner */}\n {loading && !error && f.id === setting.selectedOption))[0].name\n }\n wrapContent={true}\n key={\"setting-\" + settingIndex}\n contentRight={\n updateSetting({ identifier: setting.identifier, value: !setting.value })}\n />\n }\n />\n ) : (\n
\n\n General
\n {settings.map((setting, settingIndex) =>\n !setting.options ? (\n\n updateSetting({ identifier: setting.identifier, value: e.target.value })}\n value={setting.selectedOption}\n >\n {setting.options.map((option) => (\n \n ))}\n \n
\n )\n )}\n \n )}\n\n {/* Sign out setting */}\n {!loading && (\n {lang.language}
\n\n {/* Hardcoded setting */}\n \n showDialog({\n icon:
\n )}\n {lang.extra}
\n{lang.logOutWarning}
\n\n Ekko App version {version}\n
\n\n
\n\n \n {\n caches.keys().then((cacheNames) => {\n cacheNames.forEach((cacheName) => {\n caches.delete(cacheName);\n });\n });\n alert(\"The cache has been cleared. The page will now reload.\");\n\n window.location.reload(true);\n }}\n >\n Get Latest Update\n \n
\n \n
\n \n
\n \n
\n\n \n \n \n \n );\n};\n\nconst dropdownWrapperStyle = () => css`\n position: relative;\n background: ${colors.white};\n border-top: 1px ${colors.midGrey} solid;\n border-bottom: 1px ${colors.midGrey} solid;\n\n @media screen and (min-width: ${breakpoints.lg}px) {\n border: 1px ${colors.midGrey} solid;\n }\n\n p {\n padding: 1rem 1rem 1rem 1rem;\n margin-bottom: -2.9rem;\n }\n\n select {\n padding: 2rem 1rem 1.25rem 1rem;\n appearance: none;\n font-size: 0.8125rem;\n color: ${colors.darkGrey};\n border: 0;\n border-radius: 0;\n background-color: transparent;\n width: 100%;\n outline: 0;\n }\n\n svg {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n }\n`;\n\nconst contentContainer = () => css`\n margin: 1rem 0;\n padding: 0 1rem;\n\n p {\n white-space: initial;\n }\n`;\n\nconst mapStateToProps = (state) => ({\n lang: state.language.language,\n});\n\nconst mapDispatchToProps = (dispatch) => ({\n showDialog: bindActionCreators(showDialog, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(UserSettings);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { bindActionCreators } from \"redux\";\nimport queryString from \"query-string\";\nimport { notification } from \"antd\";\n\nimport req from \"../../utilities/request-utility\";\n\n// Actions\nimport { showContextMenu } from \"../../actions/uiActions\";\nimport { renewToken } from \"../../actions/authActions\";\nimport { getLanguage } from \"../../actions/languageActions\";\n\n// Utilities\nimport pageNavigator from \"../../utilities/page-navigator\";\nimport getBackButtonURL from \"../../utilities/get-back-button-url\";\n\n// Components\nimport UserProfile from \"./UserProfile\";\nimport UserPointlog from \"./UserPointlog\";\nimport UserSettings from \"./UserSettings\";\nimport TopBar from \"../../components/ui/TopBar\";\nimport TabBar from \"../../components/ui/TabBar\";\nimport TabView from \"../../components/ui/TabView\";\nimport Page from \"../../components/ui/Page\";\nimport { ArrowBackIcon, CogOutlineIcon, TrophyVariantOutlineIcon, AccountOutlineIcon } from \"mdi-react\";\nimport saveStateToLocalStorage from \"../../utilities/save-state-to-local-storage\";\nimport InlineSpinner from \"../ui/InlineSpinner\";\n\nclass MyProfile extends Component {\n constructor(props) {\n super(props);\n this.state = {\n // Page and navigation\n enablePointLog: this.props.appConfig.enableHighscore || false,\n page: {},\n tabs: [],\n activeTabIndex: 0,\n backButtonUrl: getBackButtonURL(),\n profileEditModalActive: false,\n reloadingLanguage: false, // removes the entire page while reload happens\n\n // Profile\n userData: null,\n userDataLoading: true,\n userDataError: false,\n\n // Pointlog\n pointlog: null,\n pointlogLoading: true,\n pointlogError: false,\n\n // Settings\n settings: null,\n settingsLoading: true,\n settingsError: false,\n activeIdentifiers: [],\n };\n }\n\n onSettingToggle = (groupIndex, settingIndex) => {\n let settings = [...this.state.settings];\n settings[groupIndex].settings[settingIndex].value = !settings[groupIndex].settings[settingIndex].value;\n this.setState({ settings });\n };\n\n componentDidMount() {\n this._mounted = true;\n\n // Get tabId from queryParam\n let queryStrings = queryString.parse(window.location.search);\n if (queryStrings.tab) {\n this.setState({\n activeTabIndex: Number(queryStrings.tab),\n });\n }\n\n // Fetch data from api\n this.getUserData();\n this.getPointlog();\n this.getSettings();\n\n // Create tabs (This is not the most beautiful code)\n // The profile will always be the first tab\n let tabs = [\n <>\n
\r\n {\r\n pageNavigator(`/${getAppName()}/profile/${user.id}`, \"forward\");\r\n props.closeSideMenu();\r\n }}\r\n >\r\n {getProfilePicture(user, 42)}\r\n {\r\n e.stopPropagation();\r\n pageNavigator(`/${getAppName()}/profile/${user.id}/?tab=${props.enableHighscore ? 2 : 1}`, \"forward\");\r\n props.closeSideMenu();\r\n }}\r\n />\r\n
\r\n \r\n {\r\n e.stopPropagation();\r\n pageNavigator(`/${getAppName()}/profile/${user.id}/?tab=1`, \"forward\");\r\n props.closeSideMenu();\r\n }}\r\n >\r\n {user.masterGroup.title}, {user.userGroup.title}\r\n \r\n
\r\n {user.name}
\r\n\r\n
\r\n \r\n \r\n {props.pages.map((page, pageKey) => (\r\n
\r\n \r\n {iconConvertor(page.icon, { flexShrink: 0, color: colors.darkGrey })}\r\n {\r\n props.closeSideMenu();\r\n pageNavigator(linkPathCreator(page, \"absolute\"), \"forward\");\r\n }}\r\n key={pageKey}\r\n >\r\n {page.title}\r\n \r\n {!page.notifications ? null :
\r\n ))}\r\n \n {status === punchStatuses.open && (\n <>\n
\n );\n}\n\nconst container = (offsetBottom) => css`\n font-weight: 700;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n margin-bottom: ${offsetBottom ? \"-0.25rem\" : 0};\n }\n\n &.Open {\n color: ${colors.red};\n }\n &.Cleared {\n color: ${colors.vividBlue};\n }\n &.Closed {\n color: ${colors.green};\n }\n`;\n\nexport default PunchStatus;\n","import React, { useEffect, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\n\n// styling\nimport { css } from \"emotion\";\nimport colors from \"../../../style/colors\";\n\n// hooks\nimport useOverviewData from \"./hooks/useOverviewData\";\n\n// ui-Components\nimport InlineSpinner from \"../../ui/InlineSpinner\";\nimport DropDownList from \"../../ui/DropDownList\";\nimport TextInput from \"../../ui/TextInput\";\nimport Page from \"../../ui/Page\";\nimport { AlertCircleOutlineIcon, ArrowBackIcon, ChevronRightIcon, PlusIcon } from \"mdi-react\";\nimport Button from \"../../ui/Button\";\nimport TabView from \"../../ui/TabView\";\nimport TabBar from \"../../ui/TabBar\";\nimport usePageAndBackButtonURL from \"../../../hooks/usePageAndBackButtonURL\";\nimport TopBar from \"../../ui/TopBar\";\nimport pageNavigator from \"../../../utilities/page-navigator\";\nimport StatusBox from \"../../ui/StatusBox\";\nimport ListItem from \"../../ui/ListItem\";\nimport { showModalPage } from \"../../../actions/uiActions\";\nimport PunchModal from \"./PunchModal\";\nimport punchStatuses from \"../../../config/punchStatuses\";\nimport PunchStatus from \"./PunchStatus\";\n\nlet timeout;\nfunction PunchOverview(props) {\n const dispatch = useDispatch();\n const [filterData, setFilterData] = useState({\n punchList: \"\",\n punchOwner: \"\",\n punchOrigin: \"\",\n punchLocation: \"\",\n punchCategory: \"\",\n system: \"\",\n searchterm: \"\",\n });\n\n const [activeTabIndex, setActiveTabIndex] = useState(0);\n const tabs = [\n { title: \n ({\n title: tab.title,\n color: tab.color,\n onClick: () => setActiveTabIndex(index),\n }))}\n />\n
\n \n {!isRIG && metaData.data.punchLists.length > 1 && (\n handleDropdownChange(e, filterData)}\n selectedContentId={filterData.punchList}\n />\n )}\n {\n setFilterData({\n ...filterData,\n punchOwner: \"\",\n punchOrigin: \"\",\n punchCategory: \"\",\n punchLocation: \"\",\n system: \"\",\n searchterm: \"\",\n });\n }}\n >\n Clear Filters\n \n dispatch(showModalPage({ content:
\n\n \n {statusCounts.loading && (\n
\n \n
\n )}\n {!statusCounts.loading && !statusCounts.error && (\n <>\n {statusCounts.data.open} open
\n{statusCounts.data.cleared} cleared
\n{statusCounts.data.closed} closed
\n \n )}\n\n handleDropdownChange(e, filterData)}\n value={filterData.searchterm}\n />\n
\n \n handleDropdownChange(e, filterData)}\n selectedContentId={filterData.punchOwner}\n />\n handleDropdownChange(e, filterData)}\n selectedContentId={filterData.punchOrigin}\n />\n {/* Don't display the punch category for SemCompletion RIG */}\n {!isRIG && (\n handleDropdownChange(e, filterData)}\n selectedContentId={filterData.punchCategory}\n />\n )}\n {!isRIG && (\n handleDropdownChange(e, filterData)}\n selectedContentId={filterData.punchLocation}\n />\n )}\n handleDropdownChange(e, filterData)}\n selectedContentId={filterData.system}\n />\n
\n\n \n {punches.data.length > 0 &&\n !punches.error &&\n punches.data.map((punch) => {\n const {\n category: { name: categoryName = \"\" } = {},\n location: { name: locationName = \"\" } = {},\n punchOrigin: { name: punchOriginName = \"\" } = {},\n punchOwner: { name: punchOwnerName = \"\" } = {},\n system: { name: systemName = \"\" } = {},\n workType: { name: workTypeName = \"\" } = {},\n createdDate,\n } = punch;\n\n const subTitle = [\n punchOwnerName,\n workTypeName,\n locationName,\n punchOriginName,\n !isRIG ? categoryName : \"\",\n systemName,\n createdDate.split(\"T\").shift(),\n ].filter((d) => d.trim() !== \"\");\n\n return (\n void pageNavigator(match.url + \"/\" + punch.id, \"forward\")}\n title={`${punch.punchList ? `${punch.punchList.idPrefix} -` : \"\"} ${punch.punchId} - ${\n punch.title ? punch.title : \"\"\n }`}\n subTitle={subTitle.join(\" - \")}\n iconRight={
\n );\n};\n\nconst container = () => css`\n .header {\n background-color: ${colors.white};\n padding: 1rem;\n\n .punch-count-container {\n flex-basis: 50%;\n padding: 0 0.5rem;\n display: flex;\n\n p {\n margin-right: 0.5rem;\n font-size: 0.9rem;\n font-weight: 700;\n }\n }\n\n .row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0.85rem;\n\n &:last-of-type {\n margin-bottom: 0;\n }\n\n .dropdown {\n flex-grow: 1;\n margin: 0 0.35rem;\n flex-basis: 25%;\n\n &:first-of-type {\n margin-left: 0;\n }\n &:last-of-type {\n margin-right: 0;\n }\n }\n }\n }\n\n button svg {\n display: inline-block;\n margin-bottom: -0.35rem;\n }\n`;\n\nexport default PunchOverview;\n","import React from \"react\";\nimport { css } from \"emotion\";\nimport tinycolor from \"tinycolor2\";\nimport { connect } from \"react-redux\";\nimport PropTypes from \"prop-types\";\nimport InlineSpinner from \"./InlineSpinner\";\nimport colors from \"../../style/colors\";\n\n/** Generic button component to be used across our application.\n * @param {*} props\n * @param {string} props.styleType - The type of button. Supported types: `neutral|error|secondary`\n * @param {boolean} props.disabled - Makes the button disabled\n * @param {boolean} props.active - Shows a spinner inside the button\n * @param {function} props.onClick - Main event handler\n * @param {string} props['data-test-id'] - Test id\n * @param {reactElement} props.iconLeft - DEPRECATION WARNING! May be removed! See examples. Icon to display left of the title\n * @param {reactElement} props.iconRight - DEPRECATION WARNING! May be removed! See examples. Icon to display right of the title\n * @param {string} props.title - DEPRECATION WARNING! May be removed! See examples. Title of the button\n *\n * Previously we used props to control title and icons but have since opted in for using\n * the children prop, making it way more flexible.\n *\n * @example\n * ```jsx static\n * // Current usage\n * \n *\n *\n * // LEGACY USAGE! DONT DO THIS GOING FORWARD!\n * \n\t\t\t{/* Form for open punches */}\n\t\t\t{punch.status === punchStatuses.open && (\n\t\t\t\t
\n\t);\n}\n\nfunction OpenPunchForm({ isFormVisible, setIsFormVisibile, punch, getPunch, punchAllowances }) {\n\tconst [formData, setFormData] = useState({\n\t\tname: '',\n\t\tdate: format(new Date(), 'yyyy-MM-dd', 0),\n\t\tcomment: '',\n\t\timage: undefined\n\t});\n\tconst [formLoading, setFormloading] = useState(false);\n\n\tfunction onChange(e, formData) {\n\t\tsetFormData({ ...formData, [e.target.name]: e.target.value });\n\t}\n\n\tfunction clearPunch(formData) {\n\t\tlet apiReadyData = {\n\t\t\t...formData,\n\t\t\tdate: formData.date.replace(/-/g, '')\n\t\t};\n\n\t\tif (!formData.name || !formData.date || !formData.comment)\n\t\t\treturn notification.error({\n\t\t\t\tduration: 7,\n\t\t\t\tmessage: 'FAILED',\n\t\t\t\tdescription: 'Some fields are missing. Make sure to fill out name, date and comment and try again'\n\t\t\t});\n\n\t\tsetFormloading(true);\n\n\t\treq()\n\t\t\t.put(`semcompletion/v2/punches/${punch.id}/clear`, apiReadyData)\n\t\t\t.then(({ data }) => {\n\t\t\t\tsetIsFormVisibile(false);\n\t\t\t\tsetTimeout(getPunch, 300);\n\t\t\t\tsetFormloading(false);\n\t\t\t})\n\t\t\t.catch(err => {\n\t\t\t\tconsole.log(err);\n\t\t\t\tsetFormloading(false);\n\t\t\t});\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t\n\t\t\t\t
\n\n\t\t\t\n\t\t\t\t\t{punchAllowances.canClear && (\n\t\t\t\t\t\t setIsFormVisibile(!isFormVisible)}\n\t\t\t\t\t\t\tclassName=\"btn-show-form\"\n\t\t\t\t\t\t\tsecondary={true}>\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t onChange(e, formData)} />\n\t\t\t\t\t
\n\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t onChange(e, formData)} />\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t onChange(e, formData)}\n\t\t\t\t\t\t\tshowCount={true}\n\t\t\t\t\t\t\tstyle={{ height: 120 }}\n\t\t\t\t\t\t\ttype=\"textarea\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t setFormData({ ...formData, image: files[0] })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t setIsFormVisibile(!isFormVisible)}\n\t\t\t\t\t\t\tclassName=\"btn-hide-form\"\n\t\t\t\t\t\t\tsecondary={true}>\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t clearPunch(formData)}>\n\t\t\t\t\t\t\t{formLoading ? (\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t{punchAllowances.canOpen && (\n\t\t\t\t\t\t setIsFormVisibile(!isFormVisible)}>\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t onChange(e, formData)} name=\"name\" />\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t onChange(e, formData)}\n\t\t\t\t\t\t\tshowCount={true}\n\t\t\t\t\t\t\tstyle={{ height: 120 }}\n\t\t\t\t\t\t\ttype=\"textarea\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t setFormData({ ...formData, image: files[0] })}\n\t\t\t\t\t\t\tname=\"image\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t setIsFormVisibile(!isFormVisible)}\n\t\t\t\t\t\t\tclassName=\"btn-hide-form\"\n\t\t\t\t\t\t\tsecondary={true}>\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t openPunch(formData)}>\n\t\t\t\t\t\t\t{formLoading ? (\n\t\t\t\t\t\t\t\t \n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\n\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t{punchAllowances.canOpen && (\n\t\t\t\t\t\t setIsFormVisibile(!isFormVisible)}>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t{formLoading ? (\n\t\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t onChange(e, formData)} name=\"name\" />\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t onChange(e, formData)}\n\t\t\t\t\t\t\tshowCount={true}\n\t\t\t\t\t\t\tstyle={{ height: 120 }}\n\t\t\t\t\t\t\ttype=\"textarea\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t setFormData({ ...formData, image: files[0] })}\n\t\t\t\t\t\t\tname=\"image\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t setIsFormVisibile(!isFormVisible)}\n\t\t\t\t\t\t\tclassName=\"btn-hide-form\"\n\t\t\t\t\t\t\tsecondary={true}>\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t openPunch(formData)}>\n\t\t\t\t\t\t\t{formLoading ? (\n\t\t\t\t\t\t\t\t \n\t\t\t\t\t
\n\t\t\t\t\n {activityLog.map((logEntry) => (\n
\n );\n}\n\nfunction LogEntry({ logEntry }) {\n const [isExpanded, setIsExpanded] = useState(false);\n const dispatch = useDispatch();\n\n return (\n \n \n
\n \n \n );\n}\n\nfunction ActionEmblem({ action }) {\n switch (action) {\n case \"CREATE\":\n return (\n \n setIsExpanded(!isExpanded)}>\n {isExpanded ? \"Hide\" : \"Show\"} details\n \n )}\n
\n \n {logEntry.date.slice(0, 4)}-{logEntry.date.slice(4, 6)}-{logEntry.date.slice(6, 8)}\n
\n )}\n\n {logEntry.user} {logEntry.userGroup}\n
\n {(logEntry.comment || logEntry.image) && (\n\n {logEntry.comment && \n \n
\n )}\n {logEntry.comment}
}\n {logEntry.image && (\n\n
\n );\n case \"CLEAR\":\n return (\n \n
\n );\n case \"OPEN\":\n return (\n \n
\n );\n case \"CLOSE\":\n return (\n \n
\n );\n case \"EDIT\":\n return (\n \n
\n );\n default:\n return null;\n }\n}\n\nconst container = () => css`\n .log-entry {\n border: 1px ${colors.midGrey} solid;\n border-radius: 3px;\n padding: 0.65rem 0.5rem;\n margin: 0 0 0.35rem;\n\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n\n .user {\n flex-grow: 1;\n }\n .time {\n margin-right: 1rem;\n color: ${colors.darkGrey};\n }\n }\n\n .details-content {\n p.comment {\n margin-top: 0.5rem;\n }\n\n .image-wrapper {\n margin-top: 0.5rem;\n flex: 1 1 46%;\n min-width: 300px;\n padding-bottom: 40%;\n border: 1px ${colors.midGrey} solid;\n border-radius: 5px;\n background-size: cover;\n background-position: center;\n position: relative;\n\n button.fullscreen-toggle {\n position: absolute;\n top: 1rem;\n right: 1rem;\n background-color: ${colors.white};\n width: 2.5rem;\n height: 2.5rem;\n border-radius: 1.25rem;\n border: 1px ${colors.lightGrey} solid;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0.9;\n\n &:hover {\n cursor: pointer;\n opacity: 1;\n }\n\n svg {\n color: ${colors.darkGrey};\n width: 1.5rem;\n height: 1.5rem;\n }\n }\n }\n }\n\n &.create,\n &.edit {\n border-left: ${colors.darkGrey} 3px solid;\n .status-emblem {\n color: ${colors.darkGrey};\n }\n }\n &.open {\n border-left: ${colors.red} 3px solid;\n .status-emblem {\n color: ${colors.red};\n }\n }\n &.clear {\n border-left: ${colors.vividBlue} 3px solid;\n .status-emblem {\n color: ${colors.vividBlue};\n }\n }\n &.close {\n border-left: ${colors.green} 3px solid;\n .status-emblem {\n color: ${colors.green};\n }\n }\n .status-emblem {\n font-weight: 700;\n display: flex;\n align-items: center;\n margin-right: 0.75rem;\n width: 100px;\n\n svg {\n margin-right: 0.35rem;\n margin-left: 0.25rem;\n }\n }\n }\n`;\n\nexport default PunchActivityLog;\n","import { useSelector } from \"react-redux\";\nimport { useEffect, useState } from \"react\";\nimport req from \"../../../../utilities/request-utility\";\n\nfunction usePunchSingleData(punchId) {\n const selectedProject = useSelector((s) => s.semcompletion.selectedProject);\n\n const [punch, setPunch] = useState({\n data: {},\n loading: true,\n error: false,\n });\n\n const [punchAllowances, setPunchAllowances] = useState({\n data: {},\n loading: true,\n error: false,\n });\n\n useEffect(() => {\n getPunch();\n getPunchAllowances();\n // eslint-disable-next-line\n }, []);\n\n function getPunch() {\n setPunch({ ...punch, loading: true });\n\n req()(`semcompletion/v2/punches/${punchId}?projectId=${selectedProject.id}`)\n .then(({ data }) =>\n setPunch({\n ...punch,\n loading: false,\n error: false,\n data: data,\n })\n )\n .catch((err) =>\n setPunch({\n ...punch,\n loading: false,\n error: true,\n })\n );\n }\n\n function getPunchAllowances() {\n setPunch({ ...punch, loading: true });\n\n req()(`semcompletion/v2/punches/${punchId}/allowances?projectId=${selectedProject.id}`)\n .then(({ data }) =>\n setPunchAllowances({\n ...punch,\n loading: false,\n error: false,\n data: data,\n })\n )\n .catch((err) =>\n setPunchAllowances({\n ...punch,\n loading: false,\n error: true,\n })\n );\n }\n\n return { punch, punchAllowances, getPunch };\n}\n\nexport default usePunchSingleData;\n","import React from \"react\";\nimport { chunk } from \"lodash\";\nimport nl2br from \"react-nl2br\";\n\n// styling\nimport { css } from \"emotion\";\nimport colors from \"../../../style/colors\";\n//actions\n\n// ui-Components\nimport InlineSpinner from \"../../ui/InlineSpinner\";\nimport Page from \"../../ui/Page\";\nimport { AlertDecagramIcon, ArrowBackIcon, ArrowExpandIcon, PencilIcon } from \"mdi-react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport TopBar from \"../../ui/TopBar\";\nimport pageNavigator from \"../../../utilities/page-navigator\";\nimport { showLightBox, showModalPage } from \"../../../actions/uiActions\";\nimport PunchModal from \"./PunchModal\";\nimport PunchSingleHeader from \"./PunchSingleHeader\";\nimport PunchActivityLog from \"./PunchActivityLog\";\nimport ScrollView from \"../../ui/ScrollView\";\nimport usePunchSingleData from \"./hooks/usePunchSingleData\";\nimport punchStatuses from \"../../../config/punchStatuses\";\nimport common from \"../../../style/common\";\nimport StatusBox from \"../../ui/StatusBox\";\n\nfunction PunchOverview(props) {\n const dispatch = useDispatch();\n const selectedProject = useSelector((s) => s.semcompletion.selectedProject);\n const { punch, punchAllowances, getPunch } = usePunchSingleData(props.match.params.id);\n\n const isRIG = selectedProject.projectType === \"02B\" ? true : false;\n\n const {\n punchList = {},\n punchOwner = {},\n punchOrigin = {},\n category = {},\n location = {},\n workType = {},\n tagNumber = \"\",\n system = {},\n description = \"\",\n title = {},\n createdBy = \"\",\n } = punch.data;\n\n let punchData = [];\n if (!punch.loading && !punchAllowances.loading && !punch.error) {\n punchData = chunk(\n [\n { label: \"Title\", value: title },\n { label: \"Punch no.\", value: punch.data.punchId },\n { label: \"Punch list\", value: punchList.name },\n { label: \"Punch owner\", value: punchOwner.name },\n { label: \"Punch origin\", value: punchOrigin.name },\n // Don't display the punch category for SemCompletion RIG\n !isRIG ? { label: \"Punch category\", value: category.name } : null,\n { label: \"Punch location\", value: location.name },\n { label: \"Issue type\", value: workType.name },\n { label: \"Tag number / Procedure\", value: tagNumber },\n { label: \"System\", value: system.name },\n { label: \"Description\", value: description },\n ].filter((d) => d),\n 2\n );\n }\n\n return (\n \n
\n {punchData.map((row, index) => {\n return (\n \n
\n Punch data
\n\n {row.map((column) => (\n
\n );\n })}\n\n \n
\n ))}\n \n {column.label}\n {column.label === \"Description\" ?
{nl2br(column.value)}
: column.value}\n \n\n {punch.data.images.map((image) => (\n \n \n
\n ))}\n \n\n \n\n {/* Activity log */}\n \n
\n\n \n
\n Activity Log
\n\n
\n \n
\n \n changeDefaultProject(e.target.value)}\n options={projects.map((p) => ({ label: `${p.number} - ${p.description}`, value: p.id }))}\n style={{ marginBottom: \"2rem\" }}\n value={selectedProject.id}\n />\n
\n \n
\n\n \n \n Current project:\n {selectedProject.id && selectedProject.number && selectedProject.description ? (\n <>\n {selectedProject.number} - {selectedProject.description}\n \n ) : (\n No project selected\n )}\n
\n\n {uiState === uiStates.loading && (\n <>\n
\n );\n}\n\nconst componentStyles = () => css`\n position: absolute;\n top: 0;\n right: 0;\n padding: 0.75rem;\n display: flex;\n align-items: center;\n\n div.spinner {\n margin-bottom: 0px;\n margin-left: 0.35rem;\n margin-right: 0.15rem;\n }\n\n p {\n font-size: 0.8rem;\n color: ${colors.darkGrey};\n }\n`;\n\nexport default SemcompletionInitializer;\n","import { useQuery } from \"react-query\";\n\nimport req from \"../../../../../utilities/request-utility\";\n\nfunction useOverviewData() {\n const {\n isLoading: masterGroupsLoading,\n error: masterGroupsError,\n data: { data: masterGroupsData = [] } = {},\n } = useQuery(\"MasterGroups\", () => req()(\"/masterGroups\"), {\n staleTime: 60 * 60 * 1000, //1 hour\n });\n const masterGroups = {\n isLoading: masterGroupsLoading,\n error: masterGroupsError,\n data: masterGroupsData.map((d) => ({ ...d, name: d.title })),\n };\n\n const {\n isLoading: customersLoading,\n error: customersError,\n data: { data: customersData = [] } = {},\n } = useQuery(\"Customers\", () => req()(\"/semcompletion/customers\"), {\n staleTime: 60 * 60 * 1000, //1 hour\n });\n const customers = {\n isLoading: customersLoading,\n error: customersError,\n data: customersData,\n };\n\n return { customers, masterGroups };\n}\n\nexport default useOverviewData;\n","import React, { useState } from \"react\";\nimport { notification } from \"antd\";\nimport { css } from \"emotion\";\n\n// styling\nimport colors from \"../../../../style/colors\";\n\n// utlities\nimport req from \"../../../../utilities/request-utility\";\nimport getErrorMessage from \"../../../../utilities/get-error-message\";\n\n// ui-Components\nimport DropDown from \"../../../ui/DropDown\";\nimport Button from \"../../../ui/Button\";\nimport { useDispatch } from \"react-redux\";\nimport ScrollView from \"../../../ui/ScrollView\";\nimport { hideModalPage } from \"../../../../actions/uiActions\";\n\nimport InlineSpinner from \"../../../ui/InlineSpinner\";\n\nimport useOverviewData from \"./hooks/useOverviewData\";\n\nfunction PunchModal({ currentValues = [], masterGroup, refreshData }) {\n const dispatch = useDispatch();\n const { customers } = useOverviewData();\n\n const [formData, setFormData] = useState({ customer: \"\" });\n const [formLoading, setFormloading] = useState(false);\n\n const isFormValid = (formData) => {\n if (!formData.customer) {\n return {\n status: false,\n message: \"Make sure to fill out customer and then try again\",\n };\n }\n\n return { status: true };\n };\n\n const save = async () => {\n const isFormValidData = isFormValid(formData);\n if (!isFormValidData.status)\n return notification.error({ duration: 7, message: \"FAILED\", description: isFormValidData.message });\n\n try {\n setFormloading(true);\n await req().post(`/masterGroups/${masterGroup}/customers`, formData);\n dispatch(hideModalPage());\n if (refreshData) refreshData();\n setFormloading(false);\n\n notification.success({\n duration: 7,\n message: \"SUCCESS\",\n description: \"You have successfully added a customer to the user group\",\n });\n } catch (error) {\n notification.error({ duration: 7, message: \"FAILED\", description: getErrorMessage(error) });\n setFormloading(false);\n }\n };\n\n const onChange = (e) => setFormData({ ...formData, [e.target.name]: e.target.value });\n\n const customerIds = currentValues.map((d) => d.id);\n\n return (\n Syncing...
\n\n
\n\n \n \n (customerIds.includes(d.id) ? false : true))\n .map((d) => ({ label: d.name, value: d.id }))\n : []\n }\n placeholder=\"Click to choose\"\n value={formData[\"customer\"]}\n />\n
\n \n
\n \n \n
\n \n
\n \n setMasterGroup(e.target.value)}\n selectedContentId={masterGroup}\n />\n \n {masterGroup && (\n \n dispatch(\n showModalPage({\n content: (\n
\n \n {masterGroupsFetching && !masterGroupsError && onDelete(d.connectionId)}\n title={d.number}\n subTitle={d.name}\n iconRight={
\n \n )}\n \r\n {options.map((checkbox, index) => (\r\n \r\n ))}\r\n
\r\n );\r\n};\r\nconst componentStyle = (primaryColor) => css`\r\n border: 1px solid ${colors.midGrey};\r\n border-radius: 3px;\r\n\r\n .checkbox {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n -webkit-appearance: none;\r\n border-bottom: 1px solid ${colors.midGrey};\r\n padding: 0.75rem 0.85rem;\r\n font-weight: 400;\r\n\r\n svg {\r\n color: ${colors.midGrey};\r\n flex-shrink: 0;\r\n }\r\n\r\n p {\r\n margin-left: 0.5rem;\r\n font-size: 1rem;\r\n font-family: ${common.fontStack};\r\n }\r\n\r\n &.selected,\r\n &.selected svg {\r\n font-weight: 700;\r\n color: ${primaryColor};\r\n }\r\n }\r\n label:last-child div {\r\n border-bottom: none;\r\n }\r\n`;\r\nCheckboxGroup.propTypes = {\r\n /** Array of items to be displayed, its structure should be [ { id: XX, title: \"YY\" } ]*/\r\n options: PropTypes.array,\r\n\r\n /** Overriding of style in component, if you have very specific needs */\r\n style: PropTypes.object,\r\n};\r\nconst mapStateToProps = (state) => ({\r\n appConfig: state.appConfig,\r\n});\r\n\r\nexport default connect(mapStateToProps, null)(CheckboxGroup);\r\n","import React, { Component } from \"react\";\nimport { parse, format, addDays } from \"date-fns\";\nimport { connect } from \"react-redux\";\nimport { bindActionCreators } from \"redux\";\nimport { Input, notification } from \"antd\";\nimport params from \"jquery-param\";\n\nimport req from \"../../utilities/request-utility\";\n\n// css\nimport { css } from \"emotion\";\nimport colors from \"../../style/colors\";\nimport { CloseIcon, InformationOutlineIcon } from \"mdi-react\";\n\n// actions\nimport { hideModalPage } from \"../../actions/uiActions\";\n\n// ui-components\nimport ScrollView from \"../ui/ScrollView\";\nimport Page from \"../ui/Page\";\nimport TextInput from \"../ui/TextInput\";\nimport DropDown from \"../ui/DropDown\";\nimport DatePicker from \"../ui/DatePicker\";\nimport TextAreaInput from \"../ui/TextareaInput\";\nimport Button from \"../ui/Button\";\nimport common from \"../../style/common\";\nimport zeroPad from \"../../utilities/zero-pad\";\nimport InlineSpinner from \"../ui/InlineSpinner\";\nimport StatusBox from \"../ui/StatusBox\";\nimport CheckboxGroup from \"../ui/CheckboxGroup\";\n\nconst rotationStatuses = {\n noChange: \"NO_CHANGE\",\n beforePlan: \"BEFORE_PLAN_ROTATION\",\n startPlanned: \"START_PLANNED_ROTATION\",\n startPlannedNightShift: \"START_PLANNED_ROTATION_NIGHT_SHIFT\",\n endOfRotation: \"END_OF_ROTATION\",\n changeShift: \"CHANGE_SHIFT\",\n preRotationDayShift: \"PRE_ROTATION_DAY_SHIFT\",\n preRotationNightShift: \"PRE_ROTATION_NIGHT_SHIFT\",\n oneDayCourse: \"ONE_DAY_COURSE\",\n startMultiDayCourse: \"START_MULTI_DAY_COURSE\",\n course: \"COURSE\",\n endOfMultiDayCourse: \"END_OF_MULTI_DAY_COURSE\",\n};\n\nclass WorkTimeRegistration extends Component {\n constructor(props) {\n super(props);\n this.state = {\n // Formdata\n formData: {\n location: undefined, //offshore/onshore\n project: undefined,\n subProject: undefined,\n projectActivity: undefined,\n activities: [],\n description: \"\",\n date: undefined,\n startTimeHours: \"00\",\n startTimeMinutes: \"00\",\n endTimeHours: \"00\",\n endTimeMinutes: \"00\",\n rotationStatus: rotationStatuses.noChange,\n absenceNightTime: false,\n midRotation: false,\n courses: false,\n },\n\n // Api data\n projects: [],\n subProjects: [],\n projectActivities: [],\n wageCodes: [],\n loadingWageCodes: true,\n\n // Local state\n isProjectActivitiesEmpty: false,\n selectedActivity: null,\n isFormReady: true,\n submittingForm: false,\n editMode: false,\n errorLoadingFormData: false,\n // wageCodesCourses: [\"315\", \"301\", \"320\"],\n wageCodesNightTime: [\"311\", \"313\", \"352\", \"362\"],\n midRotationStatuses: [\"NO_CHANGE\", \"START_PLANNED_ROTATION\", \"START_PLANNED_ROTATION_NIGHT_SHIFT\", \"END_OF_ROTATION\"],\n courseRotations: [\"ONE_DAY_COURSE\", \"START_MULTI_DAY_COURSE\", \"COURSE\", \"END_OF_MULTI_DAY_COURSE\"],\n };\n }\n\n componentDidMount = () => {\n let { updateRegistration } = this.props;\n // EDIT MODE\n if (updateRegistration) {\n this.initializeFormForEdit();\n this.setState({ editMode: true });\n\n // ADD MODE\n } else {\n let date = format(new Date(), \"yyyy-MM-dd\");\n this.setState({ formData: { ...this.state.formData, date } }); // Default date to today (nice detail)\n\n // Initialize data-fetching\n this.getDefaultProjectSubProjectAndActivity().then(this.getProjects);\n this.getWageCodes();\n\n // Gets last used time-item in local storage (uses whatever the user entered last)\n let lastUsedTime = localStorage.getItem(\"semcotime-last-time-input-norway\");\n if (lastUsedTime) {\n lastUsedTime = JSON.parse(lastUsedTime);\n this.setState((state) => ({\n formData: {\n ...state.formData,\n startTimeHours: lastUsedTime.startTimeHours,\n startTimeMinutes: lastUsedTime.startTimeMinutes,\n endTimeHours: lastUsedTime.endTimeHours,\n endTimeMinutes: lastUsedTime.endTimeMinutes,\n },\n }));\n }\n }\n };\n\n async initializeFormForEdit() {\n const { registration, fetchDate, selectedUser } = this.props;\n\n try {\n this.setState({ isFormReady: false });\n let { data } = await req()(\n `semcotime/work-hours/v3/${registration.timeCardTransactionId || registration.incrementTransactionId}?${params({\n date: fetchDate,\n externalId: selectedUser,\n })}`\n );\n\n await this.getProjects();\n //temp solution\n const aaa = this.state.projects.filter((d) => d.name === registration.registrations[0].project)[0];\n this.setState({ formData: { ...this.state.formData, project: aaa.id } });\n await this.getSubProjects();\n this.setState({\n formData: { ...this.state.formData, subProject: registration.registrations[0].subProjectId },\n });\n await this.getProjectActivities();\n this.setState({ formData: { ...this.state.formData, projectActivity: data.activitySequence } });\n await this.getWageCodes();\n\n this.setState({\n formData: {\n ...this.state.formData,\n date: format(parse(data.date, \"yyyyMMdd\", 0), \"yyyy-MM-dd\"),\n startTimeHours: data.startTime === \"Invalid date\" ? \"\" : format(parse(data.startTime, \"yyyyMMddHHmmss\", 0), \"HH\"),\n startTimeMinutes:\n data.startTime === \"Invalid date\" ? \"\" : format(parse(data.startTime, \"yyyyMMddHHmmss\", 0), \"mm\"),\n endTimeHours: data.endTime === \"Invalid date\" ? \"\" : format(parse(data.endTime, \"yyyyMMddHHmmss\", 0), \"HH\"),\n endTimeMinutes: data.endTime === \"Invalid date\" ? \"\" : format(parse(data.endTime, \"yyyyMMddHHmmss\", 0), \"mm\"),\n description: data.description,\n transactionId: data.transactionId,\n rotationStatus: this.getRotationStatusFromExistingData(data),\n courses: data.courses,\n activities: data.extras.map((extra) => {\n const wageCode = this.state.wageCodes.find((d) => d.id === extra.wageCode);\n return {\n id: extra.wageCode,\n name: wageCode ? wageCode.name : extra.wageCode,\n hours: extra.hours,\n transactionId: extra.transactionId,\n };\n }),\n absenceNightTime: data.absenceNightTime,\n midRotation: data.midRotation,\n },\n });\n\n this.setState({ isFormReady: true });\n } catch (err) {\n console.log(\"err: \", err.response);\n this.setState({ errorLoadingFormData: true });\n }\n }\n\n getRotationStatusFromExistingData(apiData) {\n if (apiData.endOfRotation === true) return rotationStatuses.endOfRotation;\n else if (apiData.firstDay === true) return rotationStatuses.startPlanned;\n else if (apiData.firstDayNightShift === true) return rotationStatuses.startPlannedNightShift;\n else if (apiData.preRotation === true) return rotationStatuses.beforePlan;\n else if (apiData.changeShift === true) return rotationStatuses.changeShift;\n else if (apiData.preRotationDayShift) return rotationStatuses.preRotationDayShift;\n else if (apiData.preRotationNightShift) return rotationStatuses.preRotationNightShift;\n else if (apiData.oneDayCourse === true) return rotationStatuses.oneDayCourse;\n else if (apiData.startMultiDayCourse === true) return rotationStatuses.startMultiDayCourse;\n else if (apiData.course === true) return rotationStatuses.course;\n else if (apiData.endOfMultiDayCourse === true) return rotationStatuses.endOfMultiDayCourse;\n else return rotationStatuses.noChange;\n }\n\n getProjects = () => {\n const { selectedUser } = this.props;\n\n return new Promise((resolve, reject) => {\n req()(`semcotime/projects?${params({ externalId: selectedUser })}`)\n .then((res) => res.data)\n .then((projects) => this.setState({ projects }))\n .then(resolve)\n .catch((err) => {\n reject();\n });\n });\n };\n\n getSubProjects = () => {\n return new Promise((resolve, reject) => {\n req()(`semcotime/projects/${this.state.formData.project}/sub-projects`)\n .then((res) => res.data)\n .then((subProjects) => this.setState({ subProjects }))\n .then(resolve)\n .catch((err) => {\n reject(err);\n });\n });\n };\n\n getProjectActivities = () => {\n this.setState({ isProjectActivitiesEmpty: false });\n let { project, subProject, date } = this.state.formData;\n\n return new Promise((resolve, reject) => {\n req()(\n `semcotime/projects/${project}/sub-projects/${subProject}/activities?${params({\n date: date ? date : format(new Date(), \"yyyy-MM-dd\"),\n })}`\n )\n .then((res) => res.data)\n .then((projectActivities) => {\n if (projectActivities.length === 0) {\n this.setState({ isProjectActivitiesEmpty: true });\n }\n this.setState({ projectActivities });\n })\n .then(resolve)\n .catch((err) => {\n reject(err);\n });\n });\n };\n\n getWageCodes = () => {\n const { selectedUser } = this.props;\n\n return new Promise((resolve, reject) => {\n req()(`semcotime/wage-codes?${params({ externalId: selectedUser, wageType: \"increment\" })}`)\n .then((res) => res.data)\n .then((wageCodes) => {\n this.setState({ wageCodes, loadingWageCodes: false });\n resolve();\n })\n .catch((err) => {\n reject(err);\n });\n });\n };\n\n getDefaultProjectSubProjectAndActivity = () => {\n const { selectedUser } = this.props;\n\n return new Promise((resolve, reject) => {\n req()(`semcotime/projects/default-project-sub-project-and-activity?${params({ externalId: selectedUser })}`)\n .then(async ({ data }) => {\n // No default project for current user\n if (!data.projectId) {\n resolve();\n return;\n }\n\n await this.getProjects();\n // 1. set project id\n this.setState({ formData: { ...this.state.formData, project: data.projectId } });\n // 2. Fetch subProjects for given project id\n await this.getSubProjects();\n // 3. Set subProjectId\n this.setState({ formData: { ...this.state.formData, subProject: data.subProjectId } });\n // 4. Fetch project-activities\n await this.getProjectActivities();\n // 5. Set project-activitiy\n this.setState({ formData: { ...this.state.formData, projectActivity: data.activitySequence } });\n })\n .catch((err) => {\n resolve();\n });\n });\n };\n\n handleTimeInput = (e, type) => {\n // Exception for deleing\n if (e.target.value === \"\") {\n this.setState({\n formData: {\n ...this.state.formData,\n [e.target.name]: e.target.value,\n },\n });\n }\n\n let num = parseInt(e.target.value);\n\n if (\n // If not a number\n isNaN(num) ||\n // If length is more than two digits\n e.target.value.length > 2 ||\n // type is hours and value is not between 0-23\n (type === \"hours\" && (num < 0 || num > 23)) ||\n // type is minutes and value is not between 0-59\n (type === \"minutes\" && (num < 0 || num > 59))\n ) {\n return;\n }\n\n this.setState({\n formData: {\n ...this.state.formData,\n [e.target.name]: e.target.value,\n },\n });\n };\n\n handleFormChange = (e) => {\n let { formData, wageCodesNightTime } = this.state;\n const defaultTimeStamp = {\n endTimeHours: \"00\",\n endTimeMinutes: \"00\",\n startTimeHours: \"00\",\n startTimeMinutes: \"00\",\n };\n\n // Handling of absence night\n if (e.absenceNightTime) {\n this.setState({\n formData: {\n ...formData,\n absenceNightTime: e.absenceNightTime.length !== 0 ? true : false,\n // activities: formData.activities.filter((d) => wageCodesNightTime.includes(d.id)),\n // ...defaultTimeStamp\n },\n selectedActivity: null,\n });\n }\n\n if (e.midRotation) {\n this.setState({\n formData: {\n ...formData,\n midRotation: e.midRotation.length !== 0 ? true : false,\n rotationStatus: \"NO_CHANGE\",\n },\n });\n }\n\n // Handling of Courses\n if (e.courses) {\n const courses = e.courses.length !== 0 ? true : false;\n\n this.setState({\n selectedActivity: null,\n formData: {\n ...formData,\n courses,\n rotationStatus: courses ? \"COURSE\" : \"NO_CHANGE\",\n ...defaultTimeStamp,\n },\n });\n }\n\n // Handling of date\n if (e.date) {\n this.setState({\n formData: {\n ...formData,\n date: e.date,\n // projectActivity: undefined,\n },\n });\n\n return;\n }\n\n if (e.persist) e.persist();\n\n // Handling of rest\n if (e.target) {\n this.setState(\n {\n formData: {\n ...formData,\n [e.target.name]: e.target.value,\n },\n },\n () => {\n // Update formData variable (prevents stale state)\n formData = this.state.formData;\n\n // If a project is chosen, remove potentially chosen subProjects and projectActivites.\n // Both in the formData object, but also in the api-responses\n if (e.target.name === \"project\") {\n this.setState(\n {\n subProjects: [],\n projectActivities: [],\n formData: {\n ...formData,\n subProject: undefined,\n projectActivity: undefined,\n },\n },\n this.getSubProjects\n );\n }\n\n // The same as above, but only with subProject\n if (e.target.name === \"subProject\") {\n this.setState(\n {\n projectActivities: [],\n formData: {\n ...formData,\n projectActivities: undefined,\n },\n },\n this.getProjectActivities\n );\n }\n }\n );\n }\n };\n\n isFormValid = () => {\n let { formData } = this.state;\n\n // Cases hvor form er valid:\n // -------------------------\n // 1) For alle cases skal projekt, underprojekt, aktivitet og dato skal være udfyldt.\n // 2) Hvis der ikke er valgt en aktivitet skal både start- og sluttidspunkt være udfyldt\n // 3) Hvis der er valgt mindst en aktivitet, men ingen start og sluttidspunkt\n // 4) Hvis der er valgt mindst en aktivtet og både start og sluttidspunkt\n\n // 1)\n if (!formData.project || !formData.subProject || !formData.date) {\n notification.error({\n duration: 7,\n message: \"FAILED\",\n description: \"Du mangler at vælge entet projekt, underprojekt eller dato\",\n });\n return false;\n }\n\n // if (!formData.absenceNightTime) { removed condition if NIGHT is checked\n // 2)\n if (\n formData.activities.length === 0 &&\n (!formData.startTimeHours || !formData.startTimeMinutes || !formData.endTimeHours || !formData.endTimeMinutes)\n ) {\n notification.error({\n duration: 7,\n message: \"FAILED\",\n description: \"Du mangler start- og/eller sluttidspunkt.\",\n });\n return false;\n }\n\n // 4)\n if (\n formData.activities.length > 0 &&\n (formData.startTimeHours || formData.startTimeMinutes || formData.endTimeHours || formData.endTimeMinutes) &&\n !(formData.startTimeHours && formData.startTimeMinutes && formData.endTimeHours && formData.endTimeMinutes)\n ) {\n notification.error({\n duration: 7,\n message: \"FAILED\",\n description:\n \"Du har tilføjet et tillæg og kun udfyldt start- eller sluttidspunkt delvist. Du kan enten udfylde både start- og sluttidspunkt, slette værdierne fra start- og sluttidspunkt eller fjerne dit tillæg.\",\n });\n return false;\n }\n\n if (formData.courses === true && formData.activities.length === 0) {\n notification.error({\n duration: 7,\n message: \"FAILED\",\n description: \"Lønnskode 301, 315 eller 320 er nødvendig for kurs\",\n });\n return false;\n }\n\n return true;\n };\n\n getStartAndEndTimeAndDate() {\n let { formData } = this.state;\n\n let date = format(parse(formData.date, \"yyyy-MM-dd\", 0), \"yyyyMMdd\");\n\n let startTime = `${zeroPad(formData.startTimeHours)}${zeroPad(formData.startTimeMinutes)}`;\n let endTime = `${zeroPad(formData.endTimeHours)}${zeroPad(formData.endTimeMinutes)}`;\n\n // If registration stretch across midnight offset date for endTime by one\n if (startTime > endTime) {\n startTime = `${date}${zeroPad(formData.startTimeHours)}${zeroPad(formData.startTimeMinutes)}00`;\n endTime = `${format(addDays(parse(formData.date, \"yyyy-MM-dd\", 0), 1), \"yyyyMMdd\")}${zeroPad(\n formData.endTimeHours\n )}${zeroPad(formData.endTimeMinutes)}00`;\n } else {\n startTime = `${date}${zeroPad(formData.startTimeHours)}${zeroPad(formData.startTimeMinutes)}00`;\n endTime = `${date}${zeroPad(formData.endTimeHours)}${zeroPad(formData.endTimeMinutes)}00`;\n }\n\n // Handle when user hasn't entered start or end time (which is actually ok?)\n if (!formData.startTimeHours || !formData.startTimeMinutes) startTime = \"\";\n if (!formData.endTimeHours || !formData.endTimeMinutes) endTime = \"\";\n\n return { startTime, endTime, date };\n }\n\n handleSave = () => {\n let { addRegistration, hideModalPage, lang } = this.props;\n let { formData } = this.state;\n\n // eslint-disable-next-line\n if (this.isFormValid()) {\n this.setState({ submittingForm: true });\n let { startTime, endTime, date } = this.getStartAndEndTimeAndDate();\n addRegistration({\n date,\n startTime,\n endTime,\n project: formData.project,\n subProject: formData.subProject,\n description: formData.description,\n activitySequence: formData.projectActivity,\n extras: formData.activities.map(({ id, hours }) => ({ wageCode: id, hours })),\n preRotation: formData.rotationStatus === rotationStatuses.beforePlan,\n firstDay: formData.rotationStatus === rotationStatuses.startPlanned,\n firstDayNightShift: formData.rotationStatus === rotationStatuses.startPlannedNightShift,\n endOfRotation: formData.rotationStatus === rotationStatuses.endOfRotation,\n changeShift: formData.rotationStatus === rotationStatuses.changeShift,\n preRotationDayShift: formData.rotationStatus === rotationStatuses.preRotationDayShift,\n preRotationNightShift: formData.rotationStatus === rotationStatuses.preRotationNightShift,\n absenceNightTime: formData.absenceNightTime,\n midRotation: formData.midRotation,\n courses: formData.courses,\n oneDayCourse: formData.rotationStatus === rotationStatuses.oneDayCourse,\n startMultiDayCourse: formData.rotationStatus === rotationStatuses.startMultiDayCourse,\n course: formData.rotationStatus === rotationStatuses.course,\n endOfMultiDayCourse: formData.rotationStatus === rotationStatuses.endOfMultiDayCourse,\n })\n .then(() => {\n notification.success({\n duration: 7,\n message: \"SUCCESS\",\n description: lang.savedRegistrationToastContent,\n });\n hideModalPage();\n\n // Saves last used item in local storage\n localStorage.setItem(\n \"semcotime-last-time-input-norway\",\n JSON.stringify({\n startTimeHours: formData.startTimeHours,\n startTimeMinutes: formData.startTimeMinutes,\n endTimeHours: formData.endTimeHours,\n endTimeMinutes: formData.endTimeMinutes,\n })\n );\n })\n .catch((err) => {\n let errorMessage = \"Unspecified error\";\n if (err && err.response && err.response.data) errorMessage = err.response.data.message;\n\n notification.error({\n duration: 7,\n message: \"FAILED\",\n description: `${lang.errorSavingRegistrationToastContent}. Fejlkode: ${errorMessage}`,\n });\n\n this.setState({ submittingForm: false });\n });\n }\n };\n\n handleUpdate = () => {\n let { updateRegistration, hideModalPage, lang } = this.props;\n let { formData } = this.state;\n\n // eslint-disable-next-line\n if (this.isFormValid()) {\n this.setState({ submittingForm: true });\n let { startTime, endTime, date } = this.getStartAndEndTimeAndDate();\n\n let registration = {\n date,\n startTime,\n endTime,\n project: formData.project,\n subProject: formData.subProject,\n description: formData.description,\n activitySequence: formData.projectActivity,\n transactionId: formData.transactionId,\n extras: formData.activities.map(({ id, hours, transactionId = -1 }) => ({\n wageCode: id,\n hours,\n transactionId,\n })),\n absenceNightTime: formData.absenceNightTime,\n midRotation: formData.midRotation,\n courses: formData.courses,\n };\n\n // If user hos chosen nothing, not update these values\n if (formData.rotationStatus !== rotationStatuses.noChange) {\n registration = {\n ...registration,\n preRotation: formData.rotationStatus === rotationStatuses.beforePlan,\n firstDay: formData.rotationStatus === rotationStatuses.startPlanned,\n firstDayNightShift: formData.rotationStatus === rotationStatuses.startPlannedNightShift,\n endOfRotation: formData.rotationStatus === rotationStatuses.endOfRotation,\n changeShift: formData.rotationStatus === rotationStatuses.changeShift,\n preRotationDayShift: formData.rotationStatus === rotationStatuses.preRotationDayShift,\n preRotationNightShift: formData.rotationStatus === rotationStatuses.preRotationNightShift,\n oneDayCourse: formData.rotationStatus === rotationStatuses.oneDayCourse,\n startMultiDayCourse: formData.rotationStatus === rotationStatuses.startMultiDayCourse,\n course: formData.rotationStatus === rotationStatuses.course,\n endOfMultiDayCourse: formData.rotationStatus === rotationStatuses.endOfMultiDayCourse,\n };\n }\n\n updateRegistration(registration)\n .then(() => {\n notification.success({\n duration: 7,\n message: \"SUCCESS\",\n description: lang.savedRegistrationToastContent,\n });\n hideModalPage();\n })\n .catch((err) => {\n let errorMessage = \"Unspecified error\";\n if (err && err.response && err.response.data) errorMessage = err.response.data.message;\n\n notification.error({\n duration: 7,\n message: \"FAILED\",\n description: `${lang.errorSavingRegistrationToastContent}. Fejlkode: ${errorMessage}`,\n });\n\n this.setState({ submittingForm: false });\n });\n } else {\n notification.error({\n duration: 7,\n message: \"FAILED\",\n description: \"Du skal udfylde projekt, underprojekt, aktivitet, dato, og start- og sluttid\",\n });\n }\n };\n\n getProjectActivityPlaceholder() {\n let { lang } = this.props;\n let { isProjectActivitiesEmpty, projectActivities } = this.state;\n\n if (isProjectActivitiesEmpty === true) {\n return lang.noActivities;\n } else if (projectActivities.length === 0 && isProjectActivitiesEmpty === false) {\n return lang.loading;\n } else {\n return lang.chooseActivity;\n }\n }\n\n render() {\n const { lang, selectedUserName } = this.props;\n const {\n formData,\n projects,\n subProjects,\n projectActivities,\n wageCodes,\n isFormReady,\n loadingWageCodes,\n errorLoadingFormData,\n editMode,\n submittingForm,\n // wageCodesCourses,\n wageCodesNightTime,\n courseRotations,\n midRotationStatuses,\n } = this.state;\n\n if (!isFormReady && !errorLoadingFormData) {\n return (\n \n {selectedUserName ? (\n ({ label: `${d.id} - ${d.name}`, value: d.id }))}\n placeholder={lang.chooseProject}\n value={formData.project}\n />\n\n {/* Sub project (depends on project) */}\n {formData.project && (\n <>\n ({\n label: `${d.id} - ${d.description}`,\n value: d.id,\n }))}\n placeholder={lang.chooseSubproject}\n value={formData.subProject}\n />\n \n )}\n\n {/* Activity (depends on project and subProject) */}\n {formData.project && formData.subProject && (\n <>\n ({\n label: `${d.id} - ${d.description}`,\n value: d.id,\n }))}\n placeholder={this.getProjectActivityPlaceholder()}\n value={formData.projectActivity}\n />\n \n )}\n\n {/* Description */}\n {\n let rotationStatusList = [\n {\n value: rotationStatuses.noChange,\n label: `${formData.midRotation ? lang.midRotationNoChangeStatus : lang.noChangeInRotationStatus}`,\n },\n\n { value: rotationStatuses.preRotationDayShift, label: lang.preRotationDay },\n { value: rotationStatuses.preRotationNightShift, label: lang.preRotationNight },\n\n {\n value: rotationStatuses.startPlanned,\n label: `${formData.midRotation ? lang.midRotationFirstDayDay : lang.firstDayPlanRotation}`,\n },\n {\n value: rotationStatuses.startPlannedNightShift,\n label: `${formData.midRotation ? lang.midRotationFirstDayNight : lang.firstDayPlanRotationNightShift}`,\n },\n {\n value: rotationStatuses.endOfRotation,\n label: `${formData.midRotation ? lang.midRotationLastDay : lang.endOfRotation}`,\n },\n\n { value: rotationStatuses.oneDayCourse, label: lang.oneDayCourse },\n { value: rotationStatuses.startMultiDayCourse, label: lang.startMultiDayCourse },\n { value: rotationStatuses.course, label: lang.courseStatus },\n { value: rotationStatuses.endOfMultiDayCourse, label: lang.endOfMultiDayCourse },\n { value: rotationStatuses.changeShift, label: lang.changeShift },\n ];\n\n if (formData.midRotation)\n rotationStatusList = rotationStatusList.filter((d) => midRotationStatuses.includes(d.value));\n\n rotationStatusList = rotationStatusList.filter((d) =>\n formData.courses ? courseRotations.includes(d.value) : !courseRotations.includes(d.value)\n );\n\n return rotationStatusList;\n })()}\n placeholder={this.getProjectActivityPlaceholder()}\n value={formData.rotationStatus}\n />\n\n {/* Date */}\n {\n this.handleFormChange({ date });\n this.getProjectActivities();\n }}\n />\n \n )}\n\n {!formData.courses && (\n <>\n {/* Start time hours */}\n \n this.setState({ selectedActivity: e.target.value })}\n options={(() => {\n let wageCodeList = [];\n wageCodeList = wageCodes\n .filter((d) => formData.activities.findIndex((el) => el.id === d.id) === -1)\n .map((d) => ({ label: `${d.name} - ${d.id}`, value: d.id, showInCourses: d.showInCourses }));\n\n if (formData.courses) wageCodeList = wageCodeList.filter((d) => d.showInCourses === \"Yes\");\n\n return wageCodeList;\n })()}\n placeholder={lang.chooseExtras}\n style={{ width: \"65%\" }}\n value={this.state.selectedActivity}\n />\n\n {\n if (this.state.selectedActivity) {\n let activity = wageCodes.filter((x) => x.id === this.state.selectedActivity)[0];\n activity.hours = \"\";\n this.setState({\n formData: {\n ...formData,\n activities: [activity, ...formData.activities],\n },\n selectedActivity: null,\n });\n }\n }}\n >\n {lang.add}\n \n \n \n )}\n\n {formData.activities.map((activity, index) => (\n
\n ))}\n\n \n\n \n
\n ) : (\n {lang.general}
\n {selectedUserName}\n{lang.general}
\n )}\n\n {/* Project */}\n{lang.project}
\n{lang.subproject}
\n{lang.activity}
\n{lang.description}
\n\n {/* Mid Rotation */}\n {!formData.courses && (\n
\n\n {/* Courses */}\n {!formData.midRotation && (\n
\n\n {/* Rotation status */}\n \n this.handleFormChange({ midRotation: e })}\n options={[{ id: \"midRotation\", title: lang.midRotation }]}\n selected={formData.midRotation ? [\"midRotation\"] : []}\n />\n
\n )}\n\n \n\n {/* Courses */}\n {!formData.midRotation && (\n
\n this.handleFormChange({ courses: e })}\n options={[{ id: \"courses\", title: lang.courses }]}\n selected={formData.courses ? [\"courses\"] : []}\n />\n
\n )}\n {lang.rotationStatus}
\n{lang.dateAndTime}
\n\n {this.state.editMode ? (\n\n Date: {formData.date}\n
\n ) : (\n <>\n{lang.date}
\n{lang.startTime}
\n\n this.handleTimeInput(e, \"hours\")}\n />\n\n {/* Start time minutes */}\n this.handleTimeInput(e, \"minutes\")}\n />\n
\n {/* End time hours */}\n {` : `}
\n{lang.endTime}
\n\n this.handleTimeInput(e, \"hours\")}\n />\n\n {/* End time minutes */}\n this.handleTimeInput(e, \"minutes\")}\n />\n
\n \n )}\n\n {/* Activities (Wage codes) */}\n {` : `}
\n{lang.sc_extra}
\n {loadingWageCodes === false && wageCodes.length === 0 && (\n\n
{lang.addActivities}
\n\n
\n {wageCodesNightTime.includes(activity.id) && (\n \n {\n activity.hours = e.target.value; // Temporay mutation of map-element (is canceled on next render where change is committed)\n this.setState({\n formData: {\n ...formData,\n activities: [\n ...formData.activities.slice(0, index),\n activity,\n ...formData.activities.slice(index + 1),\n ],\n },\n });\n }}\n />\n {\n this.setState({\n formData: {\n ...formData,\n activities: formData.activities.filter((x) => activity.id !== x.id),\n },\n });\n }}\n >\n
\n \n {activity.name} - {activity.id}\n
\n\n this.handleFormChange({ absenceNightTime: e })}\n options={[{ id: \"absenceNightTime\", title: \"Night\" }]}\n selected={formData.absenceNightTime ? [\"absenceNightTime\"] : []}\n />\n
\n )}\n \n
\n ) : (\n {lang.general}
\n {selectedUserName}\n{lang.general}
\n )}\n\n
\n {lang.project}:
\n{registrationExtract.project}
\n\n
\n {lang.activity}:
\n\n {detailsData.activitySequence} - {registrationExtract.activity}\n
\n\n
\n {lang.description}:
\n{detailsData.description}
\n\n
\n {lang.rotationStatus}:
\n{getRotationStatusText(detailsData, registrationExtract)}
\n\n
\n {lang.midRotation}:
\n{detailsData.midRotation ? \"Yes\" : \"No\"}
\n\n
\n\n {lang.absenceNightTime}:
\n{detailsData.absenceNightTime ? \"Yes\" : \"No\"}
\n\n
\n\n \n\n {/* Date and time */}\n {lang.courses}:
\n{detailsData.courses ? \"Yes\" : \"No\"}
\n{lang.dateAndTime}
\n\n
\n {lang.date}:
\n{registrationExtract.date}
\n\n
\n {lang.startTime}:
\n{getParsedDateTime(detailsData.startTime)}
\n\n
\n\n {/* Extras */}\n {wageCodes && detailsData.extras.length > 0 && (\n <>\n \n {lang.endTime}:
\n{getParsedDateTime(detailsData.endTime)}
\n{lang.sc_extra}
\n {detailsData.extras.map((extra) => (\n\n {wageCodes.filter((w) => w.id === extra.wageCode).length > 0 ? (\n
\n ))}\n \n )}\n \n )}\n {wageCodes.filter((w) => w.id === extra.wageCode)[0].name}:
\n ) : (\nUnknown wage code
\n )}\n{extra.hours}
\n\n {/* Header */}\n
\n );\n}\n\nconst componentStyles = (props) => css`\n background-color: ${colors.white};\n border-top: 1px ${colors.midGrey} solid;\n border-bottom: 1px ${colors.midGrey} solid;\n margin-bottom: -1px;\n\n &.collapsed {\n margin: 0;\n border-left: 3px solid transparent;\n transition: margin 240ms ease;\n margin-bottom: -1px;\n\n .hide {\n max-height: 0;\n opacity: 0;\n overflow: hidden;\n transition: max-height 240ms ease, opacity 240ms ease, overflow 240ms ease;\n }\n\n .rotate-neutral {\n transform: rotate(0deg);\n transition: transform 240ms ease;\n }\n }\n\n &.expanded {\n margin: 0.65rem 0;\n border-left: 3px solid ${props.primaryColor};\n transition: margin 240ms ease, border-left 240ms ease;\n\n &:first-of-type {\n margin-top: 0px;\n }\n\n .item-header {\n color: ${props.primaryColor};\n\n .rotate {\n transform: rotate(-45deg);\n transition: transform 240ms ease;\n }\n }\n\n .item-details {\n .show {\n max-height: 1500px;\n overflow: auto;\n opacity: 1;\n transition: max-height 240ms ease, opacity 240ms ease;\n }\n }\n }\n\n .item-header {\n display: flex;\n padding: 0.75rem;\n margin-bottom: -1px;\n color: ${colors.darkGrey};\n font-weight: bold;\n\n &:active {\n background-color: ${colors.ultraLightGrey};\n transition: background-color 80ms ease;\n }\n\n .right {\n display: flex;\n margin-left: auto;\n font-weight: bold;\n }\n\n .left {\n display: flex;\n }\n }\n\n .item-details {\n .details-header {\n display: flex;\n padding: 0.75rem 0.75rem 0 0.75rem;\n\n .left {\n display: flex;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n margin-right: 0.5rem;\n flex-shrink: 0;\n }\n }\n\n .right {\n display: flex;\n margin-left: auto;\n font-weight: bold;\n\n p.hours {\n color: ${colors.darkGrey};\n margin-right: 0.35rem;\n }\n }\n }\n\n .details {\n padding: 0.5rem 0.75rem 1rem 0.75rem;\n color: ${colors.darkGrey};\n\n span {\n font-weight: bold;\n }\n\n p {\n padding-right: 1rem;\n display: inline-block;\n }\n }\n }\n`;\n\nconst mapStateToProps = (state) => ({\n lang: state.language.language,\n primaryColor: state.appConfig.primaryColor,\n});\n\nconst mapDispatchToProps = (dispatch) => ({\n showContextMenu: bindActionCreators(showContextMenu, dispatch),\n showModalPage: bindActionCreators(showModalPage, dispatch),\n showDialog: bindActionCreators(showDialog, dispatch),\n hideDialog: bindActionCreators(hideDialog, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(WorkTimeListItem);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { bindActionCreators } from \"redux\";\nimport { format, parse, subDays, addDays } from \"date-fns\";\nimport { notification } from \"antd\";\nimport params from \"jquery-param\";\n\n// css\nimport { css } from \"emotion\";\nimport colors from \"../../style/colors\";\nimport common from \"../../style/common\";\nimport { ArrowBackIcon, AlertDecagramIcon, CloudDownloadIcon, ThumbDownOutlineIcon } from \"mdi-react\";\n\n// utilities\nimport pageNavigator from \"../../utilities/page-navigator\";\nimport getPageFromId from \"../../utilities/get-page-from-id\";\nimport getBackButtonUrl from \"../../utilities/get-back-button-url\";\nimport req from \"../../utilities/request-utility\";\n\n// actions\nimport { showModalPage } from \"../../actions/uiActions\";\n\n// ui-components\nimport Page from \"../ui/Page\";\nimport TopBar from \"../ui/TopBar\";\nimport ScrollView from \"../ui/ScrollView\";\nimport StatusBox from \"../ui/StatusBox\";\nimport Button from \"../ui/Button\";\nimport ActionWrapper from \"../ui/ActionWrapper\";\n\n// components\nimport WorkTimeRegistration from \"./WorkTimeRegistration\";\nimport WorkTimeListItem from \"./WorkTimeListItem\";\n\nclass WorkTimeOverview extends Component {\n constructor(props) {\n super(props);\n this.state = {\n page: {},\n // forms\n formData: [],\n validRegistrationForm: false,\n fetchToDate: format(new Date(), \"yyyyMMdd\"),\n // registrations\n loading: false,\n error: false,\n registrations: {},\n loadingDateKeys: [],\n };\n }\n\n componentDidMount() {\n this._isMounted = true;\n let { pages, match } = this.props;\n\n this.setState({\n page: getPageFromId(pages, match.params.pageId),\n backButtonUrl: getBackButtonUrl(getPageFromId(pages, match.params.pageId), pages),\n });\n\n this.getRegistrations();\n }\n\n componentWillUnmount() {\n this._isMounted = false;\n }\n\n getRegistrations = async () => {\n try {\n const { selectedUser } = this.props;\n\n this.setState({ loading: true });\n\n let toDate = this.state.fetchToDate;\n let fromDate = format(subDays(parse(toDate, \"yyyyMMdd\", 0), 7), \"yyyyMMdd\");\n\n if (Object.keys(this.state.registrations).length === 0) {\n toDate = format(addDays(parse(toDate, \"yyyyMMdd\", 0), 365), \"yyyyMMdd\");\n }\n let { data } = await req()(`semcotime/work-hours/v3/?${params({ externalId: selectedUser, fromDate, toDate })}`);\n\n // Add registrations to current ones:\n let mutRegistrations = Object.assign(this.state.registrations, {});\n Object.keys(data).forEach((key) => {\n mutRegistrations[key] = data[key];\n });\n\n this._isMounted === true && this.setState({ registrations: mutRegistrations });\n this.setState({ loading: false });\n\n // Update fromDate\n this.setState({ fetchToDate: format(subDays(parse(fromDate, \"yyyyMMdd\", 0), 0), \"yyyyMMdd\") });\n } catch (err) {\n this.setState({ loading: false });\n this.setState({ error: true });\n }\n };\n\n refreshRegistrations = async () => {\n try {\n this.setState({ loading: true });\n\n const { selectedUser } = this.props;\n\n const toDate = format(addDays(new Date(), 365), \"yyyyMMdd\");\n const fromDate = this.state.fetchToDate;\n const { data } = await req()(`semcotime/work-hours/v3/?${params({ externalId: selectedUser, fromDate, toDate })}`);\n\n this.setState({ loading: false, registrations: data });\n } catch {\n this.setState({ error: true, loading: false });\n }\n };\n\n addRegistration = async (registration) => {\n const { selectedUser } = this.props;\n\n return new Promise((resolve, reject) => {\n req()\n .post(`semcotime/work-hours/v3?${params({ externalId: selectedUser })}`, registration)\n .then(() => {\n setTimeout(() => {\n this.refreshRegistrations();\n }, 1000);\n resolve();\n console.log(\"then\");\n })\n .catch(reject);\n });\n };\n\n updateRegistration = async (registration) => {\n const { selectedUser } = this.props;\n\n return new Promise((resolve, reject) => {\n req()\n .put(`semcotime/work-hours/v3?${params({ externalId: selectedUser })}`, registration)\n .then((res) => {\n resolve();\n setTimeout(() => {\n this.refreshRegistrations();\n }, 1000);\n })\n .catch(reject);\n });\n };\n\n deleteRegistration = async (registration) => {\n this.setState({ loading: true });\n\n const { selectedUser } = this.props;\n\n return new Promise((resolve, reject) => {\n const date = registration.registrations[0].date;\n\n req()\n .delete(\n `semcotime/work-hours/v3/${date}?${params({\n externalId: selectedUser,\n timeCardTransactionId: registration.timeCardTransactionId,\n incrementTransactionId: registration.incrementTransactionId,\n })}`\n )\n .then((res) => {\n resolve();\n setTimeout(() => {\n this.refreshRegistrations();\n }, 1000);\n })\n .catch((err) => {\n let errorMessage = \"Unspecified error\";\n if (err && err.response && err.response.data) errorMessage = err.response.data.message;\n notification.error({\n duration: 7,\n message: \"FAILED\",\n description: `Could not delete registration. Error: ${errorMessage}`,\n });\n });\n });\n };\n\n getShowingDisplay = () => {\n const { fetchToDate } = this.state;\n const { lang, selectedUserName } = this.props;\n\n if (selectedUserName)\n return `${lang.displayingRegistrationsFor} ${selectedUserName} ${lang.from} ${format(\n parse(fetchToDate, \"yyyyMMdd\", 0),\n \"yyyy-MM-dd\"\n )} ${lang.untilToday}`;\n\n return `${lang.diplayingRegistrationsFrom} ${format(parse(fetchToDate, \"yyyyMMdd\", 0), \"yyyy-MM-dd\")} ${\n lang.untilToday\n }`;\n };\n\n render() {\n const { page, backButtonUrl, registrations, loading, error } = this.state;\n const { showModalPage, lang } = this.props;\n\n return (\n setExpanded(!expanded)}>\n
\n\n {/* Details */}\n {getTitle(title)}
\n\n \n {\n e.stopPropagation();\n showContextMenu([\n {\n icon:
\n \n {registration.totalHours}\n
\n\n {allowEdit && (\n \n
\n \n {registration.registrations\n .sort((a, b) => (a.reportCode > b.reportCode ? 1 : -1))\n .map((registration, index) => (\n
\n \n
\n ))}\n \n
\n\n \n {registration.confirmed === \"Yes\" &&
\n {registration.reportCodeDescription}
\n\n
\n {registration.hours}
\n\n
\n \n {lang.activity}: {registration.activity}\n
\n\n {lang.reportCode}: {registration.reportCode}\n
\n{this.getShowingDisplay()}
\n \n\n {selectedUserName ? (\n ({ label: `${d.id} - ${d.name}`, value: d.id }))}\n placeholder={lang.chooseAbsenceType}\n loading={isAbsenceCodeLoading}\n value={formData.absenceCode}\n />\n\n \n\n handleFormChange({ target: { value: date } }, \"startDate\")}\n />\n\n handleFormChange({ target: { value: date } }, \"endDate\")}\n />\n\n
\n \n
\n ) : (\n {lang.general}
\n {selectedUserName}\n{lang.general}
\n )}\n\n{lang.absenceType}
\n{lang.startDate}
\n{lang.endDate}
\n{lang.hoursPerDay}
\n{lang.note}
\n\n
\n );\n}\n\nconst componentStyles = (props) => css`\n background-color: ${colors.white};\n border-top: 1px ${colors.midGrey} solid;\n border-bottom: 1px ${colors.midGrey} solid;\n margin-bottom: -1px;\n\n &.collapsed {\n margin: 0;\n border-left: 3px solid transparent;\n transition: margin 240ms ease;\n margin-bottom: -1px;\n\n .hide {\n max-height: 0;\n opacity: 0;\n overflow: hidden;\n transition: max-height 240ms ease, opacity 240ms ease, overflow 240ms ease;\n }\n\n .rotate-neutral {\n transform: rotate(0deg);\n transition: transform 240ms ease;\n }\n }\n\n &.expanded {\n margin: 0.65rem 0;\n border-left: 3px solid ${props.primaryColor};\n transition: margin 240ms ease, border-left 240ms ease;\n\n &:first-of-type {\n margin-top: 0px;\n }\n\n .item-header {\n color: ${props.primaryColor};\n\n .rotate {\n transform: rotate(-45deg);\n transition: transform 240ms ease;\n }\n }\n\n .item-details {\n .show {\n max-height: 1000px;\n opacity: 1;\n transition: max-height 240ms ease, opacity 240ms ease;\n }\n }\n }\n\n .item-header {\n display: flex;\n padding: 0.75rem;\n margin-bottom: -1px;\n color: ${colors.darkGrey};\n font-weight: bold;\n\n &:active {\n background-color: ${colors.ultraLightGrey};\n transition: background-color 80ms ease;\n }\n\n .right {\n display: flex;\n margin-left: auto;\n font-weight: bold;\n }\n\n .left {\n display: flex;\n overflow: hidden;\n\n p {\n padding-right: 0.5rem;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n }\n }\n\n .item-details {\n .details {\n padding: 0.5rem 0.75rem 0.25rem 0.75rem;\n color: ${colors.darkGrey};\n\n span {\n font-weight: bold;\n }\n\n p {\n display: block;\n margin-bottom: 0.5rem;\n }\n }\n }\n`;\n\nconst mapStateToProps = (state) => ({\n lang: state.language.language,\n primaryColor: state.appConfig.primaryColor,\n});\n\nconst mapDispatchToProps = (dispatch) => ({\n showContextMenu: bindActionCreators(showContextMenu, dispatch),\n showModalPage: bindActionCreators(showModalPage, dispatch),\n showDialog: bindActionCreators(showDialog, dispatch),\n hideDialog: bindActionCreators(hideDialog, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ListItem);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { bindActionCreators } from \"redux\";\nimport { format, parse, subDays } from \"date-fns\";\nimport { notification } from \"antd\";\nimport params from \"jquery-param\";\n\n// css\nimport { css } from \"emotion\";\nimport colors from \"../../style/colors\";\nimport { ArrowBackIcon, AlertDecagramIcon, CloudDownloadIcon, ThumbDownOutlineIcon } from \"mdi-react\";\n\n// utilities\nimport pageNavigator from \"../../utilities/page-navigator\";\nimport getPageFromId from \"../../utilities/get-page-from-id\";\nimport getBackButtonUrl from \"../../utilities/get-back-button-url\";\n\n// actions\nimport { showModalPage, hideModalPage } from \"../../actions/uiActions\";\n\n// ui-components\nimport Page from \"../ui/Page\";\nimport TopBar from \"../ui/TopBar\";\nimport ScrollView from \"../ui/ScrollView\";\nimport StatusBox from \"../ui/StatusBox\";\n\n// components\nimport AbsenceRegistration from \"./AbsenceRegistration\";\nimport AbsenceListItem from \"./AbsenceListItem\";\n\n// dummy-data\nimport ActionWrapper from \"../ui/ActionWrapper\";\nimport common from \"../../style/common\";\nimport req from \"../../utilities/request-utility\";\nimport Button from \"../ui/Button\";\nimport { addDays } from \"date-fns/esm\";\n\nclass AbsenceOverview extends Component {\n constructor(props) {\n super(props);\n this.state = {\n page: {},\n // forms\n formData: [],\n validRegistrationForm: false,\n filterData: [],\n dropDownLists: {},\n fetchToDate: format(new Date(), \"yyyyMMdd\"),\n // registrations\n loading: false,\n error: false,\n isFirstFetch: true,\n absenceData: [],\n filteredRegistrations: [],\n };\n }\n\n componentDidMount() {\n this._isMounted = true;\n let { pages, match } = this.props;\n\n this.setState({\n page: getPageFromId(pages, match.params.pageId),\n backButtonUrl: getBackButtonUrl(getPageFromId(pages, match.params.pageId), pages),\n });\n\n this.getRegistrations();\n }\n\n componentWillUnmount() {\n this._isMounted = false;\n }\n\n getRegistrations = async () => {\n try {\n this.setState({ loading: true, isFirstFetch: false });\n\n const { selectedUser } = this.props;\n\n let toDate = this.state.fetchToDate;\n const fromDate = format(subDays(parse(toDate, \"yyyyMMdd\", 0), 7), \"yyyyMMdd\");\n\n // If it is first fetch, fetch a year into the future as well as a week into the past\n // This is done to get future registrations as well\n if (this.state.absenceData.length === 0) toDate = format(addDays(parse(toDate, \"yyyyMMdd\", 0), 365), \"yyyyMMdd\");\n\n const { data } = await req()(`semcotime/absence/v3/?${params({ externalId: selectedUser, fromDate, toDate })}`);\n\n this._isMounted === true && this.setState({ absenceData: [...this.state.absenceData, ...data] });\n this.setState({ loading: false });\n\n // Update fromDate\n this.setState({ fetchToDate: format(subDays(parse(fromDate, \"yyyyMMdd\", 0), 0), \"yyyyMMdd\") });\n } catch (err) {\n this.setState({ error: true, loading: false });\n }\n };\n\n addRegistration = async (registration) => {\n const { selectedUser } = this.props;\n\n return new Promise((resolve, reject) => {\n req()\n .post(`semcotime/absence/v3/?${params({ externalId: selectedUser })}`, registration)\n .then(() => {\n resolve();\n setTimeout(() => {\n this.setState({ absenceData: [] });\n this.getRegistrations();\n }, 4000);\n })\n .catch(reject);\n });\n };\n\n updateRegistration = async (registration) => {\n const { selectedUser } = this.props;\n\n return new Promise((resolve, reject) => {\n req()\n .put(`semcotime/absence/v3/?${params({ externalId: selectedUser })}`, registration)\n .then(() => {\n resolve();\n setTimeout(() => {\n this.setState({ absenceData: [] });\n this.getRegistrations();\n }, 4000);\n })\n .catch(reject);\n });\n };\n\n deleteRegistration = async (registration) => {\n try {\n const { selectedUser } = this.props;\n\n await req().delete(\n `semcotime/absence/v3/${registration.transactionId}?${params({\n date: registration.accountDate,\n externalId: selectedUser,\n })}`\n );\n\n const updatedAbsenceData = this.state.absenceData.filter(\n (absence) => absence.transactionId !== registration.transactionId\n );\n\n this.setState({ absenceData: updatedAbsenceData });\n } catch (err) {\n let errorMessage = \"Unspecified error\";\n if (err && err.response && err.response.data) errorMessage = err.response.data.error;\n notification.error({\n duration: 7,\n message: \"FAILED\",\n description: `Could not delete absence. Error: ${errorMessage}`,\n });\n }\n };\n\n getShowingDisplay = () => {\n const { fetchToDate } = this.state;\n const { lang, selectedUserName } = this.props;\n\n if (selectedUserName)\n return `${lang.displayingRegistrationsFor} ${selectedUserName} ${lang.from} ${format(\n parse(fetchToDate, \"yyyyMMdd\", 0),\n \"yyyy-MM-dd\"\n )} ${lang.untilToday}`;\n\n return `${lang.diplayingRegistrationsFrom} ${format(parse(fetchToDate, \"yyyyMMdd\", 0), \"yyyy-MM-dd\")} ${\n lang.untilToday\n }`;\n };\n\n render() {\n const { page, backButtonUrl, absenceData, loading, error } = this.state;\n const { showModalPage, lang } = this.props;\n\n return (\n setExpanded(!expanded)}>\n
\n \n
\n \n {registration.startDate} - {registration.endDate} - {registration.type}\n
\n\n {\n e.stopPropagation();\n showContextMenu([\n {\n icon:
\n {registration.totalHours}
\n {deleting && \n
\n \n
\n \n
\n \n
\n \n {lang.startDate}: \n {registration.startDate}\n
\n\n {lang.endDate}: \n {registration.endDate}\n
\n\n {lang.hoursPerDay}: \n {registration.hoursPerDay}\n
\n\n {lang.type}: \n {registration.type}\n
\n\n {lang.note}: \n {registration.note}\n
\n{this.getShowingDisplay()}
\n \n\n {/* Header */}\n
\n );\n}\n\nconst componentStyles = (props) => css`\n background-color: ${colors.white};\n border-top: 1px ${colors.midGrey} solid;\n border-bottom: 1px ${colors.midGrey} solid;\n margin-bottom: -1px;\n\n &.collapsed {\n margin: 0;\n border-left: 3px solid transparent;\n transition: margin 240ms ease;\n margin-bottom: -1px;\n\n .hide {\n max-height: 0;\n opacity: 0;\n overflow: hidden;\n transition: max-height 240ms ease, opacity 240ms ease, overflow 240ms ease;\n }\n\n .rotate-neutral {\n transform: rotate(0deg);\n transition: transform 240ms ease;\n }\n }\n\n &.expanded {\n margin: 0.65rem 0;\n border-left: 3px solid ${props.primaryColor};\n transition: margin 240ms ease, border-left 240ms ease;\n\n &:first-of-type {\n margin-top: 0px;\n }\n\n .item-header {\n color: ${props.primaryColor};\n\n .rotate {\n transform: rotate(-45deg);\n transition: transform 240ms ease;\n }\n }\n\n .item-details {\n .show {\n max-height: 1500px;\n overflow: auto;\n opacity: 1;\n transition: max-height 240ms ease, opacity 240ms ease;\n }\n }\n }\n\n .item-header {\n display: flex;\n padding: 0.75rem;\n margin-bottom: -1px;\n color: ${colors.darkGrey};\n font-weight: bold;\n\n &:active {\n background-color: ${colors.ultraLightGrey};\n transition: background-color 80ms ease;\n }\n\n .right {\n display: flex;\n margin-left: auto;\n font-weight: bold;\n }\n\n .left {\n display: flex;\n }\n }\n\n .item-details {\n .details-header {\n display: flex;\n padding: 0.75rem 0.75rem 0 0.75rem;\n\n .left {\n display: flex;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n margin-right: 0.5rem;\n flex-shrink: 0;\n }\n }\n\n .right {\n display: flex;\n margin-left: auto;\n font-weight: bold;\n\n p.hours {\n color: ${colors.darkGrey};\n margin-right: 0.35rem;\n }\n }\n }\n\n .details {\n padding: 0.5rem 0.75rem 0rem 0.75rem;\n color: ${colors.darkGrey};\n\n span {\n font-weight: bold;\n }\n\n p {\n padding-right: 1rem;\n display: inline-block;\n }\n }\n }\n`;\n\nconst mapStateToProps = (state) => ({\n lang: state.language.language,\n primaryColor: state.appConfig.primaryColor,\n selectedUser: state.users.selectedUser,\n});\n\nconst mapDispatchToProps = (dispatch) => ({\n showContextMenu: bindActionCreators(showContextMenu, dispatch),\n showModalPage: bindActionCreators(showModalPage, dispatch),\n showDialog: bindActionCreators(showDialog, dispatch),\n hideDialog: bindActionCreators(hideDialog, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(WorkTimeListItem);\n","import React, { useState, useEffect } from \"react\";\nimport { useSelector } from \"react-redux\";\nimport { format, subDays } from \"date-fns\";\nimport params from \"jquery-param\";\n\n// css\nimport { ArrowBackIcon, AlertDecagramIcon, ThumbsUpOutlineIcon } from \"mdi-react\";\n\n// utilities\nimport pageNavigator from \"../../utilities/page-navigator\";\nimport req from \"../../utilities/request-utility\";\nimport usePageAndBackButtonURL from \"../../hooks/usePageAndBackButtonURL\";\n\n// ui-components\nimport Page from \"../ui/Page\";\nimport TopBar from \"../ui/TopBar\";\nimport ScrollView from \"../ui/ScrollView\";\nimport InlineSpinner from \"../ui/InlineSpinner\";\nimport StatusBox from \"../ui/StatusBox\";\nimport CorrectionListItem from \"./CorrectionListItem\";\n\nfunction CorrectionsOverview(props) {\n const lang = useSelector((s) => s.language.language);\n const selectedUser = useSelector((s) => s.users.selectedUser);\n\n const { page, backButtonURL } = usePageAndBackButtonURL(props);\n const [state, setState] = useState({\n loading: true,\n error: false,\n registrations: {},\n });\n\n useEffect(() => {\n const toDate = format(new Date(), \"yyyyMMdd\");\n const fromDate = format(subDays(new Date(), 90), \"yyyyMMdd\");\n\n req()(`semcotime/corrections/v3?${params({ externalId: selectedUser, fromDate, toDate })}`)\n .then(({ data }) => setState({ ...state, registrations: data, loading: false, error: false }))\n .catch((err) => {\n setState({ ...state, loading: false, error: true });\n });\n // eslint-disable-next-line\n }, []);\n\n return (\n setExpanded(!expanded)}>\n
\n\n {/* Details */}\n {title}
\n\n \n
\n \n {
\n \n {registration.totalHours}\n
\n\n \n
\n \n {registration.registrations\n .sort((a, b) => (a.reportCode > b.reportCode ? 1 : -1))\n .map((registration, index) => (\n
\n \n
\n ))}\n \n
\n\n \n {registration.confirmed === \"Yes\" &&
\n {registration.reportCodeDescription}
\n\n
\n\n \n {lang.activity}: {registration.activity}\n
\n\n {lang.reportCode}: {registration.reportCode}\n
\n\n
\n \n {lang.note}: {registration.note}\n
\n\n\t\t\t\t{type === 'time' ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t{!isNewType && (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{`${startTimeHours}:${startTimeMinutes}:00`}-{`${endTimeHours}:${endTimeMinutes}:00`}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)}\n\t\t\t\t\t\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{selected || (type === 'absence' && selectAllApproved) ? (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{selected || (isRecordApproved && selectAllApproved) ? (\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t<>\n\t\t\t\t\t{type}\n\t\t\t\t\t{isRecordApproved ? (\n\t\t\t\t\t\t
\n\t\t\t{!isView && (\n\t\t\t\t<>\n\t\t\t\t\t handleAddRegistration(e.target.value)}\n\t\t\t\t\t\toptions={locationRegistrationRules(location)}\n\t\t\t\t\t\tplaceholder={lang.timeRegistrationListPlaceholder}\n\t\t\t\t\t\tvalue={null}\n\t\t\t\t\t/>\n\t\t\t\t\n\t\t\t)}\n\n\t\t\t{dataList.length !== 0 && (\n\t\t\t\t<>\n\t\t\t\t\t\n\t\t\t\t\t (\n\t\t\t\t\t\t\t {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleRegistrationChanges(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'approvedByForeman',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t!item.approvedByForeman\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t!item.approvedByForeman ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (item.savedByBlueCollar) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t//if user want to edit a saved time registration\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleRegistrationChanges(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'savedByBlueCollar',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t!item.savedByBlueCollar\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (handleRegistrationSave(item)) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleRegistrationChanges(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'savedByBlueCollar',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t!item.savedByBlueCollar\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon={ handleDeleteRegistration(item.id)}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{item.changeShift && item.type === 1 && isForeman && (\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t setshowMobileHelpText(isMobile && [4, 5, 6].includes(item.type))}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonBlur={() => setshowMobileHelpText(false)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tformat={'HH:mm'}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tminuteStep={[4, 5, 6].includes(item.type) ? 30 : 15}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={item.savedByBlueCollar}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tgetPopupContainer={trigger => trigger.parentElement}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpicker={'time'}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonSelect={date => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleRegistrationChanges(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'startTime',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdate.format('HH:mm')\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (item.type === 1) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t// check shift only if worktime type\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleRegistrationChanges(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'shift',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcheckShift(date.format('HH:mm:00'), item.endTime)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange={(obj, date) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleRegistrationChanges('startTime', item, date);\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (item.type === 1) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t// check shift only if worktime type\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleRegistrationChanges(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'shift',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcheckShift(date, item.endTime)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tplaceholder={lang.timeRegistrationListFrom}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={item.startTime ? moment(item.startTime, 'HH:mm') : ''}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t setshowMobileHelpText(isMobile && [4, 5, 6].includes(item.type))}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonBlur={() => setshowMobileHelpText(false)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tformat={'HH:mm'}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tminuteStep={[4, 5, 6].includes(item.type) ? 30 : 15}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={item.savedByBlueCollar}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tgetPopupContainer={trigger => trigger.parentElement}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpicker={'time'}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonSelect={date => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleRegistrationChanges(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'endTime',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdate.format('HH:mm')\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (item.type === 1) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t// check shift only if worktime type\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleRegistrationChanges(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'shift',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcheckShift(item.startTime, date.format('HH:mm:00'))\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange={(obj, date) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleRegistrationChanges('endTime', item, date);\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (item.type === 1) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t// check shift only if worktime type\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleRegistrationChanges(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'shift',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcheckShift(item.startTime, date)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tplaceholder={lang.timeRegistrationListTo}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={item.endTime ? moment(item.endTime, 'HH:mm') : ''}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{item.type === 1 && (\n\t\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t\t {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleRegistrationChanges(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'changeShift',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t!item.changeShift\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleRegistrationChanges(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'shift',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcheckShift(item.startTime)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tname=\"changeShift\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{lang.timeRegistrationListChangeShift}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{item.type === 1 && (\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleRegistrationChanges(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'customerDetail',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\te.target.value\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t{[1, 2, 3, 7].includes(item.type) && (\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleRegistrationChanges(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'customerNote',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\te.target.value\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t\n\t\t\t)}\n\t\t
\n\t);\n};\n\nconst componentStyles = isForeman => css`\n\t// .listButtons {\n\t// font-weight: 700;\n\t// background-color: #103447;\n\t// color: #ffffff;\n\t// text-shadow: 0 1px 1px rgb(0 0 0 / 20%);\n\t// border-bottom: 3px solid #020609;\n\t// }\n\t@media screen and (max-width: 576px) {\n\t\t.ant-list-item-action {\n\t\t\tpadding-top: 15px;\n\t\t\tmargin-left: ${isForeman ? '16vw' : '50vw'} !important;\n\t\t}\n\t}\n\t.seperator {\n\t\tbackground-color: ${colors.lightGrey};\n\t\theight: 1px;\n\t\tmargin: 1.5rem -0.75rem 1rem -0.75rem;\n\t}\n\n\t.registrationSeparator {\n\t\tpadding: 10px;\n\t}\n\n\t.ant-picker-panel-container {\n\t\t.ant-picker-time-panel-column {\n\t\t\toverflow-y: auto !important;\n\t\t}\n\t\t.ant-picker-time-panel-column::-webkit-scrollbar {\n\t\t\t-webkit-appearance: none;\n\t\t}\n\n\t\t.ant-picker-time-panel-column::-webkit-scrollbar:vertical {\n\t\t\twidth: 11px;\n\t\t}\n\n\t\t.ant-picker-time-panel-column::-webkit-scrollbar:horizontal {\n\t\t\theight: 11px;\n\t\t}\n\n\t\t.ant-picker-time-panel-column::-webkit-scrollbar-thumb {\n\t\t\tborder-radius: 8px;\n\t\t\tborder: 2px solid white; /* should match background, can't be transparent */\n\t\t\tbackground-color: rgba(0, 0, 0, 0.5);\n\t\t}\n\t}\n`;\n\nexport default memo(TimeRegistrationList);\n","import Moment from \"moment\";\nimport { extendMoment } from \"moment-range\";\n\nconst moment = extendMoment(Moment);\n\nconst computeTotalHours = (timeRegistrations) => {\n if (timeRegistrations.length === 0) return 0;\n\n let totalHours = 0;\n\n timeRegistrations.forEach((d) => {\n // 1. add hours\n if (moment(d.endTime, \"HH:mm\").isBefore(moment(d.startTime, \"HH:mm\"))) {\n //if overnight\n const now = moment(d.startTime, \"HH:mm\");\n const then = moment(d.endTime, \"HH:mm\").add(\"days\", 1);\n\n const ms = then.diff(now);\n const duration = moment.duration(ms);\n\n totalHours += Math.floor(duration.asHours()) + (parseInt(moment.utc(ms).format(\"mm\")) / 60) * 1;\n } else {\n totalHours += moment(d.endTime, \"HH:mm\").diff(moment(d.startTime, \"HH:mm\"), \"hours\");\n\n //2. add minute differencials per registration\n totalHours +=\n (parseInt(moment.utc(moment(d.endTime, \"HH:mm\").diff(moment(d.startTime, \"HH:mm\"))).format(\"mm\")) / 60) * 1;\n }\n });\n\n return totalHours;\n};\n\nexport default computeTotalHours;\n","import React, { memo, useEffect, useState } from \"react\";\nimport { Card, Col, notification, Row, Button, InputNumber, Collapse, Result } from \"antd\";\n\nimport { useMediaQuery } from \"react-responsive\";\nimport \"rc-time-picker/assets/index.css\";\nimport TextField from \"@mui/material/TextField\";\n\nimport { groupBy } from \"lodash\";\n\n// css\nimport { css } from \"emotion\";\nimport { PlusCircleFilled, MinusCircleFilled } from \"@ant-design/icons\";\n\n//utitlities\nimport computeTotalHours from \"../../utilities/compute-total-time-registartion-hours\";\n\nconst TimeRegistrationList = ({\n disabled = false,\n error,\n isForeman = false,\n nptHottLabels = [],\n onChange = () => {},\n timeRegistrations = [],\n}) => {\n const isMobile = useMediaQuery({ maxWidth: \"800px\" });\n const labelings = groupBy(nptHottLabels, \"Category\");\n\n const [showLabelings, setShowLabelings] = useState(false);\n const [hoursToLabel, setHoursToLabel] = useState(0);\n const [totalHoursLabel, setTotalHoursLabel] = useState(0);\n\n const handleLabelInputChanges = (field, label, val) => {\n const { id } = label;\n // dynamically changes object values by key\n let newLabel = nptHottLabels;\n newLabel.map((d, i) => {\n if (d.id === id) {\n newLabel[i] = { ...newLabel[i], [field]: val };\n }\n return newLabel;\n });\n onChange(newLabel);\n };\n\n useEffect(() => {\n let labelHours = 0;\n nptHottLabels.forEach((d) => {\n labelHours += d.Hours;\n });\n\n setTotalHoursLabel(labelHours);\n labelHours = computeTotalHours(timeRegistrations.filter((d) => d.type === 1 && d.savedByBlueCollar)) - labelHours;\n setHoursToLabel(labelHours < 0 ? 0 : labelHours);\n }, [JSON.stringify(timeRegistrations), JSON.stringify(nptHottLabels)]);\n\n if (nptHottLabels.length === 0)\n return (\n {lang.timeRegistrationListLabel}
\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t{item.type === 'workTime'\n\t\t\t\t\t\t\t\t\t\t\t\t? 'Work Time'\n\t\t\t\t\t\t\t\t\t\t\t\t: timeRegistrationsTypes.filter(d => d.value === item.type)[0].label}\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleRegistrationChanges(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'shift',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\te.target.value\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={item.shift}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\toptions={[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: lang.timeRegistrationListDay,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: 'day'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: lang.timeRegistrationListNight,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: 'night'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"Shift\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{...(isMobile ? { style: { width: '100%' } } : {})}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n {labelings[type].map((item) => (\n {item.Description}}>\n \n
\n \n ))}\n
\n );\n };\n\n return (\n \n
\n );\n};\n\nconst componentStyles = (isForeman) => css`\n margin-top: 10px;\n\n .top {\n .title {\n font-size: 17px;\n }\n .ant-input-number {\n width: 65px;\n }\n }\n\n .label-container {\n padding: 10px;\n // display: flex;\n // justify-content: space-between;\n }\n\n .labelsDropDown {\n margin-top: 15px;\n\n .ant-collapse-content-box {\n padding: 0px;\n }\n }\n\n .mobile-label-cards {\n .ant-card-bordered {\n border: 1px solid #0f3447;\n }\n }\n`;\n\nexport default memo(TimeRegistrationList);\n","import React, { forwardRef, useEffect, useMemo, useState } from \"react\";\nimport { isEmpty, isEqual, sortBy } from \"lodash\";\nimport param from \"jquery-param\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { DeleteIcon, FloppyIcon } from \"mdi-react\";\nimport moment from \"moment\";\n\n// NEW\nimport { Form, Modal, Checkbox, Radio, Divider, Popover, Popconfirm, notification } from \"antd\";\nimport * as yup from \"yup\";\nimport { Controller, useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\n\nimport { useDropdownData } from \"../../WorkTimeDK/hooks\";\nimport workHourState from \"../../../config/semcotimedk-workhour-states\";\n\n// css\nimport { css } from \"emotion\";\nimport common from \"../../../style/common\";\nimport colors from \"../../../style/colors\";\nimport DatePicker from \"../../ui/DatePicker\";\nimport InlineSpinner from \"../../ui/InlineSpinner\";\nimport ScrollView from \"../../ui/ScrollView\";\nimport req from \"../../../utilities/request-utility\";\n\n//ui\nimport Button from \"../../ui/Button\";\nimport DropDown from \"../../ui/DropDown\";\nimport { toggleWorkHourModal } from \"../../../actions/uiActions\";\nimport TimeRegistrationList from \"../../semco-time/TimeRegistrationList\";\nimport NPTAndHOTTLabeling from \"../../semco-time/nptAndHott\";\n\nconst ForemanWorkHourForm = (props, ref) => {\n const dispatch = useDispatch();\n const {\n data: registration = {},\n externalId = null,\n onDelete: onDeleteParent,\n onSubmit: onSubmitParent,\n sentToIFSAt,\n lang,\n page = \"foreman\",\n userId = null,\n } = props;\n const { data = {}, ifsData = null } = registration;\n\n const primaryColor = useSelector((s) => s.appConfig.primaryColor);\n const modal = useSelector(({ ui }) => ui.workHourModal);\n const loggedUserAuthorizedForeman = useSelector(({ auth }) => auth.user.loggedUserAuthorizedForeman, isEqual);\n console.log(\"loggedUserAuthorizedForeman: \", loggedUserAuthorizedForeman);\n\n const archived = useMemo(() => (registration.lockedByIFS ? true : false), [registration.lockedByIFS]);\n const needsProcessing = useMemo(() => (registration.sentToIFSAt ? true : false), [registration.sentToIFSAt]);\n const lockedByForeman = useMemo(() => (registration.lockedByForeman ? true : false), [registration.lockedByForeman]);\n // STATES\n const [foremen, setForemen] = useState([]);\n const [isFormReady, setIsFormReady] = useState(true);\n const [submittingForm, setSubmittingForm] = useState(false);\n const [isDeleting, setIsDeleting] = useState(false);\n const [errorLoadingFormData, setErrorLoadingFormData] = useState(false); //error page\n const [tradeCodesList, setTradeCodesList] = useState([]);\n const [showMobileFormAction, setShowMobileFormAction] = useState(false);\n\n const getForemen = () => {\n try {\n setIsFormReady(false);\n\n req()(`semcotime/foremen?${param({ foremanGroupIdentifier: page === \"admin\" ? \"ADMIN\" : \"FOREMEN\" })}`).then(\n ({ data }) => {\n const assignedIds = data.assigned.map((d) => d.id);\n\n setForemen([\n ...data.assigned,\n { disabled: true, id: \"\", name: \"------------------\" },\n ...data.all.filter((d) => !assignedIds.includes(d.id)),\n ]);\n }\n );\n\n setIsFormReady(true);\n } catch (err) {\n setErrorLoadingFormData(true);\n }\n };\n\n const schema = yup.object().shape({\n //validations\n date: yup.string().required(\"Date is required\"),\n detailedReportingEnabled: yup.boolean(),\n // foreman: page === \"admin\" ? yup.string().required(\"Foreman is required\") : yup.string(),\n foreman: yup.string().required(\"Foreman is required\"),\n location: yup.string().required(\"Location is required\"),\n project: yup.string().required(\"Project is required\"),\n subProject: yup.string().required(\"Sub Project is required\"),\n activity: yup.string().required(\"Project Activity is required\"),\n trade: yup.string().required(\"Trade is required\"),\n timeRegistrations: yup\n .array()\n .min(1, \"Times Registrations must have at least 1 record\")\n .of(\n yup.object().shape({\n approvedByForeman: yup.boolean(),\n })\n )\n // .compact((v) => !v.approvedByForeman) //check if there is time registration that is not SAVED\n .test({\n name: \"allIsApproved\",\n message: \"All time registrations must be approved\",\n test: (val) => val.filter((d) => !d.approvedByForeman).length === 0, //check if all saved time registrations are approved\n }),\n nptHott: yup\n .array()\n .of(\n yup.object().shape({\n Category: yup.string(),\n Hours: yup.number(),\n WorkOrderNo: yup.string(),\n OperationNo: yup.string(),\n Description: yup.string(),\n })\n )\n .test({\n name: \"allLabelHours\",\n message: \"Please complete the required fields\",\n test: (val) =>\n val.filter(\n (d) =>\n d.Hours > 0 &&\n (d.WorkOrderNo === \"\" ||\n (d.Category === \"NPT\" ? false : d.OperationNo === \"\") ||\n (d.Description.replace(/[^a-zA-Z ]/g, \"\") === \"Custom\" && d.Comment === \"\"))\n ).length === 0, //check if there is a label with hours that missing required fields\n }),\n });\n\n const defaultValues = {\n date: \"\",\n detailedReportingEnabled: false,\n foreman: \"\",\n location: \"\",\n project: \"\",\n subProject: \"\",\n activity: \"\",\n trade: \"\",\n endOfRotation: false,\n type: \"time\",\n timeRegistrations: [],\n break: \"\",\n nptHott: [],\n };\n\n const {\n control,\n formState: { errors },\n getValues,\n reset,\n setValue,\n handleSubmit,\n watch,\n } = useForm({\n defaultValues,\n resolver: yupResolver(schema),\n });\n\n const {\n dabLocations,\n dabLocationsIsFetching,\n dabTradeCodes,\n dabTradeIsFetching,\n defaultEmployeeValues,\n defaultEmployeeValuesIsFetching,\n defaultEmployeeValuesStatus,\n defaultEmployeeValuesRefetch,\n defaultProjectSubProjectAndActivityData,\n defaultProjectSubProjectAndActivityStatus,\n nptHottLabels,\n nptHottLabelsIsFetching,\n nptHottLabelsRefetch,\n nptHottLabelsStatus,\n projectData,\n projectActivityData,\n projectStatus,\n projectActivityStatus,\n subProjectData,\n subProjectStatus,\n subProjectIsFetching,\n } = useDropdownData({ ...watch(), externalId });\n\n const getProjectActivityPlaceholder = () => {\n if (projectActivityStatus === \"loading\" || projectActivityStatus === \"idle\") {\n return lang.loading;\n } else if (projectActivityData.length === 0) {\n return lang.noActivities;\n } else {\n return lang.chooseActivity;\n }\n };\n\n const getSubProjectPlaceholder = () => {\n if (subProjectStatus === \"loading\" || subProjectStatus === \"idle\") {\n return lang.loading;\n } else if (subProjectData.length === 0) {\n return \"No subprojects found\";\n } else {\n return lang.chooseASubproject;\n }\n };\n\n useEffect(() => {\n setTradeCodesList(dabTradeCodes);\n }, [dabTradeCodes.length]);\n\n useEffect(() => {\n if (!nptHottLabelsIsFetching && nptHottLabelsStatus === \"success\") {\n if (\n (!isEmpty(registration) && data.nptHott && data.nptHott.length === 0) ||\n (isEmpty(registration) && getValues(\"date\") === \"\")\n ) {\n // if viewed record is draft/ not approved OR new form, load default label values\n setValue(\"nptHott\", nptHottLabels);\n }\n }\n }, [nptHottLabelsIsFetching, watch(\"project\")]);\n\n useEffect(() => {\n // form onload edit or from local storage\n if (isEmpty(registration) && !defaultEmployeeValuesIsFetching) {\n const { employeeTrade = \"\" } = defaultEmployeeValues;\n\n // to condition when editing\n setValue(\"trade\", employeeTrade);\n }\n }, [defaultEmployeeValuesIsFetching]);\n\n useEffect(() => {\n if (\n !defaultEmployeeValuesIsFetching &&\n defaultEmployeeValues.employeeTrade &&\n getValues(\"trade\") !== defaultEmployeeValues.employeeTrade\n ) {\n const defaultEmployeeTrade = dabTradeCodes.filter((d) => d.DabTradeId === defaultEmployeeValues.employeeTrade)[0];\n notification.warning({\n description: `${lang.tradeNotDefault} (${defaultEmployeeTrade.DabTradeId} - ${defaultEmployeeTrade.DabTradeDesc}).`,\n });\n }\n }, [getValues(\"trade\")]);\n\n useEffect(() => {\n getForemen();\n\n // deletes old form layout in local storage\n let localStorageForm = localStorage.getItem(`semcotime-last-time-input-${userId}`);\n if (localStorageForm) {\n if (\n !JSON.parse(localStorageForm).hasOwnProperty(\"detailedReportingEnabled\") &&\n !JSON.parse(localStorageForm).hasOwnProperty(\"nptHott\")\n ) {\n console.log(\"-- OLD FORM DETECTED AND DELETED --\");\n localStorage.removeItem(`semcotime-last-time-input-${userId}`);\n }\n }\n }, []);\n\n useEffect(() => {\n nptHottLabelsRefetch();\n defaultEmployeeValuesRefetch();\n if (!isEmpty(registration)) {\n //if edit\n reset(registration.data);\n } else {\n // if add with last form used\n const lastForm = localStorage.getItem(`semcotime-last-time-input-${userId}`);\n if (lastForm) {\n return reset(JSON.parse(lastForm));\n } else {\n reset(defaultValues);\n }\n }\n }, [JSON.stringify(registration)]);\n\n const onSubmit = async (formData, toLocalStorage = false, action = \"draft\") => {\n setSubmittingForm(true);\n if (!formData.detailedReportingEnabled) {\n //remove label data if the selected project is detailedReportingEnabled\n await onSubmitParent({ ...{ ...formData, nptHott: [] }, action, type: \"time\" });\n } else {\n await onSubmitParent({ ...formData, action, type: \"time\" });\n }\n if (action === \"draftAndNextDay\") {\n setValue(\"date\", moment(formData.date).add(1, \"days\").format(\"YYYY-MM-DD\"));\n }\n\n setShowMobileFormAction(false);\n setSubmittingForm(false);\n };\n\n const onDelete = async () => {\n setIsDeleting(true);\n await onDeleteParent();\n setIsDeleting(false);\n };\n\n // console.log(\"FORM VAL: \", watch(\"nptHott\")[0]);\n const disabled = archived || needsProcessing;\n const renderForm = () => {\n return (\n <>\n \n
\n {showLabelings && (\n \n \n Labelling of NPT and HOTT: \n setShowLabelings(!showLabelings)}\n style={{ marginLeft: \"5px\" }}\n type=\"primary\"\n icon={showLabelings ? \n
\n {showLabelings && (\n \n \n Hours to Label: \n
\n )}\n {error && {error.message}
}\n\n \n \n {isMobile ? renderCardItems(\"HOTT\") : renderListItems(\"HOTT\")}\n \n \n {isMobile ? renderCardItems(\"NPT\") : renderListItems(\"NPT\")}\n \n \n
\n )}\n