Source Code Sistem Informasi Penggajia

(1)

LAMPIRAN

1. index.html

<!doctype html>

<meta charset="utf-8"> <title>Jaya Mekar</title>

 <link rel="stylesheet"

href="bower_components/bootstrap/dist/css/bootstrap.css" /> 

 

<link rel="stylesheet" href="bower_components/angular/angular-csp.css" />

<link rel="stylesheet" href="styles/main.css"> <link rel="stylesheet" href="styles/main.css">

<link rel="stylesheet" href="styles/yk-sidebar.css"> <link rel="stylesheet" href="styles/box.css" /> <link rel="stylesheet" href="styles/tabs.css" />

<link rel="stylesheet" href="styles/hack-bootstrap.css"> 

</head>

<yk-navbar brand="RootCtrl.brand" toggle-sidebar="RootCtrl.toggleSidebar()" with-sidebar="RootCtrl.withSidebar" fixed-top>

<yk-menu-list menu="RootCtrl.menuNavRight" nav right></yk-menu-list>

</yk-navbar>

<yk-wrapper yk-toggle-sidebar="RootCtrl.withSidebar" window-width="{{windowWidth}}">

<yk-sidebar filter="RootCtrl.filter"> <li ui-sref-active="active">

<a ui-sref="jabatan"><i class="glyphicon glyphicon-star"></i> Jabatan</a>

</li>

<li ui-sref-active="active">

<a ui-sref="karyawan"><i class="glyphicon glyphicon-user"></i> Karyawan</a>

</li>

<li ui-sref-active="active">

<a ui-sref="rumus-gaji"><i class="glyphicon glyphicon-list-alt"></i> Rumus Gaji</a>

</li>

(2)

<a ui-sref="penggajian"><i class="glyphicon glyphicon-list-alt"></i> Penggajian</a>

</li>

</yk-sidebar>

<yk-wrapper-content>  <ui-view></ui-view>  </yk-wrapper-content> </yk-wrapper>

 

<script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

<script src="bower_components/angular-messages/angular-messages.js"></script>

 

<script src="bower_components/node-uuid/uuid.js"></script> <script src="scripts/app.js"></script>

<script src="scripts/config/app.config.js"></script> <script src="scripts/directives/yk-navbar.js"></script> <script src="scripts/directives/yk-sidebar.js"></script> <script src="scripts/directives/yk-wrapper.js"></script> <script src="scripts/directives/ng-window.js"></script> <script src="scripts/directives/ng-box.js"></script> <script src="scripts/directives/ng-tabs.js"></script> <script src="scripts/controllers/root.js"></script> <script src="scripts/controllers/jabatan.js"></script> <script src="scripts/controllers/karyawan.js"></script> <script src="scripts/controllers/rumus-gaji.js"></script> <script src="scripts/controllers/penggajian.js"></script> <script src="scripts/controllers/contoh-data.js"></script> <script src="scripts/filters/waktu-filter.js"></script>

<script src="scripts/filters/kelompok-kerja-filter.js"></script> <script src="scripts/filters/startarray-filter.js"></script> <script src="scripts/filters/length-filter.js"></script>

<script src="scripts/filters/numberformat-filter.js"></script> <script src="scripts/filters/sumbykey-filter.js"></script> <script src="scripts/services/id-factory.js"></script> <script src="scripts/services/jabatan-factory.js"></script> <script src="scripts/services/karyawan-factory.js"></script> <script src="scripts/services/rumusgaji-factory.js"></script> <script

src="scripts/services/penggajiankaryawanharian-factory.js"></script>

<script src="scripts/services/kalkulasipenggajian-factory.js"></script>

<script src="scripts/services/indexeddb-provider.js"></script> <script src="scripts/services/layanan-data-factory.js"></script> 

(3)

2. manifest.json

{

"name": "__MSG_appName__",

"description": "__MSG_appDescription__", "version": "11",

"manifest_version": 2, "default_locale": "en", "permissions": [

"unlimitedStorage" ],

"icons": {

"16": "images/icon-16.png", "128": "images/icon-128.png" },

"app": {

"background": { "scripts": [

"scripts/main.js",

"scripts/chromereload.js" ]

} } }

3. _locales/en/messages.json

{

"appName": {

"message": "Jaya Mekar",

"description": "The name of the application" },

"appDescription": {

"message": "Sistem Informasi Penggajian",

"description": "The description of the application" }

}

4. scripts/main.js

'use strict';

