Eligibilite.vue 1.36 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
<template>
  <div id="Eligibilite">
    <ul>
      <li v-for="(props, id) in this.conditions" :key="id" :class="{passed: props.status, failed: !props.status}">
        <span v-html="transformData(props.condition)"/>
        <span v-if="props.children">
          <eligibilite :conditions="props.children"/>
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
		name: 'Eligibilite',
    props: ['conditions', 'schema'],
    methods: {
      transformData: function (data) {
        return data
          .replace(/Ou /g, '<span style="font-style: italic">&nbsp;Ou&nbsp; </span>')
          .replace(/OU /g, '<span style="font-style: italic">&nbsp;OU&nbsp; </span>')
          .replace(/, ou /g, '<span style="font-style: italic">&nbsp;, ou&nbsp; </span>')
          .replace(/Et /g, '<span style="font-style: italic">&nbsp;Et&nbsp; </span>')
          .replace(/ET /g, '<span style="font-style: italic">&nbsp;ET&nbsp; </span>')
          .replace(/, et /g, '<span style="font-style: italic">&nbsp;, et&nbsp; </span>');
      }
    }
  }
</script>

<style scoped>
  .failed:before {
    content: '✗';
    color: crimson;
  }
  .passed:before {
    content: '✔';
    color: forestgreen;
  }
  li li {
    padding-left: 1.5rem;
  }
  li ul, li.sub {
    display: inline;
    padding-left: 0;
  }
  .connective {
    font-style: italic !important;
  }
</style>