SimpleStore

by ashwin_kumar_coder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<h4>Add a book:</h4>

<div class="form">
  <label for="name">name</label><input class="forminput" id="name"/>
  <label for="type">type</label><input class="forminput" id="type"/>
  <label for="description">description</label><input class="forminput" id="description"/>
</div>
<div class="formbutton"><button onclick="addData()">Add</button></div>

<h4>List of Books:</h4>
  <table class="datatable" onclick="operate(event)">
  <thead>
    <tr>
      <th>sr. no.</th>
      <th>name</th>
      <th>type</th>
      <th>description</th>
      <th>edit</th>
      <th>delete</th>
    </tr>
  </thead>
  <tbody>
  
  </tbody>
  </table>
  



  
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/simplestore.min.js"></script>

</body>
</html>

SCSS

*{
  font-family:Verdana, sans-serif;
}
.form{
  display:grid;
  grid-template-columns:1fr 2fr;
  row-gap:10px;
  width:400px;
}
.formbutton{
  width:400px;
  margin:20px 0px;
  text-align:center;
}
.datatable{
   th,td{
   border:1px solid black;
   padding:6px 12px;
   outline:none;
   }
   th{
     color:tomato;
   }
   border-collapse:collapse;
}

h4{
  color:maroon;
}

button{
  background:none;
  border:1px solid black;
  cursor:pointer;
  padding:6px 10px;
  border-radius:3px;
  outline:none;
  transition:box-shadow 0.3s;
  &:hover{
    box-shadow:inset 0px 0px 5px grey;
  }
}

JavaScript

var simplestore = new SimpleStore("mystore");

(async ()=>{

      //adding required stores with indices...
      await simplestore.addStores([{
        name: "books",
        indices: ["name", "type"],
        uniqueindices: ["id"]
      }]);

      //check if default data is available...
      let res= await simplestore.store("books").get({id: 1});

      if (!(res && res.books && res.books.length)){

        //adding default data...
        await simplestore.store("books")
                         .add({
                              name: "simplestore",
                              id: 1,
                              type: "async",
                              description: `a local db for quick 
                                            fetching your data.`
                            })
      }


			createTable();

})();


async function createTable() {

	let res= await simplestore.store("books").getAll();

  let data=res.books;
  
  let tbody = document.querySelector(".datatable tbody");
  
  tbody.innerHTML="";

  Array.isArray(data) && data.forEach(book => {

    let tr = document.createElement("tr");

    tr.innerHTML = `
    <td>${tbody.children.length+1}</td>
    <td class="editable" data-key="name">${book.name?book.name:''}</td>
    <td class="editable"data-key="type">${book.type?book.type:''}</td>
    <td class="editable"data-key="description">${
            book.description?book.description:''}</td>
    <td><button class="edit" data-id="${book.id}">edit</button</td>
    <td><button class="delete" data-id="${book.id}">delete</button</td>
`

    tbody.appendChild(tr);

  });
  





};

//edit delete operations...
function operate(e){
    let classlist=e.target.classList;

    if(classlist.contains("edit"))editData(e.target);
    if(classlist.contains("delete"))deleteData(e.target);

}

function editData(button){
			let editablefields=[...button
                        .parentElement
                        .parentElement
                       ...