chrome.app.runtime.onLaunched.addListener(function() { var width = 840;

var height = 600;

chrome.app.window.create('index.html', { minWidth: width,

minHeight: height,

left: Math.round((screen.availWidth - width) / 2), top: Math.round((screen.availHeight - height) / 2) });

(4)

5. views/jabatan/jabatan.html

<div class="bs-page-header"> <h4>Mengelola Jabatan</h4> </div>

</div>

<div class="row newline"> <div class="col-sm-12">

<button class="btn btn-sm btn-primary pull-right" ng-click="JabatanCtrl.add('sm')">

Tambah Jabatan </button>

</div> </div>

<div class="row newline">

<div class="col-sm-6" ng-repeat="i in JabatanCtrl.jabatan | filter:RootCtrl.filter track by i.idJabatan"

ng-dblclick="JabatanCtrl.edit('sm', i)">  <ng-box

render-box-fn="JabatanCtrl.render.jabatanDipakai(i)"> <ng-box-header title="{{i.jabatan}}"> <div class="box-tools pull-right">  <span class="dropdown">

<a href class="dropdown-toggle">

<span class="glyphicon glyphicon-chevron-down"></span>

</a>

<ul class="dropdown-menu"> <li>

<a href ng-click="JabatanCtrl.edit('sm', i)"> <span class="margin-span glyphicon glyphicon-edit"></span>

Sunting Data </a>

</li>

<li ng-if="JabatanCtrl.render.hapusData(i)" class="delete">

<a href ng-click="JabatanCtrl.delete(i)">

<span class="margin-span glyphicon glyphicon-trash"></span>

Hapus Data </a>

</li> </ul> </span>

 </div>

</ng-box-header>

<div class="box-body"> <table class="table"> <thead>

<tr>

<th>Jenis</th>

(5)

<th>Jml Rumus Gaji</th> </tr>

</thead> <tbody> <tr>

<td>{{i.jenis}}</td>

<td title="{{i.karyawan}}">{{i.karyawan.length || 0}} orang</td>

<td title="{{i.rumusGaji}}">{{i.rumusGaji.length || 0}} data</td>

</tr> </tbody> </table> </div>

<div class="box-footer">

<div class="box-time pull-right">

<span class="glyphicon glyphicon-calendar"></span> {{i.waktu | waktu}}

</div> </div> </ng-box>

 </div>

</div> </div>

6. views/jabatan/modal-jabatan.html

<form name="formJabatan"> <div class="modal-header">

<h3 class="modal-title">{{modalJabatanCtrl.obj.aksi}} Jabatan</h3>

</div>

<div class="modal-body">

<div class="form-group has-feedback" ng-class="{'has-success': formJabatan.namaJabatan.$valid, 'has-error':

formJabatan.namaJabatan.$invalid}">

<label class="control-label">Nama Jabatan</label> <input name="namaJabatan"

ng-model="modalJabatanCtrl.obj.jabatan" type="text" class="form-control input-sm" ng-minlength="5" ng-maxlength="30"

placeholder="Nama jabatan" required>

<span class="glyphicon form-control-feedback"

ng-class="{'glyphicon-remove': formJabatan.namaJabatan.$invalid, 'glyphicon-ok': formJabatan.namaJabatan.$valid}"></span>

<div class="help-block"

ng-messages="formJabatan.namaJabatan.$error">

<small class="help-block" ng-message="required">* Nama jabatan wajib di isi</small>

<small class="help-block" ng-message="minlength">* Nama jabatan kurang terperinci</small>

<small class="help-block" ng-message="maxlength">* Nama Jabatan terlalu panjang</small>

(6)

<div class="form-group has-feedback" ng-class="{'has-error': formJabatan.jenisJabatan.$invalid, 'has-success':

formJabatan.jenisJabatan.$valid}">

<label class="control-label">Jenis</label>

<select name="jenisJabatan" class="form-control input-sm" ng-model="modalJabatanCtrl.obj.jenis" ng-options="jenis for jenis in modalJabatanCtrl.jenis" required>

<option value="">-- Pilih Jenis Jabatan --</option> </select>

ng-messages="formJabatan.jenisJabatan.$error">

<small class="help-block" ng-message="required">* Jenis jabatan wajib di isi</small>

</div> </div> </div>

<div class="modal-footer">

<button class="btn btn-sm" ng-class="{'btn-success':

formJabatan.$valid, 'btn-danger disabled': formJabatan.$invalid}" ng-click="modalJabatanCtrl.save()">Simpan</button>

<button class="btn btn-sm btn-warning" ng-click="modalJabatanCtrl.cancel()">Batal</button> </div>

</form>

7. views/karyawan/karyawan.html

<div class="bs-page-header"> <h4>Mengelola Karyawan</h4> </div>

</div>

<div class="body" ng-show="KaryawanCtrl.jabatan.length > 0"> <div class="row newline">

<div class="col-md-6 pull-right">

<button ng-click="KaryawanCtrl.add()" class="btn sm btn-primary pull-right">Tambah Karyawan</button>

</div> </div>

<div class="row newline" ng-show="KaryawanCtrl.karyawan.length > 0">

<div class="col-md-12">

<table class="table bordered striped table-hover">

<thead> <tr>

<th class="text-center col-number">#</th> <th class="text-center">Nama</th>

<th class="text-center">Jabatan</th> <th class="text-center">Karyawan</th> <th class="text-center">

<span tooltip-popup-delay='500' tooltip='Kelompok Kerja'>Kel</span>

</th>

<th class="text-center">

(7)

</th>

<span tooltip-popup-delay='500' tooltip='Status Karyawan'>Status</span>

</th> </tr> </thead> <tbody>

<tr ng-repeat="i in KaryawanCtrl.karyawan |

filter:RootCtrl.filter | orderBy:'+namaDepan':false | startArray: (KaryawanCtrl.numberPage - 1 )*KaryawanCtrl.limit |

limitTo:KaryawanCtrl.limit track by i.nip"> <td class="text-center"

title="{{i.nip}}">{{(KaryawanCtrl.numberPage-1)*KaryawanCtrl.limit+$index+1}}</td>

<td>{{i.namaDepan}} {{i.namaBelakang}}</td> <td class="text-center"

title="{{i.rincianJabatan}}">{{i.jabatan}}</td> <td

class="text-center">{{i.rincianJabatan.jenis}}</td>

<td class="text-center" title="{{i.kelompokKerja | kelompokKerja}}">{{i.kelompokKerja}}</td>

<td class="text-center">

<span class="glyphicon glyphicon glyphicon-time" tooltip-popup-delay='500' tooltip='Pertama kerja :

{{i.waktu.pertamaKerja | date:"d MMMM yyyy"}}'></span> </td>

<td class="text-center">{{i.statusKaryawan}}</td> <td class="text-center col-aksi">

<a href ng-click="KaryawanCtrl.edit(i)" tooltip-popup-delay='500' tooltip='Sunting data'>

<span class="glyphicon glyphicon-edit"></span> </a>

<a href ng-click="KaryawanCtrl.delete(i)" tooltip-popup-delay='500' tooltip='Hapus data'>

<span class="glyphicon glyphicon-trash"></span> </a>

</td> </tr> </tbody> </table>

<pagination total-items="KaryawanCtrl.karyawan | filter:RootCtrl.filter | length"

ng-model="KaryawanCtrl.numberPage" max-size="KaryawanCtrl.maxSize" class="pagination-sm pull-right" boundary-links="true" previous-text="Sebelumnya" next-text="Selanjutnya" first-text="Pertama" last-text="Terakhir" ng-hide="(KaryawanCtrl.karyawan |

filter:RootCtrl.filter | length) <= KaryawanCtrl.limit"></pagination> </div>

</div> </div>

8. views/karyawan/modal-karyawan.html

(8)

<h4 class="modal-title">

<span class="glyphicon glyphicon-user margin-span"></span>Karyawan

<small ng-if="modalKaryawanCtrl.obj.waktu.dibuat">· {{modalKaryawanCtrl.obj.waktu | waktu}} ·

<span tooltip-popup-delay="500"

tooltip="versi">#{{modalKaryawanCtrl.obj.versi}}</span> </small>

</h4> </div>

<div class="form-group form-group-sm" ng-class="{'has-success': formKaryawan.namaDepan.$valid, 'has-error': formKaryawan.namaDepan.$invalid}">

<label class="col-sm-3 control-label">Nama Lengkap</label> <div class="col-sm-4">

<input name="namaDepan"

ng-model="modalKaryawanCtrl.obj.namaDepan" class="form-control" type="text" placeholder="Nama Depan" minlength="2" ng-maxlength="15" required>

ng-messages="formKaryawan.namaDepan.$error">

<small class="help-block" ng-message="required">* Nama depan wajib di isi</small>

<small class="help-block" ng-message="minlength">* Nama depan terlalu pendek</small>

<small class="help-block" ng-message="maxlength">* Nama depan terlalu panjang</small>

</div> </div>

<div class="col-sm-4">

<input ng-model="modalKaryawanCtrl.obj.namaBelakang" class="form-control" type="text" placeholder="Nama Belakang"> <div class="help-block"

ng-messages="formKaryawan.namaDepan.$error">

<small class="help-block" ng-message="required">* Tidak wajib di isi</small>

</div> </div> </div>

<div class="form-group form-group-sm" ng-class="{'has-error': formKaryawan.jenisJabatan.$invalid, 'has-success':

formKaryawan.jenisJabatan.$valid}">

<label class="col-sm-3 control-label">Jabatan</label> <div class="col-sm-5">

<select name="jenisJabatan" class="form-control input-sm" ng-model="modalKaryawanCtrl.objectJabatan" ng-options="

objectJabatan.jabatan group by objectJabatan.jenis for objectJabatan in modalKaryawanCtrl.arrayJabatan track by objectJabatan.idJabatan" required>

ng-messages="formKaryawan.jenisJabatan.$error">

(9)

</div> </div>

<div class="form-group form-group-sm" ng-class="{'has-error': formKaryawan.kelompokKerja.$invalid, 'has-success':

formKaryawan.kelompokKerja.$valid}">

<label class="col-sm-3 control-label">Kelompok Kerja</label> <div class="col-sm-2">

<select name="kelompokKerja" tooltip-popup-delay='500' tooltip='{{modalKaryawanCtrl.objectKelompokKerja |

kelompokKerja}}' ng-model="modalKaryawanCtrl.objectKelompokKerja" ng-options="kelompokKerja for kelompokKerja in

modalKaryawanCtrl.kelompokKerja" class="form-control input-sm" required>

<option value="">--</option> </select>

</div>

ng-messages="formKaryawan.kelompokKerja.$error">

<small class="help-block" ng-message="required">* Kelompok Kerja wajib di isi</small>

</div> </div> </div>

<div class="form-group form-group-sm" ng-class="{'has-error': formKaryawan.tanggal.$invalid, 'has-success':

formKaryawan.tanggal.$valid}">

<label class="col-sm-3 control-label">Pertama Kerja</label> <div class="col-sm-4">

<div class="input-group input-group-sm">

<input name="tanggal" type="text" class="form-control text-center" datepicker-popup="{{modalKaryawanCtrl.format}}" ng-model="modalKaryawanCtrl.pertamaKerja"

is-open="modalKaryawanCtrl.opened"

min-date="modalKaryawanCtrl.minDate" max-date="'2015-06-22'" datepicker-options="modalKaryawanCtrl.dateOptions" required="true" close-text="Tutup"

ng-click="modalKaryawanCtrl.open($event)" /> <span class="input-group-btn">

<button type="button btn-sm" class="btn btn-default" ng-click="modalKaryawanCtrl.open($event)"><i class="glyphicon glyphicon-calendar"></i>

</button> </span> </div>

</div>

<div class="help-block" ng-messages="formKaryawan.tanggal. $error">

<small class="help-block" ng-message="required">* Tanggal wajib di isi</small>

(10)

<div class="form-group form-group-sm" ng-class="{'has-error': formKaryawan.statusKaryawan.$invalid, 'has-success':

formKaryawan.statusKaryawan.$valid}">

<label class="col-sm-3 control-label">Status</label> <div class="col-sm-4">

<select name="statusKaryawan"

model="modalKaryawanCtrl.obj.statusKaryawan" ng-options="statusKaryawan for statusKaryawan in modalKaryawanCtrl.statusKaryawan"

ng-disabled="modalKaryawanCtrl.disabledStatusKaryawan" class="form-control input-sm"></select>

ng-messages="formKaryawan.statusKaryawan.$error">

</div> </div> </div>

</div>

<button class="btn btn-primary" ng-class="{'btn-danger disabled': formKaryawan.$invalid, 'btn-success': formKaryawan. $valid}"

ng-click="modalKaryawanCtrl.save(modalKaryawanCtrl.objectJabatan.idJa batan, modalKaryawanCtrl.objectKelompokKerja,

modalKaryawanCtrl.pertamaKerja)">Simpan</button>

<button class="btn btn-warning"

ng-click="modalKaryawanCtrl.cancel()">Batal</button> </div>

</form>

9. views/rumus-gaji/rumus-gaji.html

<ng-tabs title-tabs="Mengelola Rumus Gaji" pull-body> <ng-tabs-content title-content="Harian">

