Basic CRUD

https://bona-iqiniso.atlassian.net/wiki/spaces/BON/pages/2369880067/Basic+CRUD

---

Introduction

CRUD stands for Create, Read, Update, and Delete, which are the basic operations performed on data in a database or other storage system.

1. Create (C): This operation refers to the action of creating new data records in a database. For example, creating a new user account or adding a new product to an inventory.
2. Read (R): This operation refers to retrieving existing data records from a database. For example, searching for a user’s profile information or displaying a list of available products. In Bona Iqiniso we have two kind of read. One involves retrieving a list of data items, and the other involves retrieving a single data item.
3. Update (U): This operation refers to modifying or updating existing data records in a database. For example, changing a user’s password or updating product prices.
4. Delete (D): This operation refers to removing data records from a database. For example, deleting a user account or removing a product from an inventory.

CRUD operations are essential for managing data in various applications such as web applications, mobile applications, and desktop applications. The implementation of CRUD operations varies depending on the technology and platform used, but the basic concepts remain the same.

In Bona Iqiniso we recognise two type of CRUD components:

1. Basic CRUD components, and
2. Extended CRUD components.

Basic CRUD means that only one kind of data is managed by the CRUD components. E.g. Basic CRUD to manage icons involves no other kind of data. Icon data stands on itself.

Extended CRUD means that multiple kinds of data may be managed by the same CRUD component. E.g. extended CRUD to manage ‘components’ may also involve the creation of new icons, new labels, new alerts, etc.

Components and sub-components

Use case Diagram

State Transition Diagram

stateDiagram-v2
    [*] --> Core : null
    Core --> [*] : cancel-list


    state Core {
      [*] --> List : null
      List --> EventHandler : cancel-list, add, edit, detail, delete
      EventHandler --> [*] : cancel-list
      EventHandler --> List : cancel-add, cancel-edit, cancel-detail, cancel-delete, add-ok, edit-ok, delete-ok
      EventHandler --> Add : add, add-nok
      Add --> EventHandler : cancel-add, save-add
      EventHandler --> Edit : edit, edit-nok
      EventHandler --> Detail : detail, (detail-nok)
      EventHandler --> Delete : delete, delete-nok
    }


    state EventHandler {
      [*] --> [*] : cancel-list, cancel-add, cancel-edit, cancel-detail, cancel-delete, add, edit, detail, delete
      [*] --> ValidationHandler : save-add, save-edit, save-delete
      ValidationHandler --> HttpHandler : add-ok, edit-ok, delete-ok
      ValidationHandler --> [*] : add-nok, edit-nok, delete-nok
      HttpHandler --> StateHandler : add-ok, edit-ok, delete-ok
      HttpHandler --> [*] : add-nok, edit-nok, delete-nok
      StateHandler --> [*] : add-ok, edit-ok, delete-ok
    }

    state ValidationHandler {
      [*] --> [*] : add-ok, add-nok, edit-ok, edit-nok, delete-ok, delete-nok
    }



    state HttpHandler {
      [*] --> [*] : add-ok, add-nok, edit-ok, edit-nok, delete-ok, delete-nok
    }


    state StateHandler {
      [*] --> [*] : add-ok, add-nok, edit-ok, edit-nok, delete-ok, delete-nok
    }


    state List {
      [*] --> ListForm : null
      ListForm --> [*] : cancel-list, add, edit, detail, delete
    }

    state Add {
      [*] --> AddForm : add
      AddForm --> [*]: cancel-add, save-add
    }



    state Edit {
      [*] --> EditForm : edit
      EditForm --> [*]: cancel-edit, save-edit
    }



    state Detail {
      [*] --> DetailForm : detail
      DetailForm --> [*]: cancel-detail
    }



    state Delete {
      [*] --> DeleteModal : delet
      DeleteModal --> [*]: cancel-delete, save-delete
    }

Event Handler Table

