Add inline functionality to apply value filters in record lists

client/web/compose/src/components/PageBlocks/RecordListBase.vue

@@ -474,11 +474,11 @@
                     :extra-options="options"
                   />
                   <div
-                    v-if="options.inlineRecordEditEnabled && field.canEdit && !showingDeletedRecords"
                     class="inline-actions"
                   >
                     <b-button
-                      v-b-tooltip.noninteractive.hover="{ title: $t('recordList.inlineEdit.button.title', { label: field.label }), container: '#body' }"
+                      v-if="options.inlineRecordEditEnabled && field.canEdit && !showingDeletedRecords"
+                      v-b-tooltip.noninteractive.hover="{ title: $t('recordList.inlineEdit.button.title'), container: '#body' }"
                       variant="outline-extra-light"
                       size="sm"
                       class="text-secondary border-0 ml-1"
@@ -488,6 +488,18 @@
                         :icon="['fas', 'pen']"
                       />
                     </b-button>
+                    <b-button
+                      v-if="options.inlineValueFiltering"
+                      v-b-tooltip.noninteractive.hover="{ title: $t('recordList.filterByValue'), container: '#body' }"
+                      variant="outline-extra-light"
+                      size="sm"
+                      class="text-secondary border-0 ml-1"
+                      @click.stop="filterByValue(item.r, field)"
+                    >
+                      <font-awesome-icon
+                        :icon="['fas', 'filter']"
+                      />
+                    </b-button>
                   </div>
                 </div>
 
@@ -2066,6 +2078,30 @@ export default {
       this.inlineEdit.query = `recordID = ${record.recordID}`
     },
 
+    filterByValue (record, { moduleField: field }) {
+      const value = field.isSystem ? record[field.name] : record.values[field.name]
+
+      if (!this.recordListFilter.length) {
+        this.recordListFilter = [
+          {
+            groupCondition: undefined,
+            filter: [
+              this.createDefaultFilter('Where', field, value, '='),
+            ],
+          },
+        ]
+      } else {
+        const { filter } = this.recordListFilter[0]
+        if (!filter.length || (filter.length && !filter[0].name)) {
+          this.recordListFilter[0].filter = []
+          this.recordListFilter[0].filter.push(this.createDefaultFilter('Where', field, value))
+        } else {
+          this.recordListFilter[0].filter.push(this.createDefaultFilter('OR', field, value))
+        }
+      }
+      this.pullRecords(true)
+    },
+
     onInlineEditClose () {
       this.inlineEdit.fields = []
       this.inlineEdit.record = {}
@@ -2286,6 +2322,7 @@ tr:hover td.actions {
   margin-top: -2px;
   opacity: 0;
   transition: opacity 0.25s;
+  display: flex;
 }
 
 td:hover .inline-actions {

client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue

@@ -714,6 +714,22 @@
               </b-form-group>
             </b-col>
 
+            <b-col
+              cols="12"
+              lg="6"
+            >
+              <b-form-group
+                :label="$t('recordList.inlineValueFilter.enabled')"
+                label-class="text-primary"
+              >
+                <c-input-checkbox
+                  v-model="options.inlineValueFiltering"
+                  switch
+                  :labels="checkboxLabel"
+                />
+              </b-form-group>
+            </b-col>
+
             <b-col
               cols="12"
               lg="6"

lib/js/src/compose/types/page-block/record-list.ts

@@ -66,6 +66,7 @@ export interface Options {
 
   bulkRecordEditEnabled: boolean;
   inlineRecordEditEnabled: boolean;
+  inlineValueFiltering: boolean;
   filterPresets: FilterPreset[];
   showRecordPerPageOption: boolean;
   openRecordInEditMode: boolean;
@@ -125,6 +126,7 @@ const defaults: Readonly<Options> = Object.freeze({
 
   bulkRecordEditEnabled: true,
   inlineRecordEditEnabled: false,
+  inlineValueFiltering: false,
   filterPresets: [],
   showRecordPerPageOption: false,
   openRecordInEditMode: false,
@@ -206,6 +208,7 @@ export class PageBlockRecordList extends PageBlock {
       'showRefresh',
       'bulkRecordEditEnabled',
       'inlineRecordEditEnabled',
+      'inlineValueFiltering',
       'showRecordPerPageOption',
       'openRecordInEditMode',
     )

locale/en/corteza-webapp-compose/block.yaml

@@ -325,13 +325,16 @@ recordList:
   customFilter: Custom filter
   prefilter:
     toggleInputType: Toggle input type
+  filterByValue: Filter by value
   filterPresets:
     filterName: Filter name
     saveFilterAsPreset: Save filter as preset
+  inlineValueFilter:
+    enabled: Enable inline value filtering
   inlineEdit:
     enabled: Inline value editing enabled
     button:
-      title: Edit {{label}}
+      title: Edit value
     modal:
       title: Update record values
   bulkRecord: