"use strict";(self.webpackChunk_aidoop_aidoop_r=self.webpackChunk_aidoop_aidoop_r||[]).push([[629],{10629:(e,t,r)=>{r.r(t);var a=r(50493),i=(r(81925),r(96440),r(72596),r(92664),r(94430)),n=r(56765),o=r(53421);let s=class extends i.oi{render(){return i.dy`
      <div field-2column>
        <div field>
          <label
            >${o.z2.t("label.x name",{x:o.z2.t("label.user")})}
            <input name="name" type="text" required />
          </label>
        </div>
        <div field>
          <label
            >${o.z2.t("field.email")}
            <input name="email" type="email" required autocapitalize="off" />
          </label>
        </div>

        <div>
          <mwc-button
            @click=${this.onCreateUser.bind(this)}
            outlined
            label="${o.z2.t("button.create")}"
          ></mwc-button>
        </div>
      </div>
    `}async onCreateUser(){try{if(!this.emailInput.checkValidity())throw new Error(o.z2.t("error.not valid pattern of type",{type:"e-mail"}));if(!this.nameInput.value)throw new Error(o.z2.t("error.value is empty",{value:"name"}));const e={name:this.nameInput.value.trim(),email:this.emailInput.value.trim()};await this.dispatchEvent(new CustomEvent("create-user",{detail:e})),this.nameInput.value="",this.emailInput.value=""}catch(e){document.dispatchEvent(new CustomEvent("notify",{detail:{level:"error",message:"message"in e?e.message:e}}))}}};s.styles=i.iv`
    [field-2column] {
      background-color: var(--theme-white-color);
      margin: var(--margin-wide) 0;
      padding: var(--padding-wide);
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px 15px;
      clear: both;
      max-width: var(--input-container-max-width);
    }
    [field] {
      display: flex;
      flex-direction: column;
      padding-bottom: var(--padding-default);
    }
    [grid-span] {
      grid-column: span 2;
    }

    input {
      border: var(--border-dark-color);
      border-radius: var(--border-radius);
      margin: var(--input-margin);
      padding: var(--input-padding);
      min-width: 250px;
      font: var(--input-font);
    }
    label {
      display: flex;
      flex-direction: column;

      font: var(--label-font);
      color: var(--label-color);
      text-transform: var(--label-text-transform);
    }
    mwc-button {
      margin: var(--input-margin);
    }
    @media screen and (max-width: 480px) {
      div {
        display: grid;
      }
      [field] {
        grid-column: span 2;
      }
    }
  `,(0,a.gn)([(0,n.IO)("input[name=name]"),(0,a.w6)("design:type",HTMLInputElement)],s.prototype,"nameInput",void 0),(0,a.gn)([(0,n.IO)("input[name=email]"),(0,a.w6)("design:type",HTMLInputElement)],s.prototype,"emailInput",void 0),s=(0,a.gn)([(0,n.Mo)("create-user")],s);var d=r(16682),l=r(27805),c=r(77675),u=r(80692);let p=class extends c.B4{constructor(){super(...arguments),this.domainUsers=[],this.currentTab="",this.passwordResettable=!1,this.userCreatable=!1}get context(){return{title:o.z2.t("text.user management"),help:"auth/users"}}render(){const e=(this.domainUsers||[]).reduce(((e,t)=>{const r=t.userType;return e[r]||(e[r]=[]),t.activated="activated"===t.status,e[r].push(t),e}),{admin:[],user:[],application:[],appliance:[]}),t=o.z2.t("label.user"),r=o.z2.t("label.application"),a=o.z2.t("text.appliance"),n={[t]:[...e.user,...e.admin],[r]:e.application,[a]:e.appliance};return i.dy`
      <h2>users</h2>

      ${this.userCreatable?i.dy`<create-user
            @create-user=${async e=>{const t=e.detail;t.userType="user",await this.createUser(t)}}
          ></create-user>`:""}
      <quick-find-list
        id="user-list"
        .data=${n}
        @tabChanged=${e=>this.currentTab=e.detail.currentTabKey}
        .headerRenderer=${e=>i.dy`
            ${e.activated?i.dy` ${e.owner?i.dy` <mwc-icon>supervisor_account</mwc-icon> `:""} ${e.name} `:i.dy`
                  <mwc-icon>do_disturb</mwc-icon>
                  ${e.name}
                `}
          `}
        .contentRenderer=${e=>i.dy` <user-role-editor
            .user=${e}
            .domainOwner=${this.owner}
            .activate=${e.activated}
            @userUpdated=${this.refreshUsers.bind(this)}
            @ownershipTransferred=${this.refreshUsers.bind(this)}
            .passwordResettable=${this.passwordResettable}
          ></user-role-editor>`}
      ></quick-find-list>

      ${this.currentTab===t?i.dy`<invite-user @invitationCompleted=${this.refreshUsers.bind(this)}></invite-user>`:""}
    `}async pageUpdated(e,t,r){this.active&&(this.refreshUsers(),this.checkPasswordResettable(),this.checkUserCreatable())}async refreshUsers(){var e,t;const r=await l.Lp.query({query:d.ZP`
        query {
          users {
            items {
              id
              name
              email
              userType
              status
              owner
            }
          }
        }
      `,context:(0,l.Bn)()});(null===(e=r.errors)||void 0===e?void 0:e.length)||(this.domainUsers=r.data.users.items||[],this.owner=this.domainUsers.filter((e=>e.owner))[0]||{},null===(t=this.userListElement)||void 0===t||t.close())}async checkPasswordResettable(){const e=await l.Lp.query({query:d.ZP`
        query {
          checkResettablePasswordToDefault
        }
      `});e.errors||(this.passwordResettable=e.data.checkResettablePasswordToDefault)}async checkUserCreatable(){const e=await l.Lp.query({query:d.ZP`
        query {
          checkDefaultPassword
        }
      `});e.errors||(this.userCreatable=e.data.checkDefaultPassword)}async createUser(e){if(!(await(0,u.ID)({title:o.z2.t("text.are_you_sure"),text:o.z2.t("text.are_you_sure_to_x_user",{x:o.z2.t("button.create")}),confirmButton:{text:o.z2.t("button.confirm")},cancelButton:{text:o.z2.t("button.cancel")}})).value)return;(await l.Lp.mutate({mutation:d.ZP`
        mutation createUser($user: NewUser!) {
          createUser(user: $user) {
            name
          }
        }
      `,variables:{user:e},context:(0,l.Bn)()})).errors||(await(0,u.ID)({title:o.z2.t("text.completed"),confirmButton:{text:o.z2.t("button.confirm")}}),await this.refreshUsers())}showToast(e){document.dispatchEvent(new CustomEvent("notify",{detail:{message:e,option:{timer:1e3}}}))}};p.styles=[i.iv`
      :host {
        display: flex;
        flex-direction: column;
        background-color: var(--main-section-background-color);
        padding: var(--padding-wide);
        overflow: auto;
      }

      h2 {
        margin: var(--title-margin);
        font: var(--title-font);
        color: var(--title-text-color);
      }

      @media screen and (max-width: 600px) {
        :host {
          padding: var(--padding-narrow);
        }
        h2 {
          margin: var(--margin-narrow) var(--margin-default) 0 var(--margin-default);
        }
      }
    `],(0,a.gn)([(0,n.Cb)({type:Array}),(0,a.w6)("design:type",Array)],p.prototype,"domainUsers",void 0),(0,a.gn)([(0,n.Cb)({type:Object}),(0,a.w6)("design:type",Object)],p.prototype,"owner",void 0),(0,a.gn)([(0,n.Cb)({type:String}),(0,a.w6)("design:type",String)],p.prototype,"currentTab",void 0),(0,a.gn)([(0,n.Cb)({type:Boolean}),(0,a.w6)("design:type",Boolean)],p.prototype,"passwordResettable",void 0),(0,a.gn)([(0,n.Cb)({type:Boolean}),(0,a.w6)("design:type",Boolean)],p.prototype,"userCreatable",void 0),(0,a.gn)([(0,n.IO)("#user-list"),(0,a.w6)("design:type",Object)],p.prototype,"userListElement",void 0),p=(0,a.gn)([(0,n.Mo)("user-management")],p)},81925:(e,t,r)=>{var a=r(9201),i=r(94430),n=r(15494);class o extends((0,n.N)(n.z)(i.oi)){static get styles(){return[i.iv`
        .tabs {
          display: flex;
        }
        .tab {
          background-color: var(--secondary-background-color);
          margin-top: var(--margin-default);
          padding: var(--padding-narrow) var(--padding-wide) 0 var(--padding-wide);
          border-radius: 9px 9px 0 0;
          border-right: 1px solid rgba(0, 0, 0, 0.4);
          text-transform: capitalize;
          color: var(--theme-white-color);
          opacity: 0.7;
          cursor: pointer;
          white-space: nowrap;
        }
        .tab[activate] {
          background-color: var(--primary-color);
          box-shadow: 2px -2px 2px 0px rgba(0, 0, 0, 0.15);
          opacity: 1;
          font-weight: bold;
        }
        .tab[disabledTab] {
          pointer-events: none;
        }
        .tab span,
        .tab span[activate] {
          font-weight: normal;
          font-size: var(--fontsize-default);
        }

        @media screen and (max-width: 480px) {
          .tab {
            margin-top: var(--margin-narrow);
            padding: var(--padding-narrow) var(--padding-default);
            text-align: center;
          }
          .tab[disabledTab] {
            pointer-events: none;
          }
          .tab span,
          .tab span[activate] {
            font-size: var(--fontsize-default);
            margin-top: -4px;
          }
        }
      `]}static get properties(){return{data:Object,currentTabKey:String,disabledKey:Object}}render(){const e=this.data||{},t=Object.keys(e),r=this.currentTabKey||t[0];return i.dy`
      ${t?.length>1?i.dy`
            <div class="tabs">
              ${t.map(((t,a)=>{const n=e[t];return i.dy`
                  <div
                    class="tab"
                    ?activate="${t===r}"
                    ?disabledTab="${!!Object.keys(this.disabledKey||{}).includes(t)&&!this.disabledKey[t]}"
                    @click="${()=>this.currentTabKey=t}"
                  >
                    ${t} ${n?.length>0?i.dy`<span>(${n.length})</span>`:""}
                  </div>
                `}))}
            </div>
          `:""}
    `}updated(e){e.has("currentTabKey")&&this.dispatchEvent(new CustomEvent("tabChanged",{detail:{currentTabKey:this.currentTabKey},bubbles:!0,composed:!0,cancelable:!0}))}}customElements.define("quick-find-tabs",o);r(77198);class s extends i.oi{static get styles(){return[i.iv`
        .nav-bar {
          background-color: var(--theme-white-color);
          border: 1px solid var(--primary-color);
          border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
          margin: 0 0 var(--margin-wide) 0;
          padding: var(--padding-narrow);
          transition: opacity ease-in-out 0.3s;
          opacity: 100%;
          color: var(--secondary-color);
          font-size: var(--fontsize-default);
        }
        .nav-bar[scrolling] {
          opacity: 100%;
          transition: opacity ease-in-out 0.3s;
        }
        .nav-bar * {
          vertical-align: middle;
        }
        mwc-icon {
          --mdc-icon-size: 14px;
          padding-left: var(--padding-narrow);
          position: relative;
          margin-top: -2px;
        }
        .nav-bar span {
          border-right: var(--border-dark-color);
          border-width: 0 1px;
          padding: 0 var(--padding-default) 0 var(--padding-narrow);
          opacity: 0.8;
          color: var(--secondary-color);
          font-size: var(--fontsize-small);
        }
        .nav-bar span[activate] {
          font-weight: bold;
          cursor: pointer;
          color: var(--secondary-text-color);
          font-size: var(--fontsize-default);
        }

        @media screen and (max-width: 480px) {
          :host {
            width: 25px;
          }
          .nav-bar {
            position: absolute;
            right: 25px;
            z-index: 100;

            background-color: rgba(var(--primary-color-rgb), 0.2);
            border: none;
            border-radius: 15px;
            margin-top: initial;
            padding: var(--padding-narrow) 0;
            opacity: 0%;
            text-align: center;
          }
          .nav-bar span {
            display: block;
            border: none;
            margin: auto;
            padding: 2px var(--padding-narrow) 0 var(--padding-narrow);
            font-size: 12px;
          }
        }
      `]}static get properties(){return{scrolling:Boolean,indexes:Array,activeIndexes:Array}}constructor(){super(),this.indexes=[...Array(26).fill(65).map(((e,t)=>String.fromCharCode(e+=t))),"#"]}render(){const e=this.activeIndexes||[],t=Boolean(this.scrolling),r=this.scrollable;return i.dy`
      ${r?i.dy`<div class="nav-bar" ?scrolling=${t}>
            <mwc-icon>anchor</mwc-icon> <label>Quick Find :</label>
            ${this.indexes.map((t=>{const r=e.indexOf(t)>=0;return i.dy` <span
                ?activate="${r}"
                class="nav-cursor"
                @click=${e=>{r&&this.onclickNavCursor(t)}}
                >${t}</span
              >`}))}
          </div>`:""}
    `}onclickNavCursor(e){this.dispatchEvent(new CustomEvent("navigateTo",{detail:e,composed:!0}))}}customElements.define("quick-find-scroll",s);class d extends i.oi{static get styles(){return[a.Ix,i.iv`
        :host {
          display: flex;
          flex: 1;
          flex-direction: column;
          overflow: hidden;
          max-width: var(--content-container-max-width);
        }
        .list-container {
          flex: 1;

          display: flex;
          flex-direction: column;
          background-color: var(--theme-white-color);
          border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
          border: var(--border-dark-color);
          border-width: 0 1px 1px 1px;
          box-shadow: var(--box-shadow);
          overflow: auto;
        }
        ul {
          margin: 0;
          padding: 0;
          flex: 1;
          list-style: none;
        }
        li {
          border-bottom: var(--border-dark-color);
          margin-bottom: -1px;
          color: var(--secondary-color);
        }
        li:nth-child(even) {
          background-color: rgba(0, 0, 0, 0.025);
        }
        li:hover {
          background-color: rgba(var(--primary-color-rgb), 0.2);
        }
        li div {
          font: bold 16px var(--theme-font);
        }
        li div.header {
          padding: var(--padding-default) var(--padding-wide);
        }
        [opened] {
          border-left: 4px solid var(--google-green-300);
          border-bottom: 3px solid rgba(0, 0, 0, 0.1);
        }
        [opened] .header {
          background-color: var(--primary-color);
          box-shadow: var(--box-shadow);
          color: var(--theme-white-color);
        }
        [opened] .header::after {
          display: block;
          margin-bottom: -16px;
          position: relative;
          margin-top: 9px;
          content: '';
          width: 0px;
          height: 0px;
          border-left: 7px solid transparent;
          border-right: 7px solid transparent;
          border-top: 7px solid var(--primary-color);
        }
        li span {
          display: block;
          opacity: 0.9;
          font: normal 14px/18px var(--theme-font);
        }
        .header mwc-icon {
          --mdc-icon-size: var(--fontsize-default);
          margin-right: var(--padding-narrow);
        }
        @media screen and (max-width: 480px) {
          .list-container {
            border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
            border-width: 0 1px 1px 1px;
          }
        }
      `]}static get properties(){return{data:Object,nameField:String,currentTabKey:String,list:Array,contentRenderer:Object,floatingDelay:Number,currentOpenedItemIdx:Number,scrollable:Boolean,headerRenderer:Function}}constructor(){super(),this.nameField="name",this.floatingDelay=1,this.headerRenderer=e=>i.dy`${e.name}<span>${e.description}</span>`}render(){const e=this.nameField,t=this.data||{},r=t[this.currentTabKey]?this.currentTabKey:Object.keys(t)[0];let a=this.data[r];a=this.sortByNameField(a);const n=this.currentOpenedItemIdx,o=this.computeActiveIndexes(a,e),s=this.scrollable;return i.dy`
      <quick-find-tabs
        .currentTabKey="${r}"
        .data="${t}"
        @tabChanged="${e=>{this.currentOpenedItemIdx=null,this.currentTabKey=e.detail.currentTabKey}}"
      ></quick-find-tabs>

      <quick-find-scroll
        @navigateTo="${this.navigateTo}"
        .scrollable="${s}"
        .activeIndexes="${o}"
      ></quick-find-scroll>

      <div class="list-container" @scroll=${this.onscroll.bind(this)}>
        <ul>
          ${a?.length?i.dy`
                ${a.map(((e,t)=>{const r=n===t;return i.dy`
                    <li
                      class="list-item"
                      ?opened="${r}"
                      .item="${e}"
                      @click="${()=>{this.currentOpenedItemIdx===t?this.currentOpenedItemIdx=-1:this.currentOpenedItemIdx=t}}"
                    >
                      <div class="header">
                        ${r&&"function"==typeof this.openHeaderRenderer?this.openHeaderRenderer(e):this.headerRenderer(e)}
                      </div>

                      ${r&&"function"==typeof this.contentRenderer?i.dy`<div @click="${e=>e.stopPropagation()}">
                            ${this.contentRenderer(e,this.currentTabKey)}
                          </div>`:""}
                    </li>
                  `}))}
              `:""}
        </ul>
      </div>
    `}get listItems(){return Array.from(this.renderRoot.querySelectorAll(".list-container li.list-item"))}get quickFindScroll(){return this.renderRoot.querySelector("quick-find-scroll")}async updated(e){(e.has("data")||e.has("currentTabKey"))&&(await this.updateComplete,this.scrollable=this.computeScrollable())}computeActiveIndexes(e,t){return Array.from(new Set(e?.map((e=>e[t][0].toUpperCase()))))}computeScrollable(){const e=this.renderRoot.querySelector("ul");return e.clientHeight<e.scrollHeight}navigateTo(e){const t=this.nameField,r=e.detail.toLowerCase(),a=this.sortByNameField(this.data[this.currentTabKey]).findIndex((e=>0===e[t].toLowerCase().indexOf(r))),i=this.renderRoot.querySelector(`ul :nth-child(${a+1})`);i?.scrollIntoView()}onscroll(){this.quickFindScroll.scrolling||(this.quickFindScroll.scrolling=!0),null!==this.timer&&clearTimeout(this.timer),this.timer=setTimeout((()=>{this.quickFindScroll.scrolling=!1}),1e3*this.floatingDelay)}sortByNameField(e){const t=this.nameField;return e?.sort(((e,r)=>e[t]>r[t]?1:e[t]<r[t]?-1:0))}close(){this.currentOpenedItemIdx=-1}openByKey(e,t="id"){this.currentOpenedItemIdx=this.listItems.findIndex((r=>r.item[t]===e))}}customElements.define("quick-find-list",d);class l extends i.oi{static get styles(){return[a.Ix,i.iv`
        :host {
          display: flex;
          flex: 1;
          flex-direction: column;
          overflow: hidden;
          max-width: var(--content-container-max-width);
        }
        .content-container {
          flex: 1;
          display: flex;
          flex-direction: column;
          background-color: var(--theme-white-color);
          border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
          border: var(--border-dark-color);
          border-width: 0 1px 1px 1px;
          box-shadow: var(--box-shadow);
          overflow: auto;
        }
        @media screen and (max-width: 480px) {
          .content-container {
            border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
            border-width: 0 1px 1px 1px;
          }
        }
      `]}static get properties(){return{data:Object,currentTabKey:String,contentRenderer:Object,item:Object,disabledKey:Object}}render(){const e=this.data||{},t=e[this.currentTabKey]?this.currentTabKey:Object.keys(e)[0];let r=this.data[t];const a=this.disabledKey;return i.dy`
      <quick-find-tabs
        .currentTabKey="${t}"
        .data="${e}"
        .disabledKey="${a}"
        @tabChanged="${e=>{this.currentTabKey=e.detail.currentTabKey}}"
      ></quick-find-tabs>
      <div class="content-container">
        ${"function"==typeof this.contentRenderer?i.dy` <div>${this.contentRenderer(r,this.currentTabKey||t)}</div> `:""}
      </div>
    `}async updated(e){(e.has("data")||e.has("currentTabKey"))&&await this.updateComplete}}customElements.define("quick-find-content",l)}}]);