PHP Classes

File: resources/js/views/Tasks.vue

Recommend this page to a friend!
  Classes of Hillary Kollan   PHP Trello Clone using Laravel and Vue.js   resources/js/views/Tasks.vue   Download  
File: resources/js/views/Tasks.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP Trello Clone using Laravel and Vue.js
Web app and API to manage tasks like Trello
Author: By
Last change:
Date: 1 year ago
Size: 8,894 bytes
 

Contents

Class file image Download
<template> <div> <!-- Masthead --> <header class="masthead"> <div class="boards-menu"> <button class="boards-btn btn"><i class="fab fa-trello boards-btn-icon"></i>Boards</button> <div class="board-search"> <input type="search" class="board-search-input" aria-label="Board Search"> <i class="fas fa-search search-icon" aria-hidden="true"></i> </div> </div> <div class="logo"> <h1><i class="fab fa-trello logo-icon" aria-hidden="true"></i>Bemo</h1> </div> <div class="user-settings"> <button class="btn btn-secondary" @click="dumpDb()" aria-label="Dump Database"> Export </button> </div> </header> <!-- End of masthead --> <!-- Board info bar --> <section class="board-info-bar"> <div class="board-controls"> <button class="board-title btn"> <h2>Bemo Educational Consulting Projects</h2> </button> <button class="star-btn btn" aria-label="Star Board"> <i class="far fa-star" aria-hidden="true"></i> </button> </div> </section> <!-- End of board info bar --> <!-- Lists container --> <section class="lists-container"> <div class="list" v-for="(board, board_id) in boards" :key="board_id" > <button class="btn btn-primary" @click="deleteBoard(board.board_id)" aria-label="Dump Database"> Delete </button> <h3 class="list-title" >{{board.title}}</h3> <ul class="list-items" v-for="(task, index) in board.tasks" :key="index" @dblclick="editingItem = task"> <li v-if="renderComponent" >{{task.title}}<span><img :src="image_src" @click="addColumn(task.task_id, 'up')" class="img-up"><img :src="image_src2" @click="addColumn(task.task_id, 'down')" class="img-down"></span></li> </ul> <modal @close="endEditing" :task="editingItem" v-show="editingItem != null"></modal> <modal @close="addTask" :task="addingTask" v-show="addingTask != null"></modal> <button class="add-card-btn btn" @click="newTask(board.board_id)" >Add a card</button> </div> <newboard @close="addNewBoard" :board="addingBoard" v-show="addingBoard != null"></newboard> <button class="add-list-btn btn" @click="newBoard()">Adding a Board</button> </section> <!-- End of lists container --> </div> </template> <script> import Modal from './TaskModal' import newboard from './NewBoard' export default { data(){ return { boards : [], editingItem: null, addingTask: null, addingBoard: null, index: 0, bdBoard:"", renderComponent: true, image_src: "https://images.vectorhq.com/images/previews/877/up-arrow-130418.png", image_src2: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQLWXgQ5fTSqlp4Ra1xNagYqmA8GdUCzMxNQQ&usqp=CAU" } }, mounted(){ axios.get("/api/boards/").then(response => { this.boards = response.data.data; }).catch(error => { console.log(error); }); }, components: {Modal, newboard}, methods: { newTask(board) { this.bdBoard = board; this.addingTask = { title: null, description: null, board_id: null, status: null, column: null, } console.log(this.bdBoard); console.log(this.addingTask); }, newBoard(){ this.addingBoard = { title: null, description: null } }, endEditing(task) { console.log(task); this.editingItem = null //let index = this.tasks.indexOf(task) let title = task.title let description = task.description let status = (task.status ? 0:1) //let column = task.column console.log(JSON.stringify({title, description, status})); axios.patch(`/api/tasks/${task.task_id}`, {title, description, status}) .then(response => { this.renderComponent = false; this.$nextTick().then(() => { // Add the component back in this.renderComponent = true; this.reloadComponent(); }); }).catch(error => { console.log(error); }); }, addTask(task) { this.addingTask = null // console.log("board_id: ", this.bdBoard); let title = task.title let description = task.description let board_id = this.bdBoard let status = task.status let column = task.column axios.post("/api/tasks/", {title, description, board_id, status, column}).then(response => { console.log("worked"); this.$nextTick(() => { // Add the component back in this.renderComponent = true; this.reloadComponent(); }); }).catch(error => { console.log(error); }); }, addColumn(task_id, position){ let column = position; console.log({task_id, position}); axios.patch(`/api/tasks/column/${task_id}`, {column}) .then(response => { this.renderComponent = false; this.$nextTick(() => { // Add the component back in this.renderComponent = true; this.reloadComponent(); }); }).catch(error => { console.log(error); }); }, reloadComponent(){ axios.get("/api/boards/").then(response => { //console.log(response.data); this.boards = response.data.data; }).catch(error => { console.log(error); }); }, addNewBoard(board){ this.addingBoard = null; let title = board.title; let description = board.description; console.log({title, description}); axios.post("/api/boards/", {title, description}).then(response => { this.renderComponent = false; this.$nextTick(() => { // Add the component back in this.renderComponent = true; this.reloadComponent(); }); }).catch(error => { console.log(error); }); }, deleteBoard(board){ axios.delete(`/api/boards/${board}`, {}).then(response => { console.log(response); this.renderComponent = false; this.$nextTick(() => { // Add the component back in this.renderComponent = true; this.reloadComponent(); }); }).catch(error => { console.log(error); }); }, dumpDb(){ axios.post('/api/boards/dump/db', {responseType: 'arraybuffer'}) .then(response => { let blob = new Blob([response.data]) let link = document.createElement('a') link.href = window.URL.createObjectURL(blob) link.download = 'data.sql' link.click() }) } } } </script>