Merge pull request #15281 from Budibase/builder-store-conversions-pc
Flags / Layout / Preview stores to TS
This commit is contained in:
commit
5ecc145228
|
@ -1,27 +0,0 @@
|
||||||
import { writable } from "svelte/store"
|
|
||||||
import { API } from "@/api"
|
|
||||||
|
|
||||||
export function createFlagsStore() {
|
|
||||||
const { subscribe, set } = writable({})
|
|
||||||
|
|
||||||
const actions = {
|
|
||||||
fetch: async () => {
|
|
||||||
const flags = await API.getFlags()
|
|
||||||
set(flags)
|
|
||||||
},
|
|
||||||
updateFlag: async (flag, value) => {
|
|
||||||
await API.updateFlag(flag, value)
|
|
||||||
await actions.fetch()
|
|
||||||
},
|
|
||||||
toggleUiFeature: async feature => {
|
|
||||||
await API.toggleUiFeature(feature)
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
subscribe,
|
|
||||||
...actions,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const flags = createFlagsStore()
|
|
|
@ -0,0 +1,40 @@
|
||||||
|
import { API } from "@/api"
|
||||||
|
import { GetUserFlagsResponse } from "@budibase/types"
|
||||||
|
import { BudiStore } from "../BudiStore"
|
||||||
|
|
||||||
|
interface FlagsState {
|
||||||
|
flags: GetUserFlagsResponse
|
||||||
|
}
|
||||||
|
|
||||||
|
const INITIAL_FLAGS_STATE: FlagsState = {
|
||||||
|
flags: {},
|
||||||
|
}
|
||||||
|
|
||||||
|
export class FlagsStore extends BudiStore<FlagsState> {
|
||||||
|
constructor() {
|
||||||
|
super(INITIAL_FLAGS_STATE)
|
||||||
|
|
||||||
|
this.fetch = this.fetch.bind(this)
|
||||||
|
this.updateFlag = this.updateFlag.bind(this)
|
||||||
|
this.toggleUiFeature = this.toggleUiFeature.bind(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
async fetch() {
|
||||||
|
const flags = await API.getFlags()
|
||||||
|
this.update(state => ({
|
||||||
|
...state,
|
||||||
|
flags,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
async updateFlag(flag: string, value: any) {
|
||||||
|
await API.updateFlag(flag, value)
|
||||||
|
await this.fetch()
|
||||||
|
}
|
||||||
|
|
||||||
|
async toggleUiFeature(feature: string) {
|
||||||
|
await API.toggleUiFeature(feature)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const flags = new FlagsStore()
|
|
@ -2,13 +2,19 @@ import { derived, get } from "svelte/store"
|
||||||
import { componentStore } from "@/stores/builder"
|
import { componentStore } from "@/stores/builder"
|
||||||
import { API } from "@/api"
|
import { API } from "@/api"
|
||||||
import { BudiStore } from "../BudiStore"
|
import { BudiStore } from "../BudiStore"
|
||||||
|
import { Layout } from "@budibase/types"
|
||||||
|
|
||||||
export const INITIAL_LAYOUT_STATE = {
|
interface LayoutState {
|
||||||
|
layouts: Layout[]
|
||||||
|
selectedLayoutId: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export const INITIAL_LAYOUT_STATE: LayoutState = {
|
||||||
layouts: [],
|
layouts: [],
|
||||||
selectedLayoutId: null,
|
selectedLayoutId: null,
|
||||||
}
|
}
|
||||||
|
|
||||||
export class LayoutStore extends BudiStore {
|
export class LayoutStore extends BudiStore<LayoutState> {
|
||||||
constructor() {
|
constructor() {
|
||||||
super(INITIAL_LAYOUT_STATE)
|
super(INITIAL_LAYOUT_STATE)
|
||||||
|
|
||||||
|
@ -22,14 +28,14 @@ export class LayoutStore extends BudiStore {
|
||||||
this.store.set({ ...INITIAL_LAYOUT_STATE })
|
this.store.set({ ...INITIAL_LAYOUT_STATE })
|
||||||
}
|
}
|
||||||
|
|
||||||
syncAppLayouts(pkg) {
|
syncAppLayouts(pkg: { layouts: Layout[] }) {
|
||||||
this.update(state => ({
|
this.update(state => ({
|
||||||
...state,
|
...state,
|
||||||
layouts: [...pkg.layouts],
|
layouts: [...pkg.layouts],
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
|
|
||||||
select(layoutId) {
|
select(layoutId: string) {
|
||||||
// Check this layout exists
|
// Check this layout exists
|
||||||
const state = get(this.store)
|
const state = get(this.store)
|
||||||
const componentState = get(componentStore)
|
const componentState = get(componentStore)
|
||||||
|
@ -48,15 +54,15 @@ export class LayoutStore extends BudiStore {
|
||||||
|
|
||||||
// Select new layout
|
// Select new layout
|
||||||
this.update(state => {
|
this.update(state => {
|
||||||
state.selectedLayoutId = layout._id
|
state.selectedLayoutId = layout._id!
|
||||||
return state
|
return state
|
||||||
})
|
})
|
||||||
|
|
||||||
componentStore.select(layout.props?._id)
|
componentStore.select(layout.props?._id)
|
||||||
}
|
}
|
||||||
|
|
||||||
async deleteLayout(layout) {
|
async deleteLayout(layout: Layout) {
|
||||||
if (!layout?._id) {
|
if (!layout?._id || !layout?._rev) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
await API.deleteLayout(layout._id, layout._rev)
|
await API.deleteLayout(layout._id, layout._rev)
|
|
@ -1,80 +0,0 @@
|
||||||
import { writable, get } from "svelte/store"
|
|
||||||
|
|
||||||
const INITIAL_PREVIEW_STATE = {
|
|
||||||
previewDevice: "desktop",
|
|
||||||
previewEventHandler: null,
|
|
||||||
showPreview: false,
|
|
||||||
selectedComponentContext: null,
|
|
||||||
}
|
|
||||||
|
|
||||||
export const createPreviewStore = () => {
|
|
||||||
const store = writable({
|
|
||||||
...INITIAL_PREVIEW_STATE,
|
|
||||||
})
|
|
||||||
|
|
||||||
const setDevice = device => {
|
|
||||||
store.update(state => {
|
|
||||||
state.previewDevice = device
|
|
||||||
return state
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// Potential evt names "eject-block", "dragging-new-component"
|
|
||||||
const sendEvent = (name, payload) => {
|
|
||||||
const { previewEventHandler } = get(store)
|
|
||||||
previewEventHandler?.(name, payload)
|
|
||||||
}
|
|
||||||
|
|
||||||
const registerEventHandler = handler => {
|
|
||||||
store.update(state => {
|
|
||||||
state.previewEventHandler = handler
|
|
||||||
return state
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const startDrag = component => {
|
|
||||||
sendEvent("dragging-new-component", {
|
|
||||||
dragging: true,
|
|
||||||
component,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const stopDrag = () => {
|
|
||||||
sendEvent("dragging-new-component", {
|
|
||||||
dragging: false,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
//load preview?
|
|
||||||
const showPreview = isVisible => {
|
|
||||||
store.update(state => {
|
|
||||||
state.showPreview = isVisible
|
|
||||||
return state
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const setSelectedComponentContext = context => {
|
|
||||||
store.update(state => {
|
|
||||||
state.selectedComponentContext = context
|
|
||||||
return state
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const requestComponentContext = () => {
|
|
||||||
sendEvent("request-context")
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
subscribe: store.subscribe,
|
|
||||||
setDevice,
|
|
||||||
sendEvent, //may not be required
|
|
||||||
registerEventHandler,
|
|
||||||
startDrag,
|
|
||||||
stopDrag,
|
|
||||||
showPreview,
|
|
||||||
setSelectedComponentContext,
|
|
||||||
requestComponentContext,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const previewStore = createPreviewStore()
|
|
|
@ -0,0 +1,90 @@
|
||||||
|
import { get } from "svelte/store"
|
||||||
|
import { BudiStore } from "../BudiStore"
|
||||||
|
|
||||||
|
type PreviewDevice = "desktop" | "tablet" | "mobile"
|
||||||
|
type PreviewEventHandler = (name: string, payload?: any) => void
|
||||||
|
type ComponentContext = Record<string, any>
|
||||||
|
|
||||||
|
interface PreviewState {
|
||||||
|
previewDevice: PreviewDevice
|
||||||
|
previewEventHandler: PreviewEventHandler | null
|
||||||
|
showPreview: boolean
|
||||||
|
selectedComponentContext: ComponentContext | null
|
||||||
|
}
|
||||||
|
|
||||||
|
const INITIAL_PREVIEW_STATE: PreviewState = {
|
||||||
|
previewDevice: "desktop",
|
||||||
|
previewEventHandler: null,
|
||||||
|
showPreview: false,
|
||||||
|
selectedComponentContext: null,
|
||||||
|
}
|
||||||
|
|
||||||
|
export class PreviewStore extends BudiStore<PreviewState> {
|
||||||
|
constructor() {
|
||||||
|
super(INITIAL_PREVIEW_STATE)
|
||||||
|
|
||||||
|
this.setDevice = this.setDevice.bind(this)
|
||||||
|
this.sendEvent = this.sendEvent.bind(this)
|
||||||
|
this.registerEventHandler = this.registerEventHandler.bind(this)
|
||||||
|
this.startDrag = this.startDrag.bind(this)
|
||||||
|
this.stopDrag = this.stopDrag.bind(this)
|
||||||
|
this.showPreview = this.showPreview.bind(this)
|
||||||
|
this.setSelectedComponentContext =
|
||||||
|
this.setSelectedComponentContext.bind(this)
|
||||||
|
this.requestComponentContext = this.requestComponentContext.bind(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
setDevice(device: PreviewDevice) {
|
||||||
|
this.update(state => ({
|
||||||
|
...state,
|
||||||
|
previewDevice: device,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
// Potential evt names "eject-block", "dragging-new-component"
|
||||||
|
sendEvent(name: string, payload?: any) {
|
||||||
|
const { previewEventHandler } = get(this.store)
|
||||||
|
previewEventHandler?.(name, payload)
|
||||||
|
}
|
||||||
|
|
||||||
|
registerEventHandler(handler: PreviewEventHandler) {
|
||||||
|
this.update(state => ({
|
||||||
|
...state,
|
||||||
|
previewEventHandler: handler,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
startDrag(component: any) {
|
||||||
|
this.sendEvent("dragging-new-component", {
|
||||||
|
dragging: true,
|
||||||
|
component,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
stopDrag() {
|
||||||
|
this.sendEvent("dragging-new-component", {
|
||||||
|
dragging: false,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//load preview?
|
||||||
|
showPreview(isVisible: boolean) {
|
||||||
|
this.update(state => ({
|
||||||
|
...state,
|
||||||
|
showPreview: isVisible,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
setSelectedComponentContext(context: ComponentContext) {
|
||||||
|
this.update(state => ({
|
||||||
|
...state,
|
||||||
|
selectedComponentContext: context,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
requestComponentContext() {
|
||||||
|
this.sendEvent("request-context")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const previewStore = new PreviewStore()
|
|
@ -1,3 +1,4 @@
|
||||||
export * from "./integration"
|
export * from "./integration"
|
||||||
export * from "./automations"
|
export * from "./automations"
|
||||||
export * from "./grid"
|
export * from "./grid"
|
||||||
|
export * from "./preview"
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
export type PreviewDevice = "desktop" | "tablet" | "mobile"
|
Loading…
Reference in New Issue