@things-factory/board-ui 6.2.102 → 6.2.103

package/dist-client/pages/board-list-page.d.ts

@@ -0,0 +1,109 @@
+import '@material/mwc-icon';
+import '../viewparts/board-info';
+import '../viewparts/group-info';
+import '../board-list/board-tile-list';
+import '../board-list/group-bar';
+import { PageView } from '@operato/shell';
+declare const BoardListPage_base: (new (...args: any[]) => import("lit").LitElement) & (new (...args: any[]) => {
+    _storeUnsubscribe: import("redux").Unsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    stateChanged(_state: unknown): void;
+    readonly isConnected: boolean;
+}) & (new (...args: any[]) => {
+    _infiniteScrollOptions: {
+        threshold: number;
+        limit: number;
+        totalProp: string;
+        pageProp: string;
+    };
+    onScroll: import("lodash").DebouncedFunc<(e: any) => void>;
+    scrollAction(): Promise<void>;
+}) & typeof PageView;
+export declare class BoardListPage extends BoardListPage_base {
+    static styles: import("lit").CSSResult[];
+    groupId?: string;
+    groups: any[];
+    boards: any[];
+    favorites: any[];
+    searchText: string;
+    scrollTargetEl: HTMLElement;
+    private _page;
+    private _total;
+    private page?;
+    get context(): {
+        title: {
+            icon: string;
+            text: string;
+        };
+        search: {
+            handler: (search: any) => void;
+            value: string;
+        };
+        board_topmenu: boolean;
+    };
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    refresh(): Promise<void>;
+    getBoards({ page, limit }?: {
+        page?: number | undefined;
+        limit?: number | undefined;
+    }): Promise<any>;
+    getFavoriteBoards({ page, limit }?: {
+        page?: number | undefined;
+        limit?: number | undefined;
+    }): Promise<any>;
+    getMyBoards({ page, limit }?: {
+        page?: number | undefined;
+        limit?: number | undefined;
+    }): Promise<any>;
+    refreshBoards(): Promise<void>;
+    appendBoards(): Promise<void>;
+    scrollAction(): Promise<void>;
+    pageInitialized(): Promise<void>;
+    pageUpdated(changes: any, lifecycle: any): Promise<void>;
+    stateChanged(state: any): void;
+    firstUpdated(): void;
+    onInfoBoard(board: any): Promise<void>;
+    onInfoGroup(groupId: any): Promise<void>;
+    onCreateGroup(group: any): Promise<void>;
+    onUpdateGroup(group: any): Promise<void>;
+    onDeleteGroup(group: any): Promise<void>;
+    onImportBoards({ group, files, overwrite }: {
+        group: any;
+        files: any;
+        overwrite: any;
+    }): Promise<void>;
+    onCreateBoard(board: any): Promise<void>;
+    onCloneBoard({ id, name, description, targetSubdomain, targetGroupId }: {
+        id: any;
+        name: any;
+        description: any;
+        targetSubdomain: any;
+        targetGroupId: any;
+    }): Promise<void>;
+    onReleaseBoard(board: any): Promise<void>;
+    onRevertBoardVersion({ id, version }: {
+        id: any;
+        version: any;
+    }): Promise<void>;
+    onUpdateBoard(board: any): Promise<void>;
+    onDeleteBoard(board: any): Promise<void>;
+    onJoinPlayGroup({ board, playGroup }: {
+        board: any;
+        playGroup: any;
+    }): Promise<void>;
+    onLeavePlayGroup({ board, playGroup }: {
+        board: any;
+        playGroup: any;
+    }): Promise<void>;
+    onRegisterTemplate({ id, name, description, visibility }: {
+        id: any;
+        name: any;
+        description: any;
+        visibility: any;
+    }): Promise<void>;
+    refreshFavorites(): Promise<void>;
+    _notify(level: 'info' | 'error' | 'warn', message: any, ex?: any): void;
+}
+export {};

package/dist-client/pages/board-list-page.js

