Skip to content

Commit 62684bc

Browse files
author
Peter
committed
refactoring, reduced complexity
1 parent fff0fb7 commit 62684bc

File tree

9 files changed

+129
-114
lines changed

9 files changed

+129
-114
lines changed

‎frontend/src/components/Actions.vue‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,22 @@
3535

3636
<script>
3737
import { Rpc } from '../rpc.js'
38+
import { mapGetters } from 'vuex'
3839
export default {
3940
computed: {
4041
buttonsDisabled () {
41-
return this.$store.state.states[this.$store.state.selectedState] && this.$store.state.states[this.$store.state.selectedState].selectedFiles.length === 0
42+
return this.$store.state.views[this.$store.state.activeView] && this.selectedFiles.length === 0
4243
},
4344
multipleFilesSelected () {
44-
return this.$store.state.states[this.$store.state.selectedState] && this.$store.state.states[this.$store.state.selectedState].selectedFiles.length > 1
45-
}
45+
return this.$store.state.views[this.$store.state.activeView] && this.selectedFiles.length > 1
46+
},
47+
...mapGetters([
48+
'selectedFiles',
49+
'currentPathString',
50+
'otherPathString',
51+
'otherState',
52+
'focusedFile'
53+
])
4654
},
4755
data: () => {
4856
return {
@@ -81,18 +89,17 @@
8189
},
8290
executeBinaryCommand (command) {
8391
let currentState = this.$store.getters.currentState
84-
let currentPath = currentState.selectedRoot + '/' + this.$store.getters.currentPathString
85-
let otherState = this.$store.getters.otherState
86-
let otherPath = otherState.selectedRoot + '/' + this.$store.getters.otherPathString
92+
let currentPath = currentState.selectedRoot + '/' + this.currentPathString
93+
let otherPath = this.otherState.selectedRoot + '/' + this.otherPathString
8794
8895
let vm = this
8996
vm.$store.commit('startProgress', {
90-
max: currentState.selectedFiles.length
97+
max: this.selectedFiles.length
9198
})
9299
let fileIndex = 0
93100
94101
function run (index) {
95-
let fileName = currentState.selectedFiles.splice(0, 1)[0]
102+
let fileName = vm.selectedFiles.splice(0, 1)[0]
96103
vm.$store.commit('progress', {
97104
message: fileName,
98105
progress: fileIndex
@@ -101,7 +108,7 @@
101108
.then(response => {
102109
if (response.error) {
103110
vm.$store.commit('error', response.error)
104-
} else if (currentState.selectedFiles.length === 0) {
111+
} else if (vm.selectedFiles.length === 0) {
105112
vm.$store.commit('commandFinished')
106113
} else {
107114
fileIndex++
@@ -158,6 +165,7 @@
158165
<style>
159166
.actions {
160167
clear: both;
161-
width: 100%; text-align: center;
168+
width: 100%;
169+
text-align: center;
162170
}
163171
</style>

‎frontend/src/components/Dialogs/DeleteDialog.vue‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<script>
1212
import Modal from './Modal.vue'
1313
import { Rpc } from '../../rpc'
14+
import { mapGetters } from 'vuex'
1415
export default {
1516
components: {
1617
Modal
@@ -21,19 +22,26 @@
2122
keypress: null
2223
}
2324
},
25+
computed: {
26+
...mapGetters([
27+
'selectedFiles',
28+
'currentPathString',
29+
'currentState'
30+
])
31+
},
2432
methods: {
2533
deleteFile () {
2634
this.$store.commit('deleteFileWait')
27-
let currentState = this.$store.getters.currentState
28-
let path = currentState.selectedRoot + this.$store.getters.currentPathString
35+
let currentState = this.currentState
36+
let path = currentState.selectedRoot + this.currentPathString
2937
let vm = this
3038
vm.$store.commit('startProgress', {
31-
max: currentState.selectedFiles.length
39+
max: this.selectedFiles.length
3240
})
3341
let fileIndex = 0
3442
3543
function del (index) {
36-
let fileName = currentState.selectedFiles.splice(0, 1)
44+
let fileName = vm.selectedFiles.splice(0, 1)
3745
vm.$store.commit('progress', {
3846
message: fileName,
3947
progress: fileIndex
@@ -42,19 +50,20 @@
4250
.then(response => {
4351
if (response.error) {
4452
vm.$store.commit('error', response.error)
45-
} else if (currentState.selectedFiles.length === 0) {
53+
} else if (vm.selectedFiles.length === 0) {
4654
vm.$store.commit('commandFinished')
4755
} else {
4856
fileIndex++
4957
del()
5058
}
5159
})
5260
}
61+
5362
del()
5463
}
5564
},
5665
created () {
57-
this.fileCount = this.$store.getters.currentState.selectedFiles.length
66+
this.fileCount = this.selectedFiles.length
5867
var vm = this
5968
this.keypress = function (e) {
6069
if (e.key === 'Enter' && e.target.nodeName !== 'BUTTON') {

‎frontend/src/components/Dialogs/ProgressDialog.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@
3737
3838
.progress {
3939
background-color: yellow;
40+
color: blue;
4041
height: 100%;
42+
text-align: right;
4143
}
4244
</style>

‎frontend/src/components/Dialogs/RenameDialog.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
<script>
1717
import Modal from './Modal.vue'
1818
import { Rpc } from '../../rpc'
19+
import { mapGetters } from 'vuex'
1920
export default {
2021
components: {
2122
Modal
@@ -27,6 +28,11 @@
2728
keypress: null
2829
}
2930
},
31+
computed: {
32+
...mapGetters([
33+
'selectedFiles'
34+
])
35+
},
3036
methods: {
3137
rename () {
3238
this.$store.commit('renameWait')
@@ -51,8 +57,8 @@
5157
}
5258
}
5359
}
54-
this.name = this.$store.getters.currentState.selectedFiles[0]
55-
this.oldName = this.$store.getters.currentState.selectedFiles[0]
60+
this.name = this.selectedFiles[0]
61+
this.oldName = this.selectedFiles[0]
5662
window.addEventListener('keyup', this.keypress)
5763
},
5864
mounted () {

‎frontend/src/components/File.vue‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,15 @@
1010
</template>
1111
<script>
1212
export default{
13-
props: ['file', 'selected', 'focused'],
13+
props: ['file'],
14+
computed: {
15+
selected () {
16+
return this.file.selected
17+
},
18+
focused () {
19+
return this.file.focused
20+
}
21+
},
1422
methods: {
1523
size (size) {
1624
if (size < 1000) {

‎frontend/src/components/FileView.vue‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,6 @@
2323
</div>
2424
<file v-for="(file, index) in files"
2525
:file="file"
26-
:selected="selected(file)"
27-
:focused="isFocused(file)"
2826
:key="file.name"
2927
@click.native="selectFile(file, index, $event)"
3028
@dblclick.native="changePath(file)">
@@ -36,48 +34,44 @@
3634
<script>
3735
import File from './File.vue'
3836
import FileHeader from './FileHeader.vue'
39-
import {Rpc} from '../rpc.js'
40-
import {EventBus} from '../EventBus'
37+
import { Rpc } from '../rpc.js'
38+
import { EventBus } from '../EventBus'
4139
4240
export default{
4341
props: ['roots', 'id'],
4442
data: () => {
4543
return {
46-
files: [],
4744
loading: false,
4845
eventListener: null,
4946
focusedFileIndex: -1
5047
}
5148
},
5249
computed: {
5350
state () {
54-
return this.$store.state.states[this.id]
51+
return this.$store.state.views[this.id]
5552
},
5653
roots () {
5754
return this.$store.state.roots
5855
},
5956
selectedRoot () {
60-
return this.$store.state.states[this.id].selectedRoot
57+
return this.$store.state.views[this.id].selectedRoot
6158
},
6259
isSelected () {
63-
return this.$store.state.selectedState === this.id
60+
return this.$store.state.activeView === this.id
6461
},
6562
path () {
66-
return [this.selectedRoot].concat(this.$store.state.states[this.id].path)
63+
return [this.selectedRoot].concat(this.$store.state.views[this.id].path)
6764
},
6865
pathString () {
69-
return this.$store.state.states[this.id].path.reduce((acc, p) => {
66+
return this.$store.state.views[this.id].path.reduce((acc, p) => {
7067
return acc + '/' + p
7168
}, '')
7269
},
73-
isViewSelected () {
74-
return this.$store.state.selectedState === this.id
70+
files () {
71+
return this.$store.state.views[this.id].files
7572
},
7673
focusedFile () {
77-
if (this.files.length) {
78-
return this.files[this.focusedFileIndex]
79-
}
80-
return ''
74+
return this.files.find(file => file.focused)
8175
}
8276
},
8377
components: {
@@ -93,27 +87,29 @@
9387
}
9488
},
9589
methods: {
96-
selected (file) {
97-
return this.$store.state.states[this.id] && this.$store.state.states[this.id].selectedFiles.includes(file.name)
98-
},
99-
isFocused (file) {
100-
return this.focusedFile === file
90+
focusFile (index) {
91+
this.files.forEach(file => { file.focused = false })
92+
this.focusedFileIndex = index
93+
if (index >= 0) {
94+
this.files[index].focused = true
95+
}
10196
},
10297
selectFile (file, index, event) {
10398
if (event.shiftKey) {
10499
let begin = Math.min(this.focusedFileIndex, index)
105100
let end = Math.max(this.focusedFileIndex, index) + 1
106-
let selectedFiles = this.files
101+
this.files.forEach(file => { file.selected = false })
102+
this.files
107103
.slice(begin, end)
108-
.map(file => file.name)
109-
this.$store.commit('selectFiles', {stateId: this.id, value: selectedFiles})
104+
.forEach(file => { file.selected = true })
110105
return
111106
} else if (event.ctrlKey) {
112-
this.$store.commit('selectFile', {stateId: this.id, value: file.name})
107+
file.selected = !file.selected
113108
} else {
114-
this.$store.commit('selectSingleFile', {stateId: this.id, value: file.name})
109+
this.files.forEach(file => { file.selected = false })
110+
file.selected = true
115111
}
116-
this.focusedFileIndex = index
112+
this.focusFile(index)
117113
},
118114
selectRootFn (e) {
119115
this.selectRoot(e.target.value)
@@ -126,11 +122,11 @@
126122
return
127123
}
128124
this.$store.commit('changePath', {stateId: this.id, value: file.name})
129-
this.focusedFileIndex = -1
125+
this.focusFile(-1)
130126
},
131127
changePathToParent () {
132128
this.$store.commit('changePathToParent', {stateId: this.id})
133-
this.focusedFileIndex = -1
129+
this.focusFile(-1)
134130
},
135131
setPath (index) {
136132
this.$store.commit('setPath', {stateId: this.id, value: index})
@@ -149,9 +145,13 @@
149145
response.result.filter((file) => {
150146
return file.type === 'f'
151147
})
152-
)
148+
).map(file => {
149+
file.selected = false
150+
file.focused = false
151+
return file
152+
})
153153
vm.loading = false
154-
vm.files = files
154+
this.$store.state.views[this.id].files = files
155155
})
156156
}
157157
},
@@ -161,25 +161,25 @@
161161
})
162162
let vm = this
163163
this.eventListener = (e) => {
164-
if (!vm.isViewSelected || vm.$store.state.ui.state !== 'browse') {
164+
if (!vm.isSelected || vm.$store.state.ui.state !== 'browse') {
165165
return
166166
}
167167
switch (e.key) {
168168
case 'ArrowUp':
169169
if (e.ctrlKey || e.shiftKey) {
170-
vm.$store.commit('selectFile', {stateId: vm.id, value: vm.focusedFile.name})
170+
vm.focusedFile.selected = !vm.focusedFile.selected
171171
}
172172
let hasParentDirectory = vm.path.length > 1
173173
let lowerFileIndex = hasParentDirectory
174174
? -1
175175
: 0
176-
vm.focusedFileIndex = Math.max(vm.focusedFileIndex - 1, lowerFileIndex)
176+
vm.focusFile(Math.max(vm.focusedFileIndex - 1, lowerFileIndex))
177177
break
178178
case 'ArrowDown':
179179
if (e.ctrlKey || e.shiftKey) {
180-
vm.$store.commit('selectFile', {stateId: vm.id, value: vm.focusedFile.name})
180+
vm.focusedFile.selected = !vm.focusedFile.selected
181181
}
182-
vm.focusedFileIndex = Math.min(vm.focusedFileIndex + 1, vm.files.length - 1)
182+
vm.focusFile(Math.min(vm.focusedFileIndex + 1, vm.files.length - 1))
183183
break
184184
case 'Tab':
185185
var newRootSelectionIndex = (vm.roots.indexOf(vm.selectedRoot) + (e.shiftKey ? -1 : 1)) % vm.roots.length
@@ -191,7 +191,7 @@
191191
e.preventDefault()
192192
break
193193
case ' ':
194-
vm.$store.commit('selectFile', {stateId: vm.id, value: vm.focusedFile.name})
194+
vm.focusedFile.selected = !vm.focusedFile.selected
195195
break
196196
case 'Enter':
197197
if (vm.focusedFileIndex === -1) {

0 commit comments

Comments
 (0)