Skip to content

Commit

Permalink
Logical Improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@NuwanJ
NuwanJ committed Oct 16, 2024
1 parent df71d83 commit b4db0cb
Show file tree
Hide file tree
Showing 5 changed files with 154 additions and 92 deletions.
21 changes: 21 additions & 0 deletions app/Http/Livewire/Backend/TaxonomyTermTable.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
use Illuminate\Database\Eloquent\Builder;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;
use Rappasoft\LaravelLivewireTables\Views\Filter;

class TaxonomyTermTable extends DataTableComponent
{
Expand Down Expand Up @@ -46,9 +47,29 @@ public function query(): Builder
{
return TaxonomyTerm::query()
->where('taxonomy_id', $this->taxonomy->id)
->when($this->getFilter('taxonomy_term'), fn($query, $type) => $query->where('parent_id', $type))
->with('user');
}

public function filters(): array
{
$terms = [];

foreach (
TaxonomyTerm::query()
->where('taxonomy_id', $this->taxonomy->id)
->whereNull('parent_id')->get() as $key => $value
) {
$terms[$value->id] = $value->name;
};

return [
'taxonomy_term' => Filter::make('Taxonomy Term')
->select($terms)
];
}


public function rowView(): string
{
return 'backend.taxonomy.terms.index-table-row';
Expand Down
39 changes: 34 additions & 5 deletions resources/views/backend/taxonomy/edit.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
@section('title', __('Edit Taxonomy'))

@section('content')
<div x-data="{ properties: {{$taxonomy->properties}} }">
<div x-data="{ properties: {{ $taxonomy->properties }}, is_editable: {{ $taxonomy->terms()->count() > 0 ? '0' : '1' }} }">
{!! Form::model($taxonomy, [
'url' => route('dashboard.taxonomy.update', $taxonomy->id),
'method' => 'PUT',
Expand Down Expand Up @@ -39,7 +39,7 @@
<div class="row">
{!! Form::label('name', 'Taxonomy Name*', ['class' => 'col-form-label']) !!}
</div>

<div class="form-group row">
<div class="col-md-12">
{!! Form::text('name', null, ['class' => 'form-control']) !!}
Expand All @@ -53,10 +53,14 @@
<div class="row">
{!! Form::label('description', 'Taxonomy Description*', ['class' => 'col-form-label']) !!}
</div>

<div class="form-group row">
<div class="col-md-12">
{!! Form::textarea('description', null, ['class' => 'form-control','style'=>'overflow:hidden;height: 100px;','oninput'=>"this.style.height = '100px';this.style.height = this.scrollHeight + 'px';"]) !!}
{!! Form::textarea('description', null, [
'class' => 'form-control',
'style' => 'overflow:hidden;height: 100px;',
'oninput' => "this.style.height = '100px';this.style.height = this.scrollHeight + 'px';",
]) !!}
@error('description')
<strong class="text-danger">{{ $message }}</strong>
@enderror
Expand All @@ -68,7 +72,32 @@
<div class="card">
<div class="card-body">
<h5 class="card-title" style="text-align: left; text-decoration: none;">Properties</h5>
<x-backend.taxonomy_property_adder/>

<div x-show="is_editable=='0'">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
<path
d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
</symbol>
</svg>

<div class="alert alert-secondary d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img"
aria-label="Warning:">
<use xlink:href="#exclamation-triangle-fill" />
</svg>

<div>
<b>Edit</b> and <b>Delete</b> options not available since already have <a
href="{{ route('dashboard.taxonomy.terms.index', $taxonomy) }}">taxonomy terms</a>.
Please remove all of them to enable the
Edit and
Delete options.
</div>
</div>
</div>

<x-backend.taxonomy_property_adder />
{!! Form::hidden('properties', '', ['x-model' => 'JSON.stringify(properties)']) !!}
</div>
</div>
Expand Down
10 changes: 6 additions & 4 deletions resources/views/backend/taxonomy/terms/edit.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,12 @@
<select name="parent_id" class="form-select">
<option value="" selected>Select</option>
@foreach ($parentTerms as $parent)
<option value="{{ $parent->id }}"
{{ old('parent_id', $term->parent_id) == $parent->id ? 'selected' : '' }}>
{{ $parent->name }}
</option>
@if ($parent->id != $term->id)
<option value="{{ $parent->id }}"
{{ old('parent_id', $term->parent_id) == $parent->id ? 'selected' : '' }}>
{{ $parent->name }}
</option>
@endif
@endforeach
</select>
@error('parent_id')
Expand Down
9 changes: 8 additions & 1 deletion resources/views/backend/taxonomy/terms/index-table-row.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,15 @@
</x-livewire-tables::table.cell>

<x-livewire-tables::table.cell>
<div class="d-flex px-0 mt-0 mb-0">
<div class="d-flex px-0 mt-0 mb-0 justify-content-end">
<div class="btn-group" role="group" aria-label="">
<!-- Filter Button -->
@if ($row->parent_id == null)
<a href="?filters[taxonomy_term]={{ $row->id }}" class="btn btn-sm btn-primary">
<i class="fa fa-filter" title="Filter"></i>
</a>
@endif

<!-- Edit Button -->
<a href="{{ route('dashboard.taxonomy.terms.edit', ['taxonomy' => $row->taxonomy_id, 'term' => $row->id]) }}"
class="btn btn-sm btn-warning">
Expand Down
167 changes: 85 additions & 82 deletions resources/views/components/backend/taxonomy_property_adder.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,94 +4,98 @@
<div x-data="{
{{-- properties array from parent component can be directly accessed here --}}
selectedItem: null,
editIndex: null,
isEditing: false,
newProperty: {
code: '',
name: '',
data_type: null,
},
propertyTypes:{{ json_encode($propertyTypes) }},
ClearAll() {
this.properties = [];
this.selectedItem = null;
},
deleteItem() {
if (this.selectedItem !== null) {
this.properties.splice(this.selectedItem, 1);
editIndex: null,
isEditing: false,
newProperty: {
code: '',
name: '',
data_type: null,
},
propertyTypes: {{ json_encode($propertyTypes) }},
ClearAll() {
this.properties = [];
this.selectedItem = null;
}
},
moveUp() {
if (this.selectedItem > 0) {
let temp = this.properties[this.selectedItem - 1];
this.properties[this.selectedItem - 1] = this.properties[this.selectedItem];
this.properties[this.selectedItem] = temp;
this.selectedItem -= 1;
}
},
moveDown() {
if (this.selectedItem < this.properties.length - 1) {
let temp = this.properties[this.selectedItem + 1];
this.properties[this.selectedItem + 1] = this.properties[this.selectedItem];
this.properties[this.selectedItem] = temp;
this.selectedItem += 1;
}
},
editItem() {
if (this.selectedItem !== null) {
this.editIndex = this.selectedItem;
this.newProperty = { ...this.properties[this.selectedItem] };
this.isEditing = true;
document.getElementById('addPropertyItemModalLabel').innerHTML = 'Edit Property';
new bootstrap.Modal(document.getElementById('addPropertyItemModal')).show();
}
},
handleSave() {
const newPropertyData = {
code: this.newProperty.code.trim(),
name: this.newProperty.name.trim(),
data_type: this.newProperty.data_type
};
},
deleteItem() {
if (this.selectedItem !== null) {
this.properties.splice(this.selectedItem, 1);
this.selectedItem = null;
}
},
moveUp() {
if (this.selectedItem > 0) {
let temp = this.properties[this.selectedItem - 1];
this.properties[this.selectedItem - 1] = this.properties[this.selectedItem];
this.properties[this.selectedItem] = temp;
this.selectedItem -= 1;
}
},
moveDown() {
if (this.selectedItem < this.properties.length - 1) {
let temp = this.properties[this.selectedItem + 1];
this.properties[this.selectedItem + 1] = this.properties[this.selectedItem];
this.properties[this.selectedItem] = temp;
this.selectedItem += 1;
}
},
editItem() {
if (this.selectedItem !== null) {
this.editIndex = this.selectedItem;
this.newProperty = { ...this.properties[this.selectedItem] };
this.isEditing = true;
document.getElementById('addPropertyItemModalLabel').innerHTML = 'Edit Property';
new bootstrap.Modal(document.getElementById('addPropertyItemModal')).show();
}
},
handleSave() {
const newPropertyData = {
code: this.newProperty.code.trim(),
name: this.newProperty.name.trim(),
data_type: this.newProperty.data_type
};
if (this.isEditing && this.editIndex !== null) {
if (this.editIndex >= 0 && this.editIndex < this.properties.length) {
this.properties[this.editIndex] = newPropertyData;
this.selectedItem = this.editIndex; // Select the edited item
if (this.isEditing && this.editIndex !== null) {
if (this.editIndex >= 0 && this.editIndex < this.properties.length) {
this.properties[this.editIndex] = newPropertyData;
this.selectedItem = this.editIndex; // Select the edited item
} else {
console.error('Invalid editIndex:', this.editIndex);
}
this.editIndex = null;
this.isEditing = false;
} else {
console.error('Invalid editIndex:', this.editIndex);
this.properties.push(newPropertyData);
this.selectedItem = this.properties.length - 1; // Select the newly added item
}
this.editIndex = null;
this.isEditing = false;
} else {
this.properties.push(newPropertyData);
this.selectedItem = this.properties.length - 1; // Select the newly added item
}
bootstrap.Modal.getInstance(document.getElementById('addPropertyItemModal')).hide();
{{-- nextTick ensures that the modal is hidden before resetting the form --}}
this.$nextTick(() => {
this.resetForm();
});
},
resetForm() {
this.newProperty = {
code: '',
name: '',
data_type: null
};
},
bootstrap.Modal.getInstance(document.getElementById('addPropertyItemModal')).hide();
{{-- nextTick ensures that the modal is hidden before resetting the form --}}
this.$nextTick(() => {
this.resetForm();
});
},
resetForm() {
this.newProperty = {
code: '',
name: '',
data_type: null
};
},
}" x-cloak>
<div class="d-flex justify-content-between mb-3">
<button type="button" class="btn btn-primary btn-w-150" data-bs-toggle="modal" data-bs-target="#addPropertyItemModal"
<button type="button" class="btn btn-primary btn-w-150" data-bs-toggle="modal"
data-bs-target="#addPropertyItemModal"
x-on:click="resetForm(); document.getElementById('addPropertyItemModalLabel').innerHTML = 'Add Property'; isEditing=false">
<i class="fas fa-plus me-2"></i>Add
</button>
<button type="button" class="btn btn-dark btn-w-150" x-show="properties.length" x-transition x-on:click="ClearAll()">

<button type="button" class="btn btn-dark btn-w-150" x-show="properties.length && is_editable=='1'" x-transition
x-on:click="ClearAll()">
<i class="fas fa-times me-2"></i>Clear All
</button>
</div>



<!-- Modal -->
<div class="modal fade" id="addPropertyItemModal" tabindex="-1" aria-labelledby="addPropertyItemModalLabel"
aria-hidden="true" x-init="$el.addEventListener('hidden.bs.modal', () => resetForm())">
Expand All @@ -101,19 +105,19 @@
<h1 class="modal-title fs-5" id="addPropertyItemModalLabel">Add Property</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form >
<form>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="mb-3">
<label for="propertyCode" class="form-label">Code*</label>
<input type="text" class="form-control" id="propertyCode"
<input type="text" class="form-control" id="propertyCode"
x-model="newProperty.code" />
</div>
<div class="mb-3">
<label for="propertyName" class="form-label">Name*</label>
<input type="text" class="form-control" id="propertyName"
x-model="newProperty.name"/>
<input type="text" class="form-control" id="propertyName"
x-model="newProperty.name" />
</div>
<div class="mb-3">
<label for="propertyDatatype" class="form-label">Datatype</label>
Expand All @@ -122,16 +126,15 @@
<template x-for="(value,key) in propertyTypes" :key="key">
<option :value="key" x-text="value"></option>
</template>
</select>
</select>
</div>
</div>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-w-150" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btn-w-150"
x-on:click="handleSave()">Save</button>
<button type="button" class="btn btn-primary btn-w-150" x-on:click="handleSave()">Save</button>
</div>
</div>
</div>
Expand Down

0 comments on commit b4db0cb

Please sign in to comment.