@oxygen-cms/ui 1.8.0 → 1.8.1
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/package.json +1 -1
- package/src/PagesApi.js +1 -2
- package/src/components/PageActions.vue +94 -3
- package/src/components/PageTable.vue +1 -1
- package/src/components/ResourceList.vue +7 -7
- package/src/components/content/ContentEditor.vue +1 -0
- package/src/components/media/MediaChooseDirectory.vue +1 -1
package/package.json
CHANGED
package/src/PagesApi.js
CHANGED
|
@@ -25,8 +25,7 @@ export default class PagesApi extends CrudApi {
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
static slugToUrl(slug) {
|
|
28
|
-
|
|
29
|
-
return getApiHost() + slug;
|
|
28
|
+
return getApiHost() + slug.trimStart('/');
|
|
30
29
|
}
|
|
31
30
|
|
|
32
31
|
async list({ inTrash, page, q, path, sortField, sortOrder }) {
|
|
@@ -1,28 +1,119 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div>
|
|
2
|
+
<div class="page-actions">
|
|
3
3
|
<b-button v-if="item.stage !== STAGE_PUBLISHED" rounded size="is-small" icon-left="globe-asia" class="mr-2" @click="publish">Publish</b-button>
|
|
4
|
+
|
|
5
|
+
<b-dropdown
|
|
6
|
+
ref="moveDropdown"
|
|
7
|
+
position="is-top-left"
|
|
8
|
+
append-to-body
|
|
9
|
+
aria-role="menu"
|
|
10
|
+
trap-focus
|
|
11
|
+
class="move-page-dropdown"
|
|
12
|
+
>
|
|
13
|
+
<template #trigger>
|
|
14
|
+
<b-button rounded size="is-small" icon-left="folder-open" class="mr-2">Move</b-button>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<b-dropdown-item
|
|
18
|
+
aria-role="menu-item"
|
|
19
|
+
custom
|
|
20
|
+
paddingless>
|
|
21
|
+
<div class="modal-card" style="width: auto; overflow: visible">
|
|
22
|
+
<header class="modal-card-head">
|
|
23
|
+
<p class="modal-card-title">Parent page for "{{ item.title }}"</p>
|
|
24
|
+
</header>
|
|
25
|
+
<section class="modal-card-body" style="overflow: visible;">
|
|
26
|
+
<b-field>
|
|
27
|
+
<b-autocomplete
|
|
28
|
+
v-model.lazy="movePageSearchQuery"
|
|
29
|
+
:disabled="isLoading"
|
|
30
|
+
open-on-focus
|
|
31
|
+
:data="pagesList"
|
|
32
|
+
:custom-formatter="data => data.title + ' - ' + data.slug"
|
|
33
|
+
placeholder="Search for pages..."
|
|
34
|
+
clearable
|
|
35
|
+
@select="setParentPage">
|
|
36
|
+
<template #empty>No results found</template>
|
|
37
|
+
</b-autocomplete>
|
|
38
|
+
</b-field>
|
|
39
|
+
</section>
|
|
40
|
+
<footer class="modal-card-foot is-flex">
|
|
41
|
+
<div class="is-flex-grow-1"></div>
|
|
42
|
+
<b-button
|
|
43
|
+
label="Close"
|
|
44
|
+
@click="close"/>
|
|
45
|
+
</footer>
|
|
46
|
+
</div>
|
|
47
|
+
</b-dropdown-item>
|
|
48
|
+
</b-dropdown>
|
|
4
49
|
</div>
|
|
5
50
|
</template>
|
|
6
51
|
|
|
7
52
|
<script>
|
|
8
53
|
import PagesApi from "../PagesApi.js";
|
|
54
|
+
import {morphToNotification} from "../api.js";
|
|
9
55
|
|
|
10
56
|
export default {
|
|
11
57
|
name: "PageActions",
|
|
12
58
|
props: {
|
|
13
59
|
item: { type: Object, required: true }
|
|
14
60
|
},
|
|
61
|
+
created() {
|
|
62
|
+
this.isLoading = true;
|
|
63
|
+
this.fetchData()
|
|
64
|
+
},
|
|
15
65
|
data() {
|
|
16
66
|
return {
|
|
17
67
|
STAGE_PUBLISHED: PagesApi.STAGE_PUBLISHED,
|
|
18
|
-
pagesApi: new PagesApi()
|
|
68
|
+
pagesApi: new PagesApi(),
|
|
69
|
+
movePageSearchQuery: '',
|
|
70
|
+
isLoading: false,
|
|
71
|
+
pagesList: []
|
|
19
72
|
}
|
|
20
73
|
},
|
|
74
|
+
watch: {
|
|
75
|
+
'movePageSearchQuery': 'fetchData'
|
|
76
|
+
},
|
|
21
77
|
methods: {
|
|
78
|
+
async fetchData() {
|
|
79
|
+
let data = await this.pagesApi.list({ inTrash: false, page: 1, q: this.movePageSearchQuery });
|
|
80
|
+
this.pagesList = data.items;
|
|
81
|
+
this.pagesList.sort((a, b) => {
|
|
82
|
+
return a.title.localeCompare(b.title);
|
|
83
|
+
});
|
|
84
|
+
this.isLoading = false;
|
|
85
|
+
},
|
|
22
86
|
async publish() {
|
|
23
87
|
let item = await this.pagesApi.publish(this.item.id);
|
|
24
88
|
this.$emit('update', item);
|
|
89
|
+
},
|
|
90
|
+
async setParentPage(parentPage) {
|
|
91
|
+
let data = await this.pagesApi.update({id: this.item.id, parent: parentPage.id, autoConvertToDraft: 'no', version: false});
|
|
92
|
+
this.$buefy.toast.open(morphToNotification(data));
|
|
93
|
+
this.$emit('reload');
|
|
94
|
+
},
|
|
95
|
+
close() {
|
|
96
|
+
this.$refs.moveDropdown.toggle();
|
|
25
97
|
}
|
|
26
98
|
}
|
|
27
99
|
}
|
|
28
|
-
</script>
|
|
100
|
+
</script>
|
|
101
|
+
|
|
102
|
+
<style scoped>
|
|
103
|
+
.modal-card-title {
|
|
104
|
+
flex-shrink: unset;
|
|
105
|
+
flex-grow: unset;
|
|
106
|
+
}
|
|
107
|
+
</style>
|
|
108
|
+
|
|
109
|
+
<style>
|
|
110
|
+
.move-page-dropdown .dropdown-content {
|
|
111
|
+
padding-top: 0;
|
|
112
|
+
padding-bottom: 0;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.move-page-dropdown .dropdown-menu {
|
|
116
|
+
overflow: visible !important;
|
|
117
|
+
min-width: 20rem;
|
|
118
|
+
}
|
|
119
|
+
</style>
|
|
@@ -107,7 +107,7 @@ export default {
|
|
|
107
107
|
this.pagesByParent[0].loading = false;
|
|
108
108
|
},
|
|
109
109
|
rowHasChildren(row) {
|
|
110
|
-
return row.numChildren > 0;
|
|
110
|
+
return row.slug !== '/' && row.numChildren > 0;
|
|
111
111
|
},
|
|
112
112
|
async loadChildren(page) {
|
|
113
113
|
return await this.paginate(page, 1);
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
<component :is="tableComponent" :paginated-items="paginatedItems" :on-page-change="page => paginatedItems.currentPage = page" :detailed="!searchQuery" :on-sort="onSort">
|
|
20
20
|
<template #actions="slotProps">
|
|
21
21
|
<div class="buttons" style="min-width: 18rem">
|
|
22
|
-
<component :is="actionsComponent" :item="slotProps.row" @update="updateItem"></component>
|
|
22
|
+
<component :is="actionsComponent" :item="slotProps.row" @update="updateItem" @reload="fetchData"></component>
|
|
23
23
|
<b-button rounded icon-left="pencil-alt" tag="router-link" :to="'/' + routePrefix + '/' + slotProps.row.id" size="is-small">Edit</b-button>
|
|
24
24
|
<b-button
|
|
25
25
|
v-if="inTrash" rounded outlined icon-left="recycle"
|
|
@@ -69,12 +69,12 @@ export default {
|
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
watch: {
|
|
72
|
-
'resourceApi': '
|
|
73
|
-
'inTrash': '
|
|
74
|
-
'sortField': '
|
|
75
|
-
'sortOrder': '
|
|
72
|
+
'resourceApi': 'debouncedFetchData',
|
|
73
|
+
'inTrash': 'debouncedFetchData',
|
|
74
|
+
'sortField': 'debouncedFetchData',
|
|
75
|
+
'sortOrder': 'debouncedFetchData',
|
|
76
76
|
'searchQuery': 'debouncedFetchData',
|
|
77
|
-
'paginatedItems.currentPage': '
|
|
77
|
+
'paginatedItems.currentPage': 'debouncedFetchData'
|
|
78
78
|
},
|
|
79
79
|
created() {
|
|
80
80
|
this.fetchData()
|
|
@@ -82,7 +82,7 @@ export default {
|
|
|
82
82
|
methods: {
|
|
83
83
|
debouncedFetchData: debounce(async function() {
|
|
84
84
|
await this.fetchData()
|
|
85
|
-
},
|
|
85
|
+
}, 200),
|
|
86
86
|
async fetchData() {
|
|
87
87
|
if(this.paginatedItems.loading) {
|
|
88
88
|
return;
|