Update some block configurators UX with columns and c-input-selects

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

@@ -6,9 +6,11 @@
     >
       <c-input-select
         v-model="options.moduleID"
-        :options="moduleOptions"
+        :options="filterModulesByRecord"
         label="name"
-        :reduce="module => module.moduleID"
+        :reduce="m => m.moduleID"
+        :placeholder="$t('comment.module.placeholder')"
+        default-value="0"
         required
       />
     </b-form-group>
@@ -60,91 +62,96 @@
         </i18next>
       </b-form-group>
 
-      <b-form-group
+      <b-row>
-        :label="$t('comment.titleField.label')"
+        <b-col
-        label-class="text-primary"
+          cols="12"
-      >
+          lg="6"
-        <b-form-select v-model="options.titleField">
+        >
-          <option value="">
+          <b-form-group
-            {{ $t('general.label.none') }}
+            :label="$t('comment.titleField.label')"
-          </option>
+            label-class="text-primary"
-
-          <option
-            v-for="(field, index) in selectedModuleFieldsByType('String')"
-            :key="index"
-            :value="field.name"
           >
-            {{ field.label || field.name }} ({{ field.kind }})
+            <c-input-select
-          </option>
+              v-model="options.titleField"
-        </b-form-select>
+              :options="selectedModuleFieldsByType('String')"
-        <b-form-text>{{ $t('comment.titleField.footnote') }}</b-form-text>
+              :get-option-label="f => `${f.label || f.name} (${f.kind})`"
-      </b-form-group>
+              :reduce="f => f.name"
+              :placeholder="$t('general.label.none')"
+            />
+            <b-form-text>
+              {{ $t('comment.titleField.footnote') }}
+            </b-form-text>
+          </b-form-group>
+        </b-col>
 
-      <b-form-group
+        <b-col
-        :label="$t('comment.contentField.label')"
+          cols="12"
-        label-class="text-primary"
+          lg="6"
-      >
+        >
-        <b-form-select v-model="options.contentField">
+          <b-form-group
-          <option value="">
+            :label="$t('comment.contentField.label')"
-            {{ $t('general.label.none') }}
+            label-class="text-primary"
-          </option>
-          <option
-            v-for="(field, index) in selectedModuleFieldsByType('String')"
-            :key="index"
-            :value="field.name"
           >
-            {{ field.label || field.name }} ({{ field.kind }})
+            <c-input-select
-          </option>
+              v-model="options.contentField"
-        </b-form-select>
+              :options="selectedModuleFieldsByType('String')"
-        <b-form-text class="text-secondary small">
+              :get-option-label="f => `${f.label || f.name} (${f.kind})`"
-          {{ $t('comment.contentField.footnote') }}
+              :reduce="f => f.name"
-        </b-form-text>
+              :placeholder="$t('general.label.none')"
-      </b-form-group>
+            />
+            <b-form-text>
+              {{ $t('comment.contentField.footnote') }}
+            </b-form-text>
+          </b-form-group>
+        </b-col>
 
-      <b-form-group
+        <b-col
-        :label="$t('comment.referenceField.label')"
+          cols="12"
-        label-class="text-primary"
+          lg="6"
-      >
+        >
-        <b-form-select v-model="options.referenceField">
+          <b-form-group
-          <option value="">
+            :label="$t('comment.referenceField.label')"
-            {{ $t('general.label.none') }}
+            label-class="text-primary"
-          </option>
-          <option
-            v-for="(field, index) in selectedModuleFieldsByType('Record')"
-            :key="index"
-            :value="field.name"
           >
-            {{ field.label || field.name }} ({{ field.kind }})
+            <c-input-select
-          </option>
+              v-model="options.referenceField"
-        </b-form-select>
+              :options="selectedModuleFieldsByType('Record')"
-        <b-form-text class="text-secondary small">
+              :get-option-label="f => `${f.label || f.name} (${f.kind})`"
-          {{ $t('comment.referenceField.footnote') }}
+              :reduce="f => f.name"
-        </b-form-text>
+              :placeholder="$t('general.label.none')"
-      </b-form-group>
+            />
+            <b-form-text>
+              {{ $t('comment.referenceField.footnote') }}
+            </b-form-text>
+          </b-form-group>
+        </b-col>
 