<div class="body">

<button ng-click="RumusGajiCtrl.add('Harian')" class="btn btn-sm btn-primary pull-right">Tambah Rumus Gaji Karyawan Harian</button>

</div> </div>

<div class="row new-line"> <div class="col-md-12">

<thead> <tr>

<th class="text-center">#</th>

(11)

<span class="margin-span" tooltip-popup-delay='500' tooltip='Harga Perminggu'>H.Perminggu</span> </th>

<span class="margin-span" tooltip-popup-delay='500' tooltip='Harga Perhari'>H.Perhari</span>

</th>

<th class="text-center" tooltip-popup-delay='500' tooltip='Uang Hadir'>U.Hadir</th>

<span class="glyphicon glyphicon-calendar" tooltips-popup-delay='500' tooltip='Catatan waktu'></span> </th>

</tr> </thead> <tbody>

<tr ng-repeat="i in RumusGajiCtrl.rumusgaji | filter:'Harian' | filter:RootCtrl.filter |

orderBy:'+jabatan':false | startArray:(RumusGajiCtrl.numberPage - 1 )*RumusGajiCtrl.limit | limitTo:RumusGajiCtrl.limit track by i.idRumusGaji">

<td class="text-center"

title="{{i.idRumusGaji}}">{{(RumusGajiCtrl.numberPage-1)*RumusGajiCtrl.limit+$index+1}}</td>

<td class="text-center">{{i.jabatan}}</td> <td class="text-center">{{i.jenis}}</td> <td class="text-center">{{i.shift}}</td> <td class="text-center">{{i.harga | numberFormat:"Rp ":0}}</td>

<td class="text-center">{{i.harga / 6 | numberFormat:"Rp ":0}}</td>

<td class="text-center">{{i.uangHadir | numberFormat:"Rp ":0}}</td>

<span class="glyphicon glyphicon glyphicon-time" tooltip-popup-delay='500' tooltip='{{i.waktu | waktu}}'></span> </td>

<td class="text-center col-aksi">

<a href ng-click="RumusGajiCtrl.edit('Harian', i)" tooltip-popup-delay='500' tooltip='Sunting data'>

<a href ng-click="RumusGajiCtrl.delete(i)" tooltip-popup-delay='500' tooltip='Hapus data'>

<span class="glyphicon glyphicon-trash"></span>

</a> </td> </tr> </tbody> </table>

<pagination total-items="RumusGajiCtrl.rumusgaji | filter:'Harian'| filter:RootCtrl.filter | length"

(12)

filter:'Harian' | filter:RootCtrl.filter | length) <= RumusGajiCtrl.limit"></pagination>

</div> </div> </div>

</ng-tabs-content>

<ng-tabs-content title-content="Borongan"> <div class="body">

<button ng-click="RumusGajiCtrl.add('Borongan')" class="btn btn-sm btn-primary pull-right">Tambah Rumus Gaji Karyawan Borongan</button>

</div> </div>

<thead> <tr>

<th class="text-center">Jabatan</th> <th class="text-center">Jenis</th> <th class="text-center">Shift</th> <th class="text-center">

<span tooltip-popup-delay='500' tooltip='Target Produksi'>T.Produksi</span>

</th>

<span tooltip-popup-delay='500' tooltip='Target Jumlah Produksi'>T.J.Produksi</span>

</th>

<span class="margin-span" tooltip-popup-delay='500' tooltip='Harga Normal'>H.Normal</span>

</th>

<span class="margin-span" tooltip-popup-delay='500' tooltip='Harga Target'>H.Target</span>

</th>

<span class="margin-span" tooltip-popup-delay='500' tooltip='Uang Hadir'>U.Hadir</span>

</th>

<span class="glyphicon glyphicon-calendar" tooltips-popup-delay='500' tooltip='Catatan waktu'></span> </th>

</tr> </thead> <tbody>

<tr ng-repeat="i in RumusGajiCtrl.rumusgaji | filter:'Borongan' | filter:RootCtrl.filter |

(13)

<td class="text-center"

title="{{i.idRumusGaji}}">{{(RumusGajiCtrl.numberPage-1)*RumusGajiCtrl.limit+$index+1}}</td>

<td class="text-center">{{i.jabatan}}</td> <td class="text-center">{{i.jenis}}</td> <td class="text-center">{{i.shift}}</td> <td class="text-center">{{i.targetProduksi | numberFormat:""}} mtr</td>

<td class="text-center">{{i.targetJmlProduksi | numberFormat:""}} mtr</td>

<td class="text-center">{{i.harga | numberFormat:"Rp ":0}}</td>

<td class="text-center">{{i.hargaTarget | numberFormat:"Rp ":0}}</td>

<a href ng-click="RumusGajiCtrl.edit('Borongan', i)" tooltip-popup-delay='500' tooltip='Sunting data'>

<a href ng-click="RumusGajiCtrl.delete(i)" tooltip-popup-delay='500' tooltip='Hapus data'>

</a> </td> </tr> </tbody> </table>

<pagination total-items="RumusGajiCtrl.rumusgaji | filter:'Harian'| filter:RootCtrl.filter | length"

ng-model="RumusGajiCtrl.numberPage" max-size="RumusGajiCtrl.maxSize" class="pagination-sm pull-right" boundary-links="true" previous-text="Sebelumnya" next-text="Selanjutnya" first-text="Pertama" last-text="Terakhir" ng-hide="(RumusGajiCtrl.rumusgaji |

filter:'Harian' | filter:RootCtrl.filter | length) <= RumusGajiCtrl.limit"></pagination>

</div> </div> </div>

</ng-tabs-content> </ng-tabs>

10. views/rumus-gaji/modal-rumus-gaji.html

<form class="form-horizontal" name="formRumusGaji"> <div class="modal-header">

<h3 class="modal-title">Rumus Gaji - {{modalRumusGaji.jenis}}</h3>

</div>

(14)

<div class="form-group form-group-sm" ng-class="{'has-error': formRumusGaji.jenisJabatan.$invalid, 'has-success':

formRumusGaji.jenisJabatan.$valid}">

<select name="jenisJabatan" class="form-control input-sm" ng-model="modalRumusGaji.objectJabatan" ng-options="

objectJabatan.jabatan group by objectJabatan.jenis for objectJabatan in modalRumusGaji.arrayJabatan |

filter:modalRumusGaji.jenis track by objectJabatan.idJabatan" required>

ng-messages="formRumusGaji.jenisJabatan.$error">

</div>

</div> </div>

<div class="form-group form-group-sm" class="{'has-success': formRumusGaji.jenisJabatan.$valid}"

ng-if="modalRumusGaji.objectJabatan.jenis">

<label class="col-sm-4 control-label">Jenis</label> <div class="col-sm-4">

<input name="jenis"

ng-model="modalRumusGaji.objectJabatan.jenis" class="form-control" type="text" placeholder="Harga perminggu" disabled>

</div> </div>

<div class="form-group form-group-sm" ng-class="{'has-error': formRumusGaji.shift.$invalid, 'has-success': formRumusGaji.shift. $valid}">

<label class="col-sm-4 control-label">Shift</label> <div class="col-sm-3">

<select name="shift" ng-model="modalRumusGaji.obj.shift" ng-options="shift for shift in modalRumusGaji.shift" class="form-control input-sm" required>

<option value="">--</option> </select>

</div> </div>

<div ng-if="modalRumusGaji.objectJabatan.jenis === 'Harian'" class="form-group form-group-sm" ng-class="{'has-success':

formRumusGaji.harga.$valid, 'has-error': formRumusGaji.harga. $invalid}">

<label class="col-sm-4 control-label">Harga perminggu</label>

(15)

<div class="help-block" ng-messages="formRumusGaji.harga. $error">

<small class="help-block" ng-message="required">* Harga perminggu wajib di isi</small>

</div> </div>

<div class="help-block" ng-if="formRumusGaji.harga.$valid" ng-show="modalRumusGaji.objectJabatan.jenis === 'Harian'">

<small class="help-block">

<span tooltip-popup-delay='500' tooltip='Harga perhari' class="glyphicon glyphicon-info-sign

margin-span"></span>{{modalRumusGaji.obj.harga / 6 | numberFormat:"Rp ":0}}</small>

</div> </div> </div>

<div ng-if="modalRumusGaji.objectJabatan.jenis === 'Borongan'" class="form-group form-group-sm" ng-class="{'has-success':

formRumusGaji.harga.$valid, 'has-error': formRumusGaji.harga. $invalid}">

<label class="col-sm-4 control-label">Harga normal</label> <div class="col-sm-4">

<input name="harga" ng-model="modalRumusGaji.obj.harga" class="form-control" type="number" placeholder="Harga normal" required>

<div class="help-block" ng-messages="formRumusGaji.harga. $error">

<small class="help-block" ng-message="required">* Harga normal wajib di isi</small>

</div> </div> </div>

formRumusGaji.hargaTarget.$valid, 'has-error': formRumusGaji.hargaTarget.$invalid}">

<label class="col-sm-4 control-label">Harga target</label> <div class="col-sm-4">

<input name="hargaTarget"

ng-model="modalRumusGaji.obj.hargaTarget" class="form-control" type="number" placeholder="Harga target" required>

ng-messages="formRumusGaji.hargaTarget.$error">

<small class="help-block" ng-message="required">* Harga target wajib di isi</small>

</div> </div> </div>

formRumusGaji.targetProduksi.$valid, 'has-error': formRumusGaji.targetProduksi.$invalid}">

<label class="col-sm-4 control-label">Target produksi</label>

(16)

<input name="targetProduksi"

ng-model="modalRumusGaji.obj.targetProduksi" class="form-control" type="number" placeholder="Target produksi" required>

ng-messages="formRumusGaji.targetProduksi.$error">

<small class="help-block" ng-message="required">* Target produksi wajib di isi</small>

</div> </div> </div>

formRumusGaji.targetJmlProduksi.$valid, 'has-error': formRumusGaji.targetJmlProduksi.$invalid}">

<label class="col-sm-4 control-label">T.Jml Produksi</label> <div class="col-sm-4">

<input name="targetJmlProduksi"

ng-model="modalRumusGaji.obj.targetJmlProduksi" class="form-control" type="number" placeholder="Target Jumlah Produksi" required>

ng-messages="formRumusGaji.targetJmlProduksi.$error">

<small class="help-block" ng-message="required">* T.Jml produksi wajib di isi</small>

</div> </div> </div>

<div class="form-group form-group-sm" ng-class="{'has-success': formRumusGaji.uangHadir.$valid, 'has-error': formRumusGaji.uangHadir.$invalid}">

<label class="col-sm-4 control-label">Uang hadir</label> <div class="col-sm-4">

<input name="uangHadir"

ng-model="modalRumusGaji.obj.uangHadir" class="form-control" type="number" placeholder="Uang hadir" required>

ng-messages="formRumusGaji.uangHadir.$error">

<small class="help-block" ng-message="required">* Harga Uang hadir wajib di isi</small>

</div> </div> </div>

</div>

<button class="btn btn-primary" ng-class="{'btn-danger disabled': formRumusGaji.$invalid, 'btn-success': formRumusGaji. $valid}"

ng-click="modalRumusGaji.save(modalRumusGaji.objectJabatan)">Simpan</ button>

ng-click="modalRumusGaji.cancel()">Batal</button> </div>

(17)

11. views/penggajian/penggajian.html

<ng-tabs title-tabs="Mengelola Penggajian Karyawan" pull-body> <ng-tabs-content title-content="Harian">

<div class="body">

<button ng-click="PenggajianCtrl.add('Harian')" class="btn btn-sm btn-primary pull-right">Hitung penggajian karyawan harian</button>

