Skip to content

Commit 5b0ff66

Browse files
davidmatasdavidmatas
committed
Add course list table and fetching
1 parent 7d436c5 commit 5b0ff66

File tree

3 files changed

+154
-0
lines changed

3 files changed

+154
-0
lines changed

‎src/apps/backoffice/backend/controllers/CoursesGetController.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ export class CoursesGetController implements Controller {
1212
async run(_req: Request, res: Response) {
1313
const query = new SearchAllCoursesQuery();
1414
const queryResponse: SearchAllCoursesResponse = await this.queryBus.ask(query);
15+
16+
res.header('Access-Control-Allow-Origin', '*');
1517
res.status(httpStatus.OK).send(this.toResponse(queryResponse.courses));
1618
}
1719

‎src/apps/backoffice/frontend/templates/pages/courses/courses.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,5 @@
1515
{% include 'pages/courses/partials/new_course_form.html' %}
1616
<div class="clearfix mb-10"></div>
1717
<hr class="mb-10">
18+
{% include 'pages/courses/partials/list_courses.html' %}
1819
{% endblock %}

‎src/apps/backoffice/frontend/templates/pages/courses/partials/list_courses.html‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<h3 class="font-sans text-gray-800 text-center text-3xl mb-10">Cursos existentes</h3>
2+
3+
<!-- <form action="" method="get" id="courses-filters" name="filter-courses">
4+
<div id="filter-rows">
5+
6+
</div>
7+
<div class="clearfix"></div>
8+
<div class="mt-10 inline-block relative w-2/4">
9+
<button class="md:w-1/4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
10+
id="add-field-button"
11+
onclick="addFilter(event)">
12+
Añadir filtro
13+
</button>
14+
15+
<button class="md:w-1/4 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
16+
id="filter-button"
17+
onclick="filterCourses(event)">
18+
👉 Filtrar 👈
19+
</button>
20+
</div>
21+
</form> -->
22+
23+
<table class="text-left w-full border-collapse">
24+
<thead>
25+
<tr>
26+
<th class="py-4 px-6 bg-grey-lightest font-bold uppercase text-sm text-grey-dark border-b border-grey-light">
27+
Id
28+
</th>
29+
<th class="py-4 px-6 bg-grey-lightest font-bold uppercase text-sm text-grey-dark border-b border-grey-light">
30+
Nombre
31+
</th>
32+
<th class="py-4 px-6 bg-grey-lightest font-bold uppercase text-sm text-grey-dark border-b border-grey-light">
33+
Duración
34+
</th>
35+
</tr>
36+
</thead>
37+
<tbody id="courses-list">
38+
39+
</tbody>
40+
</table>
41+
42+
<script>
43+
function addCoursesList(url) {
44+
console.log(url);
45+
46+
const tableBody = document.getElementById("courses-list");
47+
48+
fetch(url)
49+
.then(function (response) {
50+
console.log(response)
51+
return response.json();
52+
})
53+
.then(function (courses) {
54+
tableBody.innerHTML = "";
55+
56+
courses.forEach(function (course) {
57+
let courseRow = document.createElement("tr");
58+
59+
courseRow.appendChild(tableCellFor(course.id));
60+
courseRow.appendChild(tableCellFor(course.name));
61+
courseRow.appendChild(tableCellFor(course.duration));
62+
63+
tableBody.appendChild(courseRow);
64+
})
65+
});
66+
}
67+
68+
function tableCellFor(text) {
69+
const cell = document.createElement("td");
70+
71+
cell.appendChild(document.createTextNode(text));
72+
73+
return cell;
74+
}
75+
76+
function addFilter(e) {
77+
e.preventDefault();
78+
79+
const filterRows = document.getElementById('filter-rows');
80+
const totalRows = document.getElementById('filter-rows').childElementCount;
81+
82+
const filterRowTemplate = "<div class=\"filter-row\">\n" +
83+
" <div class=\"inline-block relative w-64 mr-3\">\n" +
84+
" <label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\" for=\"field\">\n" +
85+
" Campo\n" +
86+
" </label>\n" +
87+
" <select name=\"filters[" +
88+
totalRows +
89+
"][field]\" id=\"field\"\n" +
90+
" class=\"block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline\">\n" +
91+
" <option value=\"id\">Identificador</option>\n" +
92+
" <option value=\"name\">Nombre</option>\n" +
93+
" <option value=\"duration\">Duración</option>\n" +
94+
" </select>\n" +
95+
" <div class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700\">\n" +
96+
" <svg class=\"fill-current h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n" +
97+
" <path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\"/>\n" +
98+
" </svg>\n" +
99+
" </div>\n" +
100+
" </div>\n" +
101+
" <div class=\"inline-block relative w-64 mr-3\">\n" +
102+
" <label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\" for=\"operator\">\n" +
103+
" Operador\n" +
104+
" </label>\n" +
105+
" <select id=\"operator\" name=\"filters[" +
106+
totalRows +
107+
"][operator]\"\n" +
108+
" class=\"block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline\">\n" +
109+
" <option value=\"=\">es exactamente igual</option>\n" +
110+
" <option value=\"CONTAINS\">contiene</option>\n" +
111+
" <option value=\">\">es más grande que</option>\n" +
112+
" <option value=\"<\">es más pequeño que</option>\n" +
113+
" </select>\n" +
114+
" <div class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700\">\n" +
115+
" <svg class=\"fill-current h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n" +
116+
" <path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\"/>\n" +
117+
" </svg>\n" +
118+
" </div>\n" +
119+
" </div>\n" +
120+
" <div class=\"inline-block relative w-64 mr-3\">\n" +
121+
" <label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\" for=\"value\">\n" +
122+
" Valor\n" +
123+
" </label>\n" +
124+
" <input class=\"appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500\"\n" +
125+
" id=\"value\" type=\"text\" name=\"filters[" +
126+
totalRows +
127+
"][value]\" placeholder=\"Lo que sea...\">\n" +
128+
" </div>\n" +
129+
"</div>";
130+
131+
filterRows.insertAdjacentHTML('beforeend', filterRowTemplate);
132+
}
133+
134+
function filterCourses(e) {
135+
e.preventDefault();
136+
137+
const form = document.forms["filter-courses"];
138+
139+
const inputs = Array.from(form.getElementsByTagName("input"))
140+
.concat(Array.from(form.getElementsByTagName("select")));
141+
142+
const urlParts = inputs.map(input => input.name + "=" + input.value);
143+
144+
const url = "http://localhost:8040/courses?" + urlParts.join("&");
145+
146+
addCoursesList(url);
147+
}
148+
</script>
149+
<script>
150+
addCoursesList("http://localhost:3000/courses");
151+
</script>

0 commit comments

Comments
 (0)