Last change

front/src/components/layout/CardFilter.jsx

@@ -1,16 +1,7 @@
 import { Fragment } from 'preact';
 import { Text } from 'preact-i18n';
-import Select from 'react-select';
 
-const CardFilter = ({
-  changeOrderDir,
-  orderValue = 'asc',
-  search,
-  searchValue,
-  searchPlaceHolder,
-  tags,
-  searchTags
-}) => (
+const CardFilter = ({ changeOrderDir, orderValue = 'asc', search, searchValue, searchPlaceHolder }) => (
   <Fragment>
     <select onChange={changeOrderDir} class="form-control custom-select w-auto">
       <option value="asc" selected={orderValue === 'asc'}>
@@ -20,18 +11,6 @@ const CardFilter = ({
         <Text id="global.orderDirDesc" />
       </option>
     </select>
-    {tags && (
-      <div class="ml-2 w-50">
-        <Select
-          options={tags.map(tag => ({ value: tag.name, label: tag.name }))}
-          onChange={tags => searchTags(tags.map(tag => tag.value))}
-          closeMenuOnSelect={false}
-          isMulti
-          formatCreateLabel={inputValue => <Text id="editScene.createTag" fields={{ tagName: inputValue }} />}
-        />
-      </div>
-    )}
-
     <div class="input-icon ml-2">
       <span class="input-icon-addon">
         <i class="fe fe-search" />

front/src/config/i18n/en.json

@@ -1953,7 +1953,8 @@
     "newButton": "New",
     "editButton": "Edit",
     "startButton": "Start",
-    "searchPlaceholder": "Search scenes"
+    "searchPlaceholder": "Search scenes",
+    "filterTagsName": "Tags"
   },
   "gateway": {
     "instanceConfiguredTitle": "Gladys Plus",

front/src/routes/scene/SceneCard.jsx

@@ -27,7 +27,7 @@ class SceneCard extends Component {
 
   render(props, { saving }) {
     return (
-      <div class="col-lg-3 p-2">
+      <div class="col-lg-4 p-2">
         <div
           class={cx('dimmer h-100', {
             active: saving

front/src/routes/scene/SceneMenu.jsx

@@ -0,0 +1,83 @@
+import { Text } from 'preact-i18n';
+import { Link } from 'preact-router/match';
+import { Component } from 'preact';
+import styles from './style.css';
+import cx from 'classnames';
+
+class SceneMenu extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    console.log(nextProps);
+
+    let tagsStatus = {};
+
+    if (nextProps.tags) {
+      tagsStatus = nextProps.tags.reduce(
+        (tags, tag) => ({
+          ...tags,
+          [tag.name]: false
+        }),
+        {}
+      );
+    }
+    console.log(nextProps.sceneTagSearch);
+    if (nextProps.sceneTagSearch) {
+      nextProps.sceneTagSearch.forEach(tagName => {
+        tagsStatus[tagName] = true;
+      });
+    }
+    this.setState({
+      tagsStatus
+    });
+    console.log('tags state', this.state.tagsStatus);
+  }
+
+  handleCheckboxChange = async tagName => {
+    console.log(tagName);
+    await this.setState(prevState => ({
+      tagsStatus: {
+        ...prevState.tagsStatus,
+        [tagName]: !prevState.tagsStatus[tagName]
+      }
+    }));
+    const selectedTags = Object.keys(this.state.tagsStatus).filter(tagName => this.state.tagsStatus[tagName]);
+    console.log(selectedTags);
+    this.props.searchTags(selectedTags);
+  };
+
+  render({ tags }, { tagsStatus }) {
+    console.log(tagsStatus);
+    return (
+      <div class="">
+        <Link activeClassName="active" class="d-flex align-items-center">
+          <span class="icon mr-2">
+            <i class="fe fe-hash" />
+          </span>
+          <Text class="fe-bold" id="scene.filterTagsName" />
+        </Link>
+        <div class={styles.menuScroll}>
+          {tags &&
+            tags.map(tag => (
+              <div class="form-check">
+                <input
+                  class="form-check-input"
+                  type="checkbox"
+                  id={tag.name}
+                  onChange={() => this.handleCheckboxChange(tag.name)}
+                  checked={tagsStatus[tag.name]}
+                />
+                <label class="form-check-label" htmlFor={tag.name}>
+                  {tag.name}
+                </label>
+              </div>
+            ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default SceneMenu;

front/src/routes/scene/ScenePage.jsx

@@ -6,6 +6,7 @@ import CardFilter from '../../components/layout/CardFilter';
 import SceneCards from './SceneCards';
 import EmptyState from './EmptyState';
 import style from './style.css';
+import SceneMenu from './SceneMenu';
 
 const ScenePage = ({ children, ...props }) => (
   <div class="page">
@@ -24,8 +25,6 @@ const ScenePage = ({ children, ...props }) => (
                   search={props.debouncedSearch}
                   searchValue={props.sceneSearch}
                   searchPlaceHolder={<Text id="scene.searchPlaceholder" />}
-                  tags={props.tags}
-                  searchTags={props.searchTags}
                 />
               </Localizer>
               <Link href="/dashboard/scene/new" class={cx('btn', 'btn-outline-primary', 'ml-2', style.newButton)}>
@@ -41,7 +40,10 @@ const ScenePage = ({ children, ...props }) => (
             <div class="loader" />
             <div class={cx('dimmer-content', style.sceneListContainer)}>
               <div class="row">
-                <div class="col-lg-12">
+                <div class="col-lg-3">
+                  <SceneMenu {...props} />
+                </div>
+                <div class="col-lg-9">
                   {props.scenes && <SceneCards {...props} />}
                   {props.scenes && props.scenes.length === 0 && <EmptyState />}
                 </div>

front/src/routes/scene/index.js

@@ -120,7 +120,7 @@ class Scene extends Component {
     this.getTags();
   }
 
-  render(props, { scenes, loading, getError, tags }) {
+  render(props, { scenes, loading, getError, tags, sceneTagSearch }) {
     return (
       <ScenePage
         httpClient={props.httpClient}
@@ -133,6 +133,7 @@ class Scene extends Component {
         switchActiveScene={this.switchActiveScene}
         tags={tags}
         searchTags={this.searchTags}
+        sceneTagSearch={sceneTagSearch}
       />
     );
   }

front/src/routes/scene/style.css

@@ -50,3 +50,10 @@
 .newButton {
   min-width: min-content;
 }
+
+.menuScroll {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  max-height: 200px;
+
+}