-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathproject_list.twig
More file actions
192 lines (187 loc) · 16.6 KB
/
project_list.twig
File metadata and controls
192 lines (187 loc) · 16.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
{% extends '@common.presentation/base_appshell.html.twig' %}
{% block title %}{{ 'project.list.title'|trans }}{% endblock %}
{% block content %}
<div class="space-y-6" data-test-id="project-list-page">
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<h1 class="text-2xl font-semibold text-dark-900 dark:text-dark-100" data-test-id="project-list-heading">{{ 'project.list.heading'|trans }}</h1>
<p class="text-dark-600 dark:text-dark-400 mt-1">{{ 'project.list.description'|trans }}</p>
</div>
{% if projectsWithStatus is not empty %}
<a href="{{ path('project_mgmt.presentation.new') }}"
data-test-id="project-list-add-project"
class="inline-flex justify-center px-4 py-2 rounded-md bg-primary-600 text-white text-sm font-medium hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-dark-900">
{{ 'project.list.add_project'|trans }}
</a>
{% endif %}
</div>
{% if projectsWithStatus is empty %}
<div class="text-center py-12">
<svg class="mx-auto h-12 w-12 text-dark-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
</svg>
<h3 class="mt-2 text-sm font-medium text-dark-900 dark:text-dark-100">{{ 'project.list.no_projects'|trans }}</h3>
<p class="mt-1 text-sm text-dark-500 dark:text-dark-400">{{ 'project.list.no_projects_description'|trans }}</p>
<div class="mt-6">
<a href="{{ path('project_mgmt.presentation.new') }}"
data-test-id="project-list-add-project"
class="inline-flex items-center px-4 py-2 rounded-md bg-primary-600 text-white text-sm font-medium hover:bg-primary-700">
{{ 'project.list.add_project'|trans }}
</a>
</div>
</div>
{% else %}
<div class="space-y-4">
{% for item in projectsWithStatus %}
{% set statusColors = {
'AVAILABLE_FOR_SETUP': 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200',
'IN_SETUP': 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
'AVAILABLE_FOR_CONVERSATION': 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
'IN_CONVERSATION': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
'IN_REVIEW': 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
'MERGED': 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200',
'PROBLEM': 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
} %}
<div class="rounded-lg border border-dark-200 dark:border-dark-700 bg-white dark:bg-dark-900 p-4" data-test-class="project-list-item">
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
{# Project info section #}
<div class="flex-1 min-w-0 space-y-2">
<div class="flex flex-wrap items-center gap-2">
<h3 class="text-sm font-medium text-dark-900 dark:text-dark-100">{{ item.project.name }}</h3>
{% if item.workspace %}
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ statusColors[item.workspace.status.name] ?? 'bg-gray-100 text-gray-800' }}">
{{ item.workspace.status.name | replace({'_': ' '}) | lower | capitalize }}
</span>
{% if item.inConversationBy %}
<span class="text-xs text-dark-500 dark:text-dark-400">{{ 'project.list.in_conversation_with'|trans({'%email%': item.inConversationBy}) }}</span>
{% endif %}
{% else %}
<span class="text-xs text-dark-400 dark:text-dark-500">{{ 'project.list.no_workspace'|trans }}</span>
{% endif %}
</div>
<div class="flex flex-wrap items-center gap-2 text-sm text-dark-500 dark:text-dark-400">
<span class="truncate">{{ item.project.gitUrl }}</span>
{% if item.project.githubUrl %}
<a href="{{ item.project.githubUrl }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 text-primary-600 dark:text-primary-400 hover:underline">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
{{ 'project.list.view_on_github'|trans }}
</a>
{% endif %}
{% if item.workspace and item.workspace.githubBranchUrl %}
<a href="{{ item.workspace.githubBranchUrl }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 text-primary-600 dark:text-primary-400 hover:underline">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</svg>
{{ 'project.list.work_area'|trans }}
</a>
{% endif %}
{% if item.workspace and item.workspace.githubPrUrl %}
<a href="{{ item.workspace.githubPrUrl }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 text-primary-600 dark:text-primary-400 hover:underline">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
{{ 'project.list.review'|trans }}
</a>
{% endif %}
</div>
</div>
{# Actions section #}
<div class="flex flex-wrap gap-2">
{% if item.workspace and item.workspace.status.name == 'IN_REVIEW' and item.conversationId %}
<a href="{{ path('chat_based_content_editor.presentation.show', { conversationId: item.conversationId }) }}"
class="inline-flex items-center px-3 py-1.5 rounded-md bg-primary-600 text-white text-sm font-medium hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
{{ 'project.list.view_conversation_for_review'|trans }}
</a>
{% elseif item.workspace and item.inConversationBy !== null and item.inConversationBy !== user.email and item.conversationId %}
<a href="{{ path('chat_based_content_editor.presentation.show', { conversationId: item.conversationId }) }}"
class="inline-flex items-center px-3 py-1.5 rounded-md bg-primary-600 text-white text-sm font-medium hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
{{ 'project.list.view_conversation'|trans }}
</a>
{% else %}
<a href="{{ path('chat_based_content_editor.presentation.start', { projectId: item.project.id }) }}"
data-test-class="project-list-edit-content-link"
class="inline-flex items-center px-3 py-1.5 rounded-md bg-primary-600 text-white text-sm font-medium hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
{{ 'project.list.edit_content'|trans }}
</a>
{% endif %}
<a href="{{ path('project_mgmt.presentation.edit', { id: item.project.id }) }}"
class="inline-flex items-center px-3 py-1.5 rounded-md border border-dark-300 dark:border-dark-600 text-dark-700 dark:text-dark-300 text-sm font-medium hover:bg-dark-100 dark:hover:bg-dark-700">
{{ 'project.list.edit_details'|trans }}
</a>
{% if item.workspace %}
<form action="{{ path('project_mgmt.presentation.reset_workspace', { id: item.project.id }) }}"
method="post"
class="inline-block"
onsubmit="return confirm('{{ 'project.list.reset_confirm'|trans|e('js') }}');">
<input type="hidden" name="_csrf_token" value="{{ csrf_token('reset_workspace_' ~ item.project.id) }}">
<button type="submit"
class="inline-flex items-center px-3 py-1.5 rounded-md border border-red-300 dark:border-red-700 text-red-700 dark:text-red-400 text-sm font-medium hover:bg-red-50 dark:hover:bg-red-900/20">
{{ 'project.list.reset_work_area'|trans }}
</button>
</form>
{% endif %}
<form action="{{ path('project_mgmt.presentation.delete', { id: item.project.id }) }}"
method="post"
class="inline-block"
onsubmit="return confirm('{{ 'project.list.delete_confirm'|trans|e('js') }}');">
<input type="hidden" name="_csrf_token" value="{{ csrf_token('delete_project_' ~ item.project.id) }}">
<button type="submit"
class="inline-flex items-center px-3 py-1.5 rounded-md border border-red-300 dark:border-red-700 text-red-700 dark:text-red-400 text-sm font-medium hover:bg-red-50 dark:hover:bg-red-900/20">
{{ 'common.delete'|trans }}
</button>
</form>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
{# Deleted projects section (collapsed by default) #}
{% if deletedProjects is not empty %}
<details class="mt-8 border border-dark-200 dark:border-dark-700 rounded-lg">
<summary class="px-4 py-3 cursor-pointer select-none text-sm font-medium text-dark-500 dark:text-dark-400 hover:bg-dark-50 dark:hover:bg-dark-900/50 rounded-lg">
{{ 'project.list.deleted_projects'|trans({'%count%': deletedProjects|length}) }}
</summary>
<div class="px-4 pb-4 pt-2 space-y-3 border-t border-dark-200 dark:border-dark-700">
<p class="text-xs text-dark-500 dark:text-dark-400">
{{ 'project.list.deleted_projects_info'|trans }}
</p>
{% for project in deletedProjects %}
<div class="rounded-lg border border-dark-200 dark:border-dark-700 bg-dark-50 dark:bg-dark-800 p-3">
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div class="min-w-0">
<h4 class="text-sm font-medium text-dark-700 dark:text-dark-300">{{ project.name }}</h4>
<p class="text-xs text-dark-500 dark:text-dark-400 truncate">{{ project.gitUrl }}</p>
<p class="text-xs text-dark-400 dark:text-dark-500 mt-1">
{{ 'project.list.deleted_at'|trans({'%date%': project.deletedAt|date('M j, Y \\a\\t g:i a')}) }}
</p>
</div>
<div class="flex flex-shrink-0 gap-2">
<form action="{{ path('project_mgmt.presentation.restore', { id: project.id }) }}"
method="post">
<input type="hidden" name="_csrf_token" value="{{ csrf_token('restore_project_' ~ project.id) }}">
<button type="submit"
class="inline-flex items-center px-3 py-1.5 rounded-md bg-primary-600 text-white text-sm font-medium hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
{{ 'project.list.restore'|trans }}
</button>
</form>
<form action="{{ path('project_mgmt.presentation.permanently_delete', { id: project.id }) }}"
method="post"
onsubmit="return confirm('{{ 'project.list.delete_permanently_confirm'|trans|e('js') }}');">
<input type="hidden" name="_csrf_token" value="{{ csrf_token('permanently_delete_project_' ~ project.id) }}">
<button type="submit"
class="inline-flex items-center px-3 py-1.5 rounded-md bg-red-600 text-white text-sm font-medium hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">
{{ 'project.list.delete_permanently'|trans }}
</button>
</form>
</div>
</div>
</div>
{% endfor %}
</div>
</details>
{% endif %}
</div>
{% endblock content %}