ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added Modal and router function

Browse Source
This commit is contained in:
Philippe Torrel
2026-07-22 11:26:14 +02:00
parent f0e074dc9f
commit 3ec02626a6
11 changed files with 5341 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
webseite-sass-js/projects/product-manager.html
View File

@@ -12,6 +12,7 @@
<link rel="manifest" href="/favicon/site.webmanifest" />
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
<link rel="stylesheet" href="/assets/css/main.css" />
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script> -->
<script src="/assets/js/build.js" defer></script>
</head>
<body>
@@ -111,6 +112,13 @@
<td class="td-name">[PRODUCT_NAME]</td>
<td class="td-price">[PRODUCT_PRICE]</td>
<td class="td-actions">
<button
class="btn btn-sm btn-primary button-product-edit"
data-bs-toggle="modal"
data-bs-target="#modal-edit">
<i class="fas fa-file-pen"></i>
<span class="visually-hidden">Edit Product</span>
</button>
<button class="btn btn-sm btn-danger button-product-remove">
<i class="fas fa-trash-can"></i>
<span class="visually-hidden">Remove Product</span>
@@ -126,6 +134,56 @@
</td>
</tr>
</template>
<!-- Modal Edit -->
<div
class="modal modal-edit fade"
id="modal-edit"
tabindex="-1"
aria-labelledby="modal-edit-label"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="modal-edit-label">Edit Product</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form class="form-product-edit">
<div class="modal-body">
<div class="row">
<div class="col-12 col-sm-8">
<div class="mb-3">
<label for="input-edit-name" class="form-label">Product Name</label>
<input type="text" id="input-edit-name" class="form-control input-edit-name" name="name" />
</div>
</div>
<div class="col-12 col-sm">
<div class="mb-3">
<label for="input-edit-price" class="form-label">Product Price</label>
<div class="input-group">
<input
type="number"
name="price"
id="input-edit-price"
class="form-control input-edit-price" />
<span class="input-group-text">&euro;</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary button-product-update">
<i class="fas fa-arrow-rotate-right"></i>
Update Product
</button>
</div>
</form>
</div>
</div>
</div>
<!-- ▲ /Modal ▲ -->
</div>
<!-- ▲ /product-manager ▲ -->
</main>