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

Merge branch 'master' into 'production'

Browse Source 
Master

See merge request Romulus21/portal!37
This commit is contained in:
Romain Delanoë
2020-05-02 09:18:59 +00:00
parent 5464237626 5ccc5aa6c9
commit db63cdae50
13 changed files with 218 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/Http/Controllers/ToDoController.php
View File

@@ -59,6 +59,18 @@ class ToDoController extends Controller
->setStatusCode(200);
}
public function checkedToogle(ToDoList $toDoList, ToDo $toDo)
{
$this->authorize('update', $toDoList);
($toDo->checked_at) ? $toDo->checked_at = NULL : $toDo->checked_at = now();
$toDo->save();
return (new ToDoResource($toDo))
->response()
->setStatusCode(200);
}
private function validateData()
{
return request()->validate([

1
app/Http/Resources/Memo.php
View File

@@ -23,6 +23,7 @@ class Memo extends JsonResource
'name' => $this->name,
'memo' => $this->memo,
'last_updated' => $this->updated_at->diffForHumans(),
'last_updated_timestamp' => $this->updated_at->timestamp,
'attributes' => [
'posted_by' => new UserResource($this->user),
'cover_image' => new ImageResource($this->coverImage),

2
app/Http/Resources/ToDo.php
View File

@@ -22,7 +22,7 @@ class ToDo extends JsonResource
'data' => [
'name' => $this->name,
'order' => (int) $this->order,
'checked_at' => optional($this->checked_at)->diffForHumans(),
'checked_at' => ($this->checked_at) ? 1 : null,
'last_updated' => $this->updated_at->diffForHumans(),
]
]

1
app/Http/Resources/ToDoCollection.php
View File

@@ -17,6 +17,7 @@ class ToDoCollection extends ResourceCollection
return [
'data' => $this->collection,
'to_dos_count' => $this->count(),
'to_dos_count_check' => $this->where('checked_at', '!=', null)->count(),
];
}
}

8
resources/js/views/Memo/MemoCreate.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="p-4">
<div class="flex justify-between flex-center mb-4">
<router-link to="/memos/" class="btn">Back</router-link>
<button class="btn-primary">Add New Memo</button>
</div>
<form @submit.prevent="submitForm">
<div class="flex justify-between flex-center mb-4">
<router-link to="/memos/" class="btn">Back</router-link>
<button class="btn-primary">Add New Memo</button>
</div>
<InputField name="name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
<TextAreaField class="" name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
</form>

8
resources/js/views/Memo/MemoIndex.vue
View File

@@ -43,12 +43,20 @@ export default {
axios.get('/api/memos')
.then(response => {
this.memos = response.data.data
this.reorderList()
this.loading = false
})
.catch(() => {
this.loading = false
console.log('Unable to fetch memos.')
})
},
methods: {
reorderList() {
this.memos.sort(function(a, b) {
return a.data.last_updated_timestamp + b.data.last_updated_timestamp
})
}
}
}
</script>

53
resources/js/views/ToDoLists/ToDo.vue
View File

@@ -1,53 +0,0 @@
<template>
<li class="todo flex justify-between items-center bg-white rounded mb-1 px-2 py-1"
>
<div class="flex flex-1">
<svg-vue icon="draggable" class="w-4 block mr-2 cursor-move" />
{{ toDo.data.attributes.data.name }}
</div>
<div class="flex">
<svg-vue icon="edit" @click="edit = !edit" class="edit-icon z-10 w-4 block cursor-pointer mr-1" />
<input type="checkbox" v-model="checked">
<span v-if="edit" @click="deleteToDo(toDo, position)">X</span>
</div>
</li>
</template>
<script>
export default {
name: 'ToDo',
data: function () {
return {
name: this.toDo.data.attributes.data.name,
errors: null,
edit: false,
checked: false,
}
},
props: {
toDo: {
type: Object,
require: true
},
position: {
type: Number,
require: true
}
},
mounted() {
console.log(this.$key)
}
}
</script>
<style scoped>
.edit-icon {
opacity: 0;
transition: opacity 0.2s;
}
.todo:hover .edit-icon {
opacity: 1;
transition: opacity 0.2s;
}
</style>

