1  <template lang='pug'>
  2  .task(:class="cardInputSty"  @click='goDeeper'  draggable="true"  :ondrop="drop"  :ondragover="allowDrop"  :ondragstart='dragStart'   :ondragleave='dragLeave').dont-break-out.agedwrapper
  3      .diamondbox
  4          img.diamond(v-for='t in b.priorities'  src='../assets/images/uncompleted.svg'  :class='styl($store.state.tasks[$store.state.hashMap[t]].color)'  @click='$store.commit("setMode", 1)')
  5      img.flaggy(@click.stop='upboat' src='../assets/images/chevron-up.svg')
  6      img.viney(@click.stop='pop' src='../assets/images/explode.svg')
  7      img.scrolly(@click.stop='remove' src='../assets/images/chevron-up.svg').rotate2
  8      pinner(:b='b', :inId='inId')
  9      tally(:b='b')
 10      .buffertop
 11        .cardbody
 12            linky.cardhud(:x='b.name' v-if='!member'  @click.stop='copyCardToClipboard')
 13                img.clippy(src='../assets/images/clipboard.svg'  v-if='showCopied')
 14            div(v-else)
 15                img.send(src='../assets/images/doge.svg')
 16                span {{member.name}}
 17            span.sml
 18                current(v-for='n in actions'  :memberId='n')
 19      div
 20          .copiedspace
 21      preview-deck(:task='b')
 22  </template>
 23  
 24  <script>
 25  // import _ from 'lodash'
 26  import Tally from './Tally.vue'
 27  import Linky from './Linky.vue'
 28  import Current from './Current.vue'
 29  import Pinner from './Pinner.vue'
 30  import PreviewDeck from './PreviewDeck.vue'
 31  
 32  export default {
 33      data(){
 34          return {
 35              showCopied: false,
 36              dropping: false,
 37          }
 38      },
 39      props: ['b', 'inId', 'c'],
 40      components: { PreviewDeck, Pinner, Linky, Current, Tally},
 41      methods: {
 42          dragLeave(){
 43              this.dropping = false
 44          },
 45          styl(color){
 46              if (!color  || this.$store.getters.member.stacks === 1) return
 47              return {
 48                  dropping : this.dropping,
 49                  redwx : color == 'red',
 50                  bluewx : color == 'blue',
 51                  greenwx : color == 'green',
 52                  yellowwx : color == 'yellow',
 53                  purplewx : color == 'purple',
 54                  blackwx : color == 'black',
 55              }
 56          },
 57          drop(ev){
 58              ev.preventDefault();
 59              this.dropping = false
 60              var data = ev.dataTransfer.getData("taskId").split(",")
 61              if (this.b.taskId === data){
 62                  return
 63              }
 64              
 65              if (data.length > 1) {
 66                  this.$store.dispatch("makeEvent", {
 67                      type: 'pile-sub-tasked',
 68                      inId: this.b.taskId,
 69                      tasks: data,
 70                  })
 71                  this.$store.dispatch("makeEvent", {
 72                      type: 'pile-de-sub-tasked',
 73                      inId: this.$store.getters.contextCard.taskId,
 74                      tasks: data,
 75                  })
 76              } else {
 77              this.$store.dispatch("makeEvent", {
 78                  type: 'task-de-sub-tasked',
 79                  inId: this.$store.getters.contextCard.taskId,
 80                  taskId: data[0],
 81              })
 82              this.$store.dispatch("makeEvent", {
 83                  type: 'task-sub-tasked',
 84                  inId: this.b.taskId,
 85                  taskId: data[0],
 86              })
 87              }
 88          },
 89          allowDrop(ev){
 90              ev.preventDefault()
 91              this.dropping = true
 92          },
 93          dragStart(ev){
 94              ev.dataTransfer.setData("taskId", this.b.taskId);
 95          },
 96          pop(){
 97              this.rollStackPull()
 98              this.$store.dispatch("makeEvent", {
 99                  type: 'task-popped',
100                  taskId: this.b.taskId,
101                  inId: this.inId,
102              })
103          },
104          upboat(){
105              this.rollStackPull()
106              this.$store.dispatch("makeEvent", {
107                  type: 'task-prioritized',
108                  taskId: this.b.taskId,
109                  fromId: this.b.taskId,
110                  inId: this.inId,
111              })
112          },
113          remove(){
114              this.rollStackPull()
115              this.$store.dispatch("makeEvent", {
116                  type: 'task-de-sub-tasked',
117                  taskId: this.b.taskId,
118                  inId: this.inId,
119              })
120          },
121          setAction(){
122              if (this.$store.getters.member.action === this.b.taskId){
123                  return this.$store.dispatch("makeEvent", {
124                      type: 'member-field-updated',
125                      field: 'action',
126                      newfield: false,
127                      memberId: this.$store.getters.member.memberId,
128                  })
129              }
130  
131              this.$store.dispatch("makeEvent", {
132                  type: 'member-field-updated',
133                  field: 'action',
134                  newfield: this.b.taskId,
135                  memberId: this.$store.getters.member.memberId,
136              })
137          },
138          goDeeper(){
139              this.$store.commit("rollStackPull", this.b.taskId)
140              this.$store.commit("goDeeper", this.b.taskId)
141          },
142          purge(){
143            this.$store.dispatch("makeEvent", {
144                type: 'task-removed',
145                taskId: this.b.taskId,
146            })
147          },
148          copyCardToClipboard(){
149            if (this.showCopied){
150                return this.goDeeper()
151            }
152            navigator.clipboard.writeText(this.b.name)
153                .then(() => {
154                    this.showCopied = true
155                })
156                .catch(err => {
157                    console.log(err, 'copy attempt failed, printing to console:')
158                    console.log(this.b.name)
159                })
160          },
161          rollStackPull(){
162              this.$store.commit("rollStackPull", this.b.taskId)
163          }
164      },
165      computed: {
166          actions(){
167              let a = []
168              this.$store.state.members.forEach(m => {
169                  if (m.action ===this.b.taskId) a.push(m.memberId)
170              })
171              return a
172          },
173          w(){
174              return this.$store.getters.weights[this.b.taskId]
175          },
176          cardInputSty(){
177            if(!this.b) {
178              return
179            }
180            if (this.$store.getters.member.stacks === 1) {
181                return {
182                    dropping: this.dropping,
183                    nowx: true
184                }
185            }
186            return {
187                dropping: this.dropping,
188                redwx : this.b.color == 'red',
189                bluewx : this.b.color == 'blue',
190                greenwx : this.b.color == 'green',
191                yellowwx : this.b.color == 'yellow',
192                purplewx : this.b.color == 'purple',
193                blackwx : this.b.color == 'black',
194            }
195          },
196          member(){
197            let mc = false
198            this.$store.state.members.forEach( m => {
199                if (this.b.name === m.memberId ){
200                    mc = m
201                }
202            })
203            return mc
204          },
205          fractionalReserveDoge() {
206              return Math.max(Math.floor((this.w % 1) * 16), 1)
207          },
208      },
209  }
210  
211  </script>
212  
213  <style lang="stylus" scoped>
214  
215  @import '../styles/colours'
216  @import '../styles/button'
217  @import '../styles/spinners'
218  @import '../styles/donut'
219  
220  .rotate2 
221      transform: rotate(180deg) 
222  
223  .diamond
224      cursor: pointer;
225      pointer-events: all
226      transform: rotate(45deg)
227      height: 0.7871em
228      position: relative
229      top: 0
230      right: 0
231      float: right;
232      z-index: 2
233  
234  .diamondbox
235      padding-right:1.4272342em
236      position: relative
237      top: 0
238      right: 0
239      float: right;
240  
241  .sml
242      font-size: .73em
243  
244  .task
245      margin:10px 0
246      padding:20px
247      cursor: crosshair
248      box-shadow: 2px 2px 3px 2px softGrey
249  
250  .scrolly
251      position: absolute
252      left: 0
253      bottom: 0
254      height: 2.1em
255      cursor: pointer
256  
257  img.scrolly
258      opacity: 0.2
259      padding: 0.5em
260  
261  .vine
262      width: 100%
263      text-align: right
264      span
265          padding-right: 1.2em
266  
267  .viney
268      position: absolute
269      bottom: 0
270      right: 0
271      cursor: pointer
272      height: 2.1em
273  
274  img.viney
275      opacity: 0.15
276      padding: 0.4em
277      padding-right: 0.6em
278  
279  .send
280      height: 1.1em
281      opacity: 0.64
282  
283  .totop
284      z-index: 1000
285  
286  .pad
287      margin-top: 0em
288      margin-bottom: 0em
289  
290  .centered
291      text-align: center
292  
293  .fw
294      width:100%
295  
296  .task
297      margin:0
298      margin-bottom: .25em
299      padding:1em
300      position: relative
301  
302  .dont-break-out
303    overflow-wrap: break-word
304    word-wrap: break-word
305    word-break: break-word
306    hyphens: auto
307  
308  .agedwrapper
309      position: relative
310  
311  .bold
312      height: 1.21
313      font-weight: bolder
314  
315  .cardhud
316      position: relative
317      z-index: 14
318      cursor: pointer
319  
320  .buffertop
321      margin-top: 2em
322      clear: both
323      width: 100%
324  
325  .cardbody
326      width: 100%
327  
328  .preview
329      float: right
330      margin-left: 0.5em
331      margin-bottom: 0.5em
332  
333  .tally
334      position: absolute
335      right: 2.5em
336      top: 0.85em
337  
338  .square.hidden
339      opacity: 0.1234
340  
341  .hidden
342      opacity: 0
343  
344  .clippy
345      height: 1em
346      display: inline-block;
347      cursor: pointer
348  
349  .copiedspace
350      height: 1.987654em
351  
352  .copied.hidden
353      opacity: 0.1
354      cursor: pointer
355  
356  .flaggy
357      position: absolute
358      right: 0
359      height: 2.1em
360      top: 0
361      cursor: pointer
362  
363  img.flaggy
364      opacity: 0.1
365      padding: 0.25em
366      padding-right: 0.5em
367  
368  .task.dropping
369      background: blue
370  
371  </style>