Mengubah tampilan pada edit dan create email kantor, PIC Reviewer, PIC Admin, PIC Marketing pada Menu Basic Data -> KJPP part 1

This commit is contained in:
2024-11-06 17:46:31 +07:00
committed by putrakuningan
parent d277d7ced1
commit 669c2483f8
10 changed files with 505 additions and 86 deletions

View File

@@ -222,12 +222,30 @@
<label class="form-label max-w-56">
Email Kantor
</label>
<div class="flex flex-wrap items-baseline w-full">
<div class="flex flex-wrap items-baseline w-full gap-1.5">
<input class="input @error('email_kantor') border-danger @enderror" type="text"
name="email_kantor" value="{{ $kjpp->email_kantor ?? old('email_kantor') }}">
@error('email_kantor')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
<div id="detail_email_kantor" class="flex flex-wrap items-center w-full gap-2">
<div class="flex flex-col lg:flex-row items-center w-full">
@if (isset($kjpp->detail_email_kantor))
@foreach (json_decode($kjpp->detail_email_kantor) as $detail)
<input class="input @error('detail_email_kantor') border-danger @enderror"
type="text" name="detail_email_kantor[email_kantor][]"
value="{{ $detail->email_kantor ?? old('detail_email_kantor') }}">
@error('detail_email_kantor')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
<button type="button"
class="btn btn-danger btn-xs delete-button">Hapus</button>
@endforeach
@endif
</div>
</div>
<button type="button" id="tambah_email_kantor" class="btn btn-primary btn-xs">Tambah
Email Kantor</button>
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
@@ -277,6 +295,53 @@
@enderror
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap">
<div id="detail_nama_pic_reviewer" class="flex flex-wrap items-baseline w-full gap-2.5">
@if (isset($kjpp->detail_nama_pic_reviewer))
@foreach (json_decode($kjpp->detail_nama_pic_reviewer) as $detail)
<div class="flex flex-col lg:flex-row gap-2 items-baseline lg:items-center w-full">
<label class="form-label max-w-56">
Nama PIC Reviewer
</label>
<div class="flex flex-wrap items-baseline w-full">
<input
class="input @error('detail_nama_pic_reviewer') border-danger @enderror"
type="text" name="detail_nama_pic_reviewer[nama_pic_reviewer][]"
value="{{ $detail->detail_nama_pic_reviewer ?? old('detail_nama_pic_reviewer') }}">
@error('detail_nama_pic_reviewer')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
@foreach (json_decode($kjpp->detail_nomor_hp_pic_reviewer) as $detail)
<label class="form-label max-w-56">
Nomor HP PIC Reviewer
</label>
<div class="flex flex-wrap items-baseline w-full">
<input
class="input @error('detail_nomor_hp_pic_reviewer') border-danger @enderror"
type="text"
name="detail_nomor_hp_pic_reviewer[nomor_hp_pic_reviewer][]"
value="{{ $detail->nomor_hp_pic_reviewer ?? old('detail_nomor_hp_pic_reviewer') }}">
@error('detail_nomor_hp_pic_reviewer')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
@endforeach
<button type="button" class="btn btn-danger btn-xs delete-button">Hapus</button>
</div>
@endforeach
@endif
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">
&nbsp;
</label>
<div class="flex flex-wrap items-baseline w-full">
<button type="button" id="tambah_nama_pic_reviewer" class="btn btn-primary btn-xs">Tambah
PIC Reviewer</button>
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">
Nama PIC Admin
@@ -300,28 +365,116 @@
@enderror
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap">
<div id="detail_nama_pic_admin" class="flex flex-wrap items-baseline w-full gap-2.5">
@if (isset($kjpp->detail_nama_pic_admin))
@foreach (json_decode($kjpp->detail_nama_pic_admin) as $detail)
<div class="flex flex-col lg:flex-row gap-2 items-baseline lg:items-center w-full">
<label class="form-label max-w-56">
Nama PIC Admin
</label>
<div class="flex flex-wrap items-baseline w-full">
<input class="input @error('detail_nama_pic_admin') border-danger @enderror"
type="text" name="detail_nama_pic_admin[nama_pic_admin][]"
value="{{ $detail->detail_nama_pic_admin ?? old('detail_nama_pic_admin') }}">
@error('detail_nama_pic_admin')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
@foreach (json_decode($kjpp->detail_nomor_hp_pic_admin) as $detail)
<label class="form-label max-w-56">
Nomor HP PIC Admin
</label>
<div class="flex flex-wrap items-baseline w-full">
<input
class="input @error('detail_nomor_hp_pic_admin') border-danger @enderror"
type="text" name="detail_nomor_hp_pic_admin[nomor_hp_pic_admin][]"
value="{{ $detail->nomor_hp_pic_admin ?? old('detail_nomor_hp_pic_admin') }}">
@error('detail_nomor_hp_pic_admin')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
@endforeach
<button type="button" class="btn btn-danger btn-xs delete-button">Hapus</button>
</div>
@endforeach
@endif
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">
&nbsp;
</label>
<div class="flex flex-wrap items-baseline w-full">
<button type="button" id="tambah_nama_pic_admin" class="btn btn-primary btn-xs">Tambah
PIC Admin</button>
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">
Nama PIC Marketing
</label>
<div class="flex flex-wrap items-baseline w-full">
<input class="input @error('nama_pic_marketing') border-danger @enderror" type="text"
name="nama_pic_marketing"
value="{{ $kjpp->nama_pic_marketing ?? old('nama_pic_marketing') }}">
@error('nama_pic_marketing')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
<input class="input @error('nama_pic_marketing') border-danger @enderror" type="text"
name="nama_pic_marketing"
value="{{ $kjpp->nama_pic_marketing ?? old('nama_pic_marketing') }}">
@error('nama_pic_marketing')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
<label class="form-label max-w-56">
Nomor HP PIC Marketing
</label>
<input class="input @error('nomor_hp_pic_marketing') border-danger @enderror" type="text"
name="nomor_hp_pic_marketing"
value="{{ $kjpp->nomor_hp_pic_marketing ?? old('nomor_hp_pic_marketing') }}">
@error('nomor_hp_pic_marketing')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap">
<div id="detail_nama_pic_marketing" class="flex flex-wrap items-baseline w-full gap-2.5">
@if (isset($kjpp->detail_nama_pic_marketing))
@foreach (json_decode($kjpp->detail_nama_pic_marketing) as $detail)
<div class="flex flex-col lg:flex-row gap-2 items-baseline lg:items-center w-full">
<label class="form-label max-w-56">
Nama PIC Marketing
</label>
<div class="flex flex-wrap items-baseline w-full">
<input
class="input @error('detail_nama_pic_marketing') border-danger @enderror"
type="text" name="detail_nama_pic_marketing[nama_pic_marketing][]"
value="{{ $detail->detail_nama_pic_marketing ?? old('detail_nama_pic_marketing') }}">
@error('detail_nama_pic_marketing')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
@foreach (json_decode($kjpp->detail_nomor_hp_pic_marketing) as $detail)
<label class="form-label max-w-56">
Nomor HP PIC Marketing
</label>
<div class="flex flex-wrap items-baseline w-full">
<input
class="input @error('detail_nomor_hp_pic_marketing') border-danger @enderror"
type="text"
name="detail_nomor_hp_pic_marketing[nomor_hp_pic_marketing][]"
value="{{ $detail->nomor_hp_pic_marketing ?? old('detail_nomor_hp_pic_marketing') }}">
@error('detail_nomor_hp_pic_marketing')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
@endforeach
<button type="button" class="btn btn-danger btn-xs delete-button">Hapus</button>
</div>
@endforeach
@endif
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">
&nbsp;
</label>
<div class="flex flex-wrap items-baseline w-full">
<input class="input @error('nomor_hp_pic_marketing') border-danger @enderror"
type="text" name="nomor_hp_pic_marketing"
value="{{ $kjpp->nomor_hp_pic_marketing ?? old('nomor_hp_pic_marketing') }}">
@error('nomor_hp_pic_marketing')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
<button type="button" id="tambah_nama_pic_marketing" class="btn btn-primary btn-xs">Tambah
PIC Marketing</button>
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
@@ -397,3 +550,5 @@
</form>
</div>
@endsection
@include('lpj::kjpp.scripts.index')

