https://virtual.cudi.edu.mx/webcomponents/sakai-group-picker.js?version=aa97bd14

1import { SakaiElement } from "./sakai-element.js?version=aa97bd14";
2import { html } from "./assets/lit-element/lit-element.js?version=aa97bd14";
3export class SakaiGroupPicker extends SakaiElement {
4  constructor() {
5    super();
6    this.groups = [];
7    this.debug = false;
8    this.loadTranslations("group-picker").then(t => this.i18n = t);
9  }
10
11  static get properties() {
12    return {
13      siteId: {
14        attribute: "site-id",
15        type: String
16      },
17      groupRef: {
18        attribute: "group-id",
19        type: String
20      },
21      groups: {
22        type: Array
23      },
24      formName: {
25        attribute: "form-name",
26        type: String
27      },
28      i18n: Object
29    };
30  }
31  /**
32   * If site-id is set, this means the caller wants us to pull the groups map from the server.
33   */
34
35
36  set siteId(newValue) {
37    this._siteId = newValue;
38    fetch(`/direct/site/${newValue}/groups.json`, {
39      credentials: "same-origin"
40    }).then(r => r.json()).then(groups => {
41      this.groups = groups.map(g => ({
42        reference: g.reference,
43        title: g.title
44      }));
45
46      if (this.debug) {
47        console.debug(this.groups);
48      }
49    });
50  }
51
52  get siteId() {
53    return this._siteId;
54  }
55
56  shouldUpdate() {
57    return this.i18n;
58  }
59
60  render() {
61    return html`
62      <select aria-label="${this.i18n["group_selector_label"]}" @change=${this.groupChanged}>
63        <option value="/site/${portal.siteId}" ?selected=${this.groupRef === "/site/${portal.siteId}"}>
64          ${this.i18n["site"]}
65        </option>
66        ${this.groups.map(g => html`<option value="${g.reference}" ?selected=${this.groupRef === g.reference}>${g.title}</option>`)}
67      </select>
68    `;
69  }
70
71  groupChanged(e) {
72    this.dispatchEvent(new CustomEvent("group-selected", {
73      detail: {
74        value: e.target.value
75      },
76      bubbles: true
77    }));
78  }
79
80}
81
82if (!customElements.get("sakai-group-picker")) {
83  customElements.define("sakai-group-picker", SakaiGroupPicker);
84}