1  <template lang='pug'>
  2  
  3  .priorities
  4      div.center(v-if='priorities.length === 0 && $store.getters.contextCard.subTasks.length > 0') prioritize a card by clicking it on the top right corner
  5      div.center(v-else-if='priorities.length === 0 && $store.getters.contextCard.subTasks.length === 0') create a card with the bar at the bottom of the page
  6      .clearboth(v-for='(t, i) of priorities'  :key='t')
  7        .row.priority
  8            .priorityContainer
  9                .dot(@click='refocused(t)')
 10                hyperpriority.fw(:taskId='t'  :c='priorities')
 11                .dot(@click='completed(t)' v-if='hasCompleted(t)')
 12                .dot(v-else  @click='prioritized(t)')
 13        .row.subpriority(v-if='!$store.getters.contextResource'  v-for='(st, j) of getSubPriorities(t)'   :key='st')
 14            .clearboth.opensubcard
 15                hyperpriority(:taskId='st'  :inId="t"  :c='getSubPriorities(t)')
 16            .row.subsubpriority(v-for='(st2, k) of getSubPriorities(st)'  :key='st2')
 17                .clearboth.opensubcard
 18                    hyperpriority(:taskId='st2'  :inId="st"  :inInId='t'  :c='getSubPriorities(st)')
 19  </template>
 20  
 21  <script>
 22  
 23  import Hypercard from './Card.vue'
 24  import Hyperpriority from './SimplePriority.vue'
 25  import Connect from './Connect.vue'
 26  
 27  export default {
 28    data(){
 29        return {
 30            action: false,
 31        }
 32    },
 33    methods:{
 34      hasCompleted(tId){
 35          let card = this.$store.state.tasks[this.$store.state.hashMap[tId]]
 36          if(card && card.claimed){
 37              return card.claimed.length > 0
 38          }
 39          return false
 40      },
 41      getSubPriorities(taskId){
 42        let card = this.$store.state.tasks[this.$store.state.hashMap[taskId]]
 43        if(card && card.priorities){
 44            return card.priorities.slice().reverse()
 45        }
 46      },
 47      refocused(tId){
 48        this.$store.dispatch("makeEvent", {
 49          type: 'task-sub-tasked',
 50          inId: this.$store.getters.contextCard.taskId,
 51          taskId: tId,
 52        })
 53      },
 54      prioritized(taskId){
 55        this.$store.dispatch("makeEvent", {
 56          type: 'task-prioritized',
 57          inId: this.$store.getters.contextCard.taskId,
 58          fromId: this.$store.getters.contextCard.taskId,
 59          taskId,
 60        })
 61      },
 62      completed(taskId){
 63        this.$store.dispatch("makeEvent", {
 64          type: 'task-completed',
 65          inId: this.$store.getters.contextCard.taskId,
 66          taskId,
 67        })
 68      },
 69      getCard(taskId){
 70          return this.$store.state.tasks[this.$store.state.hashMap[taskId]]
 71      },
 72      pilePrioritized() {
 73        this.$store.dispatch("makeEvent", {
 74          type: "pile-prioritized",
 75          inId: this.$store.getters.contextCard.taskId,
 76          tasks: this.$store.getters.contextCard.subTasks
 77        });
 78      },
 79      pileRefocused() {
 80        this.$store.dispatch("makeEvent", {
 81          type: "pile-refocused",
 82          inId: this.$store.getters.contextCard.taskId
 83        });
 84      }
 85    },
 86    computed:{
 87        priorities(){
 88            return this.$store.getters.contextCard.priorities
 89        },
 90    },
 91    components:{
 92        Hyperpriority,
 93        Hypercard,
 94        Connect
 95    },
 96  }
 97  
 98  </script>
 99  
100  <style lang="stylus" scoped>
101  
102  @import '../styles/colours'
103  @import '../styles/skeleton'
104  @import '../styles/donut'
105  
106  
107  .dot
108      font-size: 1.9em
109      color: lightGrey
110      min-height: 1.3em
111      min-width: 1.3em
112      cursor: pointer
113      color: main
114      text-align: center
115      opacity: 0.2
116  
117  .dot:before
118      content: "\2022";
119  
120  .center
121      text-align: center
122  
123  .fw
124      width: 100%
125  
126  .priorities
127      padding-bottom: 0.6em
128      padding-top: 0.1em
129  
130  .clearboth
131      clear: both
132  
133  .priority
134      margin-left: 0em
135      width: 100%
136      position: relative
137  
138  .subpriority
139      margin-left: 3.3724em
140      width: calc(100% - 3.3724em)
141  
142  .subsubpriority
143      margin-left: 3.3724em
144      width: calc(100% - 3.3724em)
145  
146  .opensubcard
147      width: calc(100% - 0.5em)
148      margin-top: 0.5em
149  
150  .priorityContainer
151      display: flex;
152      justify-content: space-between;
153      width:100%
154  
155  </style>