partial update create kpi and progress bar
This commit is contained in:
263
resources/views/kpi/targets/edit.blade.php
Normal file
263
resources/views/kpi/targets/edit.blade.php
Normal file
@@ -0,0 +1,263 @@
|
||||
@extends('layouts.backapp')
|
||||
|
||||
@section('title', 'Edit Target KPI')
|
||||
|
||||
@section('styles')
|
||||
<style>
|
||||
.select2-container .select2-selection {
|
||||
height: calc(1.5em + 0.75rem + 2px);
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.25rem;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.select2-container.select2-container--focus .select2-selection {
|
||||
border-color: #80bdff;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
||||
}
|
||||
|
||||
.select2-container .select2-selection--single .select2-selection__rendered {
|
||||
padding-left: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.select2-container .select2-selection--single .select2-selection__arrow {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.select2-results__option--highlighted[aria-selected] {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Ensure Select2 is visible */
|
||||
.select2-container {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.select2-dropdown {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* Fix Select2 width */
|
||||
.select2-container--default .select2-selection--single {
|
||||
height: calc(1.5em + 0.75rem + 2px);
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
|
||||
/* Limit Select2 dropdown height */
|
||||
.select2-results__options {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Style for Select2 results */
|
||||
.select2-results__option {
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.select2-results__option:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Improve Select2 search box */
|
||||
.select2-search--dropdown .select2-search__field {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">
|
||||
<div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">
|
||||
<div class="kt-portlet kt-portlet--mobile">
|
||||
<div class="kt-portlet__head kt-portlet__head--lg">
|
||||
<div class="kt-portlet__head-label">
|
||||
<h3 class="kt-portlet__head-title">
|
||||
Edit Target KPI
|
||||
</h3>
|
||||
</div>
|
||||
<div class="kt-portlet__head-toolbar">
|
||||
<div class="kt-portlet__head-actions">
|
||||
<a href="{{ route('kpi.targets.index') }}" class="btn btn-secondary">
|
||||
<i class="fas fa-arrow-left"></i> Kembali
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kt-portlet__body">
|
||||
|
||||
<form id="kpi-form" method="POST" action="{{ route('kpi.targets.update', $target->id) }}">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="user_id" class="form-control-label">Mekanik <span class="text-danger">*</span></label>
|
||||
<select name="user_id" id="user_id" class="form-control select2" required>
|
||||
<option value="">Pilih Mekanik</option>
|
||||
@foreach($mechanics as $mechanic)
|
||||
@php
|
||||
$isSelected = old('user_id', $target->user_id) == $mechanic->id;
|
||||
@endphp
|
||||
<option value="{{ $mechanic->id }}"
|
||||
{{ $isSelected ? 'selected' : '' }}>
|
||||
{{ $mechanic->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
|
||||
@error('user_id')
|
||||
<span class="text-danger">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="target_value" class="form-control-label">Target Nilai <span class="text-danger">*</span></label>
|
||||
<input type="number" name="target_value" id="target_value" class="form-control"
|
||||
value="{{ old('target_value', $target->target_value) }}" min="1" required>
|
||||
@error('target_value')
|
||||
<span class="text-danger">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<label for="description" class="form-control-label">Deskripsi</label>
|
||||
<textarea name="description" id="description" class="form-control" rows="3"
|
||||
placeholder="Deskripsi target (opsional)">{{ old('description', $target->description) }}</textarea>
|
||||
@error('description')
|
||||
<span class="text-danger">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" name="is_active" id="is_active" class="custom-control-input"
|
||||
value="1" {{ old('is_active', $target->is_active) ? 'checked' : '' }}>
|
||||
<label class="custom-control-label" for="is_active">
|
||||
Target Aktif
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="fas fa-save"></i> Update Target
|
||||
</button>
|
||||
<a href="{{ route('kpi.targets.index') }}" class="btn btn-secondary">Kembali</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('javascripts')
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Initialize Select2 with fallback and delay
|
||||
setTimeout(function() {
|
||||
try {
|
||||
// Initialize Select2 for mechanics with search limit
|
||||
$('#user_id').select2({
|
||||
theme: 'bootstrap4',
|
||||
width: '100%',
|
||||
placeholder: 'Pilih Mekanik',
|
||||
allowClear: true,
|
||||
minimumInputLength: 1,
|
||||
maximumInputLength: 50,
|
||||
maximumResultsForSearch: 10,
|
||||
language: {
|
||||
inputTooShort: function() {
|
||||
return "Masukkan minimal 1 karakter untuk mencari";
|
||||
},
|
||||
inputTooLong: function() {
|
||||
return "Maksimal 50 karakter";
|
||||
},
|
||||
noResults: function() {
|
||||
return "Tidak ada hasil ditemukan";
|
||||
},
|
||||
searching: function() {
|
||||
return "Mencari...";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.log('Select2 not available, using regular select');
|
||||
// Fallback: ensure regular select works
|
||||
$('.select2').removeClass('select2').addClass('form-control');
|
||||
}
|
||||
}, 100);
|
||||
|
||||
// Form validation
|
||||
$('#kpi-form').on('submit', function(e) {
|
||||
var isValid = true;
|
||||
var errors = [];
|
||||
|
||||
// Clear previous errors
|
||||
$('.text-danger').remove();
|
||||
|
||||
// Validate required fields
|
||||
if (!$('#user_id').val()) {
|
||||
errors.push('Mekanik harus dipilih');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!$('#target_value').val() || $('#target_value').val() < 1) {
|
||||
errors.push('Target nilai harus diisi dan minimal 1');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (!isValid) {
|
||||
e.preventDefault();
|
||||
if (typeof Swal !== 'undefined') {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Validasi Gagal',
|
||||
html: errors.join('<br>'),
|
||||
confirmButtonText: 'OK'
|
||||
});
|
||||
} else {
|
||||
alert('Validasi Gagal:\n' + errors.join('\n'));
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user