Browse Source

Make coreid SPA

master
Garrett Mills 1 year ago
parent
commit
f45e92af1e
Signed by: garrettmills GPG Key ID: D2BF5FBA8298F246
  1. 4
      app/assets/app/dash-components.js
  2. 23
      app/assets/app/dash/NavBar.component.js
  3. 45
      app/assets/app/dash/Outlet.component.js
  4. 32
      app/assets/app/dash/RootPage.component.js
  5. 4
      app/assets/app/dash/SideBar.component.js
  6. 2
      app/assets/app/dash/profile/EditProfile.component.js
  7. 4
      app/assets/app/resource/App.resource.js
  8. 35
      app/assets/app/service/Action.service.js
  9. 3
      app/views/cobalt/form.pug
  10. 2
      app/views/cobalt/listing.pug
  11. 2
      app/views/dash/app_setup.pug
  12. 4
      app/views/dash/profile/main.pug

4
app/assets/app/dash-components.js

@ -8,6 +8,8 @@ import AppSetupComponent from './dash/AppSetup.component.js'
import ListingComponent from './cobalt/Listing.component.js'
import FormComponent from './cobalt/Form.component.js'
import RootPageComponent from './dash/RootPage.component.js'
import OutletComponent from './dash/Outlet.component.js'
import { T } from './service/Translate.service.js'
@ -22,6 +24,8 @@ const dash_components = {
ListingComponent,
FormComponent,
RootPageComponent,
OutletComponent,
}
export { dash_components }

23
app/assets/app/dash/NavBar.component.js

@ -1,6 +1,7 @@
import { Component } from '../../lib/vues6/vues6.js'
import { event_bus } from '../service/EventBus.service.js'
import { session } from '../service/Session.service.js'
import { action_service } from '../service/Action.service.js'
const template = `
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
@ -35,9 +36,9 @@ const template = `
aria-labelledby="navbarDropdown"
>
<h6 class="dropdown-header">Hello, {{ first_name }}.</h6>
<a href="/dash/profile" class="dropdown-item">My Profile</a>
<a href="/dash/c/listing/reflect/Token" v-if="can.api_tokens" class="dropdown-item">API Tokens</a>
<a href="/dash/c/listing/system/Announcement" v-if="can.messages" class="dropdown-item">System Announcements</a>
<a href="/dash/profile" class="dropdown-item" @click="navigate('dash.profile')" onclick="return false;">My Profile</a>
<a href="/dash/c/listing/reflect/Token" v-if="can.api_tokens" @click="cobalt('reflect/Token', 'list')" class="dropdown-item" onclick="return false;">API Tokens</a>
<a href="/dash/c/listing/system/Announcement" v-if="can.messages" @click="cobalt('system/Announcement', 'list')" class="dropdown-item" onclick="return false;">System Announcements</a>
<div class="dropdown-divider"></div>
<a href="/auth/logout" class="dropdown-item">Sign-Out of {{ app_name }}</a>
</div>
@ -71,4 +72,20 @@ export default class NavBarComponent extends Component {
toggle_sidebar() {
this.toggle_event.fire()
}
navigate(page) {
action_service.perform({
action: 'navigate',
page,
})
}
cobalt(resource, action, id = undefined) {
action_service.perform({
type: 'resource',
resource,
action,
id,
})
}
}

45
app/assets/app/dash/Outlet.component.js

@ -0,0 +1,45 @@
import { Component } from '../../lib/vues6/vues6.js'
import { event_bus } from '../service/EventBus.service.js'
const template = `
<coreid-root :page="page" :form_id="form_id" :resource="resource" :mode="mode" v-if="show"></coreid-root>
`
export default class OutletPageComponent extends Component {
static get selector() { return 'coreid-outlet' }
static get template() { return template }
static get props() { return ['initial_page', 'initial_form_id', 'initial_resource', 'initial_mode'] }
constructor() {
super()
this.navigate_event = event_bus.event('root.navigate')
this.show = true
console.log('navigate event', this.navigate_event)
}
async vue_on_create() {
this.page = this.initial_page
this.form_id = this.initial_form_id
this.resource = this.initial_resource
this.mode = this.initial_mode
this.navigate_event.subscribe((props = {}) => {
console.log('navigation event', props)
this.page = props.page
this.form_id = props.form_id
this.resource = props.resource
this.mode = props.mode
this.rerender()
})
this.$forceUpdate()
}
rerender() {
this.show = false
this.$forceUpdate()
requestAnimationFrame(() => {
this.show = true
this.$forceUpdate()
})
}
}

32
app/assets/app/dash/RootPage.component.js

