Fix http error close dialog (#65)

* Fix keeping dialog opened when an error occurs * Improve media title accessibility * Show an icon to upload a media instead of text * Add CHANGELOG for the front and the api
chriscamicas · Feb 8, 2019 · e445f1c · e445f1c
1 parent 104f8fa
commit e445f1c
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 83 deletions.
diff --git a/client/CHANGELOG.md b/client/CHANGELOG.md
@@ -0,0 +1,20 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+### Added
+- A changelog.
+- Improve media's title accessibility.
+- Show an icon instead of a text to upload a file as a media.
+
+### Changed
+- Fix [issue 64](https://github.com/chriscamicas/girr/issues/64) by keeping a dialog opened if an error has occured when saving a resource.
+
+## [1.0.0]
+### Added
+- Initial release using VueJS 2.
+
+[Unreleased]: https://github.com/chriscamicas/girr/compare/v1.0.0...HEAD
diff --git a/client/package.json b/client/package.json
@@ -1,9 +1,12 @@
 {
-  "name": "client",
+  "name": "girr-client",
   "version": "1.0.0",
-  "description": "GeekInc Remote Regie App",
-  "author": "Matthieu PETIT <[email protected]>",
-  "private": true,
+  "description": "Studio Renegade Remote Regie App",
+  "author": "Christophe Camicas",
+  "contributors": [
+    "Matthieu PETIT <[email protected]>"
+  ],
+  "private": false,
   "scripts": {
     "dev": "node build/dev-server.js",
     "start": "node build/dev-server.js",

diff --git a/client/src/components/Episode/EpisodeDialog.vue b/client/src/components/Episode/EpisodeDialog.vue
@@ -76,39 +76,33 @@ export default {
     confirm: function () {
       this.$el.querySelector('.mdc-dialog__footer__button--accept').disabled = true
       this.updateEpisode(this.episode)
-        .then((response) => {
-          this.close()
-        })
+        .then(response => this.close())
         .finally(() => {
           this.$el.querySelector('.mdc-dialog__footer__button--accept').disabled = false
         })
     },
     updateEpisode: function (episode) {
       Event.$emit('progressbar.toggle', true)
-      return this.$http.put(`/api/programs/${this.$route.params.programId}/episodes/${episode._id}`, episode).then(
-        function (response) {
-          Event.$emit('progressbar.toggle', false)
-          Event.$emit('episode.updated', response.body)
-        },
-        function (response) {
-          Event.$emit('progressbar.toggle', false)
-          Event.$emit('http.error', response)
-        }
-      )
+      return this.$http.put(`/api/programs/${this.$route.params.programId}/episodes/${episode._id}`, episode)
+        .then(response => Event.$emit('episode.updated', response.body))
+        .catch(error => {
+          Event.$emit('http.error', error)
+          return Promise.reject(error)
+        })
+        .finally(() => Event.$emit('progressbar.toggle', false))
     },
     deleteEpisode: function (episode) {
       Event.$emit('progressbar.toggle', true)
-      this.$http.delete(`/api/programs/${this.$route.params.programId}/episodes/${episode._id}`).then(
-        function (response) {
-          Event.$emit('progressbar.toggle', false)
+      return this.$http.delete(`/api/programs/${this.$route.params.programId}/episodes/${episode._id}`)
+        .then((response) => {
           Event.$emit('episode.deleted', episode)
           window.location = this.$router.resolve({ name: 'Program', params: { programId: this.$route.params.programId } }).href
-        },
-        function (response) {
-          Event.$emit('progressbar.toggle', false)
-          Event.$emit('http.error', response)
-        }
-      )
+        })
+        .catch(error => {
+          Event.$emit('http.error', error)
+          return Promise.reject(error)
+        })
+        .finally(() => Event.$emit('progressbar.toggle', false))
     }
   }
 }

diff --git a/client/src/components/Program/ProgramDialog.vue b/client/src/components/Program/ProgramDialog.vue
@@ -87,9 +87,7 @@ export default {
     confirm: function () {
       this.$el.querySelector('.mdc-dialog__footer__button--accept').disabled = true
       this.updateProgram(this.program, this.$el.querySelectorAll('input[type=file]'))
-        .then((response) => {
-          this.close()
-        })
+        .then(response => this.close())
         .finally(() => {
           this.$el.querySelector('.mdc-dialog__footer__button--accept').disabled = false
         })
@@ -119,31 +117,27 @@ export default {
         }
       }
       Event.$emit('progressbar.toggle', true)
-      return this.$http.put(`/api/programs/${program._id}`, data).then(
-        function (response) {
-          Event.$emit('progressbar.toggle', false)
-          Event.$emit('program.updated', response.body)
-        },
-        function (response) {
-          Event.$emit('progressbar.toggle', false)
-          Event.$emit('http.error', response)
-        }
-      )
+      return this.$http.put(`/api/programs/${program._id}`, data)
+        .then((response) => Event.$emit('program.updated', response.body))
+        .catch(error => {
+          Event.$emit('http.error', error)
+          return Promise.reject(error)
+        })
+        .finally(() => Event.$emit('progressbar.toggle', false))
     },
     deleteProgram: function (program) {
       Event.$emit('progressbar.toggle', true)
-      this.$http.delete(`/api/programs/${program._id}`).then(
-        function (response) {
-          Event.$emit('progressbar.toggle', false)
+      return this.$http.delete(`/api/programs/${program._id}`)
+        .then((response) => {
           Event.$emit('program.deleted', program)
           this.close()
           window.location = this.$router.resolve({name: 'Programs'}).href
-        },
-        function (response) {
-          Event.$emit('progressbar.toggle', false)
-          Event.$emit('http.error', response)
-        }
-      )
+        })
+        .catch(error => {
+          Event.$emit('http.error', error)
+          return Promise.reject(error)
+        })
+        .finally(() => Event.$emit('progressbar.toggle', false))
     }
   }
 }

diff --git a/client/src/components/Topic/TopicDialog.vue b/client/src/components/Topic/TopicDialog.vue
@@ -38,7 +38,7 @@
                 <i class="material-icons" v-on:click="deleteMedia(media)">cancel</i>
               </div>
               <span class="mdc-grid-tile__secondary" v-if="media.label">
-                <span class="mdc-grid-tile__title">{{ media.label }}</span>
+                <span class="mdc-grid-tile__title" :title="media.label">{{ media.label }}</span>
               </span>
             </li>
             <li class="mdc-grid-tile add-tile">
@@ -117,10 +117,8 @@ export default {
       this
         .updateTopic(this.topic)
         .then((response) => {
-          if (response) {
-            Event.$emit(`topics.${this.topic._id}.update`, this.topic, this.medias)
-            this.close()
-          }
+          Event.$emit(`topics.${this.topic._id}.update`, this.topic, this.medias)
+          this.close()
         })
         .finally(() => {
           this.$el.querySelector('.mdc-dialog__footer__button--accept').disabled = false
@@ -164,32 +162,26 @@ export default {
     },
     updateTopic: function (topic) {
       Event.$emit('progressbar.toggle', true)
-      return this.$http.put(`/api/programs/${this.$route.params.programId}/episodes/${this.$route.params.episodeId}/topics/${topic._id}`, topic).then(
-        function (response) {
-          Event.$emit('progressbar.toggle', false)
-          Event.$emit('topic.updated', response.body)
-          return true
-        },
-        function (response) {
-          Event.$emit('progressbar.toggle', false)
-          Event.$emit('http.error', response)
-          return false
-        }
-      )
+      return this.$http.put(`/api/programs/${this.$route.params.programId}/episodes/${this.$route.params.episodeId}/topics/${topic._id}`, topic)
+        .then(response => Event.$emit('topic.updated', response.body))
+        .catch(error => {
+          Event.$emit('http.error', error)
+          return Promise.reject(error)
+        })
+        .finally(() => Event.$emit('progressbar.toggle', false))
     },
     deleteTopic: function (topic) {
       Event.$emit('progressbar.toggle', true)
-      this.$http.delete(`/api/programs/${this.$route.params.programId}/episodes/${this.$route.params.episodeId}/topics/${topic._id}`).then(
-        function (response) {
-          Event.$emit('progressbar.toggle', false)
-          Event.$emit('topic.deleted', topic)
-          this.close()
-        },
-        function (response) {
-          Event.$emit('progressbar.toggle', false)
-          Event.$emit('http.error', response)
-        }
-      )
+      this.$http.delete(`/api/programs/${this.$route.params.programId}/episodes/${this.$route.params.episodeId}/topics/${topic._id}`)
+      .then(() => {
+        Event.$emit('topic.deleted', topic)
+        this.close()
+      })
+      .catch(error => {
+        Event.$emit('http.error', error)
+        return Promise.reject(error)
+      })
+      .finally(() => Event.$emit('progressbar.toggle', false))
     }
   }
 }
@@ -250,11 +242,9 @@ export default {
   background-position: center center;
   background-image: url("\
   data:image/svg+xml;utf8, \
-    <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='170px' height='50px'> \
-      <text x='85' y='28' \
-        style='text-anchor: middle' font-size='16'> \
-        Click here to upload \
-      </text> \
+    <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='48px' height='48px' viewBox='0 0 24 24'> \
+      <path d='M0 0h24v24H0z' fill='none'/>\
+      <path d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z'/>\
     </svg>\
   ");
 }

diff --git a/server/CHANGELOG.md b/server/CHANGELOG.md
@@ -0,0 +1,15 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+### Added
+- A changelog.
+
+## [2.0.1]
+### Added
+- Initial release using NodeJS and [Express](https://expressjs.com/).
+
+[Unreleased]: https://github.com/chriscamicas/girr/compare/v2.0.1...HEAD
diff --git a/server/package.json b/server/package.json
@@ -1,14 +1,17 @@
 {
-  "name": "girr",
+  "name": "girr-api",
   "version": "2.0.1",
-  "description": "GeekInc Remote Regie",
+  "description": "Studio Renegade Remote Regie",
   "main": "app.js",
   "scripts": {
     "start": "node app.js",
     "dev": "nodemon --inspect --config config/nodemon.json app.js",
     "test": "MONGO_ENDPOINT=mongodb://localhost/girr_test mocha --timeout 10000 --exit"
   },
   "author": "Christophe Camicas",
+  "contributors": [
+    "Matthieu PETIT <[email protected]>"
+  ],
   "license": "MIT",
   "dependencies": {
     "body-parser": "^1.17.2",