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 85b75fe

Browse files
committed
initial commit
1 parent bd959b0 commit 85b75fe

File tree

5 files changed

+119
-48
lines changed

5 files changed

+119
-48
lines changed

‎app/Http/Controllers/PostController.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ public function store(Request $request)
4747
'description' => 'required'
4848
];
4949
$validator = Validator::make($request->all(), $rules, [
50+
'user_id.required' => 'You must select the author correctly.',
5051
'user_id.min' => 'You must use the author correctly.'
5152
]);
5253
if ($validator->fails()) {

‎package-lock.json

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"vue": "^2.6.12",
2828
"vue-meta": "^2.4.0",
2929
"vue-router": "^3.4.8",
30+
"vue-select": "^3.10.8",
3031
"vuex": "^3.5.1",
3132
"vuex-router-sync": "^5.0.0"
3233
},

‎resources/js/pages/home.vue

Lines changed: 107 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -7,68 +7,121 @@
77
<b-form-group
88
label="Title:"
99
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" />
10+
<b-form-input
11+
type="text"
12+
id="title"
13+
name="title"
14+
:class="{ 'is-invalid': form.errors.has('title') }"
15+
v-model="form.title">
16+
</b-form-input>
17+
<has-error
18+
:form="form"
19+
field="title"/>
1220
</b-form-group>
1321
<b-form-group
1422
label="Author:"
15-
label-for="user_name">
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" name="user_name" :class="{ 'is-invalid': form.errors.has('user_id') }" v-model="form.user_name" list="my-list-id"></b-form-input>
18-
<datalist id="my-list-id">
19-
<option v-for="author in authors">{{ author.name }}</option>
20-
</datalist>
21-
<has-error :form="form" field="user_id" />
23+
label-for="user_id">
24+
<v-select
25+
id="user_id"
26+
name="user_id"
27+
v-model="form.user_id"
28+
:searchable="true"
29+
:clearable="false"
30+
:options="authors"
31+
:class="{ 'is-invalid': form.errors.has('user_id') }"
32+
:reduce="author => author.id"
33+
:get-option-label="getOptionLabel">
34+
</v-select>
35+
<has-error
36+
:form="form"
37+
field="user_id" />
2238
</b-form-group>
2339
<b-form-group
2440
label="Description:"
2541
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" />
42+
<b-form-textarea
43+
id="description"
44+
name="description"
45+
:class="{ 'is-invalid': form.errors.has('description') }"
46+
v-model="form.description"
47+
rows="3"
48+
max-rows="6">
49+
</b-form-textarea>
50+
<has-error
51+
:form="form"
52+
field="description" />
2853
</b-form-group>
2954
</b-form>
3055
<template #modal-footer>
3156
<div class="w-100">
3257
<b-button
3358
variant="danger"
3459
class="float-right"
35-
@click="create_modal_show=false"
36-
>
60+
@click="create_modal_show=false">
3761
Close
3862
</b-button>
3963
<b-button
4064
type="submit"
4165
variant="primary"
4266
class="float-right mr-2"
43-
@click="create_post()"
44-
>
67+
@click="create_post()">
4568
Save
4669
</b-button>
4770
</div>
4871
</template>
4972
</b-modal>
50-
<b-modal v-model="edit_modal_show" id="modal-edit" no-close-on-backdrop content-class="shadow" title="Edit Post">
51-
<b-form @submit.prevent="register" @keydown="editform.onKeydown($event)">
73+
<b-modal
74+
v-model="edit_modal_show"
75+
id="modal-edit"
76+
no-close-on-backdrop
77+
content-class="shadow"
78+
title="Edit Post">
79+
<b-form
80+
@submit.prevent="register"
81+
@keydown="editform.onKeydown($event)">
5282
<b-form-group
5383
label="Title:"
54-
label-for="title">
55-
<b-form-input type="text" id="title" name="title" :class="{ 'is-invalid': editform.errors.has('title') }" v-model="editform.title"></b-form-input>
56-
<has-error :form="editform" field="title" />
84+
label-for="edit_title">
85+
<b-form-input
86+
type="text"
87+
id="edit_title"
88+
name="edit_title"
89+
:class="{ 'is-invalid': editform.errors.has('title') }"
90+
v-model="editform.title">
91+
</b-form-input>
92+
<has-error
93+
:form="editform"
94+
field="title" />
5795
</b-form-group>
5896
<b-form-group
5997
label="Author:"
60-
label-for="user_name">
61-
<!-- <b-form-select id="user" name="user" :class="{ 'is-invalid': editform.errors.has('user') }" v-model="editform.user" :options="options"></b-form-select>-->
62-
<b-form-input id="user_name" name="user_name" :class="{ 'is-invalid': editform.errors.has('user_id') }" v-model="editform.user_name" list="my-list-id"></b-form-input>
63-
<datalist id="my-list-id">
64-
<option v-for="author in authors">{{ author.name }}</option>
65-
</datalist>
66-
<has-error :form="editform" field="user_id" />
98+
label-for="edit_user_id">
99+
<v-select
100+
id="edit_user_id"
101+
name="edit_user_id"
102+
v-model="editform.user_id"
103+
:searchable="true"
104+
:clearable="false"
105+
:options="authors"
106+
:class="{ 'is-invalid': editform.errors.has('user_id') }"
107+
:reduce="author => author.id"
108+
:get-option-label="getOptionLabel">
109+
</v-select>
110+
<has-error
111+
:form="editform"
112+
field="user_id" />
67113
</b-form-group>
68114
<b-form-group
69115
label="Description:"
70-
label-for="description">
71-
<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>
116+
label-for="edit_description">
117+
<b-form-textarea
118+
id="edit_description"
119+
name="edit_description"
120+
:class="{ 'is-invalid': editform.errors.has('description') }"
121+
v-model="editform.description"
122+
rows="3"
123+
max-rows="6">
124+
</b-form-textarea>
72125
<has-error :form="editform" field="description" />
73126
</b-form-group>
74127
</b-form>
@@ -77,25 +130,38 @@
77130
<b-button
78131
variant="danger"
79132
class="float-right"
80-
@click="edit_modal_show=false"
81-
>
133+
@click="edit_modal_show=false">
82134
Close
83135
</b-button>
84136
<b-button
85137
type="submit"
86138
variant="primary"
87139
class="float-right mr-2"
88-
@click="save_post"
89-
>
140+
@click="save_post">
90141
Save
91142
</b-button>
92143
</div>
93144
</template>
94145
</b-modal>
95-
<b-table striped hover :items="items" :fields="fields">
96-
<template #cell(id)="data">
97-
<b-button size="sm" @click="openModal(data.value)" variant="info">Edit</b-button>
98-
<b-button size="sm" @click="deleteItem(data.value)" variant="danger">Delete</b-button>
146+
<b-table
147+
striped
148+
hover
149+
:items="items"
150+
:fields="fields">
151+
<template
152+
#cell(action)="data" >
153+
<b-button
154+
size="sm"
155+
@click="openModal(data.value)"
156+
variant="info">
157+
Edit
158+
</b-button>
159+
<b-button
160+
size="sm"
161+
@click="deleteItem(data.value)"
162+
variant="danger">
163+
Delete
164+
</b-button>
99165
</template>
100166
</b-table>
101167
</b-card>
@@ -115,20 +181,21 @@ export default {
115181
authors: [],
116182
form: new Form({
117183
title: '',
118-
user_name: '',
119184
user_id: 0,
120185
description: ''
121186
}),
122187
editform: new Form({
123188
id: 0,
124189
title: '',
125-
user_name: '',
126190
user_id: 0,
127191
description: ''
128192
})
129193
}
130194
},
131195
methods: {
196+
getOptionLabel (option) {
197+
return (option && option.name) || ''
198+
},
132199
async loadAuth () {
133200
const { data } = await this.form.get('/api/users')
134201
this.authors = data;
@@ -142,14 +209,10 @@ export default {
142209
this.edit_modal_show = true
143210
this.editform.id = item.id
144211
this.editform.title = item.title
145-
this.editform.user_name = item.user_name
212+
this.editform.user_id = item.user_id
146213
this.editform.description = item.description
147214
},
148215
async create_post() {
149-
let user = this.authors.find(({name})=>name===this.form.user_name);
150-
let user_id = 0
151-
if (user) user_id = user.id
152-
this.form.user_id = user_id;
153216
const { data } = await this.form.post('/api/posts')
154217
if (data.id > 0)
155218
{
@@ -169,10 +232,6 @@ export default {
169232
}
170233
},
171234
async save_post() {
172-
let user = this.authors.find(({name})=>name===this.editform.user_name);
173-
let user_id = 0
174-
if (user) user_id = user.id
175-
this.editform.user_id = user_id;
176235
const { data } = await this.editform.post('/api/posts/' + this.editform.id)
177236
if (data.id > 0)
178237
{

‎resources/js/store/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,17 @@ import Vuex from 'vuex'
33
import { BootstrapVue, IconsPlugin, FormSelectPlugin } from 'bootstrap-vue'
44
import 'bootstrap/dist/css/bootstrap.css'
55
import 'bootstrap-vue/dist/bootstrap-vue.css'
6+
import vSelect from 'vue-select'
7+
import 'vue-select/dist/vue-select.css';
8+
69

710
Vue.use(BootstrapVue)
811
Vue.use(IconsPlugin)
912
Vue.use(FormSelectPlugin)
1013
Vue.use(Vuex)
1114

15+
Vue.component('v-select', vSelect)
16+
1217
// Load store modules dynamically.
1318
const requireContext = require.context('./modules', false, /.*\.js$/)
1419

0 commit comments

Comments
(0)

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