-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
header-ui: [#855] add inert request membership button+modal
- Loading branch information
Showing
6 changed files
with
149 additions
and
2 deletions.
There are no files selected for viewing
104 changes: 104 additions & 0 deletions
104
...ies/assets/semantic-ui/js/invenio_communities/community/header/RequestMembershipButton.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| /* | ||
| * This file is part of Invenio. | ||
| * Copyright (C) 2024 CERN. | ||
| * Copyright (C) 2024 Northwestern University. | ||
| * | ||
| * Invenio is free software; you can redistribute it and/or modify it | ||
| * under the terms of the MIT License; see LICENSE file for more details. | ||
| */ | ||
|
|
||
| import { i18next } from "@translations/invenio_communities/i18next"; | ||
| import { Formik } from "formik"; | ||
| import PropTypes from "prop-types"; | ||
| import React, { useState } from "react"; | ||
| import { TextAreaField } from "react-invenio-forms"; | ||
| import { Button, Form, Modal } from "semantic-ui-react"; | ||
|
|
||
| export function RequestMembershipModal(props) { | ||
| const { isOpen, onClose } = props; | ||
|
|
||
| const onSubmit = async (values, { setSubmitting, setFieldError }) => { | ||
| // TODO: implement me | ||
| console.log("RequestMembershipModal.onSubmit(args) called"); | ||
| console.log("TODO: implement me", arguments); | ||
| }; | ||
|
|
||
| let confirmed = true; | ||
|
|
||
| return ( | ||
| <Formik | ||
| initialValues={{ | ||
| requestMembershipComment: "", | ||
| }} | ||
| onSubmit={onSubmit} | ||
| > | ||
| {({ values, isSubmitting, handleSubmit }) => ( | ||
| <Modal | ||
| open={isOpen} | ||
| onClose={onClose} | ||
| size="small" | ||
| closeIcon | ||
| closeOnDimmerClick={false} | ||
| > | ||
| <Modal.Header>{i18next.t("Request Membership")}</Modal.Header> | ||
| <Modal.Content> | ||
| <Form> | ||
| <TextAreaField | ||
| fieldPath="requestMembershipComment" | ||
| label={i18next.t("Message to managers (optional)")} | ||
| /> | ||
| </Form> | ||
| </Modal.Content> | ||
| <Modal.Actions> | ||
| <Button onClick={onClose} floated="left"> | ||
| {i18next.t("Cancel")} | ||
| </Button> | ||
| <Button | ||
| onClick={(event) => { | ||
| // TODO: Implement me | ||
| console.log("RequestMembershipModal button clicked."); | ||
| }} | ||
| positive={confirmed} | ||
| primary | ||
| > | ||
| {i18next.t("Request Membership")} | ||
| </Button> | ||
| </Modal.Actions> | ||
| </Modal> | ||
| )} | ||
| </Formik> | ||
| ); | ||
| } | ||
|
|
||
| RequestMembershipModal.propTypes = { | ||
| isOpen: PropTypes.bool.isRequired, | ||
| onClose: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| export function RequestMembershipButton(props) { | ||
| const [isModalOpen, setModalOpen] = useState(false); | ||
|
|
||
| const handleClick = () => { | ||
| setModalOpen(true); | ||
| }; | ||
|
|
||
| const handleClose = () => { | ||
| setModalOpen(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Button | ||
| name="request-membership" | ||
| onClick={handleClick} | ||
| positive | ||
| icon="sign-in" | ||
| labelPosition="left" | ||
| content={i18next.t("Request Membership")} | ||
| /> | ||
| {isModalOpen && ( | ||
| <RequestMembershipModal isOpen={isModalOpen} onClose={handleClose} /> | ||
| )} | ||
| </> | ||
| ); | ||
| } |
21 changes: 21 additions & 0 deletions
21
invenio_communities/assets/semantic-ui/js/invenio_communities/community/header/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| /* | ||
| * This file is part of Invenio. | ||
| * Copyright (C) 2024 Northwestern University. | ||
| * | ||
| * Invenio is free software; you can redistribute it and/or modify it | ||
| * under the terms of the MIT License; see LICENSE file for more details. | ||
| */ | ||
|
|
||
| import ReactDOM from "react-dom"; | ||
|
|
||
| import React from "react"; | ||
|
|
||
| import { RequestMembershipButton } from "./RequestMembershipButton"; | ||
|
|
||
| const domContainer = document.getElementById("request-membership-app"); | ||
|
|
||
| const community = JSON.parse(domContainer.dataset.community); | ||
|
|
||
| if (domContainer) { | ||
| ReactDOM.render(<RequestMembershipButton community={community} />, domContainer); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters