Merge remote-tracking branch 'origin/corovcam/fe-116-display-requests…

…-on-record-page' into corovcam/fe-116-display-requests-on-record-page

oarepo_requests/ui/theme/assets/semantic-ui/js/oarepo_requests_ui/record-requests/components/CreateRequestModalContent.jsx

@@ -17,7 +17,7 @@ import { CustomFields } from "react-invenio-forms";
 export const CreateRequestModalContent = ({ requestType, customSubmitHandler }) => {
   const payloadUI = requestType?.payload_ui;
 
-  const { isSubmitting, isValid, handleSubmit } = useFormikContext();
+  const { handleSubmit } = useFormikContext();
 
   const onSubmit = (event) => {
     if (_isFunction(customSubmitHandler)) {

oarepo_requests/ui/theme/assets/semantic-ui/js/oarepo_requests_ui/record-requests/components/ModalContentSideInfo.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+import { i18next } from "@translations/oarepo_requests_ui/i18next";
+import { List } from "semantic-ui-react";
+import _isEmpty from "lodash/isEmpty";
+import _sortBy from "lodash/sortBy";
+
+/** 
+ * @typedef {import("../types").Request} Request
+ * @typedef {import("../types").RequestType} RequestType
+ */
+
+/** @param {{ request: Request, requestType: RequestType, isSidebar: boolean }} props */
+export const ModalContentSideInfo = ({ request, requestType, isSidebar = false }) => {
+  return (
+    <List divided={isSidebar} relaxed={isSidebar}>
+      <List.Item>
+        <List.Content>
+          <List.Header>{i18next.t("Creator")}</List.Header>
+          {request.created_by?.link && <a href={request.created_by.link}>{request.created_by.label}</a> || request.created_by?.label}
+        </List.Content>
+      </List.Item>
+      <List.Item>
+        <List.Content>
+          <List.Header>{i18next.t("Receiver")}</List.Header>
+          {request.receiver?.link && <a href={request.receiver?.link}>{request.receiver?.label}</a> || request.receiver?.label}
+        </List.Content>
+      </List.Item>
+      <List.Item>
+        <List.Content>
+          <List.Header>{i18next.t("Request type")}</List.Header>
+          {requestType.name}
+        </List.Content>
+      </List.Item>
+      <List.Item>
+        <List.Content>
+          <List.Header>{i18next.t("Created")}</List.Header>
+          {`${Math.ceil(Math.abs(new Date(request?.created) - new Date()) / 3.6e6)} hours ago`}
+        </List.Content>
+      </List.Item>
+    </List>
+  )
+};

oarepo_requests/ui/theme/assets/semantic-ui/js/oarepo_requests_ui/record-requests/components/RequestList.jsx

@@ -36,10 +36,10 @@ export const RequestList = ({ requests, requestTypes, requestModalType }) => {
               <List.Item as="a" key={request.id}>
                 <List.Content floated="right" verticalAlign="middle">
                   <div style={{ textAlign: "right" }}>{request?.status ?? i18next.t("No status")}</div>
-                  <div>{new Date(request.created)?.toLocaleString("cs-CZ")}</div>
+                  {request?.created && <div>{request.created}</div>}
                 </List.Content>
                 <List.Content>
-                  <List.Header>{request.name}</List.Header>
+                  <List.Header>{!_isEmpty(request?.title) ? request.title : (!_isEmpty(request?.name) ? request.name : request.type)}</List.Header>
                   <List.Description>{_truncate(request.description, { length: 30 })}</List.Description>
                 </List.Content>
               </List.Item>

oarepo_requests/ui/theme/assets/semantic-ui/js/oarepo_requests_ui/record-requests/components/RequestModal.jsx

@@ -10,6 +10,7 @@ import axios from "axios";
 
 import { RequestModalContent, CreateRequestModalContent } from ".";
 import { REQUEST_TYPE } from "../utils/objects";
+import isDeepEmpty from "../utils/isDeepEmpty";
 import { RecordContext, RequestContext } from "../contexts";
 
 /** 
@@ -21,7 +22,7 @@ import { RecordContext, RequestContext } from "../contexts";
  */
 
 const mapPayloadUiToInitialValues = (payloadUi) => {
-  const initialValues = { payload: { content: "hello world" } }; // TODO: is this correct?
+  const initialValues = { payload: {} };
   payloadUi?.forEach(section => {
     section.fields.forEach(field => {
       initialValues.payload[field.field] = "";
@@ -36,7 +37,7 @@ const fetchUpdated = async (url, setter) => {
     url: url,
     headers: { 
       'Content-Type': 'application/json', 
-      'Accept': 'application/vnd.inveniordm.v1+json' // TODO: add to events request
+      'Accept': 'application/vnd.inveniordm.v1+json'
     }
   })
     .then(response => {
@@ -70,7 +71,7 @@ export const RequestModal = ({ request, requestTypes, requestModalType, isEventM
   const record = useContext(RecordContext);
 
   const formik = useFormik({
-    initialValues: !_isEmpty(request?.payload) ? { payload: request.payload } : mapPayloadUiToInitialValues(request?.payload_ui),
+    initialValues: !_isEmpty(request?.payload) ? { payload: request.payload } : (request?.payload_ui ? mapPayloadUiToInitialValues(request?.payload_ui) : {}),
     onSubmit: () => {}
   });
 
@@ -89,26 +90,25 @@ export const RequestModal = ({ request, requestTypes, requestModalType, isEventM
     }
 
     if (doNotHandleResolve) {
-      console.log("doNotHandleResolve", url, method, data);
       return axios({
         method: method,
         url: url,
-        data: data, // TODO: is this correct?
+        data: data,
         headers: { 'Content-Type': 'application/json' }
       });
     }
 
     console.log(url, method);
-    
+
     return axios({
       method: method,
       url: url,
-      data: data, // TODO: is this correct?
+      data: data,
       headers: { 'Content-Type': 'application/json' }
     })
       .then(response => {
         console.log(response);
-        fetchUpdated(record.links?.requests, setRequests);
+        fetchUpdated(record.links?.requests, (requests) => { setRequests(_sortBy(requests, ["status_code"])); });
         setModalOpen(false);
         formik.resetForm();
       })
@@ -122,14 +122,10 @@ export const RequestModal = ({ request, requestTypes, requestModalType, isEventM
   }
 
   const createAndSubmitRequest = async () => {
-    let createPayload = formik.values;
-    if (_isEmpty(formik.values?.payload?.content) && Object.keys(formik.values?.payload).length <= 1) {
-      createPayload = {};
-    }
     try {
-      const createdRequest = await callApi(request.links.actions?.create, 'post', createPayload, true);
-      await callApi(createdRequest.data?.links?.actions?.submit, 'post', formik.values, true);
-      fetchUpdated(record.links?.requests, setRequests);
+      const createdRequest = await callApi(request.links.actions?.create, 'post', formik.values, true);
+      await callApi(createdRequest.data?.links?.actions?.submit, 'post', {}, true);
+      fetchUpdated(record.links?.requests, (requests) => { setRequests(_sortBy(requests, ["status_code"])); });
       setModalOpen(false);
       formik.resetForm();
     } catch (error) {
@@ -140,26 +136,18 @@ export const RequestModal = ({ request, requestTypes, requestModalType, isEventM
     }
   }
 
-  const sendRequest = async (requestType, createAndSubmit = false) => {
+  const sendRequest = (requestType, createAndSubmit = false) => {
     formik.setSubmitting(true);
     setError(null);
     if (createAndSubmit) {
-      return await createAndSubmitRequest();
+      return createAndSubmitRequest();
     }
-
-    let customPayload = formik.values;
-    if (_isEmpty(formik.values?.payload?.content) && formik.values?.payload?.content != "hello world" && Object.keys(formik.values?.payload).length <= 1) { // TODO: remove hardcoded value
-      customPayload = {};
-    }
-
     if (requestType === REQUEST_TYPE.SAVE) {
-      return callApi(request.links.self, 'put', {});
-    } else if (requestType === REQUEST_TYPE.CREATE) {
-      return callApi(request.links.actions?.create, 'post', customPayload);
+      return callApi(request.links.self, 'put');
     }
-    console.log("bla", requestType, request.links);
-    console.log(!isEventModal ? request.links.actions[requestType] : request.links[requestType]);
-    return callApi(!isEventModal ? request.links.actions[requestType] : request.links[requestType], 'post');
+    const mappedData = !isDeepEmpty(formik.values) ? {} : formik.values;
+    const actionUrl = !isEventModal ? request.links.actions[requestType] : request.links[requestType];
+    return callApi(actionUrl, 'post', mappedData);
   }
 
   const confirmAction = (requestType, createAndSubmit = false) => {
@@ -244,6 +232,7 @@ export const RequestModal = ({ request, requestTypes, requestModalType, isEventM
   const requestType = requestTypes?.find(requestType => requestType.type_id === request.type) ?? {};
   const formWillBeRendered = requestModalType === REQUEST_TYPE.SUBMIT && requestType?.payload_ui;
   const submitButtonExtraProps = formWillBeRendered ? { type: "submit", form: "request-form" } : { onClick: () => confirmAction(REQUEST_TYPE.SUBMIT) };
+  const requestModalHeader = !_isEmpty(request?.title) ? request.title : (!_isEmpty(request?.name) ? request.name : request.type);
 
   return (
     <>
@@ -265,7 +254,7 @@ export const RequestModal = ({ request, requestTypes, requestModalType, isEventM
         <Dimmer active={formik.isSubmitting}>
           <Loader inverted size="large" />
         </Dimmer>
-        <Modal.Header as="h1" id="request-modal-header">{request.name}</Modal.Header>
+        <Modal.Header as="h1" id="request-modal-header">{requestModalHeader}</Modal.Header>
         <Modal.Content>
           {error &&
             <Message negative>

oarepo_requests/ui/theme/assets/semantic-ui/js/oarepo_requests_ui/record-requests/components/RequestModalContent.jsx

@@ -9,7 +9,7 @@ import { useFormikContext } from "formik";
 
 import { CustomFields } from "react-invenio-forms";
 
-import { RequestModal } from ".";
+import { RequestModal, ModalContentSideInfo } from ".";
 import { RequestContext } from "../contexts";
 import { REQUEST_TYPE } from "../utils/objects";
 import ReadOnlyCustomFields from "./common/ReadOnlyCustomFields";
@@ -21,38 +21,6 @@ import ReadOnlyCustomFields from "./common/ReadOnlyCustomFields";
  * @typedef {import("../types").Event} Event
  */
 
-/** @param {{ request: Request, requestType: RequestType, isSidebar: boolean }} props */
-const RequestSideInfo = ({ request, requestType, isSidebar = false }) => {
-  return (
-    <List divided={isSidebar} relaxed={isSidebar}>
-      <List.Item>
-        <List.Content>
-          <List.Header>{i18next.t("Creator")}</List.Header>
-          {request.created_by?.link && <a href={request.created_by.link}>{request.created_by.label}</a> || request.created_by?.label}
-        </List.Content>
-      </List.Item>
-      <List.Item>
-        <List.Content>
-          <List.Header>{i18next.t("Receiver")}</List.Header>
-          {request.receiver?.link && <a href={request.receiver?.link}>{request.receiver?.label}</a> || request.receiver?.label}
-        </List.Content>
-      </List.Item>
-      <List.Item>
-        <List.Content>
-          <List.Header>{i18next.t("Request type")}</List.Header>
-          {requestType.name}
-        </List.Content>
-      </List.Item>
-      <List.Item>
-        <List.Content>
-          <List.Header>{i18next.t("Created")}</List.Header>
-          {`${Math.ceil(Math.abs(new Date(request?.created) - new Date()) / 3.6e6)} hours ago`}
-        </List.Content>
-      </List.Item>
-    </List>
-  )
-};
-
 /** @param {{ request: Request, requestModalType: RequestTypeEnum, requestType: RequestType, fetchNewEvents: (url: string, setter: (events: Event[]) => void) => Promise<Event>, customSubmitHandler: (e) => void }} props */
 export const RequestModalContent = ({ request, requestType, requestModalType, fetchNewEvents, customSubmitHandler }) => {
   /** @type {[Request[], (requests: Request[]) => void]} */
@@ -105,7 +73,7 @@ export const RequestModalContent = ({ request, requestType, requestModalType, fe
       {(renderSubmitForm || renderReadOnlyData) &&
         <Grid.Row>
           <Grid.Column width={3} only="mobile">
-            <RequestSideInfo request={request} requestType={requestType} isSidebar />
+            <ModalContentSideInfo request={request} requestType={requestType} isSidebar />
           </Grid.Column>
           <Grid.Column width={13}>
             {renderSubmitForm &&
@@ -186,13 +154,13 @@ export const RequestModalContent = ({ request, requestType, requestModalType, fe
             }
           </Grid.Column>
           <Grid.Column width={3} only="tablet computer">
-            <RequestSideInfo request={request} requestType={requestType} isSidebar />
+            <ModalContentSideInfo request={request} requestType={requestType} isSidebar />
           </Grid.Column>
         </Grid.Row> ||
         /* No Submit Form (no PayloadUI for this request type) nor Payload (read only data) available for this Request */
         <Grid.Row>
           <Grid.Column>
-            <RequestSideInfo request={request} requestType={requestType} isSidebar={false} />
+            <ModalContentSideInfo request={request} requestType={requestType} isSidebar={false} />
           </Grid.Column>
         </Grid.Row>
       }

oarepo_requests/ui/theme/assets/semantic-ui/js/oarepo_requests_ui/record-requests/components/index.js

@@ -4,4 +4,5 @@ export { RequestModal } from "./RequestModal";
 export { RecordRequests } from "./RecordRequests";
 export { RequestModalContent } from "./RequestModalContent";
 export { CreateRequestModalContent } from "./CreateRequestModalContent";
-export { RequestList } from "./RequestList";
+export { RequestList } from "./RequestList";
+export { ModalContentSideInfo } from "./ModalContentSideInfo";

oarepo_requests/ui/theme/assets/semantic-ui/js/oarepo_requests_ui/record-requests/types.d.ts

@@ -2,6 +2,7 @@ export interface Request {
   name: string;
   description: string;
   id: string;
+  title: string;
   type: string;
   links: Links;
   created_by: Creator;
@@ -38,8 +39,8 @@ export interface Creator {
 
 export interface Receiver {
   reference: Reference;
-  type: Type;
-  label: Label;
+  type: string;
+  label: string;
   link: string;
 }
 

oarepo_requests/ui/theme/assets/semantic-ui/js/oarepo_requests_ui/record-requests/utils/isDeepEmpty.js

@@ -0,0 +1,18 @@
+import _isEmpty from "lodash/isEmpty";
+
+export default function isDeepEmpty(input) {
+  if(_isEmpty(input)) {
+    return true;
+  }
+  if(typeof input === 'object') {
+    for(const item of Object.values(input)) {
+      // if item is not undefined and is a primitive, return false
+      // otherwise dig deeper
+      if((item !== undefined && typeof item !== 'object') || !isDeepEmpty(item)) {
+        return false
+      }
+    }
+    return true;
+  }
+  return _isEmpty(input);
+}