FEATURE: Popup to copy shareable links to reports (#41)

* FEATURE: Popup to copy shareable links to reports * Only show created_at if it is non-empty * remove unneeded dependencies in share-report * Use Discourse.BaseUrl and i18n some text
2019-10-28 14:32:09 -05:00
parent aa9a3a8ce5
commit 446e6bf29c
6 changed files with 127 additions and 7 deletions
@@ -0,0 +1,86 @@
+import {
+  default as computed,
+  on
+} from "ember-addons/ember-computed-decorators";
+
+export default Ember.Component.extend({
+  classNames: ["share-report"],
+
+  group: null,
+  query: null,
+  visible: false,
+
+  @computed("group", "query")
+  link() {
+    return (
+      Discourse.BaseUrl +
+      "/g/" +
+      this.group +
+      "/reports/" +
+      this.query.id
+    );
+  },
+
+  _mouseDownHandler(event) {
+    if (!this.element || this.isDestroying || this.isDestroyed) {
+      return;
+    }
+    if ($(this.element).has(event.target).length !== 0) {
+      return;
+    }
+
+    this.send("close");
+
+    return true;
+  },
+
+  _keydownHandler(event) {
+    if (!this.element || this.isDestroying || this.isDestroyed) {
+      return;
+    }
+
+    if (event.keyCode === 27) {
+      this.send("close");
+    }
+  },
+
+  @on("init")
+  _setupHandlers() {
+    this._boundMouseDownHandler = Ember.run.bind(this, this._mouseDownHandler);
+    this._boundKeydownHandler = Ember.run.bind(this, this._keydownHandler);
+  },
+
+  didInsertElement() {
+    this._super(...arguments);
+
+    $("html")
+      .on("mousedown.outside-share-link", this._boundMouseDownHandler)
+      .on("keydown.share-view", this._boundKeydownHandler);
+  },
+
+  willDestroyElement() {
+    this._super(...arguments);
+
+    $("html")
+      .off("mousedown.outside-share-link", this._boundMouseDownHandler)
+      .off("keydown.share-view", this._boundKeydownHandler);
+  },
+
+  actions: {
+    open(e) {
+      this.set("visible", true);
+      window.setTimeout(
+        () =>
+          $(this.element)
+            .find("input")
+            .select()
+            .focus(),
+        160
+      );
+    },
+
+    close(e) {
+      this.set("visible", false);
+    }
+  }
+});
@@ -24,8 +24,6 @@ export default Discourse.Route.extend({
                "group_names",
                (query.group_ids || [])
                  .map(id => groupNames[id])
-                  .filter(n => n)
-                  .join(", ")
              );
            });
            return { model, schema, groups };
@@ -206,16 +206,16 @@
                  {{/if}}
                </td>
                <td class="query-group-names">
-                  {{#if query.group_names}}
-                    <medium>{{query.group_names}}</medium>
-                  {{/if}}
+                  {{#each query.group_names as |group|}}
+                    {{share-report group=group query=query}}
+                  {{/each}}
                </td>
                <td class="query-created-at">
                  {{#if query.last_run_at}}
                    <medium>
                      {{bound-date query.last_run_at}}
                    </medium>
-                  {{else}}
+                  {{else if query.created_at}}
                    <medium>
                      {{bound-date query.created_at}}
                    </medium>
@@ -0,0 +1,13 @@
+<div onclick={{action "open"}}>
+  {{d-icon "link"}}
+  {{group}}
+</div>
+{{#if visible}}
+  <div class='popup'>
+    <label>{{i18n "explorer.link"}} {{group}}</label>
+    <input value={{link}}/>
+    <span onclick={{action "close"}}>
+      {{d-icon "times"}}
+    </span>
+  </div>
+{{/if}}