DeforaNetworks/corteza
3
0
Fork 0
Code Activity

Add manual refresh to pageblocks

Browse Source
This commit is contained in:
Emmy Leke
2023-01-16 12:04:12 +01:00
committed by EmmyMay
parent f74237dbc5
commit fa12af0929
16 changed files with 127 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/compose/src/components/PageBlocks/Configurator.vue
+14 -1
View File
@@ -95,10 +95,23 @@
</b-form-group>
<b-form-group
v-if="block.options.refreshRate !== undefined"
v-if="block.options.refreshEnabled !== undefined"
class="mt-4"
:label="$t('general.refresh.label')"
:description="$t('general.refresh.description')"
>
<b-col
cols="12"
sm="3"
class="px-0 mb-2"
>
<b-form-checkbox
v-model="block.options.refreshEnabled"
>
{{ $t('general.refresh.enabled') }}
</b-form-checkbox>
</b-col>
<b-col
cols="12"
sm="3"
client/web/compose/src/components/PageBlocks/Wrap/Card.vue
+7 -47
View File
@@ -6,7 +6,7 @@
:class="blockClass"
>
<b-card-header
v-if="headerSet || block.title || block.description || hasMagnifyIcon || block.options.refreshRate >= 5"
v-if="showHeader"
class="border-0 text-nowrap px-3"
header-bg-variant="white"
:header-text-variant="block.style.variants.headerText"
@@ -25,11 +25,11 @@
</h5>
<div
v-if="block.options.refreshRate >= 5 || hasMagnifyIcon"
v-if="showOptions"
class="ml-auto"
>
<font-awesome-icon
v-if="block.options.refreshRate >= 5"
v-if="block.options.refreshEnabled"
:icon="['fa', 'sync']"
class="h6 text-secondary"
role="button"
@@ -37,7 +37,7 @@
/>
<font-awesome-icon
v-if="hasMagnifyIcon"
v-if="block.options.magnifyOption"
:icon="['fas', isBlockOpened ? 'times' : 'search-plus']"
:title="$t(isBlockOpened ? '' : 'general.label.magnify')"
class="h6 text-secondary ml-2"
@@ -92,49 +92,9 @@
</div>
</template>
<script>
import { compose } from '@cortezaproject/corteza-js'
import base from './base.vue'
export default {
props: {
block: {
type: compose.PageBlock,
required: true,
},
scrollableBody: {
type: Boolean,
required: false,
default: () => true,
},
},
computed: {
blockClass () {
return [
'block',
this.block.kind,
]
},
hasMagnifyIcon () {
return this.block.options.magnifyOption
},
isBlockOpened () {
return this.block.blockID === this.$route.query.blockID
},
headerSet () {
return !!this.$scopedSlots.header
},
toolbarSet () {
return !!this.$scopedSlots.toolbar
},
footerSet () {
return !!this.$scopedSlots.footer
},
},
name: 'CardWrap',
extends: base,
}
</script>
client/web/compose/src/components/PageBlocks/Wrap/Plain.vue
+7 -47
View File
@@ -5,7 +5,7 @@
:class="blockClass"
>
<div
v-if="(headerSet || block.title || block.description || hasMagnifyIcon || block.options.refreshRate >= 5)"
v-if="showHeader"
:class="`card-header bg-transparent border-0 text-nowrap px-3 text-${block.style.variants.headerText}`"
>
<div
@@ -23,11 +23,11 @@
</h5>
<div
v-if="block.options.refreshRate >= 5 || hasMagnifyIcon"
v-if="showOptions"
class="ml-auto"
>
<font-awesome-icon
v-if="block.options.refreshRate >= 5"
v-if="block.options.refreshEnabled"
:icon="['fa', 'sync']"
class="h6 text-secondary"
role="button"
@@ -35,7 +35,7 @@
/>
<font-awesome-icon
v-if="hasMagnifyIcon"
v-if="block.options.magnifyOption"
:icon="['fas', isBlockOpened ? 'times' : 'search-plus']"
:title="$t(isBlockOpened ? '' : 'general.label.magnify')"
class="h6 text-secondary ml-2"
@@ -90,49 +90,9 @@
</div>
</template>
<script>
import { compose } from '@cortezaproject/corteza-js'
import base from './base.vue'
export default {
props: {
block: {
type: compose.PageBlock,
required: true,
},
scrollableBody: {
type: Boolean,
required: false,
default: () => true,
},
},
computed: {
blockClass () {
return [
'block',
this.block.kind,
]
},
hasMagnifyIcon () {
return this.block.options.magnifyOption
},
isBlockOpened () {
return this.block.blockID === this.$route.query.blockID
},
headerSet () {
return !!this.$scopedSlots.header
},
toolbarSet () {
return !!this.$scopedSlots.toolbar
},
footerSet () {
return !!this.$scopedSlots.footer
},
},
name: 'PlainWrap',
extends: base,
}
</script>
client/web/compose/src/components/PageBlocks/Wrap/base.vue
+58
View File
@@ -0,0 +1,58 @@
<script>
import { compose } from '@cortezaproject/corteza-js'
export default {
props: {
block: {
type: compose.PageBlock,
required: true,
},
scrollableBody: {
type: Boolean,
required: false,
default: () => true,
},
},
computed: {
blockClass () {
return [
'block',
this.block.kind,
]
},
isBlockOpened () {
return this.block.blockID === this.$route.query.blockID
},
headerSet () {
return !!this.$scopedSlots.header
},
toolbarSet () {
return !!this.$scopedSlots.toolbar
},
footerSet () {
return !!this.$scopedSlots.footer
},
showHeader () {
return [
this.headerSet,
this.block.title,
this.block.description,
this.block.options.magnifyOption,
this.block.options.refreshEnabled,
].some(c => !!c)
},
showOptions () {
return [
this.block.options.magnifyOption,
this.block.options.refreshEnabled,
].some(c => !!c)
},
},
}
</script>
lib/js/src/compose/types/page-block/calendar/page-block.ts
+3
View File
@@ -36,6 +36,7 @@ class CalendarOptions {
public header: Partial<CalendarOptionsHeader> = {}
public locale = 'en-gb'
public refreshRate = 0
public refreshEnabled = false
public magnifyOption = ''
}
@@ -60,6 +61,8 @@ export class PageBlockCalendar extends PageBlock {
if (!o) return
Apply(this.options, o, Number, 'refreshRate')
Apply(this.options, o, Boolean, 'refreshEnabled')
Apply(this.options, o, String, 'magnifyOption')
this.options.defaultView = PageBlockCalendar.handleLegacyView(o.defaultView) || 'dayGridMonth'
lib/js/src/compose/types/page-block/chart.ts
+5 -3
View File
@@ -6,13 +6,15 @@ const kind = 'Chart'
interface Options {
chartID: string;
refreshRate: number;
magnifyOption: string
refreshEnabled: boolean;
magnifyOption: string;
}
const defaults: Readonly<Options> = Object.freeze({
chartID: NoID,
refreshRate: 0,
magnifyOption: ''
magnifyOption: '',
refreshEnabled: false,
})
export class PageBlockChart extends PageBlock {
@@ -30,8 +32,8 @@ export class PageBlockChart extends PageBlock {
Apply(this.options, o, CortezaID, 'chartID')
Apply(this.options, o, Number, 'refreshRate')
Apply(this.options, o, Boolean, 'refreshEnabled')
Apply(this.options, o, String, 'magnifyOption')
}
}
lib/js/src/compose/types/page-block/comment.ts
+5 -2
View File
@@ -10,7 +10,8 @@ interface Options {
referenceField: string;
sortDirection: string;
refreshRate: number;
magnifyOption: string
refreshEnabled: boolean;
magnifyOption: string;
}
const defaults: Readonly<Options> = Object.freeze({
@@ -21,7 +22,8 @@ const defaults: Readonly<Options> = Object.freeze({
sortDirection: '',
referenceField: '',
refreshRate: 0,
magnifyOption: ''
refreshEnabled: false,
magnifyOption: '',
})
export class PageBlockComment extends PageBlock {
@@ -39,6 +41,7 @@ export class PageBlockComment extends PageBlock {
Apply(this.options, o, CortezaID, 'moduleID')
Apply(this.options, o, String, 'titleField', 'contentField', 'referenceField', 'filter', 'sortDirection', 'magnifyOption')
Apply(this.options, o, Number, 'refreshRate')
Apply(this.options, o, Boolean, 'refreshEnabled')
}
}
lib/js/src/compose/types/page-block/iframe.ts
+3
View File
@@ -8,6 +8,7 @@ interface Options {
src: string;
wrap: PageBlockWrap;
refreshRate: number;
refreshEnabled: boolean;
magnifyOption: string;
}
@@ -16,6 +17,7 @@ const defaults: Readonly<Options> = Object.freeze({
src: '',
wrap: 'Plain',
refreshRate: 0,
refreshEnabled: false,
magnifyOption: '',
})
@@ -34,6 +36,7 @@ export class PageBlockIFrame extends PageBlock {
Apply(this.options, o, String, 'srcField', 'src', 'wrap', 'magnifyOption')
Apply(this.options, o, Number, 'refreshRate')
Apply(this.options, o, Boolean, 'refreshEnabled')
}
}
lib/js/src/compose/types/page-block/metric.ts
+3
View File
@@ -41,11 +41,13 @@ interface Metric {
interface Options {
metrics: Array<Metric>;
refreshRate: number;
refreshEnabled: boolean;
}
const defaults: Readonly<Options> = Object.freeze({
metrics: [],
refreshRate: 0,
refreshEnabled: false,
})
export class PageBlockMetric extends PageBlock {
@@ -61,6 +63,7 @@ export class PageBlockMetric extends PageBlock {
applyOptions (o?: Partial<Options>): void {
if (!o) return
Apply(this.options, o, Number, 'refreshRate')
Apply(this.options, o, Boolean, 'refreshEnabled')
if (o.metrics) {
this.options.metrics = o.metrics
}
lib/js/src/compose/types/page-block/progress.ts
+3
View File
@@ -34,6 +34,7 @@ interface Options {
maxValue: ValueOptions;
display: DisplayOptions;
refreshRate: number;
refreshEnabled: boolean;
}
const defaults: Readonly<Options> = Object.freeze({
@@ -70,6 +71,7 @@ const defaults: Readonly<Options> = Object.freeze({
thresholds: [],
},
refreshRate: 0,
refreshEnabled: false,
})
export class PageBlockProgress extends PageBlock {
@@ -86,6 +88,7 @@ export class PageBlockProgress extends PageBlock {
if (!o) return
Apply(this.options, o, Number, 'refreshRate')
Apply(this.options, o, Boolean, 'refreshEnabled')
if (o.value) {
this.options.value = { ...this.options.value, ...o.value }
lib/js/src/compose/types/page-block/record-list.ts
+3
View File
@@ -29,6 +29,7 @@ interface Options {
fullPageNavigation: boolean;
showTotalCount: boolean;
refreshRate: number;
refreshEnabled: boolean;
// Record-lines
editable: boolean;
@@ -91,6 +92,7 @@ const defaults: Readonly<Options> = Object.freeze({
selectionButtons: [],
refreshRate: 0,
refreshEnabled: false,
})
export class PageBlockRecordList extends PageBlock {
@@ -141,6 +143,7 @@ export class PageBlockRecordList extends PageBlock {
'editable',
'draggable',
'linkToParent',
'refreshEnabled',
)
if (o.selectionButtons) {
lib/js/src/compose/types/page-block/record-organizer.ts
+3
View File
@@ -11,6 +11,7 @@ interface Options {
groupField: string;
group: string;
refreshRate: number;
refreshEnabled: boolean;
}
const defaults: Readonly<Options> = Object.freeze({
@@ -22,6 +23,7 @@ const defaults: Readonly<Options> = Object.freeze({
groupField: '',
group: '',
refreshRate: 0,
refreshEnabled: false,
})
export class PageBlockRecordOrganizer extends PageBlock {
@@ -40,6 +42,7 @@ export class PageBlockRecordOrganizer extends PageBlock {
Apply(this.options, o, CortezaID, 'moduleID')
Apply(this.options, o, String, 'labelField', 'descriptionField', 'filter', 'positionField', 'groupField', 'group')
Apply(this.options, o, Number, 'refreshRate')
Apply(this.options, o, Boolean, 'refreshEnabled')
}
}
lib/js/src/compose/types/page-block/record-revisions.ts
+3 -1
View File
@@ -17,6 +17,7 @@ interface Options {
// referenced fields (records, users) we want to expand
expRefFields: string[];
refreshRate: number;
refreshEnabled: boolean;
magnifyOption: string;
}
@@ -25,6 +26,7 @@ const defaults: Readonly<Options> = Object.freeze({
displayedFields: [],
expRefFields: [],
refreshRate: 0,
refreshEnabled: false,
magnifyOption: '',
})
@@ -41,7 +43,7 @@ export class PageBlockRecordRevisions extends PageBlock {
applyOptions (o?: Partial<Options>): void {
if (!o) return
Apply(this.options, o, Boolean, 'preload')
Apply(this.options, o, Boolean, 'preload', 'refreshEnabled')
Apply(this.options, o, Number, 'refreshRate')
Apply(this.options, o, String, 'magnifyOption')
lib/js/src/compose/types/page-block/report.ts
+4 -1
View File
@@ -8,6 +8,7 @@ interface Options {
scenarioID: string;
elementID: string;
refreshRate: number;
refreshEnabled: boolean;
magnifyOption: string;
}
@@ -16,7 +17,8 @@ const defaults: Readonly<Options> = Object.freeze({
scenarioID: NoID,
elementID: NoID,
refreshRate: 0,
magnifyOption: ''
refreshEnabled: false,
magnifyOption: '',
})
export class PageBlockReport extends PageBlock {
@@ -34,6 +36,7 @@ export class PageBlockReport extends PageBlock {
Apply(this.options, o, CortezaID, 'reportID', 'scenarioID', 'elementID')
Apply(this.options, o, Number, 'refreshRate')
Apply(this.options, o, Boolean, 'refreshEnabled')
Apply(this.options, o, String, 'magnifyOption')
}
}
lib/js/src/compose/types/page-block/social-feed.ts
+3
View File
@@ -7,6 +7,7 @@ interface Options {
fields: unknown[];
profileSourceField: string;
profileUrl: string;
refreshEnabled: boolean;
refreshRate: number;
}
@@ -15,6 +16,7 @@ const defaults: Readonly<Options> = Object.freeze({
fields: [],
profileSourceField: '',
profileUrl: '',
refreshEnabled: false,
refreshRate: 0,
})
@@ -34,6 +36,7 @@ export class PageBlockSocialFeed extends PageBlock {
Apply(this.options, o, CortezaID, 'moduleID')
Apply(this.options, o, String, 'profileSourceField', 'profileUrl')
Apply(this.options, o, Number, 'refreshRate')
Apply(this.options, o, Boolean, 'refreshEnabled')
if (o.fields) {
this.options.fields = o.fields
locale/en/corteza-webapp-compose/block.yaml
+3 -2
View File
@@ -120,8 +120,9 @@ general:
fullscreen: Fullscreen
wrap: Display block as a card
refresh:
label: Block auto-refresh interval
description: Setting value to less than 5 seconds disables auto-refresh
enabled: Enabled
label: Refresh
description: Setting value to 5 seconds or more enables auto-refresh
rate: seconds
label:
add: Add