Initial import

one-ui/report/one-report-v7/api/report.js

@@ -0,0 +1,97 @@
+const URL = "/one-api/v1/report-v7/main/";
+const dUrl = "/one-api/v1/report-v7/lookup/dropdown/";
+const aUrl = "/one-api/v1/report-v7/lookup/ac/";
+
+export async function list(search) {
+   try {
+      var resp = await axios.post(URL + 'list',{token: window.one_token(), search});
+      if (resp.status != 200) {
+         return {
+            status: "ERR",
+            message: resp.statusText
+         };
+      }
+      let data = resp;
+      return data;
+   } catch(e) {
+      return {
+         status: "ERR",
+         message: e.message
+      };
+   }
+}
+export async function lookupparam(prm) {
+    try {
+       var resp = await axios.post(URL + 'lookupparam',prm);
+       if (resp.status != 200) {
+          return {
+             status: "ERR",
+             message: resp.statusText
+          };
+       }
+       let data = resp;
+       return data;
+    } catch(e) {
+       return {
+          status: "ERR",
+          message: e.message
+       };
+    }
+ }
+export async function detail(id) {
+   try {
+      var resp = await axios.post(URL + 'detail',{id:id,token: window.one_token()});
+      if (resp.status != 200) {
+         return {
+            status: "ERR",
+            message: resp.statusText
+         };
+      }
+      let data = resp;
+      return data;
+   } catch(e) {
+      return {
+         status: "ERR",
+         message: e.message
+      };
+   }
+}
+ export async function listdropdown(sp) {
+    try {
+       var resp = await axios.post(dUrl + sp);
+       if (resp.status != 200) {
+          return {
+             status: "ERR",
+             message: resp.statusText
+          };
+       }
+       let data = resp.data;
+       return data;
+    } catch(e) {
+       return {
+          status: "ERR",
+          message: e.message
+       };
+    }
+ }
+ export async function listautocomplete(prm) {
+    try {
+        var sp = prm.sp
+        var search = prm.search
+       var resp = await axios.post(aUrl + sp ,
+                  {search: prm.search, dep: prm.dep , value: prm.value} );
+       if (resp.status != 200) {
+          return {
+             status: "ERR",
+             message: resp.statusText
+          };
+       }
+       let data = resp;
+       return data;
+    } catch(e) {
+       return {
+          status: "ERR",
+          message: e.message
+       };
+    }
+ }

one-ui/report/one-report-v7/components/oneDatePicker2.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-menu v-model="menu2" :close-on-content-click="false" :nudge-right="40" lazy transition="scale-transition" offset-y full-width
+    max-width="290px" min-width="290px">
+    <v-text-field slot="activator" v-model="computedDateFormatted" :label=init_label persistent-hint readonly browser-autocomplete="off"></v-text-field>
+    <v-date-picker v-model="init_date" no-title @input="menu2 = false" :max="init_max_date"></v-date-picker>
+  </v-menu>
+</template>
+
+<script>
+  module.exports = {
+    props: ['label', 'date', 'data', 'max_date'],
+
+    data() {
+      return {
+        init_date: this.date && this.date != "0000-00-00" ? this.date : null, //new Date().toISOString().substr(0, 10),
+        init_max_date: this.max_date ? this.max_date : '2999-09-09',
+        dateFormatted: this.formatDate(new Date().toISOString().substr(0, 10)),
+        menu1: false,
+        menu2: false,
+
+        init_label: this.label ? this.label : 'Date',
+        init_data: this.data ? this.data : ''
+      }
+    },
+
+    computed: {
+      computedDateFormatted() {
+        return this.formatDate(this.init_date)
+      }
+    },
+
+    watch: {
+      init_date(n, o) {
+        this.dateFormatted = this.formatDate(this.init_date)
+
+        this.$emit('change', {
+          "old_date": o,
+          "new_date": n,
+          "data": this.init_data
+        });
+      }
+    },
+
+    methods: {
+      formatDate(date) {
+        if (!date) {
+          return null
+        }
+
+        const [year, month, day] = date.split('-')
+        return `${day}-${month}-${year}`
+      },
+      parseDate(date) {
+        if (!date) return null
+
+        const [month, day, year] = date.split('/')
+        return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
+      },
+
+      emitChange(n, o) {
+        console.log("old:" + o)
+        console.log("new:" + n)
+      }
+    }
+  }
+</script>

one-ui/report/one-report-v7/components/oneReport.vue

