Skip to content

Commit da7827e

Browse files
ksy36ksy36
committed
Add triage statuses
1 parent 60c2176 commit da7827e

18 files changed

Lines changed: 369 additions & 200 deletions

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,6 @@ dist/
3131
# NPM
3232
server/frontend/node_modules
3333
server/frontend/dist
34+
35+
# Git worktrees
36+
.worktrees/

‎server/frontend/src/components/Buckets/HideBucketBtn.vue‎

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎server/frontend/src/components/Buckets/HideBucketBtnForm.vue‎

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎server/frontend/src/components/Buckets/List.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -293,7 +293,7 @@ export default {
293293
pageSize: 100,
294294
queryError: "",
295295
queryStr: JSON.stringify(
296-
{ op: "AND", bug__isnull: true, hide_until__isnull: true },
296+
{ op: "AND", bug__isnull: true, triage_status__isnull: true },
297297
null,
298298
2,
299299
),
@@ -325,7 +325,7 @@ export default {
325325
return !this.queryStr.includes('"bug__isnull": true');
326326
},
327327
showHidden() {
328-
return !this.queryStr.includes('"hide_until__isnull": true');
328+
return !this.queryStr.includes('"triage_status__isnull": true');
329329
},
330330
},
331331
created() {
@@ -385,15 +385,15 @@ export default {
385385
if (this.showHidden) {
386386
this.queryStr = JSON.stringify(
387387
Object.assign(
388-
{ hide_until__isnull: true },
388+
{ triage_status__isnull: true },
389389
JSON.parse(this.queryStr),
390390
),
391391
null,
392392
2,
393393
);
394394
} else {
395395
const query = JSON.parse(this.queryStr);
396-
delete query["hide_until__isnull"];
396+
delete query["triage_status__isnull"];
397397
this.queryStr = JSON.stringify(query, null, 2);
398398
}
399399
this.fetch();

‎server/frontend/src/components/Buckets/TriageBucketDropdown.vue‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
<template>
2+
<div class="triage-bucket-dropdown">
3+
<a class="btn btn-default" @click="showPanel">
4+
{{ currentStatus ? "Change triage status" : "Mark triaged" }}
5+
</a>
6+
7+
<div v-if="isPanelVisible" class="triage-panel">
8+
<div class="panel-header">Select status</div>
9+
<div class="panel-options">
10+
<a
11+
v-for="choice in choices"
12+
:key="choice.value"
13+
class="panel-option"
14+
:class="{ 'panel-option--selected': choice.value === currentStatus }"
15+
@click="choice.value !== currentStatus && selectStatus(choice.value)"
16+
>
17+
<span class="option-rail"></span>
18+
<span class="option-label">{{ choice.label }}</span>
19+
<span v-if="choice.value === currentStatus" class="option-check">✓</span>
20+
</a>
21+
</div>
22+
<div v-if="currentStatus" class="panel-danger-zone">
23+
<a class="panel-option panel-option--unmark" @click="selectStatus(null)">
24+
<span class="option-rail"></span>
25+
<span class="option-label">Unmark triaged</span>
26+
</a>
27+
</div>
28+
<div class="panel-footer">
29+
<a class="panel-cancel" @click="hidePanel">Cancel</a>
30+
</div>
31+
</div>
32+
33+
<div v-if="isPanelVisible" class="panel-backdrop" @click="hidePanel"></div>
34+
</div>
35+
</template>
36+
37+
<script>
38+
export default {
39+
name: "TriageBucketDropdown",
40+
props: {
41+
bucketId: {
42+
type: Number,
43+
required: true,
44+
},
45+
currentStatus: {
46+
type: String,
47+
default: null,
48+
},
49+
choices: {
50+
type: Array,
51+
default: () => [],
52+
},
53+
},
54+
emits: ["update"],
55+
data() {
56+
return {
57+
isPanelVisible: false,
58+
};
59+
},
60+
methods: {
61+
showPanel() {
62+
this.isPanelVisible = true;
63+
},
64+
hidePanel() {
65+
this.isPanelVisible = false;
66+
},
67+
selectStatus(status) {
68+
this.isPanelVisible = false;
69+
this.$emit("update", status);
70+
},
71+
},
72+
};
73+
</script>
74+
75+
<style scoped>
76+
.triage-bucket-dropdown {
77+
display: inline-block;
78+
position: relative;
79+
}
80+
81+
.triage-panel {
82+
position: absolute;
83+
top: calc(100% + 5px);
84+
left: 0;
85+
background: #fff;
86+
border: 1px solid #ccc;
87+
border-radius: 5px;
88+
z-index: 1000;
89+
min-width: 210px;
90+
overflow: hidden;
91+
}
92+
93+
.panel-header {
94+
background: #fafafa;
95+
padding: 9px 14px 8px;
96+
border-bottom: 1px solid #eee;
97+
font-weight: bold;
98+
}
99+
100+
.panel-options {
101+
padding: 4px 0;
102+
}
103+
104+
.panel-option {
105+
display: flex;
106+
align-items: center;
107+
padding: 0;
108+
cursor: pointer;
109+
color: #333;
110+
text-decoration: none;
111+
}
112+
113+
.panel-option:hover {
114+
background-color: #f7f7f7;
115+
text-decoration: none;
116+
color: #333;
117+
}
118+
119+
.option-rail {
120+
display: block;
121+
width: 3px;
122+
align-self: stretch;
123+
background-color: transparent;
124+
flex-shrink: 0;
125+
border-radius: 0 2px 2px 0;
126+
}
127+
128+
.panel-option:hover .option-rail {
129+
background-color: #ccc;
130+
}
131+
132+
.panel-option--selected .option-rail {
133+
background-color: #0066cc;
134+
}
135+
136+
.option-label {
137+
flex: 1;
138+
padding: 8px 12px 8px 10px;
139+
font-size: 13px;
140+
line-height: 1.3;
141+
}
142+
143+
.option-check {
144+
padding-right: 12px;
145+
font-size: 11px;
146+
color: #0066cc;
147+
font-weight: 700;
148+
}
149+
150+
.panel-option--selected {
151+
background-color: #f0f6ff;
152+
cursor: default;
153+
pointer-events: none;
154+
}
155+
156+
.panel-option--selected .option-label {
157+
color: #0055aa;
158+
font-weight: 600;
159+
}
160+
161+
.panel-danger-zone {
162+
border-top: 1px solid #eee;
163+
}
164+
165+
.panel-option--unmark .option-label {
166+
color: #c0392b;
167+
}
168+
169+
.panel-option--unmark:hover {
170+
background-color: #fdf4f3;
171+
}
172+
173+
.panel-option--unmark:hover .option-rail {
174+
background-color: #c0392b;
175+
}
176+
177+
.panel-option--unmark:hover .option-label {
178+
color: #a93226;
179+
}
180+
181+
.panel-footer {
182+
padding: 7px 14px;
183+
border-top: 1px solid #eee;
184+
text-align: right;
185+
background: #fafafa;
186+
}
187+
188+
.panel-cancel {
189+
color: #999;
190+
cursor: pointer;
191+
text-decoration: none;
192+
}
193+
194+
.panel-cancel:hover {
195+
color: #555;
196+
text-decoration: none;
197+
}
198+
199+
.panel-backdrop {
200+
position: fixed;
201+
top: 0;
202+
left: 0;
203+
right: 0;
204+
bottom: 0;
205+
z-index: 999;
206+
}
207+
</style>

0 commit comments

Comments
 (0)