Skip to content

Commit 3d60964

Browse files
ClivernClivern
committed
feat: support edit snapshot
1 parent da0b327 commit 3d60964

File tree

2 files changed

+149
-0
lines changed

2 files changed

+149
-0
lines changed

‎lib/lynx_web/templates/page/snapshots.html.heex

+52
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
var _globals = {
33
new_snapshot: '<%= gettext "Snapshot created successfully!" %>',
44
delete_snapshot_message: '<%= gettext "Snapshot deleted successfully!" %>',
5+
update_snapshot_message: '<%= gettext "Snapshot updated successfully!" %>',
56
delete_snapshot_alert: '<%= gettext "You are trying to delete a snapshot! are you sure?" %>',
67
delete_snapshot_endpoint: '<%= Routes.snapshot_path(@conn, :delete, "UUID") %>',
78
restore_snapshot_endpoint: '<%= Routes.snapshot_path(@conn, :restore, "UUID") %>',
@@ -314,6 +315,7 @@
314315
<td style="text-align: center">${formatDatetime(snapshot.createdAt)}</td>
315316
<td>
316317
<button @click="showSnapshotInfoAction(snapshot.description)" class="btn btn-dashed btn-sm text-black-100 border-black-100 hp-hover-text-color-black-80 hp-hover-border-color-black-80" data-bs-toggle="modal" data-bs-target="#show_snapshot_info_modal"><%= gettext "Info" %></button>
318+
<button @click="editSnapshotAction(snapshot.id)" class="btn btn-dashed btn-sm text-black-100 border-black-100 hp-hover-text-color-black-80 hp-hover-border-color-black-80" data-bs-toggle="modal" data-bs-target="#edit_snapshot_modal"><%= gettext "Edit" %></button>
317319
<button @click="restoreSnapshotAction(snapshot.id)" class="btn btn-dashed btn-sm text-warning-100 border-warning-100 hp-hover-text-color-warning-80 hp-hover-border-color-warning-80"><%= gettext "Restore" %></button>
318320
<button @click="deleteSnapshotAction(snapshot.id)" class="btn btn-dashed btn-sm text-danger border-danger hp-hover-text-color-danger-2 hp-hover-border-color-danger-2"><%= gettext "Delete" %></button>
319321
</td>
@@ -449,6 +451,56 @@
449451
</div>
450452
</div>
451453

454+
<div class="modal fade" id="edit_snapshot_modal" tabindex="-1" aria-labelledby="editSnapshotLabel" aria-hidden="true" data-action={Routes.team_path(@conn, :list)}>
455+
<div class="modal-dialog modal-dialog-centered">
456+
<div class="modal-content">
457+
<div class="modal-header py-16 px-24">
458+
<h5 class="modal-title" id="editSnapshotLabel"><%= gettext "Edit Snapshot" %></h5>
459+
<button type="button" class="btn-close hp-bg-none d-flex align-items-center justify-content-center" data-bs-dismiss="modal" aria-label="Close">
460+
<i class="ri-close-line hp-text-color-dark-0 lh-1" style="font-size: 24px;"></i>
461+
</button>
462+
</div>
463+
<div class="divider m-0"></div>
464+
<form id="update_snapshot_form" action={Routes.snapshot_path(@conn, :update, "UUID")} method="post" v-on:submit.prevent="updateSnapshotAction">
465+
<input type="hidden" value="" name="uuid">
466+
<div class="modal-body">
467+
<div class="row gx-8">
468+
<div class="col-12">
469+
<div class="mb-24">
470+
<label class="form-label"><%= gettext "Title" %></label>
471+
<input type="text" class="form-control" name="title" required="required" minlength="2" maxlength="60">
472+
</div>
473+
</div>
474+
475+
<div class="col-12">
476+
<div class="mb-24">
477+
<label class="form-label"><%= gettext "Description" %></label>
478+
<textarea name="description" class="form-control" required="required" minlength="2" maxlength="250"></textarea>
479+
</div>
480+
</div>
481+
482+
<div class="col-12">
483+
<div class="mb-24">
484+
<label class="form-label"><%= gettext "Team" %></label>
485+
<select class="form-select" name="team_id" required="required">
486+
<template v-for="team in teams">
487+
<option :value="team.id">${team.name}</option>
488+
</template>
489+
</select>
490+
</div>
491+
</div>
492+
</div>
493+
</div>
494+
495+
<div class="modal-footer pt-0 px-24 pb-24">
496+
<div class="divider"></div>
497+
<button type="submit" class="m-0 btn btn-primary w-100" :disabled="isInProgress"><%= gettext "Submit" %></button>
498+
</div>
499+
</form>
500+
</div>
501+
</div>
502+
</div>
503+
452504
</div>
453505

454506
<footer class="w-100 py-18 px-16 py-sm-24 px-sm-32 hp-bg-color-black-20 hp-bg-color-dark-90">

‎priv/static/theme/app/backend.js

+97
Original file line numberDiff line numberDiff line change
@@ -1255,6 +1255,32 @@ lynx_app.snapshots_list = (Vue, axios, $) => {
12551255
$("div#snapshot_info_modal_content").text(description);
12561256
},
12571257

1258+
editSnapshotAction(id) {
1259+
let current = $('form#update_snapshot_form input[name="uuid"]').val()
1260+
if (current != "") {
1261+
$('form#update_snapshot_form').attr('action', function(i, val) {
1262+
return val.replace(current, "UUID");
1263+
});
1264+
}
1265+
1266+
$('form#update_snapshot_form input[name="uuid"]').val(id);
1267+
$('form#update_snapshot_form').attr('action', function(i, val) {
1268+
return val.replace('UUID', id);
1269+
});
1270+
1271+
axios.get($("#update_snapshot_form").attr("action"))
1272+
.then((response) => {
1273+
if (response.status >= 200) {
1274+
$('form#update_snapshot_form input[name="title"]').val(response.data.title);
1275+
$('form#update_snapshot_form textarea[name="description"]').val(response.data.description);
1276+
$('form#update_snapshot_form select[name="team_id"]').val(response.data.team.id);
1277+
}
1278+
})
1279+
.catch((error) => {
1280+
show_notification(error.response.data.errorMessage);
1281+
});
1282+
},
1283+
12581284
formatDatetime(datatime) {
12591285
return format_datetime(datatime);
12601286
},
@@ -1333,6 +1359,69 @@ lynx_app.snapshots_list = (Vue, axios, $) => {
13331359
});
13341360
}
13351361

