OXKvkN

index.html

<main ng-app="app" ng-cloak>
  <h2>Job listing</h2>
  <section ng-controller="gapsController as vm">
    <table
      ng-if="vm.dataset && vm.dataset.length"
      class="striped responsive-table">
      <thead>
         <tr>
           <th data-field="job-name">Job Name</th>
           <th data-field="date">Date</th>
           <th data-field="status">Status</th>
           <th data-field="actions">Delete</th>
         </tr>
      </thead>
      
      <tbody>
        <tr ng-repeat="item in vm.dataset">
          <td><b>{{item.title}}</b></td>
          <td>{{item.date | date:'fullDate'}}</td>
          <td>{{item.status}}</td>
          <td>
            <button class="btn red accent-4" ng-click="vm.deleteItem(item.id)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
    
    <figure class="preloader-wrapper big active" ng-if="!vm.dataset">
      <div class="spinner-layer spinner-blue-only">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div><div class="gap-patch">
          <div class="circle"></div>
        </div><div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>
    </figure>
    
    <p ng-if="!vm.dataset.length">No jobs to show at the moment.</p>
    
    <div id="toast-container" ng-if="vm.toasts">
      <div class="toast velocity-animating" ng-repeat="toast in vm.toasts">{{ toast }}</div>
    </div>
  </section>
</main>

oxkvkn.markdown

OXKvkN

A Pen by Dan Mindru on CodePen.

License.

script.babel

const scriptUrl = 'https://script.google.com/macros/s/AKfycbx-MMi65-_e6AmyoGOcuf-xStW4hKJz-AWU5uXpGM3dV-R6KYeC/exec';

angular
  .module('app', [])
  .service('gapsService', gapsService)
  .controller('gapsController', gapsController)

/**
 * @ngdoc service
 * @name gapsService
 * 
 * @description
 * Retrieves & deletes job data from the Google Apps Script Platform.
 * 
 * @param $http {Http} the Angular $http service.
 * @returns {Object} self.
 */
gapsService.$inject = ['$http']
function gapsService($http) {
  /**
   * @ngdoc method
   * @name getData
   *
   * @description
   * Get all jobs.
   *
   * @returns {Promise} http promise
   */
  this.getData = () => {
    return $http.get(scriptUrl)
  }
  
  /**
   * @ngdoc method
   * @name getData
   *
   * @description
   * Deletes a job.
   * 
   * @todo Would be nice to do a proper 'DELETE' instead of 'GET'
   *
   * @param itemId {String} the id of the job to delete.
   * @returns {Promise} http promise
   */
  this.deleteData = (itemId) => {
    return $http.get(scriptUrl + '?deleteItem=' + itemId)
  }
  
  return this
}

/**
 * @ngdoc controller
 * @name gapsController
 * 
 * @description
 * Jobs controller. Initializes data via gapsService & displays all jobs.
 * Allows deleting jobs.
 * 
 * @param gapsService {GapsService}
 * @param $timeout {Timeout} the Angular $timeout sertvice.
 */
gapsController.$inject = ['gapsService', '$timeout']
function gapsController(gapsService, $timeout) {
  let vm = this
  vm.toasts = [] // 'Fake' toasts, would like to avoid loading more jQuery & the rest of materialize JS for this task.
  vm.toastTimeout = null
  vm.dataset = null
  
  /**
   * @ngdoc method
   * @name deleteItem
   *
   * @description
   * Deletes a job via gapsService.
   *
   * @param itemId {String} the id of the job to delete.
   */
  vm.deleteItem = function deleteItem(itemId){
    gapsService.deleteData(itemId)
      .then((res) => {
        // Google Apps Scripts doesn't have a proper REST implementation, so we'll just 'fake it'.
        // (probably not the point of this exercise to do proper REST)
        if (res.data.responseCode === 200){
          vm.dataset = vm.dataset.filter((item) => { return item.id !== itemId })
        } else {
          throw 'Item not found'
        }
      })
      .catch((err) => {
         vm.toasts.push('Failed to delete job.') 
         clearToasts()
      })
  }
  
  /**
   * @ngdoc method
   * @name clearToasts
   *
   * @description
   * Cancel current toastTimeout and clear all toasts in 4s.
   */
  function clearToasts() {
     $timeout.cancel(vm.toastTimeout)
     vm.toastTimeout = $timeout(() => { vm.toasts = []; }, 4000)
  }
  
  /**
   * @ngdoc method
   * @name init
   *
   * @description
   * Initializes controller: loads all job data via gapsServices.
   */
  function init() {
    gapsService
      .getData()
      .then((res) => {
        vm.dataset = res.data
      })
      .catch((err) => {
        vm.toasts.push('Failed to load data.') 
        clearToasts()
      })
  }
  
  init()
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>

style.scss

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
  & > section{
    width: 100%;
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  
  table{
    .material-icons{
      position: relative;
      top: 5px;
      padding: 0 0 17px 0;
    }
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />