Commit 9df23ca0 authored by David Björkheim's avatar David Björkheim
Browse files

DEICH-5554 Deichman.no: Add info and placement to media page

parent a34ff190
......@@ -15,13 +15,13 @@ import { translations as TRANSLATIONS } from "../../constants/translations";
import { Block, Text, Flex } from "@digibib/deichman-ui";
import "./styles.css";
import PublicationDetailsButton from "../PublicationDetailsButton/PublicationDetailsButton";
const Publicationcard = ({
data,
flags,
parent,
isFavourited,
onShowDetails,
onFavourite,
onReserve,
userCategory
......@@ -125,13 +125,9 @@ const Publicationcard = ({
</Block>
<Block top={2}>
<button
type="button"
className="link"
onClick={() => onShowDetails(id)}
>
<PublicationDetailsButton publication={data} className="link">
Mer info og hylleplassering
</button>
</PublicationDetailsButton>
</Block>
</div>
</article>
......@@ -149,7 +145,6 @@ Publicationcard.propTypes = {
isFavourited: PropTypes.bool.isRequired,
onReserve: PropTypes.func.isRequired,
onFavourite: PropTypes.func.isRequired,
onShowDetails: PropTypes.func.isRequired,
tjenesteKatalogUrl: PropTypes.string.isRequired,
userCategory: PropTypes.string.isRequired
};
......
......@@ -32,13 +32,10 @@ const PublicationDetails = ({ data, userCategory, showMazemap }) => {
duration = false,
ean = false,
issn = [],
//items = [],
items = [],
notes = []
} = data;
// Temp FIX to filter out Hovedbilioteket items. TODO remove when all hutl items are deleted from koha.
const items = (data.items || []).filter(i => i.branchcode !== "hutl");
const ageLimitLabel = ageLimit === "0" ? "Tillatt for alle" : ageLimit;
let currentRowColor = "white";
......
import React, { useState } from "react";
import PropTypes from "prop-types";
import { useSelector } from "react-redux";
import PublicationDetails from "../PublicationDetails";
import { Button, Modal } from "@digibib/deichman-ui";
import FocusTrap from "focus-trap-react";
import ModalPortal from "../ModalPortal/ModalPortal";
import { useRouter } from "next/router";
export default function PublicationDetailsButton(props) {
const { children, publication } = props;
const butttonsProps = { ...props };
delete butttonsProps.children;
delete butttonsProps.publication;
const category = useSelector(state => state.auth.userData.category);
const { query } = useRouter();
const [showLoginModal, setShowLoginModal] = useState(false);
const [showDelayedModal, setShowDelayedModal] = useState(false);
const show = () => {
setShowLoginModal(true);
setTimeout(() => setShowDelayedModal(true), 300);
};
const hide = () => {
setShowDelayedModal(false);
setTimeout(() => setShowLoginModal(false), 300);
};
return (
<>
{showLoginModal && (
<ModalPortal>
<FocusTrap
active={showDelayedModal}
focusTrapOptions={{
initialFocus: "#publication-details-trap"
}}
>
<Modal
name="Detaljer"
visible={showDelayedModal}
onClose={hide}
showClose
width="wide"
>
<div
className="focus-trap-target"
id="publication-details-trap"
tabIndex="-1"
>
<PublicationDetails
data={publication}
userCategory={category}
onClose={hide}
showMazemap={query && query.mazemap ? true : false}
/>
</div>
</Modal>
</FocusTrap>
</ModalPortal>
)}
<Button {...butttonsProps} onClick={show}>
{children}
</Button>
</>
);
}
PublicationDetailsButton.prototypes = {
publication: PropTypes.object.isRequired
};
import React from "react";
import PropTypes from "prop-types";
import autoBind from "auto-bind";
import { connect } from "react-redux";
import FocusTrap from "focus-trap-react";
import { toggleDetails } from "../../store/application";
import PublicationDetails from "../PublicationDetails";
import { Modal } from "@digibib/deichman-ui";
/**
* Responsible for reserving items from the catalog
* -> Shows loginform if user is not logged in
* -> Then shows remote/reservation-form
*/
class PublicationDetailsManager extends React.Component {
constructor(props) {
super(props);
autoBind(this);
this.state = {
shouldRender: this.props.isVisible
};
}
componentDidUpdate(prevProps) {
// Prevent rendering of contents if not visible, but still allow for
// transition when showing/hiding by adding slight unmount-delay
if (prevProps.isVisible && !this.props.isVisible) {
setTimeout(() => this.setState({ shouldRender: false }), 300);
} else if (!prevProps.isVisible && this.props.isVisible) {
this.setState({ shouldRender: true }); // eslint-disable-line react/no-did-update-set-state
}
}
handleCloseModal(e) {
e.preventDefault();
this.props.toggleDetails();
}
render() {
const {
isVisible,
userCategory,
showMazemap,
data: { publication = {} },
query,
} = this.props;
return (
<FocusTrap
active={this.state.shouldRender}
focusTrapOptions={{
initialFocus: "#publication-details-trap"
}}
>
<Modal
name="Reserver"
visible={isVisible}
onClose={this.handleCloseModal}
showClose
width="wide"
>
<div
className="focus-trap-target"
id="publication-details-trap"
tabIndex="-1"
>
{this.state.shouldRender ? (
<PublicationDetails
data={publication}
userCategory={userCategory}
onClose={this.handleCloseModal}
showMazemap={query && query.mazemap ? true : false}
/>
) : (
""
)}
</div>
</Modal>
</FocusTrap>
);
}
}
PublicationDetailsManager.propTypes = {
isVisible: PropTypes.bool.isRequired,
data: PropTypes.object,
userCategory: PropTypes.string,
toggleDetails: PropTypes.func.isRequired,
};
PublicationDetailsManager.defaultProps = {
data: {},
userCategory: ""
};
function mapStateToProps(state) {
const { details } = state.application;
const { category } = state.auth.userData;
return {
isVisible: details.visible,
data: details.data,
userCategory: category
};
}
function mapDispatchToProps(dispatch) {
return {
toggleDetails: () => dispatch(toggleDetails())
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(PublicationDetailsManager);
import PublicationDetailsManager from "./PublicationDetailsManager";
export default PublicationDetailsManager;
import React, { useState } from "react";
import { Button, Select } from "@digibib/deichman-ui";
import { Block, Button, Select } from "@digibib/deichman-ui";
import {
AUDIO_BOOK,
BOOK,
......@@ -39,6 +39,7 @@ import ReservationContainer from "../ReservationsContainer/ReservationContainer"
import { useEffect } from "react";
import { useSelector } from "react-redux";
import LoginButton from "../LoginButton/LoginButton";
import PublicationDetailsButton from "../PublicationDetailsButton/PublicationDetailsButton";
export default function ReservePublicationWidget({
publications,
......@@ -173,6 +174,17 @@ export default function ReservePublicationWidget({
</>
</div>
)}
<Block top={2}>
<PublicationDetailsButton
className="link"
publication={{
...currentPublication,
items: copies[currentPublication.recordId]?.items
}}
>
Mer info og hylleplassering
</PublicationDetailsButton>
</Block>
</div>
);
}
......
.reserve-work-widget {
h3 {
margin-bottom: var(--spacing-2);
}
& > div {
display: flex;
flex-direction: row;
margin-top: var(--spacing-2);
& button {
flex-grow: 1;
......
......@@ -14,7 +14,7 @@ import "./styles.css";
import WorkTitle from "../WorkTitle/WorkTitle";
import HighlightedWorkDetails from "../HilightedWorkDetails/HighlightedWorkDetails";
import TextClamp from "../TextClamp/TextClamp";
import ReservePublicationWidget from "../ReservePublicationWidget/ReservPublicationWidget";
import ReservePublicationWidget from "../ReservePublicationWidget/ReservePublicationWidget";
const WorkHero = ({
workData,
......
......@@ -7,7 +7,6 @@ import { getPublication } from "../../store/resources";
import Head from "../../components/Head";
import FullScreen from "../../components/FullScreen";
import PublicationDetailsManager from "../../components/PublicationDetailsManager";
import { Block, Container, Loader, Text } from "@digibib/deichman-ui";
import TabPane from "../../components/TabPane";
import { translations } from "../../constants/translations";
......@@ -31,7 +30,7 @@ class PublicationPage extends React.Component {
await reduxStore.dispatch(
getPublication(publicationId, req, showDraftRecommendationById)
);
return { publicationId, showDraftRecommendationById, query };
return { publicationId, showDraftRecommendationById };
};
componentDidUpdate(prevProps) {
......@@ -60,7 +59,6 @@ class PublicationPage extends React.Component {
render() {
const {
query,
publication,
resourceApi: { error: resourceError },
publicationId
......@@ -113,7 +111,6 @@ class PublicationPage extends React.Component {
<WorkRecommendationContainer />
</Container>
{/*Should the components below still be included here? Why is the visibility state in redux? */}
<PublicationDetailsManager query={query} />
</>
</WorkPageWrapper>
</Fragment>
......@@ -124,7 +121,6 @@ class PublicationPage extends React.Component {
PublicationPage.propTypes = {
publicationId: PropTypes.string.isRequired,
publication: PropTypes.object.isRequired,
query: PropTypes.object.isRequired,
resourceApi: PropTypes.object.isRequired
};
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment