move-file.html

<link rel="import" href="../polymer/polymer-element.html">

<link rel="import" href="mv-ls.html">
<link rel="import" href="move-icons.html">
<link rel="import" href="../create-directory/create-directory.html">
<link rel="import" href="../dcache-namespace/dcache-namespace.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../paper-spinner/paper-spinner.html">
<link rel="import" href="../paper-tooltip/paper-tooltip.html">
<link rel="import" href="../paper-fab/paper-fab.html">

<!--
`move-file`
Use to move a file in dcache-view

@demo demo/index.html
-->

<dom-module id="move-file">
    <template>
        <style>
            :host {
                display: block;
                margin: 0 -24px !important;
                width: 400px;
            }
            .title {
                text-align: center !important;
            }
            .buttons {
                background-color: #eaeaea;
                display: flex;
                position: relative;
                padding: 8px 8px 8px 24px;
                margin: 0;
                display: flex;
                -ms-flex-direction: row;
                -webkit-flex-direction: row;
                flex-direction: row;
                -ms-flex-pack: end;
                -webkit-justify-content: flex-end;
                justify-content: flex-end;
            }
            #content {
                padding:5px 24px;
                min-height: 300px;
                max-height: 300px;
                overflow-y: scroll !important;
            }
            .flex {
                flex: 1 1 auto;
            }
            paper-button {
                text-transform: none !important;
            }
            paper-spinner {
                position:absolute;
                top: 50%;
                right: 50%;
                bottom: auto;
                left: auto;
                z-index:4;
            }
            app-toolbar {
                box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
                --app-toolbar-font-size: 18px;
                color: white;
                background: #616161;
            }
            #createBtn{
                position:absolute;
                top: 83%;
                left: 24px;
                bottom: auto;
                right: auto;
                z-index:4;
                --paper-fab-background: #009688;
                --paper-fab-keyboard-focus-background: #009688;
            }
            #moveBtn {
                background-color: #00b395;
                color: white;
            }
            #moveBtn[disabled] {
                background-color: #e0e0e0;
                color: white;
            }
            #cancelBtn {
                color: #00796B;
            }
        </style>
        <div>
            <app-toolbar>
                <paper-icon-button id="backBtn" icon="move-icons:back" on-tap="back"></paper-icon-button>
                <div class="title" main-title>{{currentDirecroryName}}</div>
                <paper-icon-button icon="move-icons:close" on-tap="_close"></paper-icon-button>
            </app-toolbar>
            <div id="content">
                <paper-spinner active="{{loading}}"></paper-spinner>
                <div id="listHolder"></div>
            </div>
            <paper-fab id="createBtn" icon="move-icons:create-dir"
                       title="create new directory" on-tap="create"></paper-fab>
            <div class="buttons">
                <paper-button id="cancelBtn" on-tap="_close">Cancel</paper-button>
                <paper-button id="moveBtn" on-tap="move" disabled>Move here</paper-button>
            </div>
        </div>
    </template>
    <script>
        class MoveFile extends Polymer.Element
        {
            constructor()
            {
                super();
            }
            static get is()
            {
                return "move-file";
            }
            static get properties()
            {
                return {
                    currentPath: {
                        type: String,
                        notify: true,
                        observer:'__currentPathChanged'
                    },
                    currentDirecroryName: {
                        type: String,
                        computed: '_getDirectoryName(currentPath)'
                    },
                    restOrigin: {
                        type: String
                    },
                    data: {
                        type: Array,
                        observer:'__changedData'
                    },
                    mvFiles: {
                        type: Array
                    },

                    /**
                     * e.g.:
                     * auth = 'Basic YW5vbnltb3VzOm5vcGFzc3dvcmQ'
                     */
                    auth: {
                        type: String,
                        notify: true
                    },
                    loading: {
                        type: Boolean,
                        value: true
                    }
                }
            }
            ready()
            {
                super.ready();

                Polymer.RenderStatus.afterNextRender(this, () => {
                    this._startingPath = this.currentPath;
                    this.$.moveBtn.disabled = true;
                    if (this.data === null || this.data === undefined) {
                        this.__getData(this.currentPath);
                    } else {
                        const ls = new MsLs(this.currentPath,this.data);
                        this.shadowRoot.querySelector('#listHolder').appendChild(ls);
                        this.loading=false;
                    }
                });
            }
            __encodePath(path)
            {
                if (path === "/") {
                    return path;
                }
                const arr = (path.replace(/^\/+|\/+$/g, '')).split("/");
                if (arr.length === 0) {
                    return encodeURIComponent(arr[0]);
                }
                arr.forEach(function(element, index) {
                    arr[index] = encodeURIComponent(element);
                });
                return `/${arr.join('/')}`;
            }
            back()
            {
                if (this.currentPath !== "/") {
                    this.loading = true;
                    const pt = this.currentPath.lastIndexOf("/") === 0 ? "/":
                        this.currentPath.substring(0, this.currentPath.lastIndexOf("/"));
                    this.__getData(pt);
                }
            }
            _getDirectoryName(path)
            {
                return (path === "/") ? "Root" :
                    path.substring(path.lastIndexOf("/") + 1, path.length);
            }
            __getData(path)
            {
                this.currentPath = path;
                let namespace = new DcacheNamespace();
                namespace.auth = this.auth;
                const options = {
                    url: this.restOrigin === undefined ? location.origin : this.restOrigin,
                    path: this.__encodePath(path),
                    children: true
                };
                namespace.ls(options);
                namespace.promise.then((request) => {
                    this._isDir(request.response.children);
                }).catch((err) => {this._handleError(err.message);});
                namespace = document.createElement('span');
            }
            _isDir(arr)
            {
                let z = [];
                z = arr.filter(this._lsDirFilter);
                if (this._startingPath === this.currentPath) {
                    z = this._removeMovingItems(z);
                }
                this.data = z;
            }
            _lsDirFilter(item)
            {
                return item.fileType === "DIR";
            }
            _removeMovingItems(arr)
            {
                this.mvFiles.forEach(function(el) {
                    if (el.fileType === "DIR") {
                        const index = arr.findIndex(x => (x.fileName===el.fileName));
                        if (index !== -1) {
                            arr.splice(index, 1);
                        }
                    }
                });
                return arr;
            }
            __changedData(n,o)
            {
                const ls = new MsLs(this.currentPath, n);
                ls.addEventListener('mv-ls-list-path', (e) => {
                    this.__getData(e.detail.path);
                });
                ls.addEventListener('mv-ls-item-selected', (e) => {
                    const item = e.detail.item;
                    if (item !== null || item !== undefined ||
                        this._startingPath !== this.currentPath) {
                        this.$.moveBtn.disabled = false;
                    }
                    if ((item === null || item === undefined) &&
                        this._startingPath === this.currentPath) {
                        this.$.moveBtn.disabled = true;
                    }
                });
                this.shadowRoot.querySelector('#listHolder').innerHTML = "";
                this.shadowRoot.querySelector('#listHolder').appendChild(ls);
                this.loading = false;
            }
            move()
            {
                this.mvFiles.forEach((el) => {
                    this._move(el.fileName);
                })
            }
            _move(name)
            {
                const path = this._startingPath === "/" ?
                    `/${name}` : `${this._startingPath}/${name}`;
                const destFolder =
                    this.shadowRoot.querySelector('mv-ls').selectedItems;
                const dest = destFolder === null ?
                    `${this.currentPath}/${name}` :
                    `${this.currentPath}/${destFolder.fileName}/${name}`;
                const namespace = document.createElement('dcache-namespace');
                namespace.auth = this.auth;
                const options = {
                    url: this.restOrigin === undefined ?
                        `${location.origin}/api/v1/namespace` :
                        `${this.restOrigin}/api/v1/namespace`,
                    path: this.__encodePath(path),
                    destination: dest
                };
                namespace.mv(options);
                namespace.promise.then(() => {
                    const x = destFolder === null ? this.currentPath :
                        this.currentPath + `/${destFolder.fileName}`;
                    const res = {
                        sourceDirName: this._getDirectoryName(this._startingPath),
                        targetDirName: this._getDirectoryName(x)
                    };
                    this._moveHandler(res);
                }).catch((err) => {
                    this._handleError(err.message); //FIXME: incorrect, tidy up later.
                    this._moveErrorHandler(err.message);
                });
            }
            create()
            {
                this.shadowRoot.querySelector('#moveBtn').disabled = true;
                this.shadowRoot.querySelector('#createBtn').disabled = true;
                const c = document.createElement("create-directory");
                c.header = false;
                const lsHolder = this.shadowRoot.querySelector('#listHolder');
                c.dirFullPath = this.currentPath;
                c.addEventListener('create', (e) => {
                    const name = e.detail.newFolderName;
                    const namespace = document.createElement('dcache-namespace');
                    namespace.auth = this.auth;
                    namespace.promise.then((r) => {
                        lsHolder.innerHTML = "";
                        this.shadowRoot.querySelector('#createBtn').disabled = false;
                        const path = this.currentPath === "/" ? `/${name}` : `${this.currentPath}/${name}`;
                        if (this.currentPath === this._startingPath) {
                            this._moveCreateHandler(name);
                        }
                        this.__getData(path);
                    }).catch((err) => {
                        this._handleError(err.message);
                        this._moveErrorHandler(err.message);
                    });
                    const options = {
                        url: this.restOrigin === undefined ? `${location.origin}/api/v1/namespace` :
                            `${this.restOrigin}/api/v1/namespace`,
                        path: this.__encodePath(c.dirFullPath),
                        name: name
                    };
                    namespace.mkdir(options);
                });
                c.addEventListener('close', (e) => {
                    lsHolder.innerHTML = "";
                    this.shadowRoot.querySelector('#createBtn').disabled = false;
                    this.__getData(c.dirFullPath);
                });
                lsHolder.innerHTML = "";
                lsHolder.appendChild(c);
            }
            __currentPathChanged(n,o)
            {
                const b = this.shadowRoot.querySelector('mv-ls') === null ? null :
                    this.shadowRoot.querySelector('mv-ls').selectedItems;
                this.$.moveBtn.disabled = this._startingPath === n && b === null;
                if (n === "/") {
                    this.$.backBtn.style.visibility = "hidden";
                } else {
                    this.$.backBtn.style.visibility = "visible";
                }
            }
            _handleError(err)
            {
                const div = document.createElement("div");
                const h3 = document.createElement("h3");
                h3.innerHTML = "Something is really wrong with your current request :(";
                h3.style.marginTop = "30px";
                div.style.textAlign = "center";
                div.appendChild(h3);
                const code = document.createElement("code");
                code.innerHTML = err;
                div.appendChild(code);
                this.shadowRoot.querySelector('#listHolder').innerHTML = "";
                this.shadowRoot.querySelector('#listHolder').appendChild(div);
                this.$.moveBtn.disabled = true;
                this.$.createBtn.disabled = true;
            }
            /**
             * @event move
             */
            _moveHandler(e)
            {
                this.dispatchEvent(new CustomEvent('move', {detail: {response: e}}));
            }
            /**
             * @event error
             */
            _moveErrorHandler(e)
            {
                this.dispatchEvent(new CustomEvent('error', {detail: {error: e}}));
            }
            /**
             * @event move-create
             */
            _moveCreateHandler(e)
            {
                this.dispatchEvent(new CustomEvent('move-create', {detail: {name: e}}));
            }
            /**
             * @event dismiss
             */
            _close(e)
            {
                this.dispatchEvent(new CustomEvent('dismiss', {detail: {e: e}}));
            }
        }
        window.customElements.define(MoveFile.is, MoveFile);
    </script>
</dom-module>