Skip to content

Commit 73331b2

Browse files
shweta2101shweta2101
committed
Fixed demo comments
1 parent f4de880 commit 73331b2

7 files changed

Lines changed: 777 additions & 470 deletions

File tree

‎components/workspace-project-details/SelectedTaskBar.vue‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
<template>
2+
<section class="project-detail-task-action-bar" aria-label="Selected task actions">
3+
<button
4+
class="btn btn-link project-detail-task-action-close"
5+
type="button"
6+
@click="$emit('close')"
7+
>
8+
<app-icon variant="close" size="20" no-margin />
9+
Close
10+
</button>
11+
12+
<div class="project-detail-task-action-summary">
13+
<div class="project-detail-task-action-copy">
14+
<span>Selected Task</span>
15+
<strong>{{ task.label }}</strong>
16+
</div>
17+
18+
<div class="project-detail-task-action-status">
19+
<span>Current Status</span>
20+
<strong>
21+
<span
22+
class="project-detail-task-action-status-swatch"
23+
:class="`project-detail-task-action-status-${task.status}`"
24+
/>
25+
{{ statusLabel }}
26+
</strong>
27+
</div>
28+
</div>
29+
30+
<button
31+
v-if="showActionButton"
32+
class="btn project-detail-task-action-primary"
33+
type="button"
34+
:disabled="actionDisabled"
35+
@click="$emit('action')"
36+
>
37+
<app-spinner v-if="busy" size="sm" />
38+
<template v-else>
39+
{{ actionLabel }}
40+
</template>
41+
</button>
42+
</section>
43+
</template>
44+
45+
<script setup lang="ts">
46+
import type { WorkspaceProjectTaskListItem } from '~/types/projects';
47+
48+
interface Props {
49+
actionDisabled: boolean;
50+
actionLabel: string;
51+
busy: boolean;
52+
showActionButton: boolean;
53+
statusLabel: string;
54+
task: WorkspaceProjectTaskListItem;
55+
}
56+
57+
defineProps<Props>();
58+
59+
defineEmits<{
60+
action: [];
61+
close: [];
62+
}>();
63+
</script>
64+
65+
<style lang="scss" scoped>
66+
@import "~/assets/scss/theme.scss";
67+
68+
.project-detail-task-action-bar {
69+
min-height: 6.6rem;
70+
display: flex;
71+
align-items: center;
72+
justify-content: space-between;
73+
gap: 1.5rem;
74+
padding: 1rem 2.2rem;
75+
background: rgba(255, 255, 255, 0.98);
76+
border: 1px solid rgba($text-navy, 0.12);
77+
border-top: 0;
78+
border-radius: 0 0 1rem 1rem;
79+
box-shadow: 0 -0.6rem 1.8rem rgba($text-navy, 0.08);
80+
backdrop-filter: blur(8px);
81+
}
82+
83+
.project-detail-task-action-close {
84+
display: inline-flex;
85+
align-items: center;
86+
gap: 0.55rem;
87+
padding: 0;
88+
color: #db4b4b;
89+
font-size: 1rem;
90+
font-weight: 600;
91+
text-decoration: none;
92+
}
93+
94+
.project-detail-task-action-close:hover,
95+
.project-detail-task-action-close:focus-visible {
96+
color: #c93c3c;
97+
}
98+
99+
.project-detail-task-action-summary {
100+
flex: 1;
101+
min-width: 0;
102+
display: flex;
103+
align-items: center;
104+
justify-content: flex-end;
105+
gap: 2rem;
106+
}
107+
108+
.project-detail-task-action-copy,
109+
.project-detail-task-action-status {
110+
display: grid;
111+
gap: 0.28rem;
112+
min-width: 0;
113+
}
114+
115+
.project-detail-task-action-copy span,
116+
.project-detail-task-action-status span {
117+
color: #707796;
118+
font-size: 0.95rem;
119+
}
120+
121+
.project-detail-task-action-copy strong,
122+
.project-detail-task-action-status strong {
123+
display: inline-flex;
124+
align-items: center;
125+
gap: 0.55rem;
126+
color: #1a1e3d;
127+
font-size: 1.1rem;
128+
font-weight: 700;
129+
}
130+
131+
.project-detail-task-action-status {
132+
padding-left: 1.8rem;
133+
border-left: 1px solid rgba($text-navy, 0.12);
134+
}
135+
136+
.project-detail-task-action-status-swatch {
137+
width: 1rem;
138+
height: 1rem;
139+
flex-shrink: 0;
140+
border: 1px solid rgba(90, 96, 123, 0.12);
141+
}
142+
143+
.project-detail-task-action-status-ready_for_mapping {
144+
background: #fde9aa;
145+
}
146+
147+
.project-detail-task-action-status-ready_for_validation {
148+
background: #a8d8f8;
149+
}
150+
151+
.project-detail-task-action-status-needs_more_mapping {
152+
background: #f8be90;
153+
}
154+
155+
.project-detail-task-action-status-completed {
156+
background: #aae8cd;
157+
}
158+
159+
.project-detail-task-action-primary {
160+
min-width: 11.5rem;
161+
min-height: 3.35rem;
162+
padding-inline: 1.5rem;
163+
color: #ffffff;
164+
font-size: 1rem;
165+
font-weight: 700;
166+
background: #4d158d;
167+
border: 1px solid #4d158d;
168+
border-radius: 0.55rem;
169+
}
170+
171+
.project-detail-task-action-primary:hover:not(:disabled),
172+
.project-detail-task-action-primary:focus-visible:not(:disabled) {
173+
color: #ffffff;
174+
background: #421178;
175+
border-color: #421178;
176+
}
177+
178+
.project-detail-task-action-primary:disabled {
179+
opacity: 0.62;
180+
}
181+
182+
@include media-breakpoint-down(xl) {
183+
.project-detail-task-action-bar {
184+
padding-left: 1.75rem;
185+
padding-right: 1.75rem;
186+
}
187+
}
188+
189+
@include media-breakpoint-down(lg) {
190+
.project-detail-task-action-bar {
191+
flex-wrap: wrap;
192+
padding: 1rem 1.75rem;
193+
}
194+
195+
.project-detail-task-action-summary {
196+
justify-content: flex-start;
197+
}
198+
}
199+
200+
@include media-breakpoint-down(md) {
201+
.project-detail-task-action-summary {
202+
width: 100%;
203+
flex-direction: column;
204+
align-items: flex-start;
205+
gap: 1rem;
206+
}
207+
208+
.project-detail-task-action-status {
209+
padding-left: 0;
210+
border-left: 0;
211+
}
212+
}
213+
214+
@include media-breakpoint-down(sm) {
215+
.project-detail-task-action-bar {
216+
padding: 1rem;
217+
}
218+
219+
.project-detail-task-action-primary {
220+
width: 100%;
221+
}
222+
}
223+
</style>

