javascript
<script lang="ts">
import { defineComponent,ref, onMounted } from 'vue';
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, loadingController, IonCard, IonCardContent,
IonDatetime, IonPopover, IonButton, IonIcon, IonInput, IonLabel, IonItem } from '@ionic/vue';
import datetimeHelper from "../../components/helpers/datetime";
import { TokenService } from '@/services/token.service';
import {incentiveService} from "../../services/incentivestatement.service";
import {MemberInterface} from '../../interfaces/memberInfo.interface'
export default defineComponent({
name: 'IncentiveStatement',
components: {
IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonCard, IonCardContent,
IonDatetime, IonPopover, IonButton, IonIcon, IonInput, IonLabel, IonItem
},
data(){
return {
}
},
methods:{
formatDate(value:string)
{
if(value.length>10)
{
return value.substring(0, 10);
}
else{
return value;
}
},
},
setup(){
const dateFrom = ref(datetimeHelper.formatDateYYYYMMDD(datetimeHelper.getFirstDateOfMonth(datetimeHelper.getToday()), "-"));
let currentMId = parseInt(TokenService.getCustomToken("mId") as string);
const mList = ref<MemberInterface[]>([]);
//const items = ref<MemberInterface[]>([]);
onMounted(async ()=>{
await pushData();
console.log("Mounted");
})
const getMemberByMId = async()=>{
const res = await incentiveService.getMemberByMId(currentMId).then(function(response){
return response;
})
if(res.status ==200){
if(res.data.success){
if(res.data.returnData != "No Record Found"){
mList.value = res.data.returnData;
console.log('ok');
// Object.entries(mList.value).forEach(([key,value])=>{
// console.log(key,value);
// items.value.push(value);
//})
}
}
}
}
const pushData =async() =>{
await getMemberByMId();
console.log('Pushed');
}
return{
dateFrom,mList,getMemberByMId,
}
}
});
</script>
html
<template>
<ion-page>
<ion-content :fullscreen="true">
<ion-header>
<ion-toolbar>
<ion-title size="large">{{$t("incentiveStatement")}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-card>
<ion-card-content>
<ion-item color="secondary">
<ion-label>Search</ion-label>
</ion-item>
<table>
<thead>
</thead>
<td>Select Month</td>
<td data-label="Month"><ion-input :value="dateFrom" @ionInput="dateFrom = formatDate($event.target.value);" style="border-style: solid;" readonly></ion-input>
<ion-button id="open-date-input-from">
<ion-icon slot="end" fill="clear" size="small" icon="calendar" ></ion-icon>
</ion-button>
<ion-popover trigger="open-date-input-from" :show-backdrop="false">
<ion-datetime @ionChange="dateFrom = formatDate($event.target.value)" v-model="dateFrom"
presentation="month-year"
displayFormat="YYYY-MM"/>
</ion-popover>
</td>
</table>
<ion-item color="secondary">
<ion-label>Information</ion-label>
</ion-item>
<table>
<thead>
<th>Member ID</th>
<th>Name</th>
</thead>
<tr v-for="item in mList" :key="item">
<td data-label="Member ID">{{item.mAcName}}</td>
<td data-label="Name">{{item.mName}}</td>
</tr>
</table>
</ion-card-content>
</ion-card>
</ion-content>
</ion-page>
</template>
