Skip to content

Commit ff36d41

Browse files
mohsin-shaikhmohsin-shaikh
committed
Create User Form FIX
1 parent 95f6a70 commit ff36d41

File tree

9 files changed

+160
-109
lines changed

9 files changed

+160
-109
lines changed

‎public/js/app.js

Lines changed: 69 additions & 49 deletions
Large diffs are not rendered by default.

‎resources/css/buttons.css

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
.btn-indigo {
22
@apply px-6 py-3 rounded bg-indigo-600 text-white text-sm font-bold whitespace-nowrap;
33

4-
&:hover,
5-
&:focus {
6-
@apply bg-yellow-500
7-
}
4+
&:hover,&:focus {@apply bg-yellow-500}
85
}
96

107
.btn-spinner,

‎resources/js/Layouts/AppLayout.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@
2424
</div>
2525
</div>
2626
<div class="bg-white border-b w-full p-4 md:py-0 md:px-12 text-sm md:text-md flex justify-between items-center">
27-
<div class="mt-1 mr-4">{{ $page.props.user.account.name }}</div>
27+
<div class="mt-1 mr-4">
28+
<!-- {{ $page.props.user.account.name }} -->
29+
Temp FIX
30+
</div>
2831
<div class="hidden sm:flex sm:items-center sm:ml-6">
2932
<div class="ml-3 relative">
3033
<!-- Teams Dropdown -->

‎resources/js/Pages/Users/Create.vue

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,31 @@
11
<template>
22
<div>
33
<h1 class="mb-8 font-bold text-3xl">
4-
<inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('users')">Users</inertia-link>
5-
<span class="text-indigo-400 font-medium">/</span> Create
4+
<Link class="text-indigo-400 hover:text-indigo-600" :href="route('users')">Users</Link>
5+
<span class="text-indigo-400 font-medium"> / </span>Create
66
</h1>
77
<div class="bg-white rounded shadow overflow-hidden max-w-3xl">
88
<form @submit.prevent="submit">
99
<div class="p-8 -mr-6 -mb-8 flex flex-wrap">
10-
<text-input v-model="form.first_name" :error="errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
11-
<text-input v-model="form.last_name" :error="errors.last_name" class="pr-6 pb-8 w-full lg:w-1/2" label="Last name" />
12-
<text-input v-model="form.email" :error="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
13-
<text-input v-model="form.password" :error="errors.password" class="pr-6 pb-8 w-full lg:w-1/2" type="password" autocomplete="new-password" label="Password" />
14-
<select-input v-model="form.owner" :error="errors.owner" class="pr-6 pb-8 w-full lg:w-1/2" label="Owner">
15-
<option :value="true">Yes</option>
16-
<option :value="false">No</option>
17-
</select-input>
18-
<file-input v-model="form.photo" :error="errors.photo" class="pr-6 pb-8 w-full lg:w-1/2" type="file" accept="image/*" label="Photo" />
10+
<div class="pr-6 pb-8 w-full lg:w-1/2">
11+
<text-input v-model="form.first_name" :error="errors.first_name" label="First name" />
12+
</div>
13+
<div class="pr-6 pb-8 w-full lg:w-1/2">
14+
<text-input v-model="form.last_name" :error="errors.last_name" label="Last name" />
15+
</div>
16+
<div class="pr-6 pb-8 w-full lg:w-1/2">
17+
<text-input v-model="form.email" :error="errors.email" label="Email" />
18+
</div>
19+
<div class="pr-6 pb-8 w-full lg:w-1/2">
20+
<text-input v-model="form.password" :error="errors.password" type="password" autocomplete="new-password" label="Password" />
21+
</div>
22+
<div class="pr-6 pb-8 w-full lg:w-1/2">
23+
<select-input v-model="form.owner" :error="errors.owner" label="Owner">
24+
<option :value="true">Yes</option>
25+
<option :value="false">No</option>
26+
</select-input>
27+
</div>
28+
<file-input v-model="form.photo" :error="errors.photo" class="pr-6 pb-8 w-full lg:w-1/1" type="file" accept="image/*" label="Photo" />
1929
</div>
2030
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
2131
<loading-button :loading="sending" class="btn-indigo" type="submit">Create User</loading-button>
@@ -26,20 +36,22 @@
2636
</template>
2737

