Skip to content
Permalink
Browse files

Merge pull request #399 from clovers-network/billy/bulk-edit

Billy/bulk edit
  • Loading branch information...
okwme committed Sep 9, 2019
2 parents 50bebac + 00e1c16 commit c7c48d57fd779cebcf37a859cd8a255a74b98aec
Showing with 76 additions and 9 deletions.
  1. +13 −2 src/components/FieldItem.vue
  2. +22 −0 src/components/Icons/CheckIcon.vue
  3. +41 −7 src/views/Picks.vue
@@ -9,6 +9,9 @@
heart-icon.icon.h2.absolute.top-0.left-0.mt2.ml2(v-if="inField", :active="isSaved", @click="save")
button.icon.hidden.md-block.h6.absolute.top-0.left-0.ml2.mt2.pointer(v-else, @click.stop="remove")
span Discard
//- bulk edit
.check-icon.icon.h2.absolute.bottom-0.right-0.mb2.mr2.pointer(v-if="!inField", @click="check")
check-icon
//- symm icons
.green.absolute.top-0.right-0.mt2.mr2(v-if="clover.symmetrical")
symmetry-icons(:board="clover", style="font-size: 10px")
@@ -17,6 +20,7 @@
<script>
import { mapGetters } from 'vuex'
import { cloverImage } from '@/utils'
import CheckIcon from '@/components/Icons/CheckIcon'
import HeartIcon from '@/components/Icons/HeartIcon'
import SymmetryIcons from '@/components/Icons/SymmetryIcons'
@@ -39,14 +43,17 @@ export default {
},
methods: {
cloverImage,
check () {
this.$emit('check', this.clover)
},
save () {
this.$store.commit('SAVE_CLOVER', this.clover)
},
remove () {
this.$store.dispatch('confirmRemoveSavedClover', this.clover)
}
},
components: { HeartIcon, SymmetryIcons }
components: { HeartIcon, CheckIcon, SymmetryIcons }
}
</script>

@@ -59,14 +66,18 @@ export default {
opacity:0;
transition: opacity 300ms;
}
}
.bulkIndex .pick-border .check-icon {
opacity: 1 !important;
}
@media (hover:hover) {
.pick-border:hover {
border-color: #01B463;
& .icon:not(.heart-icon--active) {
opacity:0.4;
&:hover{
&:hover:not(.check-icon){
opacity:1;
}
}
@@ -0,0 +1,22 @@
<template>
<svg class="block" xmlns="http://www.w3.org/2000/svg" :width="width" :height="width" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline v-if="active" points="9 11 12 14 22 4"></polyline>
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
</svg>
</template>

<script>
export default {
name: 'CheckIcon',
props: {
active: {
type: Boolean,
default: true
},
width: {
type: Number,
default: 24
}
}
}
</script>
@@ -8,10 +8,12 @@
//- (picks list)
section.sm-col-10.lg-col-12.mx-auto.pb4.mb4(v-if="picks.length")
.flex.flex-wrap.mxn2.md-px2
field-item(v-for='(clover, i) in picks', :key='i' data-expand='-50', :data-appear='i % 3', :clover="clover", :class="foundClass(clover)")
footer.mt3.flex.justify-center(v-if="picks.length > 12 || alreadyFoundClovers.length")
button.red.border.rounded-2.p2.px3.mx3.pointer.hover-bg-l-red(@click="discardAll" v-if="picks.length > 12") Discard All
field-item(v-for='(clover, i) in picks', :key='i' data-expand='-50', :data-appear='i % 3', :clover="clover", :class="foundBulkClass(clover)", @check="check")
footer.mt3.flex.justify-center(v-if="picks.length > 12 || alreadyFoundClovers.length || bulkEdit.length")
button.red.border.rounded-2.p2.px3.mx3.pointer.hover-bg-l-red(@click="removeRegistered" v-if="alreadyFoundClovers.length") Remove Registered
button.red.border.rounded-2.p2.px3.mx3.pointer.hover-bg-l-red(@click="discardChecked" v-if="bulkEdit.length") Discard Selected
button.red.border.rounded-2.p2.px3.mx3.pointer.hover-bg-l-red(@click="removeChecked" v-if="bulkEdit.length") Deselect All
button.red.border.rounded-2.p2.px3.mx3.pointer.hover-bg-l-red(@click="checkAll" v-if="picks.length > 12 && bulkEdit.length !== picks.length") Select All
//- (no picks)
section.center(v-else)
p.p2.bg-lightest-green.rounded.my3 Your Basket is empty.
@@ -46,7 +48,8 @@ export default {
newClover: null,
newCloverMoves: null,
entryRt: this.$route.name,
alreadyFoundClovers: []
alreadyFoundClovers: [],
bulkEdit: []
}
},
watch: {
@@ -76,7 +79,32 @@ export default {
},
methods: {
cloverImage,
discardChecked () {
const confirm = window.confirm('Are you sure you want to discard ALL the selected clovers in your Basket? This action cannot be undone...')
if (confirm) {
this.bulkEdit.forEach(board => {
this.removeClover({board})
})
}
this.removeChecked()
},
removeChecked () {
this.bulkEdit = []
},
checkAll () {
this.bulkEdit = this.picks.map((p) => p.board)
},
bulkIndex (board) {
return this.bulkEdit.indexOf(board)
},
check (clover) {
let cloverIndex = this.bulkIndex(clover.board)
if (cloverIndex > -1) {
this.bulkEdit.splice(cloverIndex, 1)
} else {
this.bulkEdit.push(clover.board)
}
},
addNewClover () {
if (!this.newClover) return
this.saveClover(this.newClover)
@@ -105,9 +133,15 @@ export default {
const nextMvs = this.picks[i] && this.picks[i].movesString
return nextMvs && this.$router.push({query: {pick: nextMvs}})
},
foundClass (clover) {
foundBulkClass (clover) {
let found = this.alreadyFoundClovers.indexOf(clover.board) > -1
return !found ? {} : ['opacity-25']
let classes = !found ? [] : ['opacity-25']
let bulkIndex = this.bulkIndex(clover.board)
if (bulkIndex > -1) {
classes.push('bulkIndex')
}
return classes
},
removeRegistered () {
this.alreadyFoundClovers.forEach((board) => {

0 comments on commit c7c48d5

Please sign in to comment.
You can’t perform that action at this time.