API tools faq
paste
Advertisement
vitareinforce

bundle works

vitareinforce
Feb 4th, 2020
1,526
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.49 KB | None | 0 0
raw download clone embed print report
  1. <template>
  2. <div class="dashboard-contents">
  3. <div class="row">
  4. <div class="col-lg-6" style="margin-top: 20px;">
  5. <h2 style="padding:15px; margin-top: 10px;">Daftar Bundle</h2>
  6. </div>
  7. <div class="col-lg-6" style="padding-top: 15px; margin-top: 20px;">
  8. <div class="row">
  9. <div class="col-lg-6"></div>
  10. <div class="col-lg-3">
  11. <download-excel class="btn waves-effect waves-circle waves-float pull-right button-export"
  12. worksheet = "Daftar bundle"
  13. name = "data_bundle.xls"
  14. :data = "exportData">
  15. <img src="@/assets/images/file-text.png" alt="Alternate Text" /> Export
  16. </download-excel>
  17. </div>
  18. <div class="col-lg-3">
  19. <router-link :to="{name: 'BundleManagement.create'}" type="button" class="btn waves-effect waves-circle waves-float pull-right button-create">
  20. <img src="@/assets/images/plus-circle.png" alt="Alternate Text" /> Tambah
  21. </router-link>
  22. </div>
  23. </div>
  24. </div>
  25. </div>
  26.  
  27. <div class="row">
  28. <div class="col-lg-12 second-row">
  29. <div class="row">
  30. <div class="col-lg-10"></div>
  31. <div class="col-lg-2 search-div">
  32. <input type="text" name="permission" placeholder="Cari bundle..." ng-model="query" value="" style="width: 100%; height: 34px; float: right; margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: white; border-radius: 5px; padding: 5px; margin-bottom: 24px;" />
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37.  
  38. <div class="row">
  39. <div class="col-lg-12">
  40. <div class="table-div">
  41. <!-- <table class="table table-hover table-striped">
  42. <thead style="text-align:center;">
  43. <tr>
  44. <th style="text-align:center; border-right: 1px solid rgba(240, 237, 237, 1); border-left: 1px solid rgba(240, 237, 237, 1);">
  45. <div style="margin-bottom: 10px;">
  46. Actions <img src="@/assets/images/Down arrow small.png" alt="Alternate Text" />
  47. </div>
  48. <div>
  49. <input readonly type="text" name="made_by" value="" style="margin-bottom: 10px; border: none; background-color: white; border-radius: 5px; padding: 5px; cursor: default;" />
  50. </div>
  51. </th>
  52. <th style="text-align:center; border-right: 1px solid rgba(240, 237, 237, 1)">
  53. <div style="margin-bottom: 10px;">
  54. Kode Bundle <img src="@/assets/images/Down arrow small.png" alt="Alternate Text" />
  55. </div>
  56. <div>
  57. <input type="text" ng-model="query.code" value="" style="margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: #F0eded; border-radius: 5px; padding: 5px;" />
  58. </div>
  59. </th>
  60. <th style="text-align:center; border-right: 1px solid rgba(240, 237, 237, 1)">
  61. <div style="margin-bottom: 10px;">
  62. Nama Bundle <img src="@/assets/images/Down arrow small.png" alt="Alternate Text" />
  63. </div>
  64. <div>
  65. <input type="text" ng-model="query.name" value="" style="margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: #F0eded; border-radius: 5px; padding: 5px;" />
  66. </div>
  67. </th>
  68. <th style="text-align:center; border-right: 1px solid rgba(240, 237, 237, 1)">
  69. <div style="margin-bottom: 10px;">
  70. Jumlah Bundle <img src="@/assets/images/Down arrow small.png" alt="Alternate Text" />
  71. </div>
  72. <div>
  73. <input type="text" ng-model="query.bundleQuantity" value="" style="margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: #F0eded; border-radius: 5px; padding: 5px;" />
  74. </div>
  75. </th>
  76. <th style="text-align:center; border-right: 1px solid rgba(240, 237, 237, 1)">
  77. <div style="margin-bottom: 10px;">
  78. Harga Bundle <img src="@/assets/images/Down arrow small.png" alt="Alternate Text" />
  79. </div>
  80. <div>
  81. <input type="text" ng-model="query.price" value="" style="margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: #F0eded; border-radius: 5px; padding: 5px;" />
  82. </div>
  83. </th>
  84. </tr>
  85. </thead>
  86. <tbody>
  87. <tr v-for="item in bundle" :key="item.id">
  88. <td style="padding-top: 18px; text-align:center;">
  89. <div class="btn-group">
  90. <b-dropdown text="Action" variant="primary" style="width: 120px;">
  91. <b-dropdown-item><router-link :to="{ name: 'BundleManagement.edit', params:{ id: item.Id } }">Edit</router-link></b-dropdown-item>
  92. <b-dropdown-item @click="del(item.Id)">Delete</b-dropdown-item>
  93. </b-dropdown>
  94. </div>
  95. </td>
  96. <td style="border-right: 1px solid rgba(240, 237, 237, 1); padding-top: 18px;">
  97. <router-link :to="{ name: 'BundleManagement.detail', params:{ id: item.Id } }" style="cursor: pointer;" ng-click="vm.detail(bundle)">{{ item.Code }}</router-link>
  98. </td>
  99. <td style="border-right: 1px solid rgba(240, 237, 237, 1); padding-top: 18px;">{{ item.Name }}</td>
  100. <td style="border-right: 1px solid rgba(240, 237, 237, 1); padding-top: 18px;">{{ item.BundleQuantity }}</td>
  101. <td style="border-right: 1px solid rgba(240, 237, 237, 1); padding-top: 18px;">{{ item.Price | currency }}</td>
  102. </tr>
  103. </tbody>
  104. </table> -->
  105. <b-table striped hover
  106. id="bundleTable"
  107. :items="bundle"
  108. :fields="bundleField"
  109. :total-rows="rows"
  110. :per-page="perPage"
  111. :current-page="currentPage"
  112. class="table table-hover table-striped"
  113. style="margin-top: 10px;">
  114. <template v-slot:cell(Actions)="data">
  115. <b-dropdown text="Action" variant="primary" style="width: 120px;">
  116. <b-dropdown-item @click="edit(data.item.Id)">Edit</b-dropdown-item>
  117. <b-dropdown-item @click="del(data.item.Id)">Delete</b-dropdown-item>
  118. </b-dropdown>
  119. </template>
  120. <template v-slot:cell(Code)="data">
  121. <a @click="detail(data.item.Id)">{{ data.item.Code }}</a>
  122. </template>
  123. <template v-slot:cell(Price)="data">
  124. {{ data.item.Price | currency }}
  125. </template>
  126. </b-table>
  127. </div>
  128. <b-pagination
  129. v-model="currentPage"
  130. :total-rows="rows"
  131. :per-page="perPage"
  132. aria-controls="bundleTable">
  133. </b-pagination>
  134. </div>
  135. </div>
  136. </div>
  137. </template>
  138.  
  139. <script>
  140. import moment from 'moment'
  141. import $ from 'jquery'
  142. import DownloadExcel from 'vue-json-excel'
  143.  
  144. import Bundles from '@/services/Inventories/Bundle'
  145. import LegalEntities from '@/services/Companies/LegalEntities'
  146. import Branches from '@/services/Companies/Branches'
  147.  
  148. export default {
  149. name: 'BundleManagement.index',
  150. components: {
  151. DownloadExcel
  152. },
  153. computed: {
  154. rows () {
  155. //hitung panjang data Transaksi Internal
  156. return this.bundle.length
  157. }
  158. },
  159. data () {
  160. return {
  161. //definisikan per page dan halaman current isi 1 untuk awal
  162. perPage: 10,
  163. currentPage: 1,
  164. //selesai
  165. bundleField: [
  166. { key: 'Actions', label: 'Actions' },
  167. { key: 'Code', label: 'Nomor Bundle' },
  168. { key: 'Name', label: 'Nama Bundle' },
  169. { key: 'BundleQuantity', label: 'Jumlah Bundle' },
  170. { key: 'Price', label: 'Harga Bundle' },
  171. ],
  172. exportData: [],
  173. userData: {},
  174. bundle: [],
  175. roles: [],
  176. legalEntity: [],
  177. branch: []
  178. }
  179. },
  180. created: function () {
  181. this.init()
  182. },
  183. mounted: function () {
  184. window.$ = $
  185. if(localStorage.userData !== undefined) {
  186. this.userData = JSON.parse(localStorage.userData)
  187. } else {
  188. this.$router.push({ name: 'home' })
  189. location.reload()
  190. }
  191. },
  192. methods: {
  193. init: async function () {
  194. let result = await Bundles.index()
  195. let legalEntity = await LegalEntities.index()
  196. let branch = await Branches.index()
  197.  
  198. this.bundle = result.data
  199. this.legalEntity = this.itemLookup(legalEntity.data)
  200. this.branch = this.itemLookup(branch.data)
  201. },
  202. itemLookup: function (json) {
  203. let data = []
  204. for(var i = 0; i< json.length; i++) {
  205. data[json[i].Id] = json[i]
  206. }
  207. return data
  208. },
  209. formatDate(time) {
  210. var formattedTime = moment(time).format('DD MMMM YYYY HH:mm')
  211. if(formattedTime == 'Invalid date') {
  212. formattedTime = '-'
  213. }
  214. return formattedTime
  215. },
  216. detail: function (id) {
  217. this.$router.push({ name: 'BundleManagement.detail', params: { id: id } })
  218. },
  219. edit: function (id) {
  220. this.$router.push({ name: 'BundleManagement.edit', params: { id: id } })
  221. },
  222. del: async function (id) {
  223. this.$fire({
  224. text: "Apakah anda yakin ingin menghapus bundle ini?",
  225. type: "warning",
  226. showCancelButton: true,
  227. confirmButtonText: 'Ya',
  228. cancelButtonText: 'Tidak',
  229. }).then(() => {
  230. if(result.status == 200) {
  231. // alert(result.data.message)
  232. this.$router.push({ name: 'BundleManagement.index' })
  233. location.reload()
  234. } else {
  235. alert("Delete Gagal")
  236. location.reload()
  237. }
  238. })
  239. let result = await Bundles.delete(id)
  240. }
  241. }
  242. }
  243. </script>
  244.  
  245. <style>
  246. .table-div {
  247. padding-left: 30px;
  248. margin-left: 0px !important;
  249. overflow-x: auto;
  250. overflow-y: auto;
  251. }
  252.  
  253. .second-row {
  254. margin-top: 30px;
  255. padding-left: 30px;
  256. }
  257.  
  258. .select-dropdown {
  259. width: 100%;
  260. height: 45px;
  261. border-color: #0059aa;
  262. border-radius: 5px;
  263. }
  264.  
  265. .button-export {
  266. width: 100%;
  267. height: 45px;
  268. background-color: #0059aa;
  269. color:white;
  270. border-radius: 5px;
  271. }
  272.  
  273. .button-create {
  274. width: 100%;
  275. height: 45px;
  276. background-color: #20c197;
  277. color:white;
  278. border-radius: 5px;
  279. }
  280. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!