API tools faq
paste
Advertisement
claukiller

Untitled

claukiller
Jul 4th, 2018
92
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.62 KB | None | 0 0
raw download clone embed print report
  1. <template>
  2. <div class="js-panel js-panel-info panel-info-position-resp height-0100 bg-color-w-0100 width-0 border-l-1 border-solid border-color-b-010" data-panel= "info" data-status="close">
  3. <div class="js-panel-info__content min-width-320 padding-l-16 padding-r-16 height-0100 padding-b-30-resp overflow-y-a overflow-x-h">
  4. <div class="sticky bg-color-w-0100">
  5. <div class="display-f align-items-c height-50 border-b-1 border-solid border-color-b-010">
  6. <span class="font-size-l icon-folder"/>
  7. <h2 class="font-size-l font-weight-sb padding-l-10">{{chooseModalText(project)}}</h2>
  8. <button class="frwbtn js-panel-info__button padding-l-10 margin-l-auto" data-panel="info" @click="openPanel">
  9. <span class="icon-arrow-right padding-l-5 font-size-xs"/>
  10. </button>
  11. </div>
  12. </div>
  13.  
  14. <div>
  15. <div class="padding-t-10 padding-b-10 border-b-1 border-solid border-color-b-010">
  16. <p class="font-weight-sb opacity-050 padding-b-10 font-size-s">Nombre</p>
  17. <input v-model="project.name" class="width-0100 frwbtn border-radius-2 bg-color-p-010 padding-t-5 padding-b-5 padding-l-10 padding-r-10 color-p-0100 font-size-s box-sizing-bb" >
  18. </div>
  19. <div class="padding-t-10 padding-b-10 border-b-1 border-solid border-color-b-010">
  20. <label class="font-weight-sb opacity-050 padding-b-10 font-size-s" for="cliente">Cliente</label>
  21. <div class="position-r">
  22. <select id="cliente" v-model="project.client_id" class="width-0100 border-radius-2 frwbtn bg-color-p-010 padding-t-5 padding-b-5 padding-l-10 padding-r-10 color-p-0100 font-size-s box-sizing-bb" type="text" placeholder="Seleccione cliente...">
  23. <option v-for="client of clients" :key="client.id" :value="client.id"> {{client.name}}</option>
  24. </select>
  25. <span class="icon-select font-size-select position-a right-10 color-p-0100 top-12"/>
  26. </div>
  27. </div>
  28. <!--<div class="padding-t-10 padding-b-10 border-b-1 border-solid border-color-b-010">
  29. <label class="font-weight-sb opacity-050 padding-b-10 font-size-s" for="Fecha-de-entrada">Fecha de entrada</label>
  30. <input id="fecha-de-entrada" v-model="project.enterDate" class="width-0100 frwbtn border-radius-2 bg-color-p-010 padding-t-5 padding-b-5 padding-l-10 padding-r-10 color-p-0100 font-size-s box-sizing-bb" type="date" placeholder="dd/mm/aaaa">
  31. </div>-->
  32. <div class="padding-t-10 padding-b-10 border-b-1 border-solid border-color-b-010">
  33. <label class="font-weight-sb opacity-050 padding-b-10 font-size-s" for="description">Descripción</label>
  34. <textarea v-model="project.description" class="width-0100 frwbtn border-radius-2 bg-color-p-010 padding-t-5 padding-b-5 padding-l-10 padding-r-10 color-p-0100 font-size-s box-sizing-bb" name="description" rows="5" placeholder="Breve descripción del proyecto"/>
  35. </div>
  36. <div class="padding-t-10 padding-b-10 border-b-1 border-solid border-color-b-010">
  37. <p class="font-weight-sb opacity-050 padding-b-10 font-size-s" for="fases">Fases</p>
  38. <div class="display-f">
  39. <div class="width-050">
  40. <label class="display-b padding-t-8 padding-b-8 display-f align-items-c"><input v-model="selectedPhases" class="checkbox margin-r-5" type="checkbox" value="1"> Fase 1</label>
  41. <label class="display-b padding-t-8 padding-b-8 display-f align-items-c"><input v-model="selectedPhases" class="checkbox margin-r-5" type="checkbox" value="2"> Fase 2</label>
  42. <label class="display-b padding-t-8 padding-b-8 display-f align-items-c"><input v-model="selectedPhases" class="checkbox margin-r-5" type="checkbox" value="3"> Fase 3</label>
  43. </div>
  44. <div class="width-050">
  45. <label class="display-b padding-t-8 padding-b-8 display-f align-items-c"><input v-model="selectedPhases" class="checkbox margin-r-5" type="checkbox" value="4"> Fase 4</label>
  46. <label class="display-b padding-t-8 padding-b-8 display-f align-items-c"><input v-model="selectedPhases" class="checkbox margin-r-5" type="checkbox" value="5"> Fase 5</label>
  47. <label class="display-b padding-t-8 padding-b-8 display-f align-items-c"><input v-model="selectedPhases" class="checkbox margin-r-5" type="checkbox" value="6"> Fase 6</label>
  48. </div>
  49. </div>
  50. </div>
  51. <div class="padding-t-10 padding-b-10 border-b-1 border-solid border-color-b-010">
  52. <p class="font-weight-sb opacity-050 padding-b-10 font-size-s" for="carpeta">Carpeta</p>
  53. <label class="display-b padding-t-8 padding-b-8 display-f align-items-c"><input v-model="project.carpeta" type="checkbox" value="1" class="checkbox margin-r-5" > Proyecto con carpeta</label>
  54. </div>
  55. <div class="padding-t-10 padding-b-10 border-b-1 border-solid border-color-b-010">
  56. <label class="font-weight-sb opacity-050 padding-b-10 font-size-s" for="personas">Personas</label>
  57. <select id="personas" v-model="selectedUsers" multiple class="width-0100 padding-t-5 color-p-0100 font-size-s box-sizing-bb">
  58. <option v-for="user of users" :value="user.id" :key="user.id">{{user.name}}</option>
  59. </select>
  60. </div>
  61. <button class="width-0100 frwbtn frwbtn-primary padding-t-10 padding-b-10 margin-t-20 border-radius-2" v-on:click="chooseProject(project)"> {{chooseButtonText(project)}}</button>
  62. </div>
  63. </div>
  64. </div>
  65. </template>
  66.  
  67. <script>
  68. import Vue from 'vue'
  69. import SlimSelect from 'slim-select'
  70. import ApiClient from '@/api/ApiClient'
  71. import {get} from 'lodash'
  72. import moment from 'moment'
  73. import EventBus from '@/EventBus'
  74. export default {
  75. name: 'modal-proyecto',
  76. props: {
  77. project: {
  78. type: Object,
  79. default: function () {
  80. return {
  81. name: '',
  82. client_id: '',
  83. enterDate: '',
  84. description: '',
  85. carpeta: false,
  86. users: [],
  87. clients: [],
  88. phases: []
  89. }
  90. }
  91. }
  92. },
  93. data () {
  94. return {
  95. clients: [],
  96. users: [],
  97. clientFolders: [],
  98. yearFolders: [],
  99. idRaiz: '0B3lWV2-l2m-mdkxtN1Vxcmo0YW8',
  100. newProjectId: '',
  101. newProjectRef: 0,
  102. actualYear: '',
  103. yearFolderId: '',
  104. clientFolderId: ''
  105. }
  106. },
  107. computed: {
  108. selectedUsers: {
  109. get () {
  110. return get(this.project, 'users', []).map(user => user.id ? user.id : user)
  111. },
  112. set (users) {
  113. Vue.set(this.project, 'users', users)
  114. }
  115. },
  116. selectedPhases: {
  117. get () {
  118. return get(this.project, 'phases', []).map(phase => phase.phase_id ? phase.phase_id : phase)
  119. },
  120. set (phases) {
  121. Vue.set(this.project, 'phases', phases)
  122. }
  123. }
  124. },
  125. created () {
  126. ApiClient.getClientApi().get('/api/clients')
  127. .then(response => {
  128. this.clients = response.data.data
  129. })
  130. ApiClient.getClientApi().get('/api/users')
  131. .then(response => {
  132. this.users = response.data.data
  133. })
  134. ApiClient.getClientApi().get('/api/clientFolders')
  135. .then(response => {
  136. this.clientFolders = response.data.data
  137. })
  138. ApiClient.getClientApi().get('/api/yearFolders')
  139. .then(response => {
  140. this.yearFolders = response.data.data
  141. })
  142. this.actualYear = new Date()
  143. },
  144. mounted () {
  145. return new SlimSelect({
  146. select: '#personas'
  147. })
  148. },
  149. methods: {
  150. saveProject () {
  151. ApiClient.getClientApi().get('/api/maxRef')
  152. .then(response => {
  153. this.newProjectRef = response.data.data
  154.  
  155. let checkYear = get((this.yearFolders).find(x => x.year === moment(this.actualYear).format('YYYY')), table_id, 0)
  156. if (checkYear === 0) {
  157. ApiClient.getClientApi().post('/create-dir-inside',
  158. { folderId: this.idRaiz, folderName: 'REF' + moment(this.actualYear).format('YYYY') })
  159. .then(response => {
  160. this.yearFolderId = response.data
  161. ApiClient.getClientApi().post('/api/yearFolders',
  162. {year: moment(this.actualYear).format('YYYY'), table_id: this.yearFolderId})
  163. })
  164. } else {
  165. this.yearFolderId = checkYear
  166. }
  167.  
  168. let checkClient = get((this.clientFolders).find(x => x.client_id === this.project.client_id), table_id, 0)
  169. if (checkClient === 0) {
  170. let clientName = this.getClientNameById(this.project.client_id)
  171. ApiClient.getClientApi().post('/create-dir-inside',
  172. {folderId: this.yearFolderId, folderName: clientName})
  173. .then(response => {
  174. this.clientFolderId = response.data
  175. ApiClient.getClientApi().post('/api/clientFolders',
  176. {year: moment(this.actualYear).format('YYYY'), client_id: clientName, table_id: this.clientFolderId})
  177. })
  178. } else {
  179. this.clientFolderId = checkClient
  180. }
  181.  
  182. let projectName = (this.newProjectRef + 1) + 'R' + moment(this.actualYear).format('YY') + '_(' + (this.project.name).replace(/ /g, '_') + ')'
  183.  
  184. ApiClient.getClientApi().post('/create-dir-inside',
  185. { folderId: this.clientFolderId, folderName: projectName })
  186. .then(response => {
  187. this.newProjectId = response.data
  188. ApiClient.getClientApi().post('/create-dir-project',
  189. { folderId: response.data })
  190. ApiClient.getClientApi().post('/api/projects', {
  191. ...this.project,
  192. enterDate: new Date().toISOString().substring(0, 10),
  193. folder_id: this.newProjectId
  194. })
  195. .then(response => {
  196. console.log('guardado')
  197. this.$notify({
  198. group: 'foo',
  199. type: 'success',
  200. title: 'Proyecto creado',
  201. text: 'Nuevo Proyecto creado con éxito!'
  202. })
  203. })
  204. .catch(error => {
  205. console.log(error.response)
  206. })
  207. })
  208.  
  209. // guardar la carpeta en el id de la carpeta de cliente
  210. /* ApiClient.getClientApi().get('/create-dir/' + projectName)
  211. .then(response => {
  212. this.newProjectId = response.data
  213. ApiClient.getClientApi().post('/api/projects', {
  214. ...this.project,
  215. enterDate: new Date().toISOString().substring(0, 10),
  216. folder_id: this.newProjectId
  217. })
  218. .then(response => {
  219. console.log('guardado')
  220. this.$notify({
  221. group: 'foo',
  222. type: 'success',
  223. title: 'Proyecto creado',
  224. text: 'Nuevo Proyecto creado con éxito!'
  225. })
  226. })
  227. .catch(error => {
  228. console.log(error.response)
  229. })
  230. }) */
  231. })
  232. },
  233. editProject (project) {
  234. ApiClient.getClientApi().post('/api/projects/' + project.id, {
  235. ...this.project,
  236. _method: 'PATCH',
  237. users: this.selectedUsers,
  238. phases: this.selectedPhases})
  239. .then(response => {
  240. console.log('cambiado')
  241. this.$notify({
  242. group: 'foo',
  243. type: 'success',
  244. title: 'Proyecto editado',
  245. text: '¡Cambios guardados con éxito!'
  246. })
  247. })
  248. .catch(error => {
  249. console.log(error.response)
  250. })
  251. },
  252. chooseProject (project) {
  253. if (this.project.id != null) {
  254. this.editProject(this.project)
  255. } else {
  256. this.saveProject()
  257. }
  258. },
  259. chooseButtonText (project) {
  260. if (this.project.id != null) {
  261. return 'Guardar cambios'
  262. } else {
  263. return 'Crear proyecto'
  264. }
  265. },
  266. chooseModalText (project) {
  267. if (this.project.id != null) {
  268. return 'Editar proyecto'
  269. } else {
  270. return 'Nuevo proyecto'
  271. }
  272. },
  273. openPanel () {
  274. EventBus.$emit('openPanelProyecto')
  275. },
  276. getClientNameById (id) {
  277. let clientName = 'no tiene nombre'
  278. ApiClient.getClientApi().get('/api/clients/' + id)
  279. .then(response => {
  280. clientName = response.data.data.name
  281. })
  282. return clientName
  283. }
  284. }
  285. }
  286. </script>
  287.  
  288. <!-- Add "scoped" attribute to limit CSS to this component only -->
  289. <style scoped lang="scss">
  290. </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!