95
resources/js/views/ToDoLists/ToDoList.vue
View File

@@ -1,95 +0,0 @@
<template>
<div>
<div class="m-2 px-2 pt-2 bg-orange-400 rounded flex flex-col justify-between shadow">
<div>
<h1 class="text-2xl font-bold mb-2">{{ toDoList.data.attributes.data.name }}</h1>
<ul class="draggable-list drop-zone"
@drop='onDrop($event, toDoList)'
@dragover.prevent
@dragenter.prevent
>
<div v-if="toDoList.data.attributes.data.to_dos.to_dos_count < 1">
------- no to Do -------
</div>
<ToDo v-else
v-for="(toDo, indexToDo) in toDoList.data.attributes.data.to_dos.data"
:key="indexToDo"
:toDo="toDo"
:position="indexToDo"
draggable
@dragstart='startDrag($event, toDo)'
class='drag-el'
/>
</ul>
</div>
<div class="flex items-center mt-2">
<InputField name="name" classes="py-1" placeholder="New To Do" required @update:field="name = $event" :errors="errors" />
<button class="btn-primary ml-1 mb-2 py-1" @click="addToDo">ADD</button>
</div>
</div>
</div>
</template>
<script>
import InputField from '../../components/InputField'
import ToDo from './ToDo'
//https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/
export default {
name: 'ToDoList',
components: {
InputField, ToDo
},
data: function () {
return {
name: '',
errors: null,
dragStartIndex: null,
edit: false,
}
},
props: {
toDoList: {
type: Object,
require: true
}
},
methods: {
addToDo: function () {
// eslint-disable-next-line no-undef
axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.name})
.then(res => {
this.toDoList.data.attributes.data.to_dos.data.push(res.data)
this.name = ''
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
},
deleteToDo: function (toDo, position) {
// eslint-disable-next-line no-undef
axios.delete('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDo.data.to_do_id)
.then(() => {
this.toDoList.data.attributes.data.to_dos.data.splice(position, 1)
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
},
startDrag: (evt, item) => {
console.log('StartDrag', evt, item)
evt.dataTransfer.dropEffect = 'move'
evt.dataTransfer.effectAllowed = 'move'
evt.dataTransfer.setData('itemID', item.id)
},
onDrop (evt, list) {
console.log('onDrop', evt, list, this.toDoList)
const itemID = evt.dataTransfer.getData('itemID')
const item = this.toDoList.data.attributes.data.to_dos.data.find(item => item.id == itemID)
item.list = list
},
}
}
</script>

29
resources/js/views/ToDoLists/ToDoListIndex.vue
View File

@@ -2,14 +2,14 @@
<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>
<p class="m-2 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">
<div class="flex justify-center mx-2 my-4">
<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">
<div class="flex justify-between mb-1">
<a href="#" class="btn" @click="$router.back()">Back</a>
<a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a>
@@ -17,11 +17,21 @@
<Loader v-if="loading" />
<div v-else class="flex flex-wrap -m-2 mt-2">
<div v-if="toDoLists.length < 1">No List Yet</div>
<ToDoList v-else
v-for="(toDoList, index) in toDoLists"
:key="index"
:to-do-list="toDoList"
class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" />
<router-link v-else
v-for="(toDoList, index) in toDoLists"
:key="index"
:to="'/to-do-lists/' + toDoList.data.to_do_list_id"
:to-do-list="toDoList"
class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" >
<div class="bg-orange-300 rounded text-black m-2 p-2">
<div class="flex justify-between">
{{ toDoList.data.attributes.data.name }}
<span class="text-orange-900">
{{ toDoList.data.attributes.data.to_dos.to_dos_count_check }} / {{ toDoList.data.attributes.data.to_dos.to_dos_count }}
</span>
</div>
</div>
</router-link>
</div>
</div>
</template>
@@ -29,12 +39,11 @@
<script>
import Loader from '../../components/Loader'
import InputField from '../../components/InputField'
import ToDoList from './ToDoList'
export default {
name: 'ToDoListIndex',
components: {
Loader, InputField, ToDoList
Loader, InputField
},
data: function () {
return {

166
resources/js/views/ToDoLists/ToDoListShow.vue
View File

@@ -1,9 +1,171 @@
<template>
<div></div>
<div class="px-4 py-2">
<div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
<div v-if="modal" class="modal">
<p class="m-2 text-center">Are you sure you want to delete this list ?</p>
<div class="flex justify-center mx-2 my-4">
<button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
<button class="btn-alert" @click="destroy"> Delete</button>
</div>
</div>
<div class="flex items-center justify-between pb-2">
<router-link to="/memos/" class="btn-secondary">Back</router-link>
<div class="flex-middle">
<router-link :to="'/to-do-lists/' + toDoList.data.to_do_list_id" class="btn-secondary mr-2" >Edit</router-link>
<a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
</div>
</div>
<div v-if="!loading" class="bg-orange-400 rounded p-1">
<h1 class="text-2xl font-bold mb-2 ml-2">{{ toDoList.data.attributes.data.name }}</h1>
<ul class='p-1'
v-for="(toDo, index) in toDoList.data.attributes.data.to_dos.data"
:key="index"
@drop='onDrop($event, toDo)'
@dragover.prevent
@dragenter.prevent >
<li
draggable
@dragstart='startDrag($event, toDo)'
class='drag-el todo flex justify-between items-center bg-white rounded-sm mb-1 px-2 py-1' >
<div class="flex flex-1">
<svg-vue icon="draggable" class="w-4 block mr-2 cursor-move" />
<span v-bind:class="{ 'line-through' : toDo.data.attributes.data.checked_at }">{{ toDo.data.attributes.data.name }}</span>
</div>
<div class="flex">
<svg-vue icon="edit" @click="edit = !edit" class="edit-icon z-10 w-4 block cursor-pointer mr-1" />
<input type="checkbox" :checked="toDo.data.attributes.data.checked_at" @click="checked(toDo, index)">
<span @click="deleteToDo(toDo, index)" class="cursor-pointer ml-2 font-bold">X</span>
</div>
</li>
</ul>
<div class="flex items-center mt-2 ml-2">
<InputField name="name" classes="py-1" placeholder="New To Do" required @update:field="name = $event" :errors="errors" @keyup.enter="addToDo" />
<button class="btn-primary ml-1 mb-2 py-1" @click="addToDo">ADD</button>
</div>
</div>
</div>
</template>
<script>
import InputField from '../../components/InputField'
//https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/
//https://jsfiddle.net/jf9nrtds/
export default {
name: 'ToDoListShow'
name: 'ToDoListShow',
components: {
InputField
},
data () {
return {
toDoList: null,
loading: true,
name: '',
errors: null,
modal: false,
}
},
mounted() {
// eslint-disable-next-line no-undef
axios.get('/api/to-do-lists/' + this.$route.params.id)
.then(res => {
this.toDoList = res.data
this.loading = false
this.reorderList()
})
.catch(errorRes => {
this.loading = false
if (errorRes.response.status === 404) {
this.$router.push('/')
}
})
},
methods: {
startDrag: (evt, item) => {
evt.dataTransfer.dropEffect = 'move'
evt.dataTransfer.effectAllowed = 'move'
evt.dataTransfer.setData('toDoID', item.data.to_do_id)
evt.dataTransfer.setData('toDoOrder', item.data.attributes.data.order)
},
onDrop (evt, toDoEnd) {
const toDoID = parseInt(evt.dataTransfer.getData('toDoID'), 10)
const toDoOrder = parseInt(evt.dataTransfer.getData('toDoOrder'), 10)
let toDoMove = this.toDoList.data.attributes.data.to_dos.data.find(toDo => toDo.data.to_do_id === toDoID)
// eslint-disable-next-line no-undef
axios.patch('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDoMove.data.to_do_id + '/change', { 'new-order': toDoEnd.data.attributes.data.order })
.then(() => {
toDoMove.data.attributes.data.order = toDoEnd.data.attributes.data.order
toDoEnd.data.attributes.data.order = toDoOrder
this.reorderList()
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
},
reorderList() {
this.toDoList.data.attributes.data.to_dos.data.sort(function(a, b) {
return a.data.attributes.data.order - b.data.attributes.data.order
})
},
addToDo: function () {
// eslint-disable-next-line no-undef
axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.name})
.then(res => {
this.toDoList.data.attributes.data.to_dos.data.push(res.data)
this.name = ''
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
},
deleteToDo: function (toDo, position) {
// eslint-disable-next-line no-undef
axios.delete('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDo.data.to_do_id)
.then(() => {
this.toDoList.data.attributes.data.to_dos.data.splice(position, 1)
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
},
checked: function (toDo, position) {
// eslint-disable-next-line no-undef
axios.patch('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDo.data.to_do_id + '/check')
.then(res => {
this.toDoList.data.attributes.data.to_dos.data[position].data.attributes.data.checked_at = res.data.data.attributes.data.checked_at
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
},
destroy: function () {
// eslint-disable-next-line no-undef
axios.delete('/api/to-do-lists/' + this.$route.params.id)
.then(() => {
this.$router.push('/to-do-lists')
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete list.' + errorRes)
})
}
}
}
</script>
<style scoped>
.edit-icon {
opacity: 0;
transition: opacity 0.2s;
}
.todo:hover .edit-icon {
opacity: 1;
transition: opacity 0.2s;
}
</style>

28
resources/sass/app.scss vendored
View File

@@ -3,33 +3,13 @@
@tailwind components;
//@import "setup/reset";
//@import "setup/colors";
//@import "setup/fonts";
//@import "setup/positions";
//@import "setup/containers";
//@import "setup/effects";
//
@import "components/transitions";
@import "components/btn";
@import "components/elements";
//@import "components/loader";
//@import "components/main";
@import "components/btn";
@import "components/nav";
//@import "components/topbar";
//@import "components/modal";
//@import "components/images";
//@import "components/avatar";
//@import "components/alert_box";
//@import "components/search_box";
//@import "components/owfont-regular";
//
//@import "pages/auth";
//@import "pages/users";
@import "components/transitions";
@import "pages/memos";
//@import "pages/meteo";
//@import "pages/games";
//
@import "pages/games/hangman";

7
resources/sass/components/_elements.scss vendored
View File

@@ -32,8 +32,6 @@ a {
}
}
$modal-duration: 1s;
.modal-container {
@apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
}
@@ -45,7 +43,7 @@ $modal-duration: 1s;
transform: translate(-50%, -50%);
width: 400px;
animation-name: modalopen;
animation-duration: $modal-duration;
animation-duration: 0.5s;
}
.box-toggle {
@@ -64,12 +62,13 @@ $modal-duration: 1s;
transition: transform 0.3s;
&.open {
//@apply rotate-90;
transform: rotate(90deg);
}
}
&-content {
padding: 0.5rem 1rem;
@apply px-4 py-2;
}
}

1
routes/api.php
View File

@@ -32,5 +32,6 @@ Route::middleware('auth:api')->group(function () {
Route::post('/images/users/{users}', 'ImageController@users');
Route::post('/images/memos/{memo}', 'ImageController@memos');
Route::patch('/to-do-lists/{toDoList}/to-do/{toDo}/change', 'ToDoController@changeOrder');
Route::patch('/to-do-lists/{toDoList}/to-do/{toDo}/check', 'ToDoController@checkedToogle');
});