2838
<script>
29-
import Layout from '@/Shared/Layout'
39+
import AppLayout from '@/Layouts/AppLayout'
3040
import LoadingButton from '@/Shared/LoadingButton'
3141
import SelectInput from '@/Shared/SelectInput'
3242
import TextInput from '@/Shared/TextInput'
3343
import FileInput from '@/Shared/FileInput'
44+
import { Link } from '@inertiajs/inertia-vue3';
3445
3546
export default {
3647
metaInfo: { title: 'Create User' },
37-
layout: Layout,
48+
layout: AppLayout,
3849
components: {
3950
LoadingButton,
4051
SelectInput,
4152
TextInput,
4253
FileInput,
54+
Link,
4355
},
4456
props: {
4557
errors: Object,

‎resources/js/Pages/Users/Index.vue

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,11 @@
6262

6363
<script>
6464
import Icon from '@/Shared/Icon'
65-
// import Layout from '@/Shared/Layout'
65+
import AppLayout from '@/Layouts/AppLayout'
6666
import mapValues from 'lodash/mapValues'
6767
import pickBy from 'lodash/pickBy'
6868
import SearchFilter from '@/Shared/SearchFilter'
6969
import throttle from 'lodash/throttle'
70-
71-
import AppLayout from '@/Layouts/AppLayout.vue'
7270
import { Link } from '@inertiajs/inertia-vue3';
7371
7472
export default {

‎resources/js/Shared/LoadingButton.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<button :disabled="loading" class="flex items-center">
3-
<div v-if="loading" class="btn-spinner mr-2" />
3+
<div v-if="loading" class="btn-spinner mr-2"></div>
44
<slot />
55
</button>
66
</template>

‎resources/js/Shared/SelectInput.vue

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,30 @@
11
<template>
22
<div>
33
<label v-if="label" class="form-label" :for="id">{{ label }}:</label>
4-
<select :id="id" ref="input" v-model="selected" v-bind="$attrs" class="form-select" :class="{ error: error }">
4+
<select
5+
:id="id"
6+
ref="input"
7+
v-model="selected"
8+
v-bind="$attrs"
9+
class="form-select"
10+
:class="{ error: error }"
11+
>
512
<slot />
613
</select>
714
<div v-if="error" class="form-error">{{ error }}</div>
815
</div>
916
</template>
1017

1118
<script>
19+
import {uniqueId} from 'lodash'
20+
1221
export default {
1322
inheritAttrs: false,
1423
props: {
1524
id: {
1625
type: String,
1726
default() {
18-
return `select-input-${this._uid}`
27+
return `select-input-${uniqueId()}`;
1928
},
2029
},
2130
value: [String, Number, Boolean],
@@ -25,20 +34,20 @@ export default {
2534
data() {
2635
return {
2736
selected: this.value,
28-
}
37+
};
2938
},
3039
watch: {
3140
selected(selected) {
32-
this.$emit('input', selected)
41+
this.$emit("input", selected);
3342
},
3443
},
3544
methods: {
3645
focus() {
37-
this.$refs.input.focus()
46+
this.$refs.input.focus();
3847
},
3948
select() {
40-
this.$refs.input.select()
49+
this.$refs.input.select();
4150
},
4251
},
43-
}
52+
};
4453
</script>

‎resources/js/Shared/TextInput.vue

Lines changed: 42 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,50 @@
11
<template>
2-
<div>
3-
<label v-if="label" class="form-label" :for="id">{{ label }}:</label>
4-
<input :id="id" ref="input" v-bind="$attrs" class="form-input" :class="{ error: error }" :type="type" :value="value" @input="$emit('input', $event.target.value)">
5-
<div v-if="error" class="form-error">{{ error }}</div>
6-
</div>
2+
<div>
3+
<label v-if="label" class="form-label" :for="id">{{ label }}:</label>
4+
<input
5+
:id="id"
6+
ref="input"
7+
v-bind="$attrs"
8+
class="form-input"
9+
:class="{ error: error }"
10+
:type="type"
11+
:value="value"
12+
@input="$emit('input', $event.target.value)"
13+
/>
14+
<div v-if="error" class="form-error">{{ error }}</div>
15+
</div>
716
</template>
817

918
<script>
19+
import { uniqueId } from "lodash";
20+
1021
export default {
11-
inheritAttrs: false,
12-
props: {
13-
id: {
14-
type: String,
15-
default() {
16-
return `text-input-${this._uid}`
17-
},
18-
},
19-
type: {
20-
type: String,
21-
default: 'text',
22-
},
23-
value: String,
24-
label: String,
25-
error: String,
26-
},
27-
methods: {
28-
focus() {
29-
this.$refs.input.focus()
30-
},
31-
select() {
32-
this.$refs.input.select()
22+
inheritAttrs: false,
23+
props: {
24+
id: {
25+
type: String,
26+
default() {
27+
return `text-input-${uniqueId()}`;
28+
},
29+
},
30+
type: {
31+
type: String,
32+
default: "text",
33+
},
34+
value: String,
35+
label: String,
36+
error: String,
3337
},
34-
setSelectionRange(start, end) {
35-
this.$refs.input.setSelectionRange(start, end)
38+
methods: {
39+
focus() {
40+
this.$refs.input.focus();
41+
},
42+
select() {
43+
this.$refs.input.select();
44+
},
45+
setSelectionRange(start, end) {
46+
this.$refs.input.setSelectionRange(start, end);
47+
},
3648
},
37-
},
38-
}
49+
};
3950
</script>

‎webpack.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const path = require('path');
33
module.exports = {
44
resolve: {
55
alias: {
6+
// vue$: 'vue/dist/vue.runtime.esm.js',
67
'@': path.resolve('resources/js'),
78
},
89
},

0 commit comments

Comments
 (0)