@ -0,0 +1,32 @@
import { Component } from '../../lib/vues6/vues6.js'
const template = `
<span>
<coreid-profile-edit v-if="page === 'dash.profile'"></coreid-profile-edit>
<coreid-app-setup v-if="page === 'app.setup'"></coreid-app-setup>
<cobalt-form
v-if="page === 'cobalt.form' && form_id"
:resource="resource"
:form_id="form_id"
:initial_mode="mode"
></cobalt-form>
<cobalt-form
v-if="page === 'cobalt.form' && !form_id"
:resource="resource"
:initial_mode="mode"
></cobalt-form>
<cobalt-listing
v-if="page === 'cobalt.listing'"
:resource="resource"
></cobalt-listing>
</span>
`
export default class RootPageComponent extends Component {
static get selector() { return 'coreid-root' }
static get template() { return template }
static get props() { return ['page', 'form_id', 'resource', 'mode'] }
constructor() {
super()
}
}

4
app/assets/app/dash/SideBar.component.js

@ -33,8 +33,8 @@ export default class SideBarComponent extends Component {
this.possible_actions = [
{
text: 'Profile',
action: 'redirect',
next: '/dash/profile',
action: 'navigate',
page: 'dash.profile',
},
{
text: 'Users',

2
app/assets/app/dash/profile/EditProfile.component.js

@ -8,7 +8,7 @@ import { utility } from '../../service/Utility.service.js'
import { profile_service } from '../../service/Profile.service.js'
const template = `
<div class="coreid-profile-container mb-5">
<div class="coreid-profile-container mb-5 offset-0 col-md-8 offset-md-2 col-xl-6 offset-xl-3">
<div class="card">
<div class="card-body">
<div class="row">

4
app/assets/app/resource/App.resource.js

@ -40,10 +40,10 @@ class AppResource extends CRUDBase {
},
{
position: 'main',
action: 'redirect',
action: 'navigate',
text: 'Setup Wizard',
color: 'success',
next: '/dash/app/setup',
page: 'app.setup',
},
{
type: 'resource',

35
app/assets/app/service/Action.service.js

@ -1,5 +1,11 @@
import { location_service } from './Location.service.js'
import { resource_service } from './Resource.service.js'
import { event_bus } from './EventBus.service.js'
const pageMap = {
'dash.profile': '/dash/profile',
'app.setup': '/dash/app/setup',
}
class ActionService {
async perform({ text = '', action, ...args }) {
@ -7,21 +13,44 @@ class ActionService {
if ( args.next ) {
return location_service.redirect(args.next, args.delay || 0)
}
} else if ( action === 'navigate' ) {
if ( args.page && pageMap[args.page] ) {
window.history.pushState('pageNavigate', `Open ${args.page}`, pageMap[args.page])
return event_bus.event('root.navigate').fire(args)
}
} else if ( action === 'back' ) {
return location_service.back()
} else if ( args.type === 'resource' ) {
const { resource } = args
if ( action === 'insert' ) {
return location_service.redirect(`/dash/c/form/${resource}`, 0)
window.history.pushState('cobaltForm', `Insert ${resource}`, `/dash/c/form/${resource}`)
return event_bus.event('root.navigate').fire({
page: 'cobalt.form',
resource,
mode: 'insert',
})
} else if ( action === 'update' ) {
const { id } = args
return location_service.redirect(`/dash/c/form/${resource}?id=${id}`, 0)
window.history.pushState('cobaltForm', `Edit ${resource}`, `/dash/c/form/${resource}?id=${id}`)
return event_bus.event('root.navigate').fire({
page: 'cobalt.form',
resource,
mode: 'update',
form_id: id,
})
} else if ( action === 'delete' ) {
const { id } = args
const rsc = await resource_service.get(resource)
await rsc.delete(id)
} else if ( action === 'list' ) {
return location_service.redirect(`/dash/c/listing/${resource}`, 0)
window.history.pushState('cobaltListing', `View ${resource}`, `/dash/c/listing/${resource}`)
return event_bus.event('root.navigate').fire({
page: 'cobalt.listing',
resource,
})
}
} else if ( action === 'post' ) {
const inputs = []

3
app/views/cobalt/form.pug

@ -4,5 +4,4 @@ block content
.cobalt-container
.row.pad-top
.col-12
cobalt-form(v-if="form_id" :resource="resource" :form_id="form_id" :initial_mode="mode")
cobalt-form(v-if="!form_id" :resource="resource" :initial_mode="mode")
coreid-outlet(initial_page="cobalt.form" :initial_resource="resource" :initial_form_id="form_id" :initial_mode="mode")

2
app/views/cobalt/listing.pug

@ -4,4 +4,4 @@ block content
.cobalt-container
.row.pad-top
.col-12
cobalt-listing(:resource="resource")
coreid-outlet(initial_page="cobalt.listing" :initial_resource="resource")

2
app/views/dash/app_setup.pug

@ -4,4 +4,4 @@ block content
.cobalt-container
.row.pad-top
.col-12
coreid-app-setup
coreid-outlet(initial_page="app.setup")

4
app/views/dash/profile/main.pug

@ -3,5 +3,5 @@ extends ../../theme/dash/base
block content
.profile-container
.row.pad-top
.col-12.offset-0.col-md-8.offset-md-2.col-xl-6.offset-xl-3
coreid-profile-edit
.col-12
coreid-outlet(initial_page="dash.profile")

Loading…
Cancel
Save