mirror of
https://github.com/vitodeploy/vito.git
synced 2025-07-08 01:12:34 +00:00
Tags (#277)
This commit is contained in:
Saeed Vaziry
GitHub
41
resources/views/settings/tags/attach.blade.php
Normal file
41
resources/views/settings/tags/attach.blade.php
Normal file
@ -0,0 +1,41 @@
|
||||
<div x-data="">
|
||||
<button type="button" class="flex items-center" x-on:click="$dispatch('open-modal', 'create-tag-modal')">
|
||||
<x-heroicon name="o-plus" class="h-5 w-5 text-gray-500 dark:text-gray-400" />
|
||||
<span class="text-md">New Tag</span>
|
||||
</button>
|
||||
@push("footer")
|
||||
<x-modal name="create-tag-modal" max-width="sm">
|
||||
<form
|
||||
id="create-tag-form"
|
||||
hx-post="{{ route("tags.attach") }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-select="#create-tag-form"
|
||||
class="p-6"
|
||||
>
|
||||
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">New Tag</h2>
|
||||
|
||||
<input type="hidden" name="taggable_type" value="{{ get_class($taggable) }}" />
|
||||
<input type="hidden" name="taggable_id" value="{{ $taggable->id }}" />
|
||||
|
||||
<div class="mt-6">
|
||||
@include("settings.tags.fields.name",["value" => old("name"),"items" => auth()->user()->currentProject->tags()->pluck("name"),])
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex justify-end">
|
||||
<x-secondary-button type="button" x-on:click="$dispatch('close')">Cancel</x-secondary-button>
|
||||
<x-primary-button class="ml-3" hx-disable>Save</x-primary-button>
|
||||
</div>
|
||||
|
||||
@if (session()->has("status") && session()->get("status") === "tag-created")
|
||||
<script defer>
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('close-modal', {
|
||||
detail: 'create-tag-modal'
|
||||
})
|
||||
);
|
||||
</script>
|
||||
@endif
|
||||
</form>
|
||||
</x-modal>
|
||||
@endpush
|
||||
</div>
|
||||
31
resources/views/settings/tags/fields/color.blade.php
Normal file
31
resources/views/settings/tags/fields/color.blade.php
Normal file
@ -0,0 +1,31 @@
|
||||
@php($id = "color-" . uniqid())
|
||||
<div x-data="{
|
||||
value: '{{ $value }}',
|
||||
}">
|
||||
<x-input-label for="color" :value="__('Color')" />
|
||||
<input x-bind:value="value" id="{{ $id }}" name="color" type="hidden" />
|
||||
<x-dropdown class="relative" align="left">
|
||||
<x-slot name="trigger">
|
||||
<x-dropdown-trigger>
|
||||
<div class="flex items-center">
|
||||
<div x-show="value" x-bind:class="`bg-${value}-500 mr-1 h-3 w-3 rounded-full`"></div>
|
||||
<span x-text="value || 'Select a color'"></span>
|
||||
</div>
|
||||
</x-dropdown-trigger>
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="content">
|
||||
<div class="z-50 max-h-[200px] overflow-y-auto">
|
||||
@foreach (config("core.tag_colors") as $color)
|
||||
<x-dropdown-link href="#" x-on:click="value = '{{ $color }}'" class="flex items-center capitalize">
|
||||
<div class="bg-{{ $color }}-500 mr-1 h-3 w-3 rounded-full"></div>
|
||||
{{ $color }}
|
||||
</x-dropdown-link>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-slot>
|
||||
</x-dropdown>
|
||||
@error("color")
|
||||
<x-input-error class="mt-2" :messages="$message" />
|
||||
@enderror
|
||||
</div>
|
||||
12
resources/views/settings/tags/fields/name.blade.php
Normal file
12
resources/views/settings/tags/fields/name.blade.php
Normal file
@ -0,0 +1,12 @@
|
||||
@php
|
||||
$id = "name-" . uniqid();
|
||||
if (! isset($items)) {
|
||||
$items = [];
|
||||
}
|
||||
@endphp
|
||||
|
||||
<x-input-label :for="$id" :value="__('Name')" />
|
||||
<x-autocomplete-text id="tag-name" name="name" :items="$items" :value="$value" placeholder="" />
|
||||
@error("name")
|
||||
<x-input-error class="mt-2" :messages="$message" />
|
||||
@enderror
|
||||
5
resources/views/settings/tags/index.blade.php
Normal file
5
resources/views/settings/tags/index.blade.php
Normal file
@ -0,0 +1,5 @@
|
||||
<x-settings-layout>
|
||||
<x-slot name="pageTitle">{{ __("Tags") }}</x-slot>
|
||||
|
||||
@include("settings.tags.partials.tags-list")
|
||||
</x-settings-layout>
|
||||
42
resources/views/settings/tags/manage.blade.php
Normal file
42
resources/views/settings/tags/manage.blade.php
Normal file
@ -0,0 +1,42 @@
|
||||
<x-modal name="manage-tags-modal">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Manage Tags</h2>
|
||||
@include("settings.tags.attach", ["taggable" => $taggable])
|
||||
</div>
|
||||
|
||||
<x-table id="tags-{{ $taggable->id }}" class="mt-6" hx-swap-oob="outerHTML">
|
||||
<x-thead>
|
||||
<x-tr>
|
||||
<x-th>Name</x-th>
|
||||
<x-th></x-th>
|
||||
</x-tr>
|
||||
</x-thead>
|
||||
<x-tbody>
|
||||
@foreach ($taggable->tags as $tag)
|
||||
<x-tr>
|
||||
<x-td>
|
||||
<div class="flex items-center">
|
||||
<div class="bg-{{ $tag->color }}-500 mr-1 h-3 w-3 rounded-full"></div>
|
||||
{{ $tag->name }}
|
||||
</div>
|
||||
</x-td>
|
||||
<x-td class="text-right">
|
||||
<form
|
||||
id="detach-tag-{{ $tag->id }}"
|
||||
hx-post="{{ route("tags.detach", ["tag" => $tag]) }}"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
<input type="hidden" name="taggable_type" value="{{ get_class($taggable) }}" />
|
||||
<input type="hidden" name="taggable_id" value="{{ $taggable->id }}" />
|
||||
<x-icon-button>
|
||||
<x-heroicon name="o-trash" class="h-5 w-5 text-gray-500 dark:text-gray-400" />
|
||||
</x-icon-button>
|
||||
</form>
|
||||
</x-td>
|
||||
</x-tr>
|
||||
@endforeach
|
||||
</x-tbody>
|
||||
</x-table>
|
||||
</div>
|
||||
</x-modal>
|
||||
41
resources/views/settings/tags/partials/create-tag.blade.php
Normal file
41
resources/views/settings/tags/partials/create-tag.blade.php
Normal file
@ -0,0 +1,41 @@
|
||||
<div>
|
||||
<x-primary-button x-data="" x-on:click.prevent="$dispatch('open-modal', 'create-tag')">
|
||||
{{ __("Create Tag") }}
|
||||
</x-primary-button>
|
||||
|
||||
<x-modal name="create-tag">
|
||||
<form
|
||||
id="create-tag-form"
|
||||
hx-post="{{ route("settings.tags.create") }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-select="#create-tag-form"
|
||||
hx-ext="disable-element"
|
||||
hx-disable-element="#btn-create-tag"
|
||||
class="p-6"
|
||||
x-data="{}"
|
||||
>
|
||||
@csrf
|
||||
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ __("Create Tag") }}
|
||||
</h2>
|
||||
|
||||
<div class="mt-6">
|
||||
@include("settings.tags.fields.name", ["value" => old("name")])
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
@include("settings.tags.fields.color", ["value" => old("color")])
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex justify-end">
|
||||
<x-secondary-button type="button" x-on:click="$dispatch('close')">
|
||||
{{ __("Cancel") }}
|
||||
</x-secondary-button>
|
||||
|
||||
<x-primary-button id="btn-create-tag" class="ml-3">
|
||||
{{ __("Save") }}
|
||||
</x-primary-button>
|
||||
</div>
|
||||
</form>
|
||||
</x-modal>
|
||||
</div>
|
||||
18
resources/views/settings/tags/partials/delete-tag.blade.php
Normal file
18
resources/views/settings/tags/partials/delete-tag.blade.php
Normal file
@ -0,0 +1,18 @@
|
||||
<x-modal name="delete-tag" :show="$errors->isNotEmpty()">
|
||||
<form id="delete-tag-form" method="post" x-bind:action="deleteAction" class="p-6">
|
||||
@csrf
|
||||
@method("delete")
|
||||
|
||||
<h2 class="text-lg font-medium">Deleting a tag will detach it from all the resources that it has been used</h2>
|
||||
|
||||
<div class="mt-6 flex justify-end">
|
||||
<x-secondary-button type="button" x-on:click="$dispatch('close')">
|
||||
{{ __("Cancel") }}
|
||||
</x-secondary-button>
|
||||
|
||||
<x-danger-button class="ml-3">
|
||||
{{ __("Delete") }}
|
||||
</x-danger-button>
|
||||
</div>
|
||||
</form>
|
||||
</x-modal>
|
||||
39
resources/views/settings/tags/partials/edit-tag.blade.php
Normal file
39
resources/views/settings/tags/partials/edit-tag.blade.php
Normal file
@ -0,0 +1,39 @@
|
||||
<x-modal
|
||||
name="edit-tag"
|
||||
:show="true"
|
||||
x-on:modal-edit-tag-closed.window="window.history.pushState('', '', '{{ route('settings.tags') }}');"
|
||||
>
|
||||
<form
|
||||
id="edit-tag-form"
|
||||
hx-post="{{ route("settings.tags.update", ["tag" => $tag->id]) }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-select="#edit-tag-form"
|
||||
hx-ext="disable-element"
|
||||
hx-disable-element="#btn-edit-tag"
|
||||
class="p-6"
|
||||
>
|
||||
@csrf
|
||||
|
||||
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ __("Edit Tag") }}
|
||||
</h2>
|
||||
|
||||
<div class="mt-6">
|
||||
@include("settings.tags.fields.name", ["value" => old("name", $tag->name)])
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
@include("settings.tags.fields.color", ["value" => old("color", $tag->color)])
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex justify-end">
|
||||
<x-secondary-button type="button" x-on:click="$dispatch('close')">
|
||||
{{ __("Cancel") }}
|
||||
</x-secondary-button>
|
||||
|
||||
<x-primary-button id="btn-edit-tag" class="ml-3">
|
||||
{{ __("Save") }}
|
||||
</x-primary-button>
|
||||
</div>
|
||||
</form>
|
||||
</x-modal>
|
||||
69
resources/views/settings/tags/partials/tags-list.blade.php
Normal file
69
resources/views/settings/tags/partials/tags-list.blade.php
Normal file
@ -0,0 +1,69 @@
|
||||
<div>
|
||||
<x-card-header>
|
||||
<x-slot name="title">{{ __("Tags") }}</x-slot>
|
||||
<x-slot name="description">
|
||||
{{ __("You can manage tags here") }}
|
||||
</x-slot>
|
||||
<x-slot name="aside">
|
||||
@include("settings.tags.partials.create-tag")
|
||||
</x-slot>
|
||||
</x-card-header>
|
||||
<div x-data="{ deleteAction: '' }" class="space-y-3">
|
||||
@if (count($tags) > 0)
|
||||
<x-table class="mt-6">
|
||||
<x-thead>
|
||||
<x-tr>
|
||||
<x-th>Name</x-th>
|
||||
<x-th></x-th>
|
||||
</x-tr>
|
||||
</x-thead>
|
||||
<x-tbody>
|
||||
@foreach ($tags as $tag)
|
||||
<x-tr>
|
||||
<x-td>
|
||||
<div class="flex items-center">
|
||||
<div class="bg-{{ $tag->color }}-500 mr-1 size-4 rounded-full"></div>
|
||||
{{ $tag->name }}
|
||||
</div>
|
||||
</x-td>
|
||||
<x-td class="text-right">
|
||||
<div class="inline">
|
||||
<x-icon-button
|
||||
id="edit-{{ $tag->id }}"
|
||||
hx-get="{{ route('settings.tags', ['edit' => $tag->id]) }}"
|
||||
hx-replace-url="true"
|
||||
hx-select="#edit"
|
||||
hx-target="#edit"
|
||||
hx-ext="disable-element"
|
||||
hx-disable-element="#edit-{{ $tag->id }}"
|
||||
>
|
||||
<x-heroicon name="o-pencil" class="h-5 w-5" />
|
||||
</x-icon-button>
|
||||
<x-icon-button
|
||||
x-on:click="deleteAction = '{{ route('settings.tags.delete', ['tag' => $tag]) }}'; $dispatch('open-modal', 'delete-tag')"
|
||||
>
|
||||
<x-heroicon name="o-trash" class="h-5 w-5" />
|
||||
</x-icon-button>
|
||||
</div>
|
||||
</x-td>
|
||||
</x-tr>
|
||||
@endforeach
|
||||
</x-tbody>
|
||||
</x-table>
|
||||
|
||||
@include("settings.tags.partials.delete-tag")
|
||||
|
||||
<div id="edit">
|
||||
@if (isset($editTag))
|
||||
@include("settings.tags.partials.edit-tag", ["tag" => $editTag])
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<x-simple-card>
|
||||
<div class="text-center">
|
||||
{{ __("You don't have any tags yet!") }}
|
||||
</div>
|
||||
</x-simple-card>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
30
resources/views/settings/tags/tags.blade.php
Normal file
30
resources/views/settings/tags/tags.blade.php
Normal file
@ -0,0 +1,30 @@
|
||||
<div x-data="">
|
||||
<div class="inline-flex gap-1">
|
||||
<div
|
||||
id="tags-list-{{ $taggable->id }}"
|
||||
class="inline-flex gap-1"
|
||||
@if (! isset($oobOff) || ! $oobOff)
|
||||
hx-swap-oob="outerHTML"
|
||||
@endif
|
||||
>
|
||||
@foreach ($taggable->tags as $tag)
|
||||
<div
|
||||
class="border-{{ $tag->color }}-300 bg-{{ $tag->color }}-50 text-{{ $tag->color }}-500 dark:border-{{ $tag->color }}-600 dark:bg-{{ $tag->color }}-500 flex max-w-max items-center rounded-md border px-2 py-1 text-xs dark:bg-opacity-10"
|
||||
>
|
||||
<x-heroicon name="o-tag" class="mr-1 size-4" />
|
||||
{{ $tag->name }}
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@if (isset($edit) && $edit)
|
||||
<a
|
||||
x-on:click="$dispatch('open-modal', 'manage-tags-modal')"
|
||||
class="flex max-w-max cursor-pointer items-center justify-center rounded-md border border-gray-300 bg-gray-50 px-2 py-1 text-xs text-gray-500 dark:border-gray-600 dark:bg-gray-500 dark:bg-opacity-10"
|
||||
>
|
||||
<x-heroicon name="o-pencil" class="h-3 w-3" />
|
||||
</a>
|
||||
@include("settings.tags.manage")
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user