</div> </div>

<thead> <tr>

<th class="text-center">Nama Lengkap</th> <th class="text-center">Jabatan</th> <th class="text-center">Tanggal</th> <th class="text-center">Shift</th> <th class="text-center">Khdr</th> <th class="text-center">Harga</th> <th class="text-center">Uang Hadir</th> <th class="text-center">Gapok</th> <th class="text-center">Bonus</th> <th class="text-center">Total Gaji</th> <th class="text-center">

<span class="glyphicon glyphicon-calendar"></span>

</th> </tr> </thead> <tbody>

<tr ng-repeat="i in

limitTo:PenggajianCtrl.limit track by i.idPenggajian"> <td class="text-center"

title="{{i.idPenggajian}}">{{(PenggajianCtrl.numberPage-1)*PenggajianCtrl.limit+$index+1}}</td>

<td class="text-center">{{i.namaLengkap}}</td> <td class="text-center">{{i.jabatan}}</td> <td class="text-center">{{i.waktu.penggajian | date:'d MMM yyyy'}}</td>

<td

class="text-center">{{i.rincianRumusGaji.shift}}</td>

<td class="text-center">{{i.kehadiran}}</td>

<td class="text-center">{{i.rincianRumusGaji.harga | numberFormat:"Rp ":0}}</td>

(18)

<td class="text-center">{{i.bonus | numberFormat:"Rp ":0}}</td>

<td class="text-center">{{i.totalGaji | numberFormat:"Rp ":0}}</td>

<a href ng-click="PenggajianCtrl.edit('Harian', i)" tooltip-popup-delay='500' tooltip='Sunting data'>

<a href ng-click="PenggajianCtrl.delete(i)" tooltip-popup-delay='500' tooltip='Hapus data'>

</a> </td> </tr> </tbody> <tfoot

ng-hide="PenggajianCtrl.penggajianKaryawanHarian <= 0"> <tr>

<th colspan="7" class="text-center">Jumlah</th> <th

class="text-center">{{PenggajianCtrl.penggajianKaryawanHarian |

filter:'Harian' | filter:RootCtrl.filter | sumByKey:'uangHadir' | numberFormat:"Rp ":0}}</th>

<th

filter:'Harian' | filter:RootCtrl.filter | sumByKey:'gajipokok' | numberFormat:"Rp ":0}}</th>

<th

filter:'Harian' | filter:RootCtrl.filter | sumByKey:'bonus' | numberFormat:"Rp ":0}}</th>

<th

filter:'Harian' | filter:RootCtrl.filter | sumByKey:'totalGaji' | numberFormat:"Rp ":0}}</th>

</tr> </tfoot> </table>

<pagination

total-items="PenggajianCtrl.penggajianKaryawanHarian | filter:'Harian'| filter:RootCtrl.filter | length"

ng-model="PenggajianCtrl.numberPage"

max-size="PenggajianCtrl.maxSize" class="pagination-sm pull-right" boundary-links="true" previous-text="Sebelumnya"

next-text="Selanjutnya" first-text="Pertama" last-text="Terakhir" ng-hide="(PenggajianCtrl.penggajianKaryawanHarian | filter:'Harian' | filter:RootCtrl.filter | length) <=

PenggajianCtrl.limit"></pagination> </div>

</div> </div>

</ng-tabs-content>

(19)

</ng-tabs-content> </ng-tabs>

12. views/penggajian/modal-penggajian.html

<form class="form-horizontal" name="formPenggajian"> <div class="modal-header">

<h4 class="modal-title">

Proses {{modalPenggajianCtrl.aksi}} Penggajian - {{modalPenggajianCtrl.jenis}}

</h4> </div>

<div class="form-group form-group-sm" ng-class="{'has-error': formPenggajian.karyawan.$invalid, 'has-success':

formPenggajian.karyawan.$valid}">

<label class="col-sm-3 control-label">Nama Depan</label> <div class="col-sm-5">

<select name="karyawan" class="form-control input-sm" ng-model="modalPenggajianCtrl.objectKaryawan" ng-options="

objectKaryawan.namaDepan +' '+ objectKaryawan.namaBelakang group by objectKaryawan.rincianJabatan.jabatan for objectKaryawan in modalPenggajianCtrl.arrayKaryawan |

filter:modalPenggajianCtrl.jenis track by objectKaryawan.nip" ng-change="modalPenggajianCtrl.resetPenggajian()" required>

<option value="">-- Pilih Karyawan --</option> </select>

ng-messages="formPenggajian.karyawan.$error">

<small class="help-block" ng-message="required">* Karyawan wajib di isi</small>

</div> </div> </div>

<div class="form-group form-group-sm" ng-class="{'has-error': formPenggajian.tanggal.$invalid, 'has-success':

formPenggajian.tanggal.$valid}">

<label class="col-sm-3 control-label">Tgl Penggajian</label> <div class="col-sm-4">

<div class="input-group input-group-sm">

<input name="tanggal" type="text" class="form-control text-center" datepicker-popup="{{modalPenggajianCtrl.format}}" ng-model="modalPenggajianCtrl.tanggalPenggajian"

is-open="modalPenggajianCtrl.opened"

min-date="modalPenggajianCtrl.minDate"

(20)

<button type="button btn-sm" class="btn btn-default" ng-click="modalPenggajianCtrl.open($event)"><i class="glyphicon glyphicon-calendar"></i>

</button> </span> </div>

</div>

ng-messages="formPenggajian.tanggal.$error">

</div> </div> </div>

<div class="form-group form-group-sm">

<input name="totalGaji"

ng-model="modalPenggajianCtrl.objectKaryawan.jabatan" class="form-control" type="text" disabled>

</div> </div>

<div class="form-group form-group-sm" ng-class="{'has-error': formPenggajian.rumusgaji.$invalid, 'has-success':

formPenggajian.rumusgaji.$valid}">

<label class="col-sm-3 control-label">Shift</label> <div class="col-sm-5">

