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

work on todos front

Browse Source
This commit is contained in:
Romulus21
2020-04-29 00:26:29 +02:00
parent af9f42d29e
commit ffe8c167cb
10 changed files with 162 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
public/js/app.js.LICENSE.txt Normal file
View File

@@ -0,0 +1,22 @@
/*!
* Vue.js v2.6.11
* (c) 2014-2019 Evan You
* Released under the MIT License.
*/
/*! https://mths.be/punycode v1.4.1 by @mathias */
/**
* @license
* Lodash <https://lodash.com/>
* Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
* Released under MIT license <https://lodash.com/license>
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
*/
/**
* vuex v3.1.3
* (c) 2020 Evan You
* @license MIT
*/

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="relative mb-2"> <div class="relative mb-2">
<label :for="name" class="pb-2 font-bold text-xl ml-1">{{ label }}</label> <label v-if="label" :for="name" class="pb-2 font-bold text-xl ml-1">{{ label }}</label>
<input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="errorClassObject()" class="w-full rounded p-2"> <input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="'w-full rounded p-2 ' + classes + ' ' + errorClassObject()">
<p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p> <p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
</div> </div>
</template> </template>

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

@@ -9,9 +9,9 @@
<svg-vue icon="memos" /> <svg-vue icon="memos" />
<span>Memos</span> <span>Memos</span>
</router-link> </router-link>
<router-link to="/to-do-lists" class="nav-item"> <router-link to="/to-do-lists" class="nav-item p-2">
<svg-vue icon="list" /> <svg-vue icon="list" />
<span>To Do Lists</span> <span>ToDo Lists</span>
</router-link> </router-link>
<router-link to="/jeux" class="nav-item p-2"> <router-link to="/jeux" class="nav-item p-2">
<svg-vue icon="games" /> <svg-vue icon="games" />

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

@@ -0,0 +1,53 @@
<template>
<li class="todo flex justify-between items-center bg-white rounded mb-1 px-2 py-1"
>
<div class="flex flex-1" draggable="true">
<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>

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

@@ -1,37 +1,42 @@
<template> <template>
<div> <div>
<h1>{{ toDoList.data.attributes.data.name }}</h1> <div class="m-2 px-2 pt-2 bg-orange-400 rounded flex flex-col justify-between shadow">
<ul class="draggable-list"> <div>
<div v-if="toDoList.data.attributes.data.to_dos.to_dos_count < 1"> <h1 class="text-2xl font-bold mb-2">{{ toDoList.data.attributes.data.name }}</h1>
------- no to Do ------- <ul class="draggable-list">
<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" />
</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>
<li v-else v-for="(toDo, index) in toDoList.data.attributes.data.to_dos.data" draggable="true">
<span>=</span>
{{ toDo.data.attributes.data.name }}
<input type="checkbox" name="do" id="do">
<span @click="deleteToDo(toDo, index)">X</span>
</li>
</ul>
<div>
<InputField name="name" classes="inline" placeholder="New To Do" required @update:field="name = $event" :errors="errors" />
<button class="btn-primary" @click="addToDo">ADD</button>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import InputField from "../../components/InputField"; import InputField from "../../components/InputField";
import ToDo from "./ToDo";
export default { export default {
name: "ToDoList", name: "ToDoList",
components: { components: {
InputField InputField, ToDo
}, },
data: function () { data: function () {
return { return {
name: '', name: '',
errors: null, errors: null,
list: null, list: null,
edit: false,
} }
}, },
props: { props: {
@@ -67,3 +72,5 @@
} }
} }
</script> </script>

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

