frontdev/no-copy-admin-panel-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add template managment

Browse Source
This commit is contained in:
smanylov
2026-05-21 16:33:01 +07:00
parent 921f3c0104
commit 76009e4abb
9 changed files with 413 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/actions/stuffActions.ts
+112
View File
@@ -208,6 +208,118 @@ export async function fetchEmployeInfo() {
}
});
if (response.ok) {
const parsed = await response.json();
if (parsed.message_code === 0) {
return parsed.message_body;
} else {
return null;
}
} else {
throw new Error(`${response.status}`);
}
} catch (error) {
throw error;
}
}
export async function fetchStuffTemplates() {
const token = await getSessionData('token');
try {
const response = await fetch(`${API_BASE_URL}/api/admin`, {
method: 'POST',
body: JSON.stringify({
version: 1,
msg_id: 200,
token: token,
message_body: {
action: 'get_all'
}
}),
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
});
if (response.ok) {
const parsed = await response.json();
if (parsed.message_code === 0) {
return parsed.message_body;
} else {
return null;
}
} else {
throw new Error(`${response.status}`);
}
} catch (error) {
throw error;
}
}
export async function createStuffTemplates(name: string, changePassword: boolean, permissions: Permissions) {
const token = await getSessionData('token');
try {
const response = await fetch(`${API_BASE_URL}/api/admin`, {
method: 'POST',
body: JSON.stringify({
version: 1,
msg_id: 200,
token: token,
message_body: {
action: 'create',
name: name,
change_password: changePassword,
permissions: permissions
}
}),
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
});
if (response.ok) {
const parsed = await response.json();
if (parsed.message_code === 0) {
return parsed.message_body;
} else {
return null;
}
} else {
throw new Error(`${response.status}`);
}
} catch (error) {
throw error;
}
}
export async function removeStuffTemplates(id: number,) {
const token = await getSessionData('token');
try {
const response = await fetch(`${API_BASE_URL}/api/admin`, {
method: 'POST',
body: JSON.stringify({
version: 1,
msg_id: 200,
token: token,
message_body: {
action: 'delete',
id: id
}
}),
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
});
if (response.ok) {
const parsed = await response.json();
src/app/components/dropDownList.tsx
+1
View File
@@ -45,6 +45,7 @@ export default function DropDownList({ children, value, callBack, translatedValu
setIsOpen(!isOpen)
}}
className="dropdown-button"
type="button"
>
<span className="flex items-center">
<span className="mr-2">
src/app/hooks/react-query/stuff/useStuffTemplates.ts
+39
View File
@@ -0,0 +1,39 @@
import { useQuery } from '@tanstack/react-query';
import { fetchStuffTemplates } from '@/app/actions/stuffActions';
interface StuffTemplates {
id: number;
change_password: boolean;
name: string;
permissions: {
subscriptions: number;
mailings: number;
complaints: number;
agreements: number;
staff: number;
content_moderation: number;
users: number;
kyc: number;
money: number;
claims: number;
api: number;
dash: number;
tariffs: number;
};
}
export const useStuffTemplates = () => {
return useQuery({
queryKey: ['stuffTemplates'],
queryFn: () => {
return fetchStuffTemplates()
},
select: (data: StuffTemplates[] | null) => {
if (!data) {
return null
}
return data;
},
retry: false
});
};
src/app/styles/edit-permissions-modal.scss
+36
View File
@@ -15,6 +15,35 @@
overflow: hidden;
margin-bottom: 24px;
padding: 1.5rem;
.template-name-input {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 6px;
margin: 16px 0;
}
.modal-buttons {
display: flex;
gap: 12px;
justify-content: flex-end;
}
.btn-icon {
padding: 8px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-icon:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.05);
}
}
.edit-permissions-modal,
@@ -39,6 +68,13 @@
padding-top: 20px;
}
.templates-section {
margin-bottom: 20px;
padding: 15px;
background: #f5f5f5;
border-radius: 8px;
}
.checkbox-label {
display: flex;
gap: 10px;
src/app/ui/forms/create-staff-form.tsx
+180 -5
View File
@@ -4,10 +4,14 @@ import styles from '@/app/styles/module/login.module.scss'
import { useActionState, useState, useEffect } from 'react';
import { createStuff } from '@/app/actions/stuffActions';
import { useTranslations } from 'next-intl';
import { IconEye } from '@/app/ui/icons/icons';
import { IconEye, IconDiscet, IconDelete } from '@/app/ui/icons/icons';
import { useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
import { z } from 'zod';
import { useStuffTemplates } from '@/app/hooks/react-query/stuff/useStuffTemplates';
import DropDownList from '@/app/components/dropDownList';
import { createStuffTemplates, removeStuffTemplates } from '@/app/actions/stuffActions';
import ModalWindow from '@/app/components/modalWindow';
const createStuffSchema = z.object({
fullName: z.string()
@@ -61,6 +65,7 @@ export function CreateStaffForm({ onSuccess }: { onSuccess?: () => void }) {
const t = useTranslations('Login-register-form');
const tGeneral = useTranslations('Global');
const tPermissions = useTranslations('Permissions');
const { data: templates, refetch: refetchTemplates } = useStuffTemplates();
const [showPassword, setShowPassword] = useState(false);
const [changePassword, setChangePassword] = useState(true);
@@ -80,6 +85,13 @@ export function CreateStaffForm({ onSuccess }: { onSuccess?: () => void }) {
tariffs: 0,
});
const [selectedTemplateId, setSelectedTemplateId] = useState<string>('');
const [isSavingTemplate, setIsSavingTemplate] = useState(false);
const [newTemplateName, setNewTemplateName] = useState('');
const [showSaveDialog, setShowSaveDialog] = useState(false);
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
const [templateToDelete, setTemplateToDelete] = useState<number | null>(null);
const permissionsConfig = [
{ key: 'subscriptions', label: tPermissions('subscriptions'), description: tPermissions('subscriptions-desc') },
{ key: 'mailings', label: tPermissions('mailings'), description: tPermissions('mailings-desc') },
@@ -101,6 +113,10 @@ export function CreateStaffForm({ onSuccess }: { onSuccess?: () => void }) {
...prev,
[key]: value
}));
if (selectedTemplateId) {
setSelectedTemplateId('');
}
};
function toggleShowPassword() {
@@ -109,6 +125,66 @@ export function CreateStaffForm({ onSuccess }: { onSuccess?: () => void }) {
const queryClient = useQueryClient();
const applyTemplate = (templateId: string) => {
if (!templates) return;
const template = templates.find(t => t.id.toString() === templateId);
if (template) {
setPermissions(template.permissions);
setSelectedTemplateId(templateId);
toast.success(`${tGeneral('template-applied')}: ${template.name}`);
}
};
const saveCurrentAsTemplate = async () => {
if (!newTemplateName.trim()) {
toast.error(tGeneral('template-name-required'));
return;
}
setIsSavingTemplate(true);
try {
const result = await createStuffTemplates(newTemplateName, changePassword, permissions);
if (result) {
toast.success(`${tGeneral('template-saved-successfully')}: ${newTemplateName}`);
setNewTemplateName('');
setShowSaveDialog(false);
await refetchTemplates();
if (result.id) {
setSelectedTemplateId(result.id.toString());
}
} else {
toast.error(tGeneral('template-save-failed'));
}
} catch (error) {
toast.error(tGeneral('template-save-failed'));
} finally {
setIsSavingTemplate(false);
}
};
const deleteTemplate = async () => {
if (!templateToDelete) return;
try {
const result = await removeStuffTemplates(templateToDelete);
if (result) {
toast.success(tGeneral('template-deleted-successfully'));
await refetchTemplates();
if (selectedTemplateId === templateToDelete.toString()) {
setSelectedTemplateId('');
}
setShowDeleteConfirm(false);
setTemplateToDelete(null);
} else {
toast.error(tGeneral('template-delete-failed'));
}
} catch (error) {
toast.error(tGeneral('template-delete-failed'));
}
};
useEffect(() => {
if (state?.success) {
toast.success(tGeneral('staff-created-successfully'));
@@ -123,9 +199,7 @@ export function CreateStaffForm({ onSuccess }: { onSuccess?: () => void }) {
}, [state, queryClient, onSuccess, t, tGeneral]);
return (
<div
className="create-staff-window"
>
<div className="create-staff-window">
<form
className={`${styles['']}`}
action={formAction}
@@ -224,6 +298,62 @@ export function CreateStaffForm({ onSuccess }: { onSuccess?: () => void }) {
{tGeneral('permissions')}
</h3>
<div className="templates-section">
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
<h3 style={{ margin: 0 }}>{tGeneral('template-management')}</h3>
<div style={{ display: 'flex', gap: '8px' }}>
<button
type="button"
onClick={() => setShowSaveDialog(true)}
className="btn-icon"
title={tGeneral('save-current-as-template')}
disabled={isPending}
>
<IconDiscet />
</button>
</div>
</div>
<div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
<div style={{ flex: 1 }}>
<DropDownList
value={selectedTemplateId}
callBack={applyTemplate}
translatedValue={
selectedTemplateId && templates
? templates.find(t => t.id.toString() === selectedTemplateId)?.name
: tGeneral('select-template')
}
>
<option value="">{tGeneral('select-template')}</option>
{templates?.map((template) => (
<option key={template.id} value={template.id.toString()}>
{template.name}
</option>
))}
</DropDownList>
</div>
{selectedTemplateId && (
<button
type="button"
onClick={() => {
const template = templates?.find(t => t.id.toString() === selectedTemplateId);
if (template) {
setTemplateToDelete(template.id);
setShowDeleteConfirm(true);
}
}}
className="btn-icon btn-danger"
title={tGeneral('delete-template')}
disabled={isPending}
>
<IconDelete />
</button>
)}
</div>
</div>
<div className="permissions-list">
{permissionsConfig.map((perm) => {
const currentValue = permissions[perm.key as keyof typeof permissions];
@@ -233,7 +363,7 @@ export function CreateStaffForm({ onSuccess }: { onSuccess?: () => void }) {
<div className="permission-header">
<div className="permission-info">
<h4 className="permission-title">{perm.label}</h4>
<p className="permission-description">{perm.description}</p>
{/* <p className="permission-description">{perm.description}</p> */}
</div>
<div className="permission-controls">
<div className="permission-level-buttons">
@@ -295,6 +425,51 @@ export function CreateStaffForm({ onSuccess }: { onSuccess?: () => void }) {
)}
</button>
</form>
<ModalWindow state={showSaveDialog} callBack={setShowSaveDialog}>
<div
className="min-w-100"
>
<h3>{tGeneral('save-template')}</h3>
<input
type="text"
value={newTemplateName}
onChange={(e) => setNewTemplateName(e.target.value)}
placeholder={tGeneral('enter-template-name')}
className="template-name-input"
autoFocus
/>
<div className="modal-buttons">
<button onClick={() => setShowSaveDialog(false)} className="btn btn-secondary">
{tGeneral('cancel')}
</button>
<button onClick={saveCurrentAsTemplate} disabled={isSavingTemplate} className="btn btn-primary">
{isSavingTemplate ? tGeneral('saving') : tGeneral('save')}
</button>
</div>
</div>
</ModalWindow>
<ModalWindow state={showDeleteConfirm} callBack={setShowDeleteConfirm}>
<h3
className="mb-4"
>
{tGeneral('delete-template-confirm')}
</h3>
<p
className="mb-4"
>
{tGeneral('delete-template-warning')}
</p>
<div className="modal-buttons">
<button onClick={() => setShowDeleteConfirm(false)} className="btn btn-secondary">
{tGeneral('cancel')}
</button>
<button onClick={deleteTemplate} className="btn btn-danger">
{tGeneral('delete')}
</button>
</div>
</ModalWindow>
</div>
)
}
src/app/ui/icons/icons.tsx
+8 -2
View File
@@ -1,7 +1,5 @@
/* https://icon-sets.iconify.design/ic/ */
import { CLIENT_STATIC_FILES_RUNTIME_WEBPACK } from 'next/dist/shared/lib/constants'
export function IconImageFile() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
@@ -143,4 +141,12 @@ export function IconDelete() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12l1.41 1.41L13.41 14l2.12 2.12l-1.41 1.41L12 15.41l-2.12 2.12l-1.41-1.41L10.59 14zM15.5 4l-1-1h-5l-1 1H5v2h14V4z" /></svg>
)
}
export function IconDiscet() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
<g fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 19V5a2 2 0 0 1 2-2h11.172a2 2 0 0 1 1.414.586l2.828 2.828A2 2 0 0 1 21 7.828V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" /><path d="M8.6 9h6.8a.6.6 0 0 0 .6-.6V3.6a.6.6 0 0 0-.6-.6H8.6a.6.6 0 0 0-.6.6v4.8a.6.6 0 0 0 .6.6ZM6 13.6V21h12v-7.4a.6.6 0 0 0-.6-.6H6.6a.6.6 0 0 0-.6.6Z" /></g>
</svg>
)
}
src/i18n/messages/en.json
+18 -1
View File
@@ -204,7 +204,24 @@
"require-password-change": "Require password change on first login",
"permissions": "Permissions",
"creating": "Creation...",
"create": "Create"
"create": "Create",
"template-management": "Template management",
"save-current-as-template": "Save current permissions as template",
"select-template": "Select template",
"delete-template": "Delete template",
"template-applied": "Template applied",
"template-saved-successfully": "Template saved successfully",
"template-save-failed": "Failed to save template",
"template-deleted-successfully": "Template deleted successfully",
"template-delete-failed": "Failed to delete template",
"template-name-required": "Template name is required",
"save-template": "Save template",
"enter-template-name": "Enter template name",
"saving": "Saving...",
"delete-template-confirm": "Delete template",
"delete-template-warning": "Are you sure you want to delete this template?",
"save": "Save",
"delete": "Delete"
},
"Login-register-form": {
"and": "and",
src/i18n/messages/ru.json
+18 -1
View File
@@ -204,7 +204,24 @@
"require-password-change": "Требовать смену пароля при первом входе",
"permissions": "Доступы",
"creating": "Создание...",
"create": "Создать"
"create": "Создать",
"template-management": "Управление шаблонами",
"save-current-as-template": "Сохранить текущие разрешения как шаблон",
"select-template": "Выбрать шаблон",
"delete-template": "Удалить шаблон",
"template-applied": "Шаблон применен",
"template-saved-successfully": "Шаблон успешно сохранен",
"template-save-failed": "Не удалось сохранить шаблон",
"template-deleted-successfully": "Шаблон успешно удален",
"template-delete-failed": "Не удалось удалить шаблон",
"template-name-required": "Введите название шаблона",
"save-template": "Сохранить шаблон",
"enter-template-name": "Введите название шаблона",
"saving": "Сохранение...",
"delete-template-confirm": "Удалить шаблон",
"delete-template-warning": "Вы уверены, что хотите удалить шаблон?",
"save": "Сохранить",
"delete": "Удалить"
},
"Login-register-form": {
"and": "и",