@@ -0,0 +1,451 @@
+<template>
+  <div id="app">
+    <v-app id="inspire">
+      <v-container class="pa-2" grid-list-md fluid>
+        <v-layout row wrap>
+          <!--parameter-->
+
+          <v-dialog v-model="dialogchooseprint" persistent max-width="50%">
+            <v-card>
+              <v-card-title class="headline white--text  pt-2 pb-2" :class="reportColor" primary-title style="color:white">
+                <h4>{{reportTitle}}</h4>
+              </v-card-title>
+              <v-container>
+                <v-layout row>
+                  <v-flex xs12 pr-3>
+                    <v-flex v-for="(detail, idx) in details" :key="idx">
+                      <v-flex xs12 v-if="detail.R_InputTypeName=='date'" pa-2>
+                        <v-menu v-model="detail.tmp_date" 
+                           :close-on-content-click="false" :nudge-right="40" lazy transition="scale-transition" offset-y
+                          full-width max-width="290px" min-width="290px">
+                          <template v-slot:activator="{ on }">
+                            <v-text-field class="mr-2" 
+                            prepend-icon="event" v-model="detail.fmt_date" :label="detail.R_ReportDetailLabel" hide-details readonly
+                              v-on="on"></v-text-field>
+                          </template>
+                          <v-date-picker v-model="detail.model" no-title @input="detail.tmp_date = false" @change="formatDate(idx,detail.model)"></v-date-picker>
+                        </v-menu>
+                      </v-flex>
+
+                      <v-flex xs12 v-if="detail.R_InputTypeName=='text'" pa-2>
+                        <v-text-field class="mr-2" v-model="detail.model"
+                           @change="changeDetail(idx,detail.R_InputTypeName)" :label="detail.R_ReportDetailLabel"
+                          hide-details></v-text-field>
+                      </v-flex>
+
+                      <v-flex xs12 v-if="detail.R_InputTypeName=='dropdown'" pa-2>
+                        <v-select v-model="detail.model" return-object
+                           item-text="name" :items="detail.items" :label="detail.R_ReportDetailLabel"
+                          @change="changeDetail(idx,detail.R_InputTypeName)"></v-select>
+                      </v-flex>
+
+                      <v-flex xs12 v-if="detail.R_InputTypeName=='autocompletion'" pa-2>
+                        <v-autocomplete :label="detail.R_ReportDetailLabel"
+                           v-model="detail.model" @change="changeDetail(idx,detail.R_InputTypeName)"
+                          :items="detail.items"  auto-select-first no-filter
+                          :search-input.sync="search_autocomplete[idx]"
+                          item-text="name" return-object no-data-text="Cari....." small>
+                          <template slot="item" slot-scope="{ item }">
+                            <v-list-tile-content>
+                              <v-list-tile-title v-text="item.name"></v-list-tile-title>
+                            </v-list-tile-content>
+                          </template>
+                        </v-autocomplete>
+                      </v-flex>
+
+                    </v-flex>
+                    <v-flex md3>
+                     <v-radio-group v-model="formatreport" row>
+                        <v-radio color="grey" label="PDF" value="pdf"></v-radio>
+                        <v-radio v-if="withoutxls === 'N'" color="grey" label="EXCEL (xls)" value="xls"></v-radio>
+                        <v-radio v-if="withoutxls === 'O'" color="grey" label="EXCEL (xlsx)" value="xlsx"></v-radio>
+                     </v-radio-group>
+                      </v-flex>
+                  </v-flex>
+                </v-layout>
+              </v-container>
+              <v-alert :value="alertMessage!=''" type="warning">
+              {{alertMessage}}
+              </v-alert>
+              <v-divider></v-divider>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="black" flat @click="closeForm()"> Tutup </v-btn>
+                <v-btn color="grey" flat @click="doPrint()"> Cetak </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+
+          <!--endparameter-->
+          <v-toolbar class="pa-1 mb-2" color="blue lighten-3" dark height="60px">
+            <v-toolbar-title>DAFTAR LAPORAN</v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-flex xs3>
+            <v-text-field @keydown.enter="search_report" v-model="search" label="Filter Report "></v-text-field>
+            </v-flex>
+          </v-toolbar>
+
+
+          <v-flex xs4 v-for="(group, idx) in reports" :key="idx">
+            <v-card class="ml-3 pa-2" outlined tile>
+              <v-toolbar class="pa-1 mb-1" :color="group.color" dark height="30px">
+                {{group.name}}
+              </v-toolbar>
+              <v-card-actions v-for="(report, idy) in group.reports" :key="report.R_ReportID">
+                <v-btn @click="do_report(report)" style="width:100%;" class="rpt">
+                  <span style="color:brown">{{report.R_ReportCode}} </span> &nbsp; |&nbsp; {{report.R_ReportName}}
+                </v-btn>
+              </v-card-actions>
+
+
+            </v-card>
+         </v-flex>
+
+          <one-dialog-print :title="printtitle"
+            :width="printwidth" :height="500" :status="openprint"
+            :urlprint="urlprint"
+            @close-dialog-print="closePrint">
+         </one-dialog-print>
+
+        </v-layout>
+      </v-container>
+    </v-app>
+  </div>
+
+</template>
+
+<style scoped>
+  .rpt .v-btn__content {
+    justify-content: left;
+  }
+
+  .searchbox .v-input.v-text-field .v-input__slot {
+    min-height: 60px;
+  }
+
+  .searchbox .v-btn {
+    min-height: 60px;
+  }
+
+  table.v-table tbody td,
+  table.v-table tbody th {
+    height: 40px;
+  }
+
+  table.v-table thead tr {
+    height: 40px;
+  }
+
+  .textinput {
+    -webkit-transition: width 0.4s ease-in-out;
+    transition: width 0.4s ease-in-out;
+    background-color: white;
+    background-position: 10px 10px;
+    background-repeat: no-repeat;
+    padding-left: 40px;
+    width: 100%;
+    padding: 8px 10px;
+    margin-bottom: 5px;
+    box-sizing: border-box;
+    border: 1px solid #607d8b;
+
+  }
+
+  .textinput:focus {
+    width: 100%;
+  }
+
+  .textinput:focus::-webkit-input-placeholder {
+    color: transparent;
+  }
+
+  .textinput:focus::-moz-placeholder {
+    color: transparent;
+  }
+
+  .textinput:-moz-placeholder {
+    color: transparent;
+  }
+
+  .boxoutline {
+    color: red;
+    border: 1px solid red;
+    justify-content: center;
+    height: 45px;
+    line-height: 45px;
+    padding-left: 10px;
+    background: #ffffff;
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: 1px
+  }
+
+  .boxoutline:hover {
+    background: rgba(0, 0, 0, 0.07) !important;
+    font-size: 15px;
+    font-weight: 700;
+  }
+
+  .boxsolid {
+    color: #ffffff;
+    border: 1px solid #ffffff;
+    justify-content: center;
+    height: 45px;
+    line-height: 45px;
+    padding-left: 10px;
+    background: #f44336;
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: 1px
+  }
+
+  .boxsolid:hover {
+    background: #f44336de;
+    font-size: 15px;
+    font-weight: 700;
+  }
+
+  .scroll-container {
+    scroll-padding: 50px 0 0 50px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 7px;
+  }
+
+  /* this targets the default scrollbar (compulsory) */
+
+  ::-webkit-scrollbar-track {
+    background-color: #73baf3;
+  }
+
+  /* the new scrollbar will have a flat appearance with the set background color */
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #2196f3;
+  }
+
+  /* this will style the thumb, ignoring the track */
+
+  ::-webkit-scrollbar-button {
+    background-color: #0079da;
+  }
+
+  /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
+
+  ::-webkit-scrollbar-corner {
+    background-color: black;
+  }
+
+  /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
+</style>
+
+<script>
+  module.exports = {
+    data() {
+      return {
+        search: '',
+        search_autocomplete: [],
+        prev_search:[],
+        dialogchooseprint: false,
+        init_date: moment().format("Y-M-D"),
+        openprint: false,
+        sp_rpt: '',
+        urlprint: '',
+        printtitle: '',
+        printwidth: 600,
+        formatreport: 'pdf',
+        xsearch: '',
+        alertMessage:'',
+        withoutxls: 'N',
+        headers: [{
+            text: "",
+            align: "left",
+            sortable: false,
+            value: "mr",
+            width: "20%"
+          },
+          {
+            text: "",
+            align: "left",
+            sortable: false,
+            value: "mr",
+            width: "20%"
+          },
+          {
+            text: "",
+            align: "left",
+            sortable: false,
+            value: "mr",
+            width: "10%"
+          }
+        ],
+        pagination: {
+          descending: true,
+          page: 1,
+          rowsPerPage: 100,
+          sortBy: 'id DESC',
+          totalItems: this.$store.state.report.total_filter_params
+        }
+      }
+    },
+    components: {
+      'one-date-picker': httpVueLoader('./oneDatePicker2.vue'),
+      'one-dialog-print': httpVueLoader('../../../common/oneDialogPrintX.vue')
+    },
+    mounted() {
+      this.$store.dispatch("report/list","")
+    },
+    methods: {
+      search_report() {
+         this.$store.dispatch("report/list",this.search)
+      },
+      async do_report(r) {
+        await this.$store.commit("report/update_report", r)
+        this.search_autocomplete = []
+        await this.$store.dispatch("report/detail", r.R_ReportID)
+        let details = this.$store.state.report.details
+        this.prev_search = []
+        for(idx=0;idx < details.leth ; idx++) {
+           this.search_autocomplete[idx] = ''
+           this.prev_search.push('')
+        }
+        this.withoutxls = r.R_ReportWithoutXls
+        this.formatreport = 'pdf'
+        this.dialogchooseprint = true
+      },
+      closeForm() {
+        this.dialogchooseprint = false
+        this.$store.commit("report/update_details", [])
+      },
+      changeDetail(idx, tipe) {
+        var arrOrders = this.$store.state.report.details
+        arrOrders[idx].model = arrOrders[idx].model
+        this.$store.commit("report/update_details", arrOrders)
+      },
+      formatDate(idx,date) {
+       var arrOrders = this.$store.state.report.details
+        if (!date) return null
+        const [year, month, day] = date.split('-')
+        var f_date = `${day}-${month}-${year}`
+       arrOrders[idx].fmt_date = f_date
+       arrOrders[idx].model = date
+       this.$store.commit("report/update_details", arrOrders)
+
+        
+      },
+      formatDatex(idx,date) {
+        if (!date) return null
+
+        const [year, month, day] = date.split('-')
+        return `${day}-${month}-${year}`
+      },
+      deFormatedDate(date) {
+        if (!date) return null
+
+        const [day, month, year] = date.split('-')
+        return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
+      },
+      doPrint() {
+        this.printwidth = 1028
+        this.printtitle = ""
+        let user = one_user()
+        var d = new Date();
+        var n = d.getTime()
+        var rptname = this.reportUrl
+        var formatrpt = this.formatreport
+        var arrOrders = this.$store.state.report.details
+        let param = '';
+        this.alertMessage = ''
+        arrOrders.forEach((value, index) => {
+           let modelx = '';
+
+           switch(value.R_InputTypeName) {
+              case 'date' :
+                  if (value.model == '') this.alertMessage += value.R_ReportDetailLabel + ' invalid, '
+                  modelx = value.model;
+                 break;
+              case 'dropdown':
+              case 'autocompletion':
+                  modelx = value.model.id;
+                  if (! (parseInt(value.model.id) >= 0) ) this.alertMessage += value.R_ReportDetailLabel + ' invalid, '
+                 break;
+              default : //
+                 modelx = value.model ;
+                  if (value.model == '') this.alertMessage += value.R_ReportDetailLabel + ' invalid, '
+                 break;
+          }
+          param += "&" + value.R_ReportDetailParam.trim() + "=" + modelx.replace(' ', '+')
+        });
+        if ( this.alertMessage != '' ) return
+        this.dialogchooseprint = false
+        var param_all = param
+        this.urlprint = rptname + "&__format=" +
+          formatrpt + param_all + "&username=" + user.M_UserUsername.trim().replace(' ','+') + "&tm=" + n
+
+        console.log(this.urlprint)
+
+        this.openprint = true
+      },
+      closePrint() {
+        this.openprint = false
+      }
+    },
+    computed: {
+      reportTitle() {
+        return this.$store.state.report.report.R_ReportCode + ' | ' + this.$store.state.report.report.R_ReportName
+      },
+      reportUrl() {
+        return this.$store.state.report.report.R_ReportUrl
+      },
+      reportColor() {
+        return this.$store.state.report.report.R_ReportGroupColor
+      },
+      reports() {
+        return this.$store.state.report.reports
+      },
+      details() {
+        return this.$store.state.report.details
+      },
+      vparams() {
+        return this.$store.state.report.params
+      },
+      isLoading() {
+        return this.$store.state.report.search_status == 1
+      },
+    },
+    watch: {
+       search_autocomplete : {
+          deep: true,
+          handler: function (new_val, old) {
+           let details = this.$store.state.report.details
+           if (new_val == null ) return
+           for(let idx=0; idx < new_val.length; idx++) {
+              if (! new_val[idx] ) continue
+              if ( new_val[idx] != '' ) {
+                 if (new_val[idx] == this.prev_search[idx] ) continue
+                 this.prev_search[idx] = new_val[idx]
+                 let sp = details[idx].R_ReportDetailSourceSp
+                 let dep = details[idx].R_ReportDetailDepParam
+                 let value = ''
+                 if (dep && dep != '') {
+                    for(let idx_dep =0; idx_dep < details.length ; idx_dep++ ) {
+                       if (dep == details[idx_dep].R_ReportDetailParam ) {
+                           value = details[idx_dep].model.id
+                       } 
+                    }
+                 }
+                 this.$store.dispatch("report/listautocomplete", {
+                   search: new_val[idx],
+                   sp: sp,
+                   index: idx,
+                   dep: dep,
+                   value
+                 })
+              }
+           }
+         }
+       }
+    }
+  }
+</script>