@@ -0,0 +1,532 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/mwc-icon';
+import '../viewparts/board-info';
+import '../viewparts/group-info';
+import '../board-list/board-tile-list';
+import '../board-list/group-bar';
+import gql from 'graphql-tag';
+import { css, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { openOverlay } from '@operato/layout';
+import { pulltorefresh } from '@operato/pull-to-refresh';
+import { navigate, PageView, store } from '@operato/shell';
+import { ScrollbarStyles } from '@operato/styles';
+import InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js';
+import { UPDATE_FAVORITES } from '@things-factory/fav-base';
+import { swipe } from '@things-factory/utils';
+import { cloneBoard, releaseBoard, revertBoardVersion, createBoard, createGroup, deleteBoard, deleteGroup, fetchBoardList, fetchFavoriteBoardList, fetchMyBoardList, fetchGroupList, updateBoard, updateGroup, importBoards } from '../graphql';
+let BoardListPage = class BoardListPage extends localize(i18next)(connect(store)(InfiniteScrollable(PageView))) {
+    get context() {
+        var groupId = this.groupId;
+        var group = this.groups && this.groups.find(group => group.id === groupId);
+        return {
+            title: {
+                icon: 'dashboard',
+                text: group ? 'Group ' + group.name : groupId == 'favor' ? 'Favorite' : groupId == 'mywork' ? 'My works' : 'Board List'
+            },
+            search: {
+                handler: search => {
+                    this.searchText = search;
+                    this.refreshBoards();
+                },
+                value: this.searchText || ''
+            },
+            board_topmenu: true
+        };
+    }
+    constructor() {
+        super();
+        this.groups = [];
+        this.boards = [];
+        this.favorites = [];
+        this.searchText = '';
+        this._page = 1;
+        this._total = 0; /* required for infinite-scrolling */
+        this._infiniteScrollOptions.limit = 50;
+    }
+    render() {
+        return html `
+      <group-bar .groups=${this.groups} .groupId=${this.groupId} targetPage="board-list" @info-group=${e => this.onInfoGroup(e.detail)}></group-bar>
+
+      <board-tile-list
+        id="list"
+        .boards=${this.boards}
+        .favorites=${this.favorites}
+        .groups=${this.groups}
+        .group=${this.groupId}
+        search-text=${this.searchText}
+        @info-board=${e => this.onInfoBoard(e.detail)}
+        @scroll=${e => {
+            this.onScroll(e);
+        }}
+        @create-board=${e => this.onCreateBoard(e.detail)}
+        @refresh-favorites=${e => this.refreshFavorites()}
+        creatable
+      ></board-tile-list>
+    `;
+    }
+    async refresh() {
+        this.groups = (await fetchGroupList()).groups.items;
+        if (this.groups) {
+            await this.refreshBoards();
+        }
+    }
+    async getBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {
+        if (this.groupId && this.groupId == 'favor') {
+            return await this.getFavoriteBoards({
+                page,
+                limit
+            });
+        }
+        else if (this.groupId && this.groupId == 'mywork') {
+            return await this.getMyBoards({
+                page,
+                limit
+            });
+        }
+        const filters = [];
+        if (this.groupId) {
+            filters.push({
+                name: 'groupId',
+                operator: 'eq',
+                value: this.groupId
+            });
+        }
+        if (this.searchText) {
+            filters.push({
+                name: 'name',
+                operator: 'search',
+                value: '%' + this.searchText + '%'
+            });
+        }
+        var listParam = {
+            filters,
+            sortings: [
+                {
+                    name: 'name',
+                    desc: false
+                }
+            ],
+            pagination: {
+                page,
+                limit
+            }
+        };
+        return (await fetchBoardList(listParam)).boards;
+    }
+    async getFavoriteBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {
+        const filters = [];
+        if (this.searchText) {
+            filters.push({
+                name: 'name',
+                operator: 'search',
+                value: '%' + this.searchText + '%'
+            });
+        }
+        var listParam = {
+            filters,
+            pagination: {
+                page,
+                limit
+            }
+        };
+        return (await fetchFavoriteBoardList(listParam)).favoriteBoards;
+    }
+    async getMyBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {
+        const filters = [];
+        if (this.searchText) {
+            filters.push({
+                name: 'name',
+                operator: 'search',
+                value: '%' + this.searchText + '%'
+            });
+        }
+        var listParam = {
+            filters,
+            pagination: {
+                page,
+                limit
+            }
+        };
+        return (await fetchMyBoardList(listParam)).boardsCreatedByMe;
+    }
+    async refreshBoards() {
+        if (!this.groups) {
+            await this.refresh();
+            return;
+        }
+        var { items: boards, total } = await this.getBoards();
+        this.boards = boards;
+        this._page = 1;
+        this._total = total;
+        this.updateContext();
+        this.scrollTargetEl.style.transition = '';
+        this.scrollTargetEl.style.transform = `translate3d(0, 0, 0)`;
+    }
+    async appendBoards() {
+        if (!this.groups) {
+            await this.refresh();
+            return;
+        }
+        var { items: boards, total } = await this.getBoards({ page: this._page + 1 });
+        this.boards = [...this.boards, ...boards];
+        this._page = this._page + 1;
+        this._total = total;
+    }
+    async scrollAction() {
+        return this.appendBoards();
+    }
+    async pageInitialized() {
+        this.refresh();
+    }
+    async pageUpdated(changes, lifecycle) {
+        var _a;
+        if (this.active) {
+            this.page = lifecycle.page;
+            this.groupId = lifecycle.resourceId;
+            this.searchText = ((_a = lifecycle.params) === null || _a === void 0 ? void 0 : _a.search) || '';
+            await this.updateComplete;
+            this.refreshBoards();
+        }
+    }
+    stateChanged(state) {
+        this.favorites = state.favorite.favorites;
+    }
+    firstUpdated() {
+        const list = this.scrollTargetEl;
+        pulltorefresh({
+            container: this.renderRoot,
+            scrollable: list,
+            refresh: () => {
+                return this.refresh();
+            }
+        });
+        swipe({
+            container: list,
+            animates: {
+                dragging: async (d, opts) => {
+                    var groups = [{ id: '' }, { id: 'favor' }, ...this.groups];
+                    var currentIndex = groups.findIndex(group => group.id == this.groupId);
+                    if ((d > 0 && currentIndex <= 0) || (d < 0 && currentIndex >= groups.length - 1)) {
+                        /* TODO blocked gesture */
+                        return false;
+                    }
+                    list.style.transform = `translate3d(${d}px, 0, 0)`;
+                },
+                aborting: async (opts) => {
+                    list.style.transition = 'transform 0.3s';
+                    list.style.transform = `translate3d(0, 0, 0)`;
+                    setTimeout(() => {
+                        list.style.transition = '';
+                    });
+                },
+                swiping: async (d, opts) => {
+                    var groups = [{ id: '' }, { id: 'favor' }, ...this.groups];
+                    var currentIndex = groups.findIndex(group => group.id == this.groupId);
+                    if ((d > 0 && currentIndex <= 0) || (d < 0 && currentIndex >= groups.length - 1)) {
+                        list.style.transition = '';
+                        list.style.transform = `translate3d(0, 0, 0)`;
+                    }
+                    else {
+                        list.style.transition = 'transform 0.3s';
+                        list.style.transform = `translate3d(${d < 0 ? '-100%' : '100%'}, 0, 0)`;
+                        navigate(`${this.page}/${groups[currentIndex + (d < 0 ? 1 : -1)].id}${this.searchText ? '?search=' + this.searchText : ''}`);
+                    }
+                }
+            }
+        });
+    }
+    async onInfoBoard(board) {
+        openOverlay('viewpart-info', {
+            template: html `
+        <board-info
+          .board=${board}
+          .groupId=${this.groupId}
+          @clone-board=${e => this.onCloneBoard(e.detail)}
+          @release-board=${e => this.onReleaseBoard(e.detail)}
+          @revert-board-version=${e => this.onRevertBoardVersion(e.detail)}
+          @update-board=${e => this.onUpdateBoard(e.detail)}
+          @delete-board=${e => this.onDeleteBoard(e.detail)}
+          @join-playgroup=${e => this.onJoinPlayGroup(e.detail)}
+          @leave-playgroup=${e => this.onLeavePlayGroup(e.detail)}
+          @register-template=${e => this.onRegisterTemplate(e.detail)}
+        ></board-info>
+      `
+        });
+    }
+    async onInfoGroup(groupId) {
+        openOverlay('viewpart-info', {
+            template: html `
+        <group-info
+          .groupId=${groupId}
+          @update-group=${e => this.onUpdateGroup(e.detail)}
+          @delete-group=${e => this.onDeleteGroup(e.detail)}
+          @create-group=${e => this.onCreateGroup(e.detail)}
+          @import-boards=${e => this.onImportBoards(e.detail)}
+        ></group-info>
+      `
+        });
+    }
+    async onCreateGroup(group) {
+        try {
+            const data = await createGroup(group);
+            data && this._notify('info', i18next.t('text.group created', { group: group.name }));
+        }
+        catch (ex) {
+            this._notify('error', ex, ex);
+        }
+        this.refresh();
+    }
+    async onUpdateGroup(group) {
+        try {
+            const data = await updateGroup(group);
+            data && this._notify('info', i18next.t('text.group updated', { group: group.name }));
+        }
+        catch (ex) {
+            this._notify('error', ex, ex);
+        }
+        this.refresh();
+    }
+    async onDeleteGroup(group) {
+        try {
+            const data = await deleteGroup(group.id);
+            data && this._notify('info', i18next.t('text.group deleted', { group: group.name }));
+        }
+        catch (ex) {
+            this._notify('error', ex, ex);
+        }
+        this.refresh();
+    }
+    async onImportBoards({ group, files, overwrite }) {
+        try {
+            const data = await importBoards({ groupId: group.id, files, overwrite });
+            data && this._notify('info', i18next.t('text.boards imported', { count: files.length, group: group.name }));
+        }
+        catch (ex) {
+            this._notify('error', ex, ex);
+        }
+        this.refresh();
+    }
+    async onCreateBoard(board) {
+        try {
+            if (!board.model) {
+                board.model = {
+                    width: 800,
+                    height: 600
+                };
+            }
+            const data = await createBoard(board);
+            data && this._notify('info', i18next.t('text.board created', { board: board.name }));
+        }
+        catch (ex) {
+            this._notify('error', ex, ex);
+        }
+        this.refreshBoards();
+    }
+    async onCloneBoard({ id, name, description, targetSubdomain, targetGroupId }) {
+        try {
+            const data = await cloneBoard({
+                id,
+                name,
+                description,
+                targetSubdomain,
+                targetGroupId
+            });
+            data && this._notify('info', i18next.t('text.board cloned', { board: name }));
+        }
+        catch (ex) {
+            this._notify('error', ex, ex);
+        }
+        this.refreshBoards();
+    }
+    async onReleaseBoard(board) {
+        try {
+            const data = await releaseBoard(board);
+            data && this._notify('info', i18next.t('text.board released', { board: board.name }));
+        }
+        catch (ex) {
+            this._notify('error', ex, ex);
+        }
+        this.refreshBoards();
+    }
+    async onRevertBoardVersion({ id, version }) {
+        try {
+            const board = await revertBoardVersion(id, version);
+            board && this._notify('info', i18next.t('text.board reverted', { board: board.name, version }));
+        }
+        catch (ex) {
+            this._notify('error', ex, ex);
+        }
+        this.refreshBoards();
+    }
+    async onUpdateBoard(board) {
+        try {
+            const data = await updateBoard(board);
+            data && this._notify('info', i18next.t('text.board updated', { board: board.name }));
+        }
+        catch (ex) {
+            this._notify('error', ex, ex);
+        }
+        this.refreshBoards();
+    }
+    async onDeleteBoard(board) {
+        try {
+            const data = await deleteBoard(board.id);
+            data && this._notify('info', i18next.t('text.board deleted', { board: board.name }));
+        }
+        catch (ex) {
+            this._notify('error', ex, ex);
+        }
+        this.refreshBoards();
+    }
+    async onJoinPlayGroup({ board, playGroup }) {
+        try {
+            const { data } = await client.mutate({
+                mutation: gql `
+          mutation JoinPlayGroup($id: String!, $boardIds: [String!]!) {
+            joinPlayGroup(id: $id, boardIds: $boardIds) {
+              id
+            }
+          }
+        `,
+                variables: {
+                    id: playGroup.id,
+                    boardIds: [board.id]
+                }
+            });
+            data && this._notify('info', i18next.t('text.joined into play-group', { board: board.name, playGroup: playGroup.name }));
+        }
+        catch (ex) {
+            this._notify('error', ex, ex);
+        }
+    }
+    async onLeavePlayGroup({ board, playGroup }) {
+        try {
+            const { data } = await client.mutate({
+                mutation: gql `
+          mutation ($id: String!, $boardIds: [String!]!) {
+            leavePlayGroup(id: $id, boardIds: $boardIds) {
+              id
+            }
+          }
+        `,
+                variables: {
+                    id: playGroup.id,
+                    boardIds: [board.id]
+                }
+            });
+            data && this._notify('info', i18next.t('text.leaved from play-group', { board: board.name, playGroup: playGroup.name }));
+        }
+        catch (ex) {
+            this._notify('error', ex, ex);
+        }
+    }
+    async onRegisterTemplate({ id, name, description, visibility }) {
+        try {
+            const { data } = await client.mutate({
+                mutation: gql `
+          mutation ($id: String!, $name: String!, $description: String!, $visibility: String!) {
+            registerBoardAsTemplate(id: $id, name: $name, description: $description, visibility: $visibility) {
+              id
+            }
+          }
+        `,
+                variables: {
+                    id,
+                    name,
+                    description,
+                    visibility
+                }
+            });
+            data &&
+                this._notify('info', i18next.t('text.info_x_successfully', { x: i18next.t('text.register-template') }), {
+                    name
+                });
+        }
+        catch (ex) {
+            this._notify('error', ex, ex);
+        }
+    }
+    async refreshFavorites() {
+        const { data } = await client.query({
+            query: gql `
+        query {
+          myFavorites {
+            id
+            routing
+          }
+        }
+      `
+        });
+        data &&
+            store.dispatch({
+                type: UPDATE_FAVORITES,
+                favorites: data.myFavorites.map(favorite => favorite.routing)
+            });
+    }
+    _notify(level, message, ex) {
+        document.dispatchEvent(new CustomEvent('notify', {
+            detail: {
+                level,
+                message,
+                ex
+            }
+        }));
+    }
+};
+BoardListPage.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+
+        overflow: hidden;
+      }
+
+      board-tile-list {
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      #create {
+        position: absolute;
+        bottom: 15px;
+        right: 16px;
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BoardListPage.prototype, "groupId", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], BoardListPage.prototype, "groups", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], BoardListPage.prototype, "boards", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], BoardListPage.prototype, "favorites", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BoardListPage.prototype, "searchText", void 0);
+__decorate([
+    query('board-tile-list'),
+    __metadata("design:type", HTMLElement)
+], BoardListPage.prototype, "scrollTargetEl", void 0);
+BoardListPage = __decorate([
+    customElement('board-list-page'),
+    __metadata("design:paramtypes", [])
+], BoardListPage);
+export { BoardListPage };
+//# sourceMappingURL=board-list-page.js.map