"use strict";(self.webpackChunk_aidoop_aidoop_r=self.webpackChunk_aidoop_aidoop_r||[]).push([[1034],{51034:(t,e,i)=>{i.r(e),i.d(e,{ContactListPage:()=>b});var o=i(50493),a=i(68784),r=i(15633),s=i(77675),n=i(94430),c=i(56765),d=i(69292),l=i(27805),p=i(53421),m=i(37077),h=i(64312),g=i(36179),u=i(28120),f=i(16682);i(80803);class y extends n.oi{constructor(){super(...arguments),this.contacts=[],this.columns={list:{fields:["name","description"]},pagination:{infinite:!0},columns:[{type:"string",name:"name",header:p.z2.t("field.name"),width:150},{type:"string",name:"description",header:p.z2.t("field.description"),width:200},{type:"checkbox",name:"active",header:p.z2.t("field.active"),width:60}]}}render(){return n.dy`
      <ox-grist
        .mode=${(0,g.s2)()?"LIST":"GRID"}
        .config=${this.columns}
        .data=${{records:this.contacts}}
      ></ox-grist>

      <div class="button-container">
        <mwc-button raised @click="${this.save.bind(this)}">${p.z2.t("button.save")}</mwc-button>
      </div>
    `}async save(){var t;(null===(t=(await l.Lp.mutate({mutation:f.ZP`
        mutation importContacts($contacts: [ContactPatch!]!) {
          importContacts(contacts: $contacts)
        }
      `,variables:{contacts:this.contacts}})).errors)||void 0===t?void 0:t.length)||this.dispatchEvent(new CustomEvent("imported"))}}y.styles=[n.iv`
      :host {
        display: flex;
        flex-direction: column;

        background-color: #fff;
      }

      ox-grist {
        flex: 1;
      }

      .button-container {
        display: flex;
        margin-left: auto;
        padding: var(--padding-default);
      }

      mwc-button {
        margin-left: var(--margin-default);
      }
    `],(0,o.gn)([(0,c.Cb)({type:Array}),(0,o.w6)("design:type",Array)],y.prototype,"contacts",void 0),(0,o.gn)([(0,c.Cb)({type:Object}),(0,o.w6)("design:type",Object)],y.prototype,"columns",void 0);let b=class extends((0,u.$)(s.h)((0,p.NC)(p.z2)((0,d.f)(s.B4)))){constructor(){super(...arguments),this.mode=(0,g.s2)()?"CARD":"GRID"}static get scopedElements(){return{"contact-importer":y}}get context(){var t;return{title:p.z2.t("title.contact list"),search:{handler:t=>{this.grist.searchText=t},value:(null===(t=this.grist)||void 0===t?void 0:t.searchText)||""},filter:{handler:()=>{this.grist.toggleHeadroom()}},help:"contact/contact",actions:[Object.assign({title:p.z2.t("button.save"),action:this._updateContact.bind(this)},r.jO.save),Object.assign({title:p.z2.t("button.delete"),action:this._deleteContact.bind(this)},r.jO.delete)],exportable:{name:p.z2.t("title.contact list"),data:this.exportHandler.bind(this)},importable:{handler:this.importHandler.bind(this)}}}render(){const t=this.mode||((0,g.s2)()?"CARD":"GRID");return n.dy`
      <ox-grist .mode=${t} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
        <div slot="headroom">
          <div id="filters">
            <ox-filters-form autofocus without-search></ox-filters-form>
          </div>

          <div id="sorters">
            Sort
            <mwc-icon
              @click=${t=>{const e=t.currentTarget;this.sortersControl.open({right:0,top:e.offsetTop+e.offsetHeight})}}
              >expand_more</mwc-icon
            >
            <ox-popup id="sorter-control">
              <ox-sorters-control> </ox-sorters-control>
            </ox-popup>
          </div>

          <div id="modes">
            <mwc-icon @click=${()=>this.mode="GRID"} ?active=${"GRID"==t}>grid_on</mwc-icon>
            <mwc-icon @click=${()=>this.mode="LIST"} ?active=${"LIST"==t}>format_list_bulleted</mwc-icon>
            <mwc-icon @click=${()=>this.mode="CARD"} ?active=${"CARD"==t}>apps</mwc-icon>
          </div>

          <div id="add">
            <button><mwc-icon @click=${this.onCreateContact.bind(this)}>add</mwc-icon></button>
          </div>
        </div>
      </ox-grist>
    `}async pageInitialized(t){this.gristConfig={pagination:{pages:[100,200,500]},list:{thumbnail:"profile",fields:["name","company"],details:["email","updatedAt"]},columns:[{type:"gutter",gutterName:"sequence"},{type:"gutter",gutterName:"row-selector",multiple:!0},{type:"gutter",gutterName:"button",icon:"edit",forList:!1,title:p.z2.t("title.edit"),handlers:{click:async(t,e,i,o,a)=>{this.openContactPopup(o)}}},{type:"string",name:"name",header:p.z2.t("field.name"),record:{editable:!1},filter:"search",sortable:!0,width:100},{type:"string",name:"company",header:p.z2.t("field.company"),record:{editable:!1},filter:"search",sortable:!0,width:135},{type:"string",name:"email",header:p.z2.t("field.email"),record:{editable:!1},sortable:!0,width:190},{type:"string",name:"phone",header:p.z2.t("field.phone"),record:{editable:!1},sortable:!0,width:120},{type:"string",name:"address",header:p.z2.t("field.address"),record:{editable:!1},sortable:!0,width:390},{type:"resource-object",name:"updater",header:p.z2.t("field.updater"),record:{editable:!1},sortable:!0,width:90},{type:"datetime",name:"updatedAt",header:p.z2.t("field.updated_at"),record:{editable:!1},sortable:!0,width:180},{type:"image",name:"profile",record:{renderer:function(t,e,i,o,a){return n.dy`<ox-pfp-view
                style="height:90%; width: unset; aspect-ratio: 1 / 1;"
                .profile=${i.profile}
                .name=${i.name}
              ></ox-pfp-view>`}},hidden:!0}],rows:{handlers:{click:(t,e,i,o,a,r)=>{"GRID"!==this.mode&&this.openContactPopup(o)}},appendable:!1,selectable:{multiple:!0}},sorters:[{name:"company"},{name:"name"}]}}async pageUpdated(t,e){this.active}async fetchHandler({page:t=1,limit:e=100,sortings:i=[],filters:o=[]}){const a=await l.Lp.query({query:f.ZP`
        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
          responses: contacts(filters: $filters, pagination: $pagination, sortings: $sortings) {
            items {
              id
              name
              company
              email
              phone
              address
              department
              note
              profile {
                left
                top
                zoom
                picture
              }
              updater {
                id
                name
              }
              updatedAt
            }
            total
          }
        }
      `,variables:{filters:o,pagination:{page:t,limit:e},sortings:i}});return{total:a.data.responses.total||0,records:a.data.responses.items||[]}}async _deleteContact(){if(confirm(p.z2.t("text.sure_to_x",{x:p.z2.t("text.delete")}))){const t=this.grist.selected.map((t=>t.id));if(t&&t.length>0){(await l.Lp.mutate({mutation:f.ZP`
            mutation ($ids: [String!]!) {
              deleteContacts(ids: $ids)
            }
          `,variables:{ids:t}})).errors||(this.grist.fetch(),(0,m.h4)({message:p.z2.t("text.info_x_successfully",{x:p.z2.t("text.delete")})}))}}}async _updateContact(){let t=this.grist.dirtyRecords;if(t&&t.length){t=t.map((t=>{let e=t.id?{id:t.id}:{};const i=t.__dirtyfields__;for(let t in i)e[t]=i[t].after;return e.cuFlag=t.__dirty__,e}));(await l.Lp.mutate({mutation:f.ZP`
          mutation ($patches: [ContactPatch!]!) {
            updateMultipleContact(patches: $patches) {
              name
              company
              email
              profile {
                left
                top
                zoom
                picture
              }
              updater {
                id
                name
              }
              updatedAt
            }
          }
        `,variables:{patches:t}})).errors||this.grist.fetch()}}async exportHandler(){const t=this.grist.selected.length?this.grist.selected:this.grist.dirtyData.records,e=new Set(["id","name","company","email","phone","address","note"]);return t.map((t=>{let i={};for(const o of e)i[o]=t[o];return i}))}async importHandler(t){(0,m.Mw)(n.dy`
        <contact-importer
          .contacts=${t}
          @imported=${()=>{history.back(),this.grist.fetch()}}
        ></contact-importer>
      `,{backdrop:!0,size:"large",title:p.z2.t("title.import contact")}).onclosed=()=>{this.grist.fetch()}}async openContactPopup(t){const e=await l.Lp.query({query:f.ZP`
        query ($id: String!) {
          contact(id: $id) {
            id
            name
            company
            email
            phone
            address
            department
            note
            items {
              type
              label
              value
            }
            profile {
              left
              top
              zoom
              picture
            }
          }
        }
      `,variables:{id:t.id}}),{contact:i}=e.data;(0,m.Mw)(n.dy` <contact-popup .contact=${i}></contact-popup> `,{backdrop:!0,size:"large",title:p.z2.t("title.contact")}).onclosed=()=>{this.grist.fetch()}}async onCreateContact(){(0,m.Mw)(n.dy` <contact-popup edit-mode></contact-popup> `,{backdrop:!0,size:"large",title:p.z2.t("title.contact")}).onclosed=()=>{this.grist.fetch()}}};b.styles=[r.Ix,r.Pn,n.iv`
      :host {
        display: flex;

        width: 100%;

        --grid-record-emphasized-background-color: red;
        --grid-record-emphasized-color: yellow;
      }
    `],(0,o.gn)([(0,c.Cb)({type:Object}),(0,o.w6)("design:type",Object)],b.prototype,"gristConfig",void 0),(0,o.gn)([(0,c.Cb)({type:String}),(0,o.w6)("design:type",String)],b.prototype,"mode",void 0),(0,o.gn)([(0,c.IO)("ox-grist"),(0,o.w6)("design:type",a.Nw)],b.prototype,"grist",void 0),(0,o.gn)([(0,c.IO)("#sorter-control"),(0,o.w6)("design:type",h.WP)],b.prototype,"sortersControl",void 0),b=(0,o.gn)([(0,c.Mo)("contact-list-page")],b)}}]);