1  <template lang='pug'>
  2  
  3  .context.paperwrapper(@click='goHigher'  :class="cardInputSty"  draggable="true"  :ondrop="drop"  :ondragover="allowDrop"  :ondragstart='dragStart'  :ondragleave='dragLeave')
  4      .popup
  5          .here
  6              span.front(v-if='isMember')  {{ isMember }} &nbsp;
  7              span.front(v-else-if='isResource')  {{ isResource }} &nbsp;
  8              span(v-else)
  9                  span.front(v-if='card.guild')  {{ card.guild }} &nbsp;
 10                  linky.front.only(:x='name'  :key='name')
 11      img.front.darkcircle(v-if='card.guild'  src="../assets/images/badge.svg")
 12      img.front.darkcircle(v-if='isMember' src="../assets/images/doge.svg")
 13      div.right.front(v-if='card.book.startTs')
 14          tally(:b='card')
 15      slot
 16  </template>
 17  
 18  <script>
 19  import Linky from './Linky.vue'
 20  import Tally from './Tally.vue'
 21  
 22  export default {
 23      data(){
 24          return { dropping: false }
 25      },
 26      props: ['taskId'],
 27      components: { Linky, Tally },
 28      methods: {
 29          goHigher(){
 30              let t = this.$store.state.tasks[this.$store.state.hashMap[this.taskId]]
 31              if (t.guild){
 32                  let lookingfor = t.guild.split(':')[0]
 33                  let i = this.$store.getters.pinGroups.uniqBase.indexOf(lookingfor)
 34                  if (i !== -1){
 35                    let contexts = this.$store.getters.pinGroups.groupings[i]
 36                    contexts = contexts.filter(x => x !== this.taskId)
 37                    contexts.push(this.taskId)
 38                    return this.$store.commit("goGo", contexts)
 39                  }
 40              }
 41              this.$store.commit("goHigher", this.taskId)
 42          },
 43          dragLeave(){
 44              this.dropping = false
 45          },
 46          drop(ev){
 47              ev.preventDefault();
 48              var data = ev.dataTransfer.getData("taskId")
 49              if (this.taskId === data){
 50                  return
 51              }
 52              this.$store.dispatch("makeEvent", {
 53                  type: 'task-de-sub-tasked',
 54                  inId: this.$store.getters.contextCard.taskId,
 55                  taskId: data,
 56              })
 57              this.$store.dispatch("makeEvent", {
 58                  type: 'task-sub-tasked',
 59                  inId: this.taskId,
 60                  taskId: data,
 61              })
 62              setTimeout(() => this.dropping = false, 444)
 63          },
 64          allowDrop(ev){
 65              ev.preventDefault()
 66              this.dropping = true
 67          },
 68          dragStart(ev){
 69              ev.dataTransfer.setData("taskId", this.taskId);
 70          },
 71      },
 72      computed: {
 73          isResource(){
 74              let is = false
 75              this.$store.state.resources.some(m => {
 76                  if (m.resourceId === this.taskId){
 77                      is = m.name
 78                      return true
 79                  }
 80              })
 81              return is
 82          },
 83          isMember(){
 84              let is = false
 85              this.$store.state.members.some(m => {
 86                  if (m.memberId === this.taskId){
 87                      is = m.name
 88                      return true
 89                  }
 90              })
 91              return is
 92          },
 93          name(){
 94              return this.card.name
 95          },
 96          card(){
 97              return this.$store.state.tasks[this.$store.state.hashMap[this.taskId]]
 98          },
 99          cardInputSty() {
100            if (this.$store.getters.member.stacks === 1){
101                return {
102                    nowx: true,
103                    dropping: this.dropping,
104                }
105            }
106            let color = this.card.color
107            return {
108                dropping: this.dropping,
109                redwx : color == 'red',
110                bluewx : color == 'blue',
111                greenwx : color == 'green',
112                yellowwx : color == 'yellow',
113                purplewx : color == 'purple',
114                blackwx : color == 'black',
115            }
116          },
117      },
118  }
119  
120  </script>
121  
122  <style lang='stylus' scoped>
123  
124  @import '../styles/colours'
125  
126  img
127      height: 1.1em
128      float: left
129      margin-left: 1em
130      padding: 0em 0.1em 0.1em 0.1em
131  
132  img.darkcircle
133      background: main
134      border-radius: 50%
135  
136  .context
137      opacity: 0.9
138      width: calc(100%)
139  
140  .paperwrapper
141      position: relative
142      z-index: 1
143  
144  .popup
145      top: 0
146      left: 0
147      bottom: 0
148      right: 0
149      position: relative
150      width: 100%
151      height: 1.5em
152      cursor: pointer
153      z-index: 50
154      overflow: hidden
155  
156  .popup .here .only
157      opacity: 0.15
158  .popup:hover .here .only
159      opacity: 1
160  
161  .here
162      position: inline
163  
164      pointer-events: none
165      margin-left: 2.5em
166  
167  img.front
168      position: absolute
169      top: 0.2em
170      left: -0.5em
171  
172  .right.front
173      position: absolute
174      top: 0.2em
175      right: 0.5em
176  
177  .right.front img
178      margin-right: 0.5em
179      margin-left: 0.15em
180  
181  .front
182      z-index: 100
183      position: relative
184      pointer-events: none
185  
186  .right.front
187      float: right
188  
189  .context
190      box-shadow: -7px -7px 7px 1px rgba(21, 21, 21, 0.5)
191  
192  
193  .context.paperwrapper.dropping
194      background: blue
195  
196  </style>