Skip to content

Commit

Permalink
Add record from record selector field
Browse files Browse the repository at this point in the history
  • Loading branch information
@katrinDY
katrinDY committed Aug 30, 2024
1 parent b1525e3 commit 2933e72
Show file tree
Hide file tree
Showing 7 changed files with 279 additions and 121 deletions.
293 changes: 200 additions & 93 deletions client/web/compose/src/components/ModuleFields/Editor/Record.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,74 +40,146 @@
:show-list="field.options.selectType !== 'multiple'"
>
<template #single>
<c-input-select
v-if="field.options.selectType === 'multiple'"
v-model="multipleSelected"
:options="options"
:get-option-key="getOptionKey"
:get-option-label="getOptionLabel"
:disabled="!module"
:loading="processing"
:clearable="false"
:filterable="false"
:searchable="searchable"
:selectable="isSelectable"
:placeholder="placeholder"
multiple
@search="search"
<b-input-group class="d-flex w-100">
<c-input-select
v-if="field.options.selectType === 'multiple'"
v-model="multipleSelected"
:options="options"
:get-option-key="getOptionKey"
:get-option-label="getOptionLabel"
:disabled="!module"
:loading="processing"
:clearable="false"
:filterable="false"
:searchable="searchable"
:selectable="isSelectable"
:placeholder="placeholder"
multiple
@search="search"
>
<pagination
v-if="showPagination"
slot="list-footer"
:has-prev-page="hasPrevPage"
:has-next-page="hasNextPage"
@prev="goToPage(false)"
@next="goToPage(true)"
/>
</c-input-select>

<c-input-select
v-else
ref="singleSelect"
:options="options"
:get-option-key="getOptionKey"
:get-option-label="getOptionLabel"
:disabled="!module"
:loading="processing"
:clearable="false"
:filterable="false"
:searchable="searchable"
:selectable="isSelectable"
:placeholder="placeholder"
@input="selectChange($event)"
@search="search"
>
<pagination
v-if="showPagination"
slot="list-footer"
:has-prev-page="hasPrevPage"
:has-next-page="hasNextPage"
@prev="goToPage(false)"
@next="goToPage(true)"
/>
</c-input-select>

<b-input-group-append>
<b-button
v-if="canAddRecordThroughSelectField"
v-b-tooltip.hover="{ title: $t('kind.record.tooltip.addRecord'), container: '#body' }"
variant="light"
class="d-flex align-items-center"
@click="addRecordThroughRecordSelectField()"
>
<font-awesome-icon
:icon="['fas', 'plus']"
class="text-primary"
/>
</b-button>
</b-input-group-append>
</b-input-group>
</template>
<template #default="ctx">
<b-input-group
v-if="field.options.selectType === 'each'"
class="d-flex w-100"
>
<pagination
v-if="showPagination"
slot="list-footer"
:has-prev-page="hasPrevPage"
:has-next-page="hasNextPage"
@prev="goToPage(false)"
@next="goToPage(true)"
/>
</c-input-select>
<c-input-select
:options="options"
:get-option-key="getOptionKey"
:get-option-label="getOptionLabel"
:disabled="!module"
:loading="processing"
:clearable="false"
:filterable="false"
:searchable="searchable"
:selectable="isSelectable"
:placeholder="placeholder"
:value="getRecord(ctx.index)"
@input="setRecord($event, ctx.index)"
@search="search"
>
<pagination
v-if="showPagination"
slot="list-footer"
:has-prev-page="hasPrevPage"
:has-next-page="hasNextPage"
@prev="goToPage(false)"
@next="goToPage(true)"
/>
</c-input-select>
<b-input-group-append>
<b-button
v-if="canAddRecordThroughSelectField"
v-b-tooltip.hover="{ title: $t('kind.record.tooltip.addRecord'), container: '#body' }"
variant="light"
class="d-flex align-items-center"
@click="addRecordThroughRecordSelectField()"
>
<font-awesome-icon
:icon="['fas', 'plus']"
class="text-primary"
/>
</b-button>
</b-input-group-append>
</b-input-group>
<b-spinner
v-else-if="resolving"
variant="primary"
small
/>

<c-input-select
v-else
ref="singleSelect"
:options="options"
:get-option-key="getOptionKey"
:get-option-label="getOptionLabel"
:disabled="!module"
:loading="processing"
:clearable="false"
:filterable="false"
:searchable="searchable"
:selectable="isSelectable"
:placeholder="placeholder"
@input="selectChange($event)"
@search="search"
>
<pagination
v-if="showPagination"
slot="list-footer"
:has-prev-page="hasPrevPage"
:has-next-page="hasNextPage"
@prev="goToPage(false)"
@next="goToPage(true)"
/>
</c-input-select>
<span v-else>
{{ getOptionLabel(multipleSelected[ctx.index]) }}
</span>
</template>
</multi>

