Skip to content

Commit 9c47df8

Browse files
pedrolamaspedrolamas
committed
refactor: column picker simplification
Signed-off-by: Pedro Lamas <[email protected]>
1 parent b5166f8 commit 9c47df8

15 files changed

+201
-218
lines changed

‎src/components/ui/AppColumnPicker.vue

+14-10
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
<v-list-item-title>{{ header.text }}</v-list-item-title>
4848
</v-list-item-content>
4949
<v-list-item-action class="my-0">
50-
<v-checkbox :input-value="header.visible" />
50+
<v-checkbox :input-value="header.visible !== false" />
5151
</v-list-item-action>
5252
</v-list-item>
5353
</template>
@@ -58,33 +58,37 @@
5858

5959
<script lang="ts">
6060
import { Component, Vue, Prop } from 'vue-property-decorator'
61-
import type { AppTableHeader } from '@/types'
62-
import type { AppTablePartialHeader } from '@/types/tableheaders'
61+
import type { AppDataTableHeader } from '@/types'
62+
import type { ConfiguredTableHeader } from '@/store/config/types'
6363
6464
@Component({})
6565
export default class AppColumnPicker extends Vue {
6666
@Prop({ type: String, required: true })
6767
readonly keyName!: string
6868
69-
@Prop({ type: Array<AppTableHeader>, required: true })
70-
readonly headers!: AppTableHeader[]
69+
@Prop({ type: Array<AppDataTableHeader>, required: true })
70+
readonly headers!: AppDataTableHeader[]
7171
72-
get configurableHeaders (): AppTableHeader[] {
72+
get configurableHeaders (): AppDataTableHeader[] {
7373
return this.headers
7474
}
7575
76-
set configurableHeaders (value: AppTableHeader[]) {
76+
set configurableHeaders (value: AppDataTableHeader[]) {
7777
const headers = value
78-
.map(({ value, visible }): AppTablePartialHeader => ({
78+
.map(({ value, visible }): ConfiguredTableHeader => ({
7979
value,
8080
visible
8181
}))
8282
8383
this.$store.dispatch('config/updateHeaders', { name: this.keyName, headers })
8484
}
8585
86-
handleToggleHeader (header: AppTablePartialHeader) {
87-
header.visible = !header.visible
86+
handleToggleHeader (value: AppDataTableHeader) {
87+
const header : ConfiguredTableHeader = {
88+
value: value.value,
89+
visible: !(value.visible !== false)
90+
}
91+
8892
this.$store.dispatch('config/updateHeader', { name: this.keyName, header })
8993
}
9094
}

‎src/components/widgets/filesystem/FileSystem.vue

+129-127
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ import FileNameDialog from './FileNameDialog.vue'
156156
import FileSystemUploadDialog from './FileSystemUploadDialog.vue'
157157
import FileSystemGoToFileDialog from './FileSystemGoToFileDialog.vue'
158158
import FilePreviewDialog from './FilePreviewDialog.vue'
159-
import type { AppTableHeader, FileWithPath } from '@/types'
159+
import type { AppDataTableHeader, FileWithPath } from '@/types'
160160
import { getFilesFromDataTransfer, hasFilesInDataTransfer } from '@/util/file-system-entry'
161161
import { getFileDataTransferDataFromDataTransfer, hasFileDataTransferTypeInDataTransfer, setFileDataTransferDataInDataTransfer } from '@/util/file-data-transfer'
162162
import consola from 'consola'
@@ -298,133 +298,135 @@ export default class FileSystem extends Mixins(StateMixin, FilesMixin, ServicesM
298298
}
299299
}
300300
301-
get configurableHeaders (): AppTableHeader[] {
301+
get configurableHeaders (): AppDataTableHeader[] {
302302
const isNotDashboard = this.name !== 'dashboard'
303303
304-
const headers: AppTableHeader[] = [
305-
...this.currentRoot === 'gcodes'
306-
? [
307-
{
308-
text: this.$tc('app.general.table.header.status'),
309-
value: 'history.status',
310-
visible: isNotDashboard,
311-
cellClass: 'text-no-wrap'
312-
},
313-
{
314-
text: this.$tc('app.general.table.header.height'),
315-
value: 'object_height',
316-
visible: isNotDashboard,
317-
cellClass: 'text-no-wrap'
318-
},
319-
{
320-
text: this.$tc('app.general.table.header.first_layer_height'),
321-
value: 'first_layer_height',
322-
visible: false,
323-
cellClass: 'text-no-wrap'
324-
},
325-
{
326-
text: this.$tc('app.general.table.header.layer_height'),
327-
value: 'layer_height',
328-
visible: isNotDashboard,
329-
cellClass: 'text-no-wrap'
330-
},
331-
{
332-
text: this.$tc('app.general.table.header.filament_name'),
333-
value: 'filament_name',
334-
visible: isNotDashboard,
335-
cellClass: 'text-no-wrap'
336-
},
337-
{
338-
text: this.$tc('app.general.table.header.filament_type'),
339-
value: 'filament_type',
340-
visible: isNotDashboard,
341-
cellClass: 'text-no-wrap'
342-
},
343-
{
344-
text: this.$tc('app.general.table.header.filament'),
345-
value: 'filament_total',
346-
visible: isNotDashboard,
347-
cellClass: 'text-no-wrap'
348-
},
349-
{
350-
text: this.$tc('app.general.table.header.filament_weight_total'),
351-
value: 'filament_weight_total',
352-
visible: isNotDashboard,
353-
cellClass: 'text-no-wrap'
354-
},
355-
{
356-
text: this.$tc('app.general.table.header.filament_used'),
357-
value: 'history.filament_used',
358-
visible: false,
359-
cellClass: 'text-no-wrap'
360-
},
361-
{
362-
text: this.$tc('app.general.table.header.nozzle_diameter'),
363-
value: 'nozzle_diameter',
364-
visible: isNotDashboard,
365-
cellClass: 'text-no-wrap'
366-
},
367-
{
368-
text: this.$tc('app.general.table.header.slicer'),
369-
value: 'slicer',
370-
visible: isNotDashboard,
371-
cellClass: 'text-no-wrap'
372-
},
373-
{
374-
text: this.$tc('app.general.table.header.slicer_version'),
375-
value: 'slicer_version',
376-
visible: false,
377-
cellClass: 'text-no-wrap'
378-
},
379-
{
380-
text: this.$tc('app.general.table.header.estimated_time'),
381-
value: 'estimated_time',
382-
visible: isNotDashboard,
383-
cellClass: 'text-no-wrap'
384-
},
385-
{
386-
text: this.$tc('app.general.table.header.print_duration'),
387-
value: 'history.print_duration',
388-
visible: false,
389-
cellClass: 'text-no-wrap'
390-
},
391-
{
392-
text: this.$tc('app.general.table.header.total_duration'),
393-
value: 'history.total_duration',
394-
visible: isNotDashboard,
395-
cellClass: 'text-no-wrap'
396-
},
397-
{
398-
text: this.$tc('app.general.table.header.first_layer_bed_temp'),
399-
value: 'first_layer_bed_temp',
400-
visible: false,
401-
cellClass: 'text-no-wrap'
402-
},
403-
{
404-
text: this.$tc('app.general.table.header.first_layer_extr_temp'),
405-
value: 'first_layer_extr_temp',
406-
visible: false,
407-
cellClass: 'text-no-wrap'
408-
},
409-
{
410-
text: this.$tc('app.general.table.header.chamber_temp'),
411-
value: 'chamber_temp',
412-
visible: false,
413-
cellClass: 'text-no-wrap'
414-
},
415-
{
416-
text: this.$tc('app.general.table.header.file_processors'),
417-
value: 'file_processors',
418-
visible: false,
419-
cellClass: 'text-no-wrap'
420-
},
421-
{
422-
text: this.$tc('app.general.table.header.last_printed'),
423-
value: 'print_start_time',
424-
cellClass: 'text-no-wrap'
425-
}
426-
]
427-
: [],
304+
const gcodeHeaders: AppDataTableHeader[] = this.currentRoot === 'gcodes'
305+
? [
306+
{
307+
text: this.$tc('app.general.table.header.status'),
308+
value: 'history.status',
309+
visible: isNotDashboard,
310+
cellClass: 'text-no-wrap'
311+
},
312+
{
313+
text: this.$tc('app.general.table.header.height'),
314+
value: 'object_height',
315+
visible: isNotDashboard,
316+
cellClass: 'text-no-wrap'
317+
},
318+
{
319+
text: this.$tc('app.general.table.header.first_layer_height'),
320+
value: 'first_layer_height',
321+
visible: false,
322+
cellClass: 'text-no-wrap',
323+
},
324+
{
325+
text: this.$tc('app.general.table.header.layer_height'),
326+
value: 'layer_height',
327+
visible: isNotDashboard,
328+
cellClass: 'text-no-wrap'
329+
},
330+
{
331+
text: this.$tc('app.general.table.header.filament_name'),
332+
value: 'filament_name',
333+
visible: isNotDashboard,
334+
cellClass: 'text-no-wrap'
335+
},
336+
{
337+
text: this.$tc('app.general.table.header.filament_type'),
338+
value: 'filament_type',
339+
visible: isNotDashboard,
340+
cellClass: 'text-no-wrap'
341+
},
342+
{
343+
text: this.$tc('app.general.table.header.filament'),
344+
value: 'filament_total',
345+
visible: isNotDashboard,
346+
cellClass: 'text-no-wrap'
347+
},
348+
{
349+
text: this.$tc('app.general.table.header.filament_weight_total'),
350+
value: 'filament_weight_total',
351+
visible: isNotDashboard,
352+
cellClass: 'text-no-wrap'
353+
},
354+
{
355+
text: this.$tc('app.general.table.header.filament_used'),
356+
value: 'history.filament_used',
357+
visible: false,
358+
cellClass: 'text-no-wrap'
359+
},
360+
{
361+
text: this.$tc('app.general.table.header.nozzle_diameter'),
362+
value: 'nozzle_diameter',
363+
visible: isNotDashboard,
364+
cellClass: 'text-no-wrap'
365+
},
366+
{
367+
text: this.$tc('app.general.table.header.slicer'),
368+
value: 'slicer',
369+
visible: isNotDashboard,
370+
cellClass: 'text-no-wrap'
371+
},
372+
{
373+
text: this.$tc('app.general.table.header.slicer_version'),
374+
value: 'slicer_version',
375+
visible: false,
376+
cellClass: 'text-no-wrap'
377+
},
378+
{
379+
text: this.$tc('app.general.table.header.estimated_time'),
380+
value: 'estimated_time',
381+
visible: isNotDashboard,
382+
cellClass: 'text-no-wrap'
383+
},
384+
{
385+
text: this.$tc('app.general.table.header.print_duration'),
386+
value: 'history.print_duration',
387+
visible: false,
388+
cellClass: 'text-no-wrap'
389+
},
390+
{
391+
text: this.$tc('app.general.table.header.total_duration'),
392+
value: 'history.total_duration',
393+
visible: isNotDashboard,
394+
cellClass: 'text-no-wrap'
395+
},
396+
{
397+
text: this.$tc('app.general.table.header.first_layer_bed_temp'),
398+
value: 'first_layer_bed_temp',
399+
visible: false,
400+
cellClass: 'text-no-wrap'
401+
},
402+
{
403+
text: this.$tc('app.general.table.header.first_layer_extr_temp'),
404+
value: 'first_layer_extr_temp',
405+
visible: false,
406+
cellClass: 'text-no-wrap'
407+
},
408+
{
409+
text: this.$tc('app.general.table.header.chamber_temp'),
410+
value: 'chamber_temp',
411+
visible: false,
412+
cellClass: 'text-no-wrap'
413+
},
414+
{
415+
text: this.$tc('app.general.table.header.file_processors'),
416+
value: 'file_processors',
417+
visible: false,
418+
cellClass: 'text-no-wrap'
419+
},
420+
{
421+
text: this.$tc('app.general.table.header.last_printed'),
422+
value: 'print_start_time',
423+
cellClass: 'text-no-wrap'
424+
}
425+
]
426+
: []
427+
428+
const headers: AppDataTableHeader[] = [
429+
...gcodeHeaders,
428430
{
429431
text: this.$tc('app.general.table.header.modified'),
430432
value: 'modified',
@@ -440,7 +442,7 @@ export default class FileSystem extends Mixins(StateMixin, FilesMixin, ServicesM
440442
]
441443
442444
const key = `${this.currentRoot}_${this.name}`
443-
const mergedTableHeaders: AppTableHeader[] = this.$store.getters['config/getMergedTableHeaders'](headers, key)
445+
const mergedTableHeaders: AppDataTableHeader[] = this.$store.getters['config/getMergedTableHeaders'](headers, key)
444446
445447
return mergedTableHeaders
446448
}

‎src/components/widgets/filesystem/FileSystemBrowser.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
{{
9797
value != null
9898
? $filters.getReadableLengthString(value)
99-
: '-- '
99+
: '--'
100100
}}
101101
</template>
102102

‎src/components/widgets/filesystem/FileSystemToolbar.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ import { Component, Prop, Mixins, PropSync } from 'vue-property-decorator'
156156
import StatesMixin from '@/mixins/state'
157157
import FileSystemAddMenu from './FileSystemAddMenu.vue'
158158
import FileSystemFilterMenu from './FileSystemFilterMenu.vue'
159-
import type { AppTableHeader } from '@/types'
159+
import type { AppDataTableHeader } from '@/types'
160160
import type { RootProperties } from '@/store/files/types'
161161
162162
@Component({
@@ -178,8 +178,8 @@ export default class FileSystemToolbar extends Mixins(StatesMixin) {
178178
readonly roots?: string[]
179179
180180
// Currently defined list of headers.
181-
@Prop({ type: Array<AppTableHeader> })
182-
readonly headers?: AppTableHeader[]
181+
@Prop({ type: Array<AppDataTableHeader> })
182+
readonly headers?: AppDataTableHeader[]
183183
184184
// The current path
185185
@Prop({ type: String })

‎src/components/widgets/history/JobHistory.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ import FilesMixin from '@/mixins/files'
157157
import getFilePaths from '@/util/get-file-paths'
158158
import type { HistoryItem } from '@/store/history/types'
159159
import { SocketActions } from '@/api/socketActions'
160-
import type { AppTableHeader } from '@/types'
160+
import type { AppDataTableHeader } from '@/types'
161161
import type { DataTableHeader } from 'vuetify'
162162
163163
@Component({
@@ -169,8 +169,8 @@ export default class JobHistory extends Mixins(FilesMixin) {
169169
expanded: HistoryItem[] = []
170170
search = ''
171171
172-
get configurableHeaders (): AppTableHeader[] {
173-
const headers: AppTableHeader[] = [
172+
get configurableHeaders (): AppDataTableHeader[] {
173+
const headers: AppDataTableHeader[] = [
174174
{
175175
text: this.$tc('app.general.table.header.status'),
176176
value: 'status',
@@ -211,7 +211,7 @@ export default class JobHistory extends Mixins(FilesMixin) {
211211
},
212212
]
213213
214-
const mergedTableHeaders: AppTableHeader[] = this.$store.getters['config/getMergedTableHeaders'](headers, 'history')
214+
const mergedTableHeaders: AppDataTableHeader[] = this.$store.getters['config/getMergedTableHeaders'](headers, 'history')
215215
216216
return mergedTableHeaders
217217
}

0 commit comments

Comments
 (0)