Romain/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix modal, logout & start todo front

Browse Source
This commit is contained in:
Romulus21
2020-04-25 10:16:17 +02:00
parent 3dc00ec768
commit e1d9c02c5e
9 changed files with 131 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
database/migrations/2020_04_19_144900_create_to_do_lists_table.php
View File

@@ -17,6 +17,7 @@ class CreateToDoListsTable extends Migration
$table->id();
$table->unsignedBigInteger('user_id');
$table->string('name');
$table->integer('order')->default(1);
$table->timestamps();
});
}

4
resources/js/components/Nav.vue
View File

@@ -8,6 +8,10 @@
<svg-vue icon="memos" />
<span v-bind:class="{ navhidden: !toggleNav }">Memos</span>
</router-link>
<router-link to="/to-do-lists" class="nav-item">
<svg-vue icon="memos" />
<span v-bind:class="{ navhidden: !toggleNav }">To Do Lists</span>
</router-link>
<router-link to="/jeux" class="nav-item">
<svg-vue icon="games" />
<span v-bind:class="{ navhidden: !toggleNav }">Jeux</span>

12
resources/js/components/TopBar.vue
View File

@@ -37,18 +37,6 @@
...mapGetters({
authUser: 'authUser',
})
},
methods: {
logout: function () {
axios.post('logout')
.then(res => {
if(res.status ===302 || 401) {
window.location.href = '/login'
}
}).catch(error => {
})
}
}
}
</script>

10
resources/js/router.js vendored
View File

@@ -9,6 +9,8 @@ import MemoIndex from "./views/Memo/MemoIndex";
import MemoCreate from "./views/Memo/MemoCreate";
import MemoShow from "./views/Memo/MemoShow";
import MemoEdit from "./views/Memo/MemoEdit";
import ToDoListIndex from "./views/ToDoLists/ToDoListIndex";
import ToDoListShow from "./views/ToDoLists/ToDoListShow";
import GameIndex from "./views/Games/GameIndex";
import Hangman from "./views/Games/HangMan/Hangman";
@@ -54,6 +56,14 @@ export default new VueRouter({
meta: {title: 'Edit Memo'}
},
{
path: '/to-do-lists', component: ToDoListIndex,
meta: {title: 'To Do Lists'}
}, {
path: '/to-do-lists/:id', component: ToDoListShow,
meta: {title: 'Details of List'}
},
{
path: '/jeux', component: GameIndex,
meta: {title: 'Liste des jeux'}

12
resources/js/views/DashBoard.vue
View File

@@ -17,6 +17,18 @@
name: "DashBoard",
components: {
UserAdmin
},
methods: {
logout: function () {
axios.post('logout')
.then(res => {
if(res.status ===302 || 401) {
window.location.href = '/login'
}
}).catch(error => {
})
}
}
}
</script>

18
resources/js/views/Memo/MemoShow.vue
View File

@@ -2,6 +2,14 @@
<div>
<Loader v-if="loading" />
<div v-else>
<div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
<div v-if="modal" class="modal">
<p class="m-1 text-center">Are you sure you want to delete this record ?</p>
<div class="flex-center m-1 mt-2">
<button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
<button class="btn-alert" @click="destroy"> Delete</button>
</div>
</div>
<div class="relative">
<img
v-if="!loading"
@@ -11,15 +19,7 @@
<div class="flex-col flex-between absolute memo-cover">
<div class="flex-between px-2 py-1">
<router-link to="/memos/" class="btn-secondary">< Back</router-link>
<div v-if="modal" class="modal-container" @click="modal = ! modal">
<div class="modal">
<p class="m-1 text-center">Are you sure you want to delete this record ?</p>
<div class="flex-center m-1 mt-2">
<button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
<button class="btn-alert" @click="destroy"> Delete</button>
</div>
</div>
</div>
<div class="flex-middle">
<router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
<a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>

67
resources/js/views/ToDoLists/ToDoListIndex.vue Normal file
View File

@@ -0,0 +1,67 @@
<template>
<div class="p-2">
<div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
<div v-if="modal" class="modal px-2">
<p class="m-1 text-center">Add a new to-do list ?</p>
<InputField name="name" label="Title" placeholder="Your Title" required @update:field="name = $event" :errors="errors" />
<div class="flex-center m-1 mt-2">
<button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
<button class="btn-primary" @click="create">Create</button>
</div>
</div>
<div class="flex-between flex-center mb-1">
<a href="#" class="btn" @click="$router.back()">< Back</a>
<a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a>
</div>
<Loader v-if="loading" />
</div>
</template>
<script>
import Loader from "../../components/Loader";
import InputField from "../../components/InputField";
export default {
name: "ToDoListIndex",
components: {
Loader, InputField
},
data: function () {
return {
loading: true,
modal: false,
toDoLists: null,
name: '',
errors: null,
}
},
mounted() {
axios.get('/api/to-do-lists')
.then(response => {
this.toDoLists = response.data.data
this.loading = false
})
.catch(errorRes => {
this.loading = false
if (errorRes.response.status === 404) {
this.$router.push('/')
}
})
},
methods: {
create: function () {
axios.post('/api/to-do-lists', {name: this.name})
.then(res => {
console.log(res)
this.modal = false
this.name = ''
// this.$router.push('/memos')
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
}
}
}
</script>

9
resources/js/views/ToDoLists/ToDoListShow.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
</template>
<script>
export default {
name: "ToDoListShow"
}
</script>

12
resources/sass/components/modal.scss vendored
View File

@@ -3,18 +3,23 @@ $modal-duration: 1s;
.modal-container {
background-color: rgba(0,0,0,0.6);
//display: none;
position: fixed;
z-index: 10;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
.modal {
}
.modal {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
position: absolute;
overflow: hidden;
z-index: 20;
//overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@@ -22,5 +27,4 @@ $modal-duration: 1s;
width: 400px;
animation-name: modalopen;
animation-duration: $modal-duration;
}
}