<select name="rumusgaji" class="form-control input-sm" ng-model="modalPenggajianCtrl.obj.rincianRumusGaji" ng-options=" objectRumusGaji.shift group by

objectRumusGaji.rincianJabatan.jenis for objectRumusGaji in modalPenggajianCtrl.arrayRumusGaji | filter:

{jenis:modalPenggajianCtrl.jenis,

jabatan:modalPenggajianCtrl.objectKaryawan.jabatan} track by objectRumusGaji.idRumusGaji" required>

<option value="">-- Pilih Shift --</option> </select>

ng-messages="formPenggajian.rumusgaji.$error">

<small class="help-block" ng-message="required">* Shift wajib di isi</small>

</div> </div> </div>

<label class="col-sm-3 control-label">Jenis</label> <div class="col-sm-4">

ng-value="modalPenggajianCtrl.obj.rincianRumusGaji.jenis" class="form-control" type="text" disabled>

(21)

</div>

<label class="col-sm-3 control-label">Harga</label> <div class="col-sm-4">

ng-value="modalPenggajianCtrl.obj.rincianRumusGaji.harga" class="form-control" type="text" disabled>

</div> </div>

<div class="form-group form-group-sm" ng-class="{'has-success': formPenggajian.kehadiran.$valid, 'has-error': formPenggajian.kehadiran.$invalid}">

<label class="col-sm-3 control-label">Kehadiran</label> <div class="col-sm-2">

<input name="kehadiran"

ng-model="modalPenggajianCtrl.obj.kehadiran" class="form-control" type="number" placeholder="Nol" required>

</div>

ng-messages="formPenggajian.kehadiran.$error">

<small class="help-block" ng-message="required">* Minimal angka nol</small>

</div> </div> </div>

<label class="col-sm-3 control-label">Uang Hadir</label> <div class="col-sm-4">

ng-value="modalPenggajianCtrl.obj.uangHadir" class="form-control" type="text" disabled>

</div> </div>

<label class="col-sm-3 control-label">Gaji pokok</label> <div class="col-sm-4">

<input name="gajiPokok"

ng-model="modalPenggajianCtrl.obj.gajiPokok" class="form-control" type="number" placeholder="Gaji pokok" disabled>

</div> </div>

<label class="col-sm-3 control-label">Bonus</label> <div class="col-sm-4">

<input name="bonus"

ng-model="modalPenggajianCtrl.obj.bonus" class="form-control" type="number" placeholder="Bonus">

(22)

</div>

<label class="col-sm-3 control-label">Total Gaji</label> <div class="col-sm-4">

ng-model="modalPenggajianCtrl.obj.totalGaji" class="form-control" type="number" placeholder="Total Gaji" disabled="">

</div>

</div>

<button class="btn btn-primary" ng-class="{'btn-danger disabled': formPenggajian.$invalid, 'btn-success': formPenggajian. $valid}"

ng-click="modalPenggajianCtrl.save(modalPenggajianCtrl.obj.idPenggaji an)">Simpan</button>

ng-click="modalPenggajianCtrl.cancel()">Batal</button> </div>

</div> </form>

13. scripts/app.js

'use strict';

angular.module('jayaMekarApp', [ 'ui.router',

'ngMessages', 'ui.bootstrap' ])

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/jabatan'); $stateProvider

.state('jabatan', { url: '/jabatan',

templateUrl: 'views/jabatan/jabatan.html', controller: 'JabatanCtrl'

})

.state('karyawan', { url: '/karyawan',

templateUrl: 'views/karyawan/karyawan.html', controller: 'KaryawanCtrl'

})

.state('rumus-gaji', { url: '/rumus-gaji',

templateUrl: 'views/rumus-gaji/rumus-gaji.html', controller: 'RumusGajiCtrl'

(23)

.state('penggajian', { url: '/penggajian',

templateUrl: 'views/penggajian/penggajian.html', controller: 'PenggajianCtrl'

}) } ]);

14. config/app.config.js

'use strict';

angular.module('jayaMekarApp') .constant('APP_CONFIG', { 'brandTop': {

nama: 'Nama Aplikasi', icon: 'Icon Aplikasi' }

})

.config(['APP_CONFIG', function(APP_CONFIG) { APP_CONFIG.brandTop = { nama: 'Jaya Mekar' };

APP_CONFIG.menuNavRightTop = [ {

href: '#', menu: 'DEMO', ngClassD: 'caret', dropdown: true, submenu: [{

href: 'contoh-data', submenu: 'Contoh Data',

ngClass: 'glyphicon glyphicon-file' }]

} ]; } ]);

15. controller/root.js

'use strict';

angular.module('jayaMekarApp')

.controller('RootCtrl', ['$scope', 'APP_CONFIG', function($scope, APP_CONFIG) {

var vm = $scope.RootCtrl = this; vm.brand = APP_CONFIG.brandTop;

(24)

vm.toggleSidebar = function() { vm.withSidebar = !vm.withSidebar; };

} ]);

16. controller/jabatan.js

'use strict';

.controller('JabatanCtrl', ['$scope', 'jabatanFactory', function($scope, jabatanFactory) {

var that = $scope.JabatanCtrl = this; this.jabatan = jabatanFactory.jabatan; this.render = {

jabatanDipakai: function(object) { return object.karyawan.length > 0 || object.rumusGaji.length > 0 ? true : false; },

hapusData: function(object) {

return object.karyawan.length <= 0 && object.rumusGaji.length <= 0 ? true : false; }

};

jabatanFactory.get().then(function(result) { that.jabatan = result;

});

this.add = function(size) {

jabatanFactory.openModal(size); };

this.edit = function(size, obj) { jabatanFactory.openModal(size, obj); };

this.delete = function(obj) { jabatanFactory.del(obj); };

} ]);

17. controller/karyawan.js

'use strict';

(25)

