✏️ Edit Metadata drawer scaffold

src/client/actions/fileops.actions.tsx

@@ -173,7 +173,7 @@ export const fetchComicVineMatches =
               .replace(/[^a-zA-Z0-9 ]/g, "")
               .trim(),
             fieldList: "id",
-            limit: "20",
+            limit: "100",
             offset: "0",
             resources: "issue",
             scorerConfiguration: {

src/client/assets/scss/App.scss

@@ -312,8 +312,18 @@ $size-8: 0.9rem;
   }
 }
 
+// drawer content padding override
+.slide-pane__content {
+  padding: 24px 12px;
+}
+
+.slide-pane__header {
+  margin-top: 3.5rem;
+}
+
 .comic-vine-match-drawer {
   // comic detail drawer
+ 
   .search-criteria-card {
     width: 100%;
     .card-content {

src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -1,9 +1,8 @@
-import React, { ReactElement, useCallback, useContext, useEffect } from "react";
+import React, { ReactElement, useCallback, useContext } from "react";
 import { Form, Field } from "react-final-form";
 import { useDispatch } from "react-redux";
 import { saveSettings, deleteSettings } from "../../actions/settings.actions";
 import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
-import axios from "axios";
 import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 import AirDCPPSocket from "../../services/DcppSearchService";
 import { isUndefined, isEmpty, isNil } from "lodash";

src/client/components/ComicDetail.tsx

@@ -121,7 +121,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
       content: () => <EditMetadataPanel />,
     },
   };
-  console.log(comicVineSearchQueryObject);
 
   const [active, setActive] = useState(1);
 

src/client/components/ComicDetail/ComicVineMatchPanel.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement } from "react";
 import { ComicVineSearchForm } from "../ComicVineSearchForm";
 import MatchResult from "../MatchResult";
-import Loader from "react-loader-spinner";
 import { isEmpty } from "lodash";
 
 export const ComicVineMatchPanel = (comicVineData): ReactElement => {
@@ -11,7 +10,6 @@ export const ComicVineMatchPanel = (comicVineData): ReactElement => {
     comicVineAPICallProgress,
     comicVineSearchResults,
   } = comicVineData.props;
-  console.log(comicVineData);
   return (
     <>
       {!isEmpty(comicVineSearchQueryObject) && (

src/client/components/ComicDetail/EditMetadataPanel.tsx

@@ -1,7 +1,62 @@
 import React, { ReactElement } from "react";
+import { Form, Field } from "react-final-form";
 
 export const EditMetadataPanel = (props): ReactElement => {
-  return <>adsasdasd</>;
+  const validate = async () => {};
+  const onSubmit = async () => {};
+  return (
+    <>
+      <Form
+        onSubmit={onSubmit}
+        validate={validate}
+        render={({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <h2>Metadata</h2>
+
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">Issue Name</label>
+              </div>
+              <div className="field-body">
+                <div className="field">
+                  <Field name="issue_name">
+                    {(props) => (
+                      <p className="control is-expanded has-icons-left">
+                        <input
+                          className="input"
+                          type="text"
+                          placeholder="Name"
+                        />
+                        <span className="icon is-small is-left">
+                          <i className="fas fa-user"></i>
+                        </span>
+                      </p>
+                    )}
+                  </Field>
+                </div>
+                <div className="field">
+                  <Field name="issue_number">
+                    {(props) => (
+                      <p className="control is-expanded has-icons-left">
+                        <input
+                          className="input"
+                          type="text"
+                          placeholder="Name"
+                        />
+                        <span className="icon is-small is-left">
+                          <i className="fas fa-user"></i>
+                        </span>
+                      </p>
+                    )}
+                  </Field>
+                </div>
+              </div>
+            </div>
+          </form>
+        )}
+      />
+    </>
+  );
 };
 
 export default EditMetadataPanel;