@@ -15,11 +15,13 @@
<a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a> <a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a>
</div> </div>
<Loader v-if="loading" /> <Loader v-if="loading" />
<div v-else> <div v-else class="flex flex-wrap -m-2 mt-2">
<div v-if="toDoLists.length < 1">No List Yet</div> <div v-if="toDoLists.length < 1">No List Yet</div>
<div v-else v-for="toDoList in toDoLists"> <ToDoList v-else
<ToDoList :to-do-list="toDoList" /> v-for="(toDoList, index) in toDoLists"
</div> :key="index"
:to-do-list="toDoList"
class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" />
</div> </div>
</div> </div>
</template> </template>

2
resources/sass/components/nav.scss vendored
View File

@@ -129,7 +129,7 @@ nav {
span { span {
@apply font-bold text-xl ml-2 overflow-hidden; @apply font-bold text-xl ml-2 overflow-hidden truncate;
transition: width 0.3s; transition: width 0.3s;
&:hover { &:hover {

7
resources/svg/draggable.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;" xml:space="preserve">
<g>
<rect x="0" y="106.667" width="384" height="42.667"/>
<rect x="0" y="234.667" width="384" height="42.667"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 340 B

6
resources/svg/edit.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 383.947 383.947" style="enable-background:new 0 0 383.947 383.947;" xml:space="preserve">
<g>
<polygon points="0,303.947 0,383.947 80,383.947 316.053,147.893 236.053,67.893"/>
<path d="M377.707,56.053L327.893,6.24c-8.32-8.32-21.867-8.32-30.187,0l-39.04,39.04l80,80l39.04-39.04C386.027,77.92,386.027,64.373,377.707,56.053z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 434 B

81
resources/views/auth/login.blade.php
View File

@@ -1,51 +1,52 @@
@extends('layouts.app') @extends('layouts.app')
@section('content') @section('content')
<div class="auth p-2"> <div class="bg-orange-200 mx-auto h-screen flex justify-center items-center">
<div class="title-page mb-2">{{ __('Login') }}</div> <div class="w-96 m-auto bg-orange-400 rounded p-4 mt-10 shadow-xl">
<form method="POST" action="{{ route('login') }}"> <div class="text-3xl font-bold text-center mb-4">{{ __('Login') }}</div>
@csrf <form method="POST" action="{{ route('login') }}">
@csrf
<label for="email" class="mb-1">{{ __('E-Mail') }}</label> <label for="email" class="mb-2 font-bold uppercase">{{ __('E-Mail') }}</label>
<div class="mb-2"> <div class="mb-4">
<input id="email" type="email" class="@error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus> <input id="email" type="email" class="w-full border-2 border-orange-500 focus:border-orange-700 rounded p-2 @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
@error('email') @error('email')
<span class="invalid-feedback" role="alert"> <span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong> <strong>{{ $message }}</strong>
</span> </span>
@enderror @enderror
</div> </div>
<label for="password" class="mb-1">{{ __('Password') }}</label> <label for="password" class="mb-2 font-bold uppercase">{{ __('Password') }}</label>
<div class="mb-2"> <div class="mb-4">
<input id="password" type="password" class="@error('password') is-invalid @enderror" name="password" required autocomplete="current-password"> <input id="password" type="password" class="w-full border-2 border-orange-500 focus:border-orange-700 rounded p-2 @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
@error('password') @error('password')
<span class="invalid-feedback" role="alert"> <span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong> <strong>{{ $message }}</strong>
</span> </span>
@enderror @enderror
</div> </div>
<div class="mb-2"> <div class="mb-4">
<input type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}> <input type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<label for="remember" class="inline"> <label for="remember" class="inline">
{{ __('Remember Me') }} {{ __('Remember Me') }}
</label> </label>
</div> </div>
<div class="flex-between">
<button type="submit" class="btn-primary px-3">
{{ __('Login') }}
</button>
@if (Route::has('password.request'))
<a class="btn-secondary" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
</div>
</form>
<div class="flex justify-between">
<button type="submit" class="btn-primary">
{{ __('Login') }}
</button>
@if (Route::has('password.request'))
<a class="btn-secondary" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
</div>
</form>
</div>
</div> </div>
@endsection @endsection