...

Работа с порталом на примере создания профиля пользователя.

Тема в разделе "Примеры сценариев", создана пользователем k.sannikov, 23 май 2023.

Метки:
  1. k.sannikov

    k.sannikov Новичок

    Покажу пример создания виджета "Профиль пользователя" и "Трудовая деятельность" для отображения данных о пользователе на портале. В качестве приложения хранящего информацию профиля будет выступать системный пользователь ELMA.
    Создаем виджет "Профиль пользователя" на уровне раздела с порталом. В контекст виджета добавляем строковые переменные, которые будут содержать требуемую информацию о пользователе.


    В функции инициализации виджета определяем текущего пользователя и заполняем данными переменные контекста:
    Код:
    
async function onInit():Promise<void>{

            //определяем текущего пользователя
            const current_user = await System.users.getCurrentUser();

            //заполняем информацию о пользователе

        //Фото
            if(current_user.data.avatar){
                Context.data.photo_src = await current_user.data.avatar.getDownloadUrl();
        }

            //ФИО
            Context.data.fio = current_user.data.__name;

            //Должность
            let positions = await current_user.positions();
        if(    positions.length > 0){
                Context.data.position = positions[0].data.name;
        }

            //эл.почта
            if(current_user.data.email){
                Context.data.email = current_user.data.email;
        }

            //номер телефона
            if(current_user.data.workPhone){
                Context.data.phone = current_user.data.workPhone.tel;
        }

            //рук-ль
            let chiefs = await current_user.getChiefs();
        if(    chiefs.length > 0){
                let chief = await chiefs[0].fetch();
                Context.data.head = chief.data.__name;
        }

            //дата устройства на работу
            if(current_user.data.hireDate){
                Context.data.employment_date = current_user.data.hireDate.format('DD.MM.YYYY');
        }

            //День рождения
            if(current_user.data.birthDate){
                Context.data.bday = current_user.data.birthDate.format('DD.MM.YYYY');
        }
    }
    На форму виджета добавляем стандартный виджет "Код", создаем необходимую для вас html верстку. В места где должны отображаться сформированные данные добавляем следующий синтаксис <%= Context.data.переменная_контекста %>.

    HTML:
    <div class="user_profile">
    <div class="user_profile_wrapper">
        <div class="user_profile_body">
            <div class="user_profile_photo">
                <div class="user_photo_wrapper">
                    <img src="<%= Context.data.photo_src %>" alt="user_photo" class="user_photo_img">
                </div>
                <div class="user_info_wrapper">
                    <div class="user_subordinates_count">
                    </div>
                    <div class="user_course_count">
                    </div>
                </div>
            </div>
            <div class="user_profile_info">
                <h1 class="user_fio">
                    <%= Context.data.fio %>
                </h1>
                <div class="user_position user_profile_info_item">
                    <p class="user_info_name_string">Должность</p>
                    <p class="user_info_name_string_value position_value">
                        <%= Context.data.position %>
                    </p>
                </div>
                <div class="user_cheif user_profile_info_item">
                    <p class="user_info_name_string">Руководитель</p>
                    <p class="user_info_name_string_value-blue chief_value">
                        <%= Context.data.head %>
                    </p>
                </div>
                <div class="user_email user_profile_info_item">
                    <p class="user_info_name_string">E-mail</p>
                    <a href="mailto:<%= Context.data.email %>" class="user_info_name_string_value-blue email_value">
                        <%= Context.data.email %>
                    </a>
                </div>
                <div class="user_phone user_profile_info_item">
                    <p class="user_info_name_string">Мобильный тел.</p>
                    <a href="tel:<%= Context.data.phone %>" class="user_info_name_string_value-blue phone_value">
                        <%= Context.data.phone %>
                    </a>
                </div>
                <div class="user_position user_profile_info_item">
                    <p class="user_info_name_string">Дата рождения</p>
                    <p class="user_info_name_string_value position_value">
                        <%= Context.data.bday %>
                    </p>
                </div>
                <div class="user_position user_profile_info_item">
                    <p class="user_info_name_string">Дата трудоустройства</p>
                    <p class="user_info_name_string_value position_value">
                        <%= Context.data.employment_date %>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
    Добавляем еще один стандартный виджет "Код", где прописываем необходимые стили:
    HTML:
    <style>
    .employee_table {
        margin: 15px;
        font-size: 16px;
        color: RGB(217, 112, 67);
        text-decoration: underline
    }

    .user_profile {
        margin: 0;
        margin-bottom: 50px;
        padding: 15px;
        width: 100%;

    }

    .user_profile_wrappe {
        margin: 0 auto;
    }

    .user_profile_body {
        display: grid;
        grid-template-columns: 30% 65%;
        gap: 2%;
    }

    .user_fio {
        color: RGB(0, 50, 78);
    }

    .user_profile_info .user_fio {
        margin-bottom: 20px;
    }

    .user_profile_photo {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-right: 20px;
        /*height: 60%;*/
    }

    .user_photo_wrapper {
        border-radius: 50%;
        overflow: hidden;
    }

    .user_profile_info {
        display: grid;
        gap: 5%;
    }

    .user_profile_info>* {
        margin-bottom: 5px;
    }

    .user_profile_info_item {
        display: grid;
        grid-template-columns: 35% 60%;
        gap: 1%;
    }

    .user_work_phone {
        border-top: 1px solid #CAD1D8;
        padding-top: 20px;
    }

    .user_info_name_string {
        margin-right: 20px;
        color: #8C8C8C;
        font-size: 14px;
        line-height: 20px;
    }

    .user_info_name_string_value {
        font-size: 16px;
        line-height: 20px;
        color: RGB(217, 112, 67);
    }

    .user_info_name_string_value-blue {
        font-size: 16px;
        line-height: 20px;
        color: RGB(0, 65, 100);
    }

    .position_value,
    .departament_value,
    .organization_value,
    .work_phone_ext_string {
        color: RGB(0, 50, 78);
        vertical-align: center
    }

    .employeeTable {
        display: none;
    }

    .user_info_wrapper {
        display: flex;
        margin-top: 20px;
    }

    .user_subordinates_count,
    .user_course_count {
        width: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .user_subordinates_count {
        margin-right: 20px;
    }

    .user_count {
        background: #ec6607;
        padding: 10px;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 2em;
        position: absolute;
        bottom: -35px;
        left: 15px;
    }

    @media (max-width: 992px) {
        .user_profile_body {
            grid-template-columns: none;
        }

        .user_profile_info {
            margin-top: 10px;
        }
    }
</style>
    Публикуем:)
    Выносим виджет "Профиль пользователя" на необходимую страницу портала.
    upload_2023-5-23_14-19-55.png
    Добавим информацию о трудовой деятельности сотрудника. Создадим одноименное приложение со следующим контекстом:
    upload_2023-5-23_14-21-19.png

    Добавим в таблицу необходимые данные:
    upload_2023-5-23_14-21-52.png

    Создадим элемент приложения, выберем требуемого сотрудника и заполним таблицу информацией о трудовой детяльности:
    upload_2023-5-23_14-23-30.png
    Создадим одноименный виджет под трудовую деятельность сотрудника и заполним контекст:
    upload_2023-5-23_14-25-27.png

    На вкладке скрипты напишем удобную структуру которая будет хранить информацию о трудоустройстве:
    Код:
    
