Skip to content

Commit

Permalink
Changes in styling
Browse files Browse the repository at this point in the history 
Extra validations in livewire component
  • Loading branch information
@fantismic
fantismic committed Jul 18, 2024
1 parent 772e0d6 commit 393a51d
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 19 deletions.
2 changes: 1 addition & 1 deletion composer.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "fantismic/dynamic-settings",
"version": "1.0.0",
"version": "1.0.1",
"description": "This package creates custom dynamic settings controlled by the user.",
"license": "MIT",
"keywords": [
Expand Down
10 changes: 10 additions & 0 deletions src/DynSettings.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,16 @@ public function get($key) {
return DynamicSetting::get($key);
}

public function isKey($key) {
if (is_null($key) || empty($key)) return false;

if ($this->getModel($key)) {
return true;
} else {
return false;
}
}

public function getModel($key=null) {
return DynamicSetting::getModelByKey($key);
}
Expand Down
23 changes: 22 additions & 1 deletion src/Livewire/DynamicSettingsComponent.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,17 @@
use Livewire\Attributes\Layout;
use Livewire\Attributes\Validate;
use Fantismic\DynSettings\Facades\DynSettings;
use WireUi\Traits\WireUiActions;

class DynamicSettingsComponent extends Component
{

use WireUiActions;

public $wire_ui = false;
public $layout_mode;
public $layout_path;
public $alert_array_format;

public $settingsArr = [];
public $settingsAll = [];
Expand Down Expand Up @@ -49,6 +53,7 @@ public function mount() {

$this->layout_mode = config('dynsettings.layout_mode', 'component');
$this->layout_path = config('dynsettings.layout_path', 'layouts.app');
$this->alert_array_format = config('dynsettings.alert_array_format', true);

switch (strtolower(config('dynsettings.component_blade'))) {
case 'wireui':
Expand All @@ -70,6 +75,17 @@ public function mount() {

}

public function boot()
{
$this->withValidator(function ($validator) {
$validator->after(function ($validator) {
if (DynSettings::isKey($this->key)) {
$validator->errors()->add('key', __('A key already exists with this value'));
}
});
});
}

public function resetFields() {
$this->allTypes = [];
$this->allGroups = [];
Expand Down Expand Up @@ -135,7 +151,12 @@ public function showAddModalBtn() {
public function addSetting() {
$this->validate();

if (DynSettings::add($this->key,'empty',$this->type,$this->name,$this->group,$this->assoc,$this->description)) {
$value = 'n/v';
if ($this->type == 'bool') {
$value = false;
}

if (DynSettings::add($this->key,$value,$this->type,$this->name,$this->group,$this->assoc,$this->description)) {
$this->message = 'Setting '.$this->name. ' has been created!';
$this->showMessage = true;
$this->resetFields();
Expand Down
18 changes: 9 additions & 9 deletions src/resources/views/livewire/dynamic-settings-wire_ui.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<section>
<div class="p-3 bg-slate-100 dark:bg-slate-800 rounded-lg ">
<div class="p-2 bg-slate-100 dark:bg-slate-800 rounded-lg ">
{{-- Header --}}
<div class="p-1 flex justify-between">
{{-- Header title --}}
Expand Down Expand Up @@ -39,18 +39,18 @@
{{-- Body --}}
@foreach ($groups as $name => $group)
{{-- Card body --}}
<div class="bg-slate-100 dark:bg-gray-700 rounded-lg pb-1 mb-3">
<div class="bg-slate-100 dark:bg-gray-700 rounded-lg">

{{-- Card Content --}}
<x-card title="{{ucFirst($name)}}">
@foreach ($group as $name => $settings)
{{-- Assoc card --}}
<x-card title="{{ucFirst($name)}}" class="border p-3 dark:border-gray-600">
<x-card title="{{ucFirst($name)}}" class="border p-1 mb-4 dark:border-gray-600">
{{-- Setting item --}}
<div class="space-y-4">
@foreach ($settings as $setting)
{{-- Setting item 1 --}}
<div class="flex space-x-10 m-3">
<div class="flex space-x-10">
{{-- Setting first column --}}
<div class="w-1/2">
@switch($setting['type'])
Expand All @@ -65,11 +65,12 @@
<x-toggle lg label="{{$setting['name']}}" wire:model.live="settingsArr.{{$setting['key']}}" />
@break
@endswitch
<div class="text-sm italic mt-1">{{$setting['key']}}</div>
{{-- End setting first column --}}
</div>
{{-- Setting second column --}}
<div class="w-1/2 place-content-center pl-5 dark:text-gray-200 border-l border-l-gray-300 dark:border-l-gray-600 text-sm italic">
@if($setting['type'] == "array")
@if($setting['type'] == "array" && $alert_array_format)
<b>Always comma separated values!</b><br>
@endif
{{$setting['description']}}
Expand Down Expand Up @@ -135,7 +136,7 @@
<x-select
label="{{__('Choose a group')}}"
:options="$allGroups"
wire:model="group"
wire:model.live="group"
:searchable="true"
:min-items-for-search="1"
>
Expand All @@ -150,7 +151,7 @@
<x-select
label="{{__('Choose an assoc')}}"
:options="$allAssocs"
wire:model="assoc"
wire:model.live="assoc"
:searchable="true"
:min-items-for-search="1"
>
Expand All @@ -173,5 +174,4 @@
</x-card>
</x-modal>

</section>
{{-- <hr class="h-px my-3 bg-gray-200 border-0 dark:bg-gray-700"> --}}
</section>
17 changes: 9 additions & 8 deletions src/resources/views/livewire/dynamic-settings.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,13 @@
</div>
{{-- Buttons --}}
<div>
<button wire:click="save" type="button" class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
<button wire:click="save" type="button" class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-emerald-800 dark:hover:bg-green-900 dark:focus:ring-green-900">
{{__('Save')}}
</button>
<button wire:click="showAddModalBtn" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
<button wire:click="showAddModalBtn" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-800 dark:hover:bg-blue-900 focus:outline-none dark:focus:ring-blue-900">
{{__('Add')}}
</button>
<button wire:click="showRemoveModalBtn" type="button" class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">
<button wire:click="showRemoveModalBtn" type="button" class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-rose-800 dark:hover:bg-red-900 dark:focus:ring-red-900">
{{__('Remove')}}
</button>
{{-- End buttons --}}
Expand All @@ -45,7 +45,7 @@
{{-- Body --}}
@foreach ($groups as $name => $group)
{{-- Card body --}}
<div class="rounded-md bg-white dark:bg-slate-900 dark:bg-opacity-50 shadow pb-3 mb-3">
<div class="rounded-md bg-white dark:bg-slate-800 dark:bg-opacity-50 shadow pb-3 mb-3">
{{-- Card title --}}
<div class="p-3 border-b-2 border-b-gray-300 dark:border-b-gray-600 mb-4">
<p class="font-medium text-lg whitespace-normal text-gray-700 dark:text-gray-400">{{ucFirst($name)}}</p>
Expand All @@ -54,7 +54,7 @@
<div class="">
@foreach ($group as $name => $settings)
{{-- Assoc card --}}
<div class="rounded-md bg-white dark:bg-gray-800 shadow m-3 pb-3 border dark:border-gray-600">
<div class="rounded-md bg-white dark:bg-slate-800 shadow m-3 pb-3 border dark:border-gray-600">
{{-- Assoc card title --}}
<div class="p-3 border-b-2 border-b-gray-300 dark:border-b-gray-600 mb-4">
<p class="font-medium text-base whitespace-normal text-gray-700 dark:text-gray-400">{{ucFirst($name)}}</p>
Expand All @@ -70,14 +70,14 @@
@case('array')
<div>
<label for="{{$setting['key']}}" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{$setting['name']}}</label>
<textarea wire:model="settingsArr.{{$setting['key']}}" id="{{$setting['key']}}" rows="2" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-indigo-600 focus:border-indigo-600 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500"></textarea>
<textarea wire:model="settingsArr.{{$setting['key']}}" id="{{$setting['key']}}" rows="2" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-indigo-600 focus:border-indigo-600 dark:bg-slate-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500"></textarea>
</div>
@break
@case('string')
@case('int')
<div class="mb-3">
<label for="{{$setting['key']}}" class="block ml-1 mb-1 text-sm font-medium text-gray-900 dark:text-white">{{$setting['name']}}</label>
<input wire:model="settingsArr.{{$setting['key']}}" type="text" id="{{$setting['key']}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-indigo-600 focus:border-indigo-600 block w-full p-2.5 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500" />
<input wire:model="settingsArr.{{$setting['key']}}" type="text" id="{{$setting['key']}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-indigo-600 focus:border-indigo-600 block w-full p-2.5 dark:bg-slate-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500" />
</div>
@break
@case('bool')
Expand All @@ -90,11 +90,12 @@
</div>
@break
@endswitch
<div class="text-sm italic mt-1 dark:text-gray-400">{{$setting['key']}}</div>
{{-- End setting first column --}}
</div>
{{-- Setting second column --}}
<div class="w-1/2 place-content-center pl-5 dark:text-gray-200 border-l border-l-gray-300 dark:border-l-gray-600 text-sm italic">
@if($setting['type'] == "array")
@if($setting['type'] == "array" && $alert_array_format)
<b>Always comma separated values!</b><br>
@endif
{{$setting['description']}}
Expand Down

0 comments on commit 393a51d

Please sign in to comment.