Skip to content

Commit

Permalink
Update some block configurators UX with columns and c-input-selects
Browse files Browse the repository at this point in the history
  • Loading branch information
@Fajfa
Fajfa committed Oct 7, 2024
1 parent 799c067 commit ff07c40
Show file tree
Hide file tree
Showing 5 changed files with 275 additions and 253 deletions.
175 changes: 91 additions & 84 deletions client/web/compose/src/components/PageBlocks/CommentConfigurator.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -60,91 +62,96 @@
</i18next>
</b-form-group>

<b-form-group
:label="$t('comment.titleField.label')"
label-class="text-primary"
>
<b-form-select v-model="options.titleField">
<option value="">
{{ $t('general.label.none') }}
</option>

<option
v-for="(field, index) in selectedModuleFieldsByType('String')"
:key="index"
:value="field.name"
<b-row>
<b-col
cols="12"
lg="6"
>
<b-form-group
:label="$t('comment.titleField.label')"
label-class="text-primary"
>
{{ field.label || field.name }} ({{ field.kind }})
</option>
</b-form-select>
<b-form-text>{{ $t('comment.titleField.footnote') }}</b-form-text>
</b-form-group>
<c-input-select
v-model="options.titleField"
:options="selectedModuleFieldsByType('String')"
:get-option-label="f => `${f.label || f.name} (${f.kind})`"
: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
:label="$t('comment.contentField.label')"
label-class="text-primary"
>
<b-form-select v-model="options.contentField">
<option value="">
{{ $t('general.label.none') }}
</option>
<option
v-for="(field, index) in selectedModuleFieldsByType('String')"
:key="index"
:value="field.name"
<b-col
cols="12"
lg="6"
>
<b-form-group
:label="$t('comment.contentField.label')"
label-class="text-primary"
>
{{ field.label || field.name }} ({{ field.kind }})
</option>
</b-form-select>
<b-form-text class="text-secondary small">
{{ $t('comment.contentField.footnote') }}
</b-form-text>
</b-form-group>
<c-input-select
v-model="options.contentField"
:options="selectedModuleFieldsByType('String')"
:get-option-label="f => `${f.label || f.name} (${f.kind})`"
:reduce="f => f.name"
:placeholder="$t('general.label.none')"
/>
<b-form-text>
{{ $t('comment.contentField.footnote') }}
</b-form-text>
</b-form-group>
</b-col>

<b-form-group
:label="$t('comment.referenceField.label')"
label-class="text-primary"
>
<b-form-select v-model="options.referenceField">
<option value="">
{{ $t('general.label.none') }}
</option>
<option
v-for="(field, index) in selectedModuleFieldsByType('Record')"
:key="index"
:value="field.name"
<b-col
cols="12"
lg="6"
>
<b-form-group
:label="$t('comment.referenceField.label')"
label-class="text-primary"
>
{{ field.label || field.name }} ({{ field.kind }})
</option>
</b-form-select>
<b-form-text class="text-secondary small">
{{ $t('comment.referenceField.footnote') }}
</b-form-text>
</b-form-group>
<c-input-select
v-model="options.referenceField"
:options="selectedModuleFieldsByType('Record')"
:get-option-label="f => `${f.label || f.name} (${f.kind})`"
:reduce="f => f.name"
:placeholder="$t('general.label.none')"
/>
<b-form-text>
{{ $t('comment.referenceField.footnote') }}
</b-form-text>
</b-form-group>
</b-col>

<b-form-group
:label="$t('comment.sortDirection.label')"
label-class="text-primary"
>
<b-form-select v-model="options.sortDirection">
<option
v-for="(item, index) in sortDirections"
:key="index"
:value="item.value"
<b-col
cols="12"
lg="6"
>
<b-form-group
:label="$t('comment.sortDirection.label')"
label-class="text-primary"
>
{{ item.label }}
</option>
</b-form-select>
<b-form-text class="text-secondary small">
{{ $t('comment.sortDirection.footnote') }}
</b-form-text>
</b-form-group>
<c-input-select
v-model="options.sortDirection"
:options="sortDirections"
label="label"
:clearable="false"
:reduce="o => o.value"
/>
<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 {
Expand All @@ -157,8 +164,15 @@ export default {
extends: base,
data () {
return {
referenceList: [{ 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' }],
referenceList: [
{ 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' },
],
}
},
Expand All @@ -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 => {
Expand Down
Loading

0 comments on commit ff07c40

Please sign in to comment.