diff --git a/pages/devices/new.vue b/pages/devices/new.vue index b2ddf00b2da7403f6552716bbedc4a4729b4c707..863e0661755fa5079a0c364995360c6d582ec575 100644 --- a/pages/devices/new.vue +++ b/pages/devices/new.vue @@ -29,19 +29,34 @@ implied. See the Licence for the specific language governing permissions and limitations under the Licence. --> <template> - <div> - <v-card - outlined - > - <v-tabs-items - v-model="activeTab" + <v-card + flat + > + <v-card-actions> + <v-spacer /> + <v-btn + v-if="isLoggedIn" + small + text + nuxt + to="/search/devices" > - <v-tab-item :eager="true"> - <DeviceBasicDataForm v-model="device" /> - </v-tab-item> - </v-tabs-items> - </v-card> - </div> + cancel + </v-btn> + <v-btn + v-if="isLoggedIn" + color="green" + small + @click="onSaveButtonClicked" + > + create + </v-btn> + </v-card-actions> + <DeviceBasicDataForm + ref="basicForm" + v-model="device" + /> + </v-card> </template> <style lang="scss"> @@ -55,10 +70,6 @@ import { Rules } from '@/mixins/Rules' import { Device } from '@/models/Device' -import AttachmentList from '@/components/AttachmentList.vue' -import ContactSelect from '@/components/ContactSelect.vue' -import CustomFieldCards from '@/components/CustomFieldCards.vue' -import DevicePropertyExpansionPanels from '@/components/DevicePropertyExpansionPanels.vue' import DeviceBasicDataForm from '@/components/DeviceBasicDataForm.vue' @Component({ @@ -72,57 +83,23 @@ export default class DeviceNewPage extends mixins(Rules) { private device: Device = new Device() - created () { - this.initializeAppBar() - this.registerButtonActions() - } - mounted () { - this.$store.commit('appbar/setTitle', 'Add Device') + this.initializeAppBar() } beforeDestroy () { - this.unregisterButtonActions() this.$store.dispatch('appbar/setDefaults') } - registerButtonActions () { - this.$nuxt.$on('AppBarEditModeContent:save-btn-click', () => { - this.save() - }) - this.$nuxt.$on('AppBarEditModeContent:cancel-btn-click', () => { - this.cancel() - }) - } - - unregisterButtonActions () { - this.$nuxt.$off('AppBarEditModeContent:save-btn-click') - this.$nuxt.$off('AppBarEditModeContent:cancel-btn-click') - } - - initializeAppBar () { - this.$store.dispatch('appbar/init', { - tabs: [ - 'Basic Data' - ], - title: 'Add Device', - saveBtnHidden: false, - cancelBtnHidden: false - }) - } - - get activeTab (): number | null { - return this.$store.state.appbar.activeTab - } - - set activeTab (tab: number | null) { - this.$store.commit('appbar/setActiveTab', tab) - } - - save (): void { + onSaveButtonClicked (): void { + if (!(this.$refs.basicForm as Vue & { validateForm: () => boolean }).validateForm()) { + this.$store.commit('snackbar/setError', 'Please correct your input') + return + } this.$api.devices.save(this.device).then((savedDevice) => { if (this.isLoggedIn) { - this.$router.push('/devices/show/' + savedDevice.id + '') + this.$store.commit('snackbar/setSuccess', 'Device created') + this.$router.push('/devices/' + savedDevice.id + '') } else { throw new Error('You need to be logged in to save the device') } @@ -131,8 +108,20 @@ export default class DeviceNewPage extends mixins(Rules) { }) } - cancel () { - this.$router.push('/search/devices') + initializeAppBar () { + this.$store.dispatch('appbar/init', { + tabs: [ + { + to: '/devices/new', + name: 'Basic Data' + }, + { + name: 'Contacts', + disabled: true + } + ], + title: 'Add Device' + }) } get isLoggedIn () {