From dbfda0cc00d8356d2fcf3ff39abb653470e0d38f Mon Sep 17 00:00:00 2001
From: David Eckhard <dabombeeer@gmail.com>
Date: Wed, 5 Jan 2022 12:05:01 +0100
Subject: [PATCH] modify: override record deposit template and increase upload
 size

---
 .../deposit/RDMDepositForm.js                 | 398 ++++++++++++++++++
 .../js/invenio_theme_tugraz/deposit/index.js  |  23 +
 invenio_theme_tugraz/deposits.py              |  52 +++
 invenio_theme_tugraz/ext.py                   |   5 +-
 .../invenio_theme_tugraz/records/deposit.html |  38 ++
 invenio_theme_tugraz/webpack.py               |   3 +-
 6 files changed, 517 insertions(+), 2 deletions(-)
 create mode 100644 invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/deposit/RDMDepositForm.js
 create mode 100644 invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/deposit/index.js
 create mode 100644 invenio_theme_tugraz/deposits.py
 create mode 100644 invenio_theme_tugraz/templates/invenio_theme_tugraz/records/deposit.html

diff --git a/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/deposit/RDMDepositForm.js b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/deposit/RDMDepositForm.js
new file mode 100644
index 0000000..4602769
--- /dev/null
+++ b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/deposit/RDMDepositForm.js
@@ -0,0 +1,398 @@
+// This file is part of InvenioRDM
+// Copyright (C) 2020 CERN.
+// Copyright (C) 2020 Northwestern University.
+// Copyright (C) 2022 Graz University of Technology.
+//
+// Invenio App RDM 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 _get from "lodash/get";
+import React, { Component, createRef, Fragment } from "react";
+import {
+  AccessRightField,
+  CreatibutorsField,
+  DatesField,
+  DeleteButton,
+  DepositFormApp,
+  DepositFormTitle,
+  DescriptionsField,
+  FileUploader,
+  FormFeedback,
+  IdentifiersField,
+  LanguagesField,
+  SubjectsField,
+  LicenseField,
+  PIDField,
+  PreviewButton,
+  PublicationDateField,
+  PublishButton,
+  PublisherField,
+  RelatedWorksField,
+  ResourceTypeField,
+  SaveButton,
+  TitlesField,
+  VersionField,
+} from "react-invenio-deposit";
+import { AccordionField } from "react-invenio-forms";
+import { Card, Container, Divider, Grid, Ref, Sticky } from "semantic-ui-react";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+
+export class RDMDepositForm extends Component {
+  constructor(props) {
+    super(props);
+    this.config = props.config || {};
+    // TODO: retrieve from backend
+    this.config["canHaveMetadataOnlyRecords"] = true;
+
+    // TODO: Make ALL vocabulary be generated by backend.
+    // Currently, some vocabulary is generated by backend and some is
+    // generated by frontend here. Iteration is faster and abstractions can be
+    // discovered by generating vocabulary here. Once happy with vocabularies,
+    // then we can generate it in the backend.
+    this.vocabularies = {
+      metadata: {
+        ...this.config.vocabularies,
+
+        creators: {
+          ...this.config.vocabularies.creators,
+          type: [
+            { text: "Person", value: "personal" },
+            { text: "Organization", value: "organizational" },
+          ],
+        },
+
+        contributors: {
+          ...this.config.vocabularies.creators,
+          type: [
+            { text: "Person", value: "personal" },
+            { text: "Organization", value: "organizational" },
+          ],
+        },
+
+        // TODO: Replace with an API backend
+        funding: {
+          funder: [
+            {
+              name: "National Institutes of Health (US)",
+              identifier: "funder1",
+              scheme: "funderScheme1",
+            },
+            {
+              name: "European Commission (EU)",
+              identifier: "funder2",
+              scheme: "funderScheme2",
+            },
+          ],
+          award: [
+            {
+              title: "CANCER &AIDS DRUGS--PRECLIN PHARMACOL/TOXICOLOGY",
+              number: "N01CM037835-016",
+              identifier: "awardA",
+              scheme: "awardSchemeA",
+              parentScheme: "funderScheme1",
+              parentIdentifier: "funder1",
+            },
+            {
+              title:
+                "Beyond the Standard Model at the LHC and with Atom Interferometers.",
+              number: "228169",
+              identifier: "awardB1",
+              scheme: "awardSchemeB",
+              parentScheme: "funderScheme2",
+              parentIdentifier: "funder2",
+            },
+            {
+              title: "ENvironmental COnditions in GLAucoma Patients",
+              number: "747441",
+              identifier: "awardB2",
+              scheme: "awardSchemeB",
+              parentScheme: "funderScheme2",
+              parentIdentifier: "funder2",
+            },
+          ],
+        },
+        identifiers: {
+          ...this.config.vocabularies.identifiers,
+        },
+      },
+    };
+
+    // check if files are present
+    this.noFiles = false;
+    if (
+      !Array.isArray(this.props.files.entries) ||
+      (!this.props.files.entries.length && this.props.record.is_published)
+    ) {
+      this.noFiles = true;
+    }
+  }
+
+  formFeedbackRef = createRef();
+  sidebarRef = createRef();
+
+  accordionStyle = {
+    header: { className: "inverted brand", style: { cursor: "pointer" } },
+  };
+
+  render() {
+    return (
+      <DepositFormApp
+        config={this.config}
+        record={this.props.record}
+        files={this.props.files}
+        permissions={this.props.permissions}
+      >
+        <FormFeedback fieldPath="message" />
+        <Container style={{ marginTop: "10px" }}>
+          <DepositFormTitle />
+          <Grid>
+            <Grid.Row>
+              <Grid.Column width={11}>
+                <AccordionField
+                  fieldPath=""
+                  active={true}
+                  label={i18next.t("Files")}
+                  ui={this.accordionStyle}
+                >
+                  {this.noFiles && this.props.record.is_published && (
+                    <p
+                      style={{
+                        textAlign: "center",
+                        opacity: "0.5",
+                        cursor: "default !important",
+                      }}
+                    >
+                      <em>{i18next.t("The record has no files.")}</em>
+                    </p>
+                  )}
+                  <FileUploader
+                    isDraftRecord={!this.props.record.is_published}
+                    quota={{
+                      maxFiles: 100,
+                      maxStorage: 10 ** 11,
+                    }}
+                  />
+                </AccordionField>
+
+                <AccordionField
+                  fieldPath=""
+                  active={true}
+                  label={i18next.t("Basic information")}
+                  ui={this.accordionStyle}
+                >
+                  {this.config.pids.map((pid) => (
+                    <Fragment key={pid.scheme}>
+                      <PIDField
+                        btnLabelDiscardPID={pid.btn_label_discard_pid}
+                        btnLabelGetPID={pid.btn_label_get_pid}
+                        canBeManaged={pid.can_be_managed}
+                        canBeUnmanaged={pid.can_be_unmanaged}
+                        fieldPath={`pids.${pid.scheme}`}
+                        fieldLabel={pid.field_label}
+                        isEditingPublishedRecord={
+                          this.props.record.is_published === true // is_published is `null` at first upload
+                        }
+                        managedHelpText={pid.managed_help_text}
+                        pidLabel={pid.pid_label}
+                        pidPlaceholder={pid.pid_placeholder}
+                        pidType={pid.scheme}
+                        unmanagedHelpText={pid.unmanaged_help_text}
+                        required
+                      />
+                      <Divider />
+                    </Fragment>
+                  ))}
+
+                  <ResourceTypeField
+                    options={this.vocabularies.metadata.resource_type}
+                    required
+                  />
+                  <TitlesField
+                    options={this.vocabularies.metadata.titles}
+                    recordUI={this.props.record.ui}
+                    required
+                  />
+                  <PublicationDateField required />
+                  <CreatibutorsField
+                    label={i18next.t("Creators")}
+                    labelIcon={"user"}
+                    fieldPath={"metadata.creators"}
+                    roleOptions={this.vocabularies.metadata.creators.role}
+                    schema="creators"
+                    required
+                  />
+                  <DescriptionsField
+                    options={this.vocabularies.metadata.descriptions}
+                    recordUI={_get(this.props.record, "ui", null)}
+                    editorConfig={{
+                      removePlugins: [
+                        "Image",
+                        "ImageCaption",
+                        "ImageStyle",
+                        "ImageToolbar",
+                        "ImageUpload",
+                        "MediaEmbed",
+                        "Table",
+                        "TableToolbar",
+                        "TableProperties",
+                        "TableCellProperties",
+                      ],
+                    }}
+                  />
+                  <LicenseField
+                    fieldPath="metadata.rights"
+                    searchConfig={{
+                      searchApi: {
+                        axios: {
+                          headers: {
+                            Accept: "application/vnd.inveniordm.v1+json",
+                          },
+                          url: "/api/vocabularies/licenses",
+                          withCredentials: false,
+                        },
+                      },
+                      initialQueryState: {
+                        filters: [["tags", "recommended"]],
+                      },
+                    }}
+                    serializeLicenses={(result) => ({
+                      title: result.title_l10n,
+                      description: result.description_l10n,
+                      id: result.id,
+                      link: result.props.url,
+                    })}
+                  />
+                  <br />
+                </AccordionField>
+
+                <AccordionField
+                  fieldPath=""
+                  active={true}
+                  label={i18next.t("Recommended information")}
+                  ui={this.accordionStyle}
+                >
+                  <CreatibutorsField
+                    addButtonLabel={i18next.t("Add contributor")}
+                    label={i18next.t("Contributors")}
+                    labelIcon={"user plus"}
+                    fieldPath={"metadata.contributors"}
+                    roleOptions={this.vocabularies.metadata.contributors.role}
+                    schema="contributors"
+                    modal={{
+                      addLabel: "Add contributor",
+                      editLabel: "Edit contributor",
+                    }}
+                  />
+                  <SubjectsField
+                    initialOptions={_get(
+                      this.props.record,
+                      "ui.subjects",
+                      null
+                    )}
+                    limitToOptions={
+                      this.vocabularies.metadata.subjects.limit_to
+                    }
+                  />
+
+                  <LanguagesField
+                    initialOptions={_get(
+                      this.props.record,
+                      "ui.languages",
+                      []
+                    ).filter((lang) => lang !== null)} // needed because dumped empty record from backend gives [null]
+                    serializeSuggestions={(suggestions) =>
+                      suggestions.map((item) => ({
+                        text: item.title_l10n,
+                        value: item.id,
+                        key: item.id,
+                      }))
+                    }
+                  />
+                  <DatesField options={this.vocabularies.metadata.dates} />
+                  <VersionField />
+                  <PublisherField />
+                  <br />
+                </AccordionField>
+                {/**TODO: uncomment to use FundingField*/}
+                {/* <AccordionField
+                fieldPath=""
+                active={true}
+                label={"Funding"}
+                ui={this.accordionStyle}
+                >
+                <FundingField options={this.vocabularies.metadata.funding} />
+                <ComingSoonField
+                  fieldPath="metadata.funding"
+                  label="Awards"
+                  labelIcon="money bill alternate outline"
+                />
+
+                <br />
+                </AccordionField> */}
+
+                <AccordionField
+                  fieldPath=""
+                  active={true}
+                  label={i18next.t("Alternate identifiers")}
+                  ui={this.accordionStyle}
+                >
+                  <IdentifiersField
+                    fieldPath="metadata.identifiers"
+                    label={i18next.t("Alternate identifier(s)")}
+                    labelIcon="barcode"
+                    schemeOptions={
+                      this.vocabularies.metadata.identifiers.scheme
+                    }
+                  />
+                </AccordionField>
+
+                <AccordionField
+                  fieldPath=""
+                  active={true}
+                  label={i18next.t("Related works")}
+                  ui={this.accordionStyle}
+                >
+                  <RelatedWorksField
+                    options={this.vocabularies.metadata.identifiers}
+                  />
+                  <br />
+                </AccordionField>
+              </Grid.Column>
+              <Ref innerRef={this.sidebarRef}>
+                <Grid.Column width={5} className="deposit-sidebar">
+                  <Sticky context={this.sidebarRef} offset={20}>
+                    <Card className="actions">
+                      <Card.Content>
+                        <div className="sidebar-buttons">
+                          <SaveButton fluid className="save-button" />
+                          <PreviewButton fluid className="preview-button" />
+                        </div>
+                        <PublishButton fluid />
+                      </Card.Content>
+                    </Card>
+
+                    <Card className="actions">
+                      <Card.Content>
+                        <DeleteButton
+                          fluid
+                          // TODO: make is_published part of the API response
+                          //       so we don't have to do this
+                          isPublished={this.props.record.is_published}
+                        />
+                      </Card.Content>
+                    </Card>
+
+                    <AccessRightField
+                      label={i18next.t("Visibility")}
+                      labelIcon={"shield"}
+                    />
+                  </Sticky>
+                </Grid.Column>
+              </Ref>
+            </Grid.Row>
+          </Grid>
+        </Container>
+      </DepositFormApp>
+    );
+  }
+}
diff --git a/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/deposit/index.js b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/deposit/index.js
new file mode 100644
index 0000000..3a3e544
--- /dev/null
+++ b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/deposit/index.js
@@ -0,0 +1,23 @@
+// This file is part of InvenioRDM
+// Copyright (C) 2020 CERN.
+// Copyright (C) 2020 Northwestern University.
+//
+// Invenio App RDM 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 React from "react";
+import ReactDOM from "react-dom";
+import "semantic-ui-css/semantic.min.css";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+import { getInputFromDOM } from "react-invenio-deposit";
+import { RDMDepositForm } from "./RDMDepositForm";
+
+ReactDOM.render(
+  <RDMDepositForm
+    record={getInputFromDOM("deposits-record")}
+    files={getInputFromDOM("deposits-record-files")}
+    config={getInputFromDOM("deposits-config")}
+    permissions={getInputFromDOM("deposits-record-permissions")}
+  />,
+  document.getElementById("deposit-form")
+);
diff --git a/invenio_theme_tugraz/deposits.py b/invenio_theme_tugraz/deposits.py
new file mode 100644
index 0000000..bb25219
--- /dev/null
+++ b/invenio_theme_tugraz/deposits.py
@@ -0,0 +1,52 @@
+# -*- coding: utf-8 -*-
+#
+# Copyright (C) 2020-2022 Graz University of Technology.
+#
+# invenio-theme-tugraz is free software; you can redistribute it and/or
+# modify it under the terms of the MIT License; see LICENSE file for more
+# details.
+
+
+from flask import render_template
+from flask_login import login_required
+from invenio_app_rdm.records_ui.views.decorators import (
+    pass_draft,
+    pass_draft_files,
+)
+from invenio_app_rdm.records_ui.views.deposits import (
+    get_form_config,
+    get_search_url,
+    new_record,
+)
+from invenio_rdm_records.resources.serializers import UIJSONSerializer
+
+
+@login_required
+def deposit_create():
+    """Create a new deposit."""
+    return render_template(
+        "invenio_theme_tugraz/records/deposit.html",
+        forms_config=get_form_config(createUrl=("/api/records")),
+        searchbar_config=dict(searchUrl=get_search_url()),
+        record=new_record(),
+        files=dict(
+            default_preview=None, entries=[], links={}
+        ),
+    )
+
+
+@login_required
+@pass_draft
+@pass_draft_files
+def deposit_edit(draft=None, draft_files=None, pid_value=None):
+    """Edit an existing deposit."""
+    record = UIJSONSerializer().serialize_object_to_dict(draft.to_dict())
+
+    return render_template(
+        "invenio_theme_tugraz/records/deposit.html",
+        forms_config=get_form_config(apiUrl=f"/api/records/{pid_value}/draft"),
+        record=record,
+        files=draft_files.to_dict(),
+        searchbar_config=dict(searchUrl=get_search_url()),
+        permissions=draft.has_permissions_to(['new_version'])
+    )
diff --git a/invenio_theme_tugraz/ext.py b/invenio_theme_tugraz/ext.py
index 7db9382..fc07d54 100644
--- a/invenio_theme_tugraz/ext.py
+++ b/invenio_theme_tugraz/ext.py
@@ -1,6 +1,6 @@
 # -*- coding: utf-8 -*-
 #
