Skip to content

Commit 85b75fe

Browse files
srsedevsrsedev
committed
initial commit
1 parent bd959b0 commit 85b75fe

File tree

5 files changed

+119
-48
lines changed

5 files changed

+119
-48
lines changed

Diff for: ‎app/Http/Controllers/PostController.php

+1
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()) {

Diff for: ‎package-lock.json

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+1
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
},

Diff for: ‎resources/js/pages/home.vue

+107-48
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
{

Diff for: ‎resources/js/store/index.js

+5
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)