widget-form-territory-tzcld.js

import("./utils.js").then((utils) => {
    import(utils.coreVersion()).then((core) => {
        /* territory-add-member-edit-tzcld
        * Required as bind-resources+nested-field="members" would not allow store://resource but store://container instead
        */
        core.Sib.register({
            name: "territory-add-member-edit-tzcld",
            use: [core.StoreMixin],

            empty() {
            this.element.innerHTML = "";
            },
            

            async populate() {
                
                this.element.setAttribute('data-loaded', 'loaded')
                let rCommunity = {
                    members: await this.resource.members,
                    tzcld_profile: await this.resource.tzcld_profile
                };

                let rCommunityGroupeId = await rCommunity.members['@id'] ;
                let numericIdGroup = utils.getIntId(rCommunityGroupeId) ;
                let primary_contact = await rCommunity.tzcld_profile ;
                let user_primary = await primary_contact.primary_contact ;
                let user_primary_id = null ;
                if (await user_primary == undefined) {
                    user_primary_id = 0 ;
                } else {
                    user_primary_id = await user_primary['@id'] ;
                }
                
                this.element.innerHTML = `
                <div
                    class="loader">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>`;
                let render = `
                <div id="add-member-edit-wrapper-${numericIdGroup}" class="add-member-edit-wrapper" data-init-primary="${user_primary_id}">
                    <h2 class="tzcld-h2">Contacts du territoire</h2>
                    <h3 class="text-xlarge text-semibold text-color-heading">Rechercher un contact</h3>
                    <solid-member-add 
                        class="segment block whitespace-normal margin-bottom-xlarge form" 
                        data-src="${await this.resource['@id']}" 
                        nested-field="members" 
                        range-users="https://api.tzcld-stg.startinblox.com/users/" 
                        order-asc-users="@id"
                        class-submit-button="add-member-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered"
                        add-member-label="Ajouter un contact">
                    </solid-member-add>
                    <solid-widget name="tzcld-territory-edit-member-actions-${numericIdGroup}">
                        <template>
                            <div class="segment full sm-full text-right padding-right-small">
                                <input type="radio" name="primary_contact-${numericIdGroup}" value="\${value}" /> Référent·e de l'équipe projet
                                <solid-member-delete 
                                    data-src="${rCommunityGroupeId}" 
                                    data-target-src="\${value}" 
                                    data-label="Supprimer" 
                                    class-submit-button="segment text-medium children-link-color-primary children-button-icon children-icon-trash padding-left-small"
                                ></solid-member-delete>
                            </div>
                        </template>
                    </solid-widget>
                    <div id="loader-all-edit-contacts-territory-${numericIdGroup}" class="loader loader-top" hidden="">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <solid-display 
                        empty-value="Pas de contact"
                        empty-widget="tzcld-generic-no-result-info"
                        loader-id="loader-all-edit-contacts-territory-${numericIdGroup}" 
                        class="segment full children children-half sm-children-full children-margin-bottom-xxlarge sm-children-margin-bottom-xsmall  children-padding-left-xsmall sm-children-padding-none sm-whitespace-normal masonry counter pagination tzcld-edit-contacts-list" 
                        data-src="${await this.resource['@id']}" 
                        array-field="user_set"
                        nested-field="members" 
                        fields="segment1(segment2(member-picture(account.picture)), segment3(name, segment5(tzcld_profile.jobs)), profile.user, @id, segment6(community.@id))"
                        class-segment1="segment full text-top whitespace-normal member-edit-item" 
                        class-segment2="segment quarter md-full padding-medium text-center whitespace-normal" 
                        class-segment3="segment three-quarter md-full padding-top-xxsmall padding-left-small padding-right-small padding-bottom-small whitespace-normal" 
                        class-segment5="segment full padding-none padding-top-xsmall text-left whitespace-normal" 
                        class-segment6="hidden" 
                        class-member-picture="segment avatar-wrapper" 
                        class-account.picture="avatar medium" 
                        class-name="block margin-top-xlarge margin-bottom-xxsmall text-xlarge text-bold text-color-heading whitespace-normal"
                        class-profile.user="user-actions"
                        widget-account.picture="orbit-user-avatar" 
                        widget-name="h3"
                        widget-tzcld_profile.jobs="customtzcld-display-user-profile-first-job-short" 
                        widget-profile.user="tzcld-orbit-territory-team-contact-actions"
                        widget-id="tzcld-territory-edit-member-actions-${numericIdGroup}"
                        class-id="segment full member-edit-item-actions"
                        value-community.id="${await this.resource['@id']}"
                        solid-resource=""  
                        order-asc="@id"
                        paginate-by="20"
                    ></solid-display>
                `;

                render += `
                    <solid-form
                    class="hidden"
                    data-src="${await this.resource['@id']}"
                    nested-field="tzcld_profile"
                    fields="primary_contact"
                    widget-primary_contact="solid-form-hidden"
                    range-primary_contact="${rCommunityGroupeId}"
                    >
                    </solid-form>
                    
                </div>`;

                this.element.innerHTML = render;
                initformPrimary(numericIdGroup, user_primary_id) ;
            },
        });
        

        function initformPrimary(groupeId, id_primary) {
            let section = document.getElementById('add-member-edit-wrapper-'+groupeId) ;
            let user_list = section.querySelector('solid-display.tzcld-edit-contacts-list') ;

            let init_primary_on_list_input = core.Helpers.asyncQuerySelector('input[name="primary_contact-'+groupeId+'"][value="'+(id_primary)+'"]', user_list) ;
            init_primary_on_list_input.then((input) => {
                if(input !== undefined) {
                    input.setAttribute('checked', 'checked')
                }
              })

            utils.live('click', '#add-member-edit-wrapper-'+groupeId+' input[type=radio]',  function(e){ 
                let section = utils.findAncestor(e.target, 'add-member-edit-wrapper') ;
                if (e.target.getAttribute('data-saved') == 'on_save') {
                    
                } else {
                    let hiddenForm = section.querySelector('solid-form.hidden') ;
                    hiddenForm.querySelector('input[name="primary_contact"').value = "{\"@id\": \""+e.target.value+"\"}" ;;
                    if (hiddenForm.parentNode) {
                        e.target.setAttribute('data-saved', 'on_save')
                        hiddenForm._component.save();
                        
                    }
                }
               
              });

        }
    });
});

function isPrimary(id, priamry_id) {
    if (id == priamry_id) {
        return 'checked' ;
    }
    return '';
}