New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue components #1

Merged
merged 1 commit into from Apr 18, 2018
File filter...
Filter file types
Jump to file or symbol
Failed to load files and symbols.
+1,405 −209
Diff settings

Always

Just for now

Copy path View file
@@ -12,11 +12,12 @@
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"popper.js": "^1.12",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"popper.js": "^1.12",
"tailwindcss": "^0.5.2",
"vue": "^2.5.7"
}
}
Copy path View file

Large diffs are not rendered by default.

Oops, something went wrong.
Copy path View file

Large diffs are not rendered by default.

Oops, something went wrong.
Copy path View file
@@ -0,0 +1,4 @@
{
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css"
}
Copy path View file
@@ -16,6 +16,7 @@ window.Vue = require('vue');
*/

Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('comments-manager', require('./components/CommentsManager.vue'));

const app = new Vue({
el: '#app'
@@ -0,0 +1,74 @@
<template>
<div>
<div v-show="state === 'default'">
<div>
<p>{{comment.body}}</p>
<button v-if="editable" @click="state = 'editing'">Edit</button>
</div>
<div>
<p>{{comment.author.name}} <span>&bull;</span>{{ comment.created_at}}</p>
</div>
</div>
<div v-show="state === 'editing'">
<div>
<h3>Update Comment</h3>
</div>
<textarea v-model="data.body"
placeholder="Update comment"
class="border">
</textarea>
<div>
<button @click="saveEdit">Update</button>
<button @click="resetEdit">Cancel</button>
<button @click="deleteComment">Delete</button>
</div>
</div>
</div>
</template>

<script>
export default {
props: {
user: {
required: true,
type: Object,
},
comment: {
required: true,
type: Object,
}
},
data: function() {
return {
state: 'default',
data: {
body: this.comment.body,
}
}
},
computed: {
editable() {
return this.user.id === this.comment.id;
},
},
methods: {
resetEdit() {
this.state = 'default';
this.data.body = this.comment.body;
},
saveEdit() {
this.state = 'default';
this.$emit('comment-updated', {
'id': this.comment.id,
'body': this.data.body,
});
},
deleteComment() {
this.$emit('comment-deleted', {
'id': this.comment.id,
});
}
}
}
</script>
@@ -0,0 +1,102 @@
<template>
<div>
<div>
<div>
<h2>Comments</h2>
</div>
<textarea v-model="data.body"
placeholder="Add a comment"
class="border">
</textarea>
<div>
<button @click="saveComment">Save</button>
<button>Cancel</button>
</div>
</div>
<div>
<comment v-for="comment in comments"
:key="comment.id"
:user="user"
:comment="comment"
@comment-updated="updateComment($event)"
@comment-deleted="deleteComment($event)">
</comment>
</div>
</div>
</template>

<script>
import comment from './CommentItem'
export default {
components: {
comment
},
props: {
user: {
required: true,
type: Object,
}
},
data: function() {
return {
data: {
body: ''
},
comments: [
{
id: 1,
body: "How's it going?",
edited: false,
created_at: new Date().toLocaleString(),
author: {
id: 1,
name: 'Nick Basile',
}
},
{
id: 2,
body: "Pretty good. Just making a painting.",
edited: false,
created_at: new Date().toLocaleString(),
author: {
id: 2,
name: 'Bob Ross',
}
}
]
}
},
methods: {
updateComment($event) {
let index = this.comments.findIndex((element) => {
return element.id === $event.id;
});
this.comments[index].body = $event.body;
},
deleteComment($event) {
let index = this.comments.findIndex((element) => {
return element.id === $event.id;
});
this.comments.splice(index, 1);
},
saveComment() {
let newComment = {
id: this.comments[this.comments.length - 1].id + 1,
body: this.data.body,
edited: false,
created_at: new Date().toLocaleString(),
author: {
id: this.user.id,
name: this.user.name,
}
}
this.comments.push(newComment);
this.data.body = '';
}
}
}
</script>

This file was deleted.

Oops, something went wrong.
Copy path View file
@@ -0,0 +1,11 @@
@import '~bootstrap/scss/bootstrap'

.navbar-laravel
background-color: #fff
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04)

@tailwind preflight

@tailwind components

@tailwind utilities
Copy path View file

This file was deleted.

Oops, something went wrong.
Copy path View file
@@ -1,23 +1,5 @@
@extends('layouts.app')

@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>

<div class="card-body">
@if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif

You are logged in!
</div>
</div>
</div>
</div>
</div>
<comments-manager :user="{{ auth()->user() }}"></comments-manager>
@endsection
Oops, something went wrong.
ProTip! Use n and p to navigate between commits in a pull request.