Skip to content

GitLab

Merged
Created by Mujahid Rofiq@MujahidRMaintainer

edit tampilan

Viewing commit 9cfdee15
Show latest version
3 files
+ 90
- 79
app/Http/C‎ontrollers‎
UserContr‎oller.php‎ +1 -1
resources/views/…/‎usermanagement/user‎
create.b‎lade.php‎ +38 -34
edit.bl‎ade.php‎ +51 -44
app/Http/Controllers/UserController.php
+ 1
- 1
Show all unchanged lines Show 20 lines
$user->warehouses()->sync($request['workLocation']);
}
return redirect()->route('people.users.index')->with('success', 'User berhasil diedit');
return back()->with('success', 'User berhasil diedit');
}
/**
Show 20 lines Show all unchanged lines
resources/views/templates/usermanagement/user/create.blade.php
+ 38
- 34
@extends('templates.main')
@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" />
<style type="text/css">
img {
Show 20 lines Show all unchanged lines Show 20 lines
max-width: 100%;
}
.preview {
.image-container {
overflow: hidden;
width: 160px;
height: 160px;
margin: 10px;
border: 1px solid red;
max-width: 510px !important;
max-height: 370px !important;
}
.pretiew {
.preview {
display: none;
}
/* Custom CSS to adjust the Bootstrap media query breakpoints */
@media (min-width: 768px) {
/* Adjust the large (lg) screen breakpoint */
.modal-lg {
--bs-modal-width: 700px; /* Set your desired minimum width for large screens (lg) */
}
.preview {
display: block;
overflow: hidden;
width: 510px;
height: 300px;
margin: 10px;
width: 210px;
height: 210px;
border: 1px solid red;
}
}
</style>
@section('content')
<form action="{{ route('people.users.store') }}" method="POST" class="row" enctype="multipart/form-data">
@csrf
<!-- <div class="mt-3" style="justify-content-center">
Show 20 lines Show all unchanged lines Show 20 lines
<a href="#">10 MB</a>
</div>
</div>
<div id="mainPage" style="display: none;">
<img id="croppedImage" src="" alt="Cropped Image"
class="theme-color-default-img profile-pic rounded avatar-100">
</div>
</div>
<div class="form-group">
<label class="form-label" for="username">Username:</label>
Show 20 lines Show all unchanged lines Show 20 lines
</div>
<!-- Modal for image preview and cropping -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
<div class="modal fade" id="modal" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
Show 20 lines Show all unchanged lines Show 20 lines
<h5 class="modal-title" id="modalLabel">Crop Image</h5>
</div>
<div class="modal-body">
<div class="img-container">
<div class="row" style="height: 300px;">
<div class="col-md-8">
<!-- Default image where we will set the src via jQuery -->
<div class="pretiew">
<img id="image">
<!-- <div class="img-container"> -->
<!-- <div class="row" style="height: 300px;"> -->
<div class="row">
<div class="col-md-8">
<!-- Default image where we will set the src via jQuery -->
<div class="docs-demo">
<div class="image-container">
<img id="image">
</div>
</div>
</div>
<div class="col-md-4 px-0">
<div class="preview"></div>
</div>
</div>
<div class="col-md-4">
<div class="preview"></div>
</div>
</div>
</div>
<!-- </div> -->
<!-- </div> -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
Show 20 lines Show all unchanged lines Show 20 lines
});
$("#crop").click(function() {
canvas = cropper.getCroppedCanvas({
width: 160,
height: 160,
});
canvas = cropper.getCroppedCanvas();
var croppedImage = canvas.toDataURL(); // Get the cropped image as base64 data URL
$("#croppedImage").attr("src",
croppedImage); // Set the src attribute of the image element on the main page
$("#firstImage").attr("src",
croppedImage); // Set the src attribute of the image element on the main page
$("#croppedImageData").val(
Show 20 lines Show all unchanged lines
resources/views/templates/usermanagement/user/edit.blade.php
+ 51
- 44
@extends('templates.main')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" />
@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" />
<style type="text/css">
img {
display: block;
max-width: 100%;
}
.preview {
.image-container {
overflow: hidden;
width: 160px;
height: 160px;
margin: 10px;
border: 1px solid red;
max-width: 510px !important;
max-height: 370px !important;
}
.pretiew {
.preview {
display: none;
}
/* Custom CSS to adjust the Bootstrap media query breakpoints */
@media (min-width: 768px) {
/* Adjust the large (lg) screen breakpoint */
.modal-lg {
--bs-modal-width: 700px; /* Set your desired minimum width for large screens (lg) */
}
.preview {
display: block;
overflow: hidden;
width: 510px;
height: 300px;
margin: 10px;
width: 210px;
height: 210px;
border: 1px solid red;
}
}
</style>
@section('content')
<form action="{{ route('people.users.update', $user['id']) }}" method="POST" class="row" enctype="multipart/form-data">
@csrf
@method('patch')
Show 20 lines Show all unchanged lines Show 20 lines
<a href="#">10 MB</a>
</div>
</div>
<div id="mainPage" style="display: none;">
<img id="croppedImage" src="" alt="Cropped Image" class="theme-color-default-img profile-pic rounded avatar-100">
</div>
</div>
<div class="form-group">
<label class="form-label" for="username">Username:</label>
Show 20 lines Show all unchanged lines Show 20 lines
</div>
<!-- Modal for image preview and cropping -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Crop Image</h5>
</div>
<div class="modal-body">
<div class="img-container">
<div class="row" style="height: 300px;">
<div class="col-md-8">
<!-- Default image where we will set the src via jQuery -->
<div class="pretiew">
<img id="image">
</div>
<div class="modal fade" id="modal" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Crop Image</h5>
</div>
<div class="modal-body">
<!-- <div class="img-container"> -->
<!-- <div class="row" style="height: 300px;"> -->
<div class="row">
<div class="col-md-8">
<!-- Default image where we will set the src via jQuery -->
<div class="docs-demo">
<div class="image-container">
<img id="image">
</div>
</div>
</div>
<div class="col-md-4 px-0">
<div class="preview"></div>
</div>
</div>
<!-- </div> -->
<!-- </div> -->
</div>
<div class="col-md-4">
<div class="preview"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="crop">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="crop">Save changes</button>
</div>
</div>
</div>
</div>
</form>
@endsection
@push('script')
Show 20 lines Show all unchanged lines Show 20 lines
});
$("#crop").click(function() {
canvas = cropper.getCroppedCanvas({
width: 160,
height: 160,
});
canvas = cropper.getCroppedCanvas();
var croppedImage = canvas.toDataURL(); // Get the cropped image as base64 data URL
$("#croppedImage").attr("src", croppedImage); // Set the src attribute of the image element on the main page
$("#firstImage").attr("src", croppedImage); // Set the src attribute of the image element on the main page
$("#croppedImageData").val(croppedImage); // Set the cropped image data to a hidden input field in the form
bs_modal.modal('hide'); // Close the modal
Show 20 lines Show all unchanged lines