Skip to content

Commit 5f08494

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

18 files changed

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

0 commit comments

Comments
 (0)