-      <b-form-group
+        <b-col
-        :label="$t('comment.sortDirection.label')"
+          cols="12"
-        label-class="text-primary"
+          lg="6"
-      >
+        >
-        <b-form-select v-model="options.sortDirection">
+          <b-form-group
-          <option
+            :label="$t('comment.sortDirection.label')"
-            v-for="(item, index) in sortDirections"
+            label-class="text-primary"
-            :key="index"
-            :value="item.value"
           >
-            {{ item.label }}
+            <c-input-select
-          </option>
+              v-model="options.sortDirection"
-        </b-form-select>
+              :options="sortDirections"
-        <b-form-text class="text-secondary small">
+              label="label"
-          {{ $t('comment.sortDirection.footnote') }}
+              :clearable="false"
-        </b-form-text>
+              :reduce="o => o.value"
-      </b-form-group>
+            />
+            <b-form-text>
+              {{ $t('comment.sortDirection.footnote') }}
+            </b-form-text>
+          </b-form-group>
+        </b-col>
+      </b-row>
     </div>
   </b-tab>
 </template>
 <script>
 import { mapGetters } from 'vuex'
-import { NoID } from '@cortezaproject/corteza-js'
 import base from './base'
 
 export default {
@@ -157,8 +164,15 @@ export default {
   extends: base,
   data () {
     return {
-      referenceList: [{ label: 'Record ID (recordID)', value: 'recordID' }, { label: 'Page ID (pageID)', value: 'pageID' }],
+      referenceList: [
-      sortDirections: [{ label: this.$t('comment.sortDirection.asc'), value: 'asc' }, { label: this.$t('comment.sortDirection.desc'), value: 'desc' }],
+        { label: 'Record ID (recordID)', value: 'recordID' },
+        { label: 'Page ID (pageID)', value: 'pageID' },
+      ],
+
+      sortDirections: [
+        { label: this.$t('comment.sortDirection.asc'), value: 'asc' },
+        { label: this.$t('comment.sortDirection.desc'), value: 'desc' },
+      ],
     }
   },
 
@@ -167,13 +181,6 @@ export default {
       modules: 'module/set',
     }),
 
-    moduleOptions () {
-      return [
-        { moduleID: NoID, name: this.$t('general.label.none') },
-        ...this.filterModulesByRecord,
-      ]
-    },
-
     filterModulesByRecord () {
       if (this.record) {
         return this.modules.filter(module => {

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

@@ -15,7 +15,7 @@
         <b-row>
           <b-col
             cols="12"
-            lg="6"
+            :lg="isInlineEditorAllowed ? 6 : 12"
           >
             <b-form-group
               :label="$t('general.module')"
@@ -24,16 +24,18 @@
             >
               <c-input-select
                 v-model="options.moduleID"
-                :options="moduleOptions"
+                :options="modules"
                 label="name"
                 :reduce="o => o.moduleID"
+                :placeholder="$t('recordList.modulePlaceholder')"
+                default-value="0"
                 required
               />
             </b-form-group>
           </b-col>
 
           <b-col
-            v-if="recordListModule && (onRecordPage || options.editable)"
+            v-if="isInlineEditorAllowed"
             cols="12"
             lg="6"
           >
@@ -84,7 +86,7 @@
                 :module="recordListModule"
                 :fields.sync="options.fields"
                 class="mb-3"
-                style="height: 40vh;"
+                style="height: 50vh;"
               />
             </b-col>
 
@@ -150,7 +152,7 @@
               :fields.sync="options.editFields"
               :field-subset="options.fields"
               disable-system-fields
-              style="height: 40vh;"
+              style="height: 50vh;"
             />
           </b-form-group>
 
@@ -471,6 +473,30 @@
               </b-form-group>
             </b-col>
 
+            <b-col
+              cols="12"
+              lg="6"
+            >
+              <b-form-group
+                label-class="d-flex align-items-center text-primary p-0"
+              >
+                <template #label>
+                  {{ $t('recordList.record.fullPageNavigation') }}
+                  <c-hint
+                    :tooltip="$t('recordList.tooltip.performance.impact')"
+                    icon-class="text-warning"
+                  />
+                </template>
+
+                <c-input-checkbox
+                  v-model="options.fullPageNavigation"
+                  switch
+                  :labels="checkboxLabel"
+                  data-test-id="hide-page-navigation"
+                />
+              </b-form-group>
+            </b-col>
+
             <b-col
               cols="12"
               lg="6"
@@ -478,7 +504,7 @@
               <b-form-group
                 horizontal
                 breakpoint="md"
-                label-class="d-flex align-items-center text-primary p-0"
+                label-class="d-flex align-items-center text-primary"
               >
                 <template #label>
                   {{ $t('recordList.record.perPage') }}
@@ -496,25 +522,6 @@
                 />
               </b-form-group>
             </b-col>
-          </b-row>
-
-          <b-row>
-            <b-col
-              cols="12"
-              lg="6"
-            >
-              <b-form-group
-                :label="$t('recordList.record.showTotalCount')"
-                label-class="text-primary"
-              >
-                <c-input-checkbox
-                  v-model="options.showTotalCount"
-                  data-test-id="show-total-record-count"
-                  switch
-                  :labels="checkboxLabel"
-                />
-              </b-form-group>
-            </b-col>
 
             <b-col
               cols="12"
@@ -531,29 +538,20 @@
                 />
               </b-form-group>
             </b-col>
-          </b-row>
 
-          <b-row>
             <b-col
               cols="12"
               lg="6"
             >
               <b-form-group
-                label-class="d-flex align-items-center text-primary p-0"
+                :label="$t('recordList.record.showTotalCount')"
+                label-class="text-primary"
               >
-                <template #label>
-                  {{ $t('recordList.record.fullPageNavigation') }}
-                  <c-hint
-                    :tooltip="$t('recordList.tooltip.performance.impact')"
-                    icon-class="text-warning"
-                  />
-                </template>
-
                 <c-input-checkbox
-                  v-model="options.fullPageNavigation"
+                  v-model="options.showTotalCount"
+                  data-test-id="show-total-record-count"
                   switch
                   :labels="checkboxLabel"
-                  data-test-id="hide-page-navigation"
                 />
               </b-form-group>
             </b-col>
@@ -841,13 +839,6 @@ export default {
       ]
     },
 
-    moduleOptions () {
-      return [
-        { moduleID: NoID, name: this.$t('general.label.none') },
-        ...this.modules,
-      ]
-    },
-
     recordListModule () {
       if (this.options.moduleID !== NoID) {
         return this.getModuleByID(this.options.moduleID)
@@ -903,22 +894,8 @@ export default {
       return []
     },
 
-    /*
+    isInlineEditorAllowed () {
-      Inline record editor is disabled if:
+      return this.recordListModule && (this.onRecordPage || this.options.editable)
-      - An inline record editor for the same module already exists
-      - Record list module doesn't have record page (inline record autoselected and disabled)
-    */
-    disableInlineEditor () {
-      const thisModuleID = this.options.moduleID
-
-      // Finds another inline editor block with the same recordListModule as this one
-      const otherInlineWithSameModule = this.blocks.some(({ kind, options }, index) => {
-        if (this.blockIndex !== index) {
-          return kind === 'RecordList' && options.editable && options.moduleID === thisModuleID
-        }
-      })
-
-      return otherInlineWithSameModule || !this.recordListModuleRecordPage
     },
   },
 
@@ -974,10 +951,10 @@ export default {
   },
 
   methods: {
-    async fetchRoles () {
+    fetchRoles () {
-      this.fetchingRoles = true
-
       if (this.options.filterPresets.length) {
+        this.fetchingRoles = true
+
         const rolesToResolve = this.options.filterPresets.reduce((acc, { roles }) => {
           return acc.concat(roles)
         }, [])

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

@@ -2,12 +2,15 @@
   <b-tab :title="$t('recordOrganizer.label')">
     <b-form-group
       :label="$t('general.module')"
+      label-class="text-primary"
     >
       <c-input-select
         v-model="options.moduleID"
-        :options="moduleOptions"
+        :options="modules"
         label="name"
         :reduce="m => m.moduleID"
+        :placeholder="$t('recordOrganizer.module.placeholder')"
+        default-value="0"
         required
       />
     </b-form-group>
@@ -59,103 +62,140 @@
         </i18next>
       </b-form-group>
 
-      <b-form-group
+      <b-row>
-        :label="$t('recordOrganizer.labelField.label')"
+        <b-col
-        label-class="text-primary"
+          cols="12"
-      >
+          lg="6"
-        <c-input-select
+        >
-          v-model="options.labelField"
+          <b-form-group
-          :options="selectedModuleFields"
+            :label="$t('recordOrganizer.labelField.label')"
-          :reduce="o => o.name"
+            label-class="text-primary"
-          :get-option-label="fieldLabel"
+          >
-          :placeholder="$t('general.label.none')"
+            <c-input-select
-        />
+              v-model="options.labelField"
-        <b-form-text>{{ $t('recordOrganizer.labelField.footnote') }}</b-form-text>
+              :options="selectedModuleFields"
-      </b-form-group>
+              :reduce="o => o.name"
+              :get-option-label="fieldLabel"
+              :placeholder="$t('general.label.none')"
+            />
+            <b-form-text>{{ $t('recordOrganizer.labelField.footnote') }}</b-form-text>
+          </b-form-group>
+        </b-col>
 
-      <b-form-group
+        <b-col
-        :label="$t('recordOrganizer.descriptionField.label')"
+          cols="12"
-        label-class="text-primary"
+          lg="6"
-      >
+        >
-        <c-input-select
+          <b-form-group
-          v-model="options.descriptionField"
+            :label="$t('recordOrganizer.descriptionField.label')"
-          :options="selectedModuleFields"
+            label-class="text-primary"
-          :reduce="o => o.name"
+          >
-          :get-option-label="descriptionLabel"
+            <c-input-select
-          :placeholder="$t('general.label.none')"
+              v-model="options.descriptionField"
-        />
+              :options="selectedModuleFields"
+              :reduce="o => o.name"
+              :get-option-label="descriptionLabel"
+              :placeholder="$t('general.label.none')"
+            />
 
-        <b-form-text class="text-secondary small">
+            <b-form-text class="text-secondary small">
-          {{ $t('recordOrganizer.descriptionField.footnote') }}
+              {{ $t('recordOrganizer.descriptionField.footnote') }}
-        </b-form-text>
+            </b-form-text>
-      </b-form-group>
+          </b-form-group>
+        </b-col>
 
-      <b-form-group
+        <b-col
-        :label="$t('recordOrganizer.positionField.label')"
+          cols="12"
-        label-class="text-primary"
+          lg="6"
-      >
+        >
-        <c-input-select
+          <b-form-group
-          v-model="options.positionField"
+            :label="$t('recordOrganizer.groupField.label')"
-          :placeholder="$t('recordOrganizer.positionField.placeholder')"
+            label-class="text-primary"
-          :reduce="f => f.name"
+          >
-          label="label"
+            <c-input-select
-        />
+              v-model="options.groupField"
+              :options="groupFields"
+              :reduce="o => o.name"
+              :get-option-label="groupFieldLabel"
+              :placeholder="$t('general.label.none')"
+            />
 
-        <b-form-text class="text-secondary small">
+            <b-form-text class="text-secondary small">
-          {{ $t('recordOrganizer.positionField.footnote') }}
+              {{ $t('recordOrganizer.groupField.footnote') }}
-        </b-form-text>
+            </b-form-text>
-      </b-form-group>
+          </b-form-group>
+        </b-col>
 
-      <b-form-group
+        <b-col
-        :label="$t('recordOrganizer.groupField.label')"
+          cols="12"
-        label-class="text-primary"
+          lg="6"
-      >
+        >
-        <c-input-select
+          <b-form-group
-          v-model="options.groupField"
+            :label="$t('recordOrganizer.group.label')"
-          :options="groupFields"
+            label-class="text-primary"
-          :reduce="o => o.name"
+          >
-          :get-option-label="groupFieldLabel"
+            <field-editor
-          :placeholder="$t('general.label.none')"
+              v-if="options.groupField"
-        />
+              v-bind="mock"
+              value-only
+              class="mb-0"
+            />
 
-        <b-form-text class="text-secondary small">
+            <b-form-input
-          {{ $t('recordOrganizer.groupField.footnote') }}
+              v-else
-        </b-form-text>
+              disabled
-      </b-form-group>
+            />
 
-      <b-form-group
+            <b-form-text class="text-secondary small">
-        v-if="options.groupField"
+              {{ $t('recordOrganizer.group.footnote') }}
-        :label="$t('recordOrganizer.group.label')"
+            </b-form-text>
-        label-class="text-primary"
+          </b-form-group>
-      >
+        </b-col>
-        <field-editor
-          class="mb-0"
-          value-only
-          v-bind="mock"
-        />
-        <b-form-text class="text-secondary small">
-          {{ $t('recordOrganizer.group.footnote') }}
-        </b-form-text>
-      </b-form-group>
 
-      <b-form-group
+        <b-col
-        v-if="options.groupField"
+          cols="12"
-        :label="$t('recordOrganizer.onRecordClick')"
+          lg="6"
-        label-class="text-primary"
+        >
-        class="mb-0"
+          <b-form-group
-      >
+            :label="$t('recordOrganizer.positionField.label')"
-        <b-form-select
+            label-class="text-primary"
-          v-model="options.displayOption"
+          >
-          :options="displayOptions"
+            <c-input-select
-        />
+              v-model="options.positionField"
-      </b-form-group>
+              :placeholder="$t('recordOrganizer.positionField.placeholder')"
+              :reduce="f => f.name"
+              label="label"
+            />
+
+            <b-form-text class="text-secondary small">
+              {{ $t('recordOrganizer.positionField.footnote') }}
+            </b-form-text>
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('recordOrganizer.onRecordClick')"
+            label-class="text-primary"
+            class="mb-0"
+          >
+            <b-form-select
+              v-model="options.displayOption"
+              :options="displayOptions"
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
     </div>
   </b-tab>
 </template>
 <script>
 import FieldEditor from '../ModuleFields/Editor'
 import { mapGetters } from 'vuex'
-import { compose, validator, NoID } from '@cortezaproject/corteza-js'
+import { compose, validator } from '@cortezaproject/corteza-js'
 import base from './base'
 
 export default {
@@ -192,13 +232,6 @@ export default {
       modules: 'module/set',
     }),
 
-    moduleOptions () {
-      return [
-        { moduleID: NoID, name: this.$t('general.label.none') },
-        ...this.modules,
-      ]
-    },
-
     selectedModule () {
       return this.modules.find(m => m.moduleID === this.options.moduleID)
     },

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

@@ -426,6 +426,7 @@ recordList:
       title: Record import error report
       totalRecords: Total records
   label: Record list
+  modulePlaceholder: Select a module
   moduleFootnote: Modules without a {{0}} can only be used in a record list as an inline editor
   moduleFieldsFootnote : If no fields are selected, the default fields will be shown
   noRecords: There are no records matching your request
@@ -468,12 +469,12 @@ recordList:
     pagingLabel: Paging
     pagingOptions: Paging Options
     moreOptions: More Options
-    hidePaging: User will be able to use Paging
+    hidePaging: User will be able to navigate through pages
     inlineEditor: Inline Options
     inlineEditorAllow: Inline record editor
     recordsLabel: Records
     noPermission: No permission to read record
-    perPage: Per Page
+    perPage: Records per page
     prefilterFootnote: Simplified SQL condition (WHERE ...) syntax is supported. Variables like {{0}}, {{1}}, {{2}} and {{3}} are evaluated (when available)
     prefilterHideSearch: Users will be able to search the record list
     filterHide: Users will be able to filter the list
@@ -488,7 +489,7 @@ recordList:
     presortInputLabel: Presort
     presortPlaceholder: field1 DESC, field2 ASC
     showTotalCount: Show total record count
-    showRecordPerPageOption: Allow users to select records per page
+    showRecordPerPageOption: User will be able to select records per page
     showDeletedRecordsOption: Show option to see deleted records
     setCustomFilterPresets: User will be able to set custom filter presets
     openInSameTab: Open record in the same tab
@@ -525,6 +526,8 @@ recordOrganizer:
   openInSameTab: Open in the same tab
   openInNewTab: Open in a new tab
   openInModal: Open in a modal
+  module:
+    placeholder: Select a module
   descriptionField:
     footnote: Field value will be used as record description
     label: Description field
@@ -617,6 +620,8 @@ field:
       title: Update record values
 comment:
   label: Comments
+  module:
+    placeholder: Select a module
   titleField:
     label: Title field
     footnote: Field value will be used as record title
@@ -628,12 +633,12 @@ comment:
   submit: Submit
   sortDirection:
     label: Sort direction
-    footnote: Field value will be used as sorting direction reference
+    footnote: Sort comments by when they were created
-    asc: ASC
+    asc: Ascending
-    desc: DESC
+    desc: Descending
   referenceField:
     label: Reference field
-    footnote: Field value will be used as reference
+    footnote: Field that links comments with the parent record
 navigation:
   chart: Charts
   colorPicker: Choose a color

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

@@ -116,7 +116,7 @@ kind:
     currentUnnamedModule: (Current unnamed module)
     label: Record
     moduleLabel: Module
-    modulePlaceholder: Pick module
+    modulePlaceholder: Select a module
     queryFieldsLabel: Query fields on search
     moduleField: Label field
     variantField: Variant field