Subversion Repositories SmartDukaan

<style>
.modal-dialog {
        width: 85%;
        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>Activated</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['u']['activated'];?></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>
                                </div>
                                <div class="modal-body">
                                        <div class="form-inline">
                                                <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">Business Number:</label> <input type="text"
                                                                class="form-control" v-model="chosenData.r.number">
                                                </div>
                                                <div class="form-group">
                                                        <label for="usr">Business Type:</label> <input readonly
                                                                type="text" class="form-control" v-model="chosenData.r.type">
                                                </div>
                                        </div>
                                        <div class="form-inline">
                                                <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.line_2">
                                                </div>
                                                <div class="form-group">
                                                        <label for="usr">City:</label> <input type="text"
                                                                class="form-control" id="usr" v-model="chosenData.a.city">
                                                </div>
                                                <div class="form-group">
                                                        <label for="usr">State:</label> <select
                                                                v-model="chosenData.a.state" class="form-control">
                                                                <option v-for="state in states" v-bind:value="state">{{state}}</option>
                                                        </select>
                                                </div>
                                        </div>
                                        <div class="row">
                                                <div class="col-md-4">
                                                        <div class="thumbnail">
                                                                <div class="caption">
                                                                        <p>Business Image</p>
                                                                </div>
                                                                <img
                                                                        :src="'http://app.profitmandi.com:8080/profitmandi-web/document/' + chosenData.r.document_id"
                                                                        alt="Business Image missing" style="width: 100%">
                                                        </div>
                                                </div>
                                                <div class="col-md-4">
                                                        <div class="thumbnail">
                                                                <div class="caption">
                                                                        <p>Shop Image</p>
                                                                </div>
                                                                <img
                                                                        :src="'http://app.profitmandi.com:8080/profitmandi-web/document/' + chosenData.s.document_id"
                                                                        alt="Shop image Missing" style="width: 100%">
                                                        </div>
                                                </div>
                                        </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],
                states : [
    'Andaman & Nicobar Islands',
    'Andhra Pradesh',
    'Arunachal Pradesh',
    'Assam',
    'Bihar',
    'Chandigarh',
    'Chhattisgarh',
    'Dadra & Nagar Haveli',
    'Daman & Diu',
    'Delhi',
    'Goa',
    'Gujarat',
    'Haryana',
    'Himachal Pradesh',
    'Jammu & Kashmir',
    'Jharkhand',
    'Karnataka',
    'Kerala',
    'Lakshdweep',
    'Madhya Pradesh',
    'Maharashtra',
    'Manipur',
    'Meghalaya',
    'Mizoram',
    'Nagaland',
    'Orissa',
    'Pondicherry',
    'Punjab',
    'Rajasthan',
    'Sikkim',
    'Tamil Nadu',
    'Telangana',
    'Tripura',
    'Uttar Pradesh',
    'Uttranchal',
    'West Bengal'
  ]
        },
        methods: {
                setIndex: function(index){
                        //console.log("called " + index); 
                        this.chosenData = alldata[index];
                }
        }
}) 
</script>