55 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			55 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template lang="pug">
 | |
|   .modal(v-if='isShown')
 | |
|     .modal-background
 | |
|     .modal-container
 | |
|       .modal-content
 | |
|         header.is-light-blue Create New Document
 | |
|         section
 | |
|           label.label Enter the new document path:
 | |
|           p.control.is-fullwidth(v-class='{ "is-loading": isLoading }')
 | |
|             input.input(type='text', placeholder='page-name', v-model='entrypath', autofocus)
 | |
|             span.help.is-danger(v-show='isInvalid') This document path is invalid!
 | |
|         footer
 | |
|           a.button.is-grey.is-outlined(v-on:click='hide') Discard
 | |
|           a.button.is-light-blue(v-on:click='create') Create
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
|   import * as _ from 'lodash'
 | |
|   import { makeSafePath } from '../helpers/pages'
 | |
| 
 | |
|   export default {
 | |
|     name: 'modal-create',
 | |
|     data () {
 | |
|       return {
 | |
|         entrypath: ''
 | |
|         isInvalid: false,
 | |
|         isLoading: false,
 | |
|         isShown: false
 | |
|       }
 | |
|     },
 | |
|     methods: {
 | |
|       show: function () {
 | |
|         this.isInvalid = false
 | |
|         this.shown = true
 | |
|       },
 | |
|       hide: function () {
 | |
|         this.shown = false
 | |
|       },
 | |
|       create: function () {
 | |
|         this.isInvalid = false
 | |
|         let newDocPath = makeSafePath(this.entrypath)
 | |
|         if (_.isEmpty(newDocPath)) {
 | |
|           this.isInvalid = true
 | |
|         } else {
 | |
|           $('#txt-create-prompt').parent().addClass('is-loading')
 | |
|           window.location.assign('/create/' + newDocPath)
 | |
|         }
 | |
|       }
 | |
|     },
 | |
|     mounted () {
 | |
|       this.entrypath = currentBasePath + '/new-page'
 | |
|     }
 | |
|   }
 | |
| </script>
 |