added radio-row selection to listbox gadget

css/css.css

@@ -116,6 +116,10 @@ html a.ui-btn.error.status:active {
   width: 100%;
   float: none;
 }
+html table.ui-table tr td.plain,
+html table.ui-table tr th.plain {
+  padding: 0 .25em;
+}
 tbody .alert,
 tbody .proceed,
 tbody .large {

css/extensions.css

@@ -240,9 +240,11 @@ html table.table_default {
   width: 100%;
   text-align: center;
 }
-/* checkbox cells */
+/* checkboxRadio cells */
 html table th .ui-checkbox .ui-btn,
-html table td .ui-checkbox .ui-btn {
+html table td .ui-checkbox .ui-btn,
+html table th .ui-radio .ui-btn,
+html table td .ui-radio .ui-btn {
   border: 0 none;
   border-radius: 0 0 0 0;
   box-shadow: none !important;
@@ -251,7 +253,9 @@ html table td .ui-checkbox .ui-btn {
 }
 @media (max-width: 20em) {
   html body table thead th .ui-checkbox .ui-btn,
-  html body table tbody th .ui-checkbox .ui-btn {
+  html body table tbody th .ui-checkbox .ui-btn,
+  html body table thead th .ui-radio .ui-btn,
+  html body table tbody th .ui-radio .ui-btn {
     max-width: 1.25em;
     min-width: 1.25em;
     margin: 0 auto;
@@ -265,6 +269,8 @@ html table.ui-table tbody th {
 }
 html table tbody th .ui-checkbox .ui-btn,
 html table tbody th .ui-checkbox .ui-btn:hover,
+html table tbody th .ui-radio .ui-btn,
+html table tbody th .ui-radio .ui-btn:hover,
 html table tbody td .ui-controlgroup-controls .ui-btn,
 html table tbody td .ui-controlgroup-controls .ui-btn:hover {
   background-color: transparent;
@@ -273,11 +279,17 @@ html table tbody td .ui-controlgroup-controls .ui-btn:hover {
 html table th .ui-checkbox .ui-btn.ui-btn-icon-notext.ui-checkbox-on:after,
 html table th .ui-checkbox .ui-btn.ui-btn-icon-notext.ui-checkbox-off:after,
 html table td .ui-checkbox .ui-btn.ui-btn-icon-notext.ui-checkbox-on:after,
-html table td .ui-checkbox .ui-btn.ui-btn-icon-notext.ui-checkbox-off:after {
+html table td .ui-checkbox .ui-btn.ui-btn-icon-notext.ui-checkbox-off:after,
+html table th .ui-radio .ui-btn.ui-btn-icon-notext.ui-radio-on:after,
+html table th .ui-radio .ui-btn.ui-btn-icon-notext.ui-radio-off:after,
+html table td .ui-radio .ui-btn.ui-btn-icon-notext.ui-radio-on:after,
+html table td .ui-radio .ui-btn.ui-btn-icon-notext.ui-radio-off:after{
   margin-left: -.5em;
 }
 html table tr th .ui-checkbox input,
-html table tr td .ui-checkbox input {
+html table tr td .ui-checkbox input,
+html table tr th .ui-radio input,
+html table tr td .ui-radio input {
   position: absolute !important;
   top: -9999px;
   left: -9999px;
@@ -287,7 +299,9 @@ html table tr td .ui-checkbox input {
   clip: rect(1px 1px 1px 1px);
 }
 html table tr th .ui-checkbox,
-html table tr td .ui-checkbox {
+html table tr td .ui-checkbox,
+html table tr th .ui-radio,
+html table tr td .ui-radio {
   margin: 0;
   min-width: 1em;
   padding: 0;
@@ -296,6 +310,18 @@ html table tr td .ui-checkbox {
   box-shadow: none;
   -webkit-box-shadow: none;
 }
+/* TODO: remove all the margin-top positioners */
+html table tr th .ui-radio .ui-btn.ui-radio-on:after,
+html table tr th .ui-radio .ui-btn.ui-radio-off:after,
+html table tr td .ui-radio .ui-btn.ui-radio-on:after,
+html table tr td .ui-radio .ui-btn.ui-radio-off:after {
+  margin-top: -11px;
+}
+html table tr th .ui-radio label.ui-btn,
+html table tr td .ui-radio label.ui-btn {
+  border-radius: inherit;
+  -webkit-border-radius: inherit;
+}
 /* top radii - can use :first/last-child, because IE can't do corners anyway */
 /* inherit = 0!, not inheriting = radius */
 .ui-table-wrapper-top.ui-table-wrapper-inset,

data/release_fieldlist.json

@@ -203,5 +203,91 @@
         "i18n": "validation_dict.too_much_input"
       }
     }
+  },
+  "release_image_type": {
+    "type":"StringField",
+    "widget": {
+      "id": "release_image_type",
+      "title": "Type",
+      "title_i18n": "portal_type_dict.release_dict.field_list.image_type.title",
+      "description": "Type of Image (Icon/Image).",
+      "description_i18n": "portal_type_dict.release_dict.field_list.image_type.description",
+      "alternate_name": "release_image_type",
+      "default_value": null,
+      "css_class": null,
+      "hidden": null,
+      "display_width": null,
+      "maximum_input": null,
+      "extra": null
+    },
+    "properties": {
+      "enabled": true,
+      "editable": true,
+      "external_validator": null,
+      "required": true,
+      "preserve_whitespace": null,
+      "unicode": null,
+      "maximum_length": null,
+      "truncate": null
+    },
+    "message": {
+      "external_validator_failed": {
+        "message": "The input failed the external validator.",
+        "i18n": "validation_dict.external"
+      },
+      "required_not_found": {
+        "message": "Input required but not found.",
+        "i18n": "validation_dict.required"
+      },
+      "too_long": {
+        "message": "Too much input give.",
+        "i18n": "validation_dict.too_much_input"
+      }
+    }
+  },
+  "subscription_image_url": {
+    "type":"ImageField",
+    "widget": {
+      "id": "subscription_image_url",
+      "title": "Image",
+      "title_i18n": "portal_type_dict.subscription_dict.field_list.image_url.title",
+      "description": "The path to the icon/image for this software service.",
+      "description_i18n": "portal_type_dict.subscription_dict.field_list.image_url.description",
+      "alternate_name": "subscription_image_url",
+      "default_value": null,
+      "css_class": null,
+      "hidden": null,
+      "display_width": null,
+      "maximum_input": null,
+      "extra": null,
+      "image_display": null,
+      "image_format": null,
+      "image_quality": null,
+      "image_preconverted_only": null
+    },
+    "properties": {
+      "enabled": true,
+      "editable": true,
+      "external_validator": null,
+      "required": true,
+      "preserve_whitespace": null,
+      "unicode": null,
+      "maximum_length": null,
+      "truncate": null
+    },
+    "message": {
+      "external_validator_failed": {
+        "message": "The input failed the external validator.",
+        "i18n": "validation_dict.external"
+      },
+      "required_not_found": {
+        "message": "Input required but not found.",
+        "i18n": "validation_dict.required"
+      },
+      "too_long": {
+        "message": "Too much input give.",
+        "i18n": "validation_dict.too_much_input"
+      }
+    }
   }
 }
\ No newline at end of file

data/release_install.json

+{
+  "portal_type_source": "Software Release",
+  "portal_type_title": "release",
+  "portal_type_fields": "release_fieldlist",
+  "initial_query": {"include_docs": true, "limit":[0,16]},
+  "form": true,
+  "id": "release_overview",
+  "property_dict": {
+    "initial_query_url_identifier": "release_reference_id",
+    "dynamic_children": [0],
+    "wrap_gadget": 2,
+    "layout": {
+      "header": [
+        [
+          {"column": "release_title", "show": true, "priority": 1},
+          {"column": "release_version", "show": true, "priority": 1},
+          {"column": "release_description", "show": true, "priority": 5}
+        ]
+      ],
+      "body": [
+        {"column": "release_title", "show": true, "priority": 1},
+        {"column": "release_version", "show": true, "priority": 1},
+        {"column": "release_description", "show": true, "priority": 5}
+      ],
+      "footer": []
+    },
+    "feature_dict": {
+      "linkable": true,
+      "link_identifier": null,
+      "radio": true
+    }
+  },
+  "children": [{
+    "generate": "widget",
+    "type": "table",
+    "class_list": "table-stroke ui-responsive",
+    "property_dict": {
+      "mode": "columntoggle",
+      "toggle_popup": false,
+      "wrap": "both",
+      "top_grid": 1,
+      "bottom_grid": 1
+    },
+    "children": [{
+      "type": "a",
+      "direct": {"className":"action translate ui-btn-slapos-black", "href": "#"},
+      "attributes": {
+        "data-i18n": "page_dict.release_dict.install",
+        "data-action": "foo"
+      },
+      "logic": {"text":"Install selected software release."}
+    }]
+  }]
+}
+

data/release_overview.json

@@ -7,93 +7,39 @@
   "id": "release_overview",
   "property_dict": {
     "initial_query_url_identifier": "release_reference_id",
-    "dynamic_children": [5],
+    "dynamic_children": [0],
     "wrap_gadget": 2,
     "layout": {
       "header": [
         [
-          {"column": "release_title", "show": true, "priority": 1, "sort":true},
-          {"column": "release_version", "show": true, "priority": 1, "sort":true},
-          {"column": "release_description", "show": true, "priority": 5, "sort":true},
-          {"custom": true, "text": "Download", "text_i18n": "global_dict.export_dict.download", "show": true, "priority": 6, "sort": false}
+          {"column": "release_title", "show": true, "priority": 1},
+          {"column": "release_version", "show": true, "priority": 1},
+          {"column": "release_description", "show": true, "priority": 5}
         ]
       ],
       "body": [
-        {"column": "release_title", "show": true, "priority": 1, "sort":true},
-        {"column": "release_version", "show": true, "priority": 1, "sort":true},
-        {"column": "release_description", "show": true, "priority": 5, "sort":true},
-        {"custom": "true", "show": true, "priority": 6, "action_list": [{"text": "Download", "class_list": "responsive", "text_i18n": "global_dict.export_dict.download", "action": "pdf", "icon": "file-alt"}]}
+        {"column": "release_title", "show": true, "priority": 1},
+        {"column": "release_version", "show": true, "priority": 1},
+        {"column": "release_description", "show": true, "priority": 5}
       ],
       "footer": []
     },
     "feature_dict": {
-      "check": true,
-      "global_check": true,
-      "sortable": true,
-      "mergeable": true,
       "linkable": true,
-      "link_identifier": null,
-      "editable": null,
-      "action_menu": true
+      "radio": true,
+      "link_identifier": null
     }
   },
   "children": [{
-    "generate": "widget",
-    "type": "controlbar",
-    "class_list": "responsive",
-    "children": [
-      {"type": "input", "direct": {"id":"search_release_list", "className": "translate"}, "attributes": {"data-action":"search", "data-enhanced":"true", "data-i18n": "[placeholder]page_dict.release.search","placeholder":"Search available releases", "data-icon":"search", "data-action-btn":"true", "data-type":"search", "type":"search"}, "logic":{"clear":"true", "action":"search"}},
-      {"type": "div", "direct": {"className":"info"}, "attributes": {"data-info":"records"}},
-      {"type": "div", "direct": {"className":"info"}, "attributes": {"data-info":"selected"}},
-      {"type": "div", "direct": {"className":"info"}, "attributes": {"data-info":"filter"}},
-      {"type": "div", "direct": {"className":"info"}, "attributes": {"data-info":"sorted"}}
-      ]
-  },{
-    "generate": "widget",
-    "type": "controlbar",
-    "property_dict": {"slot": 1},
-    "children": [{"type": "a", "direct": {"className": "toggle_global_popup ui-btn ui-btn-icon-left ui-icon-sitemap ui-shadow ui-corner-all","href":"#global_popup"},"attributes": {"data-reference":"group_search","data-type":"invoices", "data-rel":"popup","data-transition":"pop","data-position-to":"window"},"logic": {"text":"Group"}}]
-  },{
-    "generate": "widget",
-    "type": "controlbar",
-    "property_dict": {"slot": 2},
-    "children": [{"type": "a",   "direct": {"className": "toggle_global_popup ui-btn ui-btn-icon-left ui-icon-filter ui-shadow ui-corner-all","href":"#global_popup"},"attributes": {"data-reference":"detail_search","data-type":"invoices", "data-rel":"popup","data-transition":"pop","data-position-to":"window"},"logic": {"text":"Detail Search"}}]
-  },{
-    "generate": "widget",
-    "type": "controlbar",
-    "property_dict": {"slot": 3},
-    "children": [{"type": "a","direct": {"className": "toggle_local_popup ui-btn ui-btn-icon-left ui-icon-cogs ui-shadow ui-corner-all","href":"#global_popup"},"attributes": {"data-reference":"configure_search","data-type":"invoices", "data-rel":"popup","data-transition":"pop","data-position-to":"window"},"logic": {"text":"Configuration"}}]
-  },{
-    "generate": "widget",
-    "type": "controlbar",
-    "property_dict": {"slot": 4},
-    "children": [
-      {
-        "generate":"widget",
-        "type": "controlgroup",
-        "property_dict": {"direction":"horizontal"},
-        "children":[
-          {"type": "a", "direct":{"className":"action", "href":""}, "attributes":{"data-i18n":"global_dict.pagination_dict.first", "data-action":"first", "data-icon":"step-backward", "data-iconpos":"notext"}, "logic": {"text":"First"}},
-          {"type": "a", "direct":{"className":"action", "href":""}, "attributes":{"data-i18n":"global_dict.pagination_dict.previous", "data-action":"prev", "data-icon":"backward", "data-iconpos":"notext"}, "logic": {"text":"Step Backward"}},
-          {"type":"select", "direct":{"id":"paginate_release_list", "className":"action"},"attributes": {"data-icon":"reorder", "data-action":"limit", "data-iconpos":"notext"},"logic": {"options":[{"value": "16", "text": "16", "text_i18n":"global_dict.pagination_dict.16"},{"value": "32", "text": "32", "text_i18n":"global_dict.pagination_dict.32"},{"value": "64", "text": "64", "text_i18n":"global_dict.pagination_dict.64"}, {"value": "128", "text": "128", "text_i18n":"global_dict.pagination_dict.128"}]}},
-          {"type": "a", "direct":{"className":"action", "href":""}, "attributes":{"data-i18n":"global_dict.pagination_dict.next", "data-action":"next", "data-icon":"forward", "data-iconpos":"notext"}, "logic": {"text":"Step Forward"}},
-          {"type": "a", "direct":{"className":"action", "href":""}, "attributes":{"data-i18n":"global_dict.pagination_dict.last", "data-action":"last", "data-icon":"step-forward", "data-iconpos":"notext"}, "logic": {"text": "Last"}}
-        ]
-      }
-    ]
-  }, {
     "generate": "widget",
     "type": "table",
     "class_list": "table-stroke ui-responsive",
     "property_dict": {
-      "filter": "true",
-      "input": "#search_release_list",
       "mode": "columntoggle",
       "toggle_popup": false,
       "wrap": "both",
-      "top_grid": 3,
-      "bottom_grid": 1,
-      "sorting": "true"
+      "top_grid": 1,
+      "bottom_grid": 1
     },
     "children": []
   }]

data/software.json

@@ -41,6 +41,14 @@
             "id": "subscription_overview",
             "href": "subscription_overview"
           }
+        ],
+        "install": [
+          {
+            "generate": "gadget",
+            "type": "listbox",
+            "id": "release_install",
+            "href": "release_install"
+          }
         ]
       }
     }, {

data/subscription_overview.json

@@ -7,6 +7,7 @@
   "id": "subscription_overview",
   "property_dict": {
     "link": true,
+    "radio": true,
     "link_identifier": "id",
     "dynamic_children": [1]
   },

js/erp5_loader.js

@@ -3134,53 +3134,86 @@
   };
 
   /*
-   * Generates a table header based on configuration (API in factory.table)
+   * Generates a table row based on configuration (API in factory.table)
    * @method tableRow
-   * @param {object} spec Configuration for header to generate
+   * @param {object} spec Configuration for row to generate
    * @param {boolean} body Flag indicating header/footer/body row
    * @return {object} HTML fragment
    */
+  // TODO: merge check/radio on table and listview!
   factory.tableRow = function (spec, body) {
     var i, j, k, field, link, config, property, title, action, cell, set, text,
-      column_list, temp, container, row, group, button;
+      column_list, temp, container, row, group, button, input_type, checkered,
+      global_check, skip, input_dict;
+
+    // checkbox row
+    if (spec.config.check) {
+      input_type = "checkbox";
+      // type of global
+      if (spec.config.global_check) {
+        global_check = "check_all";
+      } else {
+        global_check = "check_all_visible";
+      }
+    }
 
+    // radio row
+    if(spec.config.radio) {
+      input_type = "radio";
+      if (body === null) {
+        skip = true;
+      }
+    }
+
+    // container depending on row destination header/body/footer
     if (body) {
       container = document.createDocumentFragment();
+      action = input_type;
     } else {
+      action = global_check;
       container = factory.element("thead");
     }
 
+    // loop rows
     for (i = 0; i < spec.rows.length; i += 1) {
       temp = {};
       row = factory.element("tr");
       column_list = spec.rows[i];
 
-      // add global tickbox - global/visible upfront
-      if (spec.config.check) {
-        action = body ? "check" :
-            (spec.config.global_check ? "check_all" : "check_all_visible");
-        cell = factory.element("th", {}, {}, {});
+      // add checkbox/radio
       // TODO: column_list[0] is bad, don't retrieve row identifier from cell
-        config = {
+      if (input_type) {
+        cell = factory.element("th", {}, {}, {});
+        if (skip === undefined) {
+          input_dict = {
+            "type": input_type,
+            "data-i18n": "[value]",
+            "data-enhanced": true,
+            "value": "Select item",
+            "data-iconpos": "notext"
+          };
+          if (action) {
+            input_dict["data-action"] = action;
+            input_dict["data-reference"] = spec.config.reference;
+          }
+          cell.appendChild(
+            factory.formElement(
+              {
                 "type": "input",
                 "direct": {
                   "id": body ? ("select_" + column_list[0].identifier) :
                     spec.config.portal_type + "_check_all",
-            "className": "action"
+                  "name": body ? "select_" + spec.identifier : null,
+                  "className": action ? "action" : ""
                 },
-          "attributes": {
-            "type": "checkbox",
-            "value": "Select All/Unselect All",
-            "data-iconpos": "notext",
-            "data-reference": spec.config.reference,
-            "data-action": action,
-            "data-i18n": "[value]global_dict.pagination_dict.select_all"
+                "attributes": input_dict,
+                "logic": {}
               },
-          "logic": {
-            "name": body ? "select_" + spec.identifier : null
+              false,
+              true
+            )
+          );
         }
-        };
-        cell.appendChild(factory.formElement(config, false, true));
         row.appendChild(cell);
       }
 
@@ -3278,7 +3311,7 @@
             // make the cell
             cell = factory.element(
               body ? "td" : "th",
-              {"className": link ? "" : "translate"},
+              {"className": link ? "" : "translate plain"},
               config,
               text
             );
@@ -3483,7 +3516,7 @@
         container_class_list = "ui-" + config.attributes.type;
         label_inside = true;
         label_class_list = "ui-btn ui-corner-all ui-btn-inherit" +
-          " ui-btn-icon-left ui-icon-radio-" + active + " ui-radio-" +
+          " ui-icon-radio-" + active + " ui-radio-" +
           active + index + disabled + readonly;
         config.attributes["data-cacheval"] = true;
         break;
@@ -5125,6 +5158,8 @@
 
       // get an item?
       if (pass.mode !== "new" || pass.config.initial_query !== undefined) {
+        console.log("FETCH ITEMS")
+        console.log(pass.state.query)
         return app.fetchData({
           "storage": "items",
           "query": pass.state.query,
@@ -5169,8 +5204,13 @@
 
         // on deeplinks, we have additional query parameters,
         // but we should not do if pass.mode is set!
+        console.log("SETTING VALUE")
+        console.log(pass)
         if (pass.layout_level > 0 && pass.mode === undefined) {
           pass.value = pass.fragment_list[pass.layout_level];
+          console.log(pass.value)
+        } else {
+          console.log("NO VALUE")
         }
 
         // generate new query object
@@ -5445,7 +5485,7 @@
           // this run needs query and dynamic data
           pass = {
             "purge": purge || null,
-            "mode": spec.mode || null,
+            "mode": spec.mode || undefined,
             "create": create,
             "layout_level": spec.layout_level || null,
             "fragment_list": spec.fragment_list,

lang/en-EN/dict.json

@@ -23,6 +23,7 @@
       "find_out_more": "To find out more, please refer to:",
       "pricing": "To maintain sufficient resources, a minimal fee of 1 EUR will be charged if you use SlapOS services for more than 24 hours. By clicking on one of the signup buttons, you agree that you are subscribing to a payable service. All services you request will be invoiced to you at the end of the month.",
       "general": "General",
+      "select": "Select",
       "search": "Search",
       "menu": "Menu",
       "home": "Home",
@@ -115,6 +116,7 @@
     },
     "release": {
       "title": "Release",
+      "install": "Install selected software release.",
       "search": "Search available releases"
     },
     "documentation": {
@@ -482,6 +484,14 @@
           "reference_id": {
             "title": "Reference ID",
             "description": "The id of the referenced portal_type this release is associated to."
+          },
+          "release_image_type": {
+            "title": "Image Type",
+            "description": "Type of Image (Icon/Image)"
+          },
+          "release_image_url": {
+            "title": "Image",
+            "description": "The path to the icon/image for this software service."
           }
       }
     }