-
+
diff --git a/front/src/routes/scene/ScenePage.jsx b/front/src/routes/scene/ScenePage.jsx
index 79b5fbb122..45fbdf2847 100644
--- a/front/src/routes/scene/ScenePage.jsx
+++ b/front/src/routes/scene/ScenePage.jsx
@@ -24,9 +24,11 @@ const ScenePage = ({ children, ...props }) => (
search={props.debouncedSearch}
searchValue={props.sceneSearch}
searchPlaceHolder={
}
+ tags={props.tags}
+ searchTags={props.searchTags}
/>
-
+
diff --git a/front/src/routes/scene/edit-scene/Settings.jsx b/front/src/routes/scene/edit-scene/Settings.jsx
index 955da0d029..ff47c36437 100644
--- a/front/src/routes/scene/edit-scene/Settings.jsx
+++ b/front/src/routes/scene/edit-scene/Settings.jsx
@@ -89,6 +89,9 @@ class Settings extends Component {
isMulti
options={props.tags && props.tags.map(tag => ({ value: tag.name, label: tag.name }))}
onChange={tags => props.setTags(tags.map(tag => tag.value))}
+ formatCreateLabel={inputValue => (
+
+ )}
/>
diff --git a/front/src/routes/scene/index.js b/front/src/routes/scene/index.js
index ee6b54fff3..41a899509e 100644
--- a/front/src/routes/scene/index.js
+++ b/front/src/routes/scene/index.js
@@ -18,6 +18,9 @@ class Scene extends Component {
if (this.state.sceneSearch && this.state.sceneSearch.length) {
params.search = this.state.sceneSearch;
}
+ if (this.state.sceneTagSearch && this.state.sceneTagSearch.length) {
+ params.searchTags = this.state.sceneTagSearch.join(',');
+ }
const scenes = await this.props.httpClient.get('/api/v1/scene', params);
this.setState({
scenes,
@@ -31,12 +34,30 @@ class Scene extends Component {
});
}
};
+ getTags = async () => {
+ try {
+ const tags = await this.props.httpClient.get(`/api/v1/tag_scene`);
+ this.setState({
+ tags
+ });
+ } catch (e) {
+ console.error(e);
+ }
+ };
search = async e => {
await this.setState({
sceneSearch: e.target.value
});
await this.getScenes();
};
+ searchTags = async tags => {
+ console.log(tags);
+ await this.setState({
+ sceneTagSearch: tags
+ });
+ await this.getScenes();
+ };
+
changeOrderDir = async e => {
await this.setState({
getScenesOrderDir: e.target.value
@@ -88,6 +109,7 @@ class Scene extends Component {
getScenesOrderDir: 'asc',
scenes: [],
sceneSearch: null,
+ sceneTagSearch: null,
loading: true
};
this.debouncedSearch = debounce(this.search.bind(this), 200);
@@ -95,9 +117,10 @@ class Scene extends Component {
componentWillMount() {
this.getScenes();
+ this.getTags();
}
- render(props, { scenes, loading, getError }) {
+ render(props, { scenes, loading, getError, tags }) {
return (
);
}
diff --git a/front/src/routes/scene/style.css b/front/src/routes/scene/style.css
index 449c7c8814..f70dc5350b 100644
--- a/front/src/routes/scene/style.css
+++ b/front/src/routes/scene/style.css
@@ -39,9 +39,14 @@
}
.descriptionSceneEllipsis {
+ flex-grow: 2;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}
+
+.newButton {
+ min-width: min-content;
+}
diff --git a/server/lib/scene/scene.get.js b/server/lib/scene/scene.get.js
index bf54a01ab1..115a01b24f 100644
--- a/server/lib/scene/scene.get.js
+++ b/server/lib/scene/scene.get.js
@@ -1,4 +1,5 @@
const { Op } = require('sequelize');
+const Sequelize = require('sequelize');
const db = require('../../models');
const DEFAULT_OPTIONS = {
@@ -46,30 +47,27 @@ async function get(options) {
})),
};
}
-
- const scenes = await db.Scene.findAll(queryParams);
-
- let scenesPlain = scenes.map((scene) => scene.get({ plain: true }));
-
if (optionsWithDefault.search) {
- scenesPlain = scenesPlain.filter((scene) => {
- if (scene.name.toLowerCase().includes(optionsWithDefault.search.toLowerCase())) {
- return scene;
- }
- const tagsFound = scene.tags.find((tag) => {
- if (tag.name.toLowerCase().includes(optionsWithDefault.search.toLowerCase())) {
- return true;
- }
- return false;
- });
- if (tagsFound) {
- return scene;
- }
- return null;
+ queryParams.where = Sequelize.where(Sequelize.fn('lower', Sequelize.col('t_scene.name')), {
+ [Op.like]: `%${optionsWithDefault.search}%`,
+ });
+ }
+
+ if (optionsWithDefault.searchTags) {
+ const tags = await db.TagScene.findAll({
+ fields: 'scene_id',
+ where: {
+ [Op.or]: optionsWithDefault.searchTags.split(',').map((tag) => ({ name: { [Op.like]: `%${tag}%` } })),
+ },
});
+ queryParams.where = {
+ [Op.or]: tags.map((tag) => tag.get({ plain: true })).map((tag) => ({ id: tag.scene_id })),
+ };
}
- return scenesPlain;
+ const scenes = await db.Scene.findAll(queryParams);
+
+ return scenes.map((scene) => scene.get({ plain: true }));
}
module.exports = {