Subversion Repositories SmartDukaan

<style>
.modal-dialog {
  width: 75%;
  height: auto;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}
</style>
<div class="container" id="vueFirst">
        
        <?php if(isset($result) && !empty($result)):?>
                <div class="row">
                        <div class="col-xs-12">
                                <table cellpadding="0" cellspacing="0" class="table table-striped">
                                        <tr>
                                                <th>Name</th>
                                                <th>Email</th>
                                                <th>Mobile</th>
                                                <th>Business Name</th>
                                                <th>Type</th>
                                                <th>Number</th>
                                                <th>Created</th>
                                                <th>Actions</th>
                                        </tr>
                                        
                                        <?php foreach ($result as $rkey =>$rval):?>
                                        <tr>
                                                <td><?php echo $rval['u']['first_name'].' '.$rval['u']['last_name'];?></td>
                                                <td><?php echo $rval['u']['email'];?></td>
                                                <td><?php echo $rval['u']['mobile_number'];?></td>
                                                <td><?php echo $rval['a']['name'];?></td>
                                                <td><?php echo $rval['r']['type'];?></td>
                                                <td><?php echo $rval['r']['number'];?></td>
                                                <td><?php echo $rval['r']['create_timestamp'];?></td>
                                                <td><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" v-on:click="setIndex(<?php echo $rkey?>)">View Details</button> 
                                        </tr>
                                        <?php endforeach;?>
                                        
                                </table>
                        </div>
                </div>
        <?php endif;?>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">{{chosenData.a.name}}</h4>
                {{chosenData.r.number}}
                {{chosenData.a.line_1}}
                {{chosenData.a.line_2}}
                {{chosenData.a.city}}
                {{chosenData.a.state}}
                {{chosenData.a.pin}}
              </div>
              <div class="modal-body">
                <div class="form-group">
                                <label for="usr">Name:</label>
                                <input type="text" class="form-control" v-model="chosenData.a.name">
                        </div>
                <div class="form-group">
                                <label for="usr">Name:</label>
                                <input type="text" class="form-control" v-model="chosenData.r.number">
                        </div>
                <div class="form-group">
                                <label for="usr">Line1:</label>
                                <input type="text" class="form-control" v-model="chosenData.a.line_1">
                        </div>
                <div class="form-group">
                                <label for="usr">Line2:</label>
                                <input type="text" class="form-control" v-model="chosenData.a.city">
                        </div>
                <div class="form-group">
                                <label for="usr">City:</label>
                                <input type="text" class="form-control" id="usr" v-model="chosenData.a.state">
                        </div>
                <div class="form-group">
                                <label for="usr">State:</label>
                                <input type="text" class="form-control" id="usr" v-model="chosenData.a.pin">
                        </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-sm btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>
</div>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
        var alldata = <?php echo json_encode($result);?>;
        var vModal = new Vue({
        el: '#vueFirst',
        data: {
                chosenData : alldata[0]
        },
        methods: {
                setIndex: function(index){
                        //console.log("called " + index); 
                        this.chosenData = alldata[index];
                }
        }
}) 
</script>