Add record selector of a record selector capabilities

src/components/ModuleFields/Configurator/Record.vue

@@ -21,7 +21,34 @@
       />
     </b-form-group>
 
+    <div
+      v-if="labelField && labelField.kind === 'Record'"
+    >
+      <b-form-group
+        label="Record field label"
+      >
+        <b-form-select
+          v-model="f.options.recordLabelField"
+          :options="labelFieldOptions"
+          :disabled="!selectedModule || !labelFieldModule"
+        />
+      </b-form-group>
+
+      <b-form-group
+        :label="$t('kind.record.queryFieldsLabel')"
+      >
+        <b-form-select
+          v-model="f.options.queryFields"
+          class="form-control"
+          :options="labelFieldQueryOptions"
+          multiple
+          :disabled="!selectedModule || !labelFieldModule"
+        />
+      </b-form-group>
+    </div>
+
     <b-form-group
+      v-else
       :label="$t('kind.record.queryFieldsLabel')"
     >
       <b-form-select
@@ -139,6 +166,45 @@ export default {
     queryFieldOptions () {
       return this.fieldOptions.slice(1)
     },
+
+    labelField () {
+      if (this.field.options.labelField) {
+        return this.selectedModule.fields.find(({ name }) => name === this.field.options.labelField)
+      }
+
+      return undefined
+    },
+
+    labelFieldModule () {
+      if (this.labelField) {
+        return this.$store.getters['module/getByID'](this.labelField.options.moduleID)
+      }
+
+      return undefined
+    },
+
+    labelFieldOptions () {
+      let fields = []
+
+      if (this.labelField && this.labelFieldModule) {
+        fields = this.labelFieldModule.fields.map(({ label, name }) => { return { value: name, text: label || name } })
+
+        return [
+          {
+            value: undefined,
+            text: this.$t('kind.record.recordFieldPlaceholder'),
+            disabled: true,
+          },
+          ...fields.sort((a, b) => a.text.localeCompare(b.text)),
+        ]
+      }
+
+      return fields
+    },
+
+    labelFieldQueryOptions () {
+      return this.labelFieldOptions.filter(({ name }) => name !== this.field.options.recordLabelField)
+    },
   },
 
   watch: {

src/components/ModuleFields/Editor/Record.vue

@@ -397,13 +397,35 @@ export default {
         q.sort = ''
       }
 
-      this.$ComposeAPI.recordList({ ...q, query })
-        .then(({ filter, set }) => {
+      this.$ComposeAPI.recordList({ ...q, query: this.field.options.recordLabelField ? '' : query })
+        .then(async ({ filter, set }) => {
           this.filter = { ...this.filter, ...filter }
           this.filter.nextPage = filter.nextPage
           this.filter.prevPage = filter.prevPage
-          this.records = set.map(r => new compose.Record(this.module, r))
-          return { filter, set }
+          let tempRecords = set.map(r => new compose.Record(this.module, r))
+
+          if (this.field.options.recordLabelField) {
+            const namespaceID = this.namespace.namespaceID
+            const { moduleID } = (this.module.fields.find(({ name }) => name === this.field.options.labelField) || {}).options
+            query = (query ? `${query} AND (` : '') + tempRecords.map(({ values = {} }) => `recordID = ${values[this.field.options.labelField]}`).join(' OR ') + (query ? ')' : '')
+
+            // Fetch required records
+            await this.$ComposeAPI.recordList({ namespaceID, moduleID, query })
+              .then(({ set }) => {
+                const mappedIDs = {}
+                set.forEach(({ recordID, values = [] }) => {
+                  mappedIDs[recordID] = (values.find(({ name }) => name === this.field.options.recordLabelField) || {}).value
+                })
+
+                tempRecords = tempRecords.filter(({ values = [] }) => !!mappedIDs[values[this.field.options.labelField]])
+                  .map(r => {
+                    r.values[this.field.options.labelField] = mappedIDs[r.values[this.field.options.labelField]]
+                    return r
+                  })
+              })
+          }
+
+          this.records = tempRecords
         })
         .finally(() => {
           this.processing = false
@@ -420,8 +442,19 @@ export default {
 
       if (moduleID !== NoID && namespaceID !== NoID) {
         if (!this.fetchedRecords.find(r => r.recordID === recordID)) {
-          this.$ComposeAPI.recordRead({ namespaceID, moduleID, recordID }).then(record => {
-            this.fetchedRecords.push(new compose.Record(this.module, record))
+          this.$ComposeAPI.recordRead({ namespaceID, moduleID, recordID }).then(async record => {
+            record = new compose.Record(this.module, record)
+
+            if (this.field.options.recordLabelField) {
+              // Get actual field
+              const relatedField = this.module.fields.find(({ name }) => name === this.field.options.labelField)
+
+              await this.$ComposeAPI.recordRead({ namespaceID, moduleID: relatedField.options.moduleID, recordID: record.values[this.field.options.labelField] }).then(labelRecord => {
+                record.values[this.field.options.labelField] = (labelRecord.values.find(({ name }) => name === this.field.options.recordLabelField) || {}).value
+              })
+            }
+
+            this.fetchedRecords.push(record)
           }).catch(e => {
             this.fetchedRecords.push(new compose.Record(this.module, { recordID }))
           })

src/components/ModuleFields/Viewer/Record.vue

@@ -131,17 +131,26 @@ export default {
         const { moduleID = NoID } = this.field.options
 
         if (moduleID !== NoID && namespaceID !== NoID) {
-          this.findModuleByID({ namespace: this.namespace, moduleID }).then(m => {
-            for (const v of value) {
-              if (v) {
-                let record = { recordID: v }
-                this.$ComposeAPI.recordRead({ namespaceID, moduleID, recordID: v }).then(r => {
-                  if (r) {
-                    record = r
+          this.findModuleByID({ namespace: this.namespace, moduleID }).then(module => {
+            for (const recordID of value) {
+              if (recordID) {
+                this.$ComposeAPI.recordRead({ namespaceID, moduleID, recordID }).then(async record => {
+                  debugger
+
+                  record = new compose.Record(module, record)
+
+                  if (this.field.options.recordLabelField) {
+                    // Get actual field
+                    const relatedField = module.fields.find(({ name }) => name === this.field.options.labelField)
+
+                    await this.$ComposeAPI.recordRead({ namespaceID, moduleID: relatedField.options.moduleID, recordID: record.values[this.field.options.labelField] }).then(labelRecord => {
+                      record.values[this.field.options.labelField] = (labelRecord.values.find(({ name }) => name === this.field.options.recordLabelField) || {}).value
+                    })
                   }
-                  this.relRecords.push(new compose.Record(m, record))
+
+                  this.relRecords.push(record)
                 }).catch(e => {
-                  this.relRecords.push(new compose.Record(m, record))
+                  this.relRecords.push(new compose.Record(module, { recordID }))
                 })
               }
             }