Коммит b1d2f8ad создал по автору avathar's avatar avathar
Просмотр файлов

Merge branch 'develop' into 'develop' 

#156 Созданы меню для выбора действий над объектами; #158 Создан механизм добавления объектов, удаления, редактирования

See merge request teknokomo/universo-monorepo!83
владельцы e6925068 006b0e98
Скрыть пробелы
Построчно Рядом
universo-frontend/src/apps/cards/CreateCardDropDownList.ts 0 → 100644
Просмотр файла @ b1d2f8ad
import { COLOR_LIGHT, COLOR_PRIMARY, COLOR_DARK } from '../kanbans/Const';
import GetMaxTextObjectSize from '../kanbans/GetMaxTextObjectSize';
import CreateTextObject from '../kanbans/CreateTextObject';
import CreateCardPopupList from './CreateCardPopupList';
import { EndlessCanvas } from 'src/types/kanban_types';
import ObjectWrapper from 'src/utils/objectWrapper';
const CreateCardDropDownList = function (
scene: EndlessCanvas,
board: ObjectWrapper,
) {
const options = ['Редактировать карточку', 'Удалить карточку'];
const maxTextSize = GetMaxTextObjectSize(scene, options);
const label = scene.rexUI.add
.label({
background: scene.rexUI.add
.roundRectangle(0, 0, 2, 2, 0, COLOR_PRIMARY)
.setAlpha(0),
text: CreateTextObject(scene, '...'),
// .setFixedSize(
// maxTextSize.width,
// maxTextSize.height,
// )
space: {
left: 10,
right: 10,
top: 10,
bottom: 10,
icon: 10,
},
})
.setData('value', '');
let menu;
scene.rexUI.add.click(label).on('click', () => {
if (!menu || !menu.scene) {
//@ts-ignore
const menuX = label.getElement('text').getTopLeft().x;
const menuY = label.bottom;
menu = CreateCardPopupList(
scene,
board,
menuX -
maxTextSize.width +
GetMaxTextObjectSize(scene, ['...']).width / 2,
menuY,
options,
function (button) {
console.log('Click', button.text); // Добавленный console.log
if (button.text === 'Добавить карточку') {
// Ваш код для добавления новой колонки
} else if (button.text === 'Переименовать столбец') {
// Ваш код для переименования доски
console.log('button', button);
} else if (button.text === 'Удалить столбец') {
// Ваш код для переименования доски
console.log('button', button);
}
},
);
} else {
menu.collapse();
menu = undefined;
}
});
return label;
};
export default CreateCardDropDownList;
universo-frontend/src/apps/cards/CreateCardPopupList.ts 0 → 100644
Просмотр файла @ b1d2f8ad
import { COLOR_LIGHT, COLOR_PRIMARY, COLOR_DARK } from '../kanbans/Const';
import CreateTextObject from '../kanbans/CreateTextObject';
import CreateRequestModalColumn from '../kanbans/CreateRequestModalColumn';
import CreateRequestModal from '../kanbans/CreateRequestModal';
import CreateRequestModalBoard from '../kanbans/CreateRequestModalBoard';
import CreateRequestModalDelete from '../kanbans/CreateRequestModalDelete';
import { EndlessCanvas } from 'src/types/kanban_types';
import ObjectWrapper from 'src/utils/objectWrapper';
const CreateCardPopupList = function (
scene: EndlessCanvas,
card: ObjectWrapper,
x: number,
y: number,
options: string[],
onClick: (button: Phaser.GameObjects.Text) => void,
) {
let textInput = '';
const items = options.map((option) => ({ label: option }));
const menu = scene.rexUI.add.menu({
x: x,
y: y,
orientation: 'y',
items: items,
createButtonCallback: (item, i, options) => {
return scene.rexUI.add.label({
background: scene.rexUI.add.roundRectangle(0, 0, 2, 2, 0, COLOR_DARK),
text: CreateTextObject(scene, item.label),
space: {
left: 10,
right: 10,
top: 10,
bottom: 10,
icon: 10,
},
});
},
easeIn: {
duration: 500,
orientation: 'y',
},
easeOut: {
duration: 100,
orientation: 'y',
},
});
menu.on('button.click', function (button: Phaser.GameObjects.Text) {
if (button.text === 'Редактировать карточку') {
CreateRequestModal(
scene,
//@ts-ignore
scene.store.getCurrentState.get(card.uuid).name,
function (text) {
console.log(`Content: '${text}'`);
textInput = text;
},
)
.setPosition(400, 300)
.layout()
.modalPromise({
manualClose: true,
duration: {
in: 500,
out: 500,
},
})
.then(function (data) {
//@ts-ignore
if (data.text === 'Сохранить') {
if (textInput) {
const payload = {
nomo: textInput,
uuid: card.uuid,
//@ts-ignore
// kanvasoUuid: scene.store.getKanvaso[0].node.uuid,
};
//@ts-ignore
scene.store.onEditKanvasoObjekto(payload);
}
}
});
} else if (button.text === 'Удалить карточку') {
CreateRequestModalDelete(scene)
.setPosition(400, 300)
.layout()
.modalPromise({
manualClose: true,
duration: {
in: 500,
out: 500,
},
})
.then(function (button) {
//@ts-ignore
if (button.text === 'Удалить') {
const payload = {
uuid: card.uuid,
forigo: true,
};
//@ts-ignore
scene.store.onEditKanvasoObjekto(payload);
}
});
}
menu.collapse();
});
return menu;
};
export default CreateCardPopupList;
universo-frontend/src/apps/cards/CreateItem.ts
Просмотр файла @ b1d2f8ad
......@@ -9,60 +9,24 @@ import {
import { EndlessCanvas, ItemType } from 'src/types/kanban_types';
import CreateRequestModal from '../kanbans/CreateRequestModal';
import { EventBus, Events } from 'src/boot/eventBus';
import CreateCardDropDownList from './CreateCardDropDownList';
const CreateItem = (scene: EndlessCanvas, card: ObjectWrapper) => {
let textInput = '';
const icon = scene.add.image(0, 0, 'editicon').setDepth(1);
icon.setInteractive({ cursor: 'pointer' });
icon.on('pointerdown', () => {
CreateRequestModal(
scene,
//@ts-ignore
scene.store.getCurrentState.get(card.uuid).name,
function (text) {
console.log(`Content: '${text}'`);
textInput = text;
},
)
.setPosition(400, 300)
.layout()
.modalPromise({
manualClose: true,
duration: {
in: 500,
out: 500,
},
})
.then(function (data) {
//@ts-ignore
if (data.text === 'Сохранить') {
if (textInput) {
const payload = {
nomo: textInput,
uuid: card.uuid,
//@ts-ignore
// kanvasoUuid: scene.store.getKanvaso[0].node.uuid,
};
//@ts-ignore
scene.store.onEditKanvasoObjekto(payload);
}
}
});
});
const item: ItemType = scene.rexUI.add.label({
rtl: true,
//@ts-ignore
background: scene.rexUI.add.roundRectangle({
radius: 10,
color: COLOR_PRIMARY,
}),
background: scene.rexUI.add
//@ts-ignore
.roundRectangle({
radius: 10,
color: COLOR_PRIMARY,
}),
text: scene.add.text(0, 0, card.name, {
fontSize: 18,
}),
action: icon,
// action: createIcon(),
actionSize: 24,
align: 'left',
space: {
......@@ -73,6 +37,11 @@ const CreateItem = (scene: EndlessCanvas, card: ObjectWrapper) => {
actionRight: 5,
},
});
const dropDownButton = CreateCardDropDownList(scene, card);
dropDownButton.setPosition(item.width - dropDownButton.width, 0);
item.add(dropDownButton);
item.setData('uuid', card.uuid);
//@ts-ignore
......
universo-frontend/src/apps/kanbans/CreateColumnDropDownList.ts 0 → 100644
Просмотр файла @ b1d2f8ad
import { COLOR_LIGHT, COLOR_PRIMARY, COLOR_DARK } from './Const';
import GetMaxTextObjectSize from './GetMaxTextObjectSize';
import CreateTextObject from './CreateTextObject';
import CreateColumnPopupList from './CreateColumnPopupList';
import { EndlessCanvas } from 'src/types/kanban_types';
import ObjectWrapper from 'src/utils/objectWrapper';
const CreateColumnDropDownList = function (
scene: EndlessCanvas,
board: ObjectWrapper,
) {
const options = [
'Добавить карточку',
'Переименовать столбец',
'Удалить столбец',
];
const maxTextSize = GetMaxTextObjectSize(scene, options);
const label = scene.rexUI.add
.label({
background: scene.rexUI.add
.roundRectangle(0, 0, 2, 2, 0, COLOR_PRIMARY)
.setAlpha(0),
text: CreateTextObject(scene, '...'),
// .setFixedSize(
// maxTextSize.width,
// maxTextSize.height,
// )
space: {
left: 10,
right: 10,
top: 10,
bottom: 10,
icon: 10,
},
})
.setData('value', '');
let menu;
scene.rexUI.add.click(label).on('click', () => {
if (!menu || !menu.scene) {
//@ts-ignore
const menuX = label.getElement('text').getTopLeft().x;
const menuY = label.bottom;
menu = CreateColumnPopupList(
scene,
board,
menuX -
maxTextSize.width +
GetMaxTextObjectSize(scene, ['...']).width / 2,
menuY,
options,
function (button) {
console.log('Click', button.text); // Добавленный console.log
if (button.text === 'Добавить карточку') {
// Ваш код для добавления новой колонки
} else if (button.text === 'Переименовать столбец') {
// Ваш код для переименования доски
console.log('button', button);
} else if (button.text === 'Удалить столбец') {
// Ваш код для переименования доски
console.log('button', button);
}
},
);
} else {
menu.collapse();
menu = undefined;
}
});
return label;
};
export default CreateColumnDropDownList;
universo-frontend/src/apps/kanbans/CreateColumnPanel.ts
Просмотр файла @ b1d2f8ad
......@@ -5,6 +5,7 @@ import CreateItemsBox from '../cards/CreateItemsBox';
import { EndlessCanvas } from 'src/types/kanban_types';
import CreateRequestModal from '../kanbans/CreateRequestModal';
import { EventBus, Events } from 'src/boot/eventBus';
import CreateColumnDropDownList from './CreateColumnDropDownList';
const CreateColumnPanel = (scene: EndlessCanvas, column: ObjectWrapper) => {
const panel = scene.rexUI.add
......@@ -34,42 +35,7 @@ const CreateColumnPanel = (scene: EndlessCanvas, column: ObjectWrapper) => {
const CreateTitle = (scene: EndlessCanvas, column: ObjectWrapper, callback) => {
let textInput = '';
const icon = scene.add.image(0, 0, 'editicon').setDepth(1);
icon.setInteractive({ cursor: 'pointer' });
icon.on('pointerdown', () => {
CreateRequestModal(
scene,
//@ts-ignore
scene.store.getCurrentState.get(column.uuid).name,
function (text) {
console.log(`Content: '${text}'`);
textInput = text;
},
)
.setPosition(400, 300)
.layout()
.modalPromise({
manualClose: true,
duration: {
in: 500,
out: 500,
},
})
.then(function (data) {
//@ts-ignore
if (data.text === 'Сохранить') {
if (textInput) {
const payload = {
nomo: textInput,
uuid: column.uuid,
};
//@ts-ignore
scene.store.onEditKanvasoObjekto(payload);
}
}
});
});
const title = scene.rexUI.add.label({
rtl: true,
//@ts-ignore
......@@ -81,7 +47,7 @@ const CreateTitle = (scene: EndlessCanvas, column: ObjectWrapper, callback) => {
fontSize: 18,
}),
align: 'left',
action: icon,
//action: dropDownButton,
actionSize: 24,
space: {
left: 5,
......@@ -92,6 +58,10 @@ const CreateTitle = (scene: EndlessCanvas, column: ObjectWrapper, callback) => {
},
});
const dropDownButton = CreateColumnDropDownList(scene, column);
dropDownButton.setPosition(title.width - dropDownButton.width, 0);
title.add(dropDownButton);
EventBus.$on(Events.Change, (uuid, object) => {
if (uuid === column.uuid) {
//@ts-ignore
......
universo-frontend/src/apps/kanbans/CreateColumnPopupList.ts 0 → 100644
Просмотр файла @ b1d2f8ad
import { COLOR_LIGHT, COLOR_PRIMARY, COLOR_DARK } from './Const';
import CreateTextObject from './CreateTextObject';
import CreateRequestModalColumn from './CreateRequestModalColumn';
import CreateRequestModal from './CreateRequestModal';
import CreateRequestModalBoard from './CreateRequestModalBoard';
import CreateRequestModalDelete from './CreateRequestModalDelete';
import { EndlessCanvas } from 'src/types/kanban_types';
import ObjectWrapper from 'src/utils/objectWrapper';
const CreateColumnPopupList = function (
scene: EndlessCanvas,
column: ObjectWrapper,
x: number,
y: number,
options: string[],
onClick: (button: Phaser.GameObjects.Text) => void,
) {
let textInput = '';
const items = options.map((option) => ({ label: option }));
const menu = scene.rexUI.add.menu({
x: x,
y: y,
orientation: 'y',
items: items,
createButtonCallback: (item, i, options) => {
return scene.rexUI.add.label({
background: scene.rexUI.add.roundRectangle(0, 0, 2, 2, 0, COLOR_DARK),
text: CreateTextObject(scene, item.label),
space: {
left: 10,
right: 10,
top: 10,
bottom: 10,
icon: 10,
},
});
},
easeIn: {
duration: 500,
orientation: 'y',
},
easeOut: {
duration: 100,
orientation: 'y',
},
});
menu.on('button.click', function (button: Phaser.GameObjects.Text) {
if (button.text === 'Добавить карточку') {
CreateRequestModal(scene, '', function (text) {
console.log(`Content: '${text}'`);
textInput = text;
})
.setPosition(400, 300)
.layout()
.modalPromise({
manualClose: true,
duration: {
in: 500,
out: 500,
},
})
.then(function (button) {
//@ts-ignore
if (button.text === 'Сохранить') {
if (textInput) {
const payload = {
nomo: textInput,
//@ts-ignore
kanvasoUuid: scene.store.getKanvaso[0].node.uuid,
priskribo: textInput,
tipoId: 4,
ligiloPosedantoUuid: column.uuid,
};
console.log(payload);
//@ts-ignore
console.log(scene.store.getKanvaso[0].node.uuid);
//@ts-ignore
scene.store.onEditKanvasoObjekto(payload);
}
}
});
} else if (button.text === 'Переименовать столбец') {
CreateRequestModalBoard(scene, column, function (text) {
console.log(`Content: '${text}'`);
textInput = text;
})
.setPosition(400, 300)
.layout()
.modalPromise({
manualClose: true,
duration: {
in: 500,
out: 500,
},
})
.then(function (data) {
//@ts-ignore
if (data.text === 'Сохранить') {
if (textInput) {
const payload = {
nomo: textInput,
uuid: column.uuid,
//@ts-ignore
// kanvasoUuid: scene.store.getKanvaso[0].node.uuid,
};
//@ts-ignore
scene.store.onEditKanvasoObjekto(payload);
}
}
});
} else if (button.text === 'Удалить столбец') {
CreateRequestModalDelete(scene)
.setPosition(400, 300)
.layout()
.modalPromise({
manualClose: true,
duration: {
in: 500,
out: 500,
},
})
.then(function (button) {
//@ts-ignore
if (button.text === 'Удалить') {
const payload = {
uuid: column.uuid,
forigo: true,
};
//@ts-ignore
scene.store.onEditKanvasoObjekto(payload);
}
});
}
menu.collapse();
});
return menu;
};
export default CreateColumnPopupList;
universo-frontend/src/apps/kanbans/CreateDropDownList.ts
Просмотр файла @ b1d2f8ad
......@@ -9,17 +9,18 @@ const CreateDropDownList = function (
scene: EndlessCanvas,
board: ObjectWrapper,
) {
const options = ['Добавить столбец', 'Переименовать доску'];
const options = ['Добавить столбец', 'Переименовать доску', 'Удалить доску'];
const maxTextSize = GetMaxTextObjectSize(scene, options);
const label = scene.rexUI.add
.label({
background: scene.rexUI.add
.roundRectangle(0, 0, 2, 2, 0, COLOR_PRIMARY)
.setAlpha(0),
text: CreateTextObject(scene, '...').setFixedSize(
maxTextSize.width,
maxTextSize.height,
),
text: CreateTextObject(scene, '...'),
// .setFixedSize(
// maxTextSize.width,
// maxTextSize.height,
// )
space: {
left: 10,
right: 10,
......@@ -41,7 +42,9 @@ const CreateDropDownList = function (
menu = CreatePopupList(
scene,
board,
menuX,
menuX -
maxTextSize.width +
GetMaxTextObjectSize(scene, ['...']).width / 2,
menuY,
options,
function (button) {
......@@ -51,9 +54,10 @@ const CreateDropDownList = function (
} else if (button.text === 'Переименовать доску') {
// Ваш код для переименования доски
console.log('button', button);
} else if (button.text === 'Удалить доску') {
// Ваш код для переименования доски
console.log('button', button);
}
menu?.collapse();
menu = undefined;
},
);
} else {
......
universo-frontend/src/apps/kanbans/CreatePopupList.ts
Просмотр файла @ b1d2f8ad
import { Kanvaso } from './../../types/stores/kanvaso.d';
import { COLOR_LIGHT, COLOR_PRIMARY, COLOR_DARK } from './Const';
import CreateTextObject from './CreateTextObject';
import CreateRequestModalColumn from './CreateRequestModalColumn';
import CreateRequestModalBoard from './CreateRequestModalBoard';
import CreateRequestModal from './CreateRequestModal';
import CreateRequestModalDelete from './CreateRequestModalDelete';
import { EndlessCanvas } from 'src/types/kanban_types';
import ObjectWrapper from 'src/utils/objectWrapper';
......@@ -45,7 +48,10 @@ const CreatePopupList = function (
menu.on('button.click', function (button: Phaser.GameObjects.Text) {
if (button.text === 'Добавить столбец') {
CreateRequestModalColumn(scene)
CreateRequestModal(scene, '', function (text) {
console.log(`Content: '${text}'`);
textInput = text;
})
.setPosition(400, 300)
.layout()
.modalPromise({
......@@ -55,8 +61,25 @@ const CreatePopupList = function (
out: 500,
},
})
.then(function (data) {
console.log(data);
.then(function (button) {
//@ts-ignore
if (button.text === 'Сохранить') {
if (textInput) {
const payload = {
nomo: textInput,
//@ts-ignore
kanvasoUuid: scene.store.getKanvaso[0].node.uuid,
priskribo: textInput,
tipoId: 3,
ligiloPosedantoUuid: board.childrens[0].uuid,
};
console.log(payload);
//@ts-ignore
console.log(scene.store.getKanvaso[0].node.uuid);
//@ts-ignore
scene.store.onEditKanvasoObjekto(payload);
}
}
});
} else if (button.text === 'Переименовать доску') {
CreateRequestModalBoard(scene, board, function (text) {
......@@ -87,6 +110,28 @@ const CreatePopupList = function (
}
}
});
} else if (button.text === 'Удалить доску') {
CreateRequestModalDelete(scene)
.setPosition(400, 300)
.layout()
.modalPromise({
manualClose: true,
duration: {
in: 500,
out: 500,
},
})
.then(function (button) {
//@ts-ignore
if (button.text === 'Удалить') {
const payload = {
uuid: board.uuid,
forigo: true,
};
//@ts-ignore
scene.store.onEditKanvasoObjekto(payload);
}
});
}
menu.collapse();
});
......
universo-frontend/src/apps/kanbans/CreateRequestModal.ts
Просмотр файла @ b1d2f8ad
......@@ -3,17 +3,18 @@ import { COLOR_LIGHT, COLOR_PRIMARY, COLOR_DARK } from './Const';
const CreateRequestModal = (scene: EndlessCanvas, text: string, callback) => {
const content = text;
const x = scene.cameras.main.width / 2;
const y = scene.cameras.main.height / 2;
const textArea = scene.rexUI.add
.textAreaInput({
x: 400,
y: 300,
x: scene.cameras.main.width / 2,
y: scene.cameras.main.height / 2,
width: 200, // Увеличена ширина
height: 20,
background: scene.rexUI.add.roundRectangle(
0,
0,
x,
y,
20,
20,
0,
......@@ -79,10 +80,18 @@ const CreateRequestModal = (scene: EndlessCanvas, text: string, callback) => {
})
.setDepth(3);
const dialog = scene.rexUI.add
.dialog({
background: scene.rexUI.add
.roundRectangle(0, 0, 1020, 100, 20, 0xffffff) // Увеличена ширина
.roundRectangle(
scene.cameras.main.width / 2,
scene.cameras.main.height / 2,
1020,
100,
20,
0xffffff,
) // Увеличена ширина
.setStrokeStyle(2, 0x000000),
title: scene.rexUI.add.label({
......@@ -127,7 +136,7 @@ const CreateRequestModal = (scene: EndlessCanvas, text: string, callback) => {
.on('button.out', function (button, groupName, index, pointer, event) {
button.getElement('background').setStrokeStyle();
});
dialog.layout();
dialog.setPosition(x, y).layout();
return dialog;
};
......
universo-frontend/src/apps/kanbans/CreateRequestModalDelete.ts 0 → 100644
Просмотр файла @ b1d2f8ad
import { EndlessCanvas } from 'src/types/kanban_types';
import { COLOR_LIGHT, COLOR_PRIMARY, COLOR_DARK } from './Const';
import CreateModalLabel from './CreateModalLabel';
const CreateRequestModalColumn = (scene: EndlessCanvas) => {
const cancelButton = scene.rexUI.add
.label({
background: scene.rexUI.add.roundRectangle(0, 0, 0, 0, 20, COLOR_DARK),
text: scene.add.text(0, 0, 'Отменить', { fontSize: '24px' }),
space: { left: 10, right: 10, top: 10, bottom: 10 },
})
.setDepth(3);
const saveButton = scene.rexUI.add
.label({
background: scene.rexUI.add.roundRectangle(0, 0, 0, 0, 20, COLOR_LIGHT),
text: scene.add.text(0, 0, 'Удалить', { fontSize: '24px' }),
space: { left: 10, right: 10, top: 10, bottom: 10 },
})
.setDepth(3);
const dialog = scene.rexUI.add
.dialog({
//@ts-ignore
minWidth: 650,
background: scene.rexUI.add
.roundRectangle(0, 0, 1020, 100, 20, 0xffffff) // Увеличена ширина
.setStrokeStyle(2, 0x000000),
title: scene.rexUI.add.label({
text: scene.add.text(0, 0, 'Редактирование объекта', {
fontSize: '24px',
color: '#000000',
}),
space: {
left: 20, // Увеличены отступы
right: 20,
top: 15,
bottom: 15,
},
}),
actions: [cancelButton, saveButton],
space: {
title: 30, // Увеличены отступы
content: 30,
action: 20,
left: 25,
right: 25,
top: 25,
bottom: 25,
},
align: {
actions: 'right',
},
expand: {
content: false,
},
})
.on('button.over', function (button, groupName, index, pointer, event) {
button.getElement('background').setStrokeStyle(1, 0xffffff);
})
.on('button.out', function (button, groupName, index, pointer, event) {
button.getElement('background').setStrokeStyle();
});
dialog.layout();
return dialog;
};
export default CreateRequestModalColumn;
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать