Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-18 12:54:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

Date picker (#3572)

Browse Source 
* Add date picker dependency
* Add DateInput component
* Add DateInput to edit panels
* Add DateInput to DateFilter
* Add time to DateInput and add to Timestamp filter
* Use calendar icon for button
This commit is contained in:
WithoutPants
2023-03-22 11:25:50 +11:00
committed by GitHub
parent b602ed2381
commit b6b275edc8
14 changed files with 458 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
ui/v2.5/src/components/List/Filters/DateFilter.tsx
View File

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl";
import { CriterionModifier } from "../../../core/generated-graphql";
import { IDateValue } from "../../../models/list-filter/types";
import { Criterion } from "../../../models/list-filter/criteria/criterion";
import { DateInput } from "src/components/Shared/DateInput";
interface IDateFilterProps {
criterion: Criterion<IDateValue>;
@@ -18,11 +19,7 @@ export const DateFilter: React.FC<IDateFilterProps> = ({
const { value } = criterion;
function onChanged(
event: React.ChangeEvent<HTMLInputElement>,
property: "value" | "value2"
) {
const newValue = event.target.value;
function onChanged(newValue: string, property: "value" | "value2") {
const valueCopy = { ...value };
valueCopy[property] = newValue;
@@ -36,16 +33,10 @@ export const DateFilter: React.FC<IDateFilterProps> = ({
) {
equalsControl = (
<Form.Group>
<Form.Control
className="btn-secondary"
type="text"
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
onChanged(e, "value")
}
<DateInput
value={value?.value ?? ""}
placeholder={
intl.formatMessage({ id: "criterion.value" }) + " (YYYY-MM-DD)"
}
onValueChange={(v) => onChanged(v, "value")}
placeholder={intl.formatMessage({ id: "criterion.value" })}
/>
</Form.Group>
);
@@ -59,17 +50,10 @@ export const DateFilter: React.FC<IDateFilterProps> = ({
) {
lowerControl = (
<Form.Group>
<Form.Control
className="btn-secondary"
type="text"
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
onChanged(e, "value")
}
<DateInput
value={value?.value ?? ""}
placeholder={
intl.formatMessage({ id: "criterion.greater_than" }) +
" (YYYY-MM-DD)"
}
onValueChange={(v) => onChanged(v, "value")}
placeholder={intl.formatMessage({ id: "criterion.greater_than" })}
/>
</Form.Group>
);
@@ -83,25 +67,21 @@ export const DateFilter: React.FC<IDateFilterProps> = ({
) {
upperControl = (
<Form.Group>
<Form.Control
className="btn-secondary"
type="text"
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
onChanged(
e,
criterion.modifier === CriterionModifier.LessThan
? "value"
: "value2"
)
}
<DateInput
value={
(criterion.modifier === CriterionModifier.LessThan
? value?.value
: value?.value2) ?? ""
}
placeholder={
intl.formatMessage({ id: "criterion.less_than" }) + " (YYYY-MM-DD)"
onValueChange={(v) =>
onChanged(
v,
criterion.modifier === CriterionModifier.LessThan
? "value"
: "value2"
)
}
placeholder={intl.formatMessage({ id: "criterion.less_than" })}
/>
</Form.Group>
);

48
ui/v2.5/src/components/List/Filters/TimestampFilter.tsx
View File

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl";
import { CriterionModifier } from "../../../core/generated-graphql";
import { ITimestampValue } from "../../../models/list-filter/types";
import { Criterion } from "../../../models/list-filter/criteria/criterion";
import { DateInput } from "src/components/Shared/DateInput";
interface ITimestampFilterProps {
criterion: Criterion<ITimestampValue>;
@@ -18,11 +19,7 @@ export const TimestampFilter: React.FC<ITimestampFilterProps> = ({
const { value } = criterion;
function onChanged(
event: React.ChangeEvent<HTMLInputElement>,
property: "value" | "value2"
) {
const newValue = event.target.value;
function onChanged(newValue: string, property: "value" | "value2") {
const valueCopy = { ...value };
valueCopy[property] = newValue;
@@ -36,7 +33,13 @@ export const TimestampFilter: React.FC<ITimestampFilterProps> = ({
) {
equalsControl = (
<Form.Group>
<Form.Control
<DateInput
value={value?.value ?? ""}
onValueChange={(v) => onChanged(v, "value")}
placeholder={intl.formatMessage({ id: "criterion.value" })}
isTime
/>
{/* <Form.Control
className="btn-secondary"
type="text"
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
@@ -47,7 +50,7 @@ export const TimestampFilter: React.FC<ITimestampFilterProps> = ({
intl.formatMessage({ id: "criterion.value" }) +
" (YYYY-MM-DD HH:MM)"
}
/>
/> */}
</Form.Group>
);
}
@@ -60,7 +63,13 @@ export const TimestampFilter: React.FC<ITimestampFilterProps> = ({
) {
lowerControl = (
<Form.Group>
<Form.Control
<DateInput
value={value?.value ?? ""}
onValueChange={(v) => onChanged(v, "value")}
placeholder={intl.formatMessage({ id: "criterion.greater_than" })}
isTime
/>
{/* <Form.Control
className="btn-secondary"
type="text"
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
@@ -71,7 +80,7 @@ export const TimestampFilter: React.FC<ITimestampFilterProps> = ({
intl.formatMessage({ id: "criterion.greater_than" }) +
" (YYYY-MM-DD HH:MM)"
}
/>
/> */}
</Form.Group>
);
}
@@ -84,7 +93,24 @@ export const TimestampFilter: React.FC<ITimestampFilterProps> = ({
) {
upperControl = (
<Form.Group>
<Form.Control
<DateInput
value={
(criterion.modifier === CriterionModifier.LessThan
? value?.value
: value?.value2) ?? ""
}
onValueChange={(v) =>
onChanged(
v,
criterion.modifier === CriterionModifier.LessThan
? "value"
: "value2"
)
}
placeholder={intl.formatMessage({ id: "criterion.less_than" })}
isTime
/>
{/* <Form.Control
className="btn-secondary"
type="text"
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
@@ -104,7 +130,7 @@ export const TimestampFilter: React.FC<ITimestampFilterProps> = ({
intl.formatMessage({ id: "criterion.less_than" }) +
" (YYYY-MM-DD HH:MM)"
}
/>
/> */}
</Form.Group>
);
}