Initial import of animal_management module
This commit is contained in:
Kelin Rescue Hub
534
views/animals/create.php
Normal file
534
views/animals/create.php
Normal file
@@ -0,0 +1,534 @@
|
||||
<?php
|
||||
|
||||
use humhub\modules\animal_management\models\forms\AnimalForm;
|
||||
use humhub\modules\animal_management\models\forms\DisplaySettingsForm;
|
||||
use humhub\modules\animal_management\models\Animal;
|
||||
use humhub\modules\rescue_foundation\components\UploadStandards;
|
||||
use humhub\modules\space\models\Space;
|
||||
use humhub\widgets\Button;
|
||||
use yii\bootstrap\ActiveForm;
|
||||
use yii\helpers\Html;
|
||||
|
||||
/* @var AnimalForm $model */
|
||||
/* @var Space $space */
|
||||
/* @var bool $isEdit */
|
||||
/* @var Animal|null $animal */
|
||||
?>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<?php if (!empty($isEdit)): ?>
|
||||
<?= Yii::t('AnimalManagementModule.base', '<strong>Edit Animal</strong> Profile') ?>
|
||||
<?php else: ?>
|
||||
<?= Yii::t('AnimalManagementModule.base', '<strong>New Animal</strong> Intake') ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]); ?>
|
||||
|
||||
<?= $form->errorSummary($model, ['showAllErrors' => true]) ?>
|
||||
|
||||
<?php
|
||||
$customDefinitions = $model->getCustomFieldDefinitions();
|
||||
$galleryImageOptions = $model->getGalleryImageOptions();
|
||||
$galleryImageUrls = array_keys($galleryImageOptions);
|
||||
|
||||
$knownProfileFieldKeys = [
|
||||
'dob',
|
||||
'age',
|
||||
'rescue',
|
||||
'lineage',
|
||||
'backstory',
|
||||
'previous_owner_user_id',
|
||||
'previous_owner_name',
|
||||
'previous_owner_business_name',
|
||||
'previous_owner_street_address',
|
||||
'previous_owner_city',
|
||||
'previous_owner_state',
|
||||
'previous_owner_zip',
|
||||
'previous_owner_cell_phone',
|
||||
'previous_owner_business_phone',
|
||||
'previous_owner_email',
|
||||
];
|
||||
|
||||
$renderCustomField = static function (string $fieldKey, AnimalForm $model, array $definitions): string {
|
||||
if (!isset($definitions[$fieldKey])) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$definition = $definitions[$fieldKey];
|
||||
$inputType = (string)$definition['input_type'];
|
||||
$label = (string)$definition['label'];
|
||||
if ((int)$definition['required'] === 1) {
|
||||
$label .= ' *';
|
||||
}
|
||||
|
||||
$fieldName = "AnimalForm[customFields][$fieldKey]";
|
||||
$fieldValue = $model->customFields[$fieldKey] ?? '';
|
||||
|
||||
ob_start();
|
||||
?>
|
||||
<?php if ($inputType === 'textarea'): ?>
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="animalform-customfields-<?= Html::encode($fieldKey) ?>"><?= Html::encode($label) ?></label>
|
||||
<?= Html::textarea($fieldName, (string)$fieldValue, ['class' => 'form-control', 'rows' => 3, 'id' => "animalform-customfields-$fieldKey"]) ?>
|
||||
</div>
|
||||
<?php elseif ($inputType === 'boolean'): ?>
|
||||
<div class="checkbox" style="margin-bottom:10px;">
|
||||
<label>
|
||||
<?= Html::hiddenInput($fieldName, '0') ?>
|
||||
<?= Html::checkbox($fieldName, !empty($fieldValue), ['value' => '1']) ?>
|
||||
<?= Html::encode($label) ?>
|
||||
</label>
|
||||
</div>
|
||||
<?php elseif ($inputType === 'select'): ?>
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="animalform-customfields-<?= Html::encode($fieldKey) ?>"><?= Html::encode($label) ?></label>
|
||||
<?= Html::dropDownList(
|
||||
$fieldName,
|
||||
(string)$fieldValue,
|
||||
$model->getCustomFieldSelectOptions($fieldKey),
|
||||
['class' => 'form-control', 'prompt' => Yii::t('AnimalManagementModule.base', 'Select...'), 'id' => "animalform-customfields-$fieldKey"]
|
||||
) ?>
|
||||
</div>
|
||||
<?php elseif ($inputType === 'number'): ?>
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="animalform-customfields-<?= Html::encode($fieldKey) ?>"><?= Html::encode($label) ?></label>
|
||||
<?= Html::input('number', $fieldName, (string)$fieldValue, ['class' => 'form-control', 'step' => 'any', 'id' => "animalform-customfields-$fieldKey"]) ?>
|
||||
</div>
|
||||
<?php elseif ($inputType === 'date'): ?>
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="animalform-customfields-<?= Html::encode($fieldKey) ?>"><?= Html::encode($label) ?></label>
|
||||
<?= Html::input('date', $fieldName, (string)$fieldValue, ['class' => 'form-control', 'id' => "animalform-customfields-$fieldKey"]) ?>
|
||||
</div>
|
||||
<?php elseif ($inputType === 'datetime'): ?>
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="animalform-customfields-<?= Html::encode($fieldKey) ?>"><?= Html::encode($label) ?></label>
|
||||
<?= Html::input('datetime-local', $fieldName, (string)$fieldValue, ['class' => 'form-control', 'id' => "animalform-customfields-$fieldKey"]) ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="animalform-customfields-<?= Html::encode($fieldKey) ?>"><?= Html::encode($label) ?></label>
|
||||
<?= Html::textInput($fieldName, (string)$fieldValue, ['class' => 'form-control', 'id' => "animalform-customfields-$fieldKey"]) ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php
|
||||
return (string)ob_get_clean();
|
||||
};
|
||||
?>
|
||||
|
||||
<div class="panel panel-default" style="margin-bottom:14px;">
|
||||
<div class="panel-heading"><strong><?= Yii::t('AnimalManagementModule.base', 'Profile & Cover Images') ?></strong></div>
|
||||
<div class="panel-body" style="padding-bottom:8px;">
|
||||
<div class="help-block" style="margin-top:0;">
|
||||
<?= Yii::t('AnimalManagementModule.base', 'Tap the edit icon on either image to choose from gallery thumbnails or upload from device camera roll.') ?>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6" style="margin-bottom:10px;">
|
||||
<div id="animal-cover-preview" style="position:relative;border-radius:10px;overflow:hidden;background:#eef1f4;min-height:180px;">
|
||||
<?php if ($model->getExistingCoverImagePath()): ?>
|
||||
<img src="<?= Html::encode($model->getExistingCoverImagePath()) ?>" alt="<?= Yii::t('AnimalManagementModule.base', 'Cover Image') ?>" style="width:100%;height:220px;object-fit:cover;display:block;">
|
||||
<?php else: ?>
|
||||
<div style="height:220px;display:flex;align-items:center;justify-content:center;color:#9ba5af;">
|
||||
<i class="fa fa-image fa-3x"></i>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#animal-cover-image-manage-modal" style="position:absolute;top:10px;right:10px;border-radius:999px;">
|
||||
<i class="fa fa-pencil"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div style="margin-top:6px;font-weight:600;"><?= Yii::t('AnimalManagementModule.base', 'Cover Image') ?></div>
|
||||
</div>
|
||||
<div class="col-sm-6" style="margin-bottom:10px;">
|
||||
<div id="animal-profile-preview" style="position:relative;border-radius:10px;overflow:hidden;background:#eef1f4;min-height:180px;">
|
||||
<?php if ($model->getExistingProfileImagePath()): ?>
|
||||
<img src="<?= Html::encode($model->getExistingProfileImagePath()) ?>" alt="<?= Yii::t('AnimalManagementModule.base', 'Profile Image') ?>" style="width:100%;height:220px;object-fit:cover;display:block;">
|
||||
<?php else: ?>
|
||||
<div style="height:220px;display:flex;align-items:center;justify-content:center;color:#9ba5af;">
|
||||
<i class="fa fa-user-circle fa-3x"></i>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#animal-profile-image-manage-modal" style="position:absolute;top:10px;right:10px;border-radius:999px;">
|
||||
<i class="fa fa-pencil"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div style="margin-top:6px;font-weight:600;"><?= Yii::t('AnimalManagementModule.base', 'Profile Image') ?></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:none;">
|
||||
<?= $form->field($model, 'coverImageGalleryPath')->hiddenInput()->label(false) ?>
|
||||
<?= $form->field($model, 'profileImageGalleryPath')->hiddenInput()->label(false) ?>
|
||||
<?= $form->field($model, 'coverImageFile')->fileInput(['accept' => 'image/*']) ?>
|
||||
<?= $form->field($model, 'profileImageFile')->fileInput(['accept' => 'image/*']) ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="panel panel-default" style="margin-bottom:14px;">
|
||||
<div class="panel-heading"><strong><?= Yii::t('AnimalManagementModule.base', 'Details') ?></strong></div>
|
||||
<div class="panel-body" style="padding-bottom:8px;">
|
||||
<div class="row">
|
||||
<div class="col-sm-6"><?php if ($model->isFieldActive('name')) { echo $form->field($model, 'name')->textInput(['maxlength' => 190]); } ?></div>
|
||||
<div class="col-sm-6"><?php if ($model->isFieldActive('species')) { echo $form->field($model, 'species')->textInput(['maxlength' => 120]); } ?></div>
|
||||
<div class="col-sm-6"><?php if ($model->isFieldActive('breed')) { echo $form->field($model, 'breed')->textInput(['maxlength' => 120]); } ?></div>
|
||||
<div class="col-sm-6"><?php if ($model->isFieldActive('sex')) { echo $form->field($model, 'sex')->textInput(['maxlength' => 32]); } ?></div>
|
||||
<div class="col-sm-6"><?= $renderCustomField('dob', $model, $customDefinitions) ?></div>
|
||||
<div class="col-sm-6"><?= $renderCustomField('age', $model, $customDefinitions) ?></div>
|
||||
<div class="col-sm-6"><?php if ($model->isFieldActive('status')) { echo $form->field($model, 'status')->dropDownList($model->getStatusOptions()); } ?></div>
|
||||
<div class="col-sm-6"><?php if ($model->isFieldActive('in_possession')) { echo $form->field($model, 'in_possession')->checkbox(); } ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default" style="margin-bottom:14px;">
|
||||
<div class="panel-heading"><strong><?= Yii::t('AnimalManagementModule.base', 'Location') ?></strong></div>
|
||||
<div class="panel-body" style="padding-bottom:8px;">
|
||||
<div class="row">
|
||||
<div class="col-sm-6"><?= $renderCustomField('rescue', $model, $customDefinitions) ?></div>
|
||||
<div class="col-sm-6"><?php if ($model->isFieldActive('location_name')) { echo $form->field($model, 'location_name')->textInput(['maxlength' => 120]); } ?></div>
|
||||
<div class="col-sm-4"><?php if ($model->isFieldActive('city')) { echo $form->field($model, 'city')->textInput(['maxlength' => 120]); } ?></div>
|
||||
<div class="col-sm-4"><?php if ($model->isFieldActive('state')) { echo $form->field($model, 'state')->textInput(['maxlength' => 2]); } ?></div>
|
||||
<div class="col-sm-4"><?php if ($model->isFieldActive('zip')) { echo $form->field($model, 'zip')->textInput(['maxlength' => 10]); } ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default" style="margin-bottom:14px;">
|
||||
<div class="panel-heading"><strong><?= Yii::t('AnimalManagementModule.base', 'History') ?></strong></div>
|
||||
<div class="panel-body" style="padding-bottom:8px;">
|
||||
<?= $renderCustomField('lineage', $model, $customDefinitions) ?>
|
||||
<?= $renderCustomField('backstory', $model, $customDefinitions) ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default" style="margin-bottom:14px;">
|
||||
<div class="panel-heading"><strong><?= Yii::t('AnimalManagementModule.base', 'Public') ?></strong></div>
|
||||
<div class="panel-body" style="padding-bottom:8px;">
|
||||
<?php if ($model->isFieldActive('public_summary')): ?>
|
||||
<?= $form->field($model, 'public_summary')->textarea(['rows' => 4]) ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="panel panel-default" style="margin-bottom:14px;">
|
||||
<div class="panel-heading"><strong><?= Yii::t('AnimalManagementModule.base', 'Previous Owner') ?></strong></div>
|
||||
<div class="panel-body" style="padding-bottom:8px;">
|
||||
<div class="row">
|
||||
<div class="col-sm-6"><?= $renderCustomField('previous_owner_user_id', $model, $customDefinitions) ?></div>
|
||||
<div class="col-sm-6"><?= $renderCustomField('previous_owner_name', $model, $customDefinitions) ?></div>
|
||||
<div class="col-sm-12"><?= $renderCustomField('previous_owner_business_name', $model, $customDefinitions) ?></div>
|
||||
<div class="col-sm-12"><?= $renderCustomField('previous_owner_street_address', $model, $customDefinitions) ?></div>
|
||||
<div class="col-sm-4"><?= $renderCustomField('previous_owner_city', $model, $customDefinitions) ?></div>
|
||||
<div class="col-sm-4"><?= $renderCustomField('previous_owner_state', $model, $customDefinitions) ?></div>
|
||||
<div class="col-sm-4"><?= $renderCustomField('previous_owner_zip', $model, $customDefinitions) ?></div>
|
||||
<div class="col-sm-6"><?= $renderCustomField('previous_owner_cell_phone', $model, $customDefinitions) ?></div>
|
||||
<div class="col-sm-6"><?= $renderCustomField('previous_owner_business_phone', $model, $customDefinitions) ?></div>
|
||||
<div class="col-sm-12"><?= $renderCustomField('previous_owner_email', $model, $customDefinitions) ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default" style="margin-bottom:14px;">
|
||||
<div class="panel-heading"><strong><?= Yii::t('AnimalManagementModule.base', 'Display Field Overrides') ?></strong></div>
|
||||
<div class="panel-body" style="padding-bottom:8px;">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<label class="control-label" style="display:block;"><?= Yii::t('AnimalManagementModule.base', 'Tile Fields') ?></label>
|
||||
<?= Html::checkboxList('AnimalForm[tileDisplayFields]', $model->tileDisplayFields, DisplaySettingsForm::fieldOptions(), ['separator' => '<br>']) ?>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<label class="control-label" style="display:block;"><?= Yii::t('AnimalManagementModule.base', 'Hero Fields') ?></label>
|
||||
<?= Html::checkboxList('AnimalForm[heroDisplayFields]', $model->heroDisplayFields, DisplaySettingsForm::fieldOptions(), ['separator' => '<br>']) ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$remainingCustomFields = [];
|
||||
foreach ($customDefinitions as $fieldKey => $definition) {
|
||||
if (in_array($fieldKey, $knownProfileFieldKeys, true)) {
|
||||
continue;
|
||||
}
|
||||
$remainingCustomFields[$fieldKey] = $definition;
|
||||
}
|
||||
?>
|
||||
|
||||
<?php if (!empty($remainingCustomFields)): ?>
|
||||
<div class="panel panel-default" style="margin-bottom:14px;">
|
||||
<div class="panel-heading"><strong><?= Yii::t('AnimalManagementModule.base', 'Custom Fields') ?></strong></div>
|
||||
<div class="panel-body" style="padding-bottom:8px;">
|
||||
<?php foreach ($remainingCustomFields as $fieldKey => $definition): ?>
|
||||
<?= $renderCustomField($fieldKey, $model, $remainingCustomFields) ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?= Button::save(!empty($isEdit)
|
||||
? Yii::t('AnimalManagementModule.base', 'Save Changes')
|
||||
: Yii::t('AnimalManagementModule.base', 'Create Animal'))->submit() ?>
|
||||
<?= Button::asLink(Yii::t('AnimalManagementModule.base', 'Cancel'))->link(
|
||||
!empty($isEdit) && $animal instanceof Animal
|
||||
? $space->createUrl('/animal_management/animals/view', ['id' => $animal->id])
|
||||
: $space->createUrl('/animal_management/animals/index')
|
||||
) ?>
|
||||
<?php if (!empty($isEdit) && $animal instanceof Animal): ?>
|
||||
<?= Html::a(
|
||||
Yii::t('AnimalManagementModule.base', 'Delete Animal'),
|
||||
$space->createUrl('/animal_management/animals/delete', ['id' => $animal->id]),
|
||||
[
|
||||
'class' => 'btn btn-danger pull-right',
|
||||
'style' => 'margin-left:8px;',
|
||||
'data-method' => 'post',
|
||||
'data-confirm' => Yii::t('AnimalManagementModule.base', 'Delete {name}? This will remove the animal record and local gallery uploads. This cannot be undone.', ['name' => $animal->getDisplayName()]),
|
||||
]
|
||||
) ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="modal fade" id="animal-cover-image-manage-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="<?= Yii::t('AnimalManagementModule.base', 'Close') ?>"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title"><?= Yii::t('AnimalManagementModule.base', 'Manage Cover Image') ?></h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="help-block"><?= Yii::t('AnimalManagementModule.base', 'Select an existing gallery image or upload a new cover image.') ?></div>
|
||||
<div class="alert alert-info" style="padding:8px 10px;margin-bottom:10px;">
|
||||
<?= Yii::t('AnimalManagementModule.base', 'Your image preview updates immediately. Final save happens when you click {action} at the bottom of this intake form.', [
|
||||
'action' => !empty($isEdit)
|
||||
? Yii::t('AnimalManagementModule.base', 'Save Changes')
|
||||
: Yii::t('AnimalManagementModule.base', 'Create Animal'),
|
||||
]) ?>
|
||||
</div>
|
||||
<?php if (!empty($galleryImageUrls)): ?>
|
||||
<div class="row" style="max-height:260px;overflow:auto;margin-bottom:8px;">
|
||||
<?php foreach ($galleryImageUrls as $galleryUrl): ?>
|
||||
<div class="col-xs-6 col-sm-4" style="margin-bottom:8px;">
|
||||
<button type="button" class="btn btn-default animal-image-select-thumb" data-select-kind="cover" data-select-target="#animalform-coverimagegallerypath" data-select-value="<?= Html::encode($galleryUrl) ?>" style="padding:3px;width:100%;">
|
||||
<img src="<?= Html::encode($galleryUrl) ?>" alt="<?= Yii::t('AnimalManagementModule.base', 'Cover option') ?>" style="width:100%;height:120px;object-fit:cover;border-radius:4px;">
|
||||
</button>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="text-muted" style="margin-bottom:8px;"><?= Yii::t('AnimalManagementModule.base', 'No gallery images available yet.') ?></div>
|
||||
<?php endif; ?>
|
||||
<div class="form-group">
|
||||
<button type="button" class="btn btn-default" id="animal-cover-upload-trigger">
|
||||
<i class="fa fa-upload"></i> <?= Yii::t('AnimalManagementModule.base', 'Upload New Cover Image') ?>
|
||||
</button>
|
||||
<div id="animal-cover-upload-file-name" class="help-block" style="margin-bottom:0;"></div>
|
||||
</div>
|
||||
<?= $form->field($model, 'removeCoverImage')->checkbox() ?>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal"><?= Yii::t('AnimalManagementModule.base', 'Done') ?></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="animal-profile-image-manage-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="<?= Yii::t('AnimalManagementModule.base', 'Close') ?>"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title"><?= Yii::t('AnimalManagementModule.base', 'Manage Profile Image') ?></h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="help-block"><?= Yii::t('AnimalManagementModule.base', 'Select an existing gallery image or upload a new profile image.') ?></div>
|
||||
<div class="alert alert-info" style="padding:8px 10px;margin-bottom:10px;">
|
||||
<?= Yii::t('AnimalManagementModule.base', 'Your image preview updates immediately. Final save happens when you click {action} at the bottom of this intake form.', [
|
||||
'action' => !empty($isEdit)
|
||||
? Yii::t('AnimalManagementModule.base', 'Save Changes')
|
||||
: Yii::t('AnimalManagementModule.base', 'Create Animal'),
|
||||
]) ?>
|
||||
</div>
|
||||
<?php if (!empty($galleryImageUrls)): ?>
|
||||
<div class="row" style="max-height:260px;overflow:auto;margin-bottom:8px;">
|
||||
<?php foreach ($galleryImageUrls as $galleryUrl): ?>
|
||||
<div class="col-xs-6 col-sm-4" style="margin-bottom:8px;">
|
||||
<button type="button" class="btn btn-default animal-image-select-thumb" data-select-kind="profile" data-select-target="#animalform-profileimagegallerypath" data-select-value="<?= Html::encode($galleryUrl) ?>" style="padding:3px;width:100%;">
|
||||
<img src="<?= Html::encode($galleryUrl) ?>" alt="<?= Yii::t('AnimalManagementModule.base', 'Profile option') ?>" style="width:100%;height:120px;object-fit:cover;border-radius:4px;">
|
||||
</button>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="text-muted" style="margin-bottom:8px;"><?= Yii::t('AnimalManagementModule.base', 'No gallery images available yet.') ?></div>
|
||||
<?php endif; ?>
|
||||
<div class="form-group">
|
||||
<button type="button" class="btn btn-default" id="animal-profile-upload-trigger">
|
||||
<i class="fa fa-upload"></i> <?= Yii::t('AnimalManagementModule.base', 'Upload New Profile Image') ?>
|
||||
</button>
|
||||
<div id="animal-profile-upload-file-name" class="help-block" style="margin-bottom:0;"></div>
|
||||
</div>
|
||||
<?= $form->field($model, 'removeProfileImage')->checkbox() ?>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal"><?= Yii::t('AnimalManagementModule.base', 'Done') ?></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php ActiveForm::end(); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$this->registerCss(<<<CSS
|
||||
.animal-image-select-thumb.is-selected {
|
||||
border-color: #2f7df4 !important;
|
||||
box-shadow: 0 0 0 2px rgba(47, 125, 244, 0.22);
|
||||
}
|
||||
CSS
|
||||
);
|
||||
|
||||
$this->registerJs(<<<JS
|
||||
(function() {
|
||||
function renderPlaceholder(kind) {
|
||||
if (kind === 'profile') {
|
||||
return '<div style="height:220px;display:flex;align-items:center;justify-content:center;color:#9ba5af;"><i class="fa fa-user-circle fa-3x"></i></div>';
|
||||
}
|
||||
|
||||
return '<div style="height:220px;display:flex;align-items:center;justify-content:center;color:#9ba5af;"><i class="fa fa-image fa-3x"></i></div>';
|
||||
}
|
||||
|
||||
function updatePreview(kind, value) {
|
||||
var previewId = kind === 'profile' ? '#animal-profile-preview' : '#animal-cover-preview';
|
||||
if (value && (value.indexOf('/') === 0 || /^https?:\/\//i.test(value) || /^data:image\//i.test(value))) {
|
||||
$(previewId).html('<img src="' + value + '" alt="' + kind + ' image" style="width:100%;height:220px;object-fit:cover;display:block;">' +
|
||||
'<button type="button" class="btn btn-default" data-toggle="modal" data-target="' + (kind === 'profile' ? '#animal-profile-image-manage-modal' : '#animal-cover-image-manage-modal') + '" style="position:absolute;top:10px;right:10px;border-radius:999px;"><i class="fa fa-pencil"></i></button>');
|
||||
return;
|
||||
}
|
||||
|
||||
$(previewId).html(renderPlaceholder(kind) +
|
||||
'<button type="button" class="btn btn-default" data-toggle="modal" data-target="' + (kind === 'profile' ? '#animal-profile-image-manage-modal' : '#animal-cover-image-manage-modal') + '" style="position:absolute;top:10px;right:10px;border-radius:999px;"><i class="fa fa-pencil"></i></button>');
|
||||
}
|
||||
|
||||
function markSelectedThumb(kind, value) {
|
||||
var modalId = kind === 'profile' ? '#animal-profile-image-manage-modal' : '#animal-cover-image-manage-modal';
|
||||
$(modalId + ' .animal-image-select-thumb').removeClass('is-selected');
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
|
||||
$(modalId + ' .animal-image-select-thumb').each(function() {
|
||||
if ($(this).data('select-value') === value) {
|
||||
$(this).addClass('is-selected');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on('click', '.animal-image-select-thumb', function() {
|
||||
var kind = $(this).data('select-kind') || 'cover';
|
||||
var target = $(this).data('select-target');
|
||||
var value = $(this).data('select-value');
|
||||
if (target && value !== undefined) {
|
||||
$(target).val(value);
|
||||
if (kind === 'profile') {
|
||||
$('#animalform-profileimagefile').val('');
|
||||
$('#animalform-removeprofileimage').prop('checked', false);
|
||||
} else {
|
||||
$('#animalform-coverimagefile').val('');
|
||||
$('#animalform-removecoverimage').prop('checked', false);
|
||||
}
|
||||
updatePreview(kind, value);
|
||||
markSelectedThumb(kind, value);
|
||||
if (kind === 'profile') {
|
||||
$('#animal-profile-upload-file-name').text('');
|
||||
} else {
|
||||
$('#animal-cover-upload-file-name').text('');
|
||||
}
|
||||
}
|
||||
|
||||
$(this).closest('.modal').modal('hide');
|
||||
});
|
||||
|
||||
$('#animal-cover-upload-trigger').on('click', function() {
|
||||
$('#animalform-coverimagefile').trigger('click');
|
||||
});
|
||||
|
||||
$('#animal-profile-upload-trigger').on('click', function() {
|
||||
$('#animalform-profileimagefile').trigger('click');
|
||||
});
|
||||
|
||||
$('#animalform-coverimagefile').on('change', function() {
|
||||
var file = this.files && this.files[0] ? this.files[0] : null;
|
||||
$('#animalform-coverimagegallerypath').val('');
|
||||
$('#animalform-removecoverimage').prop('checked', false);
|
||||
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
updatePreview('cover', e.target.result);
|
||||
markSelectedThumb('cover', '');
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
$('#animal-cover-upload-file-name').text(file.name || '');
|
||||
$('#animal-cover-image-manage-modal').modal('hide');
|
||||
});
|
||||
|
||||
$('#animalform-profileimagefile').on('change', function() {
|
||||
var file = this.files && this.files[0] ? this.files[0] : null;
|
||||
$('#animalform-profileimagegallerypath').val('');
|
||||
$('#animalform-removeprofileimage').prop('checked', false);
|
||||
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
updatePreview('profile', e.target.result);
|
||||
markSelectedThumb('profile', '');
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
$('#animal-profile-upload-file-name').text(file.name || '');
|
||||
$('#animal-profile-image-manage-modal').modal('hide');
|
||||
});
|
||||
|
||||
$('#animalform-removecoverimage').on('change', function() {
|
||||
if ($(this).is(':checked')) {
|
||||
$('#animalform-coverimagegallerypath').val('');
|
||||
$('#animalform-coverimagefile').val('');
|
||||
$('#animal-cover-upload-file-name').text('');
|
||||
markSelectedThumb('cover', '');
|
||||
updatePreview('cover', '');
|
||||
}
|
||||
});
|
||||
|
||||
$('#animalform-removeprofileimage').on('change', function() {
|
||||
if ($(this).is(':checked')) {
|
||||
$('#animalform-profileimagegallerypath').val('');
|
||||
$('#animalform-profileimagefile').val('');
|
||||
$('#animal-profile-upload-file-name').text('');
|
||||
markSelectedThumb('profile', '');
|
||||
updatePreview('profile', '');
|
||||
}
|
||||
});
|
||||
|
||||
$('#animal-cover-image-manage-modal').on('shown.bs.modal', function() {
|
||||
markSelectedThumb('cover', $('#animalform-coverimagegallerypath').val());
|
||||
});
|
||||
|
||||
$('#animal-profile-image-manage-modal').on('shown.bs.modal', function() {
|
||||
markSelectedThumb('profile', $('#animalform-profileimagegallerypath').val());
|
||||
});
|
||||
})();
|
||||
JS
|
||||
);
|
||||
?>
|
||||
Reference in New Issue
Block a user