Group item form: Add missing COUNT aggregation function (#2632)

Closes #956.

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>

bundles/org.openhab.ui/web/src/assets/item-types.js

@@ -3,10 +3,12 @@ const SharedTypes = ['Call', 'Color', 'Contact', 'DateTime', 'Dimmer', 'Image',
 export const ItemTypes = SharedTypes.concat(['Group'])
 export const GroupTypes = ['None'].concat(SharedTypes)
 
-export const ArithmeticFunctions = [{
+export const CommonFunctions = [{
   name: '',
   value: 'None'
-}, {
+}]
+
+export const ArithmeticFunctions = [{
   name: 'AVG',
   value: 'AVG'
 }, {
@@ -18,12 +20,12 @@ export const ArithmeticFunctions = [{
 }, {
   name: 'SUM',
   value: 'SUM'
+}, {
+  name: 'COUNT',
+  value: 'COUNT'
 }]
 
 export const LogicalOnOffFunctions = [{
-  name: '',
-  value: 'None'
-}, {
   name: 'AND_ON_OFF',
   value: 'All ON then ON else OFF'
 }, {
@@ -50,9 +52,6 @@ export const LogicalOnOffFunctions = [{
 }]
 
 export const LogicalOpenClosedFunctions = [{
-  name: '',
-  value: 'None'
-}, {
   name: 'AND_OPEN_CLOSED',
   value: 'All OPEN then OPEN else CLOSED'
 }, {
@@ -79,9 +78,6 @@ export const LogicalOpenClosedFunctions = [{
 }]
 
 export const LogicalPlayPauseFunctions = [{
-  name: '',
-  value: 'None'
-}, {
   name: 'AND_PLAY_PAUSE',
   value: 'All PLAY then PLAY else PAUSE'
 }, {
@@ -96,9 +92,6 @@ export const LogicalPlayPauseFunctions = [{
 }]
 
 export const DateTimeFunctions = [{
-  name: '',
-  value: 'None'
-}, {
   name: 'EARLIEST',
   value: 'EARLIEST'
 }, {

bundles/org.openhab.ui/web/src/components/item/group-form.vue

@@ -18,19 +18,15 @@
       </select>
     </f7-list-item>
     <!-- (Internal) Unit & State Description -->
-    <f7-list-input v-show="groupType && groupDimension && dimensionsReady"
+    <f7-list-input v-show="groupType && groupDimension && dimensionsReady" :disabled="!editable"
                    ref="groupUnit"
-                   label="Unit"
+                   label="Unit" type="text"
-                   type="text"
                    :info="(createMode) ? 'Type a valid unit for the dimension or select from the proposed units. Used internally, for persistence and external systems. Is independent from state visualization in the UI, which is defined through the state description pattern.' : ''"
-                   :value="groupDimension ? groupUnit : ''"
+                   :value="groupDimension ? groupUnit : ''" @change="groupUnit = $event.target.value" :clear-button="editable" />
-                   @change="groupUnit = $event.target.value" :clear-button="editable" />
+    <f7-list-input v-show="groupType && groupDimension" :disabled="!editable"
-    <f7-list-input v-show="groupType && groupDimension"
+                   label="State Description Pattern" type="text"
-                   label="State Description Pattern"
-                   type="text"
                    :info="(createMode) ? 'Pattern or transformation applied to the state for display purposes. Only saved if you change the pre-filled default value.' : ''"
-                   :value="stateDescriptionPattern"
+                   :value="stateDescriptionPattern" @input="stateDescriptionPattern = $event.target.value" :clear-button:="editable" />
-                   @input="stateDescriptionPattern = $event.target.value" :clear-button:="editable" />
     <!-- Aggregation Functions -->
     <f7-list-item v-if="aggregationFunctions" :disabled="!editable" title="Aggregation Function" class="aligned-smart-select" smart-select :smart-select-params="{openIn: 'popup', closeOnSelect: true}">
       <select name="select-function" @change="groupFunctionKey = $event.target.value">
@@ -39,6 +35,11 @@
         </option>
       </select>
     </f7-list-item>
+    <!-- COUNT aggregation function regular expression input -->
+    <f7-list-input v-if="aggregationFunctions && groupFunctionKey === 'COUNT'" :disabled="!editable"
+                   label="COUNT Expression" type="text"
+                   info="Specify the regular expression used to to match the states of the members."
+                   :value="groupFunctionParam" @input="groupFunctionParam = $event.target.value" :clear-button="editable" />
   </div>
 </template>
 
@@ -129,7 +130,7 @@ export default {
     },
     groupFunctionKey: {
       get () {
-        return this.item.functionKey
+        return this.item.functionKey.startsWith('COUNT') ? 'COUNT' : this.item.functionKey
       },
       set (newFunctionKey) {
         if (!newFunctionKey) {
@@ -148,7 +149,18 @@ export default {
         this.$set(this.item, 'function', func)
       }
     },
+    groupFunctionParam: {
+      get () {
+        return this.item.function?.params?.length ? this.item.function.params[0] : null
+      },
+      set (newFunctionParam) {
+        this.$set(this.item.function, 'params', [newFunctionParam])
+      }
+    },
     aggregationFunctions () {
+      if (this.groupType === 'None') return null
+
+      const specificAggregationFunctions = (groupType) => {
         switch (this.groupType) {
           case 'Dimmer':
           case 'Rollershutter':
@@ -163,7 +175,9 @@ export default {
           case 'Switch':
             return types.LogicalOnOffFunctions
         }
-      return null
+        return []
+      }
+      return [...types.CommonFunctions, ...specificAggregationFunctions(this.groupType)]
     }
   },
   beforeMount () {