ui: add group member count

packages/ui-default/components/datepicker/datepicker.page.tsx

@@ -41,7 +41,7 @@ function initTimePicker(input: HTMLInputElement) {
       }).on('mousedown', (e) => {
         e.preventDefault();
         $input.val(time).trigger('change');
-        closeDropdown();
+        closeDropdown(); // eslint-disable-line no-use-before-define
       }).on('mouseenter', function () {
         $(this).css('background', 'var(--highlight-color, #e8f0fe)');
       }).on('mouseleave', function () {

packages/ui-default/package.json

@@ -51,7 +51,7 @@
     "clean-webpack-plugin": "^4.0.0",
     "clipboard": "^2.0.11",
     "copy-webpack-plugin": "^14.0.0",
-    "cordis": "4.0.0-rc.2",
+    "cordis": "4.0.0-rc.3",
     "core-js": "^3.49.0",
     "core-js-compat": "^3.49.0",
     "css-loader": "^7.1.4",

packages/ui-default/pages/domain_group.page.ts

@@ -51,13 +51,16 @@ const page = new NamedPage('domain_group', () => {
     const gid = ele.getAttribute('data-gid');
     targets[gid] = input;
     let loaded = false;
+    const save = _.debounce(() => update(gid, input.value()), 500);
     input.onChange(() => {
       if (input.value().length && !loaded) {
         loaded = true;
+        $(ele).closest('tr').find('.group-member-count').text(`${input.value().length} ${i18n('members')}`);
         return;
       }
       if (!loaded) return;
-      update(gid, input.value());
+      $(ele).closest('tr').find('.group-member-count').text(`${input.value().length} ${i18n('members')}`);
+      save();
     });
   });
 

packages/ui-default/templates/domain_group.html

@@ -36,7 +36,7 @@
               <input type="checkbox" data-checkbox-group="group" data-checkbox-range>
             </label>
           </td>
-          <td class="col--group">{{ gdoc.name }}</td>
+          <td class="col--group">{{ gdoc.name }}<br><small class="supplementary group-member-count">{{ gdoc.uids.length }} {{ _('members') }}</small></td>
           <td class="col--user"><input type="text" value="{{ gdoc.uids.join(',') }}" data-gid="{{ gdoc.name }}"></input></td>
         </tr>
         {%- endfor -%}