JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div ng-app='database' ng-controller='dataController as dc'>
  <div>
    <button ng-click='dc.refreshData()'>
      refresh
    </button>
    <button ng-click='dc.deleteAll()'>
      delete all
    </button>
  </div>
  <div>
    <input type='text' ng-model='dc.newData'/>
    <button ng-click='dc.addData()'>
      add data
    </button>
  </div>
  
  <ul>
    <li ng-repeat='item in dc.data' class='{{item["class"]}}'>
      <span>{{item.text}}</span>
      <span>{{item.isDeleted}}</span>
      <span>{{item.clientSideId}}</span>
      <span>{{item.id}}</span>
      <span class='delete' 
      ng-click='dc.deleteData(item.id, item.clientSideId);'>
        delete
      </span>
    </li>
  </ul>
  <ul>
    <li ng-repeat='item in dc.allData' class='{{item["class"]}}'>
      <span>{{item.text}}</span>
      <span>{{item.isDeleted}}</span>
      <span>{{item.clientSideId}}</span>
      <span>{{item.id}}</span>
    </li>
  </ul>
</div>

CSS

ul {
  display: inline-block;
  vertical-align: top;
  margin: 10px;
}
li {
  padding: 3px 0;
  margin: 3px 0;
}
.delete {
  border-bottom: 1px solid black;
}
.delete:hover {
  color: brown;
  cursor: pointer;
  border-color: brown;
}
.visible {
  max-height: 50px;
}
.hidden {
  padding: 0;
  overflow: hidden;
  margin: 0;
  opacity: 0;
  max-height: 0;
  transition: max-height 0.3s linear, opacity 0.3s linear, margin 0.3s linear, padding 0.3s linear;
}

JavaScript

angular.module('database', [])
.service('dataService', dataService)
.service('clientSideDataHandler', clientSideDataHandler)
.service('clientSideDataService', clientSideDataService)
.controller('dataController', dataController);

dataController.$inject = ['clientSideDataService'];
function dataController(clientSideDataService) {
	var self = this;
  self.data = clientSideDataService.provideData();
  self.newData = '';
  self.allData = clientSideDataService.allData;
  self.deleteAll = clientSideDataService.deleteAllData;
  self.deleteData = clientSideDataService.deleteData;
  self.refreshData = function() {
  	clientSideDataService.refreshData();
    self.data = clientSideDataService.provideData();
  }
  self.addData = function() {
  	clientSideDataService.addData(self.newData, resetNewData);
  }

	function resetNewData() {
  	self.newData = '';
  }
}

clientSideDataService.$inject = ['clientSideDataHandler', 'dataService']
function clientSideDataService(clientSideDataHandler, dataService) {
	var self = this;
  self.data = [];
  self.allData = dataService.getAll();
  self.refreshData = refreshData;
  self.addData = addData;
  self.deleteData = deleteData;
  self.provideData = provideData;
  self.deleteAllData = dataService.deleteAllData;
  getData();
  
  function provideData() {
  	return self.data;
  }
  function refreshData() {
  	clientSideDataHandler.resetIndex();
    clientSideDataHandler.removeClientSideAttributesFromAll(self.data);
  	getData();
  }
  function getData() {
  	self.data = dataService.getData();
    clientSideDataHandler.appendClientSideAttributesToAll(self.data);
  }
	function addData(text, callback) {
    var newItem = dataService.addData(text);
    clientSideDataHandler.appendClientSideAttributesToOne(newItem);
    self.data.push(newItem);
    if(callback) {
    	callback();
    }
  }
  function deleteData(id, clientSideId) {
    if(dataService.deleteItem(id)) {
    	self.data[clientSideId]['class'] = 'hidden';
    }
  }
  
}

function...