-
Notifications
You must be signed in to change notification settings - Fork 66
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
FEATURE: Add group and category restrictions to house ads (#205)
# Description
This PR adds the ability to apply **group** and **category** restrictions to a **house ad**.
# What is included
- In order to get the group and category selectors to work within `admin/assets/javascripts/discourse/controllers/admin-plugins-house-ads-show.js` I needed to modernize the file.
- I dropped the `bufferedProperty` implementation in favor of a vanilla ember approach
- I added `category_ids` and `group_ids` to our house ads model
- I added tests for group / category restrictions
- I added a preview button to display the house ad
- `/site.json` would return a object called `house_creatives` and a list of key value pairs that matched the ad name with the html, like so:
```js
{ AD_KEY: ad.html }
```
I need access to the category ids on the client to conditionally render the house ads so the new format will be:
```js
{ AD_KEY: { html: ad.html, category_ids: ad.category_ids } }
```
# Screenshots
<img width="658" alt="Screenshot 2024-04-08 at 2 39 22 PM" src="https://github.com/discourse/discourse-adplugin/assets/50783505/b44b386d-65a1-4a2a-a487-d735b13357dd">
# Preview Video
https://github.com/discourse/discourse-adplugin/assets/50783505/6d0d8253-afef-4e15-b6fc-c6f696efd169- Loading branch information
1 parent
c4227de
commit 554f03f
Showing
17 changed files
with
600 additions
and
149 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
admin/assets/javascripts/discourse/components/house-ads-category-selector.gjs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import CategorySelector from "select-kit/components/category-selector"; | ||
|
|
||
| export default class HouseAdsCategorySelector extends CategorySelector { | ||
| get value() { | ||
| return this.selectedCategories.map((c) => c.id); | ||
| } | ||
| } |
18 changes: 18 additions & 0 deletions
18
admin/assets/javascripts/discourse/components/modal/preview.gjs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import { htmlSafe } from "@ember/template"; | ||
| import DModal from "discourse/components/d-modal"; | ||
| import i18n from "discourse-common/helpers/i18n"; | ||
|
|
||
| const Preview = <template> | ||
| <DModal | ||
| @closeModal={{@closeModal}} | ||
| @title={{i18n "admin.adplugin.house_ads.preview"}} | ||
| > | ||
| <:body> | ||
| <div class="house-ad-preview"> | ||
| {{htmlSafe @model.html}} | ||
| </div> | ||
| </:body> | ||
| </DModal> | ||
| </template>; | ||
|
|
||
| export default Preview; |
229 changes: 135 additions & 94 deletions
229
admin/assets/javascripts/discourse/controllers/admin-plugins-house-ads-show.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,115 +1,156 @@ | ||
| import { tracked } from "@glimmer/tracking"; | ||
| import Controller, { inject as controller } from "@ember/controller"; | ||
| import { not, or } from "@ember/object/computed"; | ||
| import { inject as service } from "@ember/service"; | ||
| import EmberObject, { action } from "@ember/object"; | ||
| import { service } from "@ember/service"; | ||
| import { TrackedObject } from "@ember-compat/tracked-built-ins"; | ||
| import { observes } from "@ember-decorators/object"; | ||
| import { ajax } from "discourse/lib/ajax"; | ||
| import { popupAjaxError } from "discourse/lib/ajax-error"; | ||
| import { propertyNotEqual } from "discourse/lib/computed"; | ||
| import { bufferedProperty } from "discourse/mixins/buffered-content"; | ||
| import Category from "discourse/models/category"; | ||
| import I18n from "I18n"; | ||
| import Preview from "../components/modal/preview"; | ||
|
|
||
| export default Controller.extend(bufferedProperty("model"), { | ||
| adminPluginsHouseAds: controller("adminPlugins.houseAds"), | ||
| router: service(), | ||
| export default class adminPluginsHouseAdsShow extends Controller { | ||
| @service router; | ||
| @service modal; | ||
|
|
||
| saving: false, | ||
| savingStatus: "", | ||
| @controller("adminPlugins.houseAds") houseAdsController; | ||
|
|
||
| nameDirty: propertyNotEqual("buffered.name", "model.name"), | ||
| htmlDirty: propertyNotEqual("buffered.html", "model.html"), | ||
| visibleToAnonsDirty: propertyNotEqual( | ||
| "buffered.visible_to_anons", | ||
| "model.visible_to_anons" | ||
| ), | ||
| visibleToLoggedInDirty: propertyNotEqual( | ||
| "buffered.visible_to_logged_in_users", | ||
| "model.visible_to_logged_in_users" | ||
| ), | ||
| dirty: or( | ||
| "nameDirty", | ||
| "htmlDirty", | ||
| "visibleToLoggedInDirty", | ||
| "visibleToAnonsDirty" | ||
| ), | ||
| disableSave: not("dirty"), | ||
| @tracked selectedCategories = []; | ||
| @tracked selectedGroups = []; | ||
| @tracked saving = false; | ||
| @tracked savingStatus = ""; | ||
| @tracked buffered; | ||
| actions: { | ||
| save() { | ||
| if (!this.get("saving")) { | ||
| this.setProperties({ | ||
| saving: true, | ||
| savingStatus: I18n.t("saving"), | ||
| }); | ||
| @observes("model") | ||
| modelChanged() { | ||
| this.buffered = new TrackedObject({ ...this.model }); | ||
| this.selectedCategories = this.model.categories || []; | ||
| this.selectedGroups = this.model.group_ids || []; | ||
| } | ||
| const data = {}, | ||
| buffered = this.get("buffered"), | ||
| newRecord = !buffered.get("id"); | ||
|
|
||
| if (!newRecord) { | ||
| data.id = buffered.get("id"); | ||
| } | ||
| data.name = buffered.get("name"); | ||
| data.html = buffered.get("html"); | ||
| data.visible_to_logged_in_users = buffered.get( | ||
| "visible_to_logged_in_users" | ||
| ); | ||
| data.visible_to_anons = buffered.get("visible_to_anons"); | ||
| get disabledSave() { | ||
| for (const key in this.buffered) { | ||
| // we don't want to compare the categories array | ||
| if (key !== "categories" && this.buffered[key] !== this.model[key]) { | ||
| return false; | ||
| } | ||
| } | ||
| return true; | ||
| } | ||
| ajax( | ||
| @action | ||
| async save() { | ||
| if (!this.saving) { | ||
| this.saving = true; | ||
| this.savingStatus = I18n.t("saving"); | ||
| const data = {}; | ||
| const newRecord = !this.buffered.id; | ||
| if (!newRecord) { | ||
| data.id = this.buffered.id; | ||
| } | ||
| data.name = this.buffered.name; | ||
| data.html = this.buffered.html; | ||
| data.visible_to_logged_in_users = | ||
| this.buffered.visible_to_logged_in_users; | ||
| data.visible_to_anons = this.buffered.visible_to_anons; | ||
| data.category_ids = this.buffered.category_ids; | ||
| data.group_ids = this.buffered.group_ids; | ||
| try { | ||
| const ajaxData = await ajax( | ||
| newRecord | ||
| ? `/admin/plugins/pluginad/house_creatives` | ||
| : `/admin/plugins/pluginad/house_creatives/${buffered.get("id")}`, | ||
| : `/admin/plugins/pluginad/house_creatives/${this.buffered.id}`, | ||
| { | ||
| type: newRecord ? "POST" : "PUT", | ||
| data, | ||
| } | ||
| ) | ||
| .then((ajaxData) => { | ||
| this.commitBuffer(); | ||
| this.set("savingStatus", I18n.t("saved")); | ||
| if (newRecord) { | ||
| const model = this.get("model"); | ||
| model.set("id", ajaxData.house_ad.id); | ||
| const houseAds = this.get("adminPluginsHouseAds.model"); | ||
| if (!houseAds.includes(model)) { | ||
| houseAds.pushObject(model); | ||
| } | ||
| this.router.transitionTo( | ||
| "adminPlugins.houseAds.show", | ||
| model.get("id") | ||
| ); | ||
| } | ||
| }) | ||
| .catch(popupAjaxError) | ||
| .finally(() => { | ||
| this.setProperties({ | ||
| saving: false, | ||
| savingStatus: "", | ||
| }); | ||
| }); | ||
| ); | ||
| this.savingStatus = I18n.t("saved"); | ||
| const houseAds = this.houseAdsController.model; | ||
| if (newRecord) { | ||
| this.buffered.id = ajaxData.house_ad.id; | ||
| if (!houseAds.includes(this.buffered)) { | ||
| houseAds.pushObject(EmberObject.create(this.buffered)); | ||
| } | ||
| this.router.transitionTo( | ||
| "adminPlugins.houseAds.show", | ||
| this.buffered.id | ||
| ); | ||
| } else { | ||
| houseAds | ||
| .find((ad) => ad.id === this.buffered.id) | ||
| .setProperties(this.buffered); | ||
| } | ||
| } catch (error) { | ||
| popupAjaxError(error); | ||
| } finally { | ||
| this.set("model", this.buffered); | ||
| this.saving = false; | ||
| this.savingStatus = ""; | ||
| } | ||
| }, | ||
| } | ||
| } | ||
| cancel() { | ||
| this.rollbackBuffer(); | ||
| }, | ||
| @action | ||
| setCategoryIds(categoryArray) { | ||
| this.selectedCategories = categoryArray; | ||
| this.buffered.category_ids = categoryArray.map((c) => c.id); | ||
| this.setCategoriesForBuffered(); | ||
| } | ||
| destroy() { | ||
| const houseAds = this.get("adminPluginsHouseAds.model"); | ||
| const model = this.get("model"); | ||
| @action | ||
| setGroupIds(groupIds) { | ||
| this.selectedGroups = groupIds; | ||
| this.buffered.group_ids = groupIds.map((id) => id); | ||
| } | ||
| if (!model.get("id")) { | ||
| this.router.transitionTo("adminPlugins.houseAds.index"); | ||
| return; | ||
| } | ||
| @action | ||
| cancel() { | ||
| this.buffered = new TrackedObject({ ...this.model }); | ||
| this.selectedCategories = this.model.categories || []; | ||
| this.selectedGroups = this.model.group_ids || []; | ||
| this.setCategoriesForBuffered(); | ||
| } | ||
| ajax(`/admin/plugins/pluginad/house_creatives/${model.get("id")}`, { | ||
| type: "DELETE", | ||
| }) | ||
| .then(() => { | ||
| houseAds.removeObject(model); | ||
| this.router.transitionTo("adminPlugins.houseAds.index"); | ||
| }) | ||
| .catch(popupAjaxError); | ||
| }, | ||
| }, | ||
| }); | ||
| @action | ||
| async destroy() { | ||
| if (!this.buffered.id) { | ||
| this.router.transitionTo("adminPlugins.houseAds.index"); | ||
| return; | ||
| } | ||
| try { | ||
| await ajax( | ||
| `/admin/plugins/pluginad/house_creatives/${this.buffered.id}`, | ||
| { | ||
| type: "DELETE", | ||
| } | ||
| ); | ||
| this.houseAdsController.model.removeObject( | ||
| this.houseAdsController.model.findBy("id", this.buffered.id) | ||
| ); | ||
| this.router.transitionTo("adminPlugins.houseAds.index"); | ||
| } catch (error) { | ||
| popupAjaxError(error); | ||
| } | ||
| } | ||
|
|
||
| @action | ||
| openPreview() { | ||
| this.modal.show(Preview, { | ||
| model: { | ||
| html: this.buffered.html, | ||
| }, | ||
| }); | ||
| } | ||
|
|
||
| setCategoriesForBuffered() { | ||
| // we need to fetch the categories because the serializer is not being used | ||
| // to attach the category object to the house ads | ||
| this.buffered.categories = this.buffered.category_ids | ||
| ? this.buffered.category_ids.map((categoryId) => | ||
| Category.findById(categoryId) | ||
| ) | ||
| : []; | ||
| } | ||
| } |
12 changes: 7 additions & 5 deletions
12
admin/assets/javascripts/discourse/routes/admin-plugins-house-ads-show.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.