Add view nominee modal

resources/assets/js/components/demo/voter/home/index.vue

@@ -15,8 +15,7 @@
                 </li>
                 <li class="list-group-item" v-if="data.election.status == 2 && !hasVoted()">
                     <center>
-						<router-link v-if="data.user.saham >= 500" :to="{ name: 'Vote' }"
-							class="btn btn-info">
+                        <router-link v-if="data.user.saham >= 500" :to="{ name: 'Vote' }" class="btn btn-info">
                             Undi Sekarang
                         </router-link>
                         <div v-else class="alert alert-danger" role="alert">
@@ -44,7 +43,7 @@
             <div class="panel panel-primary" v-for="position in data.positions">
                 <div class="panel-heading">{{ position.name }}</div>
                 <div class="panel-body table-responsive">
-					<table class="table table-hover">
+                    <table id="table-nominee" class="table table-hover">
                         <thead>
                             <tr>
                                 <th></th>
@@ -56,7 +55,8 @@
                             </tr>
                         </thead>
                         <tbody>
-							<tr v-for="(nominee, i) in data.nominees" v-if="nominee.position_id == position.id">
+                            <tr v-for="(nominee, i) in data.nominees" v-if="nominee.position_id == position.id"
+                                v-on:click="viewNomineeDetails(nominee)">
                                 <td><img @click="view(nominee, i)" :src="createBase64ImageUrl(nominee.photo)"
                                         class="thumbnail" style="height: 60px;width: 60px;" />
                                 </td>
@@ -95,10 +95,41 @@
             </modal>
 
         </div>
+        <div id="view-nominee-modal" class="modal" tabindex="-1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" style="display: inline;">Maklumat Calon</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
                     </div>
+                    <div class="modal-body">
+                        <div class="content">
+                            <div class="photo-section">
+                                <img :src="nomineeViewed.photo" class="thumbnail nominee-viewed-photo" />
+                            </div>
+                            <div class="detail-section">
+                                <span><b> Name : </b>{{ nomineeViewed.name }}</span>
+                                <span><b> Unit : </b>{{ nomineeViewed.unit }}</span>
+                                <span><b> Education : </b>{{ nomineeViewed.education }}</span>
+                                <span><b> Experience : </b>{{ nomineeViewed.experience }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
 </template>
 
 <script>
+import { R } from '@bachdgvn/vue-otp-input';
+
 export default {
     created: function () {
         //console.log(this)
@@ -107,7 +138,8 @@ export default {
     data: function () {
         return {
             x: {},
-			selectedNomineeId: null
+            selectedNomineeId: null,
+            nomineeViewed: {},
         }
     },
 
@@ -145,6 +177,12 @@ export default {
 
         createBase64ImageUrl: function (base64ImageData) {
             return "data:image/png;base64," + base64ImageData;
+        },
+
+        viewNomineeDetails: function (nominee) {
+            this.nomineeViewed = {...nominee};
+            this.nomineeViewed.photo = this.createBase64ImageUrl(nominee.photo);
+            $('#view-nominee-modal').modal();
         }
 
     },
@@ -156,3 +194,49 @@ export default {
     }
 }
 </script>
+
+
+<style>
+#view-nominee-modal .modal-dialog {
+    width: 850px;
+}
+
+#view-nominee-modal .nominee-viewed-photo {
+    height:320px;
+    width:280px;
+}
+
+#view-nominee-modal .content {
+    display: flex;
+}
+
+#view-nominee-modal .photo-section {
+    flex: 4;
+}
+
+#view-nominee-modal .detail-section {
+    flex: 8;
+}
+
+#view-nominee-modal span {
+    display: block;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-left: 18px;
+}
+
+#table-nominee tbody tr {
+    cursor: pointer;
+}
+
+@keyframes pulseBackground {
+    0% { background-color: #FFFFBF; } /* Start color */
+    50% { background-color: #ffffff; } /* Middle color (white) */
+    100% { background-color: #FFFFBF; } /* End color (same as start) */
+}
+
+#table-nominee tbody tr:hover {
+    animation: pulseBackground 3s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; /* Animation duration, timing function, and repetition */
+}
+
+</style>