Deposit form

from oarepo_ui.resources.records.config import RecordsUIResourceConfig
 
class MymodelUIResourceConfig(RecordsUIResourceConfig):
    blueprint_name = "mymodel"
    url_prefix = "/mymodel"
 
    routes = {
        "deposit_create": "/uploads/new",
        "deposit_edit": "/uploads/<pid_value>",
        # ... other routes
    }

{# def
  theme,
  forms_config,
  searchbar_config,
  record,
  community,
  community_ui,
  community_use_jinja_header,
  files,
  preselectedCommunity=None,
  files_locked,
  extra_context,
  ui_links,
  permissions,
  webpack_entry,
#}
{% extends model_name ~ "/deposit_create.html" %}

import { useFieldData } from "@js/oarepo_ui/forms";
 
const MyField = ({ fieldPath }) => {
  const { getFieldData } = useFieldData();
 
  const { helpText, label, placeholder, required } = getFieldData({
    fieldPath: fieldPath,
    fieldRepresentation: "text",  // "full", "compact", or "text"
    icon: "pencil",  // optional icon
  });
 
  return (
    <div>
      {/* label is a React node in "full"/"compact" modes or string in "text" mode */}
      <label>{label}</label>
      <input name={fieldPath} placeholder={placeholder} />
      {helpText && <small>{helpText}</small>}
    </div>
  );
};

import React from "react";
import { TextField as InvenioTextField } from "react-invenio-forms";
import { useFieldData } from "@js/oarepo_ui/forms";
import { getIn, useFormikContext } from "formik";
 
export const UppercaseField = ({
  fieldPath,
  fieldRepresentation = "full",
  icon = "arrow up",
  ...rest
}) => {
  const { setFieldTouched, setFieldValue, values } = useFormikContext();
  const { getFieldData } = useFieldData();
 
  return (
    <InvenioTextField
      optimized
      fieldPath={fieldPath}
      {...getFieldData({ fieldPath, fieldRepresentation, icon })}
      onBlur={() => {
        const currentValue = getIn(values, fieldPath);
        // Convert to uppercase on field blur
        if (typeof currentValue === "string") {
          setFieldValue(fieldPath, currentValue.toUpperCase());
        }
        setFieldTouched(fieldPath, true);
      }}
      {...rest}
    />
  );
};

import React from "react";
import { FastField, Field } from "formik";
import PropTypes from "prop-types";
import { Form, Popup } from "semantic-ui-react";
import { useFieldData } from "@js/oarepo_ui/forms";
 
const CustomField = ({
  fieldPath,
  fieldRepresentation = "text",
  icon = "pencil",
  disabled = false,
  optimized = true,
  // Props from getFieldData can be overridden here
  label,
  helpText,
  required,
  placeholder,
  ...uiProps
}) => {
  const { getFieldData } = useFieldData();
 
  // Get field metadata from model YAML, with props as overrides
  const fieldData = getFieldData({ fieldPath, fieldRepresentation, icon });
  const computedLabel = label ?? fieldData.label;
  const computedHelpText = helpText ?? fieldData.helpText;
  const computedRequired = required ?? fieldData.required;
  const computedPlaceholder = placeholder ?? fieldData.placeholder;
 
  const FormikField = optimized ? FastField : Field;
 
  return (
    <>
      <FormikField name={fieldPath}>
        {({ field, meta }) => {
          // Resolve error to display
          const computedError = meta.error || (!meta.touched && meta.initialError);
 
          let formInputError = null;
          if (typeof computedError === "string") {
            formInputError = computedError;
          } else if (
            typeof computedError === "object" &&
            computedError.message
          ) {
            // Error object with severity/message - show as popup
            formInputError = (
              <Popup
                trigger={<span>{computedError.message}</span>}
                content={computedError.description}
                position="top center"
              />
            );
          }
 
          return (
            <Form.Input
              {...field}
              error={formInputError}
              disabled={disabled}
              fluid
              label={computedLabel}
              required={computedRequired}
              placeholder={computedPlaceholder}
              icon={icon}
              id={fieldPath}
              {...uiProps}
            />
          );
        }}
      </FormikField>
 
      {/* Optional help text below field */}
      {computedHelpText && <label className="helptext">{computedHelpText}</label>}
    </>
  );
};
 
CustomField.propTypes = {
  fieldPath: PropTypes.string.isRequired,
  fieldRepresentation: PropTypes.string,
  icon: PropTypes.string,
  disabled: PropTypes.bool,
  optimized: PropTypes.bool,
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  helpText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  required: PropTypes.bool,
  placeholder: PropTypes.string,
};
 
export default CustomField;

import { CustomField } from "./CustomField";
import { UppercaseField } from "./UppercaseField";
 
const FormFieldsContainerComponent = ({ record }) => {
  return (
    <React.Fragment>
      <AccordionField includesPaths={["metadata.custom"]} active label="Custom">
        <CustomField
          fieldPath="metadata.custom"
          icon="tag"
          fieldRepresentation="full"
          // Override label from schema if needed
          label="Custom Field Label"
        />
        {/* Field that automatically converts input to uppercase */}
        <UppercaseField fieldPath="metadata.code" fieldRepresentation="compact" />
      </AccordionField>
    </React.Fragment>
  );
};

{# def record, extra_context, model_name, ... #}
{% extends model_name ~ "/deposit_create.html" %}

{% extends "oarepo_ui/deposit_create.html" %}
 
{% block page_body %}
  {% if extra_context.deadline %}
  <div class="ui message warning">
    <i class="icon clock"></i>
    {{ _("Submission deadline:") }} {{ extra_context.deadline }}
  </div>
  {% endif %}
  {{ super() }}
{% endblock %}

class MymodelUIResourceConfig(RecordsUIResourceConfig):
    # ...
    templates = {
        "deposit_create": "mymodel.DepositCreate",
        "deposit_edit": "mymodel.DepositEdit",
    }

<script>
  // Custom validation before form submission
  document.addEventListener('DOMContentLoaded', function() {
    console.log('Custom deposit form behavior');
  });
</script>

from oarepo_ui.resources.components import UIResourceComponent
 
class ExtraContextComponent(UIResourceComponent):
    def before_ui_edit(self, resource, request, extra_context, **kwargs):
        """Add custom context to edit page."""
        record = record_from_resource(request)
        extra_context["record_history"] = self._get_history(record)

class MymodelUIResourceConfig(RecordsUIResourceConfig):
    # ...
    components = [ExtraContextComponent]