Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add ability to re-arrange job queue's items #1692

Merged
merged 20 commits into from
Feb 3, 2024
Merged

feat: Add ability to re-arrange job queue's items #1692

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
a353fb2
feat: Add job queue entry position change feature
mdziekon Dec 16, 2023
5c9e2f3
feat: Add ability to move queue item to the queue top
mdziekon Dec 16, 2023
041946c
feat: Allow to move queue item up
mdziekon Dec 16, 2023
3a970d6
feat: Print button on the first queue item should be controlled via flag
mdziekon Dec 16, 2023
03b0379
feat: Allow to move queue item down
mdziekon Dec 16, 2023
9f15847
feat: Add ability to move queue item to the queue bottom
mdziekon Dec 16, 2023
3ba546c
feat: Change the nomenclature of queue's start & end
mdziekon Dec 16, 2023
4ace234
feat: Do not display duplicated re-arrangement features
mdziekon Dec 16, 2023
e6a3c33
feat: Formatting & linting fixes
mdziekon Dec 16, 2023
828677c
feat: Simplify changePosition's code
mdziekon Dec 16, 2023
fd09c33
feat: Add reusable convertJobToFilenames()
mdziekon Dec 16, 2023
ff847ca
Merge branch 'develop' into feature/job-queue-rearrange-items
meteyou Feb 2, 2024
4bd752b
refactor: refactor some code syntax
meteyou Feb 2, 2024
fba7f8e
refactor: refactor jobqueue entry and add draggable sort function
meteyou Feb 3, 2024
6f74dd4
fix: fix job counter in status panel for jobqueue
meteyou Feb 3, 2024
a535bd7
feat: add function to start with every job in the jobqueue
meteyou Feb 3, 2024
667aadb
fix: hide start button in jobqueue panel
meteyou Feb 3, 2024
6f24592
refactor: remove unused style section
meteyou Feb 3, 2024
a44ef79
locale(en): remove unused keys
meteyou Feb 3, 2024
0e71f13
locale(pl): remove unused keys
meteyou Feb 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions src/components/dialogs/JobqueueEntryChangeCountDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<template>
<v-dialog :value="show" max-width="400">
<panel
:title="$t('JobQueue.ChangeCount')"
:icon="mdiCounter"
card-class="jobqueue-change-count-dialog"
:margin-bottom="false">
<template #buttons>
<v-btn icon tile @click="closeDialog">
<v-icon>{{ mdiCloseThick }}</v-icon>
</v-btn>
</template>

<v-card-text>
<v-text-field
ref="inputFieldAddToQueueCount"
v-model="count"
:label="$t('JobQueue.Count')"
required
:rules="countInputRules"
hide-spin-buttons
type="number"
@keyup.enter="update">
<template #append-outer>
<div class="_spin_button_group">
<v-btn class="mt-n3" icon plain small @click="count++">
<v-icon>{{ mdiChevronUp }}</v-icon>
</v-btn>
<v-btn :disabled="count <= 1" class="mb-n3" icon plain small @click="count--">
<v-icon>{{ mdiChevronDown }}</v-icon>
</v-btn>
</div>
</template>
</v-text-field>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn color="" text @click="closeDialog">{{ $t('JobQueue.Cancel') }}</v-btn>
<v-btn color="primary" text @click="update">{{ $t('JobQueue.ChangeCount') }}</v-btn>
</v-card-actions>
</panel>
</v-dialog>
</template>
<script lang="ts">
import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'
import Panel from '@/components/ui/Panel.vue'
import { mdiCloseThick, mdiChevronUp, mdiChevronDown, mdiCounter } from '@mdi/js'
import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'

@Component({
components: { Panel },
})
export default class JobqueueEntryChangeCountDialog extends Mixins(BaseMixin) {
mdiCloseThick = mdiCloseThick
mdiChevronUp = mdiChevronUp
mdiChevronDown = mdiChevronDown
mdiCounter = mdiCounter

@Prop({ type: Boolean, required: true }) show!: boolean
@Prop({ type: Object, required: true }) job!: ServerJobQueueStateJob

count = 1

countInputRules = [
(value: string) => !!value || this.$t('JobQueue.InvalidCountEmpty'),
(value: string) => parseInt(value) > 0 || this.$t('JobQueue.InvalidCountGreaterZero'),
]

update() {
this.$store.dispatch('server/jobQueue/changeCount', {
job_id: this.job.job_id,
count: this.count,
})

this.closeDialog()
}

closeDialog() {
this.$emit('close')
}

@Watch('show')
showChanged(show: boolean) {
if (show) this.count = (this.job.combinedIds?.length ?? 0) + 1
}
}
</script>
150 changes: 63 additions & 87 deletions src/components/panels/JobqueuePanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,53 @@
<template>
<div>
<panel
ref="jobqueuePanel"
:icon="mdiTrayFull"
:title="$t('JobQueue.JobQueue').toString()"
card-class="jobqueue-panel">
<template #buttons>
<v-btn
v-if="queueState === 'paused'"
color="success"
:loading="loadings.includes('startJobqueue')"
icon
tile
:disabled="!klipperReadyForGui"
@click="startJobqueue">
<v-tooltip top>
<template #activator="{ on, attrs }">
<v-icon v-bind="attrs" v-on="on">{{ mdiPlay }}</v-icon>
</template>
<span>{{ $t('JobQueue.Start') }}</span>
</v-tooltip>
</v-btn>
<v-btn
v-if="['ready', 'loading'].includes(queueState)"
color="warning"
:loading="loadings.includes('pauseJobqueue')"
icon
tile
@click="pauseJobqueue">
<v-tooltip top>
<template #activator="{ on, attrs }">
<v-icon v-bind="attrs" v-on="on">{{ mdiPause }}</v-icon>
</template>
<span>{{ $t('JobQueue.Pause') }}</span>
</v-tooltip>
</v-btn>
</template>
<v-data-table
:items="jobs"
class="jobqueue-table"
sort-by="time_added"
:items-per-page.sync="countPerPage"
:footer-props="{
itemsPerPageText: $t('JobQueue.Jobs'),
itemsPerPageAllText: $t('JobQueue.AllJobs'),
itemsPerPageOptions: [10, 25, 50, 100, -1],
}"
mobile-breakpoint="0">
<template #no-data>
<div class="text-center">{{ $t('JobQueue.Empty') }}</div>
</template>

