header-ui: [inveniosoftware#855] add inert request membership button+…

…modal

invenio_communities/assets/semantic-ui/js/invenio_communities/community/header/RequestMembershipButton.js

@@ -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} />
+      )}
+    </>
+  );
+}

invenio_communities/assets/semantic-ui/js/invenio_communities/community/header/index.js

@@ -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);
+}

invenio_communities/templates/semantic-ui/invenio_communities/details/base.html

@@ -9,6 +9,11 @@
 
 {% extends "invenio_communities/base.html" %}
 
+{%- block javascript %}
+{{ super() }}
+{{ webpack['invenio-communities-header.js'] }}
+{%- endblock javascript %}
+
 {%- block page_body %}
   {% set community_menu_active = True %}
   {% include "invenio_communities/details/header.html" %}

invenio_communities/templates/semantic-ui/invenio_communities/details/header.html

@@ -2,6 +2,7 @@
 
   This file is part of Invenio.
   Copyright (C) 2016-2020 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.
@@ -10,12 +11,25 @@
 {%- from "invenio_theme/macros/truncate.html" import truncate_text %}
 {%- from "invenio_communities/details/macros/access-status-label.html" import access_status_label -%}
 
+{% macro button_to_request_membership(community) %}
+  {# TODO: replace by permission check when permissions implemented #}
+  {% if config.COMMUNITIES_ALLOW_MEMBERSHIP_REQUESTS %}
+  <div
+    id="request-membership-app"
+    data-community='{{ community | tojson }}'
+    class="display-inline-block"
+    >
+  </div>
+  {% endif %}
+{% endmacro %}
+
+
 <div
   class="ui container fluid page-subheader-outer with-submenu rel-pt-2 ml-0-mobile mr-0-mobile">
   <div class="ui container relaxed grid page-subheader mr-0-mobile ml-0-mobile">
     <div class="row pb-0">
       <div
-        class="sixteen wide mobile sixteen wide tablet thirteen wide computer column">
+        class="sixteen wide mobile sixteen wide tablet eleven wide computer column">
         <div
           class="community-header flex align-items-center column-mobile align-items-start-mobile">
           <div class="flex align-items-center">
@@ -105,7 +119,8 @@ <h1 class="ui medium header mb-0">{{ community.metadata.title }}</h1>
         </div>
       </div>
       <div
-        class="sixteen wide mobile sixteen wide tablet three wide computer right aligned middle aligned column">
+        class="sixteen wide mobile sixteen wide tablet five wide computer right aligned middle aligned column">
+        {{ button_to_request_membership(community) }}
         {%- if not community_use_jinja_header %}
           <a href="/uploads/new?community={{ community.slug }}"
              class="ui positive button labeled icon rel-mt-1 theme-secondary">

invenio_communities/views/communities.py

@@ -22,6 +22,7 @@
 from invenio_communities.proxies import current_communities
 
 from ..communities.resources.ui_schema import TypesSchema
+from ..members.records.api import Member
 from .decorators import pass_community
 from .template_loader import CommunityThemeChoiceJinjaLoader
 

invenio_communities/webpack.py

@@ -26,6 +26,7 @@
     themes={
         "semantic-ui": dict(
             entry={
+                "invenio-communities-header": "./js/invenio_communities/community/header/index.js",
                 "invenio-communities-new": "./js/invenio_communities/community/new.js",
                 "invenio-communities-privileges": "./js/invenio_communities/settings/privileges/index.js",
                 "invenio-communities-profile": "./js/invenio_communities/settings/profile/index.js",