temp.vue

<template>

    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
            <h2>{{$root.lblIssue}}</h2>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <router-link to="/">Dashboard</router-link>
                </li>
                <li class="breadcrumb-item">
                    <router-link to="/issues">{{$root.lblListIssues}}</router-link>
                </li>
                <li class="breadcrumb-item active">
                    <strong>{{$root.lblNewIssue}}</strong>
                </li>
            </ol>
        </div>
        <div class="col-lg-2">

        </div>
    </div>

    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-lg-12">
                <div class="tabs-container">

                        <ul class="nav nav-tabs">
                            <li><a class="nav-link active" data-toggle="tab" href="#tab-ticket-data"> Ticket data</a></li>
                            <li><a class="nav-link" data-toggle="tab" href="#tab-users"> Users</a></li>
                            <li><a class="nav-link" data-toggle="tab" href="#tab-history"> History</a></li>
                        </ul>

                        <div class="tab-content">
                            <div id="tab-ticket-data" class="tab-pane active">
                                <div class="panel-body">

                                    <fieldset>
                                        <!--div class="form-group row"><label class="col-sm-2 col-form-label">Name:</label>
                                            <div class="col-sm-10"><input type="text" class="form-control" placeholder="Product name"></div>
                                        </div-->
                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label text-right"><strong>Description:</strong></label>
                                            <div class="col-sm-10">
                                                <div class="summernote">
                                                    <h3>Message</h3>
                                                    write your message here
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label text-right"><strong>Code:</strong></label>
                                            <div class="col-sm-10">

                                                <textarea id="code1">
<script>
    // Code goes here

    function jsFunction(){
        let txt = 'you can paste any source code here';
        alert(txt);
    }
</script>
                                                </textarea>

                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label text-right"><strong>Files:</strong></label>
                                            <div class="col-sm-10">
                                                <form action="#" class="dropzone" id="dropzoneForm">
                                                    <div class="fallback">
                                                        <input name="file" type="file" multiple />
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </fieldset>

                                </div>
                            </div>

                            <div id="tab-users" class="tab-pane">
                                <div class="panel-body">

                                    <fieldset>
                                        <div class="form-group row"><label class="col-sm-2 col-form-label">ID:</label>
                                            <div class="col-sm-10"><input type="text" class="form-control" placeholder="543"></div>
                                        </div>
                                        <div class="form-group row"><label class="col-sm-2 col-form-label">Model:</label>
                                            <div class="col-sm-10"><input type="text" class="form-control" placeholder="..."></div>
                                        </div>
                                        <div class="form-group row"><label class="col-sm-2 col-form-label">Location:</label>
                                            <div class="col-sm-10"><input type="text" class="form-control" placeholder="location"></div>
                                        </div>
                                        <div class="form-group row"><label class="col-sm-2 col-form-label">Tax Class:</label>
                                            <div class="col-sm-10">
                                                <select class="form-control" >
                                                    <option>option 1</option>
                                                    <option>option 2</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group row"><label class="col-sm-2 col-form-label">Quantity:</label>
                                            <div class="col-sm-10"><input type="text" class="form-control" placeholder="Quantity"></div>
                                        </div>
                                        <div class="form-group row"><label class="col-sm-2 col-form-label">Minimum quantity:</label>
                                            <div class="col-sm-10"><input type="text" class="form-control" placeholder="2"></div>
                                        </div>
                                        <div class="form-group row"><label class="col-sm-2 col-form-label">Sort order:</label>
                                            <div class="col-sm-10"><input type="text" class="form-control" placeholder="0"></div>
                                        </div>
                                        <div class="form-group row"><label class="col-sm-2 col-form-label">Status:</label>
                                            <div class="col-sm-10">
                                                <select class="form-control" >
                                                    <option>option 1</option>
                                                    <option>option 2</option>
                                                </select>
                                            </div>
                                        </div>
                                    </fieldset>


                                </div>
                            </div>

                            <div id="tab-history" class="tab-pane">
                                <div class="panel-body">

                                    <div class="table-responsive">
                                        <table class="table table-bordered table-stripped">
                                            <thead>
                                            <tr>
                                                <th>
                                                    Image preview
                                                </th>
                                                <th>
                                                    Image url
                                                </th>
                                                <th>
                                                    Sort order
                                                </th>
                                                <th>
                                                    Actions
                                                </th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>
                                                    <img src="img/gallery/2s.jpg">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" disabled value="http://mydomain.com/images/image1.png">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" value="1">
                                                </td>
                                                <td>
                                                    <button class="btn btn-white"><i class="fa fa-trash"></i> </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <img src="img/gallery/1s.jpg">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" disabled value="http://mydomain.com/images/image2.png">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" value="2">
                                                </td>
                                                <td>
                                                    <button class="btn btn-white"><i class="fa fa-trash"></i> </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <img src="img/gallery/3s.jpg">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" disabled value="http://mydomain.com/images/image3.png">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" value="3">
                                                </td>
                                                <td>
                                                    <button class="btn btn-white"><i class="fa fa-trash"></i> </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <img src="img/gallery/4s.jpg">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" disabled value="http://mydomain.com/images/image4.png">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" value="4">
                                                </td>
                                                <td>
                                                    <button class="btn btn-white"><i class="fa fa-trash"></i> </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <img src="img/gallery/5s.jpg">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" disabled value="http://mydomain.com/images/image5.png">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" value="5">
                                                </td>
                                                <td>
                                                    <button class="btn btn-white"><i class="fa fa-trash"></i> </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <img src="img/gallery/6s.jpg">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" disabled value="http://mydomain.com/images/image6.png">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" value="6">
                                                </td>
                                                <td>
                                                    <button class="btn btn-white"><i class="fa fa-trash"></i> </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <img src="img/gallery/7s.jpg">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" disabled value="http://mydomain.com/images/image7.png">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" value="7">
                                                </td>
                                                <td>
                                                    <button class="btn btn-white"><i class="fa fa-trash"></i> </button>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>


</template>

<script>


    export default {
        mounted () {
            this.$root.initDropZone();
        },
        data() {
            return {
                listIssuess: [],
                lblListIssues: this.$root.getSentence(this.$root.jsonSentences, 'List of tickets'),
                lblIssue: this.$root.getSentence(this.$root.jsonSentences, 'Tickets'),
                lblNewIssue: this.$root.getSentence(this.$root.jsonSentences, 'New ticket'),

                lblEmail: this.$root.getSentence(this.$root.jsonSentences, 'E-mail'),
                lblPhone: this.$root.getSentence(this.$root.jsonSentences, 'Phone'),
                lblCreated: this.$root.getSentence(this.$root.jsonSentences, 'Created'),
                lblDisabled: this.$root.getSentence(this.$root.jsonSentences, 'Disabled'),
                lblDeleted: this.$root.getSentence(this.$root.jsonSentences, 'Deleted'),
                lblActive: this.$root.getSentence(this.$root.jsonSentences, 'Active'),

                lblSave: this.$root.getSentence(this.$root.jsonSentences, 'Save'),
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>