Contact app mobile

client-app/src/apps/contact.ts

@@ -2,8 +2,8 @@ import '../Bootstrap';
 
 import {XH} from '@xh/hoist/core';
 import {AppContainer} from '@xh/hoist/desktop/appcontainer';
-import {AppComponent} from '../examples/contact/AppComponent';
-import {AppModel} from '../examples/contact/AppModel';
+import {AppComponent} from '../examples/contact/desktop/AppComponent';
+import {AppModel} from '../examples/contact/desktop/AppModel';
 import {AuthModel} from '../core/AuthModel';
 
 XH.renderApp({

client-app/src/apps/contactMobile.ts

@@ -0,0 +1,19 @@
+import '../Bootstrap';
+
+import {XH} from '@xh/hoist/core';
+import {AppContainer} from '@xh/hoist/mobile/appcontainer';
+import {AppComponent} from '../examples/contact/mobile/AppComponent';
+import AppModel from '../examples/contact/mobile/AppModel';
+import {AuthModel} from '../core/AuthModel';
+
+XH.renderApp({
+    clientAppCode: 'contactMobile',
+    clientAppName: 'XH Contact Mobile',
+    componentClass: AppComponent,
+    modelClass: AppModel,
+    containerClass: AppContainer,
+    authModelClass: AuthModel,
+    isMobileApp: true,
+    enableLogout: true,
+    checkAccess: () => true
+});

client-app/src/examples/contact/AppComponent.ts → client-app/src/examples/contact/desktop/AppComponent.ts

@@ -2,18 +2,27 @@ import {hoistCmp, uses} from '@xh/hoist/core';
 import {appBar} from '@xh/hoist/desktop/cmp/appbar';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {Icon} from '@xh/hoist/icon';
+import {a} from '@xh/hoist/cmp/layout';
 import {AppModel} from './AppModel';
 import {directoryPanel} from './DirectoryPanel';
-import '../../core/Toolbox.scss';
+import '../../../core/Toolbox.scss';
 
 export const AppComponent = hoistCmp({
     displayName: 'App',
     model: uses(AppModel),
 
     render() {
+        const domain = window.location.origin;
         return panel({
             tbar: appBar({
                 icon: Icon.contact({size: '2x', prefix: 'fal'}),
+                leftItems: [
+                    a({
+                        item: 'View contacts for mobile',
+                        href: `${domain}/contactMobile`,
+                        target: '_blank'
+                    })
+                ],
                 appMenuButtonProps: {hideLogoutItem: false}
             }),
             item: directoryPanel()

client-app/src/examples/contact/AppModel.ts → client-app/src/examples/contact/desktop/AppModel.ts

@@ -1,8 +1,6 @@
 import {XH} from '@xh/hoist/core';
-import {ContactService} from './svc/ContactService';
-import {BaseAppModel} from '../../BaseAppModel';
-
-export const PERSIST_APP = {prefKey: 'contactAppState'};
+import {ContactService} from '../svc/ContactService';
+import {BaseAppModel} from '../../../BaseAppModel';
 
 export class AppModel extends BaseAppModel {
     static instance: AppModel;

client-app/src/examples/contact/DirectoryPanel.ts → client-app/src/examples/contact/desktop/DirectoryPanel.ts

@@ -9,8 +9,9 @@ import {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
 import {tileView} from './cmp/TileView';
 import {detailsPanel} from './details/DetailsPanel';
-import './DirectoryPanel.scss';
+
 import {DirectoryPanelModel} from './DirectoryPanelModel';
+import '../DirectoryPanel.scss';
 
 export const directoryPanel = hoistCmp.factory({
     model: creates(DirectoryPanelModel),

client-app/src/examples/contact/DirectoryPanelModel.ts → client-app/src/examples/contact/desktop/DirectoryPanelModel.ts

@@ -5,10 +5,10 @@ import {GridModel} from '@xh/hoist/cmp/grid';
 import {withFilterByField, withFilterByKey} from '@xh/hoist/data';
 import {isEmpty, uniq, without} from 'lodash';
 
-import {PERSIST_APP} from './AppModel';
+import {PERSIST_APP} from '../svc/ContactService';
 import {favoriteButton} from './cmp/FavoriteButton';
 import {DetailsPanelModel} from './details/DetailsPanelModel';
-import {cellPhoneCol, emailCol, locationCol, nameCol, workPhoneCol} from '../../core/columns';
+import {cellPhoneCol, emailCol, locationCol, nameCol, workPhoneCol} from '../../../core/columns';
 import {FilterLike} from '@xh/hoist/data/filter/Types';
 
 /**

client-app/src/examples/contact/cmp/FavoriteButton.ts → client-app/src/examples/contact/desktop/cmp/FavoriteButton.ts

@@ -3,8 +3,8 @@ import {Icon} from '@xh/hoist/icon/Icon';
 import {consumeEvent} from '@xh/hoist/utils/js';
 import {button} from '@xh/hoist/desktop/cmp/button';
 
-import './FavoriteButton.scss';
 import {DirectoryPanelModel} from '../DirectoryPanelModel';
+import '../../FavoriteButton.scss';
 
 export const favoriteButton = hoistCmp.factory<DirectoryPanelModel>(({model, record}) => {
     const {isFavorite} = record.data;

client-app/src/examples/contact/cmp/TileView.ts → client-app/src/examples/contact/desktop/cmp/TileView.ts

@@ -1,8 +1,9 @@
 import {div, filler, span, tileFrame, vbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp} from '@xh/hoist/core';
 import {favoriteButton} from './FavoriteButton';
-import './TileView.scss';
+
 import {DirectoryPanelModel} from '../DirectoryPanelModel';
+import '../../TileView.scss';
 
 export const tileView = hoistCmp.factory<DirectoryPanelModel>({
     render({model}) {

client-app/src/examples/contact/mobile/AppComponent.ts

@@ -0,0 +1,27 @@
+import {hoistCmp, uses, XH} from '@xh/hoist/core';
+import {appBar} from '@xh/hoist/mobile/cmp/header';
+import {panel} from '@xh/hoist/mobile/cmp/panel';
+import {Icon} from '@xh/hoist/icon';
+import AppModel from './AppModel';
+import {navigator} from '@xh/hoist/mobile/cmp/navigator';
+import '../../../core/Toolbox.scss';
+
+export const AppComponent = hoistCmp({
+    displayName: 'App',
+    model: uses(AppModel),
+
+    render() {
+        return panel({
+            tbar: appBar({
+                omit: XH.isLandscape,
+                icon: Icon.boxFull({size: 'lg', prefix: 'fal'}),
+                hideRefreshButton: false,
+                appMenuButtonProps: {
+                    hideLogoutItem: false,
+                    hideThemeItem: true
+                }
+            }),
+            item: navigator()
+        });
+    }
+});

client-app/src/examples/contact/mobile/AppModel.ts

@@ -0,0 +1,99 @@
+import {managed, PlainObject, XH} from '@xh/hoist/core';
+import {ContactService} from '../svc/ContactService';
+import {BaseAppModel} from '../../../BaseAppModel';
+import {NavigatorModel} from '@xh/hoist/mobile/cmp/navigator';
+import directoryPanel from './DirectoryPanel';
+import detailsPanel from './details/DetailsPanel';
+import DetailsPanelModel from './details/DetailsPanelModel';
+import DirectoryPanelModel from './DirectoryPanelModel';
+import {action, makeObservable, observable, runInAction} from '@xh/hoist/mobx';
+import {castArray, isEmpty, uniq} from 'lodash';
+
+import {
+    autoRefreshAppOption,
+    sizingModeAppOption,
+    themeAppOption
+} from '@xh/hoist/mobile/cmp/appOption';
+
+export default class AppModel extends BaseAppModel {
+    static instance: AppModel;
+
+    @observable.ref tagList: string[] = [];
+    @observable.ref contacts: PlainObject[] = [];
+
+    @managed directoryPanelModel: DirectoryPanelModel;
+    @managed detailsPanelModel: DetailsPanelModel;
+
+    @managed
+    navigatorModel: NavigatorModel = new NavigatorModel({
+        track: true,
+        pages: [
+            {id: 'default', content: directoryPanel},
+            {id: 'details', content: detailsPanel}
+        ]
+    });
+
+    override getRoutes() {
+        return [
+            {
+                name: 'default',
+                path: '/contactMobile',
+                children: [
+                    {
+                        name: 'details',
+                        path: '/:id'
+                    }
+                ]
+            }
+        ];
+    }
+
+    constructor() {
+        super();
+        makeObservable(this);
+        this.directoryPanelModel = new DirectoryPanelModel(this);
+        this.detailsPanelModel = new DetailsPanelModel(this);
+    }
+
+    async updateContactAsync(id: string, data: PlainObject) {
+        if (!data || isEmpty(data)) return;
+        // Mobile select only allows single selections, while desktop allows multiple
+        // This means we receive an array on the desktop picker, and a single value here.
+        // Convert single result into an array of one to keep data consistent.
+        if (data.tags) {
+            data.tags = castArray(data.tags);
+        }
+        await XH.contactService.updateContactAsync(id, data);
+        await this.refreshAsync();
+    }
+
+    @action
+    async toggleFavorite(id: string) {
+        await XH.contactService.toggleFavorite(id);
+        this.contacts = this.contacts.map(contact =>
+            contact.id === id ? {...contact, isFavorite: !contact.isFavorite} : contact
+        );
+    }
+
+    override getAppOptions() {
+        return [themeAppOption(), sizingModeAppOption(), autoRefreshAppOption()];
+    }
+
+    override async initAsync() {
+        await super.initAsync();
+        await XH.installServicesAsync(ContactService);
+        await this.loadAsync();
+    }
+
+    override async doLoadAsync() {
+        try {
+            const contacts = await XH.contactService.getContactsAsync();
+            runInAction(() => {
+                this.contacts = contacts;
+                this.tagList = uniq(contacts.flatMap(it => it.tags ?? [])).sort() as string[];
+            });
+        } catch (e) {
+            XH.handleException(e);
+        }
+    }
+}

client-app/src/examples/contact/mobile/DirectoryPanel.ts

@@ -0,0 +1,72 @@
+import {hoistCmp, uses} from '@xh/hoist/core';
+import {grid} from '@xh/hoist/cmp/grid';
+import {hframe, filler} from '@xh/hoist/cmp/layout';
+import {storeCountLabel, storeFilterField} from '@xh/hoist/cmp/store';
+import {button} from '@xh/hoist/mobile/cmp/button';
+import {buttonGroupInput} from '@xh/hoist/mobile/cmp/input';
+import {panel} from '@xh/hoist/mobile/cmp/panel';
+import {Icon} from '@xh/hoist/icon';
+import {toolbar} from '@xh/hoist/mobile/cmp/toolbar';
+
+import tileView from './cmp/TileView';
+import DirectoryPanelModel from './DirectoryPanelModel';
+import '../DirectoryPanel.scss';
+
+const directoryPanel = hoistCmp.factory({
+    model: uses(DirectoryPanelModel),
+
+    render({model}) {
+        return panel({
+            className: 'tb-directory-panel',
+            item: hframe(
+                panel({
+                    tbar: tbar(),
+                    item: model.displayMode === 'grid' ? grid() : tileView(),
+                    bbar: bbar()
+                })
+            )
+        });
+    }
+});
+
+const tbar = hoistCmp.factory<DirectoryPanelModel>(({model}) => {
+    return toolbar({
+        className: 'tb-directory-panel__tbar',
+        items: [
+            storeFilterField({
+                leftIcon: Icon.search(),
+                maxWidth: 400,
+                minWidth: 200
+            }),
+            filler(),
+            buttonGroupInput({
+                outlined: true,
+                bind: 'displayMode',
+                value: model.displayMode,
+                intent: 'primary',
+                items: [
+                    button({
+                        icon: Icon.list(),
+                        value: 'grid',
+                        width: 50
+                    }),
+                    button({
+                        icon: Icon.users(),
+                        value: 'tiles',
+                        width: 50
+                    })
+                ]
+            })
+        ]
+    });
+});
+
+const bbar = hoistCmp.factory<DirectoryPanelModel>(({model}) => {
+    const {
+        gridModel: {store}
+    } = model;
+
+    return toolbar(filler(), storeCountLabel({store, unit: 'contact'}));
+});
+
+export default directoryPanel;