View File

@@ -0,0 +1,107 @@
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
const emailKantorDiv = document.getElementById('detail_email_kantor');
function addDeleteListeners() {
document.querySelectorAll(".delete-button").forEach(button => {
button.addEventListener("click", function() {
this.closest(
".flex.flex-col.lg\\:flex-row.gap-2.items-baseline.lg\\:items-center.w-full"
)
.remove();
});
});
}
document.getElementById("tambah_email_kantor").addEventListener("click", function() {
const newDiv = document.createElement("div");
newDiv.className = "flex flex-col lg:flex-row gap-2 items-baseline lg:items-center w-full";
newDiv.innerHTML = `
<div class="flex flex-wrap items-baseline w-full">
<input class="input" type="text" name="detail_email_kantor[email_kantor][]" value="">
</div>
<button type="button" class="btn btn-danger btn-xs delete-button">Hapus</button>
`;
emailKantorDiv.appendChild(newDiv);
addDeleteListeners();
});
const namaPicReviewerDiv = document.getElementById('detail_nama_pic_reviewer');
document.getElementById("tambah_nama_pic_reviewer").addEventListener("click", function() {
const newDiv = document.createElement("div");
newDiv.className = "flex flex-col lg:flex-row gap-2 items-baseline lg:items-center w-full";
newDiv.innerHTML = `
<label class="form-label max-w-56">
Nama PIC Reviewer
</label>
<div class="flex flex-wrap items-baseline w-full">
<input class="input" type="text" name="detail_nama_pic_reviewer[nama_pic_reviewer][]" value="">
</div>
<label class="form-label max-w-56">
Nomor HP PIC Reviewer
</label>
<div class="flex flex-wrap items-baseline w-full">
<input class="input" type="text" name="detail_nomor_hp_pic_reviewer[nomor_hp_pic_reviewer][]" value="">
</div>
<button type="button" class="btn btn-danger btn-xs delete-button">Hapus</button>
`;
namaPicReviewerDiv.appendChild(newDiv);
addDeleteListeners();
})
const namaPicAdminDiv = document.getElementById('detail_nama_pic_admin');
document.getElementById("tambah_nama_pic_admin").addEventListener("click", function() {
const newDiv = document.createElement("div");
newDiv.className = "flex flex-col lg:flex-row gap-2 items-baseline lg:items-center w-full";
newDiv.innerHTML = `
<label class="form-label max-w-56">
Nama PIC Admin
</label>
<div class="flex flex-wrap items-baseline w-full">
<input class="input" type="text" name="detail_nama_pic_admin[nama_pic_admin][]" value="">
</div>
<label class="form-label max-w-56">
Nomor HP PIC Admin
</label>
<div class="flex flex-wrap items-baseline w-full">
<input class="input" type="text" name="detail_nomor_hp_pic_admin[nomor_hp_pic_admin][]" value="">
</div>
<button type="button" class="btn btn-danger btn-xs delete-button">Hapus</button>
`;
namaPicAdminDiv.appendChild(newDiv);
addDeleteListeners();
})
const namaPicMarketingDiv = document.getElementById('detail_nama_pic_marketing');
document.getElementById("tambah_nama_pic_marketing").addEventListener("click", function() {
const newDiv = document.createElement("div");
newDiv.className = "flex flex-col lg:flex-row gap-2 items-baseline lg:items-center w-full";
newDiv.innerHTML = `
<label class="form-label max-w-56">
Nama PIC Marketing
</label>
<div class="flex flex-wrap items-baseline w-full">
<input class="input" type="text" name="detail_nama_pic_marketing[nama_pic_marketing][]" value="">
</div>
<label class="form-label max-w-56">
Nomor HP PIC Marketing
</label>
<div class="flex flex-wrap items-baseline w-full">
<input class="input" type="text" name="detail_nomor_hp_pic_marketing[nomor_hp_pic_marketing][]" value="">
</div>
<button type="button" class="btn btn-danger btn-xs delete-button">Hapus</button>
`;
namaPicMarketingDiv.appendChild(newDiv);
addDeleteListeners();
})
});
</script>
@endpush