-# Copyright (C) 2020-2021 Graz University of Technology.
+# Copyright (C) 2020-2022 Graz University of Technology.
 #
 # invenio-theme-tugraz is free software; you can redistribute it and/or
 # modify it under the terms of the MIT License; see LICENSE file for more
@@ -10,6 +10,7 @@
 
 from . import config
 from .views import index
+from invenio_theme_tugraz.deposits import deposit_create, deposit_edit
 
 
 class InvenioThemeTugraz(object):
@@ -25,6 +26,8 @@ class InvenioThemeTugraz(object):
         # add index route rule
         # https://flask.palletsprojects.com/en/1.1.x/api/#flask.Flask.add_url_rule
         app.add_url_rule("/", "index", index)
+        app.add_url_rule("/uploads/new", "deposit_create", deposit_create)
+        app.add_url_rule("/uploads/<pid_value>", "deposit_edit", deposit_edit)
         self.init_config(app)
         app.extensions["invenio-theme-tugraz"] = self
 
diff --git a/invenio_theme_tugraz/templates/invenio_theme_tugraz/records/deposit.html b/invenio_theme_tugraz/templates/invenio_theme_tugraz/records/deposit.html
new file mode 100644
index 0000000..b3d767f
--- /dev/null
+++ b/invenio_theme_tugraz/templates/invenio_theme_tugraz/records/deposit.html
@@ -0,0 +1,38 @@
+{#
+  Copyright (C) 2020 CERN.
+  Copyright (C) 2020 Northwestern University.
+  Copyright (C) 2022 Graz University of Technology.
+
+  Invenio App RDM is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+#}
+{%- if not record.is_published and record.versions.index and record.versions.index > 1%}
+  {%- set title = _("New version") %}
+{%- elif not record.is_published %}
+  {%- set title = _("New upload") %}
+{% else %}
+  {%- set title = _("Edit upload") %}
+{%- endif %}
+{%- extends config.BASE_TEMPLATE %}
+
+{%- block page_body %}
+  {%- if record %}
+  <input id="deposits-record" type="hidden" name="deposits-record" value='{{record | tojson }}'></input>
+  {%- endif %}
+  {%- if files %}
+  <input id="deposits-record-files" type="hidden" name="deposits-record-files" value='{{files | tojson }}'></input>
+  {%- endif %}
+  {%- if forms_config %}
+  <input type="hidden" name="deposits-config" value='{{forms_config | tojson }}'></input>
+  {%- endif %}
+  {%- if permissions %}
+  <input id="deposits-record-permissions" type="hidden" name="deposits-record-permissions" value='{{permissions | tojson }}'></input>
+  {%- endif %}
+  <div id="deposit-form"></div>
+{%- endblock page_body %}
+
+{%- block javascript %}
+    {{ super() }}
+    {{ webpack['invenio-theme-tugraz-rdm-deposit.js'] }}
+    
+{%- endblock %}
diff --git a/invenio_theme_tugraz/webpack.py b/invenio_theme_tugraz/webpack.py
index a0be4cc..d6b48a6 100644
--- a/invenio_theme_tugraz/webpack.py
+++ b/invenio_theme_tugraz/webpack.py
@@ -1,6 +1,6 @@
 # -*- coding: utf-8 -*-
 #
-# Copyright (C) 2020 TUGRAZ.
+# Copyright (C) 2022 TUGRAZ.
 #
 # invenio-theme-tugraz  is free software.
 
@@ -17,6 +17,7 @@ theme = WebpackThemeBundle(
             entry={
                 "invenio-theme-tugraz-theme": "./less/invenio_theme_tugraz/theme.less",
                 "invenio-theme-tugraz-js": "./js/invenio_theme_tugraz/theme.js",
+                "invenio-theme-tugraz-rdm-deposit": "./js/invenio_theme_tugraz/deposit/index.js",
             },
             dependencies={
                 # add any additional npm dependencies here...