@sprucelabs/spruce-calendar-components 38.1.9 → 38.1.11

package/build/esm/tools/VenueSelectionTool.vc.d.ts

@@ -10,6 +10,7 @@ export default class VenueSelectionToolViewController extends AbstractViewContro
     private isLoaded;
     constructor(options: ViewControllerOptions & CalendarToolOptions);
     private VenueListVc;
+    private handleSelectVenueFromList;
     private get router();
     private CardVc;
     handleUpdateContext(context: CalendarToolBeltContext): Promise<void>;

package/build/esm/tools/VenueSelectionTool.vc.js

@@ -21,11 +21,14 @@ class VenueSelectionToolViewController extends AbstractViewController {
     VenueListVc() {
         return this.Controller('calendar.venues-list', {
             router: this.router,
-            onSelect: (venue) => __awaiter(this, void 0, void 0, function* () {
-                yield this.updateContextHandler({
-                    'event.venue': venue,
-                });
-            }),
+            onSelect: this.handleSelectVenueFromList.bind(this),
+        });
+    }
+    handleSelectVenueFromList(venue) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.updateContextHandler({
+                'event.venue': venue,
+            });
         });
     }
     get router() {
@@ -33,6 +36,9 @@ class VenueSelectionToolViewController extends AbstractViewController {
     }
     CardVc() {
         return this.Controller('card', {
+            header: {
+                title: 'Venue',
+            },
             body: {
                 sections: [
                     {
@@ -44,10 +50,9 @@ class VenueSelectionToolViewController extends AbstractViewController {
     }
     handleUpdateContext(context) {
         return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            const provider = (_a = context.event.venue) === null || _a === void 0 ? void 0 : _a.provider;
-            if (provider && this.isLoaded) {
-                yield this.venueListVc.selectVenue(provider);
+            const venue = context.event.venue;
+            if (venue && this.isLoaded) {
+                yield this.venueListVc.selectVenue(venue);
             }
         });
     }
@@ -60,7 +65,7 @@ class VenueSelectionToolViewController extends AbstractViewController {
                 organizationId: organization.id,
             });
             if ((_a = this.venue) === null || _a === void 0 ? void 0 : _a.provider) {
-                yield this.venueListVc.selectVenue(this.venue.provider);
+                yield this.venueListVc.selectVenue(this.venue);
             }
         });
     }

package/build/esm/viewControllers/VenuesList.vc.d.ts

@@ -6,15 +6,22 @@ export default class VenuesListViewController extends AbstractViewController<Lis
     private venues;
     protected onSelectHandler?: (venue: Venue) => void;
     private router;
+    private isLoaded;
+    private selectedVenue?;
     constructor(options: ViewControllerOptions & VenuesListConstructorOptions);
     private ListVc;
     load(options: VenuesListLoadOptions): Promise<void>;
     private populateList;
+    private renderDetailsRow;
     private renderVenueRow;
-    selectVenue(provider: string): Promise<void>;
+    private renderVenueLabelCell;
+    selectVenue(venue: Venue): Promise<void>;
+    private optionallyRenderJoinUrlCell;
+    private isSelected;
+    private renderCheckboxCell;
     private handleOnClickJoinUrl;
-    private handleChange;
-    render(): import("@sprucelabs/heartwood-view-controllers").SpruceSchemas.HeartwoodViewControllers.v2021_02_11.List;
+    private handleClickedCheckbox;
+    render(): List;
 }
 export interface VenuesListLoadOptions {
     organizationId: string;

package/build/esm/viewControllers/VenuesList.vc.js

@@ -12,6 +12,7 @@ class VenuesListViewController extends AbstractViewController {
     constructor(options) {
         super(options);
         this.venues = [];
+        this.isLoaded = false;
         const { router, onSelect } = options;
         this.onSelectHandler = onSelect;
         this.router = router;
@@ -20,98 +21,128 @@ class VenuesListViewController extends AbstractViewController {
     ListVc() {
         return this.Controller('list', {
             id: 'venues-list',
+            columnWidths: ['content', 'fill'],
         });
     }
     load(options) {
         return __awaiter(this, void 0, void 0, function* () {
             const { organizationId } = options;
             const client = yield this.connectToApi();
+            this.isLoaded = true;
             try {
-                const [{ venues }] = yield client.emitAndFlattenResponses('calendar.register-venues::v2021_05_19', {
+                const results = yield client.emitAndFlattenResponses('calendar.register-venues::v2021_05_19', {
                     target: {
                         organizationId,
                     },
                 });
+                if (results.length === 0) {
+                    return;
+                }
+                const venues = results[0].venues;
                 this.venues.push(...venues);
                 this.populateList();
             }
             catch (err) {
+                this.log.error(`Emitting register-venues failed`, err.stack);
                 yield this.alert({
                     message: `We had trouble loading your venues. Please try again later. Error: ${err.message}`,
                 });
             }
+            this.triggerRender();
         });
     }
     populateList() {
-        this.venues.forEach((venue) => this.listVc.addRow(this.renderVenueRow(venue)));
+        const rows = [];
+        this.venues.forEach((venue) => {
+            var _a;
+            rows.push(this.renderVenueRow(venue));
+            if (this.isSelected(venue) && ((_a = this.selectedVenue) === null || _a === void 0 ? void 0 : _a.details)) {
+                rows.push(this.renderDetailsRow());
+            }
+        });
+        this.listVc.setRows(rows);
     }
-    renderVenueRow(venue) {
+    renderDetailsRow() {
+        var _a;
         return {
-            id: venue.provider,
+            id: 'details',
             cells: [
                 {
-                    checkboxInput: {
-                        name: 'isSelected',
-                        value: false,
-                        onChange: (value) => {
-                            if (value) {
-                                this.handleChange(venue);
-                            }
-                        },
+                    text: {
+                        markdown: (_a = this.selectedVenue) === null || _a === void 0 ? void 0 : _a.details,
                     },
                 },
-                { text: { content: venue.label } },
-                (venue.joinUrl
-                    ? {
-                        button: {
-                            id: `joinUrl`,
-                            label: venue.label,
-                            lineIcon: 'link-angle',
-                            onClick: this.handleOnClickJoinUrl.bind(this, venue.joinUrl),
-                        },
-                    }
-                    : {}),
             ],
         };
     }
-    selectVenue(provider) {
+    renderVenueRow(venue) {
+        return {
+            id: venue.provider,
+            cells: [
+                this.renderCheckboxCell(venue),
+                this.renderVenueLabelCell(venue),
+                this.optionallyRenderJoinUrlCell(venue),
+            ].filter(Boolean),
+        };
+    }
+    renderVenueLabelCell(venue) {
+        return { text: { content: venue.label } };
+    }
+    selectVenue(venue) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.listVc.getRowVc(provider).setValue('isSelected', true);
+            this.selectedVenue = venue;
+            this.populateList();
         });
     }
+    optionallyRenderJoinUrlCell(venue) {
+        var _a;
+        const joinUrl = this.isSelected(venue) && ((_a = this.selectedVenue) === null || _a === void 0 ? void 0 : _a.joinUrl);
+        return (joinUrl
+            ? {
+                button: {
+                    id: `joinUrl`,
+                    lineIcon: 'link-angle',
+                    onClick: this.handleOnClickJoinUrl.bind(this, joinUrl),
+                },
+            }
+            : null);
+    }
+    isSelected(venue) {
+        var _a;
+        return ((_a = this.selectedVenue) === null || _a === void 0 ? void 0 : _a.provider) === venue.provider;
+    }
+    renderCheckboxCell(venue) {
+        return {
+            checkboxInput: {
+                name: 'isSelected',
+                value: this.isSelected(venue),
+                onChange: (value) => {
+                    if (value) {
+                        this.handleClickedCheckbox(venue);
+                    }
+                },
+            },
+        };
+    }
     handleOnClickJoinUrl(joinUrl) {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.router.redirect(joinUrl);
         });
     }
-    handleChange(venue) {
+    handleClickedCheckbox(venue) {
         var _a;
         this.venues.forEach((v) => __awaiter(this, void 0, void 0, function* () {
             if (v.provider === venue.provider) {
-                if (venue.details) {
-                    const index = this.listVc
-                        .getRowVcs()
-                        .findIndex((r) => r.getId() === v.provider);
-                    this.listVc.addRow({
-                        id: 'details',
-                        atIndex: index + 1,
-                        cells: [
-                            {
-                                text: {
-                                    markdown: venue.details,
-                                },
-                            },
-                        ],
-                    });
-                }
                 return;
             }
-            yield this.listVc.getRowVc(v.provider).setValue('isSelected', false);
+            yield this.listVc.setValue(v.provider, 'isSelected', false);
         }));
         (_a = this.onSelectHandler) === null || _a === void 0 ? void 0 : _a.call(this, venue);
     }
     render() {
-        return this.listVc.render();
+        return (this.venues.length === 0 && this.isLoaded
+            ? null
+            : this.listVc.render());
     }
 }
 VenuesListViewController.id = 'venues-list';

package/build/tools/VenueSelectionTool.vc.d.ts

@@ -10,6 +10,7 @@ export default class VenueSelectionToolViewController extends AbstractViewContro
     private isLoaded;
     constructor(options: ViewControllerOptions & CalendarToolOptions);
     private VenueListVc;
+    private handleSelectVenueFromList;
     private get router();
     private CardVc;
     handleUpdateContext(context: CalendarToolBeltContext): Promise<void>;

package/build/tools/VenueSelectionTool.vc.js

@@ -14,11 +14,12 @@ class VenueSelectionToolViewController extends heartwood_view_controllers_1.Abst
     VenueListVc() {
         return this.Controller('calendar.venues-list', {
             router: this.router,
-            onSelect: async (venue) => {
-                await this.updateContextHandler({
-                    'event.venue': venue,
-                });
-            },
+            onSelect: this.handleSelectVenueFromList.bind(this),
+        });
+    }
+    async handleSelectVenueFromList(venue) {
+        await this.updateContextHandler({
+            'event.venue': venue,
         });
     }
     get router() {
@@ -26,6 +27,9 @@ class VenueSelectionToolViewController extends heartwood_view_controllers_1.Abst
     }
     CardVc() {
         return this.Controller('card', {
+            header: {
+                title: 'Venue',
+            },
             body: {
                 sections: [
                     {
@@ -36,9 +40,9 @@ class VenueSelectionToolViewController extends heartwood_view_controllers_1.Abst
         });
     }
     async handleUpdateContext(context) {
-        const provider = context.event.venue?.provider;
-        if (provider && this.isLoaded) {
-            await this.venueListVc.selectVenue(provider);
+        const venue = context.event.venue;
+        if (venue && this.isLoaded) {
+            await this.venueListVc.selectVenue(venue);
         }
     }
     async load() {
@@ -48,7 +52,7 @@ class VenueSelectionToolViewController extends heartwood_view_controllers_1.Abst
             organizationId: organization.id,
         });
         if (this.venue?.provider) {
-            await this.venueListVc.selectVenue(this.venue.provider);
+            await this.venueListVc.selectVenue(this.venue);
         }
     }
     get event() {

package/build/viewControllers/VenuesList.vc.d.ts

@@ -6,15 +6,22 @@ export default class VenuesListViewController extends AbstractViewController<Lis
     private venues;
     protected onSelectHandler?: (venue: Venue) => void;
     private router;
+    private isLoaded;
+    private selectedVenue?;
     constructor(options: ViewControllerOptions & VenuesListConstructorOptions);
     private ListVc;
     load(options: VenuesListLoadOptions): Promise<void>;
     private populateList;
+    private renderDetailsRow;
     private renderVenueRow;
-    selectVenue(provider: string): Promise<void>;
+    private renderVenueLabelCell;
+    selectVenue(venue: Venue): Promise<void>;
+    private optionallyRenderJoinUrlCell;
+    private isSelected;
+    private renderCheckboxCell;
     private handleOnClickJoinUrl;
-    private handleChange;
-    render(): import("@sprucelabs/heartwood-view-controllers").SpruceSchemas.HeartwoodViewControllers.v2021_02_11.List;
+    private handleClickedCheckbox;
+    render(): List;
 }
 export interface VenuesListLoadOptions {
     organizationId: string;

package/build/viewControllers/VenuesList.vc.js

@@ -5,6 +5,7 @@ class VenuesListViewController extends heartwood_view_controllers_1.AbstractView
     constructor(options) {
         super(options);
         this.venues = [];
+        this.isLoaded = false;
         const { router, onSelect } = options;
         this.onSelectHandler = onSelect;
         this.router = router;
@@ -13,91 +14,117 @@ class VenuesListViewController extends heartwood_view_controllers_1.AbstractView
     ListVc() {
         return this.Controller('list', {
             id: 'venues-list',
+            columnWidths: ['content', 'fill'],
         });
     }
     async load(options) {
         const { organizationId } = options;
         const client = await this.connectToApi();
+        this.isLoaded = true;
         try {
-            const [{ venues }] = await client.emitAndFlattenResponses('calendar.register-venues::v2021_05_19', {
+            const results = await client.emitAndFlattenResponses('calendar.register-venues::v2021_05_19', {
                 target: {
                     organizationId,
                 },
             });
+            if (results.length === 0) {
+                return;
+            }
+            const venues = results[0].venues;
             this.venues.push(...venues);
             this.populateList();
         }
         catch (err) {
+            this.log.error(`Emitting register-venues failed`, err.stack);
             await this.alert({
                 message: `We had trouble loading your venues. Please try again later. Error: ${err.message}`,
             });
         }
+        this.triggerRender();
     }
     populateList() {
-        this.venues.forEach((venue) => this.listVc.addRow(this.renderVenueRow(venue)));
+        const rows = [];
+        this.venues.forEach((venue) => {
+            rows.push(this.renderVenueRow(venue));
+            if (this.isSelected(venue) && this.selectedVenue?.details) {
+                rows.push(this.renderDetailsRow());
+            }
+        });
+        this.listVc.setRows(rows);
     }
-    renderVenueRow(venue) {
+    renderDetailsRow() {
         return {
-            id: venue.provider,
+            id: 'details',
             cells: [
                 {
-                    checkboxInput: {
-                        name: 'isSelected',
-                        value: false,
-                        onChange: (value) => {
-                            if (value) {
-                                this.handleChange(venue);
-                            }
-                        },
+                    text: {
+                        markdown: this.selectedVenue?.details,
                     },
                 },
-                { text: { content: venue.label } },
-                (venue.joinUrl
-                    ? {
-                        button: {
-                            id: `joinUrl`,
-                            label: venue.label,
-                            lineIcon: 'link-angle',
-                            onClick: this.handleOnClickJoinUrl.bind(this, venue.joinUrl),
-                        },
-                    }
-                    : {}),
             ],
         };
     }
-    async selectVenue(provider) {
-        await this.listVc.getRowVc(provider).setValue('isSelected', true);
+    renderVenueRow(venue) {
+        return {
+            id: venue.provider,
+            cells: [
+                this.renderCheckboxCell(venue),
+                this.renderVenueLabelCell(venue),
+                this.optionallyRenderJoinUrlCell(venue),
+            ].filter(Boolean),
+        };
+    }
+    renderVenueLabelCell(venue) {
+        return { text: { content: venue.label } };
+    }
+    async selectVenue(venue) {
+        this.selectedVenue = venue;
+        this.populateList();
+    }
+    optionallyRenderJoinUrlCell(venue) {
+        const joinUrl = this.isSelected(venue) && this.selectedVenue?.joinUrl;
+        return (joinUrl
+            ? {
+                button: {
+                    id: `joinUrl`,
+                    lineIcon: 'link-angle',
+                    onClick: this.handleOnClickJoinUrl.bind(this, joinUrl),
+                },
+            }
+            : null);
+    }
+    isSelected(venue) {
+        return this.selectedVenue?.provider === venue.provider;
+    }
+    renderCheckboxCell(venue) {
+        return {
+            checkboxInput: {
+                name: 'isSelected',
+                value: this.isSelected(venue),
+                onChange: (value) => {
+                    if (value) {
+                        this.handleClickedCheckbox(venue);
+                    }
+                },
+            },
+        };
     }
     async handleOnClickJoinUrl(joinUrl) {
         await this.router.redirect(joinUrl);
     }
-    handleChange(venue) {
+    handleClickedCheckbox(venue) {
         this.venues.forEach(async (v) => {
             if (v.provider === venue.provider) {
-                if (venue.details) {
-                    const index = this.listVc
-                        .getRowVcs()
-                        .findIndex((r) => r.getId() === v.provider);
-                    this.listVc.addRow({
-                        id: 'details',
-                        atIndex: index + 1,
-                        cells: [
-                            {
-                                text: {
-                                    markdown: venue.details,
-                                },
-                            },
-                        ],
-                    });
-                }
                 return;
             }
-            await this.listVc.getRowVc(v.provider).setValue('isSelected', false);
+            await this.listVc.setValue(v.provider, 'isSelected', false);
         });
         this.onSelectHandler?.(venue);
     }
     render() {
-        return this.listVc.render();
+        return (this.venues.length === 0 && this.isLoaded
+            ? null
+            : this.listVc.render());
     }
 }
 VenuesListViewController.id = 'venues-list';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sprucelabs/spruce-calendar-components",
   "description": "Calendar components for working with calendars and Sprucebot.",
-  "version": "38.1.9",
+  "version": "38.1.11",
   "skill": {
     "namespace": "calendar"
   },