Skip to content

Commit 9d2d487

Browse files
sduenassduenas
authored
Merges #20 Closes #20
2 parents 58f3692 + d9764ec commit 9d2d487

File tree

19 files changed

+1153
-63
lines changed

19 files changed

+1153
-63
lines changed

‎.github/workflows/tests.yml‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,27 @@ jobs:
5656
- name: Tests
5757
run: |
5858
poetry run python manage.py test --settings=config.settings.testing
59+
60+
frontend:
61+
62+
strategy:
63+
matrix:
64+
node-version: [18.x, 20.x]
65+
66+
runs-on: ubuntu-latest
67+
name: Node ${{ matrix.node-version }}
68+
steps:
69+
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
70+
- name: Setup Node ${{ matrix.node-version }}
71+
uses: actions/setup-node@b39b52d1213e96004bfcb1c61a8a6fa8ab84f3e8 # 4.0.1
72+
with:
73+
node-version: ${{ matrix.node-version }}
74+
- name: Install dependencies
75+
working-directory: ./ui
76+
run: yarn install
77+
- name: Run ESLint
78+
working-directory: ./ui
79+
run: yarn lint
80+
- name: Run unit tests
81+
working-directory: ./ui
82+
run: yarn test:unit

‎ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"serve": "vite",
88
"build": "vite build --emptyOutDir",
99
"preview": "vite preview",
10-
"test:unit": "vitest",
10+
"test:unit": "vitest run",
1111
"test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
1212
"test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
1313
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",

‎ui/src/assets/main.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,9 @@
1111
font-weight: 400;
1212
font-style: normal;
1313
}
14+
15+
a {
16+
color: #1f2328;
17+
font-weight: 500;
18+
text-decoration: none;
19+
}

‎ui/src/components/TaskList/FormDialog.vue‎ renamed to ‎ui/src/components/FormDialog.vue‎

Lines changed: 18 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<template>
22
<v-dialog v-model="isOpen" max-width="600">
33
<template #activator="{ props: activatorProps }">
4-
<v-btn
5-
class="ml-auto"
6-
color="secondary"
7-
prepend-icon="mdi-plus"
8-
text="Add"
9-
variant="flat"
10-
v-bind="activatorProps"
11-
></v-btn>
4+
<slot name="activator" v-bind="{ props: activatorProps }">
5+
<v-btn
6+
class="ml-auto"
7+
color="secondary"
8+
prepend-icon="mdi-plus"
9+
text="Add"
10+
variant="flat"
11+
v-bind="activatorProps"
12+
></v-btn>
13+
</slot>
1214
</template>
1315

1416
<v-card title="Schedule task">
@@ -47,29 +49,10 @@
4749
</v-col>
4850
</v-row>
4951
<v-row>
50-
<v-col cols="6">
51-
<v-radio-group
52-
v-model="formData.scheduler.job_interval"
53-
density="comfortable"
54-
size="small"
55-
>
56-
<template #label>
57-
<span class="text-subtitle-2">Interval</span>
58-
</template>
59-
<v-radio :value="86400" label="Every day"></v-radio>
60-
<v-radio :value="604800" label="Every week"></v-radio>
61-
<v-radio value="custom" label="Custom"></v-radio>
62-
</v-radio-group>
63-
<v-text-field
64-
v-model="customInterval"
65-
class="ml-8"
66-
label="Every"
67-
type="number"
68-
suffix="seconds"
69-
hide-details
70-
required
71-
>
72-
</v-text-field>
52+
<v-col>
53+
<p class="text-subtitle-2 mb-4">Schedule</p>
54+
<interval-selector v-model="formData.scheduler.job_interval" density="comfortable">
55+
</interval-selector>
7356
</v-col>
7457
</v-row>
7558
</v-card-text>
@@ -83,8 +66,11 @@
8366
</v-dialog>
8467
</template>
8568
<script>
69+
import IntervalSelector from './IntervalSelector.vue'
70+
8671
export default {
8772
name: 'FormDialog',
73+
components: { IntervalSelector },
8874
emits: ['create'],
8975
data() {
9076
return {
@@ -99,7 +85,7 @@ export default {
9985
}
10086
},
10187
scheduler: {
102-
job_interval: 604800,
88+
job_interval: '604800',
10389
job_max_retries: 1
10490
}
10591
},
@@ -108,9 +94,6 @@ export default {
10894
},
10995
methods: {
11096
onSave() {
111-
if (this.formData.scheduler.job_interval === 'custom') {
112-
this.formData.scheduler.job_interval = this.customInterval
113-
}
11497
this.$emit('create', this.formData)
11598
this.isOpen = false
11699
}

‎ui/src/components/IntervalSelector.vue‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<template>
2+
<div>
3+
<v-btn-toggle
4+
:model-value="selected"
5+
:density
6+
mandatory
7+
shaped
8+
divided
9+
variant="outlined"
10+
base-color="#898B8E"
11+
height="40"
12+
block
13+
@update:model-value="handleToggle"
14+
>
15+
<v-btn class="text-subtitle-2 text-medium-emphasis" color="primary" value="86400">
16+
Daily
17+
</v-btn>
18+
<v-btn class="text-subtitle-2 text-medium-emphasis" color="primary" value="604800">
19+
Weekly
20+
</v-btn>
21+
<v-btn class="text-subtitle-2 text-medium-emphasis" color="primary" value="2629746">
22+
Monthly
23+
</v-btn>
24+
<v-btn
25+
class="text-subtitle-2 text-medium-emphasis"
26+
color="primary"
27+
value="custom"
28+
data-test="selector-custom"
29+
>
30+
Custom interval
31+
</v-btn>
32+
</v-btn-toggle>
33+
<div v-if="selected == 'custom'" class="pt-3 reduced-input">
34+
<v-text-field
35+
v-model="custom"
36+
:density
37+
data-test="input"
38+
label="Every"
39+
variant="outlined"
40+
hide-details
41+
@update:model-value="handleInput"
42+
>
43+
<template #append-inner>
44+
<span class="text-medium-emphasis">seconds</span>
45+
</template>
46+
</v-text-field>
47+
</div>
48+
</div>
49+
</template>
50+
<script>
51+
export default {
52+
name: 'IntervalSelector',
53+
emits: ['update:model-value'],
54+
props: {
55+
modelValue: {
56+
type: [String, Number],
57+
required: false,
58+
default: ''
59+
},
60+
density: {
61+
type: String,
62+
required: false,
63+
default: 'compact'
64+
}
65+
},
66+
data() {
67+
return {
68+
selected: this.modelValue,
69+
custom: ''
70+
}
71+
},
72+
methods: {
73+
handleToggle(event) {
74+
const value = event === 'custom' ? this.custom : event
75+
this.selected = event
76+
this.$emit('update:model-value', value)
77+
},
78+
handleInput(event) {
79+
if (this.selected === 'custom') {
80+
this.$emit('update:model-value', event)
81+
}
82+
}
83+
}
84+
}
85+
</script>
86+
<style lang="scss" scoped>
87+
.reduced-input {
88+
max-width: 366px;
89+
}
90+
</style>

0 commit comments

Comments
 (0)