{
return (
<>
- {
- this.state.filtervisible ?
- <>
- {
- this.setState({filter: e.target.value});
- }}
- ref={(input): void => {this.filterfield = input;}}/>
- } color={{backgroundColor: 'red'}} onClick={(): void => {
- this.setState({filter: '', filtervisible: false});
- }}/>
- > :
-
{this.state.actors.filter(this.filterSearch).map((el) => ())}
>
@@ -155,16 +121,6 @@ class AddActorPopup extends React.Component {
});
}
- /**
- * enable filterfield and focus into searchbar
- */
- private enableFilterField(): void {
- this.setState({filtervisible: true}, () => {
- // focus filterfield after state update
- this.filterfield?.focus();
- });
- }
-
/**
* filter the actor array for search matches
* @param actor
@@ -185,17 +141,6 @@ class AddActorPopup extends React.Component {
this.tileClickHandler(filteredList[0]);
}
}
-
- /**
- * key event handling
- * @param event keyevent
- */
- private keypress(event: KeyboardEvent): void {
- // hide if escape is pressed
- if (event.key === 'f') {
- this.enableFilterField();
- }
- }
}
export default AddActorPopup;
diff --git a/src/elements/Popups/AddTagPopup/AddTagPopup.module.css b/src/elements/Popups/AddTagPopup/AddTagPopup.module.css
index 773d661..ec31ac8 100644
--- a/src/elements/Popups/AddTagPopup/AddTagPopup.module.css
+++ b/src/elements/Popups/AddTagPopup/AddTagPopup.module.css
@@ -1,26 +1,3 @@
-.popup {
- border: 3px #3574fe solid;
- border-radius: 18px;
- height: 80%;
- left: 20%;
- opacity: 0.95;
- position: absolute;
- top: 10%;
- width: 60%;
- z-index: 2;
-}
-
-.header {
- cursor: move;
- font-size: x-large;
- margin-left: 15px;
- margin-top: 10px;
- opacity: 1;
-}
-
-.content {
- margin-left: 20px;
- margin-right: 20px;
- margin-top: 10px;
- opacity: 1;
+.actionbar{
+ margin-bottom: 15px;
}
diff --git a/src/elements/Popups/AddTagPopup/AddTagPopup.test.js b/src/elements/Popups/AddTagPopup/AddTagPopup.test.js
index ff9a147..51ebf6c 100644
--- a/src/elements/Popups/AddTagPopup/AddTagPopup.test.js
+++ b/src/elements/Popups/AddTagPopup/AddTagPopup.test.js
@@ -25,11 +25,37 @@ describe('', function () {
const wrapper = shallow();
wrapper.setState({
- items: [{tag_id: 1, tag_name: 'test'}]
+ items: [{TagId: 1, TagName: 'test'}]
}, () => {
wrapper.find('Tag').first().dive().simulate('click');
expect(wrapper.instance().props.submit).toHaveBeenCalledTimes(1);
expect(wrapper.instance().props.onHide).toHaveBeenCalledTimes(1);
});
});
+
+ it('test parent submit if one item left', function () {
+ const onhide = jest.fn();
+ const submit = jest.fn();
+
+ const wrapper = shallow();
+
+ wrapper.setState({
+ items: [{TagId: 1, TagName: 'test'}]
+ }, () => {
+ wrapper.instance().parentSubmit();
+
+ expect(onhide).toHaveBeenCalledTimes(1);
+ expect(submit).toHaveBeenCalledTimes(1);
+
+ wrapper.setState({
+ items: [{TagId: 1, TagName: 'test'}, {TagId: 3, TagName: 'test3'}]
+ }, () => {
+ wrapper.instance().parentSubmit();
+
+ // expect no submit if there are more than 1 item left...
+ expect(onhide).toHaveBeenCalledTimes(1);
+ expect(submit).toHaveBeenCalledTimes(1);
+ })
+ });
+ });
});
diff --git a/src/elements/Popups/AddTagPopup/AddTagPopup.tsx b/src/elements/Popups/AddTagPopup/AddTagPopup.tsx
index a571551..c35fbff 100644
--- a/src/elements/Popups/AddTagPopup/AddTagPopup.tsx
+++ b/src/elements/Popups/AddTagPopup/AddTagPopup.tsx
@@ -3,15 +3,17 @@ import Tag from '../../Tag/Tag';
import PopupBase from '../PopupBase';
import {APINode, callAPI} from '../../../utils/Api';
import {TagType} from '../../../types/VideoTypes';
+import FilterButton from "../../FilterButton/FilterButton";
+import styles from './AddTagPopup.module.css'
interface props {
onHide: () => void;
submit: (tagId: number, tagName: string) => void;
- movie_id: number;
}
interface state {
items: TagType[];
+ filter: string;
}
/**
@@ -21,7 +23,11 @@ class AddTagPopup extends React.Component {
constructor(props: props) {
super(props);
- this.state = {items: []};
+ this.state = {items: [], filter: ''};
+
+ this.tagFilter = this.tagFilter.bind(this);
+ this.parentSubmit = this.parentSubmit.bind(this);
+ this.onItemClick = this.onItemClick.bind(this);
}
componentDidMount(): void {
@@ -34,18 +40,37 @@ class AddTagPopup extends React.Component {
render(): JSX.Element {
return (
-
+
+
+ this.setState({filter: filter})}/>
+
{this.state.items ?
- this.state.items.map((i) => (
+ this.state.items.filter(this.tagFilter).map((i) => (
{
- this.props.submit(i.TagId, i.TagName);
- this.props.onHide();
- }}/>
+ onclick={(): void => this.onItemClick(i)}/>
)) : null}
);
}
+
+ private onItemClick(tag: TagType): void {
+ this.props.submit(tag.TagId, tag.TagName);
+ this.props.onHide();
+ }
+
+ private tagFilter(tag: TagType): boolean {
+ return tag.TagName.toLowerCase().includes(this.state.filter.toLowerCase());
+ }
+
+ private parentSubmit(): void {
+ // allow submit only if one item is left in selection
+ const filteredList = this.state.items.filter(this.tagFilter);
+
+ if (filteredList.length === 1) {
+ // simulate click if parent submit
+ this.onItemClick(filteredList[0]);
+ }
+ }
}
export default AddTagPopup;
diff --git a/src/pages/Player/Player.tsx b/src/pages/Player/Player.tsx
index 79e9009..3784fc0 100644
--- a/src/pages/Player/Player.tsx
+++ b/src/pages/Player/Player.tsx
@@ -181,13 +181,10 @@ export class Player extends React.Component {
handlePopOvers(): JSX.Element {
return (
<>
- {this.state.popupvisible ?
- {
- this.setState({popupvisible: false});
- }}
- submit={this.quickAddTag}
- movie_id={this.state.movie_id}/> :
- null
+ {
+ this.state.popupvisible ?
+ this.setState({popupvisible: false})}
+ submit={this.quickAddTag}/> : null
}
{
this.state.actorpopupvisible ?