WIP [erp5_web_renderjs_ui] Select editor

Not usable prototype

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_html.html

@@ -4,7 +4,7 @@
    <!--
      data-i18n=No records
      data-i18n=Records
-     data-i18n=Hide Rows
+     data-i18n=Select
      data-i18n=Submit
      data-i18n=sample of
    -->
@@ -50,7 +50,7 @@
            {{#if show_anchor}}
              <th data-i18n="Jump">Jump</th>
            {{/if}}
-           <th></th>
+           <th><!--input value="couscous" type="checkbox" data-checked="true" class="hide_element"></input--></th>
            {{#each head_value}}
               <th class="{{class_value}}">{{text}}</th>
            {{/each}}
@@ -118,7 +118,7 @@
                 </th>
              {{/if}}
              <td>
-               <input value="{{uid}}" type="checkbox" checked="true" class="hide_element">
+               <input value="{{uid}}" type="checkbox" data-checked="true" class="hide_element"></input>
              </td>
            {{#each cell_list}}
               <td>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_html.xml

@@ -234,7 +234,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>966.44549.11438.13482</string> </value>
+                <value> <string>968.19884.63675.46848</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -252,8 +252,8 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1523030835.06</float>
-                        <string>GMT+2</string>
+                        <float>1529332816.46</float>
+                        <string>UTC</string>
                       </tuple>
                     </state>
                   </object>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_js.js

@@ -430,7 +430,7 @@
               hide_button_name = 'SelectRows';
             } else {
               listbox_thead_template = listbox_hidden_thead_template;
-              hide_button_text = 'Hide Rows';
+              hide_button_text = 'Select';
               hide_button_name = 'Hide';
             }
             return RSVP.all([
@@ -880,10 +880,20 @@
       }
 
       if (evt.target === hide_button) {
+        evt.preventDefault();
+        url = "gadget_erp5_select_editor.html";
+        // options.sort_column_list = JSON.parse(gadget.state.sort_column_list_json);
+        // options.sort_list = JSON.parse(gadget.state.sort_list_json);
+        // options.key = gadget.state.key + "_sort_list:json";
+        return gadget.renderEditorPanel(url, {
+          all_docs: gadget.state.allDocs_result
+        });
+/*
         evt.preventDefault();
         return gadget.changeState({
           show_line_selector: true
         });
+*/
       }
 
       if (evt.target === select_button) {
@@ -893,7 +903,7 @@
         //maybe submit
         all_hide_element_list = gadget.element.querySelectorAll(".hide_element");
         for (i = 0; i < all_hide_element_list.length; i += 1) {
-          if (!all_hide_element_list[i].checked) {
+          if (all_hide_element_list[i].checked) {
             hide_element_list.push(all_hide_element_list[i]);
           }
         }
@@ -902,22 +912,25 @@
             query_list.push(new SimpleQuery({
               key: "catalog.uid",
               type: "simple",
-              operator: "!=",
+              // operator: "!=",
               value: hide_element_list[i].getAttribute("value")
             }));
           }
-          if (gadget.state.extended_search) {
-            search_query = QueryFactory.create(gadget.state.extended_search);
-          }
-          if (search_query) {
-            query_list.push(search_query);
-          }
           search_query = new ComplexQuery({
-            operator: "AND",
+            operator: "OR",
             query_list: query_list,
             type: "complex"
           });
 
+          if (gadget.state.extended_search) {
+            search_query = new ComplexQuery({
+              operator: "AND",
+              query_list: [search_query,
+                           QueryFactory.create(gadget.state.extended_search)],
+              type: "complex"
+            });
+          }
+
           return gadget.redirect({
             command: 'store_and_change',
             options: {

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_js.xml

@@ -236,7 +236,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>967.65060.33188.22937</string> </value>
+                <value> <string>968.22405.48825.19148</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -254,7 +254,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1528107178.27</float>
+                        <float>1529480446.04</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css

@@ -684,7 +684,8 @@ div[data-gadget-scope='editor_panel'] section fieldset input[type="radio"] {
 }
 div[data-gadget-scope='editor_panel'] section .filter_item_container > div,
 div[data-gadget-scope='editor_panel'] section .sort_item_container > div,
-div[data-gadget-scope='editor_panel'] section .column_item_container > div {
+div[data-gadget-scope='editor_panel'] section .column_item_container > div,
+div[data-gadget-scope='editor_panel'] section .select_item_container > div {
   display: flex;
   align-items: flex-start;
   padding: 6pt 0;
@@ -692,14 +693,74 @@ div[data-gadget-scope='editor_panel'] section .column_item_container > div {
 div[data-gadget-scope='editor_panel'] section .filter_item_container > div .filter_item,
 div[data-gadget-scope='editor_panel'] section .sort_item_container > div .filter_item,
 div[data-gadget-scope='editor_panel'] section .column_item_container > div .filter_item,
+div[data-gadget-scope='editor_panel'] section .select_item_container > div .filter_item,
 div[data-gadget-scope='editor_panel'] section .filter_item_container > div .sort_item,
 div[data-gadget-scope='editor_panel'] section .sort_item_container > div .sort_item,
 div[data-gadget-scope='editor_panel'] section .column_item_container > div .sort_item,
+div[data-gadget-scope='editor_panel'] section .select_item_container > div .sort_item,
 div[data-gadget-scope='editor_panel'] section .filter_item_container > div .column_item,
 div[data-gadget-scope='editor_panel'] section .sort_item_container > div .column_item,
-div[data-gadget-scope='editor_panel'] section .column_item_container > div .column_item {
+div[data-gadget-scope='editor_panel'] section .column_item_container > div .column_item,
+div[data-gadget-scope='editor_panel'] section .select_item_container > div .column_item,
+div[data-gadget-scope='editor_panel'] section .filter_item_container > div .select_item,
+div[data-gadget-scope='editor_panel'] section .sort_item_container > div .select_item,
+div[data-gadget-scope='editor_panel'] section .column_item_container > div .select_item,
+div[data-gadget-scope='editor_panel'] section .select_item_container > div .select_item {
   flex: 1;
 }
+div[data-gadget-scope='editor_panel'] section .select_item_container {
+  /*
+@checkbox-height: @double-margin-size + @smartphone-font-size;
+input[type=checkbox] {
+  -webkit-appearance: none;
+  width: @checkbox-height;
+  height: @checkbox-height;
+  display: inline-block;
+  vertical-align: middle;
+  border: none;
+  background-color: @colortextboxbackground;
+  color: @colortextboxforeground;
+  border-radius: @border-radius;
+  border: @border;
+  // outline-offset: -2px;
+  &:checked {
+    // background-color: @colortextboxforeground;
+    // border: @margin-size @border-type @border-color;
+    // outline-offset: -@margin-size;
+  }
+}
+*/
+}
+div[data-gadget-scope='editor_panel'] section .select_item_container label {
+  width: 100%;
+  padding: 3pt;
+  background-color: #FFFFFF;
+  color: #1F1F1F;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 0.325em;
+}
+div[data-gadget-scope='editor_panel'] section .select_item_container label::before {
+  width: 1em;
+  display: inline-block;
+  font-weight: bold;
+  content: '☐';
+  color: rgba(0, 0, 0, 0.3);
+  margin-right: 6pt;
+}
+div[data-gadget-scope='editor_panel'] section .select_item_container input[type="checkbox"] {
+  display: none;
+  /*
+            display: inline-block;
+            width: 15%;
+            vertical-align: middle;
+            border: none;
+            outline: none;
+*/
+}
+div[data-gadget-scope='editor_panel'] section .select_item_container input[type="checkbox"]:checked + label::before {
+  color: #1F1F1F;
+  content: '☒';
+}
 div[data-gadget-scope='editor_panel'] section button {
   padding: 3pt 6pt;
   border: 1px solid rgba(0, 0, 0, 0.14);
@@ -3194,4 +3255,4 @@ hmtl .ui-icon-carat-u::before {
 }
 .ui-icon-clone::before {
   content: "\f24d";
-}
+}
\ No newline at end of file

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml

@@ -242,7 +242,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>966.44071.41960.10069</string> </value>
+                <value> <string>968.21425.21393.56439</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -260,8 +260,8 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1523002193.07</float>
-                        <string>GMT+2</string>
+                        <float>1529422871.91</float>
+                        <string>UTC</string>
                       </tuple>
                     </state>
                   </object>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_selecteditor_html.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>ERP5 Select Editor</title>
+
+    <!-- renderjs -->
+    <script src="rsvp.js"></script>
+    <script src="renderjs.js"></script>
+    <script src="handlebars.js"></script>
+
+    <!-- custom script -->
+    <script src="gadget_erp5_select_editor.js"></script>
+
+    <script id="select-item-template" type="text/x-handlebars-template">
+      <div><div class="select_item">
+        {{#each title_list}}
+          <input type="checkbox" name="selected" id="couscous_{{@index}}" />
+          <label for="couscous_{{@index}}">{{this}}</label>
+          <!--option {{#if selected}}selected="selected"{{/if}} data-i18n="{{text}}" value="{{value}}">{{text}}</option-->
+        {{/each}}
+            <!--input type="checkbox" name="couscous" id="couscous_1" />
+            <label for="couscous_1">Line 1</label>
+            <input type="checkbox" name="couscous" id="couscous_2" />
+            <label for="couscous_2">Line 2</label>
+            <input type="checkbox" name="couscous" id="couscous_3" />
+            <label for="couscous_3">Line 3</label>
+            <input type="checkbox" name="couscous" id="couscous_4" />
+            <label for="couscous_4">Line 4</label-->
+      </div></div>
+    </script>
+
+    <script id="select-template" type="text/x-handlebars-template">
+      <div class="ui-panel-inner">
+        <div data-role="header" role="banner" class="ui-header ui-bar-inherit">
+          <div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
+            <div class="ui-controlgroup-controls">
+              <button data-rel="save" data-i18n="Submit" type="submit" class="submit responsive ui-last-child ui-btn ui-btn-icon-left ui-icon-check">Submit</button>
+            </div>
+          </div>
+
+          <h1 class="ui-title" role="heading" data-i18n="Select Editor" aria-level="1">Select Editor</h1>
+
+          <div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-left">
+            <div class="ui-controlgroup-controls">
+              <button data-i18n="Close" data-rel="close" type="submit" class="close responsive ui-first-child ui-btn ui-btn-icon-left ui-icon-times">Close</button>
+            </div>
+          </div>
+        </div>
+
+        <section class="ui-body-c ui-content-section">
+          <fieldset class="ui-controlgroup ui-corner-all">
+            <select data-iconpos="left" name="heard_about">
+              <option data-i18n="Include" value="include">Include</option>
+              <option data-i18n="Exclude" value="exclude">Exclude</option>
+            </select>
+          </fieldset>
+
+          <div class="select_item_container ui-controlgroup ui-corner_all">
+          </div>
+        </section>
+      </div>
+    </script>
+
+  </head>
+  <body>
+    <form class="select_editor">
+      <div class="container"></div>
+    </form>
+  </body>
+</html>
\ No newline at end of file

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_selecteditor_js.js

+/*jslint indent: 2, maxerr: 3, nomen: true */
+/*global window, document, rJS, RSVP, Handlebars*/
+(function (window, document, rJS, RSVP, Handlebars) {
+  "use strict";
+
+  var gadget_klass = rJS(window),
+    template_element = gadget_klass.__template_element,
+    select_item_template = Handlebars.compile(template_element
+                         .getElementById("select-item-template")
+                         .innerHTML),
+    select_template = Handlebars.compile(template_element
+                         .getElementById("select-template")
+                         .innerHTML);
+
+  function createSelectItemTemplate(gadget, select_value) {
+    var sort_column_list = gadget.state.sort_column_list,
+      sort_value_list = sort_value || [],
+      option_list = [],
+      is_selected = false,
+      i;
+
+    for (i = 0; i < sort_column_list.length; i += 1) {
+      is_selected = is_selected || (sort_value_list[0] === sort_column_list[i][0]);
+      option_list.push({
+        text: sort_column_list[i][1],
+        value: sort_column_list[i][0],
+        selected: sort_value_list[0] === sort_column_list[i][0]
+      });
+    }
+    if (!is_selected && (sort_value !== undefined)) {
+      option_list.push({
+        text: sort_value_list[0],
+        value: sort_value_list[0],
+        selected: true
+      });
+    }
+
+    return gadget.translateHtml(sort_item_template({
+      option: option_list,
+      operator: sort_value_list[1]
+    }));
+  }
+
+  gadget_klass
+    //////////////////////////////////////////////
+    // acquired method
+    //////////////////////////////////////////////
+    .declareAcquiredMethod("translateHtml", "translateHtml")
+    .declareAcquiredMethod("redirect", "redirect")
+    .declareAcquiredMethod("trigger", "trigger")
+
+    .onStateChange(function onStateChange() {
+      var gadget = this;
+
+      return gadget.translateHtml(select_template())
+        .push(function (translated_html) {
+          var div = document.createElement("div");
+          div.innerHTML = translated_html;
+          var i,
+            subdiv,
+            container = gadget.element.querySelector(".container"),
+            filter_item_container = div.querySelector('.select_item_container'),
+            title_list = [];
+
+          for (i = 0; i < gadget.state.all_docs.data.rows.length; i += 1) {
+            // subdiv = document.createElement("div");
+            title_list.push(gadget.state.all_docs.data.rows[i].value.title);
+            // subdiv.innerHTML = 
+            // filter_item_container.appendChild(subdiv);
+          }
+          filter_item_container.innerHTML = select_item_template({
+            title_list: title_list
+          });
+
+        /*
+          return RSVP.all(gadget.state.sort_list
+            .filter(isValidSortItem)
+            .map(function (sort_item) {
+              return createSortItemTemplate(gadget, sort_item);
+            })
+            );
+        })
+        .push(function (result_list) {
+          var i,
+            subdiv,
+            filter_item_container = div.querySelector('.sort_item_container');
+
+          for (i = 0; i < result_list.length; i += 1) {
+            subdiv = document.createElement("div");
+            subdiv.innerHTML = result_list[i];
+            filter_item_container.appendChild(subdiv);
+          }
+*/
+          while (container.firstChild) {
+            container.removeChild(container.firstChild);
+          }
+          container.appendChild(div);
+        });
+    })
+
+    .declareMethod('render', function render(options) {
+      return this.changeState({
+        all_docs: options.all_docs
+        /*
+        sort_column_list: options.sort_column_list || [],
+        key: options.key,
+        sort_list: options.sort_list
+        */
+      });
+    })
+
+    .onEvent('click', function click(evt) {
+      if (evt.target.classList.contains('close')) {
+        evt.preventDefault();
+        return this.trigger();
+      }
+    }, false, false)
+
+    .onEvent('submit', function submit() {
+      var gadget = this,
+        sort_list = gadget.element.querySelectorAll(".sort_item"),
+        sort_query = [],
+        select_list,
+        sort_item,
+        options = {},
+        i;
+
+      for (i = 0; i < sort_list.length; i += 1) {
+        sort_item = sort_list[i];
+        select_list = sort_item.querySelectorAll("select");
+        sort_query[i] = [select_list[0][select_list[0].selectedIndex].value,
+          select_list[1][select_list[1].selectedIndex].value];
+      }
+      if (i === 0) {
+        options[gadget.state.key] = undefined;
+      } else {
+        options[gadget.state.key] = sort_query;
+      }
+      return gadget.redirect({
+        command: 'store_and_change',
+        options: options
+      });
+    });
+
+}(window, document, rJS, RSVP, Handlebars));
\ No newline at end of file

bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt

@@ -823,18 +823,82 @@ div[data-gadget-scope='editor_panel'] {
       }
     }
 
-    .filter_item_container, .sort_item_container, .column_item_container {
+    .filter_item_container, .sort_item_container, .column_item_container, .select_item_container {
       & > div {
         display: flex;
         align-items: flex-start;
         padding: @margin-size 0;
 
-        .filter_item, .sort_item, .column_item {
+        .filter_item, .sort_item, .column_item, .select_item {
           flex: 1;
         }
       }
     }
 
+    .select_item_container {
+      label {
+  // XXX Copy/paste from form input
+  width: 100%;
+            // display: inline-block;
+
+  padding: @half-margin-size;
+  background-color: @colortextboxbackground;
+  color: @colortextboxforeground;
+  border: @border;
+  border-radius: @border-radius;
+              &::before {
+                width: 1em;
+                display: inline-block;
+                font-weight: bold;
+                content: '☐';
+                color: @border-color;
+                margin-right: @margin-size;
+              }
+      }
+
+
+/*
+@checkbox-height: @double-margin-size + @smartphone-font-size;
+input[type=checkbox] {
+  -webkit-appearance: none;
+  width: @checkbox-height;
+  height: @checkbox-height;
+  display: inline-block;
+  vertical-align: middle;
+  border: none;
+  background-color: @colortextboxbackground;
+  color: @colortextboxforeground;
+  border-radius: @border-radius;
+  border: @border;
+  // outline-offset: -2px;
+  &:checked {
+    // background-color: @colortextboxforeground;
+    // border: @margin-size @border-type @border-color;
+    // outline-offset: -@margin-size;
+  }
+}
+*/
+
+
+          input[type="checkbox"] {
+            display: none;
+/*
+            display: inline-block;
+            width: 15%;
+            vertical-align: middle;
+            border: none;
+            outline: none;
+*/
+            &:checked + label {
+              // font-weight: bold;
+              &::before {
+  color: @colortextboxforeground;
+                content: '☒';
+              }
+            }
+          }
+    }
+
     button {
 
       // Copy pasted from listbox buttons