Merge branch 'TASK-7100' of github.com:opencb/jsorolla into TASK-7100

src/webcomponents/file/file-data-manager.js

@@ -16,11 +16,12 @@
 
 import {html, LitElement, nothing} from "lit";
 import UtilsNew from "../../core/utils-new.js";
-import "./file-view.js";
-import "../loading-spinner.js";
 import ModalUtils from "../commons/modal/modal-utils";
 import GridCommons from "../commons/grid-commons";
 import "../commons/data-list.js";
+import "../loading-spinner.js";
+import "./file-view.js";
+import "./folder-create.js"
 
 export default class FileDataManager extends LitElement {
 
@@ -393,8 +394,16 @@ export default class FileDataManager extends LitElement {
                 modalDraggable: true,
                 modalSize: "modal-lg",
             },
-            render: () => html`
-            `,
+            render: () => {
+                debugger
+                return html`
+                    <folder-create
+                        .route="${this.currentRoot}"
+                        .opencgaSession="${this.opencgaSession}"
+                        .displayConfig="${{mode: "page", type: "tabs", buttonsLayout: "upper"}}">
+                    </folder-create>
+                `;
+            },
         });
     }
 

src/webcomponents/file/folder-create.js

@@ -0,0 +1,181 @@
+/**
+ * Copyright 2015-2024 OpenCB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {html, LitElement} from "lit";
+import LitUtils from "../commons/utils/lit-utils.js";
+import NotificationUtils from "../commons/utils/notification-utils.js";
+import Types from "../commons/types.js";
+import "../commons/filters/catalog-search-autocomplete.js";
+import UserAdminGrid from "../organization/admin/user-admin-grid";
+
+export default class FolderCreate extends LitElement {
+
+    constructor() {
+        super();
+
+        this.#init();
+    }
+
+    createRenderRoot() {
+        return this;
+    }
+
+    static get properties() {
+        return {
+            opencgaSession: {
+                type: Object
+            },
+            displayConfig: {
+                type: Object
+            },
+        };
+    }
+
+    #init() {
+        this.folder = {};
+        // this.collection = {from: []};
+        // this.annotationSet = {};
+        this.isLoading = false;
+        this.displayConfigDefault = {
+            style: "margin: 10px",
+            titleWidth: 3,
+            defaultLayout: "horizontal",
+            buttonOkText: "Create"
+        };
+        this._config = this.getDefaultConfig();
+    }
+
+    #setLoading(value) {
+        this.isLoading = value;
+        this.requestUpdate();
+    }
+
+    update(changedProperties) {
+        if (changedProperties.has("displayConfig")) {
+            this.displayConfig = {
+                ...this.displayConfigDefault,
+                ...this.displayConfig
+            };
+            this._config = this.getDefaultConfig();
+        }
+        super.update(changedProperties);
+    }
+
+    onFieldChange(e) {
+        this.folder = {...e.detail.data}; // force to refresh the object-list
+        this.requestUpdate();
+    }
+
+    onClear() {
+        NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_CONFIRMATION, {
+            title: "Clear folder",
+            message: "Are you sure to clear?",
+            ok: () => {
+                this.sample = {};
+                this._config = this.getDefaultConfig();
+                this.requestUpdate();
+            },
+        });
+    }
+
+    onSubmit() {
+        debugger
+        this.folder.path = `${this.folder.path}/${this.folder.name}`;
+        const params = {
+            study: this.opencgaSession.study.fqn,
+            includeResult: true
+        };
+        let error;
+        this.#setLoading(true);
+        this.opencgaSession.opencgaClient.files()
+            .create(this.folder, params)
+            .then(() => {
+                this.folder = {};
+                this._config = this.getDefaultConfig();
+                NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_SUCCESS, {
+                    title: "Folder Create",
+                    message: "Folder created correctly"
+                });
+                LitUtils.dispatchCustomEvent(this, "folderCreate", this.folder, {}, error);
+            })
+            .catch(reason => {
+                error = reason;
+                NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, reason);
+            })
+            .finally(() => {
+                this.#setLoading(false);
+            });
+    }
+
+    render() {
+        if (this.isLoading) {
+            return html`<loading-spinner></loading-spinner>`;
+        }
+
+        return html`
+            <data-form
+                .data="${this.folder}"
+                .config="${this._config}"
+                @fieldChange="${e => this.onFieldChange(e)}"
+                @clear="${e => this.onClear(e)}"
+                @submit="${e => this.onSubmit(e)}">
+            </data-form>`;
+    }
+
+    getDefaultConfig() {
+        return {
+            display: this.displayConfig || this.displayConfigDefault,
+            sections: [
+                {
+                    title: "General Information",
+                    elements: [
+                        {
+                            title: "Type",
+                            field: "type",
+                            type: "input-text",
+                            required: true,
+                            display: {
+                                defaultValue: "DIRECTORY",
+                                disabled: true,
+                            },
+                        },
+                        {
+                            title: "Path",
+                            field: "path",
+                            type: "input-text",
+                            required: true,
+                            display: {
+                                disabled: true,
+                            },
+                        },
+                        {
+                            title: "Folder Name",
+                            field: "name",
+                            required: true,
+                            type: "input-text",
+                            validation: {
+                                validate: () => null,
+                                message: "",
+                            }
+                        },
+                    ],
+                },
+            ],
+        }
+    }
+}
+
+customElements.define("folder-create", FolderCreate);