admin-erahn/resources/js/components/Tunai.vue

<template>
  <div class="container mx-auto px-5 my-10">
    <modal ref="modal" @clickEvent_="getTunai"></modal>

		<nav>
			<ul class="flex flex-wrap -ml-2 -mt-2">
				<li v-for="(item, index) in items" :key="index" class="mt-2 pl-2">
					<button
						:class="[
							'relative px-4 py-2 overflow-hidden',
							'transition-colors duration-200',
							'bg-black text-white',
							'hover:bg-gray-400 hover:text-black'
						]"
						:disabled="$data.index === index"
						@click="setItem(index,item.kodlaluan)"
						v-text="item.kodlaluan"
					/>
				</li>
			</ul>
		</nav>

    <br>
    <span><b>PETUGAS</b> : {{ this.kodlaluan }}</span>

		<transition
			enter-active-class="transition-all transform duration-200 ease-out"
			leave-active-class="transition-all transform duration-200 ease-in"
			:enter-class="`${
				$data.leftToRight ? '-translate-x-10' : 'translate-x-10'
			} opacity-0`"
			enter-to-class="translate-0 opacity-100"
			leave-class="translate-0 opacity-100"
			:leave-to-class="`${
				$data.leftToRight ? 'translate-x-10' : '-translate-x-10'
			} opacity-0`"
			mode="out-in"
		>
			<article
				:key="$data.index"
				class="mt-12 lg:mt-16 prose prose-sm lg:prose-lg"
			>
	

			<table class="min-w-full leading-normal">
            <thead class="text-center">
              <tr>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Bil
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Tarikh
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  B/F
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Pendahuluan
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Serahan
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Pembiayaan
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Penyelesaian Pembiayaan
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  C/F
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Act
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(tunai,i) in showtunai.data" :key="i">
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="(showtunai.from + i)">
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="tunai.tarikh">
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="formatterfunction(tunai.bakiawal)">
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="formatterfunction(tunai.tambah)">
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="formatterfunction(tunai.kurang)">
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="formatterfunction(tunai.keluar)">
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="formatterfunction(tunai.masuk)">
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="formatterfunction(tunai.baki)">
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <button @click="action(tunai.tarikh,tunai.kodcaw,tunai.kodlaluan)" class="border border-yellow-600 text-yellow-600 font-montserrat py-2 px-4 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-checklist" viewBox="0 0 16 16">
                        <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
                        <path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
                        </svg>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>

    <pagination :data="paginate" @clickEvent_="getTunai"></pagination>

			</article>
		</transition>
    <div v-if="showLoader" class="fixed inset-0 z-30 h-full w-full"  id="loading">
      <i class="animate-spin fas fa-circle-notch fixed fa-4x m-auto text-yellow-500" style="left:50% !important;top:50% !important;"></i>
    </div>
    <div v-if="showLoader" class="opacity-25 fixed inset-0 z-30 bg-black"></div>

	</div>
</template>

<script>
import { ChevronLeftIcon, ChevronRightIcon } from '@vue-hero-icons/solid'
import modal from './util/Modal.vue'
import pagination from './pagination.vue'

const formatter = new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 2
});

export default {
	components: {
		ChevronLeftIcon,
		ChevronRightIcon,
    modal,
    pagination
	},
	data() {
		return {
			index: 0,
			leftToRight: true,
      alirantunai:[],
      paginate:{},
      showtunai:[],
      perPage: 5,
      totalPage: 0,
      currentPage: 1,
      lastPage: 5,
      activePage: 1,
      showLoader:false,
      items:[],
      kodlaluan:''
		};
	},
	created() {
    this.getItems().then((response) => {
      this.items = response.data
      this.kodlaluan = this.items[0].kodlaluan
      this.getTunai(this.currentPage)
    })

	},

	methods: {
    getItems(){
      // $teller = Http::get( config('api.url') .'/api/get/tellerwork/'. $auth_user['cawangan'])->json();
      return this.axios.get(this.$hostname + '/api/get/tellerwork/' + this.$kodcaw);
     
    },
    setActive(index){
        this.activePage = index + 1
    },
		setItem(index,kod) {
			// Update LTR before changing $data.index
			this.$data.leftToRight = index > this.$data.index;
			this.$data.index = index;
      this.activePage = 1;
      this.kodlaluan = kod;

      this.getTunai(0)
		},

    action(tarikhteller,kodcawteller,tel){
      this.showLoader = true;
      axios.get('/api/check/periksaalirantunai', {
        params: {
          hostname:this.$hostname,
          tarikh: tarikhteller,
          kodcaw: kodcawteller,
          teller: tel

        }
      }).then(response => { 

        if(response.data === 'sama')
        {
          this.showLoader = false;
         this.$toast("Nilai Tunai sama dengan nilat tunai");

        }else{
          this.alirantunai = response.data;
          this.showLoader = false;
          this.$refs.modal.showModal = true;
          this.$refs.modal.serahan = formatter.format(this.alirantunai.serahan);
          this.$refs.modal.bakiawal = formatter.format(this.alirantunai.bakiawal);
          this.$refs.modal.bakiakhir = formatter.format(this.alirantunai.bakisemasa);
          this.$refs.modal.pendahuluan = formatter.format(this.alirantunai.pendahuluan);
          this.$refs.modal.penebusan = formatter.format(this.alirantunai.penebusan);
          this.$refs.modal.gadaian = formatter.format(this.alirantunai.gadaian);
          this.$refs.modal.kodlaluan = tel;
          this.$refs.modal.kodcaw = kodcawteller;
          this.$refs.modal.tarikh = tarikhteller;
          this.$refs.modal.pageNumber = this.currentPage;
        }
       });
      },

      getTunai(pageNumber){
        this.axios.get(this.$hostname + '/admin/getTunaiPaginate/' + this.$kodcaw,{
          params: {
          page: pageNumber,
          kodlaluan: this.kodlaluan
        }
        }).then(response => {
            this.showtunai = response.data
            this.paginate = response.data
            this.currentPage = pageNumber
        });
      },
      formatterfunction: function(value){
        return formatter.format(value)
      }
  }
}
</script>