.controller('KaryawanCtrl', ['$scope', 'karyawanFactory', '$indexedDB',

function($scope, karyawanFactory, $indexedDB) { var that = $scope.KaryawanCtrl = this;

this.karyawan = karyawanFactory.karyawan; this.jabatan = [];

this.maxSize = 7; this.numberPage = 1; this.limit = 10;

$indexedDB.getAll(['jabatan']).then(function(result) { that.jabatan = result;

});

karyawanFactory.get().then(function(result) { that.karyawan = result;

});

this.add = function() {

var jabatan = that.jabatan;

karyawanFactory.openModal(jabatan); };

this.edit = function(obj) { var jabatan = that.jabatan;

karyawanFactory.openModal(jabatan, obj); };

this.delete = function(obj) { karyawanFactory.del(obj); };

} ]);

18. controller/rumus-gaji.js

'use strict';

.controller('RumusGajiCtrl', ['$scope', '$indexedDB', 'rumusGajiFactory',

function($scope, $indexedDB, rumusGajiFactory) { var that = $scope.RumusGajiCtrl = this;

this.rumusgaji = rumusGajiFactory.rumusgaji; this.jabatan = [];

this.maxSize = 7; this.numberPage = 1; this.limit = 10;

(26)

that.rumusgaji = result; });

$indexedDB.getAll(['jabatan']).then(function(result) { that.jabatan = result;

});

this.add = function(jenis) { var jabatan = that.jabatan;

rumusGajiFactory.openModal(jenis, jabatan); };

this.edit = function(jenis, obj) { var jabatan = that.jabatan;

rumusGajiFactory.openModal(jenis, jabatan, obj); };

this.delete = function(obj) { rumusGajiFactory.del(obj); };

} ]);

19. controller/penggajian.js

'use strict';

.controller('PenggajianCtrl', ['$scope', 'karyawanFactory', 'rumusGajiFactory', 'penggajianKaryawanHarianFactory',

function($scope, karyawanFactory, rumusGajiFactory, penggajianKaryawanHarianFactory) {

var that = $scope.PenggajianCtrl = this; this.karyawan = karyawanFactory.karyawan; this.rumusgaji = rumusGajiFactory.rumusgaji; this.penggajianKaryawanHarian =

penggajianKaryawanHarianFactory.penggajian; this.maxSize = 7;

this.numberPage = 1; this.limit = 10;

karyawanFactory.get().then(function(result) { that.karyawan = result;

});

rumusGajiFactory.get().then(function(result) { that.rumusgaji = result;

});

penggajianKaryawanHarianFactory.getAll().then(function(result) {

(27)

});

this.add = function(jenis) { var karyawan = that.karyawan; var rumusgaji = that.rumusgaji; var aksi = 'Tambah data';

penggajianKaryawanHarianFactory.openModal(aksi, karyawan, rumusgaji, jenis);

};

this.edit = function(jenis, obj) { var karyawan = that.karyawan; var rumusgaji = that.rumusgaji; var aksi = 'Sunting data';

penggajianKaryawanHarianFactory.openModal(aksi, karyawan, rumusgaji, jenis, obj);

};

this.delete = function(obj) {

penggajianKaryawanHarianFactory.del(obj); };

} ]);

20. service/id-factory.js

'use strict';

angular.module('jayaMekarApp') .factory('$id', function() { var id = uuid.noConflict(); return function() {

return id.v4(); };

});

21. services/indexeddb-provider.js

'use strict';

.provider('$indexedDB', function() {

var idb = {

namaIdb: 'Jaya Mekar', versiIdb: 1

};

(28)

var openRequest = window.indexedDB.open(idb.namaIdb, idb.versiIdb);

openRequest.onerror = function(event) { $log.error(event.target.errorCode); };

openRequest.onupgradeneeded = function(event) { db = event.target.result;

var objectStore;

// S:Pembuatan ObjectStore

// Jika objectStore belum ada maka objectStre akan dibuat

if (!db.objectStoreNames.contains('jabatan')) { objectStore = db.createObjectStore('jabatan', { keyPath: 'idJabatan',

unique: true

}); }

if (!db.objectStoreNames.contains('karyawan')) { objectStore = db.createObjectStore('karyawan', { keyPath: 'nip',

unique: true

});

// parameter 1 = nama_index

// parameter 2 = nama_properti_objek

objectStore.createIndex('idJabatan', 'idJabatan', { unique: false

}); }

if (!db.objectStoreNames.contains('rumusgaji')) { objectStore = db.createObjectStore('rumusgaji', { keyPath: 'idRumusGaji',

unique: true

});

}); }

if (!db.objectStoreNames.contains('penggajian')) { objectStore = db.createObjectStore('penggajian', { keyPath: 'idPenggajian',

unique: true

});

objectStore.createIndex('nip', 'nip', { unique: false

});

}); }

// E:Pembuatan ObjectStore };

/* fungsi di panggil jika success */ openRequest.onsuccess = function(event) { db = event.target.result;

db.onerror = function(event) {

(29)

};

defer.resolve(db); };

return defer.promise; }; // E:this.init()

this.getAll = function(arrayObjStore) { var result = [];

var defer = $q.defer();

this.init().then(function(db) {

var handleResult = function(event) { var cursor = event.target.result; if (cursor) {

result.push(cursor.value); cursor.continue();

} };

var transaction = db.transaction(arrayObjStore, 'readonly');

angular.forEach(arrayObjStore, function(value) { transaction.objectStore(value)

.openCursor()

.onsuccess = handleResult; });

transaction.oncomplete = function() { defer.resolve(result);

}; });

return defer.promise; }; // E:this.getAll()

this.getById = function(objStore, key) { var defer = $q.defer();

this.init().then(function(db) {

var transaction = db.transaction([objStore]);

var objectStore = transaction.objectStore(objStore); var request = objectStore.get(key);

request.onerror = function(event) { $log.error(event.target.errorCode); };

request.onsuccess = function() { var data = request.result; defer.resolve(data);

}; });

return defer.promise; }; // E:this.getById()