let employment_data: {
            start_date: TDate,
            start:string,
            end_date: TDate,
            end:string,
            place: string,
            position: string
    }[] = []
    Создаем функцию инициализации виджета со следующим кодом:
    Код:
    
async function onInit(): Promise<void> {

            //определяем текущего пользователя
            let cur_user = await System.users.getCurrentUser();

            //ищем элемент в приложении "Трудовая деятельность" по связке с текущим пользователем
            const employment = await Context.fields.labor_activity.app.search().where((f, g) => g.and(
                f.__deletedAt.eq(null),
                f.employee.eq(cur_user)
        )).    first();

        if (    employment) {
                //пробегаемся циклом по таблице и записываем все в ранее созданную структуру
                for (let item of employment.data.labor_activity_table!) {
                    employment_data.push({
                        start_date: item.start,
                        start: item.start.format('DD.MM.YYYY'),
                        end_date: item.end,
                        end: item.end ? item.end.format('DD.MM.YYYY') : '-', //проверяем есть ли дата окончания(то есть сотрудника работает по настоящее время)
                        place: item.entity,
                        position: item.position
                    })
            }

                //сортируем данные по убыванию для удобства восприятия
                employment_data = employment_data.sort(function (a, b) {
                if (    a.start_date.after(b.start_date)) {
                    return -    1;
                }
                if (    a.start_date.before(b.start_date)) {
                    return     1;
                }
                return     0;
            });
        }

            //записываем сформированный объект в контекст виджета
            if (employment_data && employment_data.length > 0) {
                Context.data.employment_list = employment_data;
        }
    }
    На форму виджета добавляем стандартный виджет "Код" и наполняем html версткой и в место, где у нас будет отображаться информация о трудовой деятельности ( в тег <ul> ) добавляем цикл:
    HTML:
    <div class="open-info employment">
    <div class="open-info-content open-info-content_employment">
        <div class="open-info-content-wrapper">
            <div class="open-info-content-table-head">
                <div class="open-info-content-table-head-text-wrapper open-info-content-date">
                    <p class="open-info-content-table-head-text">Дата начала</p>
                </div>
                <div class="open-info-content-table-head-text-wrapper open-info-content-date">
                    <p class="open-info-content-table-head-text">Дата окончания</p>
                </div>
                <div class="open-info-content-table-head-text-wrapper open-info-content-name">
                    <p class="open-info-content-table-head-text">Место</p>
                </div>
                <div class="open-info-content-table-head-text-wrapper open-info-content-number">
                    <p class="open-info-content-table-head-text">Должность</p>
                </div>
            </div>
            <ul class="open-info-content-table-section-list">
                <% const employment_list = Context.data.employment_list
                for (let i = 0; i < employment_list.length; i++) { %>
                    <li class="open-info-content-table-section-list-item open-info-content__card">
                        <p class="open-info-content-table-string-date"><%= employment_list[i].start %></p>
                        <p class="open-info-content-table-string-date"><%= employment_list[i].end %></p>
                        <p class="open-info-content-table-string-name"><%= employment_list[i].place %></p>
                        <p class="open-info-content-table-string-number"><%= employment_list[i].position %></p>
                    </li>
                <% } %>
            </ul>
        </div>
    </div>
</div>
    Публикуем и возвращаемся в виджет "Профиль пользователя". Добавим на форму виджет "Код", куда запишем необходимые стили для виджета "Трудовая деятельность":
    Добавим виджет "Панель с заголовком" и настроим следующим образом:
    upload_2023-5-23_14-35-56.png
    внутрь панели с заголовком добавим ранее созданный виджет "Трудовая деятельность".
    [​IMG]
    Публикуем:)
    Переходим на портал, нажимаем на "Трудовая деятельность":
    upload_2023-5-23_14-38-5.png

    Вложения:

    Последнее редактирование: 23 май 2023
    k.sannikov 23 май 2023
    #1
  2. AnatoliySelivanov

    AnatoliySelivanov Новичок

    А как сделать, чтоб это было по клику (ФИО вверху справа), не страница отдельная, а модальное окно к примеру?
    AnatoliySelivanov 1 окт 2024
    #2
Вы должны войти или зарегистрироваться, чтобы ответить.