Add pages listing and load endpoing
This commit is contained in:
parent
680072fa83
commit
72c08964f9
@ -339,7 +339,7 @@ const serialize = () => {
|
||||
}
|
||||
|
||||
const editorPageId = ref<number|undefined>()
|
||||
const saveEditorPage = async () => {
|
||||
const saveEditorPage = async (close = false) => {
|
||||
const params = {
|
||||
serialData: JSON.stringify(serialize()),
|
||||
} as any
|
||||
@ -363,6 +363,9 @@ const saveEditorPage = async () => {
|
||||
}
|
||||
|
||||
editorPageId.value = result.data.pageId
|
||||
if ( close ) {
|
||||
await router.push('/Listings')
|
||||
}
|
||||
}
|
||||
|
||||
const loadEditorPage = async () => {
|
||||
@ -398,6 +401,14 @@ onMounted(() => {
|
||||
if ( props.pageId ) {
|
||||
editorPageId.value = props.pageId
|
||||
loadEditorPage()
|
||||
return
|
||||
}
|
||||
|
||||
const paramPageId = router.currentRoute.value.params.pageId
|
||||
if ( !Array.isArray(paramPageId) && !isNaN(parseInt(paramPageId, 10)) ) {
|
||||
editorPageId.value = parseInt(paramPageId, 10)
|
||||
loadEditorPage()
|
||||
return
|
||||
}
|
||||
})
|
||||
|
||||
@ -549,7 +560,11 @@ onMounted(() => {
|
||||
</q-dialog>
|
||||
|
||||
<q-page-sticky position="top-right" :offset="[18, 18]">
|
||||
<q-btn fab icon="save" color="primary" @click="() => saveEditorPage()"/>
|
||||
<q-btn fab icon="save" title="Save" color="primary" @click="() => saveEditorPage()"/>
|
||||
</q-page-sticky>
|
||||
|
||||
<q-page-sticky position="top-right" :offset="[18, 90]">
|
||||
<q-btn fab icon="close" title="Save and close" color="primary" @click="() => saveEditorPage(true)"/>
|
||||
</q-page-sticky>
|
||||
|
||||
<q-page-sticky position="bottom-right" :offset="[32, 32]">
|
||||
|
@ -0,0 +1,66 @@
|
||||
<script setup lang="ts">
|
||||
import {onMounted, ref} from 'vue'
|
||||
import router from '../router'
|
||||
|
||||
interface PageRecord {
|
||||
pageId: number|string,
|
||||
title: string,
|
||||
}
|
||||
|
||||
const pages = ref<PageRecord[]>([])
|
||||
const columns = ref([
|
||||
{
|
||||
name: 'title',
|
||||
field: 'title',
|
||||
label: 'Title',
|
||||
},
|
||||
])
|
||||
|
||||
const loadPages = async () => {
|
||||
const response = await fetch(`/api/editor/pages`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
})
|
||||
|
||||
const result = (await response.json()) as unknown as any
|
||||
if ( !result.success ) {
|
||||
alert('Unable to load pages: ' + result?.message)
|
||||
}
|
||||
|
||||
pages.value = result.data.records.map((row: any) => {
|
||||
return {
|
||||
pageId: row.pageId,
|
||||
title: JSON.parse(row.serialData).title || 'New Page',
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(loadPages)
|
||||
|
||||
const onRowClick = (_: unknown, row: PageRecord) => {
|
||||
router.push({ path: `/Editor/${row.pageId}` })
|
||||
}
|
||||
|
||||
const onNewPageClick = () => {
|
||||
router.push('/Editor')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="width: 100%">
|
||||
<q-btn icon="add" style="margin-bottom: 10px" @click="onNewPageClick">New Page</q-btn>
|
||||
<q-table
|
||||
style="width: 100%"
|
||||
title="My Pages"
|
||||
:columns="columns"
|
||||
:rows="pages"
|
||||
row-key="pageId"
|
||||
hide-bottom
|
||||
:pagination="{ rowsPerPage: 10000 }"
|
||||
@row-click="onRowClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
@ -17,6 +17,10 @@ const routes = [
|
||||
name: 'Editor',
|
||||
component: () => import(/* webpackChunkName: "Editor" */ './pages/Editor.vue'),
|
||||
},
|
||||
{
|
||||
path: '/editor/:pageId',
|
||||
component: () => import(/* webpackChunkName: "Editor" */ './pages/Editor.vue'),
|
||||
},
|
||||
{
|
||||
path: '/listings',
|
||||
name: 'Listings',
|
||||
|
Loading…
Reference in New Issue
Block a user