187 lines
12 KiB
PHP
187 lines
12 KiB
PHP
@extends('layouts.vertical', ["page_title"=> "Add & Edit Action Sheets"])
|
|
|
|
@section('css')
|
|
<link href="{{asset('assets/libs/select2/select2.min.css')}}" rel="stylesheet" type="text/css" />
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="container-fluid">
|
|
@if(session()->has('message'))
|
|
<div class="alert alert-success mt-3">
|
|
{{ session()->get('message') }}
|
|
</div>
|
|
@endif
|
|
@if(session()->has('error'))
|
|
<div class="alert alert-danger mt-3">
|
|
{{ session()->get('error') }}
|
|
</div>
|
|
@endif
|
|
<div class="row mt-3">
|
|
<div class="col-xl-12">
|
|
<div class="card">
|
|
<form method="post" action="" id="form-actionsheet" enctype="multipart/form-data">
|
|
@csrf
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<h4 class="page-title">Add / Edit {{$title}}</h4>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="float-end">
|
|
<a href="{{$base_url}}s" class="btn btn-dark waves-effect waves-light">Back</a>
|
|
<button type="submit" class="btn btn-success waves-effect waves-light">Submit</button>
|
|
</div>
|
|
</div>
|
|
@foreach($fields as $field => $props)
|
|
@if($props['type'] != 'hidden')
|
|
<div class="col-md-{{isset($props['fullwidth'])?'12':'6'}} mb-3">
|
|
<label for="field-{{$field}}" class="form-label">{{$props['title']}} {!!isset($props['required'])&&$props['required'] ? '<span class="text-danger">*</span>':''!!}</label>
|
|
@endif
|
|
@switch($props['type'])
|
|
@case('hidden')
|
|
<input type="hidden" id="field-{{$field}}" name="{{$field}}" value="{{$mode=='edit' && isset($item->{$field}) ? $item->{$field} : ''}}">
|
|
@break
|
|
@case('text')
|
|
<input type="text" id="field-{{$field}}" name="{{$field}}" class="form-control" placeholder="Enter {{$props['title']}}" value="{{$mode=='edit' && isset($item->{$field}) ? $item->{$field} : ''}}" {{isset($props['required']) && $props['required'] ? 'required' : ''}}>
|
|
@break
|
|
@case('number')
|
|
<input type="number" id="field-{{$field}}" name="{{$field}}" class="form-control" placeholder="Enter {{$props['title']}}" value="{{$mode=='edit' && isset($item->{$field}) ? $item->{$field} : ($props['default'] ?? '')}}" {{isset($props['required']) && $props['required'] ? 'required' : ''}}>
|
|
@break
|
|
@case('date')
|
|
<input type="date" id="field-{{$field}}" name="{{$field}}" class="form-control" value="{{$mode=='edit' && isset($item->{$field}) ? $item->{$field} : ''}}" {{isset($props['required']) && $props['required'] ? 'required' : ''}}>
|
|
@break
|
|
@case('textarea')
|
|
<textarea id="field-{{$field}}" name="{{$field}}" class="form-control {{ $field === 'html_format' ? 'html-format' : '' }}" rows="{{ $field === 'html_format' ? 16 : 4 }}" placeholder="Enter {{$props['title']}}" {{isset($props['required']) && $props['required'] ? 'required' : ''}}>{{$mode=='edit' && isset($item->{$field}) ? $item->{$field} : ''}}</textarea>
|
|
@if($field === 'html_format')
|
|
<small class="text-muted">Use each metric id as a placeholder, for example {Ciphaler}.</small>
|
|
@endif
|
|
@break
|
|
@case('select')
|
|
@php
|
|
$selected = ($mode == 'edit' && isset($item->{$field}) && $item->{$field} !== '') ? $item->{$field} : ($props['default'] ?? '');
|
|
@endphp
|
|
<select class="form-control" id="field-{{$field}}" name="{{$field}}" {{isset($props['required']) && $props['required'] ? 'required' : ''}}>
|
|
<option value=""> -- Select {{$props['title']}} -- </option>
|
|
@foreach($props['values'] as $k => $v)
|
|
<option value="{{$k}}" {{ (string) $selected === (string) $k ? 'selected' : '' }}>{{$v}}</option>
|
|
@endforeach
|
|
</select>
|
|
@break
|
|
@case('multiselect')
|
|
<select class="form-control select2-multiple" data-toggle="select2" data-width="100%" multiple="multiple" data-placeholder="Choose {{$props['title']}}" id="field-{{$field}}" name="{{$field}}[]" {{isset($props['required']) && $props['required'] ? 'required' : ''}}>
|
|
@foreach($props['values'] as $k => $v)
|
|
<option value="{{$k}}" {{$mode=='edit' && isset($item->{$field}) && is_array($item->{$field}) && in_array($k, $item->{$field}) ? 'selected' : ''}}>{{$v}}</option>
|
|
@endforeach
|
|
</select>
|
|
@break
|
|
@case('sheet_metrics')
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<small class="text-muted">Metric id is the HTML placeholder key.</small>
|
|
<button type="button" class="btn btn-info btn-xs" id="btn-add-metric">Add Metric</button>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table mb-0" id="table-sheet-metrics">
|
|
<thead>
|
|
<tr>
|
|
<th>Id</th>
|
|
<th>Title</th>
|
|
<th>Label</th>
|
|
<th>Metrics</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@php
|
|
$sheetMetrics = ($mode == 'edit' && isset($item->metrics) && is_array($item->metrics)) ? $item->metrics : [];
|
|
@endphp
|
|
@foreach($sheetMetrics as $i => $map)
|
|
<tr>
|
|
<td><input type="text" name="metrics[{{$i}}][id]" class="form-control" value="{{ $map['id'] ?? '' }}" placeholder="Ciphaler"></td>
|
|
<td><input type="text" name="metrics[{{$i}}][title]" class="form-control" value="{{ $map['title'] ?? '' }}"></td>
|
|
<td><input type="text" name="metrics[{{$i}}][label]" class="form-control" value="{{ $map['label'] ?? '' }}"></td>
|
|
<td>
|
|
<select class="form-control metric-ids-select" data-width="100%" multiple="multiple" data-placeholder="Choose metrics" name="metrics[{{$i}}][metric_ids][]">
|
|
@foreach($props['metrics'] as $k => $v)
|
|
<option value="{{$k}}" {{ isset($map['metric_ids']) && is_array($map['metric_ids']) && in_array($k, $map['metric_ids']) ? 'selected' : '' }}>{{$v}}</option>
|
|
@endforeach
|
|
</select>
|
|
</td>
|
|
<td><button type="button" class="btn btn-danger waves-effect waves-light btn-remove-metric"><i class="mdi mdi-close"></i></button></td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@break
|
|
@endswitch
|
|
@if($props['type'] != 'hidden')
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
<div class="col-md-12 mb-3">
|
|
<div class="float-end">
|
|
<a href="{{$base_url}}s" class="btn btn-dark waves-effect waves-light">Back</a>
|
|
<button type="submit" class="btn btn-success waves-effect waves-light">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.html-format { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; }
|
|
</style>
|
|
@endsection
|
|
|
|
@section('script')
|
|
<script src="{{asset('assets/libs/select2/select2.min.js')}}"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
var metricOptions = @json($fields['metrics']['metrics'] ?? []);
|
|
var rowIndex = $('#table-sheet-metrics tbody tr').length;
|
|
|
|
$('[data-toggle="select2"]').select2();
|
|
|
|
function initMetricSelects($context) {
|
|
($context || $(document)).find('select.metric-ids-select').each(function() {
|
|
var $select = $(this);
|
|
if ($select.hasClass('select2-hidden-accessible')) {
|
|
$select.select2('destroy');
|
|
}
|
|
$select.select2({
|
|
width: '100%',
|
|
placeholder: 'Choose metrics'
|
|
});
|
|
});
|
|
}
|
|
|
|
initMetricSelects();
|
|
|
|
$('#btn-add-metric').on('click', function() {
|
|
var index = rowIndex++;
|
|
var options = '';
|
|
Object.keys(metricOptions).forEach(function(id) {
|
|
options += '<option value="' + $('<div>').text(id).html() + '">' + $('<div>').text(metricOptions[id]).html() + '</option>';
|
|
});
|
|
var row = ''
|
|
+ '<tr>'
|
|
+ '<td><input type="text" name="metrics[' + index + '][id]" class="form-control" placeholder="Ciphaler"></td>'
|
|
+ '<td><input type="text" name="metrics[' + index + '][title]" class="form-control"></td>'
|
|
+ '<td><input type="text" name="metrics[' + index + '][label]" class="form-control"></td>'
|
|
+ '<td><select class="form-control metric-ids-select" multiple="multiple" name="metrics[' + index + '][metric_ids][]">' + options + '</select></td>'
|
|
+ '<td><button type="button" class="btn btn-danger waves-effect waves-light btn-remove-metric"><i class="mdi mdi-close"></i></button></td>'
|
|
+ '</tr>';
|
|
$('#table-sheet-metrics tbody').append(row);
|
|
initMetricSelects($('#table-sheet-metrics tbody tr').last());
|
|
});
|
|
|
|
$('#table-sheet-metrics').on('click', '.btn-remove-metric', function() {
|
|
$(this).closest('tr').remove();
|
|
});
|
|
});
|
|
</script>
|
|
@endsection
|