fixes #2: dialogs to show errors

This commit is contained in:
Davide Alberani 2017-01-19 20:46:17 +01:00
parent a6a4deff70
commit 8ceaabf5b8
8 changed files with 95 additions and 35 deletions

View file

@ -11,12 +11,14 @@
</md-layout>
</md-layout>
</md-layout>
<ibt-dialog ref="dialogObj" />
</div>
</template>
<script>
import Datepicker from 'vuejs-datepicker';
import Group from './Group';
import IbtDialog from './IbtDialog.vue';
export default {
data() {
@ -97,7 +99,7 @@ export default {
this.daysUrl.query(params).then((response) => {
return response.json();
}, (response) => {
alert('getSummary: failed to get resource');
this.$refs.dialogObj.show({text: 'unable to get the monthly summary'});
}).then((json) => {
this.daysSummary = json;
});
@ -118,9 +120,9 @@ export default {
this.daysUrl.get({day: day}).then((response) => {
return response.json();
}, (response) => {
alert('getDay: failed to get resource');
this.$refs.dialogObj.show({text: 'unable to get information about this day'});
}).then((dayData) => {
if (!dayData.day) {
if (!(dayData && dayData.day)) {
dayData.day = day;
}
this.day = dayData;
@ -129,7 +131,7 @@ export default {
},
components: {
Datepicker, Group
Datepicker, Group, IbtDialog
}
}
</script>

View file

@ -1,5 +1,5 @@
<template>
<md-list-item :key="attendee._id">
<md-list-item class="attendee-list-item" :key="attendee._id">
<md-icon>person</md-icon>
<span v-if="!edit">{{attendee.name}}</span>
<md-input-container md-inline v-if="edit">
@ -21,10 +21,13 @@
</md-menu-item>
</md-menu-content>
</md-menu>
<ibt-dialog ref="dialogObj" />
</md-list-item>
</template>
<script>
import IbtDialog from './IbtDialog.vue';
export default {
props: {attendee: {default: {}}},
@ -62,7 +65,7 @@ export default {
this.attendeesUrl.update({id: this.attendee._id}, this.attendee).then((response) => {
return response.json();
}, (response) => {
alert('updateAttendee: failed to update resource');
this.$refs.dialogObj.show({text: 'unable to update the attendee'});
}).then((json) => {
this.edit = false;
this.$emit('updated');
@ -73,19 +76,23 @@ export default {
this.attendeesUrl.delete({id: this.attendee._id}).then((response) => {
return response.json();
}, (response) => {
alert('deleteAttendee: failed to delete resource');
this.$refs.dialogObj.show({text: 'unable to delete the attendee'});
}).then((json) => {
this.$emit('updated');
});
}
}
},
components: {IbtDialog}
};
</script>
<style>
.md-list-item .md-list-item-holder>.md-icon:first-child {
margin-right: 16px;
}
.attendee-list-item {
min-width: 250px;
}
</style>

View file

@ -41,11 +41,13 @@
</md-list>
</md-card-content>
</md-card>
<ibt-dialog ref="dialogObj" />
</md-layout>
</template>
<script>
import Attendee from './Attendee';
import IbtDialog from './IbtDialog.vue';
export default {
props: {group: {}, day: {}, addNewGroup: {default: false}},
@ -87,7 +89,7 @@ export default {
this.attendeesUrl.save({day: this.day, group: group, name: newAttendee}).then((response) => {
return response.json();
}, (response) => {
alert('addAttendee: failed to get resource');
this.$refs.dialogObj.show({text: 'unable to add the attendee'});
}).then((json) => {
this.reset();
this.$emit('updated');
@ -95,7 +97,7 @@ export default {
}
},
components: { Attendee }
components: { Attendee, IbtDialog }
};
</script>
@ -127,7 +129,7 @@ export default {
}
.new-group {
width: 260px;
min-width: 250px;
}
.new-group-header i:after {

22
src/IbtDialog.vue Normal file
View file

@ -0,0 +1,22 @@
<template>
<md-dialog-alert :md-content="dialog.text" :md-ok-text="dialog.ok" ref="ibtDialogObj" />
</template>
<script>
export default {
props: {dialog: {default: function(){return {text: 'snap! some error has occurred', ok: 'ok'}}}},
methods: {
show(opts) {
if (!opts) {
opts = {};
}
this.dialog.text = opts.text || this.dialog.text;
this.dialog.ok = opts.ok || this.dialog.ok;
this.$refs.ibtDialogObj.open();
}
}
}
</script>
<style>
</style>

View file

@ -28,11 +28,7 @@
</md-button>
</span>
<span v-else>
<md-button v-show="!showLoginForm" class="md-icon-button" @click="focusToLoginForm()">
<md-tooltip md-direction="left">login or create a new user</md-tooltip>
<md-icon>power_settings_new</md-icon>
</md-button>
<span v-show="showLoginForm" id="login-form">
<span id="login-form">
<md-input-container id="username-input" class="login-input" md-inline>
<md-tooltip md-direction="bottom">login name or create a new user if it doesn't exist</md-tooltip>
<md-input ref="usernameInput" @keyup.enter.native="focusToPassword()" v-model="username" placeholder="username" md-inline />
@ -49,16 +45,27 @@
</span>
</span>
</span>
<md-snackbar md-position="top center" ref="snackbar">
<span>{{ snackbackMessage }}</span>
<md-button @click="$refs.snackbar.close()" class="snackbar-close">[x]</md-button>
</md-snackbar>
<ibt-dialog ref="dialogObj" />
</md-toolbar>
</template>
<script>
import IbtDialog from './IbtDialog.vue';
export default {
data () {
return {
username: '',
password: '',
showLoginForm: false
snackbackMessage: '',
dialog: {
text: 'some error',
ok: 'ok'
}
}
},
@ -105,7 +112,6 @@ export default {
},
focusToLoginForm() {
this.showLoginForm = true;
var that = this;
setTimeout(function() { that.$refs.usernameInput.$el.focus(); }, 400);
},
@ -123,13 +129,12 @@ export default {
// Unable to login? Let's try to create the user!
if (response.status == 401) {
if (opt.stopHere) {
alert('login: failed to get resource');
this.$refs.dialogObj.show({text: 'failed to login and create a new user. Wrong username and password?'});
} else {
this.createUser(user_data);
}
}
}).then((data) => {
this.showLoginForm = false;
this.getUserInfo();
});
},
@ -138,9 +143,10 @@ export default {
this.logoutUrl.get().then((response) => {
return response.json();
}, (response) => {
alert('logout: failed to get resource');
this.$refs.dialogObj.show({text: 'failed to logout'});
}).then((json) => {
this.$store.commit('clearLoggedInUser');
this.showMessage('logged out');
});
},
@ -161,7 +167,7 @@ export default {
this.currentUserUrl.get().then((response) => {
return response.json();
}, (response) => {
alert('getUserInfo: failed to get resource');
this.$refs.dialogObj.show({text: 'unable to get user info'});
}).then((data) => {
data = data || {};
this.$store.commit('setLoggedInUser', data);
@ -169,8 +175,15 @@ export default {
callback(data);
}
});
},
showMessage(message) {
this.snackbackMessage = message;
this.$refs.snackbar.open();
}
}
},
components: { IbtDialog }
}
</script>
<style>
@ -239,4 +252,9 @@ export default {
color: white !important;
}
.snackbar-close {
font-weight: bold;
color: #f6f72f;
}
</style>

View file

@ -19,10 +19,13 @@
<md-button class="md-raised md-primary" @click="save()">Save</md-button>
</md-card-content>
</md-card>
<ibt-dialog ref="dialogObj" />
</div>
</template>
<script>
import IbtDialog from './IbtDialog.vue';
export default {
data () {
return {
@ -50,22 +53,25 @@ export default {
this.usersUrl.get({id: id}).then((response) => {
return response.json();
}, (response) => {
alert('getUsers: unable to get resource');
this.$refs.dialogObj.show({text: 'unable to get user'});
}).then((data) => {
this.user = data || {};
});
},
save() {
var user_data = {password: this.password, email: this.user.email};
this.usersUrl.update({id: this.user._id}, user_data).then((response) => {
return response.json();
}, (response) => {
alert('save: unable to get resource');
this.$refs.dialogObj.show({text: 'unable to save user settings'});
}).then((data) => {
this.user = data;
});
}
}
},
components: { IbtDialog }
}
</script>

View file

@ -27,10 +27,13 @@
</md-table>
</md-card-content>
</md-card>
<ibt-dialog ref="dialogObj" />
</div>
</template>
<script>
import IbtDialog from './IbtDialog.vue';
export default {
data () {
return {
@ -61,7 +64,7 @@ export default {
this.usersUrl.get().then((response) => {
return response.json();
}, (response) => {
alert('getUsers: unable to get resource');
this.$refs.dialogObj.show({text: 'unable to get the list of users'});
}).then((data) => {
this.users = data.users || [];
});
@ -71,11 +74,13 @@ export default {
this.usersUrl.update({id: userId}).then((response) => {
return response.json();
}, (response) => {
alert('deleteUser: unable to get resource');
this.$refs.dialogObj.show({text: 'unable to delete the user'});
}).then((data) => {
});
}
}
},
components: { IbtDialog }
}
</script>

View file

@ -41,11 +41,9 @@ class Ibt2Tests(unittest.TestCase):
self.db['users'].remove({'username': 'newuser2'})
def tearDown(self):
return
self.add_attendee({'day': '2017-01-15', 'name': 'A name', 'group': 'group A'})
self.add_attendee({'day': '2017-01-16', 'name': 'A new name', 'group': 'group C'})
self.add_attendee({'day': '2017-01-15', 'name': 'Another name', 'group': 'group A'})
self.add_attendee({'day': '2017-01-15', 'name': 'Yet another name', 'group': 'group B'})
self.db['attendees'].drop()
self.db['users'].remove({'username': 'newuser'})
self.db['users'].remove({'username': 'newuser2'})
def add_attendee(self, attendee):
r = requests.post('%sattendees' % BASE_URL, json=attendee)