Skip to content
Snippets Groups Projects
Commit 09518a60 authored by Tögl, Christina's avatar Tögl, Christina
Browse files

Add functionality for creating a new folder directly in the tabulator table

parent b8c3303f
Branches
No related tags found
No related merge requests found
Pipeline #63595 failed
Stage: test
Show whitespace changes
Inline Side-by-side
packages/file-handling/src/nextcloud-file-picker.js
+ 229
− 119
View file @ 09518a60
......@@ -59,12 +59,14 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.authInfo = '';
this.selectBtnDisabled = true;
this.storeSession = false;
this.boundCloseAdditionalMenuHandler = this.hideMoreMenu.bind(this);//this.closeAdditionalMenu.bind(this);
this.boundCloseAdditionalMenuHandler = this.hideMoreMenu.bind(this);
this.initateOpenAdditionalMenu = false;
this.showAdditionalMenu = false;
this.isInFavorites = false;
this.isInRecent = false;
this.userName = '';
this.disableRowClick = false;
}
static get scopedElements() {
......@@ -105,6 +107,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
showAdditionalMenu: { type: Boolean, attribute: 'show-nextcloud-additional-menu' },
userName: { type: Boolean, attribute: false },
storeSession: {type: Boolean, attribute: 'store-nextcloud-session'},
disableRowClick: {type: Boolean, attribute: false },
};
}
......@@ -278,6 +281,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
},
rowSelectionChanged: (data, rows) => {
if (!this.disableRowClick) {
if (data.length > 0 && this.directoriesOnly) {
this.folderIsSelected = i18n.t('nextcloud-file-picker.load-to-folder');
} else {
......@@ -292,8 +296,11 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this._("#select_all_checkmark").title = this.checkAllSelected() ? i18n.t('clipboard.select-nothing') : i18n.t('clipboard.select-all');
}
this.requestUpdate();
console.log('selection changed');
}
},
rowClick: (e, row) => {
if (!this.disableRowClick) {
const data = row.getData();
if (!row.getElement().classList.contains("no-select")) {
if (this.directoriesOnly) {
......@@ -319,6 +326,10 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
} else {
row.deselect();
}
} else {
// TODO
console.log('reached');
}
},
rowDblClick: (e, row) => {
// comment this in for double click directory change
......@@ -329,7 +340,9 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}*/
},
rowAdded: (row) => {
if (that._('#new-folder-row')) { //TODO find a better condition
row.getElement().classList.toggle("addRowAnimation");
}
},
dataLoaded: () => {
if (this.tabulatorTable !== null) {
......@@ -364,12 +377,13 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
*/
// TODO delete this
// add folder on enter
this._('#new-folder').addEventListener('keydown', function (e) {
if (e.keyCode === 13) {
that.addFolder();
}
});
// this._('#new-folder').addEventListener('keydown', function (e) {
// if (e.keyCode === 13) {
// that.addFolder();
// }
// });
});
}
......@@ -694,7 +708,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.tabulatorTable.setData(dataObject);
if (this._('#directory-content-table').querySelector("div.tabulator-tableHolder > div.tabulator-placeholder > span")) {
//this.tabulatorTable.querySelector("div.tabulator-tableHolder > div.tabulator-placeholder > span").innerText = i18n.t('nextcloud-file-picker.no-favorites');
this._('#directory-content-table').querySelector("div.tabulator-tableHolder > div.tabulator-placeholder > span").innerText = i18n.t('nextcloud-file-picker.no-favorites');
}
......@@ -830,7 +843,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
]);
if (this._('#directory-content-table').querySelector("div.tabulator-tableHolder > div.tabulator-placeholder > span")) {
//this.tabulatorTable.querySelector("div.tabulator-tableHolder > div.tabulator-placeholder > span").innerText = i18n.t('nextcloud-file-picker.no-recent-files');
this._('#directory-content-table').querySelector("div.tabulator-tableHolder > div.tabulator-placeholder > span").innerText = i18n.t('nextcloud-file-picker.no-recent-files');
}
......@@ -934,6 +946,9 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
} else {
this._("#download-button").removeAttribute("disabled");
}
if (this._('#directory-content-table').querySelector("div.tabulator-tableHolder > div.tabulator-placeholder > span")) {
this._('#directory-content-table').querySelector("div.tabulator-tableHolder > div.tabulator-placeholder > span").innerText = this.directoriesOnly ? i18n.t('nextcloud-file-picker.no-data') : i18n.t('nextcloud-file-picker.no-data-type');
}
}).catch(error => {
console.error(error.message);
......@@ -1463,14 +1478,119 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
if (this._('.addRowAnimation')) {
this._('.addRowAnimation').classList.remove('addRowAnimation');
}
this._('#new-folder-wrapper').classList.toggle('hidden');
if (this._('#new-folder-wrapper').classList.contains('hidden')) {
this._('#add-folder-button').setAttribute("name", "plus");
this._('#add-folder-button').setAttribute("title", i18n.t('nextcloud-file-picker.add-folder-open'));
// this._('#new-folder-wrapper').classList.toggle('hidden');
// if (this._('#new-folder-wrapper').classList.contains('hidden')) {
// this._('#add-folder-button').setAttribute("name", "plus");
// this._('#add-folder-button').setAttribute("title", i18n.t('nextcloud-file-picker.add-folder-open'));
// } else {
// this._('#add-folder-button').setAttribute("name", "close");
// this._('#add-folder-button').setAttribute("title", i18n.t('nextcloud-file-picker.add-folder-close'));
// this._('#new-folder').focus();
// }
// TODO move this to new function
let props = {permissions: 'RGDNVCK'};
var row = {
type: "directory",
filename: "",
basename: "",
props: props
};
this.tabulatorTable.addRow(row, 1, 1);
// row id
this._('#directory-content-table').querySelector("div.tabulator-tableHolder > div.tabulator-table > div.tabulator-row:nth-child(1)").setAttribute('id', 'new-folder-row');
this._('#new-folder-row').setAttribute('style', 'background: #259207; color: white');
this._('#new-folder-row').querySelector("div.tabulator-cell:nth-child(1) > div > span.tabulator-responsive-collapse-toggle-open").classList.add('new-folder-selected');
// this._('#directory-content-table').querySelector("div.tabulator-tableHolder > div.tabulator-table > div.tabulator-row:nth-child(1) > div.tabulator-cell:nth-child(3)")
// .classList.add('blinking');
this._('#new-folder-row').querySelector("div.tabulator-cell:nth-child(6)").innerText = '';
this._('#new-folder-row').querySelector("div.tabulator-cell:nth-child(3)").setAttribute('id', 'new-folder-cell');
// add text input field
this._('#new-folder-cell').innerHTML = '<input type="text" class="input" name="tf-new-folder" id ="tf-new-folder" value="" placeholder="'+ i18n.t('nextcloud-file-picker.new-folder-placeholder') + '" />';
// set focus to text field
// this._('#tf-new-folder').focus(); //TODO does it work?
// add event listener for pressing enter to save new folder with given name
this._('#tf-new-folder').addEventListener("keyup", ({key}) => {
if (key === "Enter") {
console.log('enter pressed');
this.addNewFolder();
}
})
// during folder creation it should not be possible to click something
this.disableRowClick = true;
// disable selection of rows during folder creation
this.tabulatorTable.getRows().forEach((row) => {
row.getElement().classList.add("no-select");
row.getElement().classList.remove("tabulator-selectable");
})
this._('#tf-new-folder').focus();
}
addNewFolder() {
const i18n = this._i18n;
if (this._('#tf-new-folder').value !== "") {
let folderName = this._('#tf-new-folder').value;
if (typeof this.directoryPath === 'undefined') {
this.directoryPath = '';
}
let folderPath = this.directoryPath + "/" + folderName;
this.webDavClient.createDirectory(folderPath).then(contents => {
const d = new Date();
let props = {permissions: 'RGDNVCK'};
this.tabulatorTable.addRow({
type: "directory",
filename: folderPath,
basename: folderName,
lastmod: d,
props: props
}, true);
this.statusText = i18n.t('nextcloud-file-picker.add-folder-success', {folder: folderName});
this.loading = false;
}).catch(error => {
this.loading = false;
if (error.message.search("405") !== -1) {
this.statusText = html`<span
class="error"> ${i18n.t('nextcloud-file-picker.add-folder-error', {folder: folderName})} </span>`;
} else {
this._('#add-folder-button').setAttribute("name", "close");
this._('#add-folder-button').setAttribute("title", i18n.t('nextcloud-file-picker.add-folder-close'));
this._('#new-folder').focus();
this.statusText = html`<span
class="error"> ${i18n.t('nextcloud-file-picker.webdav-error', {error: error.message})} </span>`;
}
})
.finally(() => { // folder should be created now - delete default entry
// this.tabulatorTable.deleteRow(row);
var row = this.tabulatorTable.getRowFromPosition(1);
row.delete();
// console.log(this.tabulatorTable.getData());
this.disableRowClick = false;
this.tabulatorTable.getRows().forEach((row) => {
let data = row.getData();
if (!this.checkFileType(data, this.allowedMimeTypes)) {
row.getElement().classList.remove("no-select");
row.getElement().classList.add("tabulator-selectable");
}
if (!(this.directoriesOnly && typeof data.mime !== 'undefined')) {
row.getElement().classList.remove("no-select");
row.getElement().classList.add("tabulator-selectable");
}
})
});
}
}
......@@ -1665,6 +1785,56 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
${commonStyles.getRadioAndCheckboxCss()}
${fileHandlingStyles.getFileHandlingCss()}
input[type=text]#tf-new-folder:focus {
border: none;
background: transparent;
width: 100%;
height: 100%;
}
input[type=text]#tf-new-folder:focus-visible {
outline: none;
}
input[type=text]#tf-new-folder::placeholder {
color: #000;
font-weight: 200;
}
input[type=text]#tf-new-folder {
border: 0px;
background: transparent;
width: 100%;
height: 100%;
}
.new-folder-selected::after {
filter: invert(100%);
}
.blinking::after {
// animation: blink 1s linear infinite alternate;
content: "";
margin-left: 2px;
width: 2px;
height: 1rem;
background: white;
display: inline-block;
animation: cursor-blink 1.5s steps(2) infinite;
}
.blinking {
display: flex;
align-items: center;
gap: 2px;
}
@keyframes cursor-blink {
0% {
opacity: 0;
}
}
.visible {
display: unset;
}
......@@ -1949,26 +2119,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
color: white;
}
#submenu {
height: 33px;
width: 33px;
justify-content: center;
display: flex;
align-items: center;
cursor: pointer;
}
.submenu-icon {
margin-top: -5px;
}
#submenu-content {
position: absolute;
right: 0px;
top: 33px;
z-index: 1;
}
.menu-buttons {
display: flex;
gap: 1em;
......@@ -2282,12 +2432,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
</a>
</li>
<li class="${classMap({hidden: !this.directoriesOnly})}">
<a class="${classMap({inactive: this.isInRecent || this.isInFavorites})}" @click="${() => { this.openAddFolderDialogue(); }}">
<a class="${classMap({inactive: this.isInRecent || this.isInFavorites || this.disableRowClick})}" @click="${() => { this.openAddFolderDialogue(); }}">
${i18n.t('nextcloud-file-picker.add-folder')}
</a>
</li>
<div class="inline-block">
<!-- <div class="inline-block">
<div id="new-folder-wrapper" class="hidden">
<input type="text"
placeholder="${i18n.t('nextcloud-file-picker.new-folder-placeholder')}"
......@@ -2300,37 +2450,15 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<dbp-icon name="checkmark-circle" class="nextcloud-add-folder"></dbp-icon>
</button>
</div>
</div>
<!-- old new folder code - begin -->
<!-- <div class="menu-buttons">
<div class="add-folder ${classMap({hidden: !this.directoriesOnly})}">
<div class="inline-block">
<div id="new-folder-wrapper" class="hidden">
<input type="text"
placeholder="${i18n.t('nextcloud-file-picker.new-folder-placeholder')}"
name="new-folder" class="input" id="new-folder"/>
<button class="button add-folder-button"
title="${i18n.t('nextcloud-file-picker.add-folder')}"
@click="${() => {
this.addFolder();
}}">
<dbp-icon name="checkmark-circle" class="nextcloud-add-folder"></dbp-icon>
</button>
</div> -->
<!-- old new folder code - end -->
<!-- <button class="button ${classMap({hidden: this.showAdditionalMenu})}"
<button class="button ${classMap({hidden: this.showAdditionalMenu})}"
title="${i18n.t('nextcloud-file-picker.add-folder-open')}"
@click="${() => {
this.openAddFolderDialogue();
}}">
<dbp-icon name="plus" class="nextcloud-add-folder" id="add-folder-button"></dbp-icon>
</button> -->
<!-- deleted in JF 08.11.2021s -->
<!-- <li class="close" @click="${this.hideMoreMenu}"><dbp-icon name="close" style="color: red"></dbp-icon></li> -->
</button>
<li class="${classMap({hidden: !this.storeSession})}" title="${i18n.t('nextcloud-file-picker.log-out')}">
<a class="" @click="${() => { this.logOut(); this.hideMoreMenu(); }}">
......@@ -2339,30 +2467,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
</li>
</ul>
<!-- TODO integrate submenu in additional menu
<div id="submenu" class="${classMap({hidden: !this.storeSession})}"
title="${i18n.t('nextcloud-file-picker.open-submenu')}"
@click="${() => {
this.toggleSubmenu();
}}">
<dbp-icon name="menu-dots" class="submenu-icon"></dbp-icon>
<div id="submenu-content" class="${classMap({hidden: !this.showSubmenu})}">
<button class="button"
title="${i18n.t('nextcloud-file-picker.log-out')}"
@click="${() => {
this.logOut();
}}">
${i18n.t('nextcloud-file-picker.log-out')}
</button>
</div>
</div>
-->
</div>
</div>
<!--TODO replace mode all checkbox place-->
<div class="filter-options-wrapper ${classMap({hidden: !this.isInRecent})}">
<label id="user_files_only_wrapper" class="button-container">
<!-- ${i18n.t('nextcloud-file-picker.replace-mode-all')} --> Show only my files <!--TODO-->
<label id="user-files-only-wrapper" class="button-container">
<!-- ${i18n.t('nextcloud-file-picker.replace-mode-all')} --> Zeige nur eigene Dateien <!--TODO-->
<input type="checkbox" id="user_files_only" name="user_files_only" value="user_files_only" > <!--@click="${() => { this.filterUserFilesOnly(); }}"-->
<span class="checkmark" id="user_files_only_checkmark"></span>
</label>
......
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment