@afeefa/vue-app 0.0.47 → 0.0.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.afeefa/package/release/version.txt +1 -1
- package/package.json +1 -1
- package/src/api-resources/ApiActions.js +1 -0
- package/src/components/AContextMenu.vue +2 -2
- package/src/components/AContextMenuItem.vue +9 -2
- package/src/components/AModal.vue +1 -2
- package/src/components/ASearchSelect.vue +3 -4
- package/src/components/ASelect.vue +10 -2
- package/src/components/list/{RouteFilterSource.js → CurrentRouteFilterSource.js} +2 -2
- package/src/components/list/FilterSourceType.js +0 -3
- package/src/components/list/ListFilterMixin.js +0 -3
- package/src/components/list/ListViewMixin.js +48 -36
- package/src/components/list/NextRouteFilterSource.js +15 -0
- package/src/components/list/filters/ListFilterSelect.vue +29 -24
- package/src/components/search-select/SearchSelectList.vue +4 -1
- package/src/utils/props-helper.js +21 -0
- package/src-admin/components/App.vue +7 -25
- package/src-admin/components/Splash.vue +8 -1
- package/src-admin/components/list/ListView.vue +1 -1
- package/src-admin/components/pages/CreatePage.vue +4 -4
- package/src-admin/components/pages/DetailPage.vue +4 -7
- package/src-admin/components/pages/EditPage.vue +4 -4
- package/src-admin/components/routes/DetailRoute.vue +7 -2
- package/src-admin/components/routes/EditRoute.vue +7 -2
- package/src-admin/components/routes/ListRoute.vue +16 -7
- package/src-admin/styles.scss +4 -2
- package/src/components/list/ListViewRequest.js +0 -124
- package/src/components/list/RouteQueryFilterSource.js +0 -18
@@ -1 +1 @@
|
|
1
|
-
0.0.
|
1
|
+
0.0.51
|
package/package.json
CHANGED
@@ -6,7 +6,7 @@
|
|
6
6
|
>
|
7
7
|
<slot name="activator">
|
8
8
|
<a-icon class="contextButton">
|
9
|
-
$dotsHorizontalIcon
|
9
|
+
{{ triggerIcon || '$dotsHorizontalIcon' }}
|
10
10
|
</a-icon>
|
11
11
|
</slot>
|
12
12
|
</div>
|
@@ -31,7 +31,7 @@ import { Positions, PositionConfig } from '../services/PositionService'
|
|
31
31
|
import { randomCssClass } from '../utils/random'
|
32
32
|
|
33
33
|
@Component({
|
34
|
-
props: ['contentHeight', 'repositionWatchKey']
|
34
|
+
props: ['contentHeight', 'repositionWatchKey', 'triggerIcon']
|
35
35
|
})
|
36
36
|
export default class AContextMenu extends Mixins(UsesPositionServiceMixin) {
|
37
37
|
CONTEXT_MENU = true
|
@@ -10,7 +10,9 @@
|
|
10
10
|
<script>
|
11
11
|
import { Component, Vue } from 'vue-property-decorator'
|
12
12
|
|
13
|
-
@Component
|
13
|
+
@Component({
|
14
|
+
props: ['to']
|
15
|
+
})
|
14
16
|
export default class AContextMenuItem extends Vue {
|
15
17
|
get contextMenu () {
|
16
18
|
let parent = this.$parent
|
@@ -25,7 +27,12 @@ export default class AContextMenuItem extends Vue {
|
|
25
27
|
|
26
28
|
click () {
|
27
29
|
this.contextMenu.close()
|
28
|
-
this
|
30
|
+
if (this.to) {
|
31
|
+
this.$router.push(this.to)
|
32
|
+
.catch(() => null) // prevent duplicated navigation
|
33
|
+
} else {
|
34
|
+
this.$emit('click')
|
35
|
+
}
|
29
36
|
}
|
30
37
|
}
|
31
38
|
</script>
|
@@ -64,7 +64,7 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentW
|
|
64
64
|
}
|
65
65
|
|
66
66
|
mounted () {
|
67
|
-
// monkey patch
|
67
|
+
// monkey patch onFocusin to allow non vuetify-popups to receive focus
|
68
68
|
const dialog = this.$refs.dialog
|
69
69
|
const onFocusin = dialog.onFocusin
|
70
70
|
dialog.onFocusin = e => {
|
@@ -127,7 +127,6 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentW
|
|
127
127
|
|
128
128
|
createTransientAnchor () {
|
129
129
|
let transientAnchorEl = document.querySelector('.' + this.transientAnchorClass)
|
130
|
-
console.log('anchor', this.anchorPosition)
|
131
130
|
if (!transientAnchorEl) {
|
132
131
|
transientAnchorEl = document.createElement('div')
|
133
132
|
transientAnchorEl.classList.add(this.transientAnchorClass)
|
@@ -46,11 +46,10 @@
|
|
46
46
|
v-if="isOpen"
|
47
47
|
v-bind="listConfig"
|
48
48
|
:q="q"
|
49
|
-
:
|
50
|
-
:
|
49
|
+
:events="false"
|
50
|
+
:history="false"
|
51
51
|
:filterSource="filterSource"
|
52
52
|
:loadOnlyIfKeyword="_loadOnlyIfKeyword"
|
53
|
-
:filters.sync="filters"
|
54
53
|
:count.sync="count"
|
55
54
|
:isLoading.sync="isLoading"
|
56
55
|
>
|
@@ -76,7 +75,7 @@
|
|
76
75
|
<div class="lastColumn" />
|
77
76
|
</template>
|
78
77
|
|
79
|
-
<template #not-found>
|
78
|
+
<template #not-found="{ filters }">
|
80
79
|
<slot
|
81
80
|
name="not-found"
|
82
81
|
:filters="filters"
|
@@ -23,14 +23,22 @@ export default class ASelect extends Mixins(ComponentWidthMixin) {
|
|
23
23
|
items_ = []
|
24
24
|
|
25
25
|
mounted () {
|
26
|
-
// monkey patch v-select
|
26
|
+
// monkey patch v-select to set default value on clear
|
27
|
+
const clearableCallback = this.select.clearableCallback
|
28
|
+
this.select.clearableCallback = () => {
|
29
|
+
this.select.isClear = true
|
30
|
+
clearableCallback()
|
31
|
+
this.select.isClear = false
|
32
|
+
}
|
33
|
+
|
27
34
|
const setValue = this.select.setValue
|
28
35
|
this.select.setValue = value => {
|
29
|
-
if (
|
36
|
+
if (this.select.isClear) {
|
30
37
|
value = this.defaultValue || null
|
31
38
|
}
|
32
39
|
setValue(value)
|
33
40
|
}
|
41
|
+
|
34
42
|
this.init()
|
35
43
|
}
|
36
44
|
|
@@ -1,6 +1,6 @@
|
|
1
|
-
import {
|
1
|
+
import { ListViewFilterSource } from '@afeefa/api-resources-client'
|
2
2
|
|
3
|
-
export class
|
3
|
+
export class CurrentRouteFilterSource extends ListViewFilterSource {
|
4
4
|
router = null
|
5
5
|
|
6
6
|
constructor (router) {
|
@@ -2,9 +2,6 @@ export class FilterSourceType {
|
|
2
2
|
// filters are synchronized with url's query string
|
3
3
|
static QUERY_STRING = 'query_string'
|
4
4
|
|
5
|
-
// filters are initialized from given route params (no synchronisation allowed)
|
6
|
-
static ROUTE_PARAMS = 'route_params'
|
7
|
-
|
8
5
|
// filters are synchronized with plain history object
|
9
6
|
static OBJECT = 'object'
|
10
7
|
}
|
@@ -1,24 +1,30 @@
|
|
1
1
|
import { ListAction } from '@a-vue/api-resources/ApiActions'
|
2
|
+
import { propsWithDefaults } from '@a-vue/utils/props-helper'
|
3
|
+
import { ListViewModel } from '@afeefa/api-resources-client'
|
2
4
|
import { Component, Vue, Watch } from 'vue-property-decorator'
|
3
5
|
|
6
|
+
import { CurrentRouteFilterSource } from './CurrentRouteFilterSource'
|
4
7
|
import { FilterSourceType } from './FilterSourceType'
|
5
|
-
import { RouteFilterSource } from './RouteFilterSource'
|
6
8
|
|
7
9
|
@Component({
|
8
|
-
|
9
|
-
'models', 'meta', // if already loaded
|
10
|
-
'
|
11
|
-
'
|
12
|
-
'
|
13
|
-
|
14
|
-
|
10
|
+
...propsWithDefaults([
|
11
|
+
'models', 'meta', // given, if already loaded
|
12
|
+
'listViewConfig',
|
13
|
+
'filterHistoryKey',
|
14
|
+
'loadOnlyIfKeyword',
|
15
|
+
{
|
16
|
+
filterSource: FilterSourceType.QUERY_STRING,
|
17
|
+
events: true,
|
18
|
+
history: true
|
19
|
+
}
|
20
|
+
])
|
15
21
|
})
|
16
22
|
export class ListViewMixin extends Vue {
|
17
23
|
LIST_VIEW = true
|
18
24
|
|
25
|
+
listViewModel = null
|
19
26
|
models_ = []
|
20
27
|
meta_ = {}
|
21
|
-
requestFilters = null
|
22
28
|
isLoading = false
|
23
29
|
|
24
30
|
created () {
|
@@ -26,34 +32,41 @@ export class ListViewMixin extends Vue {
|
|
26
32
|
}
|
27
33
|
|
28
34
|
destroyed () {
|
29
|
-
this.
|
35
|
+
this.listViewModel.off('change', this.filtersChanged)
|
30
36
|
}
|
31
37
|
|
32
38
|
init () {
|
39
|
+
if (this.listViewModel) {
|
40
|
+
// this can happen only on HMR-reload
|
41
|
+
this.listViewModel.off('change', this.filtersChanged)
|
42
|
+
}
|
43
|
+
|
44
|
+
const historyKey = this.history
|
45
|
+
? [this.$route.path, this.filterHistoryKey].filter(i => i).join('.')
|
46
|
+
: undefined
|
47
|
+
const filterSource = this.filterSource === FilterSourceType.QUERY_STRING
|
48
|
+
? new CurrentRouteFilterSource(this.$router)
|
49
|
+
: undefined
|
50
|
+
|
33
51
|
if (this.models) {
|
34
52
|
this.models_ = this.models
|
35
53
|
this.meta_ = this.meta
|
36
54
|
}
|
37
55
|
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
this.requestFilters = action.createRequestFilters(historyKey, filterSource)
|
49
|
-
|
50
|
-
this.requestFilters.on('change', this.filtersChanged)
|
56
|
+
this.listViewModel = new ListViewModel(this.listViewConfig)
|
57
|
+
.filterSource(filterSource, !!filterSource)
|
58
|
+
.historyKey(historyKey, this.history)
|
59
|
+
.usedFilters(this.meta_.used_filters || null, this.meta_.count_search || 0)
|
60
|
+
.initFilters({
|
61
|
+
source: !!filterSource,
|
62
|
+
history: !!historyKey,
|
63
|
+
used: !!this.models
|
64
|
+
})
|
65
|
+
.on('change', this.filtersChanged) // listen to change
|
51
66
|
|
52
|
-
this.$emit('update:filters', this.filters)
|
53
67
|
this._filtersInitialized()
|
54
68
|
|
55
69
|
if (this.models) {
|
56
|
-
this.requestFilters.initFromUsed(this.meta_.used_filters, this.meta_.count_search)
|
57
70
|
this.$emit('update:count', this.meta_.count_search)
|
58
71
|
} else {
|
59
72
|
this.load()
|
@@ -62,8 +75,8 @@ export class ListViewMixin extends Vue {
|
|
62
75
|
|
63
76
|
@Watch('$route.query')
|
64
77
|
routeQueryChanged () {
|
65
|
-
if (this.filterSource
|
66
|
-
this.
|
78
|
+
if (this.filterSource === FilterSourceType.QUERY_STRING) {
|
79
|
+
this.listViewModel.filterSourceChanged()
|
67
80
|
}
|
68
81
|
}
|
69
82
|
|
@@ -81,11 +94,11 @@ export class ListViewMixin extends Vue {
|
|
81
94
|
}
|
82
95
|
|
83
96
|
resetFilters () {
|
84
|
-
this.
|
97
|
+
this.listViewModel.resetFilters()
|
85
98
|
}
|
86
99
|
|
87
100
|
get filters () {
|
88
|
-
return this.
|
101
|
+
return this.listViewModel.getFilters().getEntries()
|
89
102
|
}
|
90
103
|
|
91
104
|
get count () {
|
@@ -107,17 +120,16 @@ export class ListViewMixin extends Vue {
|
|
107
120
|
this.isLoading = true
|
108
121
|
this.$emit('update:isLoading', this.isLoading)
|
109
122
|
|
110
|
-
const request = this.
|
111
|
-
.filters(this.requestFilters.serialize())
|
112
|
-
.toApiRequest()
|
123
|
+
const request = this.listViewModel.getApiRequest()
|
113
124
|
|
114
125
|
const {models, meta} = await new ListAction()
|
115
126
|
.setRequest(request)
|
116
|
-
.noEvents(this.
|
127
|
+
.noEvents(!this.events)
|
117
128
|
.load()
|
118
129
|
|
119
|
-
if (!models) { // error
|
120
|
-
this.
|
130
|
+
if (!models) { // error happened
|
131
|
+
this.isLoading = false
|
132
|
+
this.$emit('update:isLoading', this.isLoading)
|
121
133
|
return
|
122
134
|
}
|
123
135
|
|
@@ -125,7 +137,7 @@ export class ListViewMixin extends Vue {
|
|
125
137
|
this.meta_ = meta
|
126
138
|
|
127
139
|
if (this.meta_.used_filters) {
|
128
|
-
this.
|
140
|
+
this.listViewModel.initFromUsedFilters(this.meta_.used_filters, this.meta_.count_search)
|
129
141
|
}
|
130
142
|
|
131
143
|
this.isLoading = false
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import { ListViewFilterSource } from '@afeefa/api-resources-client'
|
2
|
+
|
3
|
+
export class NextRouteFilterSource extends ListViewFilterSource {
|
4
|
+
route = null
|
5
|
+
|
6
|
+
constructor (route) {
|
7
|
+
super()
|
8
|
+
|
9
|
+
this.route = route
|
10
|
+
}
|
11
|
+
|
12
|
+
getQuery () {
|
13
|
+
return this.route.query
|
14
|
+
}
|
15
|
+
}
|
@@ -5,7 +5,8 @@
|
|
5
5
|
:items="_items"
|
6
6
|
itemText="itemTitle"
|
7
7
|
itemValue="itemValue"
|
8
|
-
:clearable="filter.value !==
|
8
|
+
:clearable="filter.value !== filter.defaultValue"
|
9
|
+
:defaultValue="filter.defaultValue"
|
9
10
|
v-bind="$attrs"
|
10
11
|
/>
|
11
12
|
</template>
|
@@ -16,16 +17,14 @@ import { Component, Mixins } from 'vue-property-decorator'
|
|
16
17
|
import { ListFilterMixin } from '../ListFilterMixin'
|
17
18
|
import { ListAction } from '@a-vue/api-resources/ApiActions'
|
18
19
|
|
19
|
-
@Component
|
20
|
-
props: ['totalVisible']
|
21
|
-
})
|
20
|
+
@Component
|
22
21
|
export default class ListFilterSelect extends Mixins(ListFilterMixin) {
|
23
22
|
items = null
|
24
23
|
|
25
24
|
created () {
|
26
|
-
if (this.hasOptionsRequest()) {
|
25
|
+
if (this.filter.hasOptionsRequest()) {
|
27
26
|
this.items = this.loadRequestOptions()
|
28
|
-
} else if (this.hasOptions()) {
|
27
|
+
} else if (this.filter.hasOptions()) {
|
29
28
|
this.items = this.getOptions()
|
30
29
|
}
|
31
30
|
}
|
@@ -34,43 +33,49 @@ export default class ListFilterSelect extends Mixins(ListFilterMixin) {
|
|
34
33
|
return this.$attrs.items || this.items || []
|
35
34
|
}
|
36
35
|
|
37
|
-
|
38
|
-
|
36
|
+
get showNullOption () {
|
37
|
+
// either null is a selectable option, than it should be shown in the list
|
38
|
+
// or the default is null, so the list should offer a 'null' option for the unselected state
|
39
|
+
return this.filter.nullIsOption || this.filter.defaultValue === null
|
39
40
|
}
|
40
41
|
|
41
|
-
|
42
|
-
|
42
|
+
createOptions () {
|
43
|
+
const options = []
|
44
|
+
|
45
|
+
if (this.showNullOption) {
|
46
|
+
options.push({
|
47
|
+
itemTitle: 'Alle',
|
48
|
+
itemValue: null
|
49
|
+
})
|
50
|
+
}
|
51
|
+
|
52
|
+
return options
|
43
53
|
}
|
44
54
|
|
45
55
|
async loadRequestOptions () {
|
46
56
|
const {models} = await new ListAction()
|
47
|
-
.setRequest(this.filter.
|
57
|
+
.setRequest(this.filter.createOptionsRequest())
|
48
58
|
.noEvents()
|
49
59
|
.load()
|
50
60
|
|
51
61
|
return [
|
52
|
-
|
53
|
-
itemTitle: 'Alle',
|
54
|
-
itemValue: null
|
55
|
-
},
|
62
|
+
...this.createOptions(),
|
56
63
|
...models.map(model => ({
|
57
64
|
itemTitle: model.name,
|
58
65
|
itemValue: model.id
|
59
66
|
}))
|
60
|
-
|
61
67
|
]
|
62
68
|
}
|
63
69
|
|
64
70
|
getOptions () {
|
65
71
|
return [
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
}))
|
72
|
+
...this.createOptions(),
|
73
|
+
...this.filter.options
|
74
|
+
.filter(o => o !== null) // null is already set in options (if any)
|
75
|
+
.map(o => ({
|
76
|
+
itemTitle: o ? 'Ja' : 'Nein',
|
77
|
+
itemValue: o
|
78
|
+
}))
|
74
79
|
]
|
75
80
|
}
|
76
81
|
}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
export function propsWithDefaults (props) {
|
2
|
+
const normalizedProps = {}
|
3
|
+
|
4
|
+
for (const prop of props) {
|
5
|
+
if (typeof prop === 'object') {
|
6
|
+
Object.keys(prop).forEach(subProp => {
|
7
|
+
if (typeof prop[subProp] === 'object') {
|
8
|
+
normalizedProps[subProp] = prop[subProp]
|
9
|
+
} else {
|
10
|
+
normalizedProps[subProp] = { default: prop[subProp] }
|
11
|
+
}
|
12
|
+
})
|
13
|
+
} else {
|
14
|
+
normalizedProps[prop] = null
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
return {
|
19
|
+
props: normalizedProps
|
20
|
+
}
|
21
|
+
}
|
@@ -59,32 +59,14 @@
|
|
59
59
|
</div>
|
60
60
|
</div>
|
61
61
|
|
62
|
-
<
|
63
|
-
<
|
64
|
-
|
65
|
-
class="contextButton"
|
66
|
-
v-bind="attrs"
|
67
|
-
v-on="on"
|
68
|
-
>
|
69
|
-
$dotsVerticalIcon
|
70
|
-
</v-icon>
|
71
|
-
</template>
|
72
|
-
|
73
|
-
<v-list
|
74
|
-
class="pa-0"
|
62
|
+
<a-context-menu triggerIcon="$dotsVerticalIcon">
|
63
|
+
<a-context-menu-item
|
64
|
+
:to="{name: 'settings', params: {accountId: account.id}}"
|
75
65
|
>
|
76
|
-
<v-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
</v-icon>
|
81
|
-
</v-list-item-icon>
|
82
|
-
<v-list-item-title>
|
83
|
-
Einstellungen
|
84
|
-
</v-list-item-title>
|
85
|
-
</v-list-item>
|
86
|
-
</v-list>
|
87
|
-
</v-menu>
|
66
|
+
<v-icon>$pencilIcon</v-icon>
|
67
|
+
Einstellungen
|
68
|
+
</a-context-menu-item>
|
69
|
+
</a-context-menu>
|
88
70
|
</div>
|
89
71
|
</v-container>
|
90
72
|
</v-container>
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<template>
|
2
|
-
<v-app>
|
2
|
+
<v-app class="splash">
|
3
3
|
<v-container
|
4
4
|
fill-height
|
5
5
|
fluid
|
@@ -49,6 +49,13 @@ export default class Splash extends Vue {
|
|
49
49
|
|
50
50
|
|
51
51
|
<style lang="scss" scoped>
|
52
|
+
.splash {
|
53
|
+
position: absolute;
|
54
|
+
top: 0;
|
55
|
+
left: 0;
|
56
|
+
width: 100vw;
|
57
|
+
}
|
58
|
+
|
52
59
|
.logo {
|
53
60
|
margin-bottom: 2rem;
|
54
61
|
}
|
@@ -73,7 +73,7 @@ export default class ListView extends Mixins(ListViewMixin) {
|
|
73
73
|
|
74
74
|
@Watch('isLoading')
|
75
75
|
isLoadingChanged () {
|
76
|
-
if (this.
|
76
|
+
if (this.events) {
|
77
77
|
if (this.isLoading) {
|
78
78
|
this.$events.dispatch(new LoadingEvent(LoadingEvent.START_LOADING))
|
79
79
|
} else {
|
@@ -56,8 +56,8 @@ import { apiResources } from '@afeefa/api-resources-client'
|
|
56
56
|
})
|
57
57
|
export default class CreatePage extends Mixins(EditPageMixin) {
|
58
58
|
created () {
|
59
|
-
if (!this.$parent.constructor.
|
60
|
-
console.warn('<create-page> owner must provide a static
|
59
|
+
if (!this.$parent.constructor.createRouteConfig) {
|
60
|
+
console.warn('<create-page> owner must provide a static createRouteConfig method.')
|
61
61
|
}
|
62
62
|
|
63
63
|
this.reset()
|
@@ -65,11 +65,11 @@ export default class CreatePage extends Mixins(EditPageMixin) {
|
|
65
65
|
}
|
66
66
|
|
67
67
|
get editConfig () {
|
68
|
-
return this.$parent.constructor.
|
68
|
+
return this.$parent.constructor.createRouteConfig
|
69
69
|
}
|
70
70
|
|
71
71
|
get modelUpateAction () {
|
72
|
-
return this.ModelClass.getAction('
|
72
|
+
return this.editConfig.createAction || this.ModelClass.getAction('save')
|
73
73
|
}
|
74
74
|
|
75
75
|
get _icon () {
|
@@ -55,7 +55,7 @@ import { Component, Vue, Watch } from 'vue-property-decorator'
|
|
55
55
|
import { RemoveAction } from '@a-vue/api-resources/ApiActions'
|
56
56
|
|
57
57
|
@Component({
|
58
|
-
props: ['model', 'title', 'icon', '
|
58
|
+
props: ['model', 'title', 'icon', 'protectRemove', 'listLink']
|
59
59
|
})
|
60
60
|
export default class DetailPage extends Vue {
|
61
61
|
$hasOptions = ['edit', 'remove', 'list']
|
@@ -64,7 +64,7 @@ export default class DetailPage extends Vue {
|
|
64
64
|
removeConfirmed = null
|
65
65
|
|
66
66
|
created () {
|
67
|
-
if (!this.$parent.constructor.
|
67
|
+
if (!this.$parent.constructor.detailRouteConfig) {
|
68
68
|
console.warn('<detail-page> owner must provide a static getDetailConfig method.')
|
69
69
|
}
|
70
70
|
this.$emit('model', this.model)
|
@@ -80,7 +80,7 @@ export default class DetailPage extends Vue {
|
|
80
80
|
}
|
81
81
|
|
82
82
|
get detailConfig () {
|
83
|
-
return this.$parent.constructor.
|
83
|
+
return this.$parent.constructor.detailRouteConfig
|
84
84
|
}
|
85
85
|
|
86
86
|
get document () {
|
@@ -110,10 +110,7 @@ export default class DetailPage extends Vue {
|
|
110
110
|
}
|
111
111
|
|
112
112
|
get _deleteAction () {
|
113
|
-
|
114
|
-
return this.removeAction
|
115
|
-
}
|
116
|
-
return this.ModelClass.getAction('delete')
|
113
|
+
return this.detailConfig.removeAction || this.ModelClass.getAction('save')
|
117
114
|
}
|
118
115
|
|
119
116
|
async remove () {
|
@@ -78,8 +78,8 @@ export default class EditPage extends Mixins(EditPageMixin) {
|
|
78
78
|
model_ = null
|
79
79
|
|
80
80
|
created () {
|
81
|
-
if (!this.$parent.constructor.
|
82
|
-
console.warn('<edit-page> owner must provide a static
|
81
|
+
if (!this.$parent.constructor.editRouteConfig) {
|
82
|
+
console.warn('<edit-page> owner must provide a static editRouteConfig method.')
|
83
83
|
}
|
84
84
|
|
85
85
|
this.model_ = this.model
|
@@ -95,11 +95,11 @@ export default class EditPage extends Mixins(EditPageMixin) {
|
|
95
95
|
}
|
96
96
|
|
97
97
|
get editConfig () {
|
98
|
-
return this.$parent.constructor.
|
98
|
+
return this.$parent.constructor.editRouteConfig
|
99
99
|
}
|
100
100
|
|
101
101
|
get modelUpateAction () {
|
102
|
-
return this.ModelClass.getAction('
|
102
|
+
return this.editConfig.updateAction || this.ModelClass.getAction('save')
|
103
103
|
}
|
104
104
|
|
105
105
|
get _getAction () {
|
@@ -18,13 +18,18 @@ Component.registerHooks([
|
|
18
18
|
function load (route) {
|
19
19
|
const routeDefinition = route.meta.routeDefinition
|
20
20
|
const Component = routeDefinition.config.detail
|
21
|
-
|
21
|
+
|
22
|
+
if (!Component.detailRouteConfig) {
|
23
|
+
console.warn('A detail route component must implement a static detailRouteConfig property.')
|
24
|
+
}
|
25
|
+
|
26
|
+
const detailConfig = Component.detailRouteConfig
|
22
27
|
const action = detailConfig.action || detailConfig.ModelClass.getAction('get')
|
23
28
|
|
24
29
|
return new GetAction()
|
25
30
|
.setAction(action)
|
26
31
|
.setFields(detailConfig.fields)
|
27
|
-
.setId(route.params[routeDefinition.idKey])
|
32
|
+
.setId(detailConfig.id || route.params[routeDefinition.idKey])
|
28
33
|
.load()
|
29
34
|
}
|
30
35
|
|
@@ -19,13 +19,18 @@ Component.registerHooks([
|
|
19
19
|
function load (route) {
|
20
20
|
const routeDefinition = route.meta.routeDefinition
|
21
21
|
const Component = routeDefinition.config.edit
|
22
|
-
|
22
|
+
|
23
|
+
if (!Component.editRouteConfig) {
|
24
|
+
console.warn('An edit route component must implement a static editRouteConfig property.')
|
25
|
+
}
|
26
|
+
|
27
|
+
const editConfig = Component.editRouteConfig
|
23
28
|
const action = editConfig.getAction || editConfig.ModelClass.getAction('get')
|
24
29
|
|
25
30
|
return new GetAction()
|
26
31
|
.setAction(action)
|
27
32
|
.setFields(editConfig.fields)
|
28
|
-
.setId(route.params[routeDefinition.idKey])
|
33
|
+
.setId(editConfig.id || route.params[routeDefinition.idKey])
|
29
34
|
.load()
|
30
35
|
}
|
31
36
|
|
@@ -10,7 +10,8 @@
|
|
10
10
|
<script>
|
11
11
|
import { Component, Vue, Watch } from 'vue-property-decorator'
|
12
12
|
import { ListAction } from '@a-vue/api-resources/ApiActions'
|
13
|
-
import {
|
13
|
+
import { NextRouteFilterSource } from '@a-vue/components/list/NextRouteFilterSource'
|
14
|
+
import { ListViewModel } from '@afeefa/api-resources-client'
|
14
15
|
|
15
16
|
Component.registerHooks([
|
16
17
|
'beforeRouteEnter',
|
@@ -30,14 +31,22 @@ function load (route) {
|
|
30
31
|
const routeDefinition = route.meta.routeDefinition
|
31
32
|
const Component = routeDefinition.config.list
|
32
33
|
|
33
|
-
if (!Component.
|
34
|
-
console.warn('A list route component must implement a static
|
34
|
+
if (!Component.listViewConfig) {
|
35
|
+
console.warn('A list route component must implement a static listViewConfig property.')
|
35
36
|
}
|
36
37
|
|
37
|
-
const request = Component.
|
38
|
-
|
39
|
-
|
40
|
-
.
|
38
|
+
const request = new ListViewModel(Component.listViewConfig)
|
39
|
+
// read from next route query string, but do not push
|
40
|
+
// list component will be init with used_filters
|
41
|
+
.filterSource(new NextRouteFilterSource(route), false)
|
42
|
+
// read from history, but do not push
|
43
|
+
// list component will be init with used_filters
|
44
|
+
.historyKey(route.path, false)
|
45
|
+
.initFilters({
|
46
|
+
source: true,
|
47
|
+
history: true
|
48
|
+
})
|
49
|
+
.getApiRequest()
|
41
50
|
|
42
51
|
return new ListAction()
|
43
52
|
.setRequest(request)
|
package/src-admin/styles.scss
CHANGED
@@ -21,14 +21,16 @@
|
|
21
21
|
}
|
22
22
|
|
23
23
|
.v-application {
|
24
|
-
margin-bottom: 2rem;
|
25
|
-
|
26
24
|
.text-strike {
|
27
25
|
color: inherit;
|
28
26
|
text-decoration: line-through;
|
29
27
|
}
|
30
28
|
}
|
31
29
|
|
30
|
+
.v-main {
|
31
|
+
margin-bottom: 2rem;
|
32
|
+
}
|
33
|
+
|
32
34
|
.theme--light.v-btn.v-btn--has-bg {
|
33
35
|
background-color: #E9E9E9;
|
34
36
|
}
|
@@ -1,124 +0,0 @@
|
|
1
|
-
import { RequestFilters, apiResources } from '@afeefa/api-resources-client'
|
2
|
-
|
3
|
-
export class ListViewRequest {
|
4
|
-
_api = {}
|
5
|
-
_resource = {}
|
6
|
-
_action = {}
|
7
|
-
|
8
|
-
_params = {}
|
9
|
-
_filters = {}
|
10
|
-
_fields = {}
|
11
|
-
|
12
|
-
_filterSource = null
|
13
|
-
_historyKey = null
|
14
|
-
|
15
|
-
action ({api, resource, action}) {
|
16
|
-
this._api = api
|
17
|
-
this._resource = resource
|
18
|
-
this._action = action
|
19
|
-
return this
|
20
|
-
}
|
21
|
-
|
22
|
-
getAction () {
|
23
|
-
return apiResources.getAction({
|
24
|
-
api: this._api,
|
25
|
-
resource: this._resource,
|
26
|
-
action: this._action
|
27
|
-
})
|
28
|
-
}
|
29
|
-
|
30
|
-
params (params) {
|
31
|
-
this._params = params
|
32
|
-
return this
|
33
|
-
}
|
34
|
-
|
35
|
-
getParams () {
|
36
|
-
return this._params
|
37
|
-
}
|
38
|
-
|
39
|
-
filters (filters) {
|
40
|
-
this._filters = filters
|
41
|
-
return this
|
42
|
-
}
|
43
|
-
|
44
|
-
getFilters () {
|
45
|
-
return this._filters
|
46
|
-
}
|
47
|
-
|
48
|
-
fields (fields) {
|
49
|
-
this._fields = fields
|
50
|
-
return this
|
51
|
-
}
|
52
|
-
|
53
|
-
getFields () {
|
54
|
-
return this._fields
|
55
|
-
}
|
56
|
-
|
57
|
-
initFromFilterSource (filterSource) {
|
58
|
-
this._filterSource = filterSource
|
59
|
-
return this
|
60
|
-
}
|
61
|
-
|
62
|
-
recreateFromHistory (historyKey) {
|
63
|
-
this._historyKey = historyKey
|
64
|
-
return this
|
65
|
-
}
|
66
|
-
|
67
|
-
clone () {
|
68
|
-
const request = new ListViewRequest()
|
69
|
-
request._api = this._api
|
70
|
-
request._resource = this._resource
|
71
|
-
request._action = this._action
|
72
|
-
request._params = this._params
|
73
|
-
request._filters = this._filters
|
74
|
-
request._fields = this._fields
|
75
|
-
return request
|
76
|
-
}
|
77
|
-
|
78
|
-
toApiRequest () {
|
79
|
-
const action = this.getAction({
|
80
|
-
api: this._api,
|
81
|
-
resource: this._resource,
|
82
|
-
action: this._action
|
83
|
-
})
|
84
|
-
|
85
|
-
const request = action.createRequest()
|
86
|
-
.params(this._params)
|
87
|
-
.fields(this._fields)
|
88
|
-
|
89
|
-
// filters set on the request will be skipped if filterSource or historyKey are given
|
90
|
-
// and produce results
|
91
|
-
let filtersToUse = this._filters
|
92
|
-
let useHistory = true
|
93
|
-
|
94
|
-
// create and init request filters based on the current filter source state
|
95
|
-
if (this._filterSource) {
|
96
|
-
const requestFilters = action.createRequestFilters(null, this._filterSource)
|
97
|
-
const requestFiltersToUse = requestFilters.serialize()
|
98
|
-
// do not use history if any filter given by the given filter source
|
99
|
-
if (Object.keys(requestFiltersToUse).length) {
|
100
|
-
useHistory = false
|
101
|
-
}
|
102
|
-
|
103
|
-
filtersToUse = {
|
104
|
-
...filtersToUse,
|
105
|
-
...requestFiltersToUse
|
106
|
-
}
|
107
|
-
}
|
108
|
-
|
109
|
-
// if any filters is set by current filter source
|
110
|
-
// skip history and give that filter precedence
|
111
|
-
// otherwise: set stored filters
|
112
|
-
if (useHistory && this._historyKey) {
|
113
|
-
// check any already stored filters from a previous request
|
114
|
-
const storedFilters = RequestFilters.fromHistory(this._historyKey)
|
115
|
-
if (storedFilters) {
|
116
|
-
filtersToUse = storedFilters.serialize()
|
117
|
-
}
|
118
|
-
}
|
119
|
-
|
120
|
-
request.filters(filtersToUse)
|
121
|
-
|
122
|
-
return request
|
123
|
-
}
|
124
|
-
}
|
@@ -1,18 +0,0 @@
|
|
1
|
-
import { BaseFilterSource } from '@afeefa/api-resources-client'
|
2
|
-
|
3
|
-
export class RouteQueryFilterSource extends BaseFilterSource {
|
4
|
-
route = null
|
5
|
-
|
6
|
-
constructor (route) {
|
7
|
-
super()
|
8
|
-
|
9
|
-
this.route = route
|
10
|
-
}
|
11
|
-
|
12
|
-
getQuery () {
|
13
|
-
return this.route.query
|
14
|
-
}
|
15
|
-
|
16
|
-
push (_query) {
|
17
|
-
}
|
18
|
-
}
|