Issue #5355 fixed
This commit is contained in:
parent
0080ca42c0
commit
adbde72359
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"/js/admin.js": "/js/admin.js?id=7d73f64f6f160ecd8a23",
|
||||
"/css/admin.css": "/css/admin.css?id=5fc68c20019f02de7af3"
|
||||
"/css/admin.css": "/css/admin.css?id=a26534bb288f2cf466fd"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ namespace Webkul\Admin\DataGrids;
|
|||
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Webkul\Ui\DataGrid\DataGrid;
|
||||
use Illuminate\Support\Facades\Storage;
|
||||
|
||||
class UserDataGrid extends DataGrid
|
||||
{
|
||||
|
|
@ -30,7 +31,7 @@ class UserDataGrid extends DataGrid
|
|||
{
|
||||
$queryBuilder = DB::table('admins as u')
|
||||
->leftJoin('roles as ro', 'u.role_id', '=', 'ro.id')
|
||||
->addSelect('u.id as user_id', 'u.name as user_name', 'u.status', 'u.email', 'ro.name as role_name');
|
||||
->addSelect('u.id as user_id', 'u.name as user_name', 'u.image as user_image', 'u.status', 'u.email', 'ro.name as role_name');
|
||||
|
||||
$this->addFilter('user_id', 'u.id');
|
||||
$this->addFilter('user_name', 'u.name');
|
||||
|
|
@ -63,6 +64,13 @@ class UserDataGrid extends DataGrid
|
|||
'searchable' => true,
|
||||
'sortable' => true,
|
||||
'filterable' => true,
|
||||
'closure' => function ($row) {
|
||||
if ($row->user_image) {
|
||||
return '<div class="avatar"><img src="' . Storage::url($row->user_image) . '"></div>' . $row->user_name;
|
||||
} else {
|
||||
return '<div class="avatar"><span class="icon profile-pic-icon"></span></div>' . $row->user_name;
|
||||
}
|
||||
},
|
||||
]);
|
||||
|
||||
$this->addColumn([
|
||||
|
|
|
|||
|
|
@ -919,3 +919,86 @@ body {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-upload-brick {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 5px;
|
||||
border: dashed 1px #3a3a3a;
|
||||
overflow: hidden;
|
||||
margin-right: 15px;
|
||||
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
input[type="file"] {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -20px;
|
||||
margin-top: -20px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.image-info-brick {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 10px 0px;
|
||||
|
||||
.field-info {
|
||||
width: 305px;
|
||||
display: block;
|
||||
font-style: italic;
|
||||
color: $role-text-color;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.table {
|
||||
td {
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 43px;
|
||||
background-color: $body-background;
|
||||
border: 1px solid $border-color;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -260,15 +260,17 @@ return [
|
|||
],
|
||||
|
||||
'account' => [
|
||||
'title' => 'My Account',
|
||||
'save-btn-title' => 'Save',
|
||||
'general' => 'General',
|
||||
'name' => 'Name',
|
||||
'email' => 'Email',
|
||||
'password' => 'Password',
|
||||
'confirm-password' => 'Confirm Password',
|
||||
'change-password' => 'Change Account Password',
|
||||
'current-password' => 'Current Password',
|
||||
'title' => 'My Account',
|
||||
'save-btn-title' => 'Save',
|
||||
'general' => 'General',
|
||||
'upload-image-info' => 'Upload a Profile Image (100px x 100px) in PNG or JPG Format',
|
||||
'remove-image' => 'Remove Image',
|
||||
'name' => 'Name',
|
||||
'email' => 'Email',
|
||||
'password' => 'Password',
|
||||
'confirm-password' => 'Confirm Password',
|
||||
'change-password' => 'Change Account Password',
|
||||
'current-password' => 'Current Password',
|
||||
],
|
||||
|
||||
'users' => [
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
@section('content-wrapper')
|
||||
<div class="content full-page">
|
||||
<form method="POST" action="" @submit.prevent="onSubmit">
|
||||
<form method="POST" action="" enctype="multipart/form-data" @submit.prevent="onSubmit">
|
||||
<div class="page-header">
|
||||
<div class="page-title">
|
||||
<h1>
|
||||
|
|
@ -30,6 +30,8 @@
|
|||
|
||||
<accordian :title="'{{ __('admin::app.account.general') }}'" :active="true">
|
||||
<div slot="body">
|
||||
<upload-profile-image></upload-profile-image>
|
||||
|
||||
<div class="control-group" :class="[errors.has('name') ? 'has-error' : '']">
|
||||
<label for="name" class="required">{{ __('admin::app.account.name') }}</label>
|
||||
<input type="text" v-validate="'required'" class="control" id="name" name="name" value="{{ old('name') ?: $user->name }}" data-vv-as=""{{ __('admin::app.account.name') }}""/>
|
||||
|
|
@ -73,4 +75,77 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@stop
|
||||
@stop
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/x-template" id="upload-profile-image-template">
|
||||
<div class="form-group" style="margin-bottom: 40px;">
|
||||
<div class="image-upload-brick">
|
||||
<input
|
||||
type="file"
|
||||
name="image"
|
||||
id="upload-profile"
|
||||
ref="imageInput"
|
||||
@change="addImageView($event)"
|
||||
>
|
||||
|
||||
<i class="icon upload-icon"></i>
|
||||
|
||||
<img class="preview" :src="imageData" v-if="imageData.length > 0">
|
||||
</div>
|
||||
|
||||
<div class="image-info-brick">
|
||||
<span class="field-info">
|
||||
{{ __('admin::app.account.upload-image-info') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@if ($user->image_url)
|
||||
<div style="margin-top: 10px;">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="remove_image"
|
||||
/>
|
||||
|
||||
<label for="remove" class="">
|
||||
{{ __('admin::app.account.remove-image') }}
|
||||
</label>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('upload-profile-image', {
|
||||
template: '#upload-profile-image-template',
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
imageData: "{{ $user->image_url }}",
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addImageView () {
|
||||
var imageInput = this.$refs.imageInput;
|
||||
|
||||
if (imageInput.files && imageInput.files[0]) {
|
||||
if (imageInput.files[0].type.includes('image/')) {
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.onload = (e) => {
|
||||
this.imageData = e.target.result;
|
||||
}
|
||||
|
||||
reader.readAsDataURL(imageInput.files[0]);
|
||||
} else {
|
||||
imageInput.value = '';
|
||||
|
||||
alert('{{ __('admin::app.account.image_upload_message') }}');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 19h16v-7h2v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8h2v7zM14 9v6h-4V9H5l7-7 7 7h-5z" fill="#8184AB"/></svg>
|
||||
|
After Width: | Height: | Size: 232 B |
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"/js/ui.js": "/js/ui.js?id=7f7536c1762935de2278",
|
||||
"/css/ui.css": "/css/ui.css?id=bd09631c82c50b02445f"
|
||||
"/css/ui.css": "/css/ui.css?id=df2ab4275b43756beb5f"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 19h16v-7h2v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8h2v7zM14 9v6h-4V9H5l7-7 7 7h-5z" fill="#8184AB"/></svg>
|
||||
|
After Width: | Height: | Size: 232 B |
|
|
@ -453,3 +453,9 @@
|
|||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
background-image: url("../images/upload-icon.svg");
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
class AddImageColumnInAdminsTable extends Migration
|
||||
{
|
||||
/**
|
||||
* Run the migrations.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function up()
|
||||
{
|
||||
Schema::table('admins', function (Blueprint $table) {
|
||||
$table->string('image')->nullable();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse the migrations.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function down()
|
||||
{
|
||||
Schema::table('admins', function (Blueprint $table) {
|
||||
$table->dropColumn('image');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -68,6 +68,14 @@ class AccountController extends Controller
|
|||
$data['password'] = bcrypt($data['password']);
|
||||
}
|
||||
|
||||
if (request()->hasFile('image')) {
|
||||
$data['image'] = request()->file('image')->store('admins/' . $user->id);
|
||||
}
|
||||
|
||||
if (isset($data['remove_image']) && $data['remove_image'] !== '') {
|
||||
$data['image'] = null;
|
||||
}
|
||||
|
||||
$user->update($data);
|
||||
|
||||
if ($isPasswordChanged) {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ use Illuminate\Database\Eloquent\Factories\HasFactory;
|
|||
use Illuminate\Foundation\Auth\User as Authenticatable;
|
||||
use Illuminate\Notifications\Notifiable;
|
||||
use Laravel\Sanctum\HasApiTokens;
|
||||
use Illuminate\Support\Facades\Storage;
|
||||
use PHPOpenSourceSaver\JWTAuth\Contracts\JWTSubject;
|
||||
use Webkul\User\Contracts\Admin as AdminContract;
|
||||
use Webkul\User\Database\Factories\AdminFactory;
|
||||
|
|
@ -25,6 +26,7 @@ class Admin extends Authenticatable implements AdminContract, JWTSubject
|
|||
'name',
|
||||
'email',
|
||||
'password',
|
||||
'image',
|
||||
'api_token',
|
||||
'role_id',
|
||||
'status',
|
||||
|
|
@ -41,6 +43,38 @@ class Admin extends Authenticatable implements AdminContract, JWTSubject
|
|||
'remember_token',
|
||||
];
|
||||
|
||||
/**
|
||||
* Get image url for the product image.
|
||||
*/
|
||||
public function image_url()
|
||||
{
|
||||
if (! $this->image) {
|
||||
return;
|
||||
}
|
||||
|
||||
return Storage::url($this->image);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get image url for the product image.
|
||||
*/
|
||||
public function getImageUrlAttribute()
|
||||
{
|
||||
return $this->image_url();
|
||||
}
|
||||
|
||||
/**
|
||||
* @return array
|
||||
*/
|
||||
public function toArray()
|
||||
{
|
||||
$array = parent::toArray();
|
||||
|
||||
$array['image_url'] = $this->image_url;
|
||||
|
||||
return $array;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the role that owns the admin.
|
||||
*
|
||||
|
|
|
|||
Loading…
Reference in New Issue