1362+
lynx_app.edit_snapshot_modal = (Vue, axios, $) => {
1363+
1364+
return new Vue({
1365+
delimiters: ['${', '}'],
1366+
el: '#edit_snapshot_modal',
1367+
data() {
1368+
return {
1369+
isInProgress: false,
1370+
teams: []
1371+
}
1372+
},
1373+
mounted() {
1374+
this.loadDataAction();
1375+
},
1376+
methods: {
1377+
loadDataAction() {
1378+
axios.get($("#edit_snapshot_modal").attr("data-action"), {
1379+
params: {
1380+
offset: 0,
1381+
limit: 10000
1382+
}
1383+
})
1384+
.then((response) => {
1385+
if (response.status >= 200) {
1386+
this.teams = response.data.teams;
1387+
}
1388+
})
1389+
.catch((error) => {
1390+
show_notification(error.response.data.errorMessage);
1391+
});
1392+
},
1393+
updateSnapshotAction(event) {
1394+
event.preventDefault();
1395+
this.isInProgress = true;
1396+
1397+
let inputs = {};
1398+
let _self = $(event.target);
1399+
let _form = _self.closest("form");
1400+
1401+
_form.serializeArray().map((item, index) => {
1402+
inputs[item.name] = item.value;
1403+
});
1404+
1405+
axios.put(_form.attr('action'), inputs)
1406+
.then((response) => {
1407+
if (response.status >= 200) {
1408+
show_notification(_globals.update_snapshot_message);
1409+
1410+
setTimeout(() => {
1411+
location.reload();
1412+
}, 2000);
1413+
}
1414+
})
1415+
.catch((error) => {
1416+
this.isInProgress = false;
1417+
// Show error
1418+
show_notification(error.response.data.errorMessage);
1419+
});
1420+
}
1421+
}
1422+
});
1423+
}
1424+
13361425
// Add Snapshot Modal
13371426
lynx_app.add_snapshot_modal = (Vue, axios, $) => {
13381427

@@ -1600,4 +1689,12 @@ $(document).ready(() => {
16001689
$
16011690
);
16021691
}
1692+
1693+
if (document.getElementById("edit_snapshot_modal")) {
1694+
lynx_app.edit_snapshot_modal(
1695+
Vue,
1696+
axios,
1697+
$
1698+
);
1699+
}
16031700
});

0 commit comments

Comments
 (0)