import { Module } from 'vuex' ; import store , { RootState } from '@/store' ; import { showSystemMessage } from '@/common/util' ; import { MessageModalOptions } from './types' ; interface ModalsState { nodeModalMount : Element ; nodeModalVisible : boolean ; newDiagramModalVisible : boolean ; saveAsDiagramModalVisible : boolean ; loadDiagramModalVisible : boolean ; loginModalVisible : boolean ; signupModalVisible : boolean ; profileModalVisible : boolean ; passwordModalVisible : boolean ; messageModalVisible : boolean ; messageModalOptions : MessageModalOptions ; inProgress : boolean ; progressMessage : string ; progressPercentage : number ; } const initialState = { nodeModalMount : document . createElement ( 'div' ) , nodeModalVisible : false , newDiagramModalVisible : false , saveAsDiagramModalVisible : false , loadDiagramModalVisible : false , loginModalVisible : false , signupModalVisible : false , profileModalVisible : false , passwordModalVisible : false , messageModalVisible : false , messageModalOptions : { title : '' , message : '' } , inProgress : false , progressMessage : '' , progressPercentage : 0 } ; const mutations = { setNodeModalMount ( state , mount ) { state . nodeModalMount = mount ; } , mountNodeModal ( state , modal ) { if ( ! modal ) { console . error ( 'attempted to mount undefined node modal' ) ; return ; } state . nodeModalMount . appendChild ( modal ) ; } , unmountNodeModal ( state , modal ) { if ( modal . parentElement !== state . nodeModalMount ) { console . error ( 'attempt to mount an unmounted node modal' ) ; return ; } state . nodeModalMount . appendChild ( modal ) ; } , openNodeModal ( state ) { state . nodeModalVisible = true ; } , closeNodeModal ( state ) { state . nodeModalVisible = false ; } , openNewDiagramModal ( state ) { state . newDiagramModalVisible = true ; } , closeNewDiagramModal ( state ) { state . newDiagramModalVisible = false ; } , openSaveAsDiagramModal ( state ) { if ( ! store . state . user . username ) { showSystemMessage ( store , 'you must login to save diagram' , 'warn' ) ; return ; } state . saveAsDiagramModalVisible = true ; } , closeSaveAsDiagramModal ( state ) { state . saveAsDiagramModalVisible = false ; } , openLoadDiagramModal ( state ) { state . loadDiagramModalVisible = true ; } , closeLoadDiagramModal ( state ) { state . loadDiagramModalVisible = false ; } , openLoginModal ( state ) { state . loginModalVisible = true ; } , closeLoginModal ( state ) { state . loginModalVisible = false ; } , openSignupModal ( state ) { state . signupModalVisible = true ; } , closeSignupModal ( state ) { state . signupModalVisible = false ; } , openProfileModal ( state ) { state . profileModalVisible = true ; } , closeProfileModal ( state ) { state . profileModalVisible = false ; } , openMessageModal ( state , options ) { state . messageModalVisible = true ; state . messageModalOptions = options ; } , closeMessageModal ( state ) { state . messageModalVisible = false ; } , openPasswordModal ( state ) { state . passwordModalVisible = true ; } , closePasswordModal ( state ) { state . passwordModalVisible = false ; } , startProgress ( state , message ? ) { state . inProgress = true ; state . progressMessage = message || '' ; } , endProgress ( state ) { state . inProgress = false ; } , setProgressPercentage ( state , percentage ) { state . progressPercentage = percentage ; } } ; const modals = { namespaced : true , state : initialState , mutations } ; export default modals ;