From 332ae394e868f7f9901ea84ef9c8d26be15efda6 Mon Sep 17 00:00:00 2001 From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com> Date: Mon, 6 Feb 2023 11:20:03 -0600 Subject: [PATCH] DEV: Upgrade `group-reports` to Octane (#218) --- .../controllers/group-reports-index.js | 5 +- .../controllers/group-reports-show.js | 172 ++++++++++-------- .../discourse/routes/group-reports-index.js | 14 +- .../discourse/routes/group-reports-show.js | 17 +- .../templates/group-reports-index.hbs | 9 +- .../templates/group-reports-show.hbs | 54 +++--- 6 files changed, 142 insertions(+), 129 deletions(-) diff --git a/assets/javascripts/discourse/controllers/group-reports-index.js b/assets/javascripts/discourse/controllers/group-reports-index.js index 671157b..79caed1 100644 --- a/assets/javascripts/discourse/controllers/group-reports-index.js +++ b/assets/javascripts/discourse/controllers/group-reports-index.js @@ -1,6 +1,3 @@ import Controller from "@ember/controller"; -import { alias } from "@ember/object/computed"; -export default Controller.extend({ - queries: alias("model.queries"), -}); +export default class GroupReportsIndexController extends Controller {} diff --git a/assets/javascripts/discourse/controllers/group-reports-show.js b/assets/javascripts/discourse/controllers/group-reports-show.js index a4e4e09..845afa5 100644 --- a/assets/javascripts/discourse/controllers/group-reports-show.js +++ b/assets/javascripts/discourse/controllers/group-reports-show.js @@ -1,98 +1,112 @@ import Controller from "@ember/controller"; import { popupAjaxError } from "discourse/lib/ajax-error"; import { ajax } from "discourse/lib/ajax"; -import Bookmark, { +import { NO_REMINDER_ICON, WITH_REMINDER_ICON, } from "discourse/models/bookmark"; import { openBookmarkModal } from "discourse/controllers/bookmark"; -import discourseComputed from "discourse-common/utils/decorators"; -import { alias, gt } from "@ember/object/computed"; +import { action } from "@ember/object"; +import { bind } from "discourse-common/utils/decorators"; +import { tracked } from "@glimmer/tracking"; +import { inject as service } from "@ember/service"; -export default Controller.extend({ - showResults: false, - explain: false, - loading: false, - results: alias("model.results"), - hasParams: gt("model.param_info.length", 0), +export default class GroupReportsShowController extends Controller { + @service currentUser; - actions: { - run() { - this.setProperties({ loading: true, showResults: false }); - ajax(`/g/${this.get("group.name")}/reports/${this.model.id}/run`, { - type: "POST", - data: { - params: JSON.stringify(this.model.params), - explain: this.explain, - }, - }) - .then((result) => { - this.set("results", result); - if (!result.success) { - return; - } + @tracked showResults = false; + @tracked loading = false; + @tracked results = this.model.results; + @tracked queryGroupBookmark = this.queryGroup?.bookmark; - this.set("showResults", true); - }) - .catch((err) => { - if (err.jqXHR && err.jqXHR.status === 422 && err.jqXHR.responseJSON) { - this.set("results", err.jqXHR.responseJSON); - } else { - popupAjaxError(err); - } - }) - .finally(() => this.set("loading", false)); - }, + explain = false; - toggleBookmark() { - return openBookmarkModal( - this.queryGroup.bookmark || - Bookmark.create({ - bookmarkable_type: "DataExplorer::QueryGroup", - bookmarkable_id: this.queryGroup.id, - user_id: this.currentUser.id, - }), - { - onAfterSave: (savedData) => { - const bookmark = Bookmark.create(savedData); - this.set("queryGroup.bookmark", bookmark); - this.appEvents.trigger( - "bookmarks:changed", - savedData, - bookmark.attachedTo() - ); - }, - onAfterDelete: () => { - this.set("queryGroup.bookmark", null); - }, - } - ); - }, + get hasParams() { + return this.model.param_info.length > 0; + } - // This is necessary with glimmer's one way data stream to get the child's - // changes of 'params' to bubble up. - updateParams(identifier, value) { - this.set(`model.params.${identifier}`, value); - }, - }, // actions + get bookmarkLabel() { + return this.queryGroupBookmark + ? "bookmarked.edit_bookmark" + : "bookmarked.title"; + } - @discourseComputed("queryGroup.bookmark") - bookmarkLabel(bookmark) { - return bookmark ? "bookmarked.edit_bookmark" : "bookmarked.title"; - }, - - @discourseComputed("queryGroup.bookmark") - bookmarkIcon(bookmark) { - if (bookmark && bookmark.reminder_at) { + get bookmarkIcon() { + if (this.queryGroupBookmark && this.queryGroupBookmark.reminder_at) { return WITH_REMINDER_ICON; } return NO_REMINDER_ICON; - }, + } - @discourseComputed("queryGroup.bookmark") - bookmarkClassName(bookmark) { - return bookmark + get bookmarkClassName() { + return this.queryGroupBookmark ? ["query-group-bookmark", "bookmarked"].join(" ") : "query-group-bookmark"; - }, -}); + } + + @bind + async run() { + this.loading = true; + this.showResults = false; + + try { + const response = await ajax( + `/g/${this.get("group.name")}/reports/${this.model.id}/run`, + { + type: "POST", + data: { + params: JSON.stringify(this.model.params), + explain: this.explain, + }, + } + ); + + this.results = response; + if (!response.success) { + return; + } + this.showResults = true; + } catch (error) { + if (error.jqXHR?.status === 422 && error.jqXHR.responseJSON) { + this.results = error.jqXHR.responseJSON; + } else { + popupAjaxError(error); + } + } finally { + this.loading = false; + } + } + + @action + toggleBookmark() { + return openBookmarkModal( + this.queryGroupBookmark || + this.store.createRecord("bookmark", { + bookmarkable_type: "DataExplorer::QueryGroup", + bookmarkable_id: this.queryGroup.id, + user_id: this.currentUser.id, + }), + { + onAfterSave: (savedData) => { + const bookmark = this.store.createRecord("bookmark", savedData); + this.queryGroupBookmark = bookmark; + this.appEvents.trigger( + "bookmarks:changed", + savedData, + bookmark.attachedTo() + ); + }, + onAfterDelete: () => { + this.queryGroupBookmark = null; + }, + } + ); + } + + // This is necessary with glimmer's one way data stream to get the child's + // changes of 'params' to bubble up. + @action + updateParams(identifier, value) { + this.set(`model.params.${identifier}`, value); + } +} diff --git a/assets/javascripts/discourse/routes/group-reports-index.js b/assets/javascripts/discourse/routes/group-reports-index.js index 034b9fc..ca9f455 100644 --- a/assets/javascripts/discourse/routes/group-reports-index.js +++ b/assets/javascripts/discourse/routes/group-reports-index.js @@ -2,9 +2,7 @@ import { ajax } from "discourse/lib/ajax"; import DiscourseRoute from "discourse/routes/discourse"; import { action } from "@ember/object"; -export default DiscourseRoute.extend({ - controllerName: "group-reports-index", - +export default class GroupReportsIndexRoute extends DiscourseRoute { model() { const group = this.modelFor("group"); return ajax(`/g/${group.name}/reports`) @@ -15,7 +13,7 @@ export default DiscourseRoute.extend({ }; }) .catch(() => this.transitionTo("group.members", group)); - }, + } afterModel(model) { if ( @@ -24,15 +22,15 @@ export default DiscourseRoute.extend({ ) { this.transitionTo("group.members", model.group); } - }, + } setupController(controller, model) { controller.setProperties(model); - }, + } @action refreshModel() { this.refresh(); return false; - }, -}); + } +} diff --git a/assets/javascripts/discourse/routes/group-reports-show.js b/assets/javascripts/discourse/routes/group-reports-show.js index 123d930..fd0a115 100644 --- a/assets/javascripts/discourse/routes/group-reports-show.js +++ b/assets/javascripts/discourse/routes/group-reports-show.js @@ -2,18 +2,15 @@ import { ajax } from "discourse/lib/ajax"; import DiscourseRoute from "discourse/routes/discourse"; import { action } from "@ember/object"; -export default DiscourseRoute.extend({ - controllerName: "group-reports-show", - +export default class GroupReportsShowRoute extends DiscourseRoute { model(params) { const group = this.modelFor("group"); return ajax(`/g/${group.name}/reports/${params.query_id}`) .then((response) => { - let query = response.query; - let queryGroup = response.query_group; + const query = response.query; + const queryGroup = response.query_group; const queryParamInfo = query.param_info; - const queryParams = queryParamInfo.reduce((acc, param) => { acc[param.identifier] = param.default; return acc; @@ -28,15 +25,15 @@ export default DiscourseRoute.extend({ .catch(() => { this.transitionTo("group.members", group); }); - }, + } setupController(controller, model) { controller.setProperties(model); - }, + } @action refreshModel() { this.refresh(); return false; - }, -}); + } +} diff --git a/assets/javascripts/discourse/templates/group-reports-index.hbs b/assets/javascripts/discourse/templates/group-reports-index.hbs index b22ba3d..be27f6b 100644 --- a/assets/javascripts/discourse/templates/group-reports-index.hbs +++ b/assets/javascripts/discourse/templates/group-reports-index.hbs @@ -12,12 +12,15 @@ - {{#each queries as |query|}} + {{#each this.model.queries as |query|}} - {{#link-to "group.reports.show" group.name query.id}} + {{query.name}} - {{/link-to}} + {{query.description}} diff --git a/assets/javascripts/discourse/templates/group-reports-show.hbs b/assets/javascripts/discourse/templates/group-reports-show.hbs index 40dbad5..9f94bac 100644 --- a/assets/javascripts/discourse/templates/group-reports-show.hbs +++ b/assets/javascripts/discourse/templates/group-reports-show.hbs @@ -1,39 +1,43 @@
-

{{model.name}}

-

{{model.description}}

+

{{this.model.name}}

+

{{this.model.description}}

-
+ - {{d-button - action=(action "run") - icon="play" - label="explorer.run" - class="btn-primary" - type="submit" - }} + - {{d-button - action=(action "toggleBookmark") - label=bookmarkLabel - icon=bookmarkIcon - class=bookmarkClassName - }} + - {{conditional-loading-spinner condition=loading}} + - {{#if results}} + {{#if this.results}}
- {{#if showResults}} - + {{#if this.showResults}} + {{else}} - {{#each results.errors as |err|}} + {{#each this.results.errors as |err|}} 
{{~err}}
{{/each}} {{/if}}