...

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

Тема в разделе "Примеры сценариев", создана пользователем 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_dateTDate,
        
    start:string,
        
    end_dateTDate,
        
    end:string,
        
    placestring,
        
    positionstring
    }[] = []
    Создаем функцию инициализации виджета со следующим кодом:
    Код:
    
    async function onInit(): Promise<void> {

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

        
    //ищем элемент в приложении "Трудовая деятельность" по связке с текущим пользователем
        
    const employment await Context.fields.labor_activity.app.search().where((fg) => 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_dateitem.start,
                    
    startitem.start.format('DD.MM.YYYY'),
                    
    end_dateitem.end,
                    
    enditem.end item.end.format('DD.MM.YYYY') : '-'//проверяем есть ли дата окончания(то есть сотрудника работает по настоящее время)
                    
    placeitem.entity,
                    
    positionitem.position
                
    })
            }

            
    //сортируем данные по убыванию для удобства восприятия
            
    employment_data employment_data.sort(function (ab) {
                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
  2. AnatoliySelivanov

    AnatoliySelivanov Новичок

    А как сделать, чтоб это было по клику (ФИО вверху справа), не страница отдельная, а модальное окно к примеру?