one-ui/report/one-report-v7/components/oneReport0.vue

@@ -0,0 +1,394 @@
+<template>
+  <div id="app">
+    <v-app id="inspire">
+      <v-container class="pa-2" grid-list-md fluid>
+        <v-layout row wrap>
+          <!--parameter-->
+
+          <v-dialog v-model="dialogchooseprint" persistent max-width="50%">
+            <v-card>
+              <v-card-title class="headline white--text  pt-2 pb-2" :class="reportColor" primary-title style="color:white">
+                <h4>{{reportTitle}}</h4>
+              </v-card-title>
+              <v-container>
+                <v-layout row>
+                  <v-flex xs12 pr-3>
+                    <v-flex v-for="(detail, idx) in details" :key="idx">
+                      <v-flex xs12 v-if="detail.R_InputTypeName=='date'" pa-2>
+                        <v-text-field class="mr-2" prepend-icon="event"
+                           @change="changeDetail(idx,detail.R_InputTypeName)" :label="detail.R_ReportDetailLabel"
+                          placeholder="dd-mm-yyyy" mask="##-##-####" v-model="detail.model"></v-text-field>
+                      </v-flex>
+
+                      <v-flex xs12 v-if="detail.R_InputTypeName=='text'" pa-2>
+                        <v-text-field class="mr-2" v-model="detail.model"
+                           @change="changeDetail(idx,detail.R_InputTypeName)" :label="detail.R_ReportDetailLabel"
+                          hide-details></v-text-field>
+                      </v-flex>
+
+                      <v-flex xs12 v-if="detail.R_InputTypeName=='dropdown'" pa-2>
+                        <v-select v-model="detail.model" return-object
+                           item-text="name" :items="detail.items" :label="detail.R_ReportDetailLabel"
+                          @change="changeDetail(idx,detail.R_InputTypeName)"></v-select>
+                      </v-flex>
+
+                      <v-flex xs12 v-if="detail.R_InputTypeName=='autocompletion'" pa-2>
+                        <v-autocomplete :label="detail.R_ReportDetailLabel"
+                           v-model="detail.model" @change="changeDetail(idx,detail.R_InputTypeName)"
+                          :items="detail.items"  auto-select-first no-filter
+                          :search-input.sync="search_autocomplete[idx]"
+                          item-text="name" return-object no-data-text="Cari....." small>
+                          <template slot="item" slot-scope="{ item }">
+                            <v-list-tile-content>
+                              <v-list-tile-title v-text="item.name"></v-list-tile-title>
+                            </v-list-tile-content>
+                          </template>
+                        </v-autocomplete>
+                      </v-flex>
+
+                    </v-flex>
+                  </v-flex>
+                </v-layout>
+              </v-container>
+              <v-alert :value="alertMessage!=''" type="warning">
+              {{alertMessage}}
+              </v-alert>
+              <v-divider></v-divider>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="black" flat @click="closeForm()"> Tutup </v-btn>
+                <v-btn color="grey" flat @click="doPrint()"> Cetak </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+
+          <!--endparameter-->
+          <v-toolbar class="pa-1 mb-2" color="blue lighten-3" dark height="60px">
+            <v-toolbar-title>DAFTAR LAPORAN</v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-flex xs3>
+            <v-text-field @keydown.enter="search_report" v-model="search" label="Filter Report "></v-text-field>
+            </v-flex>
+          </v-toolbar>
+
+
+          <v-flex xs4 v-for="(group, idx) in reports" :key="idx">
+            <v-card class="ml-3 pa-2" outlined tile>
+              <v-toolbar class="pa-1 mb-1" :color="group.color" dark height="30px">
+                {{group.name}}
+              </v-toolbar>
+              <v-card-actions v-for="(report, idy) in group.reports" :key="report.R_ReportID">
+                <v-btn @click="do_report(report)" style="width:100%;" class="rpt">
+                  <span style="color:brown">{{report.R_ReportCode}} </span> &nbsp; |&nbsp; {{report.R_ReportName}}
+                </v-btn>
+              </v-card-actions>
+
+
+            </v-card>
+         </v-flex>
+
+          <one-dialog-print :title="printtitle"
+            :width="printwidth" :height="500" :status="openprint"
+            :urlprint="urlprint"
+            @close-dialog-print="closePrint">
+         </one-dialog-print>
+
+        </v-layout>
+      </v-container>
+    </v-app>
+  </div>
+
+</template>
+
+<style scoped>
+  .rpt .v-btn__content {
+    justify-content: left;
+  }
+
+  .searchbox .v-input.v-text-field .v-input__slot {
+    min-height: 60px;
+  }
+
+  .searchbox .v-btn {
+    min-height: 60px;
+  }
+
+  table.v-table tbody td,
+  table.v-table tbody th {
+    height: 40px;
+  }
+
+  table.v-table thead tr {
+    height: 40px;
+  }
+
+  .textinput {
+    -webkit-transition: width 0.4s ease-in-out;
+    transition: width 0.4s ease-in-out;
+    background-color: white;
+    background-position: 10px 10px;
+    background-repeat: no-repeat;
+    padding-left: 40px;
+    width: 100%;
+    padding: 8px 10px;
+    margin-bottom: 5px;
+    box-sizing: border-box;
+    border: 1px solid #607d8b;
+
+  }
+
+  .textinput:focus {
+    width: 100%;
+  }
+
+  .textinput:focus::-webkit-input-placeholder {
+    color: transparent;
+  }
+
+  .textinput:focus::-moz-placeholder {
+    color: transparent;
+  }
+
+  .textinput:-moz-placeholder {
+    color: transparent;
+  }
+
+  .boxoutline {
+    color: red;
+    border: 1px solid red;
+    justify-content: center;
+    height: 45px;
+    line-height: 45px;
+    padding-left: 10px;
+    background: #ffffff;
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: 1px
+  }
+
+  .boxoutline:hover {
+    background: rgba(0, 0, 0, 0.07) !important;
+    font-size: 15px;
+    font-weight: 700;
+  }
+
+  .boxsolid {
+    color: #ffffff;
+    border: 1px solid #ffffff;
+    justify-content: center;
+    height: 45px;
+    line-height: 45px;
+    padding-left: 10px;
+    background: #f44336;
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: 1px
+  }
+
+  .boxsolid:hover {
+    background: #f44336de;
+    font-size: 15px;
+    font-weight: 700;
+  }
+
+  .scroll-container {
+    scroll-padding: 50px 0 0 50px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 7px;
+  }
+
+  /* this targets the default scrollbar (compulsory) */
+
+  ::-webkit-scrollbar-track {
+    background-color: #73baf3;
+  }
+
+  /* the new scrollbar will have a flat appearance with the set background color */
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #2196f3;
+  }
+
+  /* this will style the thumb, ignoring the track */
+
+  ::-webkit-scrollbar-button {
+    background-color: #0079da;
+  }
+
+  /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
+
+  ::-webkit-scrollbar-corner {
+    background-color: black;
+  }
+
+  /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
+</style>
+
+<script>
+  module.exports = {
+    data() {
+      return {
+        search: '',
+        search_autocomplete: [],
+        dialogchooseprint: false,
+        openprint: false,
+        sp_rpt: '',
+        urlprint: '',
+        printtitle: '',
+        printwidth: 600,
+        formatreport: 'pdf',
+        xsearch: '',
+        alertMessage:'',
+        headers: [{
+            text: "",
+            align: "left",
+            sortable: false,
+            value: "mr",
+            width: "20%"
+          },
+          {
+            text: "",
+            align: "left",
+            sortable: false,
+            value: "mr",
+            width: "20%"
+          },
+          {
+            text: "",
+            align: "left",
+            sortable: false,
+            value: "mr",
+            width: "10%"
+          }
+        ],
+        pagination: {
+          descending: true,
+          page: 1,
+          rowsPerPage: 100,
+          sortBy: 'id DESC',
+          totalItems: this.$store.state.report.total_filter_params
+        }
+      }
+    },
+    components: {
+      'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue')
+    },
+    mounted() {
+      this.$store.dispatch("report/list","")
+    },
+    methods: {
+      search_report() {
+         this.$store.dispatch("report/list",this.search)
+      },
+      async do_report(r) {
+        await this.$store.commit("report/update_report", r)
+        this.search_autocomplete = []
+        await this.$store.dispatch("report/detail", r.R_ReportID)
+        let details = this.$store.state.report.details
+        for(idx=0;idx < details.leth ; idx++) {
+           this.search_autocomplete[idx] = ''
+        }
+        this.formatreport = 'pdf'
+        this.dialogchooseprint = true
+      },
+      closeForm() {
+        this.dialogchooseprint = false
+        this.$store.commit("report/update_details", [])
+      },
+      changeDetail(idx, tipe) {
+        var arrOrders = this.$store.state.report.details
+        arrOrders[idx].model = arrOrders[idx].model
+        this.$store.commit("report/update_details", arrOrders)
+      },
+      doPrint() {
+        this.printwidth = 1028
+        this.printtitle = ""
+        let user = one_user()
+        var d = new Date();
+        var n = d.getTime()
+        var rptname = this.reportUrl
+        var formatrpt = this.formatreport
+        var arrOrders = this.$store.state.report.details
+        let param = '';
+        this.alertMessage = ''
+        arrOrders.forEach((value, index) => {
+           let modelx = '';
+
+           switch(value.R_InputTypeName) {
+              case 'date' :
+                  if (value.model == '') this.alertMessage += value.R_ReportDetailLabel + ' invalid, '
+                  modelx = moment(value.model, 'DDMMYYYY').format('YYYY-MM-DD');
+                 break;
+              case 'dropdown':
+              case 'autocompletion':
+                  modelx = value.model.id;
+                  if (! (parseInt(value.model.id) >= 0) ) this.alertMessage += value.R_ReportDetailLabel + ' invalid, '
+                 break;
+              default : //
+                 modelx = value.model ;
+                  if (value.model == '') this.alertMessage += value.R_ReportDetailLabel + ' invalid, '
+                 break;
+          }
+          param += "&" + value.R_ReportDetailParam.trim() + "=" + modelx.replace(' ', '+')
+        });
+        if ( this.alertMessage != '' ) return
+        this.dialogchooseprint = false
+        var param_all = param
+        this.urlprint = rptname + "&__format=" +
+          formatrpt + param_all + "&username=" + user.M_UserUsername.trim().replace(' ','+') + "&tm=" + n
+
+        console.log(this.urlprint)
+
+        this.openprint = true
+      },
+      closePrint() {
+        this.openprint = false
+      }
+    },
+    computed: {
+      reportTitle() {
+        return this.$store.state.report.report.R_ReportCode + ' | ' + this.$store.state.report.report.R_ReportName
+      },
+      reportUrl() {
+        return this.$store.state.report.report.R_ReportUrl
+      },
+      reportColor() {
+        return this.$store.state.report.report.R_ReportGroupColor
+      },
+      reports() {
+        return this.$store.state.report.reports
+      },
+      details() {
+        return this.$store.state.report.details
+      },
+      vparams() {
+        return this.$store.state.report.params
+      },
+      isLoading() {
+        return this.$store.state.report.search_status == 1
+      },
+    },
+    watch: {
+       search_autocomplete : {
+          deep: true,
+          handler: function (new_val, old) {
+           let details = this.$store.state.report.details
+           if (new_val == null ) return
+           for(let idx=0; idx < new_val.length; idx++) {
+              if (! new_val[idx] ) continue
+              if ( new_val[idx] != '' ) {
+                 let sp = details[idx].R_ReportDetailSourceSp
+                 this.$store.dispatch("report/listautocomplete", {
+                   search: new_val[idx],
+                   sp: sp,
+                   index: idx
+                 })
+              }
+           }
+         }
+       }
+    }
+  }
+</script>

