This commit is contained in:
jitendra 2022-03-22 13:06:51 +05:30
parent 0080ca42c0
commit adbde72359
14 changed files with 266 additions and 16 deletions

File diff suppressed because one or more lines are too long

View File

@ -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"
}

View File

@ -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([

View File

@ -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%;
}
}
}
}

View File

@ -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' => [

View File

@ -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="&quot;{{ __('admin::app.account.name') }}&quot;"/>
@ -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

View File

@ -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

View File

@ -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"
}

View File

@ -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

View File

@ -453,3 +453,9 @@
width: 24px;
height: 24px;
}
.upload-icon {
background-image: url("../images/upload-icon.svg");
width: 24px;
height: 24px;
}

View File

@ -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');
});
}
}

View File

@ -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) {

View File

@ -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.
*