i tried to solve these problem but failed , can anyone please help me to out from these issues!! my app -
When i use to click these two button (“Delete” and “Mark as Done”) back to back then these problem are occurred. my errors - When i clicked “Mark as Done” Button
WARNING: The 'id' for a RecordIdentifier should not be updated once it has been set. Attempted to set id for 'tasks:101 (@ember-data:lid-tasks-101)' to 'null'.
Then when i click “Delete” Button-
Error: Attempted to handle event loadingData on <tasks:102> while in state root.deleted.inFlight.
When i click another time on “Delete” button or “Mark as Done” button -
Error: Assertion Failed: Attempted to schedule a fetch for a record without an id.
these type of errors occurs again and again . please help me.
app/adapters/tasks.js
import RESTAdapter from '@ember-data/adapter/rest';
export default class TasksAdapter extends RESTAdapter {
host = 'http://localhost:3000';
}
app/serializers/tasks.js
import JSONSerializer from '@ember-data/serializer/json';
export default class TasksSerializer extends JSONSerializer {}
app/models/tasks.js
import Model, { attr } from '@ember-data/model';
export default class TasksModel extends Model {
@attr('string') title;
@attr('string') priyority;
@attr('date') createdAt;
@attr('boolean') isCompleted;
@attr('boolean') isDeleted;
}
app/controllers/index.js
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
export default class IndexController extends Controller {
@service store;
@tracked formState = false;
@action
toggleForm() {
this.formState = !this.formState;
}
get totalTasks() {
return this.model.length;
}
deleteTask = async (taskId) => {
try {
console.log(taskId);
// const task = await this.store.peekRecord('tasks', taskId);
// await task.deleteRecord();
// task.save();
const task = await this.store.findRecord('tasks', taskId, {
reload: true,
});
task.destroyRecord();
} catch (error) {
console.log(error);
}
};
markAsDone = async (taskId) => {
try {
console.log(taskId);
const task = await this.store.findRecord('tasks', taskId, {
reload: true,
});
task.isCompleted = true;
task.save();
} catch (error) {
console.log(error);
}
};
get totalCompleted() {}
get totalDeleted() {}
}
app/routes/index.js
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
export default class IndexRoute extends Route {
@service store;
async model() {
return await this.store.findAll('tasks', { reload: true });
}
}
app/templates/index.hbs
<Main @formState={{this.formState}} @toggleForm={{this.toggleForm}}>
<TaskDashboard @totalTasks = {{this.totalTasks}} />
</Main>
<div class="container app-max-width">
<div class="row">
{{#if (eq this.model.length 0)}}
<div class="empty-image">
<img src="assets/images/empty-task.jpg" alt="Empty Tasks. Create One">
</div>
<h6 class="text-center">Empty ! Create New One</h6>
{{else}}
{{#each @model as |task|}}
<Task @task-name={{task.title}} @task-tag={{task.priyority}} @created-at={{task.createdAt}} @deleteTask={{this.deleteTask}} @markAsDone={{this.markAsDone}} @taskId={{task.id}} />
{{/each}}
{{/if}}
</div>
</div>
app/components/task.hbs
<div class="row">
<div class="col">
<div>
<h4>{{@task-name}}</h4>
<h6> {{@task-tag}} </h6>
<h6> {{@created-at}} </h6>
</div>
</div>
<div class="col">
<div>
<button class="delete-button btn btn-danger" type="button" {{on 'click' (fn @deleteTask @taskId)}}>Delete Task</button>
<button class="mark-button btn btn-info" type="button" {{on 'click' (fn @markAsDone @taskId)}}>Mask as Done</button>
</div>
</div>
</div>
Can anyone please help me ?