one-ui/report/one-report-v7/index.php

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+
+   <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta http-equiv="X-UA-Compatible" content="ie=edge">
+      <title>One</title>
+      <link rel="stylesheet" href="../../libs/vendor/css/google-fonts.css">
+      <link rel="stylesheet" href="../../libs/vendor/css/vuetify.min.css">
+   </head>
+
+   <body>
+      <div v-cloak id="app">
+         <v-app id="smartApp" >
+            <one-navbar></one-navbar>
+            <br/>
+            <v-content class="blue lighten-5 one" >
+               <v-container fluid pt-2 pb-2 pl-1 pr-1>
+                  <v-layout row wrap >
+                     <v-flex xs12 class="left" fill-height pa-1>
+                        <one-report></one-report>
+                     </v-flex>
+                  </v-layout>
+               </v-container>
+            </v-content>
+            <one-footer> </one-footer>
+         </v-app>
+      </div>
+
+      <!-- Vendor -->
+      <script src="../../libs/vendor/moment.min.js"></script>
+      <script src="../../libs/vendor/numeral.min.js"></script>
+      <script src="../../libs/vendor/moment-locale-id.js"></script>
+      <script src="../../libs/vendor/lodash.js"></script>
+      <script src="../../libs/vendor/axios.min.js"></script>
+      <script src="../../libs/vendor/vue.js"></script>
+      <script src="../../libs/vendor/vuex.js"></script>
+      <script src="../../libs/vendor/vuetify.js"></script>
+      <script src="../../libs/vendor/httpVueLoader.js"></script>
+      <script src="../../libs/vendor/socket.io.js"></script>
+
+      <script src="../../libs/one_global.js"></script>
+      <!-- App Script -->
+<?php
+$ts = "?ts=" . Date("ymdhis");
+?>
+<script type="module">
+
+
+import { store } from './store.js<?php echo $ts ?>';
+
+//for testing
+window.store = store;
+let g_timeout = 0;
+
+let ts = '?ts=' + moment().format('YYYYMMDDHHmmss');
+var socketIoUrl = "http://" + window.location.host + ":9090/";
+new Vue({
+store,
+data : {
+   socket : io.connect(socketIoUrl,{forceNew:false})
+},
+mounted: async function() {
+	this.socket.on("notification", function(msg) {
+		switch(msg.type) {
+		case "reload-fo" :
+                  store.dispatch("queue/loadx",{serviceid:0});
+                  if (g_timeout > 0 ) clearTimeout(g_timeout);
+                  g_timeout = setTimeout(function() {
+                     store.dispatch("queue/loadx",{serviceid:0});
+                  },60000);
+		break;
+		}
+        });
+},
+computed : {
+   tab_active () {
+      return store.state.tab_active
+   }
+},
+   el: '#app',
+   components: {
+   'one-navbar': httpVueLoader('../../apps/components/oneNavbarComponent.vue' + ts),
+      'one-footer': httpVueLoader('../../apps/components/oneFooter.vue' + ts),
+        'one-report': httpVueLoader('./components/oneReport.vue' + ts),
+        'one-queue-status': httpVueLoader('./components/oneQueueStatus.vue' + ts)
+      }
+    })
+    </script>
+    <style>
+[v-cloak] {
+   display: none
+}
+    main {
+       padding:40px 0px 0px !important;
+    }
+    </style>
+   </body>
+
+</html>