‎components/workspace-project-details/TasksTab.vue‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
<div v-if="paginatedTasks.length > 0" class="project-detail-task-list-header" aria-hidden="true">
4141
<span>Task ID</span>
4242
<span>Status</span>
43-
<span>Mapper</span>
43+
<span>Locked By</span>
4444
<span>Last Updated</span>
4545
</div>
4646

@@ -76,13 +76,13 @@
7676
<span class="project-detail-task-mobile-label">Status</span>
7777
<span class="project-detail-task-status">
7878
<span class="project-detail-task-status-swatch" :class="`project-detail-task-status-${task.status}`" />
79-
{{ formatTaskStatus(task.status) }}
79+
{{ formatTaskStatus(task) }}
8080
</span>
8181
</div>
8282

8383
<div class="project-detail-task-cell">
84-
<span class="project-detail-task-mobile-label">Mapper</span>
85-
<span class="project-detail-task-value">{{ task.mapperName }}</span>
84+
<span class="project-detail-task-mobile-label">Locked By</span>
85+
<span class="project-detail-task-value">{{ task.lock?.user_name ?? 'Not locked' }}</span>
8686
</div>
8787

8888
<div class="project-detail-task-cell">
@@ -157,6 +157,8 @@
157157
* Emits `select-task` when a task row is clicked, so the parent page can highlight it on the map.
158158
*/
159159
import type { WorkspaceProjectTaskListItem, WorkspaceProjectTaskStatus } from '~/types/projects';
160+
import type { WorkspaceRole } from '~/types/workspaces';
161+
import { resolveWorkspaceProjectTaskStatusLabel } from '~/util/task-status';
160162
161163
type TaskSortOption = 'latest' | 'oldest' | 'task_asc' | 'task_desc';
162164
type TaskStatusFilter = WorkspaceProjectTaskStatus | 'all';
@@ -176,6 +178,8 @@ interface Props {
176178
mutatingTaskNumber?: number | null;
177179
/** The task ID currently highlighted on the map (synced from the parent page). */
178180
selectedTaskId?: string | null;
181+
/** Effective role of the signed-in user within this project. */
182+
viewerProjectRole?: WorkspaceRole | null;
179183
/** Full list of tasks for this project. Filtering/sorting is applied in this component. */
180184
tasks: WorkspaceProjectTaskListItem[];
181185
}
@@ -345,18 +349,8 @@ watch(totalPages, (pageCount) => {
345349
* Convert the internal API status string to a display-friendly label.
346350
* If you add a new status value to `WorkspaceProjectTaskStatus`, add a case here too.
347351
*/
348-
function formatTaskStatus(status: WorkspaceProjectTaskStatus) {
349-
switch (status) {
350-
case 'ready_for_validation':
351-
return 'Ready for validation';
352-
case 'needs_more_mapping':
353-
return 'More mapping needed';
354-
case 'completed':
355-
return 'Completed';
356-
case 'ready_for_mapping':
357-
default:
358-
return 'Ready for mapping';
359-
}
352+
function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
353+
return resolveWorkspaceProjectTaskStatusLabel(task, props.viewerProjectRole);
360354
}
361355
</script>
362356

0 commit comments

Comments
 (0)