This commit is contained in:
F4ilji
2026-04-07 17:54:26 +05:00
parent 04adba6682
commit 936b1fb5b0
468 changed files with 43498 additions and 4176 deletions
@@ -0,0 +1,172 @@
<template>
<div class="min-h-screen bg-background-2">
<div class="border-b border-line-2 bg-layer/50 backdrop-blur-sm sticky top-0 z-10 h-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full">
<div class="flex items-center h-full gap-3">
<a
:href="route('dashboard.additional-educations.directions.index')"
class="p-2 text-muted-foreground-1 hover:text-foreground hover:bg-muted-hover rounded-lg transition-all"
>
<DashboardIcon name="arrow-left" size="5" />
</a>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
<DashboardIcon name="plus" size="5" class="text-primary" />
</div>
<div>
<h1 class="text-lg font-medium text-foreground">Создание направления ДПО</h1>
<p class="text-xs text-muted-foreground-1">Заполните информацию о новом направлении</p>
</div>
</div>
</div>
</div>
</div>
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<FlashMessages />
<div class="bg-layer border border-layer-line rounded-lg shadow-xs">
<div class="p-6 border-b border-line-2">
<div class="flex items-center gap-2">
<DashboardIcon name="document-text" size="5" class="text-primary" />
<h2 class="text-base font-medium text-foreground">Основная информация</h2>
</div>
</div>
<form @submit.prevent="submit" class="p-6">
<div class="space-y-6">
<div>
<label for="title" class="block text-sm font-medium text-foreground mb-2">
Название направления <span class="text-rose-500">*</span>
</label>
<input
id="title"
v-model="form.title"
type="text"
@blur="generateSlug"
placeholder='Например: "Информационные технологии"'
:class="[
'w-full px-4 py-2.5 bg-surface border rounded-lg text-sm text-foreground placeholder-muted-foreground-2 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all',
errors.title ? 'border-rose-500' : 'border-layer-line focus:border-primary'
]"
/>
<p v-if="errors.title" class="mt-1.5 text-xs text-rose-500">{{ errors.title }}</p>
</div>
<div>
<label for="slug" class="block text-sm font-medium text-foreground mb-2">
URL-идентификатор <span class="text-rose-500">*</span>
</label>
<input
id="slug"
v-model="form.slug"
type="text"
readonly
:class="[
'w-full px-4 py-2.5 bg-muted/30 border rounded-lg text-sm text-foreground cursor-not-allowed',
errors.slug ? 'border-rose-500' : 'border-layer-line'
]"
/>
<p v-if="errors.slug" class="mt-1.5 text-xs text-rose-500">{{ errors.slug }}</p>
</div>
<div class="flex items-center gap-3">
<label for="is_active" class="text-sm font-medium text-foreground">
Активное направление
</label>
<button
type="button"
id="is_active"
@click="form.is_active = !form.is_active"
:class="[
'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
form.is_active ? 'bg-primary' : 'bg-muted'
]"
>
<span
:class="[
'inline-block h-4 w-4 transform rounded-full bg-white transition-transform',
form.is_active ? 'translate-x-6' : 'translate-x-1'
]"
/>
</button>
<span class="text-xs text-muted-foreground-1">Отображать ли направление на сайте</span>
</div>
</div>
<div class="flex items-center justify-end gap-3 mt-8 pt-6 border-t border-line-2">
<a
:href="route('dashboard.additional-educations.directions.index')"
class="inline-flex items-center gap-2 px-4 py-2.5 bg-surface border border-layer-line text-foreground text-sm font-medium rounded-lg hover:bg-muted-hover transition-all"
>
Отмена
</a>
<button
type="submit"
:disabled="processing"
class="inline-flex items-center gap-2 px-4 py-2.5 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary-hover transition-all disabled:opacity-50 disabled:cursor-not-allowed"
>
<svg v-if="processing" class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
</svg>
<DashboardIcon v-else name="check" size="4" />
{{ processing ? 'Сохранение...' : 'Создать направление' }}
</button>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
import DashboardIcon from '../../Components/DashboardIcon.vue';
import FlashMessages from '../../Components/shared/FlashMessages.vue';
export default {
name: 'DirectionCreate',
components: {
DashboardIcon,
FlashMessages
},
data() {
return {
form: {
title: '',
slug: '',
is_active: true
},
errors: {},
processing: false
}
},
mounted() {
this.SET_DOCUMENT_TITLE('Создание направления ДПО');
},
methods: {
generateSlug() {
if (this.form.title) {
this.form.slug = this.GENERATE_SLUG(this.form.title);
}
},
submit() {
this.processing = true;
this.errors = {};
this.$inertia.post(route('dashboard.additional-educations.directions.store'), this.form, {
onFinish: () => {
this.processing = false;
},
onError: (errors) => {
this.errors = errors;
}
});
}
}
}
</script>
@@ -0,0 +1,180 @@
<template>
<div class="min-h-screen bg-background-2">
<div class="border-b border-line-2 bg-layer/50 backdrop-blur-sm sticky top-0 z-10 h-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full">
<div class="flex items-center h-full gap-3">
<a
:href="route('dashboard.additional-educations.directions.index')"
class="p-2 text-muted-foreground-1 hover:text-foreground hover:bg-muted-hover rounded-lg transition-all"
>
<DashboardIcon name="arrow-left" size="5" />
</a>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
<DashboardIcon name="pencil-square" size="5" class="text-primary" />
</div>
<div>
<h1 class="text-lg font-medium text-foreground">Редактирование направления ДПО</h1>
<p class="text-xs text-muted-foreground-1">{{ direction?.title }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<FlashMessages />
<div class="bg-layer border border-layer-line rounded-lg shadow-xs">
<div class="p-6 border-b border-line-2">
<div class="flex items-center gap-2">
<DashboardIcon name="document-text" size="5" class="text-primary" />
<h2 class="text-base font-medium text-foreground">Основная информация</h2>
</div>
</div>
<form @submit.prevent="submit" class="p-6">
<div class="space-y-6">
<div>
<label for="title" class="block text-sm font-medium text-foreground mb-2">
Название направления <span class="text-rose-500">*</span>
</label>
<input
id="title"
v-model="form.title"
type="text"
@blur="generateSlug"
placeholder='Например: "Информационные технологии"'
:class="[
'w-full px-4 py-2.5 bg-surface border rounded-lg text-sm text-foreground placeholder-muted-foreground-2 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all',
errors.title ? 'border-rose-500' : 'border-layer-line focus:border-primary'
]"
/>
<p v-if="errors.title" class="mt-1.5 text-xs text-rose-500">{{ errors.title }}</p>
</div>
<div>
<label for="slug" class="block text-sm font-medium text-foreground mb-2">
URL-идентификатор <span class="text-rose-500">*</span>
</label>
<input
id="slug"
v-model="form.slug"
type="text"
readonly
:class="[
'w-full px-4 py-2.5 bg-muted/30 border rounded-lg text-sm text-foreground cursor-not-allowed',
errors.slug ? 'border-rose-500' : 'border-layer-line'
]"
/>
<p v-if="errors.slug" class="mt-1.5 text-xs text-rose-500">{{ errors.slug }}</p>
</div>
<div class="flex items-center gap-3">
<label for="is_active" class="text-sm font-medium text-foreground">
Активное направление
</label>
<button
type="button"
id="is_active"
@click="form.is_active = !form.is_active"
:class="[
'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
form.is_active ? 'bg-primary' : 'bg-muted'
]"
>
<span
:class="[
'inline-block h-4 w-4 transform rounded-full bg-white transition-transform',
form.is_active ? 'translate-x-6' : 'translate-x-1'
]"
/>
</button>
<span class="text-xs text-muted-foreground-1">Отображать ли направление на сайте</span>
</div>
</div>
<div class="flex items-center justify-end gap-3 mt-8 pt-6 border-t border-line-2">
<a
:href="route('dashboard.additional-educations.directions.index')"
class="inline-flex items-center gap-2 px-4 py-2.5 bg-surface border border-layer-line text-foreground text-sm font-medium rounded-lg hover:bg-muted-hover transition-all"
>
Отмена
</a>
<button
type="submit"
:disabled="processing"
class="inline-flex items-center gap-2 px-4 py-2.5 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary-hover transition-all disabled:opacity-50 disabled:cursor-not-allowed"
>
<svg v-if="processing" class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
</svg>
<DashboardIcon v-else name="check" size="4" />
{{ processing ? 'Сохранение...' : 'Сохранить изменения' }}
</button>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
import DashboardIcon from '../../Components/DashboardIcon.vue';
import FlashMessages from '../../Components/shared/FlashMessages.vue';
export default {
name: 'DirectionEdit',
components: {
DashboardIcon,
FlashMessages
},
props: {
direction: {
type: Object,
required: true
}
},
data() {
return {
form: {
title: this.direction?.title || '',
slug: this.direction?.slug || '',
is_active: this.direction?.is_active ?? true
},
errors: {},
processing: false
}
},
mounted() {
this.SET_DOCUMENT_TITLE(`Редактирование направления - ${this.direction?.title}`);
},
methods: {
generateSlug() {
// Не перегенерируем slug при редактировании если он уже есть
if (this.form.title && !this.form.slug) {
this.form.slug = this.GENERATE_SLUG(this.form.title);
}
},
submit() {
this.processing = true;
this.errors = {};
this.$inertia.put(route('dashboard.additional-educations.directions.update', this.direction.id), this.form, {
onFinish: () => {
this.processing = false;
},
onError: (errors) => {
this.errors = errors;
}
});
}
}
}
</script>
@@ -0,0 +1,214 @@
<template>
<DashboardLayout>
<template #header-icon>
<DashboardIcon name="arrow-trending-up" size="5" class="text-primary" />
</template>
<template #header-title>Направления ДПО</template>
<template #header-subtitle>Управление направлениями дополнительного образования</template>
<template #header-actions>
<a
:href="route('dashboard.additional-educations.directions.create')"
class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary-hover transition-all duration-200 shadow-sm hover:shadow-md"
>
<DashboardIcon name="plus" size="4" />
Добавить направление
</a>
</template>
<FlashMessages />
<DataFilters title="Фильтры" @reset="resetFilters">
<SearchInput
v-model="searchQuery"
label="Поиск"
placeholder="Введите название направления..."
@search="search"
/>
<SelectFilter
v-model="isActiveQuery"
label="Статус"
placeholder="Все"
@change="filterByActive"
>
<option value="">Все</option>
<option value="1">Активные</option>
<option value="0">Неактивные</option>
</SelectFilter>
</DataFilters>
<div class="bg-layer border border-layer-line rounded-lg shadow-xs overflow-hidden">
<div class="px-6 py-4 border-b border-line-2 bg-surface/50">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<span class="text-sm text-foreground">
Всего: <span class="font-medium">{{ directions.total }}</span>
</span>
<span class="text-xs text-muted-foreground-1 px-2 py-0.5 bg-primary/10 text-primary rounded-full">
{{ directions.data.length }} на странице
</span>
</div>
<div class="flex items-center gap-2">
<button
type="button"
@click="refreshPage"
class="p-2 text-muted-foreground-1 hover:text-foreground hover:bg-muted-hover rounded-lg transition-all"
title="Обновить"
>
<DashboardIcon name="arrow-path" size="4" />
</button>
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-line-2">
<thead class="bg-surface/50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-muted-foreground-1 uppercase tracking-wider">
Название
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-muted-foreground-1 uppercase tracking-wider">
Статус
</th>
<th class="px-6 py-3 text-right text-xs font-medium text-muted-foreground-1 uppercase tracking-wider">
Действия
</th>
</tr>
</thead>
<tbody class="divide-y divide-line-2">
<tr
v-for="direction in directions.data"
:key="direction.id"
class="group hover:bg-muted-hover/50 transition-all duration-200"
>
<td class="px-6 py-4">
<div class="text-sm font-medium text-foreground group-hover:text-primary transition-colors">
{{ TEXT_LIMIT(direction.title, 60) }}
</div>
<div class="text-xs text-muted-foreground-1 mt-0.5">
/{{ direction.slug }}
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span :class="STATUS_BADGE_CLASS(direction.is_active)">
{{ direction.is_active ? 'Активно' : 'Неактивно' }}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<div class="flex items-center justify-end gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
<a
:href="route('dashboard.additional-educations.directions.edit', direction.id)"
class="p-2 text-muted-foreground-1 hover:text-primary hover:bg-primary/10 rounded-lg transition-all"
title="Редактировать"
>
<DashboardIcon name="pencil-square" size="4" />
</a>
<button
@click.prevent="deleteDirection(direction)"
class="p-2 text-muted-foreground-1 hover:text-rose-600 hover:bg-rose-500/10 rounded-lg transition-all"
title="Удалить"
>
<DashboardIcon name="trash" size="4" />
</button>
</div>
</td>
</tr>
<EmptyState
v-if="directions.data.length === 0"
:columns="3"
title="Направления не найдены"
description="Создайте первое направление дополнительного образования или измените параметры поиска"
:action-url="route('dashboard.additional-educations.directions.create')"
action-text="Добавить направление"
icon-path="M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H6.911a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661z"
/>
</tbody>
</table>
</div>
<Pagination :data="directions" />
</div>
</DashboardLayout>
</template>
<script>
import DashboardLayout from '../../Components/DashboardLayout.vue';
import DashboardIcon from '../../Components/DashboardIcon.vue';
import FlashMessages from '../../Components/shared/FlashMessages.vue';
import DataFilters from '../../Components/shared/DataFilters.vue';
import SearchInput from '../../Components/shared/SearchInput.vue';
import SelectFilter from '../../Components/shared/SelectFilter.vue';
import EmptyState from '../../Components/shared/EmptyState.vue';
import Pagination from '../../Components/shared/Pagination.vue';
export default {
name: 'DirectionIndex',
components: {
DashboardLayout,
DashboardIcon,
FlashMessages,
DataFilters,
SearchInput,
SelectFilter,
EmptyState,
Pagination
},
props: {
directions: {
type: Object,
required: true
},
filters: {
type: Object,
default: () => ({
is_active: '',
search: ''
})
}
},
data() {
return {
searchQuery: this.filters?.search || '',
isActiveQuery: this.filters?.is_active || ''
}
},
mounted() {
this.SET_DOCUMENT_TITLE('Направления ДПО');
},
methods: {
search() {
this.INERTIA_FILTER('dashboard.additional-educations.directions.index', {
search: this.searchQuery,
is_active: this.isActiveQuery
});
},
filterByActive() {
this.search();
},
resetFilters() {
this.RESET_FILTERS(
['searchQuery', 'isActiveQuery'],
'dashboard.additional-educations.directions.index'
);
},
refreshPage() {
this.search();
},
deleteDirection(direction) {
this.CONFIRM_AND_DELETE(direction, 'dashboard.additional-educations.directions.destroy', {
message: 'Удалить направление "' + direction.title + '"?'
});
}
}
}
</script>