rewrite extend

rewrite extend

diff --git a/assets/javascripts/initializers/extend-for-policy.js.es6 b/assets/javascripts/initializers/extend-for-policy.js.es6
index edc5a07..7c2e18f 100644
--- a/assets/javascripts/initializers/extend-for-policy.js.es6
+++ b/assets/javascripts/initializers/extend-for-policy.js.es6
@@ -1,164 +1,29 @@
 import EmberObject from "@ember/object";
-import showModal from "discourse/lib/show-modal";
 import I18n from "I18n";
-import getURL from "discourse-common/lib/get-url";
 import { withPluginApi } from "discourse/lib/plugin-api";
-import { renderAvatar } from "discourse/helpers/user-avatar";
-import { ajax } from "discourse/lib/ajax";
-import { popupAjaxError } from "discourse/lib/ajax-error";
 import { escapeExpression } from "discourse/lib/utilities";
-import { iconHTML } from "discourse-common/lib/icon-library";
-
-let currentUser;
 
 const SETTINGS = [
   { name: "group", visible: true },
   { name: "version", visible: true, optional: true },
   { name: "renew", visible: true, optional: true },
-  { name: "renew-start", visible: true, optional: true },
+  {
+    name: "renew-start",
+    camelName: "renewStart",
+    visible: true,
+    optional: true,
+  },
   { name: "reminder", optional: true },
   { name: "accept", optional: true },
   { name: "revoke", optional: true },
 ];
 
 function initializePolicy(api) {
-  currentUser = api.getCurrentUser();
-
-  function loadPolicyUsers(users) {
-    if (!users) {
-      return [];
-    }
-
-    return users.map((u) => {
-      return renderAvatar(u, { imageSize: "tiny" });
-    });
-  }
-
-  function render($policy, post) {
-    $policy.find(".policy-footer").remove();
-
-    let notAccepted = post.get("policy_not_accepted_by");
-    let accepted = post.get("policy_accepted_by");
-
-    if (!notAccepted) {
-      notAccepted = [];
-      post.set("policy_not_accepted_by", notAccepted);
-    }
-
-    if (!accepted) {
-      accepted = [];
-      post.set("policy_accepted_by", accepted);
-    }
-
-    const notAcceptedHtml = $(
-      "<div class='users not-accepted'>" +
-        loadPolicyUsers(notAccepted).join("") +
-        "</div>"
-    );
-    const acceptedHtml = $(
-      "<div class='users accepted'>" +
-        loadPolicyUsers(accepted).join("") +
-        "</div>"
-    );
-
-    let countNotAcceptedHtml = "";
-    if (notAccepted.length > 0) {
-      let title = escapeExpression(
-        I18n.t("discourse_policy.not_accepted_tooltip")
-      );
-      if (accepted.length > 0) {
-        countNotAcceptedHtml = "<div class='seperator'></div>";
-      }
-      let iconN = iconHTML("user-times");
-      countNotAcceptedHtml += `<a class='toggle toggle-not-accepted' title='${title}'>
-                                 <span class="user-count">
-                                   ${notAccepted.length}
-                                 </span>
-                                 ${iconN}
-                               </a>`;
-    }
-
-    let countAcceptedHtml = "";
-    if (accepted.length > 0) {
-      let title = escapeExpression(I18n.t("discourse_policy.accepted_tooltip"));
-      let iconA = iconHTML("user-check");
-      countAcceptedHtml = `<a class='toggle toggle-accepted' title='${title}'>
-                             <span class="user-count">
-                               ${accepted.length}
-                             </span>
-                             ${iconA}
-                           </a>`;
-    }
-    const revokeText = escapeExpression(
-      $policy.data("revoke") || I18n.t("discourse_policy.revoke_policy")
-    );
-    const acceptText = escapeExpression(
-      $policy.data("accept") || I18n.t("discourse_policy.accept_policy")
-    );
-    const $footer = $('<div class="policy-footer"></div>');
-    $footer
-      .append(
-        `<button class='btn btn-danger revoke btn-revoke-policy'>${revokeText}</button>`
-      )
-      .append(
-        `<button class='btn btn-primary accept btn-accept-policy'>${acceptText}</button>`
-      );
-    $('<div class="user-lists"></div>')
-      .appendTo($footer)
-      .append(countAcceptedHtml)
-      .append(acceptedHtml)
-      .append(countNotAcceptedHtml)
-      .append(notAcceptedHtml);
-
-    if ($policy.find(".policy-body").length === 0) {
-      $policy.wrapInner("<div class='policy-body'></div>");
-    }
-
-    $policy.append($footer);
-
-    let currentAccepted, currentNotAccepted;
-
-    if (currentUser) {
-      currentAccepted = accepted.any((u) => u.id === currentUser.id);
-      currentNotAccepted = notAccepted.any((u) => u.id === currentUser.id);
-    }
-
-    $policy.find(".btn.accept, .btn.revoke").hide();
-
-    if ($policy.attr("data-show-unaccepted")) {
-      $policy.find(".users.accepted").hide();
-    } else {
-      $policy.find(".users.not-accepted").hide();
-    }
-
-    if (currentAccepted) {
-      $policy.find(".btn.revoke").show();
-    }
-
-    if (currentNotAccepted) {
-      $policy.find(".btn.accept").show();
-    }
-
-    $policy.find(".policy-settings").remove();
-    const $policySettings = $(`<div class="policy-settings"></div>`);
-    $policy.append($policySettings);
-
-    const currentUserCanManagePolicy =
-      currentUser.staff || currentUser.id === post.user_id;
-    if (currentUserCanManagePolicy) {
-      _attachEditSettingsUI(
-        $policy,
-        $policySettings,
-        post,
-        _buildForm($policy)
-      );
-    }
-  }
-
-  function _buildForm($policy) {
+  function _buildForm(policy) {
     const form = {};
     SETTINGS.forEach((setting) => {
-      form[setting.name] = $policy.attr(`data-${setting.name}`) || "";
+      form[setting.name] =
+        policy.dataset[setting.camelName || setting.name] || "";
     });
 
     if (!form.version || parseInt(form.version, 10) < 1) {
@@ -168,137 +33,50 @@ function initializePolicy(api) {
     return EmberObject.create(form);
   }
 
-  function _attachEditSettingsUI($policy, $policySettings, post, form) {
-    const $editPolicySettingsBtn = $(
-      `<button class="btn no-text btn-default edit-policy-settings-btn">${iconHTML(
-        "cog"
-      )}</button>`
-    );
-    $policy.append($editPolicySettingsBtn);
+  function attachPolicy(cooked, helper) {
+    const policy = cooked.querySelector(".policy");
 
-    $policy.on("click", ".edit-policy-settings-btn", () => {
-      showModal("policy-builder").setProperties({
-        insertMode: false,
-        post,
-        form,
-      });
-    });
-  }
-
-  function attachPolicy($elem, helper) {
-    const $policy = $elem.find(".policy");
-
-    if ($policy.length === 0) {
+    if (!policy) {
       return;
     }
 
-    render($policy, helper.getModel());
-  }
-
-  function revokePolicy($policy, post) {
-    let notAccepted = post.get("policy_not_accepted_by");
-    let accepted = post.get("policy_accepted_by");
-
-    let elem = accepted.findBy("id", currentUser.id);
-
-    if (elem) {
-      accepted.removeObject(elem);
-      notAccepted.addObject(elem);
-      render($policy, post);
-    }
+    policy.innerHTML = `<div class="policy-body">${policy.innerHTML}</div>`;
 
-    const endpoint = getURL("/policy/unaccept");
-    ajax(endpoint, {
-      type: "put",
-      data: {
-        post_id: post.get("id"),
-      },
-    }).catch(popupAjaxError);
-    return false;
-  }
-
-  function acceptPolicy($policy, post) {
-    let notAccepted = post.get("policy_not_accepted_by");
-    let accepted = post.get("policy_accepted_by");
-
-    let elem = notAccepted.findBy("id", currentUser.id);
-
-    if (elem) {
-      notAccepted.removeObject(elem);
-      accepted.addObject(elem);
-      render($policy, post);
+    if (!helper) {
+      return;
     }
-    const endpoint = getURL("/policy/accept");
-    ajax(endpoint, {
-      type: "put",
-      data: {
-        post_id: post.get("id"),
-      },
-    }).catch(popupAjaxError);
-    return false;
-  }
-
-  function policyChanged(topicsController, message) {
-    const stream = topicsController.get("model.postStream");

[... diff too long, it was truncated ...]

GitHub sha: 9c12261d

Sorry about this commit, I thought I was pushing to a branch… should be with REFACTOR: rewrite UI using an Ember component