Modification.vue 3.38 KB
Newer Older
1 2
<template>
  <div id="Modification">
Lucas Détré's avatar
Lucas Détré committed
3 4 5 6 7 8 9 10 11 12
    <div id="modification-title" class="mt-5 mb-3">
      <span v-if="this.toggled" @click="toggled = !toggled" style="cursor:pointer">
        <h5 class="d-inline-block text-nowrap" style="display:inline">
          {{ modification.title }} - {{ modification.date | moment("DD/MM/YYYY") }}
          <h6 class="text-muted font-weight-light" style="display:inline">({{ modification.date | moment("from", "now") }})</h6>
          <span class="fas fa-chevron-up modification-menu-chevron fa-sm"></span>
        </h5>
      </span>
      <span v-if="!this.toggled" @click="toggled = !toggled" style="cursor:pointer">
        <h5>
13
          {{ modification.title }} - {{ modification.date | moment("DD/MM/YYYY") }}
Lucas Détré's avatar
Lucas Détré committed
14 15 16 17 18
          <h6 class="text-muted font-weight-light" style="display:inline">({{ modification.date | moment("from", "now") }})</h6>
          &nbsp;
          <span class="fas fa-chevron-down modification-menu-chevron fa-sm"></span>
        </h5>
      </span>
19
    </div>
Lucas Détré's avatar
Lucas Détré committed
20 21
    <div id="modification-content">
      <div v-show="this.toggled" class="ml-5">
22
        <div v-html="prettyHtml" />
Lucas Détré's avatar
Lucas Détré committed
23 24
      </div>
    </div>
25
  </div>
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
</template>
<script>
  import * as Diff2Html from 'diff2html';
  import 'diff2html/bundles/css/diff2html.min.css';

  export default {
    name: 'Modification',
    props: ['modification'],
    data: function() {
      return {
        toggled: false,
        formated_diff: '--- a/'+this.modification.file+'\n+++ b/'+this.modification.file+'\n'+this.modification.diff,
        formated_date: new Date(this.modification.date).getDate() + '/' + new Date(this.modification.date).getMonth() + '/' + new Date(this.modification.date).getFullYear(),
      }
    },
    mounted() {
      this.$moment.locale('fr')
    },
    computed : {
      prettyHtml: function () {
        return Diff2Html.html(this.formated_diff, {
          matching: 'lines',
          outputFormat: 'side-by-side',
49
          rawTemplates: {
Lucas Détré's avatar
Lucas Détré committed
50 51 52 53 54
            'tag-file-changed': '<span class="d2h-tag d2h-changed d2h-changed-tag">MODIFIÉ</span>',
            'tag-file-deleted': '<span class="d2h-tag d2h-deleted d2h-deleted-tag">SUPPRIMÉ</span>',
            'tag-file-renamed': '<span class="d2h-tag d2h-moved d2h-moved-tag">RENOMMÉ</span>',
            'tag-file-added': '<span class="d2h-tag d2h-added d2h-added-tag">AJOUTÉ</span>',
            'file-summary-wrapper': '<div class="d2h-file-list-wrapper"><div class="d2h-file-list-header"><span class="d2h-file-list-title">Fichiers modifiés ({{filesNumber}})</span><a class="d2h-file-switch d2h-hide">cacher</a><a class="d2h-file-switch d2h-show">show</a></div><ol class="d2h-file-list">{{{files}}}</ol></div>',
55 56
            'generic-wrapper': '<div class="d2h-wrapper">{{{content}}}</div>',
            'file-summary-line':'<li class="d2h-file-list-line"><span class="d2h-file-name-wrapper">{{>fileIcon}}<a href="#'+this.modification.file.split('/').pop()+'" class="d2h-file-name">{{fileName}}</a><span class="d2h-file-stats"><span class="d2h-lines-added">{{addedLines}}</span><span class="d2h-lines-deleted">{{deletedLines}}</span></span></span></li>'
Lucas Détré's avatar
Lucas Détré committed
57
          }
58 59 60 61 62 63 64 65 66 67
        });
      },
    }
  }
</script>
<style scoped>
  .modification-menu-chevron {
    vertical-align: -5%;
    margin-left: 10px;
  }
Lucas Détré's avatar
Lucas Détré committed
68 69 70 71 72 73 74
  .modification-horizontal-separator {
    border: none;
    border-top: 1px solid #bfbfbf;
    height: 1px;
    width: 100%;
    position:relative;
  }
75
</style>