one-ui/report/one-report-v7/modules/report.js

@@ -0,0 +1,182 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/report.js"
+window.api = api
+
+export default {
+    namespaced: true,
+    state: {
+        loading: false,
+        reports: [],
+        report: {},
+        error: '',
+        details: [],
+        detail: [],
+        loading_detail: false,
+        error_detail: '',
+        params: [],
+        total_params: 0,
+        total_filter_params: 0,
+        search_status: 0,
+        current_page: 1,
+        get_data_status: 0,
+        get_data_error_message: '',
+        reportautocompletes: [],
+        autocomplete_status: 0
+    },
+    mutations: {
+        update_loading(state, status) {
+            state.loading = status
+        },
+        update_reports(state, val) {
+            state.reports = val
+        },
+        update_report(state, report) {
+            state.report = report
+        },
+        update_error(state, val) {
+            state.error = val
+        },
+        update_details(state, val) {
+            state.details = val
+        },
+        update_detail(state, data) {
+            state.detail = data.detail
+        },
+        update_loading_detail(state, val) {
+            state.loading_detail = val
+        },
+        update_error_detail(state, val) {
+            state.error_detail = val
+        },
+        update_params(state, val) {
+            state.params = val
+        },
+        update_total_params(state, val) {
+            state.total_params = val
+        },
+        update_total_filter_params(state, val) {
+            state.total_filter_params = val
+        },
+        update_current_page(state, val) {
+            state.current_page = val
+        },
+        update_get_data_status(state, val) {
+            state.get_data_status = val
+        },
+        update_get_data_error_message(state, val) {
+            state.get_data_error_message = val
+        },
+        update_reportdropdowns(state, val) {
+            state.reportdropdowns = val
+        },
+        update_reportdropdown(state, val) {
+            state.reportdropdown = val
+        },
+        update_reportautocompletes(state, val) {
+            state.reportautocompletes = val
+        },
+        update_autocomplete_status(state, val) {
+            state.autocomplete_status = val
+        }
+    },
+    actions: {
+        async list(context, prm) {
+            context.commit("update_loading", true)
+            try {
+                let resp = await api.list(prm)
+                if (resp.statusText != "OK") {
+                    context.commit("update_loading", false)
+                    context.commit("update_error", resp.message)
+                } else {
+                    context.commit("update_loading", false)
+                    context.commit("update_error", "")
+                    context.commit("update_reports", resp.data.data.records)
+                }
+            } catch (e) {
+                context.commit("update_loading", false)
+                context.commit("update_error", e.message)
+            }
+        },
+        async lookupparam(context, prm) {
+            context.commit("update_loading", true)
+            try {
+                prm.token = one_token()
+                let resp = await api.lookupparam(prm)
+                if (resp.statusText != "OK") {
+                    context.commit("update_loading", false)
+                    context.commit("update_error", resp.message)
+                } else {
+                    context.commit("update_loading", false)
+                    context.commit("update_error", "")
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total,
+                        total_filter: resp.data.total_filter
+                    }
+
+                    context.commit("update_params", resp.data.data.records)
+                    context.commit("update_total_params", resp.data.data.total)
+                    context.commit("update_total_filter_params", resp.data.data.total_filter)
+                }
+            } catch (e) {
+                context.commit("update_loading", false)
+                context.commit("update_error", e.message)
+            }
+        },
+        async detail(context, id) {
+            context.commit("update_loading_detail", true)
+            try {
+                let resp = await api.detail(id)
+                //console.log(resp)
+                if (resp.statusText != "OK") {
+                    context.commit("update_loading_detail", false)
+                    context.commit("update_error_detail", resp.message)
+                } else {
+                    context.commit("update_loading_detail", false)
+                    context.commit("update_error_detail", "")
+                    var arrOrders = resp.data.data.records
+                    arrOrders.forEach((value, index) => {
+                        arrOrders[index]["items"] = []
+                        if(value.R_InputTypeName === 'dropdown'){
+                            var sp = value.R_ReportDetailSourceSp
+                            context.dispatch("listdropdown",{sp:sp,index: index})
+                        }
+                      }); 
+                    context.commit("update_details", arrOrders)
+                }
+            } catch (e) {
+                context.commit("update_loading_detail", false)
+                context.commit("update_error_detail", e.message)
+            }
+        },
+        async listdropdown(context, param) {
+            context.commit("update_get_data_status", 1)
+            try {
+                let resp = await api.listdropdown(param.sp)
+                //disimpan dalam report detail
+                let arrOrders = context.state.details
+                arrOrders[param.index].items = resp
+                context.commit("update_details",arrOrders)
+            } catch (e) {
+                context.commit("update_get_data_status", 3)
+                context.commit("update_get_data_error_message", e.message)
+                console.log(e)
+            }
+        },
+        async listautocomplete(context, prm) {
+            context.commit("update_autocomplete_status", 1)
+            try {
+                let resp = await api.listautocomplete(prm)
+                context.commit("update_autocomplete_status", 2)
+                let arrOrders = context.state.details
+                arrOrders[prm.index].items = resp.data
+                context.commit("update_details",arrOrders)
+            } catch (e) {
+                context.commit("update_autocomplete_status", 3)
+                console.log(e)
+            }
+        }
+    }
+}

one-ui/report/one-report-v7/store.js

@@ -0,0 +1,15 @@
+// State
+//  data ...
+// Mutations
+//
+//
+// Actions
+import report from "./modules/report.js";
+import system from "../../apps/modules/system/system.js";
+
+export const store = new Vuex.Store({
+  modules : {
+     report:report,
+     system: system
+  }
+});