Migrated JS files to TS files for users page of telegram bot menu

constructor_telegram_bots/settings.py

@@ -109,6 +109,9 @@
 	'TELEGRAM_BOT_MENU:VARIABLES': WEBPACK_LOADER_BASE_CONFIG | {
 		'STATS_FILE': BASE_DIR / 'variables.telegram-bot-menu.webpack.stats.json',
 	},
+	'TELEGRAM_BOT_MENU:USERS': WEBPACK_LOADER_BASE_CONFIG | {
+		'STATS_FILE': BASE_DIR / 'users.telegram-bot-menu.webpack.stats.json',
+	},
 	'TELEGRAM_BOT_MENU:DATABASE': WEBPACK_LOADER_BASE_CONFIG | {
 		'STATS_FILE': BASE_DIR / 'database.telegram-bot-menu.webpack.stats.json',
 	},

telegram_bot/frontend/static/telegram_bot_menu/users/src/ts/components.ts

@@ -0,0 +1,102 @@
+import { Toast } from 'global_modules/toast';
+import { askConfirmModal } from 'global_modules/modals/ask_confirm_modal';
+import { TelegramBotUserApi, TelegramBotAllowedUserApi } from 'telegram_bot_api/main';
+import { TelegramBotUser } from 'telegram_bot_api/types';
+
+declare const telegramBotId: number;
+declare const telegramBotIsPrivate: boolean;
+declare const askConfirmModalDeleteTelegramBotUserTitle: string;
+declare const askConfirmModalDeleteTelegramBotUserText: string;
+
+const usersParentElement = document.querySelector('#telegramBotUsers') as HTMLDivElement;
+
+export class User {
+	public element: HTMLDivElement;
+	public actionButtonGroupElement: HTMLDivElement;
+	public user: TelegramBotUser;
+	public onDidDeleteFunc?: () => void;
+
+	public constructor(user: TelegramBotUser) {
+		this.user = user;
+
+		this.element = document.createElement('div');
+		this.element.className = 'list-group-item p-3';
+		this.element.innerHTML = `
+			<div class="d-flex align-items-center gap-3">
+				<p class="flex-fill m-0">[<span class="text-success-emphasis">${user.activated_date}</span>]: <span class="text-primary">${user.user_id}</span> - ${user.full_name}</p>
+				<div class="d-flex btn-group btn-action-group" role="group"></div>
+			</div>
+		`;
+		usersParentElement.appendChild(this.element);
+
+		this.actionButtonGroupElement = this.element.querySelector('.btn-action-group') as HTMLDivElement;
+
+		this.createActionButtons();
+	}
+
+	protected createActionButton(buttonColor: string, bootstrapIconName: string, buttonTextColor?: string, isShow: boolean = true): HTMLButtonElement {
+		const button = document.createElement('button');
+		button.className = `btn btn-${buttonColor}${buttonTextColor ? ` text-${buttonTextColor}` : ''} bi bi-${bootstrapIconName} px-2 py-0${!isShow ? ' d-none' : ''}`;
+		button.type = 'button';
+		button.style.fontSize = '20px';
+		return button;
+	}
+
+	protected createActionButtons(): void {
+		const setAllowedButton = this.createActionButton('warning', 'star', 'light', telegramBotIsPrivate && !this.user.is_allowed);
+		const unsetAllowedButton = this.createActionButton('warning', 'star-fill', 'light', telegramBotIsPrivate && this.user.is_allowed);
+		const deleteButton = this.createActionButton('danger', 'trash');
+
+		unsetAllowedButton.classList.add('rounded-start');
+
+		this.actionButtonGroupElement.append(setAllowedButton, unsetAllowedButton, deleteButton);
+
+		setAllowedButton.addEventListener('click', async (): Promise<void> => {
+			const response = await TelegramBotAllowedUserApi.set(telegramBotId, this.user.id);
+
+			if (response.ok) {
+				this.user.is_allowed = true;
+
+				setAllowedButton.classList.add('d-none');
+				unsetAllowedButton.classList.remove('d-none');
+			}
+
+			new Toast(response.json.message, response.json.level).show();
+		});
+		unsetAllowedButton.addEventListener('click', async (): Promise<void> => {
+			const response = await TelegramBotAllowedUserApi.unset(telegramBotId, this.user.id);
+
+			if (response.ok) {
+				this.user.is_allowed = false;
+
+				setAllowedButton.classList.remove('d-none');
+				unsetAllowedButton.classList.add('d-none');
+			}
+
+			new Toast(response.json.message, response.json.level).show();
+		});
+		deleteButton.addEventListener('click', (): void => {
+			askConfirmModal(
+				askConfirmModalDeleteTelegramBotUserTitle,
+				askConfirmModalDeleteTelegramBotUserText,
+				async () => {
+					const response = await TelegramBotUserApi.delete_(telegramBotId, this.user.id);
+
+					if (response.ok) {
+						if (this.onDidDeleteFunc) {
+							this.onDidDeleteFunc();
+						}
+
+						this.delete();
+					}
+
+					new Toast(response.json.message, response.json.level).show();
+				},
+			);
+		});
+	}
+
+	public delete(): void {
+		this.element.remove();
+	}
+}

telegram_bot/frontend/static/telegram_bot_menu/users/src/ts/main.ts

@@ -0,0 +1,46 @@
+import { Toast } from 'global_modules/toast';
+import { TelegramBotUsersApi } from 'telegram_bot_api/main';
+import * as Components from './components';
+
+declare const telegramBotId: number;
+declare const telegramBotNotActivatedText: string;
+
+const usersParentElement = document.querySelector('#telegramBotUsers') as HTMLDivElement;
+const usersComponent: Record<number, Components.User> = {};
+
+function checkUsersComponentCount(): void {
+	if (Object.keys(usersComponent).length <= 0) {
+		const element = document.createElement('div');
+		element.className = 'list-group-item text-center p-3';
+		element.id = 'telegramBotNotActivated';
+		element.innerHTML = telegramBotNotActivatedText;
+		usersParentElement.append(element);
+	} else {
+		document.querySelector('#telegramBotNotActivated')?.remove();
+	}
+}
+
+async function update(): Promise<void> {
+	const response = await TelegramBotUsersApi.get(telegramBotId);
+
+	if (response.ok) {
+		Object.values(usersComponent).forEach(userComponent => userComponent.delete());
+		response.json.forEach(user => {
+			const component = new Components.User(user);
+
+			usersComponent[user.id] = component;
+
+			component.onDidDeleteFunc = (): void => {
+				delete usersComponent[user.id];
+
+				checkUsersComponentCount();
+			}
+		});
+
+		checkUsersComponentCount();
+	} else {
+		new Toast(response.json.message, response.json.level).show();
+	}
+}
+
+update();

telegram_bot/frontend/templates/users.html

@@ -0,0 +1,36 @@
+{% extends 'extended_base.html' %}
+{% load i18n %}
+{% load render_bundle from webpack_loader %}
+
+{% block title %}{% trans 'Список пользователей' %}{% endblock title %}
+
+{% block styles %}
+{% render_bundle 'main' 'css' 'TELEGRAM_BOT_MENU:USERS' %}
+{% endblock styles %}
+
+{% block content %}
+<div class="card border">
+	<div class="card-body">
+		{% with id='telegramBotUsers' %}
+			{% include 'object_tools.html' with id=id show_add_button=False %}
+			<div class="collapse mt-2 show" id="{{ id }}Сollapse">
+				<div class="list-group" id="{{ id }}"></div>
+			</div>
+		{% endwith %}
+	</div>
+</div>
+{% endblock content %}
+
+{% block scripts_data %}
+{{ block.super }}
+const telegramBotIsPrivate = '{{ telegram_bot.is_private }}' === 'True';
+
+const telegramBotNotActivatedText = "{% trans 'Вашего Telegram бота ещё никто не активировал' %}";
+
+const askConfirmModalDeleteTelegramBotUserTitle = "{% trans 'Удаление пользователя' %}";
+const askConfirmModalDeleteTelegramBotUserText = "{% trans 'Вы точно хотите удалить пользователя Telegram бота?' %}";
+{% endblock scripts_data %}
+
+{% block scripts %}
+{% render_bundle 'main' 'js' 'TELEGRAM_BOT_MENU:USERS' %}
+{% endblock scripts %}

webpack.config.ts

@@ -87,6 +87,9 @@ export default [
 	generateConfig('telegram_bot/frontend/static/telegram_bot_menu/variables/dist', 'variables.telegram-bot-menu', {
 		entry: [...telegramBotMenuDefaultEntryFilesPath, `${telegramBotMenuStaticDirPath}/variables/src/ts/main.ts`],
 	}),
+	generateConfig('telegram_bot/frontend/static/telegram_bot_menu/users/dist', 'users.telegram-bot-menu', {
+		entry: [...telegramBotMenuDefaultEntryFilesPath, telegramBotMenuAnimationFilePath, `${telegramBotMenuStaticDirPath}/users/src/ts/main.ts`],
+	}),
 	generateConfig('telegram_bot/frontend/static/telegram_bot_menu/database/dist', 'database.telegram-bot-menu', {
 		entry: [...telegramBotMenuDefaultEntryFilesPath, telegramBotMenuAnimationFilePath, `${telegramBotMenuStaticDirPath}/database/src/ts/main.ts`],
 		plugins: [new MonacoWebpackPlugin()],