Component	Origin	CRUD	event	create?	item empty?	Alert empty?
Component			null	TRUE	TRUE	TRUE
Component			add-goto	FALSE	TRUE	TRUE
Component			edit-goto	FALSE	FALSE	TRUE
Component			detail-goto	FALSE	FALSE	TRUE
Component			delete-goto	FALSE	FALSE	TRUE
Component			list-cancel	FALSE	TRUE	TRUE
Component			add-cancel	FALSE	TRUE	TRUE
Component			edit-cancel	FALSE	TRUE	TRUE
Component			delete-cancel	FALSE	TRUE	TRUE
Component			detail-cancel	FALSE	TRUE	TRUE

State Transition Table

Component	Origin	CRUD	start	event	end
Component				null	eHandler
Component			eHandler	null	sHandler
Component			eHandler	add-goto	sHandler
Component			eHandler	edit-goto	sHandler
Component			eHandler	detail-goto	sHandler
Component			eHandler	delete-goto	sHandler
Component			eHandler	list-cancel	sHandler
Component			eHandler	add-cancel	sHandler
Component			eHandler	edit-cancel	sHandler
Component			eHandler	delete-cancel	sHandler
Component			eHandler	detail-cancel	sHandler
Component			sHandler	exit
Component			sHandler	list	list
Component			sHandler	add	add
Component			sHandler	edit	edit
Component			sHandler	delete	delete
Component			sHandler	detail	detail
Component			list	add-goto	eHandler
Component			list	edit-goto	eHandler
Component			list	delete-goto	eHandler
Component			list	detail-goto	eHandler
Component			list	list-cancel	eHandler
Component			eHandler	add-save	bValidator
Component			eHandler	edit-save	bValidator
Component			eHandler	delete-confirm	bValidator
Component			bValidator	add-alert	sHandler
Component			bValidator	edit-alert	sHandler
Component			bValidator	delete-alert	sHandler
Component			bValidator	add-success	hValidator
Component			bValidator	edit-success	hValidator
Component			bValidator	delete-success	hValidator
Component			hValidator	add-alert	sHandler
Component			hValidator	edit-alert	sHandler
Component			hValidator	delete-alert	sHandler
Component			hValidator	add-success	sHandler
Component			hValidator	edit-success	sHandler
Component			hValidator	delete-success	sHandler

State Handler Table

Component	Origin	CRUD	start	end
Component			null	list
Component			add-goto	add
Component			edit-goto	edit
Component			delete-goto	delete
Component			detail-goto	detail
Component			list-cancel	exit
Component			add-cancel	list
Component			edit-cancel	list
Component			detail-cancel	list
Component			delete-cancel	list
Component			add-alert	add
Component			edit-alert	edit
Component			delete-alert	list
Component			add-success	list
Component			edit-success	list
Component			delete-success	list

Logic Diagram

Examples

Add successful

1. Start: initialise event to undefined/null/–
2. Assess event flow: result is undefined/null/eHandler
3. eHandler: initialises the event structure, data item is empty, alerts are empty. trigger event flow: eHandler/null/–
4. Assess event flow: result is eHandler/null/sHandler
5. sHandler: convert event flow to sHandler/null/LIST
6. sub-component LIST is on screen, waiting for manual input.
7. Click add button in header triggering event flow LIST/goto-add/–
8. Assess event flow: result is LIST/goto-add/eHandler
9. eHandler: empty alerts, empty data item. Trigger event flow: eHandler/goto-add/sHandler
10. sHandler: convert event flow to sHandler/goto-add/ADD
11. sub-component ADD is in screen waiting for manual input
12. fill in correct data on screen en click save in the header triggering event flow ADD/add-save/–
13. Assess event flow: result is ADD/add-save/eHandler
14. eHandler: no action. trigger event flow eHandler/add-save/–
15. Assess event flow: result is eHandler/add-save-/baseValidation
16. Base Validation: validate data (all is ok) and trigger event BaseValidation/add-success/–
17. assess event flow: result is BaseValidation/add-success/HttpValidation
18. HttpValidation: calls backend to save data and receives status 200 (OK). This triggers event HttpValidation/add-success/–
19. Assess event flow: result is HttpValidation/add-success/sHandler
20. sHandler convert event flow to sHandler/list/LIST
21. sub-component LIST is on screen, waiting for manual input.