Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #237 from LouisDelbosc/rename-page-on-click

Browse Source 
feat: add rename when clicking on selected label page
This commit is contained in:
jarek 2022-08-08 15:19:24 +02:00 committed by GitHub
commit 71e6f800bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/client/ui2018/pages.ts
View File

@ -17,6 +17,11 @@ export interface PageActions {
isReadonly: Observable<boolean>;
}
function isTargetSelected(target: HTMLElement) {
const parentItemHeader = target.closest('.' + itemHeader.className);
return parentItemHeader ? parentItemHeader.classList.contains('selected') : false;
}
// build the dom for a document page entry. It shows an icon (for now the first letter of the name,
// but later we'll support user selected icon), the name and a dots menu containing a "Rename" and
// "Remove" entries. Clicking "Rename" turns the page name into an editable input, which then call
@ -52,7 +57,10 @@ export function buildPageDom(name: Observable<string>, actions: PageActions, ...
domComputed(isRenaming, (isrenaming) => (
isrenaming ?
cssPageItem(
cssPageInitial(dom.text((use) => Array.from(use(name))[0])),
cssPageInitial(
testId('initial'),
dom.text((use) => Array.from(use(name))[0])
),
cssEditorInput(
{
initialValue: name.get() || '',
@ -68,8 +76,15 @@ export function buildPageDom(name: Observable<string>, actions: PageActions, ...
// firefox.
) :
cssPageItem(
cssPageInitial(dom.text((use) => Array.from(use(name))[0])),
cssPageName(dom.text(name), testId('label')),
cssPageInitial(
testId('initial'),
dom.text((use) => Array.from(use(name))[0]),
),
cssPageName(
dom.text(name),
testId('label'),
dom.on('click', (ev) => isTargetSelected(ev.target as HTMLElement) && isRenaming.set(true)),
),
cssPageMenuTrigger(
cssPageIcon('Dots'),
menu(pageMenu, {placement: 'bottom-start', parentSelectorToMark: '.' + itemHeader.className}),
@ -120,6 +135,7 @@ const cssPageName = styled('div', `
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-grow: 1;
.${treeViewContainer.className}-close & {
display: none;
}

41
test/nbrowser/Pages.ts
View File

@ -68,13 +68,13 @@ describe('Pages', function() {
await gu.waitForServer();
// Click on a page; check the URL, selected item, and the title of the view section.
await driver.findContent('.test-treeview-itemHeader', /Documents/).doClick();
await clickPage(/Documents/)
assert.match(await driver.getCurrentUrl(), /\/p\/3/);
assert.match(await driver.find('.test-treeview-itemHeader.selected').getText(), /Documents/);
assert.match(await gu.getActiveSectionTitle(), /Documents/i);
// Click on another page; check the URL, selected item, and the title of the view section.
await driver.findContent('.test-treeview-itemHeader', /People/).doClick();
await clickPage(/People/)
assert.match(await driver.getCurrentUrl(), /\/p\/2/);
assert.match(await driver.find('.test-treeview-itemHeader.selected').getText(), /People/);
assert.match(await gu.getActiveSectionTitle(), /People/i);
@ -107,6 +107,24 @@ describe('Pages', function() {
assert.deepEqual(await gu.getPageNames(), ['Interactions', 'Documents', 'People', 'User & Leads', 'Overview']);
});
it('should allow renaming table when click on page selected label', async () => {
// do rename
await clickPage(/People/)
await driver.findContent('.test-treeview-label', 'People').doClick();
await driver.find('.test-docpage-editor').sendKeys('PeopleRenamed', Key.ENTER);
await gu.waitForServer();
assert.deepEqual(
await gu.getPageNames(),
['Interactions', 'Documents', 'PeopleRenamed', 'User & Leads', 'Overview']
);
// revert changes
await gu.undo(2);
assert.deepEqual(await gu.getPageNames(), ['Interactions', 'Documents', 'People', 'User & Leads', 'Overview']);
})
it('should not allow blank page name', async () => {
// Begin renaming of People page
await gu.openPageMenu('People');
@ -196,7 +214,7 @@ describe('Pages', function() {
}
// goto page 'Interactions'
await driver.findContent('.test-treeview-itemHeader', /Interactions/).doClick();
await clickPage(/Interactions/);
// check selected page
assert.match(await selectedPage(), /Interactions/);
@ -231,14 +249,15 @@ describe('Pages', function() {
it('undo/redo should update url', async () => {
// goto page 'Interactions' and send keys
await driver.findContent('.test-treeview-itemHeader', /Interactions/).doClick();
await clickPage(/Interactions/);
assert.match(await driver.find('.test-treeview-itemHeader.selected').getText(), /Interactions/);
await driver.findContentWait('.gridview_data_row_num', /1/, 2000);
await driver.sendKeys(Key.ENTER, 'Foo', Key.ENTER);
await gu.waitForServer();
assert.deepEqual(await gu.getVisibleGridCells(0, [1]), ['Foo']);
// goto page 'People' and click undo
await driver.findContent('.test-treeview-itemHeader', /People/).doClick();
await clickPage(/People/);
await gu.waitForDocToLoad();
await gu.waitForUrl(/\/p\/2\b/); // check that url match p/2
@ -251,11 +270,14 @@ describe('Pages', function() {
// check that undo worked
assert.deepEqual(await gu.getVisibleGridCells(0, [1]), ['']);
// Click on next test should not trigger renaming input
await driver.findContent('.test-treeview-itemHeader', /People/).doClick();
});
it('Add new page should update url', async () => {
// goto page 'Interactions' and check that url updated
await driver.findContent('.test-treeview-itemHeader', /Interactions/).doClick();
await clickPage(/Interactions/);
await gu.waitForUrl(/\/p\/1\b/);
// Add new Page, check that url updated and page is selected
@ -264,7 +286,7 @@ describe('Pages', function() {
assert.match(await driver.find('.test-treeview-itemHeader.selected').getText(), /Table1/);
// goto page 'Interactions' and check that url updated and page selectd
await driver.findContent('.test-treeview-itemHeader', /Interactions/).doClick();
await clickPage(/Interactions/);
await gu.waitForUrl(/\/p\/1\b/);
assert.match(await driver.find('.test-treeview-itemHeader.selected').getText(), /Interactions/);
});
@ -449,6 +471,7 @@ describe('Pages', function() {
assert.deepEqual(await gu.getPageNames(), ['Table C', 'Table Last']);
// Removing page Table C should also show prompt (it is last page for Table1,Table D and TableC)
await gu.getPageItem('Table Last').click();
await gu.getPageItem('Table C').click();
assert.deepEqual(await gu.getSectionTitles(), ['TABLE C', 'TABLE D', 'TABLE1' ]);
await gu.removePage("Table C", { expectPrompt : true, tables: ['Table D', 'Table C', 'Table1'] });
@ -473,3 +496,7 @@ async function movePage(page: RegExp, target: {before: RegExp}|{after: RegExp})
})
.release());
}
function clickPage(name: string|RegExp) {
return driver.findContent('.test-treeview-itemHeader', name).find(".test-docpage-initial").doClick();
}