Skip to content

Commit a64cd8a

Browse files
fenekkufenekku
committed
header-ui: [#855] add inert request membership button+modal
1 parent d0d8511 commit a64cd8a

File tree

6 files changed

+149
-2
lines changed

6 files changed

+149
-2
lines changed

Diff for: ‎invenio_communities/assets/semantic-ui/js/invenio_communities/community/header/RequestMembershipButton.js

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
/*
2+
* This file is part of Invenio.
3+
* Copyright (C) 2024 CERN.
4+
* Copyright (C) 2024 Northwestern University.
5+
*
6+
* Invenio is free software; you can redistribute it and/or modify it
7+
* under the terms of the MIT License; see LICENSE file for more details.
8+
*/
9+
10+
import { i18next } from "@translations/invenio_communities/i18next";
11+
import { Formik } from "formik";
12+
import PropTypes from "prop-types";
13+
import React, { useState } from "react";
14+
import { TextAreaField } from "react-invenio-forms";
15+
import { Button, Form, Modal } from "semantic-ui-react";
16+
17+
export function RequestMembershipModal(props) {
18+
const { isOpen, onClose } = props;
19+
20+
const onSubmit = async (values, { setSubmitting, setFieldError }) => {
21+
// TODO: implement me
22+
console.log("RequestMembershipModal.onSubmit(args) called");
23+
console.log("TODO: implement me", arguments);
24+
};
25+
26+
let confirmed = true;
27+
28+
return (
29+
<Formik
30+
initialValues={{
31+
requestMembershipComment: "",
32+
}}
33+
onSubmit={onSubmit}
34+
>
35+
{({ values, isSubmitting, handleSubmit }) => (
36+
<Modal
37+
open={isOpen}
38+
onClose={onClose}
39+
size="small"
40+
closeIcon
41+
closeOnDimmerClick={false}
42+
>
43+
<Modal.Header>{i18next.t("Request Membership")}</Modal.Header>
44+
<Modal.Content>
45+
<Form>
46+
<TextAreaField
47+
fieldPath="requestMembershipComment"
48+
label={i18next.t("Message to managers (optional)")}
49+
/>
50+
</Form>
51+
</Modal.Content>
52+
<Modal.Actions>
53+
<Button onClick={onClose} floated="left">
54+
{i18next.t("Cancel")}
55+
</Button>
56+
<Button
57+
onClick={(event) => {
58+
// TODO: Implement me
59+
console.log("RequestMembershipModal button clicked.");
60+
}}
61+
positive={confirmed}
62+
primary
63+
>
64+
{i18next.t("Request Membership")}
65+
</Button>
66+
</Modal.Actions>
67+
</Modal>
68+
)}
69+
</Formik>
70+
);
71+
}
72+
73+
RequestMembershipModal.propTypes = {
74+
isOpen: PropTypes.bool.isRequired,
75+
onClose: PropTypes.func.isRequired,
76+
};
77+
78+
export function RequestMembershipButton(props) {
79+
const [isModalOpen, setModalOpen] = useState(false);
80+
81+
const handleClick = () => {
82+
setModalOpen(true);
83+
};
84+
85+
const handleClose = () => {
86+
setModalOpen(false);
87+
};
88+
89+
return (
90+
<>
91+
<Button
92+
name="request-membership"
93+
onClick={handleClick}
94+
positive
95+
icon="sign-in"
96+
labelPosition="left"
97+
content={i18next.t("Request Membership")}
98+
/>
99+
{isModalOpen && (
100+
<RequestMembershipModal isOpen={isModalOpen} onClose={handleClose} />
101+
)}
102+
</>
103+
);
104+
}

Diff for: ‎invenio_communities/assets/semantic-ui/js/invenio_communities/community/header/index.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/*
2+
* This file is part of Invenio.
3+
* Copyright (C) 2024 Northwestern University.
4+
*
5+
* Invenio is free software; you can redistribute it and/or modify it
6+
* under the terms of the MIT License; see LICENSE file for more details.
7+
*/
8+
9+
import ReactDOM from "react-dom";
10+
11+
import React from "react";
12+
13+
import { RequestMembershipButton } from "./RequestMembershipButton";
14+
15+
const domContainer = document.getElementById("request-membership-app");
16+
17+
const community = JSON.parse(domContainer.dataset.community);
18+
19+
if (domContainer) {
20+
ReactDOM.render(<RequestMembershipButton community={community} />, domContainer);
21+
}

Diff for: ‎invenio_communities/templates/semantic-ui/invenio_communities/details/base.html

+5
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@
99

1010
{% extends "invenio_communities/base.html" %}
1111

12+
{%- block javascript %}
13+
{{ super() }}
14+
{{ webpack['invenio-communities-header.js'] }}
15+
{%- endblock javascript %}
16+
1217
{%- block page_body %}
1318
{% set community_menu_active = True %}
1419
{% include "invenio_communities/details/header.html" %}

Diff for: ‎invenio_communities/templates/semantic-ui/invenio_communities/details/header.html

+17-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
This file is part of Invenio.
44
Copyright (C) 2016-2020 CERN.
5+
Copyright (C) 2024 Northwestern University.
56

67
Invenio is free software; you can redistribute it and/or modify it
78
under the terms of the MIT License; see LICENSE file for more details.
@@ -10,12 +11,25 @@
1011
{%- from "invenio_theme/macros/truncate.html" import truncate_text %}
1112
{%- from "invenio_communities/details/macros/access-status-label.html" import access_status_label -%}
1213

14+
{% macro button_to_request_membership(community) %}
15+
{# TODO: replace by permission check when permissions implemented #}
16+
{% if config.COMMUNITIES_ALLOW_MEMBERSHIP_REQUESTS %}
17+
<div
18+
id="request-membership-app"
19+
data-community='{{ community | tojson }}'
20+
class="display-inline-block"
21+
>
22+
</div>
23+
{% endif %}
24+
{% endmacro %}
25+
26+
1327
<div
1428
class="ui container fluid page-subheader-outer with-submenu rel-pt-2 ml-0-mobile mr-0-mobile">
1529
<div class="ui container relaxed grid page-subheader mr-0-mobile ml-0-mobile">
1630
<div class="row pb-0">
1731
<div
18-
class="sixteen wide mobile sixteen wide tablet thirteen wide computer column">
32+
class="sixteen wide mobile sixteen wide tablet eleven wide computer column">
1933
<div
2034
class="community-header flex align-items-center column-mobile align-items-start-mobile">
2135
<div class="flex align-items-center">
@@ -105,7 +119,8 @@ <h1 class="ui medium header mb-0">{{ community.metadata.title }}</h1>
105119
</div>
106120
</div>
107121
<div
108-
class="sixteen wide mobile sixteen wide tablet three wide computer right aligned middle aligned column">
122+
class="sixteen wide mobile sixteen wide tablet five wide computer right aligned middle aligned column">
123+
{{ button_to_request_membership(community) }}
109124
{%- if not community_use_jinja_header %}
110125
<a href="/uploads/new?community={{ community.slug }}"
111126
class="ui positive button labeled icon rel-mt-1 theme-secondary">

Diff for: ‎invenio_communities/views/communities.py

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
from invenio_communities.proxies import current_communities
2323

2424
from ..communities.resources.ui_schema import TypesSchema
25+
from ..members.records.api import Member
2526
from .decorators import pass_community
2627
from .template_loader import CommunityThemeChoiceJinjaLoader
2728

Diff for: ‎invenio_communities/webpack.py

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
themes={
2727
"semantic-ui": dict(
2828
entry={
29+
"invenio-communities-header": "./js/invenio_communities/community/header/index.js",
2930
"invenio-communities-new": "./js/invenio_communities/community/new.js",
3031
"invenio-communities-privileges": "./js/invenio_communities/settings/privileges/index.js",
3132
"invenio-communities-profile": "./js/invenio_communities/settings/profile/index.js",

0 commit comments

Comments
 (0)