My current application is a CRUD UI which is ran in conjunction with a Python API. This API stores , edit , reads and deletes data from the sqlite3 python database.
I have replicated my delete function to meet my edit function but as soon as i click the Delete button , it doesn't seem to do anything. It should delete the an issue title and description so that it cannot be viewed on the index page when refreshed. So far my front-end code is as follows :
index.js - This has the routes for each page :
require('babel-polyfill')
const m = require('mithril')
const {IssuesList, ViewIssue, CreateIssue, EditIssue,DeleteIssue, ToolbarContainer} = require('./views')
const {IssuesModel} = require('./viewmodels')
const issuesModel = new IssuesModel()
m.route(document.body, '/issues', {
'/issues': {
render(vnode) {
return m(ToolbarContainer, m(IssuesList, {model: issuesModel}))
}
},
'/issues/create': {
render(vnode) {
return m(ToolbarContainer, m(CreateIssue, {model: issuesModel}))
}
},
'/issues/:issueId/edit': {
render(vnode) {
return m(ToolbarContainer, m(EditIssue, {model: issuesModel, issueId: vnode.attrs.issueId}))
}
},
'/issues/:issueId/delete': {
render(vnode) {
return m(ToolbarContainer, m(DeleteIssue, {model: issuesModel, issueId: vnode.attrs.issueId}))
}
}
})
viewmodels.js - These are the functions carried out for each CRUD operation
const m = require('mithril')
class IssuesModel {
constructor() {
this.issues = {}
}
async loadIssues() {
let response = await m.request('/issues')
this.issues = {}
for (let issue of response.issues) {
this.issues[issue.id] = issue
}
return this.issues
}
get list() {
return Object.keys(this.issues).map(i => this.issues[i])
}
async loadIssue(issueId) {
let response = await m.request(`/issues/${issueId}`)
this.issues[issueId] = response
return response
}
async updateIssue(issueId, fields) {
await m.request({
method: "PUT",
url: `/issues/${issueId}`,
data: fields
})
return await this.loadIssue(issueId)
}
async deleteIssue(issueId, fields) {
await m.request({
method: "DELETE",
url: `/issues/${issueId}`,
data: fields
})
return await this.loadIssues()
}
async createIssue(fields) {
await m.request({
method: "POST",
url: `/issues`,
data: fields
})
return await this.loadIssues()
}
}
module.exports = {IssuesModel}
views.js - The view for the edit and delete view only
class EditIssue {
constructor(vnode) {
this.model = vnode.attrs.model
this.issueId = vnode.attrs.issueId
}
async oninit() {
await this.model.loadIssue(this.issueId)
}
view() {
let issue = this.model.issues[this.issueId]
return issue
? m(IssueEditor, {
title: issue.title,
description: issue.description,
onSubmit: async (fields) => {
await this.model.updateIssue(this.issueId, fields)
m.route.set(`/issues/${this.issueId}`)
m.redraw()
}
})
:m('.alert.alert-info', 'Loading')
}
}
class DeleteIssue {
constructor(vnode) {
this.model = vnode.attrs.model
this.issueId = vnode.attrs.issueId
}
async oninit() {
await this.model.loadIssue(this.issueId)
}
view() {
let issue = this.model.issues[this.issueId]
return issue
? m(DeleteIssueEditor, {
title: issue.title,
description: issue.description,
onSubmit: async (fields) => {
await this.model.deleteIssue(this.issueId,fields)
m.route.set(`/issues/${this.issueId}`)
m.redraw()
}
})
:m('.alert.alert-info', 'The ID you have requested to delete does not exist' , )
}
}
class DeleteIssueEditor {
constructor(vnode) {
this.title = vnode.attrs.title
this.description = vnode.attrs.description
this.onSubmit = vnode.attrs.onSubmit
}
view() {
return m('form', [
m('.form-group', [
m('label', 'The following will be deleted '),
m('', ),
m('label', {'for': 'title-input'}, 'Issue Title'),
m('input.form-control#title-input', {value: this.title, oninput: (e) => {this.title = e.target.value}})
]),
m('.form-group', [
m('label', {'for': 'description-input'}, 'Description'),
m('textarea.form-control#description-input', {oninput: (e) => {this.description = e.target.value}}, this.description)
]),
m('button.btn.btn-primary#save-button', {type: 'submit'}, 'Delete')
])
}
}
My Python Back-end is as follows :
class IssueResource(object):
def __init__(self, repo):
self._repo = repo
def on_put(self, req, resp, issue_id):
with self._repo.open() as repo:
update = req.media
repo.issues.update_issue(issue_id, **update)
resp.status = falcon.HTTP_200
def on_delete(self, req, resp, issue_id):
with self._repo.open() as repo:
issue = repo.issues.fetch_issue(int(issue_id))
if issue:
repo.issues.delete_issue(issue_id)
resp.status = falcon.HTTP_200
else:
resp.status = falcon.HTTP_404
def update_issue(self, issue_id, **kwargs):
cursor = self._conn.cursor()
try:
if 'title' in kwargs:
cmd = "UPDATE issues SET title=? WHERE id=?"
cursor.execute(cmd, (kwargs['title'], issue_id))
print ("Success - Title Updated")
else:
print ("Fail - Title not updated")
if 'description' in kwargs:
cmd = "UPDATE issues SET description=? WHERE id=?"
cursor.execute(cmd, (kwargs['description'], issue_id))
print ("Success - Description Updated")
else:
print("Fail - Description not updated")
finally:
cursor.close()
def delete_issue(self, issue_id, **kwargs):
cursor = self._conn.cursor()
try:
if issue_id :
cmd = "DELETE FROM issues WHERE id=? AND title=? AND description =?"
cursor.execute(cmd ,(kwargs['title'], kwargs['description'], issue_id))
print ("Delete is success")
else:
print("Delete is not a success")
finally:
cursor.close()