374 lines
12 KiB
PHP
Executable File
374 lines
12 KiB
PHP
Executable File
@extends('layouts.backapp')
|
|
|
|
@section('content')
|
|
|
|
<style type="text/css">
|
|
#nama{
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Action button flex layout */
|
|
.d-flex.flex-row.gap-1 {
|
|
display: flex !important;
|
|
flex-direction: row !important;
|
|
gap: 0.25rem !important;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.d-flex.flex-row.gap-1 .btn {
|
|
white-space: nowrap;
|
|
margin: 0;
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
border-radius: 0.2rem;
|
|
}
|
|
|
|
.d-flex.flex-row.gap-1 .btn i {
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
/* Ensure DataTables doesn't break flex layout */
|
|
.dataTables_wrapper .dataTables_scrollBody .d-flex {
|
|
display: flex !important;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.d-flex.flex-row.gap-1 {
|
|
flex-direction: column !important;
|
|
gap: 0.125rem !important;
|
|
}
|
|
|
|
.d-flex.flex-row.gap-1 .btn {
|
|
width: 100%;
|
|
margin-bottom: 0.125rem;
|
|
}
|
|
}
|
|
|
|
/* Modal and Form Styling */
|
|
.modal-header {
|
|
border-bottom: 1px solid #dee2e6;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.modal-header h5 {
|
|
font-weight: 600;
|
|
color: #495057;
|
|
}
|
|
|
|
.form-group label {
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.form-group label i {
|
|
color: #6c757d;
|
|
}
|
|
|
|
.form-control {
|
|
border-radius: 0.375rem;
|
|
border: 1px solid #ced4da;
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: #007bff;
|
|
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
|
}
|
|
|
|
.btn {
|
|
border-radius: 0.375rem;
|
|
font-weight: 500;
|
|
transition: all 0.15s ease-in-out;
|
|
}
|
|
|
|
.btn i {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Required field indicator */
|
|
.text-danger {
|
|
color: #dc3545 !important;
|
|
}
|
|
|
|
/* Placeholder styling */
|
|
.form-control::placeholder {
|
|
color: #6c757d;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Select2 Styling */
|
|
.select2-container--default .select2-selection--single {
|
|
border: 1px solid #ced4da;
|
|
border-radius: 0.375rem;
|
|
height: 38px;
|
|
line-height: 36px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
|
line-height: 36px;
|
|
padding-left: 12px;
|
|
padding-right: 30px;
|
|
color: #495057;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__placeholder {
|
|
color: #6c757d;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
|
height: 36px;
|
|
width: 30px;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__clear {
|
|
color: #6c757d;
|
|
margin-right: 25px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.select2-container--default.select2-container--focus .select2-selection--single {
|
|
border-color: #007bff;
|
|
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
|
}
|
|
|
|
.select2-dropdown {
|
|
border: 1px solid #ced4da;
|
|
border-radius: 0.375rem;
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
background-color: #fff;
|
|
}
|
|
|
|
.select2-container--default .select2-search--dropdown .select2-search__field {
|
|
border: 1px solid #ced4da;
|
|
border-radius: 0.25rem;
|
|
padding: 8px 12px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
|
|
border-color: #007bff;
|
|
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
|
outline: none;
|
|
}
|
|
|
|
.select2-container--default .select2-results__option {
|
|
padding: 8px 12px;
|
|
font-size: 14px;
|
|
color: #495057;
|
|
}
|
|
|
|
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
}
|
|
|
|
.select2-container--default .select2-results__option[aria-selected=true] {
|
|
background-color: #e9ecef;
|
|
color: #495057;
|
|
}
|
|
|
|
.select2-container--default .select2-results__option[aria-selected=true]:hover {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
}
|
|
|
|
.select2-container {
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Ensure Select2 works properly in modal */
|
|
.modal .select2-container {
|
|
z-index: 9999;
|
|
}
|
|
|
|
.modal .select2-dropdown {
|
|
z-index: 9999;
|
|
}
|
|
|
|
/* Fix Select2 height to match form controls */
|
|
.select2-container--default .select2-selection--single {
|
|
height: calc(1.5em + 0.75rem + 2px);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
|
line-height: 1.5;
|
|
padding-top: 0.375rem;
|
|
padding-bottom: 0.375rem;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
|
height: calc(1.5em + 0.75rem);
|
|
top: 0;
|
|
}
|
|
|
|
/* SweetAlert Icon Centering */
|
|
.swal2-icon {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
margin: 0 auto !important;
|
|
}
|
|
|
|
.swal2-icon .swal2-icon-content {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
.swal2-popup {
|
|
text-align: center !important;
|
|
}
|
|
|
|
.swal2-title {
|
|
text-align: center !important;
|
|
}
|
|
|
|
.swal2-content {
|
|
text-align: center !important;
|
|
}
|
|
|
|
.swal2-actions {
|
|
justify-content: center !important;
|
|
}
|
|
</style>
|
|
|
|
<div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
|
|
<div class="kt-portlet__head kt-portlet__head--lg">
|
|
<div class="kt-portlet__head-label">
|
|
<span class="kt-portlet__head-icon">
|
|
<i class="kt-font-brand flaticon2-line-chart"></i>
|
|
</span>
|
|
<h3 class="kt-portlet__head-title">
|
|
Pekerjaan
|
|
</h3>
|
|
</div>
|
|
@can('create', $menus['work.index'])
|
|
<div class="kt-portlet__head-toolbar">
|
|
<div class="kt-portlet__head-wrapper">
|
|
<div class="kt-portlet__head-actions">
|
|
<button type="button" class="btn btn-bold btn-label-brand" id="addWork"> Tambah </button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endcan
|
|
</div>
|
|
|
|
<div class="kt-portlet__body">
|
|
<div class="table-responsive">
|
|
<!--begin: Datatable -->
|
|
<table class="table table-striped table-bordered table-hover table-checkable" id="kt_table">
|
|
<thead>
|
|
<tr>
|
|
<th>Kategori</th>
|
|
<th>Pekerjaan</th>
|
|
<th>Short Name</th>
|
|
<th>Deskripsi</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
<!--end: Datatable -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--begin::Modal-->
|
|
<div class="modal fade" id="workModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<form id="workForm" class="kt-form">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="modalHeading">
|
|
<i class="fa fa-plus mr-2"></i>
|
|
Tambah Pekerjaan
|
|
</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="name" class="font-weight-bold">
|
|
<i class="fa fa-tag mr-1"></i>
|
|
Nama Pekerjaan <span class="text-danger">*</span>
|
|
</label>
|
|
<input type="text" class="form-control inputUppercase" id="name" name="name"
|
|
placeholder="Masukan Nama Pekerjaan" value="" required="" autocomplete="off" />
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="shortname" class="font-weight-bold">
|
|
<i class="fa fa-code mr-1"></i>
|
|
Short Name <span class="text-danger">*</span>
|
|
</label>
|
|
<input type="text" class="form-control inputUppercase" id="shortname" name="shortname"
|
|
placeholder="Masukan Short Name" value="" required="" autocomplete="off" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="category_id" class="font-weight-bold">
|
|
<i class="fa fa-folder mr-1"></i>
|
|
Kategori <span class="text-danger">*</span>
|
|
</label>
|
|
<select name="category_id" id="category_id" class="form-control select2" required>
|
|
<option value="">-- Pilih Kategori --</option>
|
|
@foreach ($categories as $category)
|
|
<option value="{{ $category->id }}">{{ $category->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="desc" class="font-weight-bold">
|
|
<i class="fa fa-align-left mr-1"></i>
|
|
Deskripsi Pekerjaan
|
|
</label>
|
|
<textarea name="desc" id="desc" rows="4" class="form-control"
|
|
placeholder="Masukan deskripsi pekerjaan (opsional)"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">
|
|
Batal
|
|
</button>
|
|
<button type="submit" class="btn btn-primary" id="saveBtn" value="create">
|
|
Simpan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!--end::Modal-->
|
|
|
|
|
|
<input type="hidden" name="ajax_url" value="{{ route('work.index') }}">
|
|
<input type="hidden" name="store_url" value="{{ route('work.store') }}">
|
|
|
|
@endsection
|
|
|
|
@section('javascripts')
|
|
<script src="{{ url('js/pages/back/master/work.js') }}" type="text/javascript"></script>
|
|
@endsection |