TreeItem.vue 3.31 KB
Newer Older
1
<template>
Lucas Détré's avatar
Lucas Détré committed
2 3
  <li style="">
    <div :class="{bold: isFolder}" class=""  @dblclick="makeFolder"  style="margin-left:2.5%">
4
      <div v-if="isFolder" @click="toggle">
Lucas Détré's avatar
Lucas Détré committed
5 6 7
        <div v-if="!rootElement" class="form-inline rules-line">
          <div v-html="transform(item.name)" style="width:95%"/>
          <div class="main-button btn pull-right" style="width:5%"><strong>{{ isOpen ? '-' : '+' }}</strong></div>
8
        </div>
9
      </div>
Lucas Détré's avatar
Lucas Détré committed
10
      <div v-else v-html="transform(item.name)" :class="{alors: isAlorsLine}" class="text-muted rules-line"/>
11
    </div>
Lucas Détré's avatar
Lucas Détré committed
12
    <hr v-show="!rootElement" style="padding:0px; margin:0px;">
13
    <ul v-show="isOpen || rootElement" v-if="isFolder">
14
      <TreeItem
15 16 17 18
        class="item"
        v-for="(child, index) in item.children"
        :key="index"
        :item="child"
19 20
        :rootElement="false"
        :rulePath="rulePath"
21 22
        @make-folder="$emit('make-folder', $event)"
        @add-item="$emit('add-item', $event)"
23
      ></TreeItem>
24
      <!-- li class="add" @click="$emit('add-item', item)">+</li -->
25 26 27 28 29
    </ul>
  </li>
</template>

<script>
30 31 32 33 34 35
  export default {
    name: 'TreeItem',
    props: ['item','rootElement', 'rulePath'],
    data: function() {
      return {
        isOpen: false
36 37
      }
    },
38 39 40 41
    computed: {
      isFolder: function() {
        return this.item.children &&
          this.item.children.length
Lucas Détré's avatar
Lucas Détré committed
42 43 44
      },
      isAlorsLine: function () {
        return this.item.name.match(/Alors+ .*/gi);
45
      }
46
    },
47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
    methods: {
      toggle: function () {
        if (this.isFolder) {
          this.isOpen = !this.isOpen
        }
      },
      makeFolder: function () {
        if (!this.isFolder) {
          this.$emit('make-folder', this.item)
          this.isOpen = true
        }
      },
      transform: function(data) {
        return data
          .replace(/Si /g, '<span class="bold text-dark">Si </span>')
          .replace(/Soit /g, '<span class="bold text-dark">Soit </span>')
          .replace(/Quand /g, '<span class="bold text-dark">Quand </span>')
          .replace(/Scénario: /g, '<span class="bold text-dark">Scénario: </span>')
          .replace(/Ou /g, '<span class="bold text-dark">Ou </span>')
          .replace(/, ou /g, '<span class="bold text-dark">, ou </span>')
          .replace(/Et /g, '<span class="bold text-dark">Et </span>')
          .replace(/, et /g, '<span class="bold text-dark">, et </span>')
Lucas Détré's avatar
Lucas Détré committed
69
          .replace(/Alors+ .*/gi, "<div class='text-dark'>$&</div>")
70
          .replace(/(#.+)/g, "<em class=\"comment\">$1</em>")
Lucas Détré's avatar
Lucas Détré committed
71
          .replace(/appliquer les règles «([^»]+?)(.rules)?»/g, '<span class="rules-line"> appliquer les règles « <a href="'+this.rulePath+'#$1.rules" class="btn main-button" title="Ouvrir les règles" style="display:inline-block">$1</a> »</span>')
72
          .replace(/(«.+»)/g, "<span class=\"string\">$1</span>")
Lucas Détré's avatar
Lucas Détré committed
73
          .replace(/,([^ ])/g, "<span class=\"string\">, $1</span>");
74
      },
75
    },
76
  }
77 78 79 80 81 82 83
</script>

<style>
  .item {
    cursor: pointer;
  }
  .bold {
David Foucher's avatar
David Foucher committed
84
    font-weight: bold;
85 86
  }
  ul {
David Foucher's avatar
David Foucher committed
87 88 89
    padding-left: 1em;
    line-height: 1.5em;
    list-style-type: dot;
90
  }
91 92 93
  .rule-separator {
    width: 100vh;
  }
Lucas Détré's avatar
Lucas Détré committed
94 95 96 97 98 99 100 101 102 103
  .alors {
    background-color: rgba(153, 255, 102, 0.2);
    transition: padding 0.2s 0s linear;
    height:100%;
    border-radius:5px;
  }
  .rules-line {
    padding-top:1vh;
    padding-bottom:1vh;
  }
104
</style>