From 8ceaabf5b82a6b3ee42d1c50deb8c98fc2fc4b0d Mon Sep 17 00:00:00 2001
From: Davide Alberani <da@erlug.linux.it>
Date: Thu, 19 Jan 2017 20:46:17 +0100
Subject: [PATCH] fixes #2: dialogs to show errors

---
 src/App.vue         | 10 ++++++----
 src/Attendee.vue    | 17 ++++++++++++-----
 src/Group.vue       |  8 +++++---
 src/IbtDialog.vue   | 22 ++++++++++++++++++++++
 src/Toolbar.vue     | 42 ++++++++++++++++++++++++++++++------------
 src/User.vue        | 12 +++++++++---
 src/Users.vue       | 11 ++++++++---
 tests/ibt2_tests.py |  8 +++-----
 8 files changed, 95 insertions(+), 35 deletions(-)
 create mode 100644 src/IbtDialog.vue

diff --git a/src/App.vue b/src/App.vue
index 167a688..fbac8f2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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>
diff --git a/src/Attendee.vue b/src/Attendee.vue
index a218f99..9909d6b 100644
--- a/src/Attendee.vue
+++ b/src/Attendee.vue
@@ -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>
diff --git a/src/Group.vue b/src/Group.vue
index 507bd84..9432d73 100644
--- a/src/Group.vue
+++ b/src/Group.vue
@@ -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 {
diff --git a/src/IbtDialog.vue b/src/IbtDialog.vue
new file mode 100644
index 0000000..89ec3bd
--- /dev/null
+++ b/src/IbtDialog.vue
@@ -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>
diff --git a/src/Toolbar.vue b/src/Toolbar.vue
index 00ba98d..1e2f40f 100644
--- a/src/Toolbar.vue
+++ b/src/Toolbar.vue
@@ -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>
diff --git a/src/User.vue b/src/User.vue
index 4522cb3..15790a2 100644
--- a/src/User.vue
+++ b/src/User.vue
@@ -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>
 
diff --git a/src/Users.vue b/src/Users.vue
index b97afa5..56683f0 100644
--- a/src/Users.vue
+++ b/src/Users.vue
@@ -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>
 
diff --git a/tests/ibt2_tests.py b/tests/ibt2_tests.py
index e3af52d..d8b7a87 100755
--- a/tests/ibt2_tests.py
+++ b/tests/ibt2_tests.py
@@ -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)