Skip to content

Commit

Permalink
feat: support edit snapshot
Browse files Browse the repository at this point in the history
  • Loading branch information
@Clivern
Clivern committed Sep 24, 2024
1 parent da0b327 commit 3d60964
Show file tree
Hide file tree
Showing 2 changed files with 149 additions and 0 deletions.
52 changes: 52 additions & 0 deletions lib/lynx_web/templates/page/snapshots.html.heex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
var _globals = {
new_snapshot: '<%= gettext "Snapshot created successfully!" %>',
delete_snapshot_message: '<%= gettext "Snapshot deleted successfully!" %>',
update_snapshot_message: '<%= gettext "Snapshot updated successfully!" %>',
delete_snapshot_alert: '<%= gettext "You are trying to delete a snapshot! are you sure?" %>',
delete_snapshot_endpoint: '<%= Routes.snapshot_path(@conn, :delete, "UUID") %>',
restore_snapshot_endpoint: '<%= Routes.snapshot_path(@conn, :restore, "UUID") %>',
Expand Down Expand Up @@ -314,6 +315,7 @@
<td style="text-align: center">${formatDatetime(snapshot.createdAt)}</td>
<td>
<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>
<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>
<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>
<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>
</td>
Expand Down Expand Up @@ -449,6 +451,56 @@
</div>
</div>

<div class="modal fade" id="edit_snapshot_modal" tabindex="-1" aria-labelledby="editSnapshotLabel" aria-hidden="true" data-action={Routes.team_path(@conn, :list)}>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header py-16 px-24">
<h5 class="modal-title" id="editSnapshotLabel"><%= gettext "Edit Snapshot" %></h5>
<button type="button" class="btn-close hp-bg-none d-flex align-items-center justify-content-center" data-bs-dismiss="modal" aria-label="Close">
<i class="ri-close-line hp-text-color-dark-0 lh-1" style="font-size: 24px;"></i>
</button>
</div>
<div class="divider m-0"></div>
<form id="update_snapshot_form" action={Routes.snapshot_path(@conn, :update, "UUID")} method="post" v-on:submit.prevent="updateSnapshotAction">
<input type="hidden" value="" name="uuid">
<div class="modal-body">
<div class="row gx-8">
<div class="col-12">
<div class="mb-24">
<label class="form-label"><%= gettext "Title" %></label>
<input type="text" class="form-control" name="title" required="required" minlength="2" maxlength="60">
</div>
</div>

<div class="col-12">
<div class="mb-24">
<label class="form-label"><%= gettext "Description" %></label>
<textarea name="description" class="form-control" required="required" minlength="2" maxlength="250"></textarea>
</div>
</div>

<div class="col-12">
<div class="mb-24">
<label class="form-label"><%= gettext "Team" %></label>
<select class="form-select" name="team_id" required="required">
<template v-for="team in teams">
<option :value="team.id">${team.name}</option>
</template>
</select>
</div>
</div>
</div>
</div>

<div class="modal-footer pt-0 px-24 pb-24">
<div class="divider"></div>
<button type="submit" class="m-0 btn btn-primary w-100" :disabled="isInProgress"><%= gettext "Submit" %></button>
</div>
</form>
</div>
</div>
</div>

</div>

<footer class="w-100 py-18 px-16 py-sm-24 px-sm-32 hp-bg-color-black-20 hp-bg-color-dark-90">
Expand Down
97 changes: 97 additions & 0 deletions priv/static/theme/app/backend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1255,6 +1255,32 @@ lynx_app.snapshots_list = (Vue, axios, $) => {
$("div#snapshot_info_modal_content").text(description);
},

editSnapshotAction(id) {
let current = $('form#update_snapshot_form input[name="uuid"]').val()
if (current != "") {
$('form#update_snapshot_form').attr('action', function(i, val) {
return val.replace(current, "UUID");
});
}

$('form#update_snapshot_form input[name="uuid"]').val(id);
$('form#update_snapshot_form').attr('action', function(i, val) {
return val.replace('UUID', id);
});

axios.get($("#update_snapshot_form").attr("action"))
.then((response) => {
if (response.status >= 200) {
$('form#update_snapshot_form input[name="title"]').val(response.data.title);
$('form#update_snapshot_form textarea[name="description"]').val(response.data.description);
$('form#update_snapshot_form select[name="team_id"]').val(response.data.team.id);
}
})
.catch((error) => {
show_notification(error.response.data.errorMessage);
});
},

formatDatetime(datatime) {
return format_datetime(datatime);
},
Expand Down Expand Up @@ -1333,6 +1359,69 @@ lynx_app.snapshots_list = (Vue, axios, $) => {
});
}

lynx_app.edit_snapshot_modal = (Vue, axios, $) => {

return new Vue({
delimiters: ['${', '}'],
el: '#edit_snapshot_modal',
data() {
return {
isInProgress: false,
teams: []
}
},
mounted() {
this.loadDataAction();
},
methods: {
loadDataAction() {
axios.get($("#edit_snapshot_modal").attr("data-action"), {
params: {
offset: 0,
limit: 10000
}
})
.then((response) => {
if (response.status >= 200) {
this.teams = response.data.teams;
}
})
.catch((error) => {
show_notification(error.response.data.errorMessage);
});
},
updateSnapshotAction(event) {
event.preventDefault();
this.isInProgress = true;

let inputs = {};
let _self = $(event.target);
let _form = _self.closest("form");

_form.serializeArray().map((item, index) => {
inputs[item.name] = item.value;
});

axios.put(_form.attr('action'), inputs)
.then((response) => {
if (response.status >= 200) {
show_notification(_globals.update_snapshot_message);

setTimeout(() => {
location.reload();
}, 2000);
}
})
.catch((error) => {
this.isInProgress = false;
// Show error
show_notification(error.response.data.errorMessage);
});
}
}
});
}

// Add Snapshot Modal
lynx_app.add_snapshot_modal = (Vue, axios, $) => {

Expand Down Expand Up @@ -1600,4 +1689,12 @@ $(document).ready(() => {
$
);
}

if (document.getElementById("edit_snapshot_modal")) {
lynx_app.edit_snapshot_modal(
Vue,
axios,
$
);
}
});

0 comments on commit 3d60964

Please sign in to comment.