src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue
changeset 539 08e2513dbc2f
parent 504 11a862e01b04
--- a/src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue	Tue Jun 05 13:56:20 2018 +0200
+++ b/src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue	Wed Jun 06 16:21:54 2018 +0200
@@ -49,158 +49,178 @@
 </template>
 
 <script>
+import TagList from "../tagform/TagList.vue";
+import _ from "lodash";
+import showdown from "showdown";
+import moment from "moment";
 
-    import TagList from '../tagform/TagList.vue'
-    import _ from 'lodash'
-    import showdown from 'showdown'
-    import moment from 'moment'
-
-    const converter = new showdown.Converter()
+const converter = new showdown.Converter();
 
-    var defaults = {
-        title: '',
-        description: '',
-        fragment: '',
-        tags: [],
-        readonly: true,
-    }
+var defaults = {
+  title: "",
+  description: "",
+  fragment: "",
+  tags: [],
+  readonly: true
+};
 
-    export default {
-        props: {
-            annotation: {
-                type: Object,
-                default: function () {
-                    return null;
-                }
-            },
-            isAuthenticated: {
-                type: Boolean,
-                default: false
-            },
-            revisionsUrl: String,
-            authorUrl: String,
-            newAnnotationUrl: String,
-            editAnnotationUrl: String
-        },
-        components: {
-            'tag-list': TagList
-        },
-        data() {
-            return defaults;
-        },
-        mounted() {
-            if (this.annotation) {
-                this.loadAnnotation(this.annotation);
-            }
-        },
-        watch: {
-            annotation: function(annotation) {
-                if (annotation) {
-                    this.loadAnnotation(annotation);
-                } else {
-                    this.reset();
-                }
-            }
-        },
-        computed: {
-            descriptionComputed: function() {
-              return converter.makeHtml(this.description);
-            },
-            lastRevisionText: function() {
-                if (this.annotation) {
-                    var date = moment(this.annotation.created).locale('fr');
-                    return 'Dernière version ' + date.fromNow() + ' par ' + this.annotation.author;
-                }
-            },
-            revisionsUrlComputed: function() {
-                if (this.annotation) {
-                    return this.revisionsUrl.replace(':annotation_guid', this.annotation.annotation_guid);
-                }
-            },
-            authorUrlComputed: function() {
-                if (this.annotation) {
-                    return this.authorUrl.replace('--username--', this.annotation.author);
-                }
-            },
-            dateComputed: function() {
-                if (this.annotation) {
-                    return moment(this.annotation.created).locale('fr').fromNow();
-                }
-            },
-            formAction: function() {
-                if (this.annotation) {
-                    if (this.annotation.annotation_guid) {
-                        return this.editAnnotationUrl.replace(':annotation_guid', this.annotation.annotation_guid);
-                    }
+export default {
+  props: {
+    annotation: {
+      type: Object,
+      default: function() {
+        return null;
+      }
+    },
+    isAuthenticated: {
+      type: Boolean,
+      default: false
+    },
+    revisionsUrl: String,
+    authorUrl: String,
+    newAnnotationUrl: String,
+    editAnnotationUrl: String
+  },
+  components: {
+    "tag-list": TagList
+  },
+  data() {
+    return defaults;
+  },
+  mounted() {
+    if (this.annotation) {
+      this.loadAnnotation(this.annotation);
+    }
+  },
+  watch: {
+    annotation: function(annotation) {
+      if (annotation) {
+        this.loadAnnotation(annotation);
+      } else {
+        this.reset();
+      }
+    }
+  },
+  computed: {
+    descriptionComputed: function() {
+      return converter.makeHtml(this.description);
+    },
+    lastRevisionText: function() {
+      if (this.annotation) {
+        var date = moment(this.annotation.created).locale("fr");
+        return (
+          "Dernière version " +
+          date.fromNow() +
+          " par " +
+          this.annotation.author
+        );
+      }
+    },
+    revisionsUrlComputed: function() {
+      if (this.annotation) {
+        return this.revisionsUrl.replace(
+          ":annotation_guid",
+          this.annotation.annotation_guid
+        );
+      }
+    },
+    authorUrlComputed: function() {
+      if (this.annotation) {
+        return this.authorUrl.replace("--username--", this.annotation.author);
+      }
+    },
+    dateComputed: function() {
+      if (this.annotation) {
+        return moment(this.annotation.created)
+          .locale("fr")
+          .fromNow();
+      }
+    },
+    formAction: function() {
+      if (this.annotation) {
+        if (this.annotation.annotation_guid) {
+          return this.editAnnotationUrl.replace(
+            ":annotation_guid",
+            this.annotation.annotation_guid
+          );
+        }
 
-                    return this.newAnnotationUrl
-                }
-            },
-            submitButtonText: function() {
-                return this.isNewAnnotation ? 'Enregistrer' : 'Enregister une nouvelle version'
-            },
-            isNewAnnotation: function() {
-                return this.annotation && !this.annotation.annotation_guid
-            },
-            serializedTags: function() {
-                var tags = this.tags.map(function(tag) {
-                    return {
-                        tag_input: (typeof tag.tag_link === "string" && tag.tag_link.length) ? tag.tag_link : tag.tag_label,
-                        tag_label: tag.tag_label,
-                        accuracy: tag.accuracy,
-                        relevancy: tag.relevancy
-                    }
-                });
+        return this.newAnnotationUrl;
+      }
+    },
+    submitButtonText: function() {
+      return this.isNewAnnotation
+        ? "Enregistrer"
+        : "Enregister une nouvelle version";
+    },
+    isNewAnnotation: function() {
+      return this.annotation && !this.annotation.annotation_guid;
+    },
+    serializedTags: function() {
+      var tags = this.tags.map(function(tag) {
+        return {
+          tag_input:
+            typeof tag.tag_link === "string" && tag.tag_link.length
+              ? tag.tag_link
+              : tag.tag_label,
+          tag_label: tag.tag_label,
+          accuracy: tag.accuracy,
+          relevancy: tag.relevancy
+        };
+      });
 
-                return JSON.stringify(tags);
-            },
-            hasChanged: function() {
-                if (!this.annotation) { return false; }
+      return JSON.stringify(tags);
+    },
+    hasChanged: function() {
+      if (!this.annotation) {
+        return false;
+      }
 
-                return this.title !== this.annotation.title
-                    || this.description !== this.annotation.description
-                    || !_.isEqual(this.annotation.tags, this.tags);
-            }
-        },
-        methods: {
-            onCancelClick: function() {
-                if (this.isNewAnnotation) {
-                    this.$emit('close')
-                } else {
-                    this.readonly = !this.readonly
-                }
-            },
-            onTagsChange: function(tags) {
-                this.tags = tags;
-            },
-            reset: function() {
-                Object.assign(this, defaults);
-            },
-            loadAnnotation(annotation) {
-                // Make sure we have an actual copy
-                Object.assign(this, {
-                    title: annotation.title,
-                    description: annotation.description,
-                    fragment: annotation.fragment,
-                    tags: annotation.tags.slice(),
-                    readonly: !this.isNewAnnotation,
-                });
+      return (
+        this.title !== this.annotation.title ||
+        this.description !== this.annotation.description ||
+        !_.isEqual(this.annotation.tags, this.tags)
+      );
+    }
+  },
+  methods: {
+    onCancelClick: function() {
+      if (this.isNewAnnotation) {
+        this.$emit("close");
+      } else {
+        this.readonly = !this.readonly;
+      }
+    },
+    onTagsChange: function(tags) {
+      this.tags = tags;
+    },
+    reset: function() {
+      Object.assign(this, defaults);
+    },
+    loadAnnotation(annotation) {
+      // Make sure we have an actual copy
+      Object.assign(this, {
+        title: annotation.title,
+        description: annotation.description,
+        fragment: annotation.fragment,
+        tags: annotation.tags.slice(),
+        readonly: !this.isNewAnnotation
+      });
 
-                if (!annotation.annotation_guid) {
-                    setTimeout(() => {
-                        $(this.$refs.title).focus()
-                    }, 500);
-                }
-            }
-        }
+      if (!annotation.annotation_guid) {
+        setTimeout(() => {
+          $(this.$refs.title).focus();
+        }, 500);
+      }
     }
-
+  }
+};
 </script>
 
 <style scoped>
 form {
-    margin-bottom: 20px;
-    clear: both;
+  margin-bottom: 20px;
+  clear: both;
 }
 
 label {