<template #item="{ item }">
<jobqueue-entry :key="item.job_id" :item="item" :content-td-width="contentTdWidth" />
</template>
</v-data-table>
<resize-observer @notify="handleResize" />
</panel>
</div>
<panel :icon="mdiTrayFull" :title="$t('JobQueue.JobQueue')" card-class="jobqueue-panel">
<template #buttons>
<v-btn
v-if="queueState === 'paused'"
color="success"
:loading="loadings.includes('startJobqueue')"
icon
tile
:disabled="!klipperReadyForGui"
@click="startJobqueue">
<v-tooltip top>
<template #activator="{ on, attrs }">
<v-icon v-bind="attrs" v-on="on">{{ mdiPlay }}</v-icon>
</template>
<span>{{ $t('JobQueue.Start') }}</span>
</v-tooltip>
</v-btn>
<v-btn
v-if="['ready', 'loading'].includes(queueState)"
color="warning"
:loading="loadings.includes('pauseJobqueue')"
icon
tile
@click="pauseJobqueue">
<v-tooltip top>
<template #activator="{ on, attrs }">
<v-icon v-bind="attrs" v-on="on">{{ mdiPause }}</v-icon>
</template>
<span>{{ $t('JobQueue.Pause') }}</span>
</v-tooltip>
</v-btn>
</template>
<v-row v-if="jobs.length" class="mx-0 mt-0">
<v-col>
<draggable
v-model="joblist"
handle=".handle"
class="jobqueue-list"
ghost-class="ghost"
group="jobs"
@end="updateOrder">
<jobqueue-entry v-for="job in jobs" :key="job.job_id" :job="job" :show-handle="true" />
</draggable>
</v-col>
</v-row>
<v-card-text v-else>
<p>{{ $t('JobQueue.Empty') }}</p>
</v-card-text>
</panel>
</template>

<script lang="ts">
Expand All @@ -66,19 +56,16 @@ import BaseMixin from '@/components/mixins/base'
import Panel from '@/components/ui/Panel.vue'
import { mdiPlay, mdiPause, mdiTrayFull } from '@mdi/js'
import JobqueueEntry from '@/components/panels/Status/JobqueueEntry.vue'
import draggable from 'vuedraggable'
@Component({
components: { JobqueueEntry, Panel },
components: { draggable, JobqueueEntry, Panel },
})
export default class JobqueuePanel extends Mixins(BaseMixin) {
mdiPlay = mdiPlay
mdiPause = mdiPause
mdiTrayFull = mdiTrayFull

private contentTdWidth = 100

declare $refs: {
jobqueuePanel: any
}
joblist = []

get jobs() {
return this.$store.getters['server/jobQueue/getJobs']
Expand All @@ -88,14 +75,6 @@ export default class JobqueuePanel extends Mixins(BaseMixin) {
return this.$store.state.server.jobQueue.queue_state ?? ''
}

get countPerPage() {
return this.$store.state.gui.view.jobqueue.countPerPage
}

set countPerPage(newVal) {
this.$store.dispatch('gui/saveSetting', { name: 'view.jobqueue.countPerPage', value: newVal })
}

startJobqueue() {
this.$store.dispatch('server/jobQueue/start')
}
Expand All @@ -104,24 +83,21 @@ export default class JobqueuePanel extends Mixins(BaseMixin) {
this.$store.dispatch('server/jobQueue/pause')
}

mounted() {
this.calcContentTdWidth()
}

calcContentTdWidth() {
this.contentTdWidth = this.$refs.jobqueuePanel?.$el?.clientWidth - 48 - 32
}

handleResize() {
this.$nextTick(() => {
this.calcContentTdWidth()
updateOrder(event: { oldIndex: number; newIndex: number }) {
this.$store.dispatch('server/jobQueue/changePosition', {
newIndex: event.newIndex,
oldIndex: event.oldIndex,
})
}
}
</script>

<style scoped>
.jobqueue-panel {
position: relative;
<style lang="scss">
.jobqueue-list > div + div {
border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.jobqueue-list > div.ghost {
background-color: rgba(255, 255, 255, 0.12);
}
</style>
Loading
Loading