frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🔧 Added a bunch of fields to the metadata panel

Browse Source
This commit is contained in:
Rishi Ghan
2022-01-06 22:51:24 -08:00
parent 7bb5669c52
commit a411b696f5
4 changed files with 146 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -67,6 +67,7 @@
"react-sliding-pane": "^7.0.0",
"react-stickynode": "^4.0.0",
"react-table": "^7.7.0",
"react-textarea-autosize": "^8.3.3",
"react-window-dynamic-list": "^2.3.5",
"redux-socket.io-middleware": "^1.0.4",
"sharp": "^0.28.1",

2
src/client/components/ComicDetail/AsyncSelectPaginate/AsyncSelectPaginate.tsx
View File

@@ -6,7 +6,7 @@ import { withAsyncPaginate } from "react-select-async-paginate";
const CreatableAsyncPaginate = withAsyncPaginate(Creatable);
export const AsyncSelectPaginate = (props): ReactElement => {
console.log(props);
// console.log(props);
const [value, setValue] = useState(null);
const [isAddingInProgress, setIsAddingInProgress] = useState(false);

135
src/client/components/ComicDetail/EditMetadataPanel.tsx
View File

@@ -5,6 +5,7 @@ import arrayMutators from "final-form-arrays";
import { FieldArray } from "react-final-form-arrays";
import DatePicker from "react-datepicker";
import AsyncSelectPaginate from "./AsyncSelectPaginate/AsyncSelectPaginate";
import TextareaAutosize from "react-textarea-autosize";
import "react-datepicker/dist/react-datepicker.css";
export const EditMetadataPanel = (props): ReactElement => {
@@ -22,7 +23,20 @@ export const EditMetadataPanel = (props): ReactElement => {
/>
);
};
const TextareaAutosizeAdapter = ({ input, ...rest }) => {
return (
<TextareaAutosize
{...input}
{...rest}
onChange={(value) => input.onChange(value)}
/>
);
};
const rawFileDetails = useSelector(
(state: RootState) => state.comicInfo.comicBookDetail.rawFileDetails.name,
);
const dispatch = useDispatch();
console.log(rawFileDetails);
return (
<>
@@ -55,7 +69,8 @@ export const EditMetadataPanel = (props): ReactElement => {
name="issue_name"
component="input"
className="input"
placeholder="Issue Name"
initialValue={rawFileDetails}
placeholder={"Issue Name"}
/>
<span className="icon is-small is-left">
<i className="fa-solid fa-user-ninja"></i>
@@ -68,17 +83,18 @@ export const EditMetadataPanel = (props): ReactElement => {
<div className="field is-horizontal">
<div className="field-label"></div>
<div className="field-body">
<div className="field is-expanded">
<div className="field">
<p className="control">
<Field
name="issue_number"
component="input"
className="input"
placeholder="Issue Number"
/>
</p>
</div>
<div className="field">
<p className="control has-icons-left">
<Field
name="issue_number"
component="input"
className="input"
placeholder="Issue Number"
/>
<span className="icon is-small is-left">
<i className="fa-solid fa-hashtag"></i>
</span>
</p>
<p className="help">Do not enter the first zero</p>
</div>
{/* year */}
@@ -94,6 +110,87 @@ export const EditMetadataPanel = (props): ReactElement => {
</div>
</div>
{/* page count */}
<div className="field is-horizontal">
<div className="field-label"></div>
<div className="field-body">
<div className="field">
<p className="control has-icons-left">
<Field
name="page_count"
component="input"
className="input"
placeholder="Page Count"
/>
<span className="icon is-small is-left">
<i className="fa-solid fa-note-sticky"></i>
</span>
</p>
</div>
</div>
</div>
{/* Description */}
<div className="field is-horizontal">
<div className="field-label is-normal">
<label className="label">Description</label>
</div>
<div className="field-body">
<div className="field">
<p className="control is-expanded has-icons-left">
<Field
name={"description"}
className="textarea"
component={TextareaAutosizeAdapter}
placeholder={"Description"}
/>
</p>
</div>
</div>
</div>
<hr size="1" />
<div className="field is-horizontal">
<div className="field-label">
<label className="label">Distributor Info</label>
</div>
<div className="field-body">
<div className="field is-expanded">
<div className="field">
<p className="control has-icons-left">
<Field
name="distributor_sku"
component="input"
className="input"
placeholder="SKU"
/>
<span className="icon is-small is-left">
<i className="fa-solid fa-barcode"></i>
</span>
</p>
</div>
</div>
{/* UPC code */}
<div className="field">
<p className="control has-icons-left">
<Field
name="upc_code"
component="input"
className="input"
placeholder="UPC Code"
/>
<span className="icon is-small is-left">
<i className="fa-solid fa-box"></i>
</span>
</p>
</div>
</div>
</div>
<hr size="1" />
{/* Publisher */}
<div className="field is-horizontal">
<div className="field-label is-normal">
@@ -107,7 +204,7 @@ export const EditMetadataPanel = (props): ReactElement => {
component={AsyncSelectPaginateAdapter}
placeholder={
<div>
<i className="fas fa-print"></i> Publisher
<i className="fas fa-print mr-2"></i> Publisher
</div>
}
metronResource={"publisher"}
@@ -130,7 +227,7 @@ export const EditMetadataPanel = (props): ReactElement => {
component={AsyncSelectPaginateAdapter}
placeholder={
<div>
<i className="fas fa-book-open"></i> Story Arc
<i className="fas fa-book-open mr-2"></i> Story Arc
</div>
}
metronResource={"arc"}
@@ -153,7 +250,7 @@ export const EditMetadataPanel = (props): ReactElement => {
component={AsyncSelectPaginateAdapter}
placeholder={
<div>
<i className="fas fa-layer-group"></i> Series
<i className="fas fa-layer-group mr-2"></i> Series
</div>
}
metronResource={"series"}
@@ -207,7 +304,7 @@ export const EditMetadataPanel = (props): ReactElement => {
component={AsyncSelectPaginateAdapter}
placeholder={
<div>
<i className="fas fa-book-open"></i> Creator
<i className="fa-solid fa-ghost"></i> Creator
</div>
}
metronResource={"creator"}
@@ -220,7 +317,11 @@ export const EditMetadataPanel = (props): ReactElement => {
<Field
name={`${name}.role`}
metronResource={"role"}
placeholder={"Role"}
placeholder={
<div>
<i className="fa-solid fa-key"></i> Role
</div>
}
component={AsyncSelectPaginateAdapter}
/>
</p>

26
yarn.lock
View File

@@ -11370,6 +11370,15 @@ react-table@^7.7.0:
resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.7.0.tgz#e2ce14d7fe3a559f7444e9ecfe8231ea8373f912"
integrity sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==
react-textarea-autosize@^8.3.3:
version "8.3.3"
resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz#f70913945369da453fd554c168f6baacd1fa04d8"
integrity sha512-2XlHXK2TDxS6vbQaoPbMOfQ8GK7+irc2fVK6QFIcC8GOnH3zI/v481n+j1L0WaPVvKxwesnY93fEfH++sus2rQ==
dependencies:
"@babel/runtime" "^7.10.2"
use-composed-ref "^1.0.0"
use-latest "^1.0.0"
react-transition-group@^4.3.0:
version "4.4.2"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
@@ -13790,6 +13799,23 @@ url@^0.11.0:
punycode "1.3.2"
querystring "0.2.0"
use-composed-ref@^1.0.0:
version "1.2.1"
resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.2.1.tgz#9bdcb5ccd894289105da2325e1210079f56bf849"
integrity sha512-6+X1FLlIcjvFMAeAD/hcxDT8tmyrWnbSPMU0EnxQuDLIxokuFzWliXBiYZuGIx+mrAMLBw0WFfCkaPw8ebzAhw==
use-isomorphic-layout-effect@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz#7bb6589170cd2987a152042f9084f9effb75c225"
integrity sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==
use-latest@^1.0.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.0.tgz#a44f6572b8288e0972ec411bdd0840ada366f232"
integrity sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==
dependencies:
use-isomorphic-layout-effect "^1.0.0"
use@^3.1.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"