Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit fb50b4c

Browse files
committed
initial commit
1 parent 2368db9 commit fb50b4c

File tree

3 files changed

+180
-59
lines changed

3 files changed

+180
-59
lines changed

‎resources/js/components/Navbar.vue

Lines changed: 39 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,58 @@
11
<template>
2-
<nav class="navbar navbar-expand-lg navbar-light bg-white">
3-
<div class="container">
4-
5-
<div id="navbarToggler" class="collapse navbar-collapse">
6-
<ul class="navbar-nav">
7-
<!-- Authenticated -->
8-
<li v-if="user" class="nav-item dropdown">
9-
<a class="nav-link dropdown-toggle text-dark"
10-
href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
11-
>
12-
{{ user.name }}
13-
</a>
14-
<div class="dropdown-menu">
15-
<div class="dropdown-divider" />
16-
<a href="#" class="dropdown-item pl-3" @click.prevent="logout">
17-
<fa icon="sign-out-alt" fixed-width />
18-
Log Out
19-
</a>
2+
<nav class="navbar navbar-expand-lg navbar-light bg-white">
3+
<div class="container">
4+
<div id="navbarToggler" class="collapse navbar-collapse">
5+
<b-nav pills>
6+
<b-nav-item v-if="user" @click.prevent="logout">
7+
<b-link :to="{ name: 'login' }">
8+
Log Out
9+
</b-link>
10+
</b-nav-item>
11+
<template v-else>
12+
<b-nav-item>
13+
<b-link :to="{ name: 'login' }">
14+
Log In
15+
</b-link>
16+
</b-nav-item>
17+
<b-nav-item>
18+
<b-link :to="{ name: 'register' }">
19+
Register
20+
</b-link>
21+
</b-nav-item>
22+
</template>
23+
</b-nav>
2024
</div>
21-
</li>
22-
<!-- Guest -->
23-
<template v-else>
24-
<li class="nav-item">
25-
<router-link :to="{ name: 'login' }" class="nav-link" active-class="active">
26-
Log In
27-
</router-link>
28-
</li>
29-
<li class="nav-item">
30-
<router-link :to="{ name: 'register' }" class="nav-link" active-class="active">
31-
Register
32-
</router-link>
33-
</li>
34-
</template>
35-
</ul>
36-
</div>
37-
</div>
38-
</nav>
25+
</div>
26+
</nav>
3927
</template>
4028

