1  <template lang='pug'>
  2  
  3  .pin(@click='goGo'  :ondrop="drop"  :ondragover="allowDrop"  :ondragleave="offDrop"  :class="{dropping, hidded : $store.state.context.indexOf(p.taskId) > -1}"  draggable="true"  :ondragstart='dragStart')
  4    .poon
  5      span(@click.stop='goGoKeep')
  6          img.floatleft(v-if='$store.getters.member.memberId !== p.taskId'  src='../assets/images/badge.svg'  :class='{rotated: $store.state.context.indexOf(p.taskId) > -1}')
  7          img.floatleft(v-else  src='../assets/images/doge.svg')
  8      span
  9          span.nl.gui(v-if='$store.getters.member.memberId !== p.taskId' ) {{ p.guild.split(':')[0] }}
 10          span.nl.gui(v-else) &nbsp;home
 11  </template>
 12  
 13  <script>
 14  
 15  export default {
 16      data(){
 17          return { dropping: false }
 18      },
 19      props: ['p'],
 20      methods: {
 21          dragStart(ev){
 22              ev.dataTransfer.setData("taskId", this.p.taskId);
 23          },
 24          offDrop(){
 25              this.dropping = false
 26          },
 27          drop(ev){
 28              ev.preventDefault();
 29  
 30              var data = ev.dataTransfer.getData("taskId")
 31              if (this.p.taskId === data){
 32                  return
 33              }
 34              this.$store.dispatch("makeEvent", {
 35                  type: 'task-de-sub-tasked',
 36                  inId: this.$store.getters.contextCard.taskId,
 37                  taskId: data,
 38              })
 39              this.$store.dispatch("makeEvent", {
 40                  type: 'task-sub-tasked',
 41                  inId:  this.p.taskId,
 42                  taskId: data,
 43              })
 44              this.$store.commit("rollStackPull", data)
 45              setTimeout(() => this.dropping = false, 444)
 46          },
 47          allowDrop(ev){
 48              ev.preventDefault()
 49              this.dropping = true
 50          },
 51          goGoKeep(){
 52              this.$store.commit("goDeeper", this.p.taskId)
 53          },
 54          goGo(){
 55              let contexts = [] 
 56              if (this.$store.getters.member.memberId !== this.p.taskId){
 57                  this.$store.getters.pinGroups.groupings.some(g => {
 58                      if (g.indexOf(this.p.taskId) > -1){
 59                         contexts = g.filter(x => x !== this.p.taskId)
 60                         return true
 61                      }
 62                  })
 63              }
 64              contexts.push(this.p.taskId)
 65              this.$store.commit("goGo", contexts)
 66          },
 67      },
 68  }
 69  
 70  </script>
 71  
 72  <style lang='stylus' scoped>
 73  
 74  @import '../styles/colours'
 75  
 76  .hidded
 77      opacity: 0
 78  
 79  .rotated
 80      transform: rotate(180deg)
 81  
 82  .dropping
 83      background: blue
 84  
 85  .pin .poon:hover
 86      padding-right: 0.5em
 87      background: main
 88  
 89  span.nl.gui
 90      font-weight: 1300;
 91      font-size: 1.2em
 92      opacity: 1
 93      width: 100%
 94  span.nl.gui:hover
 95      opacity: 1
 96  
 97  .projects .floatleft
 98      max-height: 1.5em
 99      margin-top: 0
100  
101  .projects ul
102      margin-left: -2em
103  
104  .gui
105      font-size: 1.5em
106      cursor: pointer
107  
108  .spaced
109      clear: both
110      margin-top: 0.9555em
111  
112  .floatleft
113      height: 100%
114      float: left
115      clear: both
116      max-height: 3.3em
117      cursor: crosshair
118      margin-top: 0.3em
119  
120  </style>