<template #default="ctx">
<template
v-else
>
<b-input-group>
<c-input-select
v-if="field.options.selectType === 'each'"
v-model="selected"
:options="options"
:get-option-key="getOptionKey"
:get-option-label="getOptionLabel"
:disabled="!module"
:loading="processing"
:clearable="false"
:placeholder="placeholder"
:filterable="false"
:searchable="searchable"
:selectable="isSelectable"
:placeholder="placeholder"
:value="getRecord(ctx.index)"
@input="setRecord($event, ctx.index)"
@search="search"
>
<pagination
Expand All @@ -119,44 +191,21 @@
@next="goToPage(true)"
/>
</c-input-select>

<b-spinner
v-else-if="resolving"
variant="primary"
small
/>

<span v-else>
{{ getOptionLabel(multipleSelected[ctx.index]) }}
</span>
</template>
</multi>

<template
v-else
>
<c-input-select
v-model="selected"
:options="options"
:get-option-key="getOptionKey"
:get-option-label="getOptionLabel"
:disabled="!module"
:loading="processing"
:placeholder="placeholder"
:filterable="false"
:searchable="searchable"
:selectable="isSelectable"
@search="search"
>
<pagination
v-if="showPagination"
slot="list-footer"
:has-prev-page="hasPrevPage"
:has-next-page="hasNextPage"
@prev="goToPage(false)"
@next="goToPage(true)"
/>
</c-input-select>
<b-input-group-append>
<b-button
v-if="canAddRecordThroughSelectField"
v-b-tooltip.hover="{ title: $t('kind.record.tooltip.addRecord'), container: '#body' }"
variant="light"
class="d-flex align-items-center"
@click="addRecordThroughRecordSelectField()"
>
<font-awesome-icon
:icon="['fas', 'plus']"
class="text-primary"
/>
</b-button>
</b-input-group-append>
</b-input-group>

<errors :errors="errors" />
</template>
Expand Down Expand Up @@ -208,6 +257,7 @@ export default {
getModuleByID: 'module/getByID',
findUserByID: 'user/findByID',
findRecordsByIDs: 'record/findByIDs',
pages: 'page/set',
}),
options () {
Expand Down Expand Up @@ -263,6 +313,12 @@ export default {
hasNextPage () {
return !!this.filter.nextPage
},
canAddRecordThroughSelectField () {
if (this.module === undefined) return
return !!this.getRecordSelectorPage().page.pageID && this.module.canCreateRecord
},
},
watch: {
Expand Down Expand Up @@ -304,6 +360,7 @@ export default {
createEvents () {
this.$root.$on('record-field-change', this.refetchOnPrefilterValueChange)
this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
},
refetchOnPrefilterValueChange ({ fieldName }) {
Expand Down Expand Up @@ -499,6 +556,55 @@ export default {
})
},
addRecordThroughRecordSelectField () {
const { page } = this.getRecordSelectorPage()
if (page === undefined) return
const { pageID } = page
const { recordSelectorAddRecordDisplayOption } = this.extraOptions
const route = {
name: 'page.record.create',
params: { pageID, edit: true },
}
if (recordSelectorAddRecordDisplayOption === 'modal') {
this.$root.$emit('show-record-modal', {
recordID: NoID,
recordPageID: pageID,
edit: true,
})
} else if (recordSelectorAddRecordDisplayOption === 'newTab') {
window.open(this.$router.resolve(route).href)
} else {
this.$router.push(route)
}
},
refreshOnRelatedRecordsUpdate () {
const { page } = this.getRecordSelectorPage()
if (page === undefined || this.module === undefined) return
if (page.pageID !== this.$route.params.pageID) {
this.loadLatest()
}
},
getRecordSelectorPage () {
const recordFieldModuleID = this.field.options.moduleID
if (!recordFieldModuleID) return
const recordFieldPage = this.pages.find(p => p.moduleID === recordFieldModuleID)
if (!recordFieldPage) return
return {
page: recordFieldPage,
}
},
selectChange ({ recordID } = {}) {
if (!recordID) return
Expand Down Expand Up @@ -532,6 +638,7 @@ export default {
destroyEvents () {
this.$root.$off('record-field-change', this.refetchOnPrefilterValueChange)
this.$root.$off('module-records-updated', this.refreshOnRelatedRecordsUpdate)
},
setDefaultValues () {
Expand Down
5 changes: 5 additions & 0 deletions client/web/compose/src/components/ModuleFields/Editor/base.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,11 @@ export default {
type: Boolean,
default: false,
},
extraOptions: {
type: Object,
default: () => ({}),
},
},
computed: {
Expand Down
Loading

0 comments on commit 2933e72

Please sign in to comment.