4129
<script>
4230
import { mapGetters } from 'vuex'
4331
4432
export default {
45-
components: {
46-
},
47-
48-
data: () => ({
49-
appName: window.config.appName
50-
}),
33+
components: {},
5134
52-
computed:mapGetters({
53-
user:'auth/user'
54-
}),
35+
data: () =>({
36+
appName:window.config.appName
37+
}),
5538
56-
methods: {
57-
async logout () {
58-
// Log out the user.
59-
await this.$store.dispatch('auth/logout')
39+
computed: mapGetters({
40+
user: 'auth/user'
41+
}),
6042
61-
// Redirect to login.
62-
this.$router.push({ name: 'login' })
43+
methods: {
44+
async logout () {
45+
await this.$store.dispatch('auth/logout')
46+
this.$router.push({ name: 'login' })
47+
}
6348
}
64-
}
6549
}
6650
</script>
6751

6852
<style scoped>
6953
.profile-photo {
70-
width: 2rem;
71-
height: 2rem;
72-
margin: -.375rem 0;
54+
width: 2rem;
55+
height: 2rem;
56+
margin: -.375rem 0;
7357
}
7458
</style>

‎resources/js/pages/home.vue

Lines changed: 139 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,147 @@
11
<template>
2-
<b-card header="Home">
3-
You are logged in
2+
<b-card header="Posts">
3+
<b-button v-b-modal.modal-create class="mb-2" variant="primary">Create Post</b-button>
4+
5+
<b-modal v-model="create_modal_show" id="modal-create" no-close-on-backdrop content-class="shadow" title="Create Post">
6+
<b-form @submit.prevent="register" @keydown="form.onKeydown($event)">
7+
<b-form-group
8+
label="Title:"
9+
label-for="title">
10+
<b-form-input type="text" id="title" name="title" :class="{ 'is-invalid': form.errors.has('title') }" v-model="form.title"></b-form-input>
11+
<has-error :form="form" field="title" />
12+
</b-form-group>
13+
<b-form-group
14+
label="Author:"
15+
label-for="author">
16+
<b-form-select id="author" name="author" :class="{ 'is-invalid': form.errors.has('author') }" v-model="form.author" :options="options"></b-form-select>
17+
<!-- <b-form-input id="user" name="user" :class="{ 'is-invalid': form.errors.has('user') }" v-model="form.user" list="my-list-id"></b-form-input>-->
18+
<!-- <datalist id="my-list-id">-->
19+
<!-- <option v-for="option in options">{{ option.text }}</option>-->
20+
<!-- </datalist>-->
21+
<has-error :form="form" field="author" />
22+
</b-form-group>
23+
<b-form-group
24+
label="Description:"
25+
label-for="description">
26+
<b-form-textarea id="description" name="description" :class="{ 'is-invalid': form.errors.has('description') }" v-model="form.description" rows="3" max-rows="6"></b-form-textarea>
27+
<has-error :form="form" field="description" />
28+
</b-form-group>
29+
</b-form>
30+
<template #modal-footer>
31+
<div class="w-100">
32+
<b-button
33+
variant="danger"
34+
class="float-right"
35+
@click="create_modal_show=false"
36+
>
37+
Close
38+
</b-button>
39+
<b-button
40+
type="submit"
41+
variant="primary"
42+
class="float-right mr-2"
43+
>
44+
Save
45+
</b-button>
46+
</div>
47+
</template>
48+
</b-modal>
49+
<b-modal v-model="edit_modal_show" id="modal-edit" no-close-on-backdrop content-class="shadow" title="Edit Post">
50+
<b-form @submit.prevent="register" @keydown="editform.onKeydown($event)">
51+
<b-form-group
52+
label="Title:"
53+
label-for="title">
54+
<b-form-input type="text" id="title" name="title" :class="{ 'is-invalid': editform.errors.has('title') }" v-model="editform.title"></b-form-input>
55+
<has-error :form="editform" field="title" />
56+
</b-form-group>
57+
<b-form-group
58+
label="Author:"
59+
label-for="author">
60+
<!-- <b-form-select id="user" name="user" :class="{ 'is-invalid': editform.errors.has('user') }" v-model="editform.user" :options="options"></b-form-select>-->
61+
<b-form-input id="author" name="author" :class="{ 'is-invalid': form.errors.has('author') }" v-model="form.author" list="my-list-id"></b-form-input>
62+
<datalist id="my-list-id">
63+
<option v-for="option in options">{{ option.text }}</option>
64+
</datalist>
65+
<has-error :form="editform" field="author" />
66+
</b-form-group>
67+
<b-form-group
68+
label="Description:"
69+
label-for="description">
70+
<b-form-textarea id="description" name="description" :class="{ 'is-invalid': editform.errors.has('description') }" v-model="editform.description" rows="3" max-rows="6"></b-form-textarea>
71+
<has-error :form="editform" field="description" />
72+
</b-form-group>
73+
</b-form>
74+
<template #modal-footer>
75+
<div class="w-100">
76+
<b-button
77+
variant="danger"
78+
class="float-right"
79+
@click="edit_modal_show=false"
80+
>
81+
Close
82+
</b-button>
83+
<b-button
84+
type="submit"
85+
variant="primary"
86+
class="float-right mr-2"
87+
>
88+
Save
89+
</b-button>
90+
</div>
91+
</template>
92+
</b-modal>
93+
<b-table striped hover :items="items">
94+
<template #cell(action)="data">
95+
<b-button size="sm" @click="openModal(data.value)" variant="info">Edit</b-button>
96+
<b-button size="sm" @click="delete(data.value)" variant="danger">Delete</b-button>
97+
</template>
98+
</b-table>
499
</b-card>
5100
</template>
6101

7102
<script>
103+
import Form from "vform";
104+
8105
export default {
9-
middleware: 'auth',
106+
middleware: 'auth',
107+
data() {
108+
return {
109+
create_modal_show: false,
110+
edit_modal_show: false,
111+
items: [
112+
{ title: 'Title1', author: 'Dickerson', description: 'Macdonald', action: 2 },
113+
{ title: 'Title2', author: 'Larsen', description: 'Shaw', action: 1 },
114+
{ title: 'Title3', author: 'Geneva', description: 'Wilson', action: 3 },
115+
{ title: 'Title4', author: 'Jami', description: 'Carney', action: 4 }
116+
],
117+
options: [
118+
{ value: 'a', text: 'This is First option'},
119+
{ value: 'b', text: 'Selected Option'}
120+
],
121+
form: new Form({
122+
title: '',
123+
author: "a",
124+
description: ''
125+
}),
126+
editform: new Form({
127+
id: '',
128+
title: '',
129+
author: "Geneva",
130+
description: ''
131+
})
132+
}
133+
},
134+
methods: {
135+
openModal(id) {
136+
this.edit_modal_show = true
137+
this.editform.id = "Title3"
138+
this.editform.title = "Title3"
139+
this.editform.author = "Geneva"
140+
this.editform.description = "Wilson"
141+
},
142+
delete(id) {
143+
144+
}
145+
}
10146
}
11147
</script>

‎resources/js/store/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import Vue from 'vue'
22
import Vuex from 'vuex'
3-
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
3+
import { BootstrapVue, IconsPlugin,FormSelectPlugin } from 'bootstrap-vue'
44
import 'bootstrap/dist/css/bootstrap.css'
55
import 'bootstrap-vue/dist/bootstrap-vue.css'
66

77
Vue.use(BootstrapVue)
88
Vue.use(IconsPlugin)
9+
Vue.use(FormSelectPlugin)
910
Vue.use(Vuex)
1011

1112
// Load store modules dynamically.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /