ваше сообщение коммита
This commit is contained in:
@@ -1,12 +0,0 @@
|
||||
<template>
|
||||
<input type="checkbox" :checked="value === true || value === 'true'" disabled />
|
||||
</template>
|
||||
<script setup>
|
||||
defineProps({ value: [Boolean, String, Number] });
|
||||
</script>
|
||||
<style scoped>
|
||||
input[type='checkbox'] {
|
||||
pointer-events: none;
|
||||
accent-color: #1976d2;
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<span>{{ formatted }}</span>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
const props = defineProps({ value: String });
|
||||
const formatted = computed(() => {
|
||||
if (!props.value) return '';
|
||||
const d = new Date(props.value);
|
||||
if (isNaN(d)) return props.value;
|
||||
return d.toISOString().slice(0, 10);
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
span { color: #3a3a3a; }
|
||||
</style>
|
||||
@@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<span>{{ value }}</span>
|
||||
</template>
|
||||
<script setup>
|
||||
defineProps({ value: [String, Number] });
|
||||
</script>
|
||||
<style scoped>
|
||||
span { font-variant-numeric: tabular-nums; }
|
||||
</style>
|
||||
@@ -1,20 +0,0 @@
|
||||
<template>
|
||||
<span v-if="Array.isArray(value)">
|
||||
<span v-for="(v, i) in value" :key="i" class="select-tag">{{ v }}</span>
|
||||
</span>
|
||||
<span v-else>{{ value }}</span>
|
||||
</template>
|
||||
<script setup>
|
||||
defineProps({ value: [String, Array], options: [Array, Object] });
|
||||
</script>
|
||||
<style scoped>
|
||||
.select-tag {
|
||||
display: inline-block;
|
||||
background: #e0f3ff;
|
||||
color: #1976d2;
|
||||
border-radius: 6px;
|
||||
padding: 2px 8px;
|
||||
margin-right: 4px;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<span>{{ value }}</span>
|
||||
</template>
|
||||
<script setup>
|
||||
defineProps({ value: String });
|
||||
</script>
|
||||
<style scoped>
|
||||
span { white-space: pre-line; }
|
||||
</style>
|
||||
@@ -1,276 +0,0 @@
|
||||
<template>
|
||||
<div class="dynamic-table-editor">
|
||||
<div class="editor-header">
|
||||
<input v-model="tableName" @blur="saveTableName" class="table-title-input" />
|
||||
<textarea v-model="tableDesc" @blur="saveTableDesc" class="table-desc-input" />
|
||||
<button class="close-btn" @click="$emit('close')">×</button>
|
||||
</div>
|
||||
<div v-if="isLoading" class="loading">Загрузка...</div>
|
||||
<div v-else>
|
||||
<TableColumnsDraggable
|
||||
:columns="columns"
|
||||
@update-column="updateColumn"
|
||||
@delete-column="deleteColumn"
|
||||
@edit-options="openOptionsEditor"
|
||||
@columns-reordered="reorderColumns"
|
||||
/>
|
||||
<SelectOptionsEditor
|
||||
v-if="showOptionsEditor"
|
||||
:options="editingOptions"
|
||||
@update:options="saveOptions"
|
||||
/>
|
||||
<div class="table-controls">
|
||||
<button class="btn btn-success" @click="addColumn">Добавить столбец</button>
|
||||
<button class="btn btn-success" @click="addRow">Добавить строку</button>
|
||||
</div>
|
||||
<table class="dynamic-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="col in columns" :key="col.id">{{ col.name }}</th>
|
||||
<th>Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in rows" :key="row.id">
|
||||
<td v-for="col in columns" :key="col.id">
|
||||
<template v-if="col.type === 'select'">
|
||||
<select v-model="cellEdits[`${row.id}_${col.id}`]" @change="saveCell(row.id, col.id)">
|
||||
<option v-for="opt in col.options || []" :key="opt" :value="opt">{{ opt }}</option>
|
||||
</select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<input :value="cellValue(row.id, col.id)" @input="onCellInput(row.id, col.id, $event.target.value)" @blur="saveCell(row.id, col.id)" />
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-danger btn-sm" @click="deleteRow(row.id)">Удалить</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-if="!rows.length || !columns.length" class="empty-table">Нет данных. Добавьте столбцы и строки.</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import tablesService from '../../services/tablesService';
|
||||
import TableColumnsDraggable from './TableColumnsDraggable.vue';
|
||||
import SelectOptionsEditor from './SelectOptionsEditor.vue';
|
||||
|
||||
const props = defineProps({ tableId: { type: Number, required: true } });
|
||||
const emit = defineEmits(['close']);
|
||||
const isLoading = ref(true);
|
||||
const columns = ref([]);
|
||||
const rows = ref([]);
|
||||
const cellValues = ref([]);
|
||||
const cellEdits = ref({});
|
||||
const tableName = ref('');
|
||||
const tableDesc = ref('');
|
||||
const showOptionsEditor = ref(false);
|
||||
const editingCol = ref(null);
|
||||
const editingOptions = ref([]);
|
||||
|
||||
function loadTable() {
|
||||
isLoading.value = true;
|
||||
tablesService.getTable(props.tableId)
|
||||
.then(res => {
|
||||
columns.value = res.columns;
|
||||
rows.value = res.rows;
|
||||
cellValues.value = res.cellValues;
|
||||
cellEdits.value = {};
|
||||
tableName.value = res.columns.length ? res.columns[0].table_name : '';
|
||||
tableDesc.value = res.columns.length ? res.columns[0].table_description : '';
|
||||
})
|
||||
.finally(() => { isLoading.value = false; });
|
||||
}
|
||||
function addColumn() {
|
||||
const name = prompt('Название столбца:');
|
||||
if (!name) return;
|
||||
tablesService.addColumn(props.tableId, { name, type: 'text' }).then(loadTable);
|
||||
}
|
||||
function addRow() {
|
||||
tablesService.addRow(props.tableId).then(loadTable);
|
||||
}
|
||||
function deleteColumn(colId) {
|
||||
if (!confirm('Удалить столбец?')) return;
|
||||
tablesService.deleteColumn(colId).then(loadTable);
|
||||
}
|
||||
function deleteRow(rowId) {
|
||||
if (!confirm('Удалить строку?')) return;
|
||||
tablesService.deleteRow(rowId).then(loadTable);
|
||||
}
|
||||
function cellValue(rowId, colId) {
|
||||
const key = `${rowId}_${colId}`;
|
||||
if (cellEdits.value[key] !== undefined) return cellEdits.value[key];
|
||||
const found = cellValues.value.find(c => c.row_id === rowId && c.column_id === colId);
|
||||
return found ? found.value : '';
|
||||
}
|
||||
function saveCell(rowId, colId) {
|
||||
const key = `${rowId}_${colId}`;
|
||||
const value = cellEdits.value[key];
|
||||
tablesService.saveCell({ row_id: rowId, column_id: colId, value }).then(loadTable);
|
||||
}
|
||||
function updateColumn(col) {
|
||||
try {
|
||||
// Убеждаемся, что options - это массив или null
|
||||
let options = col.options;
|
||||
if (typeof options === 'string') {
|
||||
try {
|
||||
options = JSON.parse(options);
|
||||
} catch {
|
||||
options = [];
|
||||
}
|
||||
}
|
||||
|
||||
tablesService.updateColumn(col.id, {
|
||||
name: col.name,
|
||||
type: col.type,
|
||||
options: options,
|
||||
order: col.order
|
||||
}).then(loadTable).catch(err => {
|
||||
console.error('Ошибка обновления столбца:', err);
|
||||
alert('Ошибка обновления столбца');
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Ошибка updateColumn:', err);
|
||||
}
|
||||
}
|
||||
function reorderColumns(newColumns) {
|
||||
// Сохраняем новый порядок столбцов последовательно
|
||||
const updatePromises = newColumns.map((col, idx) =>
|
||||
tablesService.updateColumn(col.id, { order: idx })
|
||||
);
|
||||
|
||||
Promise.all(updatePromises)
|
||||
.then(() => loadTable())
|
||||
.catch(err => {
|
||||
console.error('Ошибка переупорядочивания столбцов:', err);
|
||||
alert('Ошибка переупорядочивания столбцов');
|
||||
});
|
||||
}
|
||||
function onCellInput(rowId, colId, value) {
|
||||
const key = `${rowId}_${colId}`;
|
||||
cellEdits.value[key] = value;
|
||||
}
|
||||
function openOptionsEditor(col) {
|
||||
editingCol.value = col;
|
||||
editingOptions.value = Array.isArray(col.options) ? [...col.options] : [];
|
||||
showOptionsEditor.value = true;
|
||||
}
|
||||
function saveOptions(newOptions) {
|
||||
if (!editingCol.value) return;
|
||||
tablesService.updateColumn(editingCol.value.id, { options: newOptions }).then(() => {
|
||||
showOptionsEditor.value = false;
|
||||
loadTable();
|
||||
});
|
||||
}
|
||||
function saveTableName() {
|
||||
tablesService.updateTable(props.tableId, { name: tableName.value });
|
||||
}
|
||||
function saveTableDesc() {
|
||||
tablesService.updateTable(props.tableId, { description: tableDesc.value });
|
||||
}
|
||||
watch([columns, rows], () => {
|
||||
cellEdits.value = {};
|
||||
});
|
||||
onMounted(loadTable);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dynamic-table-editor {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 16px rgba(0,0,0,0.13);
|
||||
padding: 28px 22px 18px 22px;
|
||||
max-width: 900px;
|
||||
margin: 40px auto;
|
||||
position: relative;
|
||||
}
|
||||
.editor-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
.table-title-input {
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
flex: 1;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.table-desc-input {
|
||||
font-size: 0.9em;
|
||||
border: 1px solid #ccc;
|
||||
outline: none;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
resize: none;
|
||||
height: 60px;
|
||||
width: 200px;
|
||||
}
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: #bbb;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.close-btn:hover {
|
||||
color: #333;
|
||||
}
|
||||
.table-controls {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.dynamic-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dynamic-table th, .dynamic-table td {
|
||||
border: 1px solid #eee;
|
||||
padding: 6px 10px;
|
||||
text-align: left;
|
||||
}
|
||||
.dynamic-table th {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
.btn {
|
||||
padding: 5px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.95rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-success {
|
||||
background: #28a745;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-danger {
|
||||
background: #dc3545;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-sm {
|
||||
font-size: 0.85rem;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
.loading {
|
||||
color: #888;
|
||||
margin: 16px 0;
|
||||
}
|
||||
.empty-table {
|
||||
color: #aaa;
|
||||
text-align: center;
|
||||
margin: 24px 0;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
</style>
|
||||
@@ -2,30 +2,31 @@
|
||||
<div class="dynamic-tables-modal">
|
||||
<div class="modal-header">
|
||||
<h2>Пользовательские таблицы</h2>
|
||||
<button class="close-btn" @click="$emit('close')">×</button>
|
||||
<button class="close-btn" @click="closeModal">×</button>
|
||||
</div>
|
||||
<UserTablesList @open-table="openTable" @table-deleted="onTableDeleted" />
|
||||
<DynamicTableEditor v-if="selectedTable" :table-id="selectedTable.id" @close="closeEditor" />
|
||||
<UserTablesList
|
||||
:selected-table-id="selectedTableId"
|
||||
@update:selected-table-id="val => selectedTableId = val"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import UserTablesList from './UserTablesList.vue';
|
||||
import DynamicTableEditor from './DynamicTableEditor.vue';
|
||||
|
||||
const selectedTable = ref(null);
|
||||
function openTable(table) {
|
||||
selectedTable.value = table;
|
||||
}
|
||||
function closeEditor() {
|
||||
selectedTable.value = null;
|
||||
}
|
||||
function onTableDeleted(deletedTableId) {
|
||||
if (selectedTable.value && selectedTable.value.id === deletedTableId) {
|
||||
selectedTable.value = null;
|
||||
}
|
||||
const selectedTableId = ref(null);
|
||||
|
||||
function closeModal() {
|
||||
selectedTableId.value = null;
|
||||
// эмитим наружу, чтобы закрыть модалку
|
||||
// (если используется <DynamicTablesModal @close=... />)
|
||||
// иначе просто убираем модалку
|
||||
// eslint-disable-next-line vue/custom-event-name-casing
|
||||
// $emit('close') не работает в <script setup>, используем defineEmits
|
||||
emit('close');
|
||||
}
|
||||
const emit = defineEmits(['close']);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<div class="select-options-editor">
|
||||
<h4>Опции для select</h4>
|
||||
<ul>
|
||||
<li v-for="(opt, idx) in localOptions" :key="idx">
|
||||
<input v-model="localOptions[idx]" @blur="emitOptions" class="option-input" />
|
||||
<button class="btn btn-danger btn-xs" @click="removeOption(idx)">×</button>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="btn btn-success btn-xs" @click="addOption">Добавить опцию</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
const props = defineProps({
|
||||
options: { type: Array, default: () => [] }
|
||||
});
|
||||
const emit = defineEmits(['update:options']);
|
||||
const localOptions = ref([...props.options]);
|
||||
|
||||
watch(() => props.options, (val) => {
|
||||
localOptions.value = [...val];
|
||||
});
|
||||
function addOption() {
|
||||
localOptions.value.push('');
|
||||
emitOptions();
|
||||
}
|
||||
function removeOption(idx) {
|
||||
localOptions.value.splice(idx, 1);
|
||||
emitOptions();
|
||||
}
|
||||
function emitOptions() {
|
||||
emit('update:options', localOptions.value.filter(opt => opt.trim() !== ''));
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.select-options-editor {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 12px;
|
||||
max-width: 320px;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.option-input {
|
||||
flex: 1 1 80px;
|
||||
border: 1px solid #b0b0b0;
|
||||
border-radius: 5px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.btn-xs {
|
||||
font-size: 0.8em;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
</style>
|
||||
49
frontend/src/components/tables/TableCell.vue
Normal file
49
frontend/src/components/tables/TableCell.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<td>
|
||||
<input
|
||||
v-model="localValue"
|
||||
@blur="save"
|
||||
@keyup.enter="save"
|
||||
:placeholder="column.name"
|
||||
class="cell-input"
|
||||
/>
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
const props = defineProps(['rowId', 'column', 'cellValues']);
|
||||
const emit = defineEmits(['update']);
|
||||
|
||||
const localValue = ref('');
|
||||
watch(
|
||||
() => [props.rowId, props.column.id, props.cellValues],
|
||||
() => {
|
||||
const cell = props.cellValues.find(
|
||||
c => c.row_id === props.rowId && c.column_id === props.column.id
|
||||
);
|
||||
localValue.value = cell ? cell.value : '';
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
function save() {
|
||||
emit('update', localValue.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cell-input {
|
||||
width: 100%;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 5px;
|
||||
padding: 0.3em 0.5em;
|
||||
font-size: 1em;
|
||||
background: #fff;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
.cell-input:focus {
|
||||
border: 1.5px solid #2ecc40;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,104 +0,0 @@
|
||||
<template>
|
||||
<div class="columns-container">
|
||||
<div v-for="(col, index) in localColumns" :key="col.id" class="column-header">
|
||||
<input v-model="col.name" @blur="updateColumn(col)" class="col-name-input" :placeholder="'Название'" />
|
||||
<select v-model="col.type" @change="updateColumn(col)" class="col-type-select">
|
||||
<option value="text">Текст</option>
|
||||
<option value="select">Список</option>
|
||||
</select>
|
||||
<button class="btn btn-danger btn-sm" @click="$emit('delete-column', col.id)">×</button>
|
||||
<button v-if="col.type==='select'" class="btn btn-secondary btn-xs" @click="$emit('edit-options', col)">Опции</button>
|
||||
<div class="reorder-buttons">
|
||||
<button v-if="index > 0" class="btn btn-light btn-xs" @click="moveColumn(index, -1)">←</button>
|
||||
<button v-if="index < localColumns.length - 1" class="btn btn-light btn-xs" @click="moveColumn(index, 1)">→</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
const props = defineProps({
|
||||
columns: { type: Array, required: true }
|
||||
});
|
||||
const emit = defineEmits(['update:columns', 'update-column', 'delete-column', 'edit-options', 'columns-reordered']);
|
||||
const localColumns = ref([...props.columns]);
|
||||
|
||||
watch(() => props.columns, (val) => {
|
||||
localColumns.value = [...val];
|
||||
});
|
||||
function updateColumn(col) {
|
||||
emit('update-column', col);
|
||||
}
|
||||
function moveColumn(index, direction) {
|
||||
const newIndex = index + direction;
|
||||
if (newIndex >= 0 && newIndex < localColumns.value.length) {
|
||||
const columns = [...localColumns.value];
|
||||
[columns[index], columns[newIndex]] = [columns[newIndex], columns[index]];
|
||||
localColumns.value = columns;
|
||||
emit('columns-reordered', localColumns.value);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.columns-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.column-header {
|
||||
background: #f5f7fa;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 8px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 180px;
|
||||
position: relative;
|
||||
}
|
||||
.col-name-input {
|
||||
flex: 1 1 80px;
|
||||
border: 1px solid #b0b0b0;
|
||||
border-radius: 5px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.col-type-select {
|
||||
border-radius: 5px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.btn {
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8em;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-danger {
|
||||
background: #dc3545;
|
||||
}
|
||||
.btn-secondary {
|
||||
background: #6c757d;
|
||||
}
|
||||
.btn-light {
|
||||
background: #f8f9fa;
|
||||
color: #333;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.btn-xs {
|
||||
font-size: 0.7em;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.btn-sm {
|
||||
font-size: 0.75em;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
.reorder-buttons {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
</style>
|
||||
36
frontend/src/components/tables/TableRow.vue
Normal file
36
frontend/src/components/tables/TableRow.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<tr>
|
||||
<TableCell
|
||||
v-for="col in columns"
|
||||
:key="col.id"
|
||||
:row-id="row.id"
|
||||
:column="col"
|
||||
:cell-values="cellValues"
|
||||
@update="val => $emit('update', { rowId: row.id, columnId: col.id, value: val })"
|
||||
/>
|
||||
<td>
|
||||
<button class="danger" @click="$emit('delete')">Удалить</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import TableCell from './TableCell.vue';
|
||||
const props = defineProps(['row', 'columns', 'cellValues']);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.danger {
|
||||
background: #ff4d4f;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 0.3em 0.8em;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.danger:hover {
|
||||
background: #d9363e;
|
||||
}
|
||||
</style>
|
||||
155
frontend/src/components/tables/UserTableView.vue
Normal file
155
frontend/src/components/tables/UserTableView.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="notion-table-wrapper">
|
||||
<table class="notion-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="col in columns" :key="col.id" @dblclick="editColumn(col)">
|
||||
<span v-if="!editingCol || editingCol.id !== col.id">{{ col.name }}</span>
|
||||
<input v-else v-model="colEditValue" @blur="saveColEdit(col)" @keyup.enter="saveColEdit(col)" @keyup.esc="cancelColEdit" class="notion-input" />
|
||||
<button class="col-menu" @click.stop="openColMenu(col)">⋮</button>
|
||||
</th>
|
||||
<th>
|
||||
<button class="add-col" @click="addColumn">+</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in rows" :key="row.id">
|
||||
<td v-for="col in columns" :key="col.id" @click="startEdit(row, col)">
|
||||
<span v-if="!isEditing(row, col)">{{ getCellValue(row, col) || '—' }}</span>
|
||||
<input
|
||||
v-else
|
||||
v-model="editValue"
|
||||
@blur="saveEdit(row, col)"
|
||||
@keyup.enter="saveEdit(row, col)"
|
||||
@keyup.esc="cancelEdit"
|
||||
class="notion-input"
|
||||
autofocus
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<button class="row-menu" @click.stop="openRowMenu(row)">⋮</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td :colspan="columns.length + 1">
|
||||
<button class="add-row" @click="addRow">+ Добавить строку</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Модалки и меню можно реализовать через отдельные компоненты или простые div -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import tablesService from '../../services/tablesService';
|
||||
|
||||
const props = defineProps({ tableId: Number });
|
||||
const columns = ref([]);
|
||||
const rows = ref([]);
|
||||
const cellValues = ref([]);
|
||||
|
||||
// Для редактирования ячеек
|
||||
const editing = ref({ rowId: null, colId: null });
|
||||
const editValue = ref('');
|
||||
function isEditing(row, col) {
|
||||
return editing.value.rowId === row.id && editing.value.colId === col.id;
|
||||
}
|
||||
function startEdit(row, col) {
|
||||
editing.value = { rowId: row.id, colId: col.id };
|
||||
editValue.value = getCellValue(row, col) || '';
|
||||
}
|
||||
function saveEdit(row, col) {
|
||||
tablesService.saveCell({ rowId: row.id, columnId: col.id, value: editValue.value }).then(fetchTable);
|
||||
editing.value = { rowId: null, colId: null };
|
||||
}
|
||||
function cancelEdit() {
|
||||
editing.value = { rowId: null, colId: null };
|
||||
}
|
||||
function getCellValue(row, col) {
|
||||
const cell = cellValues.value.find(c => c.row_id === row.id && c.column_id === col.id);
|
||||
return cell ? cell.value : '';
|
||||
}
|
||||
|
||||
// Для редактирования названия столбца
|
||||
const editingCol = ref(null);
|
||||
const colEditValue = ref('');
|
||||
function editColumn(col) {
|
||||
editingCol.value = col;
|
||||
colEditValue.value = col.name;
|
||||
}
|
||||
function saveColEdit(col) {
|
||||
tablesService.updateColumn(col.id, { name: colEditValue.value }).then(fetchTable);
|
||||
editingCol.value = null;
|
||||
}
|
||||
function cancelColEdit() {
|
||||
editingCol.value = null;
|
||||
}
|
||||
|
||||
// Добавление/удаление
|
||||
function addColumn() {
|
||||
tablesService.addColumn(props.tableId, { name: 'Новый столбец', type: 'text' }).then(fetchTable);
|
||||
}
|
||||
function addRow() {
|
||||
tablesService.addRow(props.tableId).then(fetchTable);
|
||||
}
|
||||
function openColMenu(col) { /* TODO: контекстное меню */ }
|
||||
function openRowMenu(row) { /* TODO: контекстное меню */ }
|
||||
|
||||
// Загрузка данных
|
||||
async function fetchTable() {
|
||||
const data = await tablesService.getTable(props.tableId);
|
||||
columns.value = data.columns;
|
||||
rows.value = data.rows;
|
||||
cellValues.value = data.cellValues;
|
||||
}
|
||||
fetchTable();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.notion-table-wrapper {
|
||||
overflow-x: auto;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
.notion-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: #fff;
|
||||
}
|
||||
.notion-table th, .notion-table td {
|
||||
border: 1px solid #ececec;
|
||||
padding: 0.5em 0.7em;
|
||||
min-width: 80px;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
}
|
||||
.notion-table th {
|
||||
background: #f7f7f7;
|
||||
font-weight: 600;
|
||||
}
|
||||
.notion-table tr:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
.col-menu, .row-menu, .add-col, .add-row {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
font-size: 1.1em;
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
.col-menu:hover, .row-menu:hover, .add-col:hover, .add-row:hover {
|
||||
color: #2ecc40;
|
||||
}
|
||||
.notion-input {
|
||||
width: 100%;
|
||||
border: 1px solid #2ecc40;
|
||||
border-radius: 4px;
|
||||
padding: 0.2em 0.4em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,167 +1,236 @@
|
||||
<template>
|
||||
<div class="user-tables-list">
|
||||
<div class="header-block">
|
||||
<h2>Пользовательские таблицы</h2>
|
||||
<button class="btn btn-success" @click="showCreateTable = true">Создать таблицу</button>
|
||||
<div class="tables-container">
|
||||
<header class="tables-header">
|
||||
<!-- <h2>Пользовательские таблицы</h2> -->
|
||||
<button class="create-btn" @click="createTable">Создать таблицу</button>
|
||||
</header>
|
||||
<div class="tables-list">
|
||||
<div
|
||||
v-for="table in tables"
|
||||
:key="table.id"
|
||||
class="table-card"
|
||||
:class="{ selected: table.id === props.selectedTableId }"
|
||||
@click="selectTable(table)"
|
||||
>
|
||||
<div class="table-info">
|
||||
<div class="table-title">{{ table.name }}</div>
|
||||
<div class="table-desc">{{ table.description }}</div>
|
||||
</div>
|
||||
<div class="table-actions">
|
||||
<button @click.stop="renameTable(table)">Переименовать</button>
|
||||
<button class="danger" @click.stop="confirmDelete(table)">Удалить</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!tables.length" class="empty-state">
|
||||
<span>Нет таблиц. Создайте первую!</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isLoading" class="loading">Загрузка...</div>
|
||||
<div v-else>
|
||||
<div v-if="tables.length === 0" class="empty-block">Нет таблиц. Создайте первую!</div>
|
||||
<div v-else class="tables-cards">
|
||||
<div v-for="table in tables" :key="table.id" class="table-card">
|
||||
<div class="table-card-header">
|
||||
<input v-if="editingTableId === table.id" v-model="editName" @blur="saveName(table)" @keyup.enter="saveName(table)" class="table-name-input" />
|
||||
<h3 v-else @dblclick="startEditName(table)">{{ table.name }}</h3>
|
||||
<div class="table-card-actions">
|
||||
<button class="btn btn-info btn-sm" @click="$emit('open-table', table)">Открыть</button>
|
||||
<button class="btn btn-warning btn-sm" @click="startEditName(table)">Переименовать</button>
|
||||
<button class="btn btn-danger btn-sm" @click="deleteTable(table)">Удалить</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-card-desc">
|
||||
<textarea v-if="editingDescId === table.id" v-model="editDesc" @blur="saveDesc(table)" @keyup.enter="saveDesc(table)" class="table-desc-input" />
|
||||
<p v-else @dblclick="startEditDesc(table)">{{ table.description || 'Без описания' }}</p>
|
||||
</div>
|
||||
<div v-if="showDeleteModal" class="modal-backdrop">
|
||||
<div class="modal">
|
||||
<p>Удалить таблицу <b>{{ selectedTable?.name }}</b>?</p>
|
||||
<div class="modal-actions">
|
||||
<button class="danger" @click="deleteTable(selectedTable)">Удалить</button>
|
||||
<button @click="showDeleteModal = false">Отмена</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CreateTableModal v-if="showCreateTable" @close="showCreateTable = false" @table-created="onTableCreated" />
|
||||
<UserTableView
|
||||
v-if="props.selectedTableId"
|
||||
:table-id="props.selectedTableId"
|
||||
@close="emit('update:selected-table-id', null)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted, watch, nextTick } from 'vue';
|
||||
import UserTableView from './UserTableView.vue';
|
||||
import tablesService from '../../services/tablesService';
|
||||
import CreateTableModal from './CreateTableModal.vue';
|
||||
|
||||
const emit = defineEmits(['open-table', 'table-deleted']);
|
||||
const props = defineProps({
|
||||
selectedTableId: Number
|
||||
});
|
||||
const emit = defineEmits(['update:selected-table-id']);
|
||||
|
||||
const tables = ref([]);
|
||||
const isLoading = ref(false);
|
||||
const showCreateTable = ref(false);
|
||||
const editingTableId = ref(null);
|
||||
const editName = ref('');
|
||||
const editingDescId = ref(null);
|
||||
const editDesc = ref('');
|
||||
const showDeleteModal = ref(false);
|
||||
const selectedTable = ref(null);
|
||||
|
||||
function loadTables() {
|
||||
isLoading.value = true;
|
||||
tablesService.getTables()
|
||||
.then(res => {
|
||||
tables.value = [...res]; // Создаем новый массив для принудительного обновления
|
||||
})
|
||||
.finally(() => { isLoading.value = false; });
|
||||
async function fetchTables() {
|
||||
tables.value = await tablesService.getTables();
|
||||
}
|
||||
function onTableCreated() {
|
||||
showCreateTable.value = false;
|
||||
loadTables();
|
||||
}
|
||||
function startEditName(table) {
|
||||
editingTableId.value = table.id;
|
||||
editName.value = table.name;
|
||||
}
|
||||
function saveName(table) {
|
||||
if (editName.value && editName.value !== table.name) {
|
||||
tablesService.updateTable(table.id, { name: editName.value })
|
||||
.then(loadTables);
|
||||
onMounted(fetchTables);
|
||||
|
||||
function selectTable(table) {
|
||||
if (props.selectedTableId === table.id) return;
|
||||
if (props.selectedTableId) {
|
||||
emit('update:selected-table-id', null);
|
||||
nextTick(() => {
|
||||
emit('update:selected-table-id', table.id);
|
||||
});
|
||||
} else {
|
||||
emit('update:selected-table-id', table.id);
|
||||
}
|
||||
editingTableId.value = null;
|
||||
}
|
||||
function startEditDesc(table) {
|
||||
editingDescId.value = table.id;
|
||||
editDesc.value = table.description || '';
|
||||
function createTable() {
|
||||
const name = prompt('Название таблицы');
|
||||
if (name) {
|
||||
tablesService.createTable({ name }).then(fetchTables);
|
||||
}
|
||||
}
|
||||
function saveDesc(table) {
|
||||
tablesService.updateTable(table.id, { description: editDesc.value })
|
||||
.then(loadTables);
|
||||
editingDescId.value = null;
|
||||
function renameTable(table) {
|
||||
const name = prompt('Новое имя', table.name);
|
||||
if (name && name !== table.name) {
|
||||
tablesService.updateTable(table.id, { name }).then(fetchTables);
|
||||
}
|
||||
}
|
||||
function confirmDelete(table) {
|
||||
selectedTable.value = table;
|
||||
showDeleteModal.value = true;
|
||||
}
|
||||
function deleteTable(table) {
|
||||
console.log('deleteTable called with:', table);
|
||||
|
||||
if (!confirm(`Удалить таблицу "${table.name}"?`)) {
|
||||
console.log('User cancelled deletion');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('User confirmed deletion, proceeding...');
|
||||
|
||||
// Немедленно удаляем из локального списка для быстрой реакции UI
|
||||
tables.value = tables.value.filter(t => t.id !== table.id);
|
||||
console.log('Removed from local list, making API call...');
|
||||
|
||||
tablesService.deleteTable(table.id)
|
||||
.then((result) => {
|
||||
console.log('Таблица удалена:', result);
|
||||
// Уведомляем родительский компонент об удалении
|
||||
emit('table-deleted', table.id);
|
||||
// Принудительно обновляем список с сервера для синхронизации
|
||||
loadTables();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Ошибка удаления таблицы:', error);
|
||||
alert('Ошибка при удалении таблицы');
|
||||
// При ошибке восстанавливаем список с сервера
|
||||
loadTables();
|
||||
});
|
||||
tablesService.deleteTable(table.id).then(() => {
|
||||
showDeleteModal.value = false;
|
||||
fetchTables();
|
||||
if (props.selectedTableId === table.id) emit('update:selected-table-id', null);
|
||||
});
|
||||
}
|
||||
onMounted(loadTables);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-tables-list {
|
||||
padding: 18px 8px;
|
||||
.tables-container {
|
||||
max-width: 600px;
|
||||
margin: 2rem auto;
|
||||
background: #fff;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 2px 16px rgba(0,0,0,0.07);
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
.header-block {
|
||||
.tables-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.tables-cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 18px;
|
||||
.create-btn {
|
||||
background: #2ecc40;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.5em 1.2em;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.table-card {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px;
|
||||
min-width: 260px;
|
||||
max-width: 340px;
|
||||
flex: 1 1 260px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
.create-btn:hover {
|
||||
background: #27ae38;
|
||||
}
|
||||
.tables-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
.table-card-header {
|
||||
.table-card {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
background: #f8f9fa;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.03);
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
.table-card.selected {
|
||||
border: 2px solid #2ecc40;
|
||||
}
|
||||
.table-info {
|
||||
flex: 1 1 200px;
|
||||
}
|
||||
.table-title {
|
||||
font-weight: 600;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.table-desc {
|
||||
color: #888;
|
||||
font-size: 0.95em;
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
.table-actions {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.table-actions button {
|
||||
background: #eaeaea;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 0.4em 1em;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.table-actions button:hover {
|
||||
background: #d5d5d5;
|
||||
}
|
||||
.table-actions .danger {
|
||||
background: #ff4d4f;
|
||||
color: #fff;
|
||||
}
|
||||
.table-actions .danger:hover {
|
||||
background: #d9363e;
|
||||
}
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
margin: 2em 0;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* Модалка */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.18);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
.table-card-actions {
|
||||
.modal {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 2em 1.5em;
|
||||
box-shadow: 0 2px 16px rgba(0,0,0,0.13);
|
||||
min-width: 260px;
|
||||
}
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
gap: 1em;
|
||||
margin-top: 1.5em;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.table-card-desc {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.table-name-input, .table-desc-input {
|
||||
width: 100%;
|
||||
font-size: 1.1em;
|
||||
border: 1px solid #b0b0b0;
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.empty-block {
|
||||
color: #888;
|
||||
text-align: center;
|
||||
margin: 32px 0;
|
||||
}
|
||||
.loading {
|
||||
color: #888;
|
||||
margin: 16px 0;
|
||||
|
||||
/* Адаптивность */
|
||||
@media (max-width: 600px) {
|
||||
.tables-container {
|
||||
padding: 1em 0.3em;
|
||||
}
|
||||
.table-card {
|
||||
flex-direction: column;
|
||||
gap: 0.7em;
|
||||
padding: 0.7em;
|
||||
}
|
||||
.tables-header {
|
||||
flex-direction: column;
|
||||
gap: 0.7em;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.table-actions {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -416,15 +416,6 @@ const updateConnectionDisplay = (isConnected, authType, authData = {}) => {
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await checkAuth();
|
||||
});
|
||||
|
||||
// Очищаем интервал при размонтировании компонента
|
||||
onUnmounted(() => {
|
||||
stopIdentitiesPolling();
|
||||
});
|
||||
|
||||
/**
|
||||
* Связывает новый идентификатор с текущим аккаунтом пользователя
|
||||
* @param {string} type - Тип идентификатора (wallet, email, telegram)
|
||||
@@ -488,5 +479,11 @@ export function useAuthContext() {
|
||||
|
||||
// === useAuth теперь просто возвращает singleton ===
|
||||
export function useAuth() {
|
||||
onMounted(async () => {
|
||||
await checkAuth();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
stopIdentitiesPolling();
|
||||
});
|
||||
return authApi;
|
||||
}
|
||||
|
||||
@@ -1,52 +1,52 @@
|
||||
import axios from 'axios';
|
||||
import api from '../api/axios';
|
||||
|
||||
const api = '/api/tables';
|
||||
const tablesApi = '/api/tables';
|
||||
|
||||
export default {
|
||||
async getTables() {
|
||||
const res = await axios.get(`${api}?_t=${Date.now()}`);
|
||||
const res = await api.get(`${tablesApi}?_t=${Date.now()}`);
|
||||
return res.data;
|
||||
},
|
||||
async createTable(data) {
|
||||
const res = await axios.post(api, data);
|
||||
const res = await api.post(tablesApi, data);
|
||||
return res.data;
|
||||
},
|
||||
async getTable(id) {
|
||||
const res = await axios.get(`${api}/${id}`);
|
||||
const res = await api.get(`${tablesApi}/${id}`);
|
||||
return res.data;
|
||||
},
|
||||
async addColumn(tableId, data) {
|
||||
const res = await axios.post(`${api}/${tableId}/columns`, data);
|
||||
const res = await api.post(`${tablesApi}/${tableId}/columns`, data);
|
||||
return res.data;
|
||||
},
|
||||
async addRow(tableId) {
|
||||
const res = await axios.post(`${api}/${tableId}/rows`);
|
||||
const res = await api.post(`${tablesApi}/${tableId}/rows`);
|
||||
return res.data;
|
||||
},
|
||||
async saveCell(data) {
|
||||
const res = await axios.post(`${api}/cell`, data);
|
||||
const res = await api.post(`${tablesApi}/cell`, data);
|
||||
return res.data;
|
||||
},
|
||||
async deleteColumn(columnId) {
|
||||
const res = await axios.delete(`${api}/column/${columnId}`);
|
||||
const res = await api.delete(`${tablesApi}/column/${columnId}`);
|
||||
return res.data;
|
||||
},
|
||||
async deleteRow(rowId) {
|
||||
const res = await axios.delete(`${api}/row/${rowId}`);
|
||||
const res = await api.delete(`${tablesApi}/row/${rowId}`);
|
||||
return res.data;
|
||||
},
|
||||
async updateColumn(columnId, data) {
|
||||
const res = await axios.patch(`${api}/column/${columnId}`, data);
|
||||
const res = await api.patch(`${tablesApi}/column/${columnId}`, data);
|
||||
return res.data;
|
||||
},
|
||||
async updateTable(id, data) {
|
||||
const res = await axios.patch(`${api}/${id}`, data);
|
||||
const res = await api.patch(`${tablesApi}/${id}`, data);
|
||||
return res.data;
|
||||
},
|
||||
async deleteTable(id) {
|
||||
console.log('tablesService.deleteTable called with id:', id);
|
||||
try {
|
||||
const res = await axios.delete(`${api}/${id}`);
|
||||
const res = await api.delete(`${tablesApi}/${id}`);
|
||||
console.log('Delete response:', res.data);
|
||||
return res.data;
|
||||
} catch (error) {
|
||||
|
||||
Reference in New Issue
Block a user