Trying to make JQuery Component reactivity

index.html

@@ -24,7 +24,6 @@
             <h1 class="text-base sm:text-xl font-mania flex-1 text-center">Список филиалов</h1>
         </div>
     </header>
-
     <main>
         <div class="block sm:flex container">
             <aside class="w-full sm:w-1/2 mr-8 shadow-2xl text-black text-base

package.json

@@ -25,7 +25,6 @@
     "@types/react": "^18.2.33",
     "axios": "^1.6.0",
     "flexsearch": "^0.7.31",
-    "izitoast": "^1.4.0",
     "jquery": "^3.7.1",
     "lodash": "^4.17.21",
     "node-html-parser": "^6.1.11"

src/backend/index.ts

@@ -36,11 +36,6 @@ class Office extends BaseHandler {
     async update_office(office: UpdateOfficeRequest) {
         await this.instance.post('offices/', office)
     }
-
-    async getById(idx: string | number) {
-        const {data} = await this.instance.get<ListOfficesResponse[0]>(`offices/${idx}`)
-        return data
-    }
 }
 
 class Profile extends BaseHandler {
@@ -49,16 +44,9 @@ class Profile extends BaseHandler {
         return data
     }
     async getById(idx: string | number): Promise<ListProfilesResponse> {
-        const {data} = await this.instance.get<ListProfilesResponse>(`profiles/${idx}`)
+        const {data} = await this.instance.get<ListProfilesResponse>(`profile/${idx}`)
         return data
     }
-    async createUser(profile: { full_name: string, phone: string, email: string }) {
-        return (await this.instance.post('profiles/', profile)).data
-    }
-
-    async updateUser(profile: {id: number, full_name: string, phone: string, email: string}) {
-        await this.instance.post('profiles/', profile)
-    }
 }
 
 export default new Backend()

src/block.ts

@@ -1,66 +1,20 @@
-import {BlockPropsType, QueryBlockType} from "./types.ts";
+import {BlocksDataValueType, QueryBlockType} from "./types.ts";
-import $ from "jquery";
+// import $ from "jquery";
 
-function generateStars(rating: number) {
+import {Component} from "./library/Component.ts";
-    let str = ''
-    for (let i = 0; i < rating; i++) {
-        str += '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n' +
-            '<path d="M5.825 22L7.45 14.975L2 10.25L9.2 9.625L12 3L14.8 9.625L22 10.25L16.55 14.975L18.175 22L12 18.275L5.825 22Z" fill="#E5352D"/>\n' +
-            '</svg>'
-    }
-    for (let i = rating; i < 5; i++) {
-        str += '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n' +
-            '<path d="M8.85 17.825L12 15.925L15.15 17.85L14.325 14.25L17.1 11.85L13.45 11.525L12 8.125L10.55 11.5L6.9 11.825L9.675 14.25L8.85 17.825ZM5.825 22L7.45 14.975L2 10.25L9.2 9.625L12 3L14.8 9.625L22 10.25L16.55 14.975L18.175 22L12 18.275L5.825 22Z" fill="#E5352D"/>\n' +
-            '</svg>'
-    }
-    return str
-}
 
-const Block = (props: BlockPropsType) => {
+class Block extends Component {
-    const query: QueryBlockType = {
+    component(props: BlocksDataValueType): string {
-        aex_only: props.aex_only === '1' ? 'Да' : 'Нет',
+        return `
-        mst_pr_aex: props.mst_pr_aex === '1' ? 'Да' : 'Нет',
+<div class="border-2 border-primary rounded px-2 py-4 shadow-xl office mb-4 office-block">
-        mst_pr_virt: props.mst_pr_virt === '1' ? 'Да' : 'Нет',
-        max_ves: props.max_ves === '0' ? 'Не установлено' : props.max_ves,
-        max_obyom: props.max_obyom === '0' ? 'Не установлено' : props.max_obyom,
-        max_ves_gm: props.max_ves_gm === '0' ? 'Не установлено' : props.max_ves_gm,
-        max_obyom_gm: props.max_obyom_gm === '0' ? 'Не установлено' : props.max_obyom_gm,
-        max_l_gm: props.max_l_gm === '0' ? 'Не установлено' : props.max_l_gm,
-        max_w_gm: props.max_w_gm === '0' ? 'Не установлено' : props.max_w_gm,
-        max_h_gm: props.max_h_gm === '0' ? 'Не установлено' : props.max_h_gm,
-        person_count: 'Не установлено',
-        features: props.features || '',
-        contact_profile: null,
-        features_changeable: ""
-    }
-
-    if (props.changeable_info) {
-        query.person_count = `${props.changeable_info.person_count}` || query.person_count
-        query.features_changeable = `${props.changeable_info.features}` || ''
-        query.rating = `${props.changeable_info.rating}`
-        if (props.changeable_info.contact_person) {
-            query.contact_profile = {
-                id: props.changeable_info.contact_person.id!,
-                fullName: props.changeable_info.contact_person.full_name!,
-                email: props.changeable_info.contact_person.email!,
-                phone: props.changeable_info.contact_person.phone!
-            }
-
-        }
-
-    }
-    const str = `<div class="border-2 border-primary rounded px-2 py-4 shadow-xl office mb-4 office-block">
                      <div class="flex justify-between mb-2">
                          <div>
-                            <h2 class="text-lg">${props.title}</h2>
+                             <h2 class="text-lg">${this.props!.title}</h2>
-                            <span class="text-base opacity-50">${props.addr}</span>
+                             <span class="text-base opacity-50">${this.props!.addr}</span>
                          </div>
                          <div> 
-                            <span class="flex">
+                             <span class="text-sm sm:text-base font-bold block">${this.props!.code}</span>
-                            ${generateStars(query.rating)}
+                             <span class="text-sm sm:text-base opacity-50">КЛАДР: ${this.props!.kladr_code}</span>
-                            </span>
-                            <span class="text-sm sm:text-base font-bold block">${props.code}</span>
-                            <span class="text-sm sm:text-base opacity-50">КЛАДР: ${props.kladr_code}</span>
                          </div>
                      </div>
 
@@ -79,41 +33,41 @@ const Block = (props: BlockPropsType) => {
 
                          <div>
                              <span class="font-bold">Прием/Выдача груза осуществляется только путем автоэкспедирования (забора/доставки)</span>
-                            <span class="text-primary font-bold">${query.aex_only}</span>
+                             <span class="text-primary font-bold">${this.props!.aex_only}</span>
                          </div>
                          <div>
                              <span class="font-bold">Наличие услуги автоэкспедирования на станции</span>
-                            <span class="text-primary font-bold">${query.mst_pr_aex}</span>
+                             <span class="text-primary font-bold">${this.props!.mst_pr_aex}</span>
                          </div>
                          <div>
                              <span class="font-bold">Виртуальный склад</span>
-                            <span class="text-primary font-bold">${query.mst_pr_virt}</span>
+                             <span class="text-primary font-bold">${this.props!.mst_pr_virt}</span>
                          </div>
 
                          <div>
-                            <span class="font-bold">Максимальный вес по ТТН: <span class="text-primary font-bold">${query.max_ves}</span>, кг</span>
+                             <span class="font-bold">Максимальный вес по ТТН: <span class="text-primary font-bold">${this.props!.max_ves}</span>, кг</span>
                          </div>
 
                          <div>
-                            <span class="font-bold">Максимальный объем по ТТН: <span class="text-primary font-bold">${query.max_obyom}</span>, м3</span>
+                             <span class="font-bold">Максимальный объем по ТТН: <span class="text-primary font-bold">${this.props!.max_obyom}</span>, м3</span>
                          </div>
                          <div>
-                            <span class="font-bold">Максимальный вес 1 усредненного груза: <span class="text-primary">${query.max_ves_gm}</span>, кг</span>
+                             <span class="font-bold">Максимальный вес 1 усредненного груза: <span class="text-primary">${this.props!.max_ves_gm}</span>, кг</span>
                          </div>
                          <div>
-                            <span class="font-bold">Максимальный объем 1 усредненного груза: <span class="text-primary">${query.max_obyom_gm}</span>, м3</span>
+                             <span class="font-bold">Максимальный объем 1 усредненного груза: <span class="text-primary">${this.props!.max_obyom_gm}</span>, м3</span>
                          </div>
                          <div>
                              <span class="font-bold">Максимальные габариты груза</span>
-                            <p>Длина: <span class="text-primary font-bold">${query.max_l_gm}</span>, м</p>
+                             <p>Длина: <span class="text-primary font-bold">${this.props!.max_l_gm}</span>, м</p>
-                            <p>Ширина: <span class="text-primary font-bold">${query.max_w_gm}</span>, м</p>
+                             <p>Ширина: <span class="text-primary font-bold">${this.props!.max_w_gm}</span>, м</p>
-                            <p>Высота: <span class="text-primary font-bold">${query.max_h_gm}</span>, м</p>
+                             <p>Высота: <span class="text-primary font-bold">${this.props!.max_h_gm}</span>, м</p>
                          </div>
 
                          <div>
                              <span class="font-bold">Количество сотрудников</span>
                              <div class="inline-flex items-center">
-                                <span class="text-primary font-bold">${query.person_count}</span>, чел
+                                 <span class="text-primary font-bold">${this.props!.person_count}</span>, чел
                              </div>
                          </div>
                         
@@ -121,18 +75,18 @@ const Block = (props: BlockPropsType) => {
                          <div>
                              <span class="block font-bold">Особые условия работы филиала</span>
                              <div class="inline-flex items-center">
-                                <p>${props.features}</p>
+                                 <p>${this.props!.features}</p>
                              </div>
                          </div>
                         
                          <div>
                              <span class="block font-bold">Контактное лицо</span>
                              <div class="">
-                                ${query.contact_profile ?
+                                 ${this.props!.contact_profile ?
          `
-<p>${query.contact_profile && query.contact_profile.fullName}</p>
+ <p>${this.props!.contact_profile && this.props!.contact_profile.fullName}</p>
-<p>${query.contact_profile && query.contact_profile.phone}</p>
+ <p>${this.props!.contact_profile && this.props!.contact_profile.phone}</p>
-<p>${query.contact_profile && query.contact_profile.email}</p>` : `<span>Данные не установлены</span>`}
+ <p>${this.props!.contact_profile && this.props!.contact_profile.email}</p>` : `<span>Данные не установлены</span>`}
                                 
 
                             
@@ -143,7 +97,7 @@ const Block = (props: BlockPropsType) => {
                          <div>
                              <span class="block font-bold">Особенности филиала</span>
                              <div class="inline-flex items-center">
-                                <textarea class="block border-primary border-2 px-4 py-2 disabled:border-[1px] disabled:border-[#a2a2a2] mb-4" cols="30" disabled>${props.changeable_info ? props.changeable_info.features || '' : ''}</textarea>
+                                 <textarea class="block border-primary border-2 px-4 py-2 disabled:border-[1px] disabled:border-[#a2a2a2] mb-4" cols="30" disabled>${this.props!.changeable_info ? this.props!.changeable_info.features || '' : ''}</textarea>
                              </div>
                          </div>
                          <button class="bg-primary text-white font-bold px-4 py-2 text-sm w-full">Изменить</button>
@@ -151,17 +105,151 @@ const Block = (props: BlockPropsType) => {
 
 
                  </div>`
-    return str
+    }
 }
 
-export const toggleBlocks = (element: JQuery<HTMLElement>) => {
+// const Block = (props: BlockPropsType) => {
-    const jqSelector = '.office-block.active .office-block__additional-info'
+//     const query: QueryBlockType = {
-
+//         aex_only: props.aex_only === '1' ? 'Да' : 'Нет',
-    $(jqSelector).addClass('hidden')
+//         mst_pr_aex: props.mst_pr_aex === '1' ? 'Да' : 'Нет',
-    $('.office-block.active').toggleClass('active')
+//         mst_pr_virt: props.mst_pr_virt === '1' ? 'Да' : 'Нет',
-
+//         max_ves: props.max_ves === '0' ? 'Не установлено' : props.max_ves,
-    element.toggleClass('active')
+//         max_obyom: props.max_obyom === '0' ? 'Не установлено' : props.max_obyom,
-    $(jqSelector).removeClass('hidden')
+//         max_ves_gm: props.max_ves_gm === '0' ? 'Не установлено' : props.max_ves_gm,
-}
+//         max_obyom_gm: props.max_obyom_gm === '0' ? 'Не установлено' : props.max_obyom_gm,
-
+//         max_l_gm: props.max_l_gm === '0' ? 'Не установлено' : props.max_l_gm,
-export default Block
+//         max_w_gm: props.max_w_gm === '0' ? 'Не установлено' : props.max_w_gm,
+//         max_h_gm: props.max_h_gm === '0' ? 'Не установлено' : props.max_h_gm,
+//         person_count: 'Не установлено',
+//         features: props.features || '',
+//         contact_profile: null,
+//         features_changeable: ""
+//     }
+//
+//     if (props.changeable_info) {
+//         query.person_count = `${props.changeable_info.person_count}` || query.person_count
+//         query.features_changeable = `${props.changeable_info.features}` || ''
+//         if (props.changeable_info.contact_person) {
+//             query.contact_profile = {
+//                 id: props.changeable_info.contact_person.id!,
+//                 fullName: props.changeable_info.contact_person.full_name!,
+//                 email: props.changeable_info.contact_person.email!,
+//                 phone: props.changeable_info.contact_person.phone!
+//             }
+//
+//         }
+//
+//     }
+//     const str = `<div class="border-2 border-primary rounded px-2 py-4 shadow-xl office mb-4 office-block">
+//                     <div class="flex justify-between mb-2">
+//                         <div>
+//                             <h2 class="text-lg">${props.title}</h2>
+//                             <span class="text-base opacity-50">${props.addr}</span>
+//                         </div>
+//                         <div>
+//                             <span class="text-sm sm:text-base font-bold block">${props.code}</span>
+//                             <span class="text-sm sm:text-base opacity-50">КЛАДР: ${props.kladr_code}</span>
+//                         </div>
+//                     </div>
+//
+//                     <hr />
+//                     <div class="hidden office-block__additional-info">
+//                         <div>
+//                 <span class="font-bold">
+//                     Обрабатываемые транспортные средства:
+//                 </span>
+//                             <div>
+//                                 <ul class="[&_li]:text-primary [&_li]:font-bold [&_li]:pl-2">
+//                                 Не указано
+//                                 </ul>
+//                             </div>
+//                         </div>
+//
+//                         <div>
+//                             <span class="font-bold">Прием/Выдача груза осуществляется только путем автоэкспедирования (забора/доставки)</span>
+//                             <span class="text-primary font-bold">${query.aex_only}</span>
+//                         </div>
+//                         <div>
+//                             <span class="font-bold">Наличие услуги автоэкспедирования на станции</span>
+//                             <span class="text-primary font-bold">${query.mst_pr_aex}</span>
+//                         </div>
+//                         <div>
+//                             <span class="font-bold">Виртуальный склад</span>
+//                             <span class="text-primary font-bold">${query.mst_pr_virt}</span>
+//                         </div>
+//
+//                         <div>
+//                             <span class="font-bold">Максимальный вес по ТТН: <span class="text-primary font-bold">${query.max_ves}</span>, кг</span>
+//                         </div>
+//
+//                         <div>
+//                             <span class="font-bold">Максимальный объем по ТТН: <span class="text-primary font-bold">${query.max_obyom}</span>, м3</span>
+//                         </div>
+//                         <div>
+//                             <span class="font-bold">Максимальный вес 1 усредненного груза: <span class="text-primary">${query.max_ves_gm}</span>, кг</span>
+//                         </div>
+//                         <div>
+//                             <span class="font-bold">Максимальный объем 1 усредненного груза: <span class="text-primary">${query.max_obyom_gm}</span>, м3</span>
+//                         </div>
+//                         <div>
+//                             <span class="font-bold">Максимальные габариты груза</span>
+//                             <p>Длина: <span class="text-primary font-bold">${query.max_l_gm}</span>, м</p>
+//                             <p>Ширина: <span class="text-primary font-bold">${query.max_w_gm}</span>, м</p>
+//                             <p>Высота: <span class="text-primary font-bold">${query.max_h_gm}</span>, м</p>
+//                         </div>
+//
+//                         <div>
+//                             <span class="font-bold">Количество сотрудников</span>
+//                             <div class="inline-flex items-center">
+//                                 <span class="text-primary font-bold">${query.person_count}</span>, чел
+//                             </div>
+//                         </div>
+//
+//
+//                         <div>
+//                             <span class="block font-bold">Особые условия работы филиала</span>
+//                             <div class="inline-flex items-center">
+//                                 <p>${props.features}</p>
+//                             </div>
+//                         </div>
+//
+//                         <div>
+//                             <span class="block font-bold">Контактное лицо</span>
+//                             <div class="">
+//                                 ${query.contact_profile ?
+//         `
+// <p>${query.contact_profile && query.contact_profile.fullName}</p>
+// <p>${query.contact_profile && query.contact_profile.phone}</p>
+// <p>${query.contact_profile && query.contact_profile.email}</p>` : `<span>Данные не установлены</span>`}
+//
+//
+//
+//
+//                             </div>
+//                         </div>
+//
+//                         <div>
+//                             <span class="block font-bold">Особенности филиала</span>
+//                             <div class="inline-flex items-center">
+//                                 <textarea class="block border-primary border-2 px-4 py-2 disabled:border-[1px] disabled:border-[#a2a2a2] mb-4" cols="30" disabled>${props.changeable_info ? props.changeable_info.features || '' : ''}</textarea>
+//                             </div>
+//                         </div>
+//                         <button class="bg-primary text-white font-bold px-4 py-2 text-sm w-full">Изменить</button>
+//                     </div>
+//
+//
+//                 </div>`
+//     return str
+// }
+//
+// export const toggleBlocks = (element: JQuery<HTMLElement>) => {
+//     const jqSelector = '.office-block.active .office-block__additional-info'
+//
+//     $(jqSelector).addClass('hidden')
+//     $('.office-block.active').toggleClass('active')
+//
+//     element.toggleClass('active')
+//     $(jqSelector).removeClass('hidden')
+// }
+//
+// export default Block

src/library/Component.ts

@@ -0,0 +1,39 @@
+export type ComponentProps = {
+    [x: string]: any
+    children?: JQuery<HTMLElement>[]
+}
+
+export class Component {
+    _element: JQuery<HTMLElement> | undefined
+    props: ComponentProps | undefined
+
+    constructor(props: ComponentProps) {
+        this.props = new Proxy<ComponentProps>({...props}, {
+            set: (target: ComponentProps, p: string, newValue: any): boolean => {
+                target[p] = newValue
+                this.rerender()
+                return true
+            }
+        })
+    }
+
+    component(): string {
+        return ``
+    }
+    rerender() {
+        const component = $(this.component())
+        this._element.replaceWith(component)
+        this._element = component
+    }
+
+    render() {
+        this._element = $(this.component())
+        this.props?.children && this._element.append(...this.props.children)
+    }
+
+    mount(element: JQuery<HTMLElement>) {
+        this.render()
+        element.append(this._element)
+    }
+
+}

src/main.ts

@@ -1,15 +1,14 @@
 import './style.css'
 import './fonts/ManiaExtended/stylesheet.css'
 import './fonts/OfficinaSerifBoldSCC/stylesheet.css'
-import 'izitoast/dist/css/iziToast.min.css';
 import $ from 'jquery';
-import _, {min} from 'lodash';
+import _ from 'lodash';
 import {BlocksDataValueType, FilterType} from "./types.ts";
 import Block, {toggleBlocks} from "./block.ts";
 import {renderModal} from "./modal.ts";
 import Backend from "./backend";
 
-let min_rating = 0
+
 // use this for search
 
 class Search {
@@ -85,14 +84,6 @@ const filterUpdate = (value: string | null, name: Exclude<keyof FilterType, 'ful
     return filtratedBlocks.map(el => el.data.code)
 }
 
-const filterRating = () => {
-    return _.filter(blocksData, obj => {
-        const {data} = obj
-        console.log(data)
-
-        return data.changeable_info && data.changeable_info.rating && data.changeable_info.rating >= min_rating
-    }).map(el => el.data.code)
-}
 
 const submitHandler = (e: JQuery.SubmitEvent<HTMLFormElement> | JQuery.ChangeEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -108,8 +99,7 @@ const submitHandler = (e: JQuery.SubmitEvent<HTMLFormElement> | JQuery.ChangeEve
         max_l_gm: filterUpdate(formData.get('max_l_gm') as string | null, 'max_l_gm'),
         max_w_gm: filterUpdate(formData.get('max_w_gm') as string | null, 'max_w_gm'),
         max_h_gm: filterUpdate(formData.get('max_h_gm') as string | null, 'max_h_gm'),
-        rating: filterRating()
+        people: filterUpdate(formData.get('people') as string | null, 'people')
-        // people: filterUpdate(formData.get('people') as string | null, 'people')
     }
     const dd = _.intersection(...Object.values(values))
     updateDisplayingData(...dd)
@@ -136,8 +126,21 @@ const reRenderHandler = () => {
             dataContainer.append(Object.values(blocksData).map(elem => elem.block))
             Object.values(blocksData).forEach(elem => {
                 elem.block.find('button').on('click', () => {
+                    const contact = {}
+                    if (elem.data.changeable_info && elem.data.changeable_info.contact_person) {
+                        contact.id = elem.data.changeable_info.contact_person.id
+                        contact.fullName = elem.data.changeable_info.contact_person.full_name
+                        contact.email = elem.data.changeable_info.contact_person.email
+                        contact.phone = elem.data.changeable_info.contact_person.phone
+                    }
                     renderModal({
                         code: elem.data.code,
+                        title: elem.data.title,
+                        rating: (elem.data.changeable_info && elem.data.changeable_info.rating) || 1,
+                        features: (elem.data.changeable_info && elem.data.changeable_info.features) || '',
+                        personalCount: (elem.data.changeable_info && elem.data.changeable_info.person_count) || 0,
+                        contact,
+
                     }, reRenderHandler)
                 })
             })
@@ -153,41 +156,3 @@ $("#fullTextSearch").on('input', () => {
         {preventDefault: () => null, target: document.querySelector('#filterForm')}
     )
 })
-
-$('#star1, #star2, #star3, #star4, #star5').on('click', (e)=> {
-    const func = (e: JQuery.Event) => {
-        const getParentObj = (elem) => {
-            if (typeof $(elem).attr('id') === 'undefined') {
-                return getParentObj(elem.parentElement)
-            }
-            return $(elem)
-        }
-        let idx: string | number | undefined = getParentObj(e.target).attr('id')
-        idx = +idx!.replace('star', '')
-        min_rating = idx
-
-        for (let i = 1; i <= 5; i++) {
-            const block = $(`#star${i}`)
-            const star_filled = `
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M5.825 22L7.45 14.975L2 10.25L9.2 9.625L12 3L14.8 9.625L22 10.25L16.55 14.975L18.175 22L12 18.275L5.825 22Z" fill="#E5352D"/>
-        </svg>
-        `
-            const star_stroked = `
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M8.85 17.825L12 15.925L15.15 17.85L14.325 14.25L17.1 11.85L13.45 11.525L12 8.125L10.55 11.5L6.9 11.825L9.675 14.25L8.85 17.825ZM5.825 22L7.45 14.975L2 10.25L9.2 9.625L12 3L14.8 9.625L22 10.25L16.55 14.975L18.175 22L12 18.275L5.825 22Z" fill="#E5352D"/>
-        </svg>
-
-        `
-
-            const obj = i <= idx ? $(star_filled) : $(star_stroked)
-
-            obj.on('click', e => func(e))
-            block.empty()
-            block.append(obj)
-        }
-    }
-
-    func(e)
-
-})

src/modal.ts

@@ -1,10 +1,19 @@
 import $ from 'jquery';
 import Backend from "./backend";
 import {UpdateOfficeRequest} from './backend/types.ts'
-import iziToast from "izitoast";
 
 type ModalPropsType = {
+    title: string
     code: string
+    rating?: number | string
+    features?: string
+    contact: {
+        id?: number,
+        fullName?: string
+        email?: string
+        phone?: string
+    }
+    personalCount?: number
 }
 
 let selectedValueUser = 0;
@@ -15,36 +24,44 @@ let selectedUser = {
     phone: ""
 }
 
-const UserCreationBlock = (props) => {
+const updateCurrentUser = new Proxy({html: ``}, {
+    set(target, p: string, newValue: any): boolean {
+        target[p] = newValue
+        return true
+    },
+    get(target, prop) {
+        if (prop === 'html') {
+            Backend.profile.listProfiles()
+                .then(data => data.map(
+                    elem => `<option value="${elem.id}">${elem.full_name}</option>`
+                ))
+                .then(data => `<select name="selectUser">${data.join('')}</select>`)
+                .then(data => updateCurrentUser.html = data)
+            return target.html
+        }
+    }
+})
+
+const UserCreationBlock = (props: ModalPropsType) => {
     const createUser = `
 <div>
-    <input class="border-2 border-secondary flex-1" type="text" name="profileFullName" placeholder="ФИО" required/>
+    <input class="border-2 border-secondary flex-1" type="text" name="profileFullName" placeholder="ФИО" value=""/>
-    <input class="border-2 border-secondary flex-1" type="email" name="profileEmail" placeholder="Email" required/> 
+    <input class="border-2 border-secondary flex-1" type="email" name="profileEmail" placeholder="Email" /> 
-    <input class="border-2 border-secondary flex-1" type="tel" name="profilePhone" placeholder="+79999999999" required/>
+    <input class="border-2 border-secondary flex-1" type="email" name="profilePhone" placeholder="+79999999999" />
-    <button class="bg-primary text-white px-4 py-2" id="createProfileBtn">Создать профиль</button>
 </div>
 `
-    const block = $(createUser)
+    return $(createUser)
-
-    block.find('#createProfileBtn').on('click', (e) => {
-        e.preventDefault()
-        Backend.profile.createUser({
-            full_name: String(block.find('input[name="profileFullName"]').val()),
-            phone: String(block.find('input[name="profilePhone"]').val()),
-            email: String(block.find('input[name="profileEmail"]').val())
-        }).then(
-            (data) => {iziToast.success({
-                title: "Пользователь успешно создан",
-                position: "topRight",
-                zindex: 30
-            }); return data}
-        ).then((data) => block.append(`<input type="hidden" name="profileId" value="${data.id}">`))
-    })
-
-    return block
 }
 
 const UserSelectingBlock = (props: ModalPropsType) => {
+    console.log('user id: ', selectedUser.id)
+    if (selectedUser.id === '') {
+        selectedUser.id = props.contact.id ? String(props.contact.id) : ''
+        selectedUser.phone = props.contact.phone || ''
+        selectedUser.email = props.contact.email || ''
+        selectedUser.full_name = props.contact.fullName || ''
+    }
+    console.log(selectedUser)
     const query = `
 <div>
 <select name="profileId" id="selectUserField">
@@ -53,105 +70,32 @@ const UserSelectingBlock = (props: ModalPropsType) => {
 
     <input class="border-2 border-secondary flex-1" type="text" name="profileFullName" placeholder="ФИО" value="${selectedUser.full_name}"/>
     <input class="border-2 border-secondary flex-1" type="email" name="profileEmail" placeholder="Email" value="${selectedUser.email}"/> 
-    <input class="border-2 border-secondary flex-1" type="tel" name="profilePhone" placeholder="+79999999999" value="${selectedUser.phone}" />
+    <input class="border-2 border-secondary flex-1" type="email" name="profilePhone" placeholder="+79999999999" value="${selectedUser.phone}" />
-    <button class="bg-primary text-white px-4 py-2">Изменить профиль</button>
 
 </div>
     `
     const queryBlock = $(query)
-    Backend.office.getById(props.code).then(
+    Backend.profile.listProfiles()
-        data => {
+        .then(data => data.map(elem => `<option value="${elem.id}">${elem.full_name}</option>`).join(""))
-            console.log(data)
-            if (data.changeable_info) {
-                return data.changeable_info.contact_person_id
-            }
-            return null
-        }
-    )
-        .then(idx => idx && Backend.profile.getById(idx))
-        .then(data => {
-            if (!data) {
-                return
-            }
-            selectedUser.id = String(data.id)
-            selectedUser.phone = String(data.phone)
-            selectedUser.email = String(data.email)
-            selectedUser.full_name = String(data.full_name)
-        })
-        .then(() => Backend.profile.listProfiles())
-        .then(data => data.map(elem => `<option value="${elem.id}" ${elem.id === +selectedUser.id ? 'checked' : ''}>${elem.full_name}</option>`).join(""))
         .then(e => queryBlock.find('select').append(e))
-        .then(() => selectHandler(selectedUser.id))
-
-
-    function selectHandler(idx: string | number) {
-        Backend.profile.getById(idx).then(
-            data => {
-                console.log(data)
-                $('[name="profileId"]').val(String(data.id))
-                $('[name="profileFullName"]').val(String(data.full_name))
-                $('[name="profileEmail"]').val(String(data.email))
-                $('[name="profilePhone"]').val(String(data.phone))
-            }
-        )
-    }
-
-    queryBlock.find('select').on('change', (e) => selectHandler(e.target.value))
-
-
     return queryBlock
 }
 
-function generateStars(rating: number) {
+const Modal = (props: ModalPropsType) => `
-    let str = ''
-    for (let i = 1; i <= +rating; i++) {
-        str += `
-<div class="ratingBlock">
-                    <label for="ratingField${i}" class="block">
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M5.825 22L7.45 14.975L2 10.25L9.2 9.625L12 3L14.8 9.625L22 10.25L16.55 14.975L18.175 22L12 18.275L5.825 22Z" fill="#E5352D"/>
-</svg>
-</label>
-<input class="border-2 border-secondary flex-1 hidden" type="radio" name="rating"
-                       value="${i}" id="ratingField${i}" ${i == rating ? 'checked' : ''}> 
-</div>
-`
-
-    }
-    for (let i = +rating+1; i <= 5; i++) {
-        str += `
-<div class="ratingBlock">
-<label for="ratingField${i}" class="block">
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8.85 17.825L12 15.925L15.15 17.85L14.325 14.25L17.1 11.85L13.45 11.525L12 8.125L10.55 11.5L6.9 11.825L9.675 14.25L8.85 17.825ZM5.825 22L7.45 14.975L2 10.25L9.2 9.625L12 3L14.8 9.625L22 10.25L16.55 14.975L18.175 22L12 18.275L5.825 22Z" fill="#E5352D"/>
-</svg>
-</label>
-<input class="border-2 border-secondary flex-1 hidden" type="radio" name="rating"
-                       value="${i}" id="ratingField${i}"> 
-</div>`
-    }
-    return str
-}
-
-const Modal = () => `
 <div class="fixed top-0 left-0 w-full h-full bg-secondary bg-opacity-50 z-10 flex flex-col justify-center" id="modal">
     <button class="text-white absolute top-14 right-14" id="removeModal">x</button>
     <div class="container flex flex-col mx-auto bg-white px-4 py-2">
-        <span class="text-xl" id="modalTitle"></span>
+        <span class="text-xl">${props.title}</span>
         <form class="[&_div]:mb-4 [&_input]:px-2 [&_textarea]:px-2" id="changeForm">
-            <input type="hidden" name="code" id="codeField" value="">
+            <input type="hidden" name="code" id="codeField" value="${props.code}">
             <div class="inline-flex w-1/2 [&_*]:mr-4 mb-6">
                 <span>Рейтинг</span>
-                
+                <input class="border-2 border-secondary flex-1" type="number" name="rating" max="5" min="1"
-                
+                       value="${props.rating || '1'}" id="ratingField">
-                <div class="ratingBlocks flex">
-                
-                </div>
-                
             </div>
             <div class="inline-flex w-1/2 [&_*]:mr-4 flex-col">
                 <span>Особенности филиала</span>
-                <textarea class="border-2 border-secondary flex-1" type="text" name="features" id="featuresField"></textarea>
+                <textarea class="border-2 border-secondary flex-1" type="text" name="features" id="featuresField">${props.features || ''}</textarea>
             </div>
             <div class="inline-flex w-1/2 [&_*]:mb-2 flex-col">
                 <span>Контактное лицо</span>
@@ -161,7 +105,7 @@ const Modal = () => `
                 <label class="mr-4" for="userCreationFieldFalse">Выбрать пользователя из уже существующих</label>
                 <input type="radio" name="userCreationField" value="1" id="userCreationFieldTrue" ${selectedValueUser === 1 && 'checked'}>
                 <label for="userCreationFieldTrue">Создать нового пользователя</label>
-                </div>
+                </div
                 <div id="userBlock">
                 
                 </div>
@@ -169,7 +113,7 @@ const Modal = () => `
             </div>
             <div class="inline-flex w-1/2 [&_*]:mr-4 flex-col">
                 <span>Количество сотрудников</span>
-                <input class="border-2 border-secondary flex-1" type="number" name="personalCount" min="0" value="" id="personalCountField"/>
+                <input class="border-2 border-secondary flex-1" type="number" name="personalCount" min="0" value="${props.personalCount}" id="personalCountField"/>
             </div>
             <button class="block bg-primary font-bold text-white px-4 py-2" type="submit">Изменить</button>
         </form>
@@ -177,80 +121,36 @@ const Modal = () => `
 </div>
 `
 
-function afterRendering(modal: JQuery<HTMLElement>, props: ModalPropsType) {
-    const func = (value) => {
-        const blockWrapper = modal.find(".ratingBlocks")
-        console.log('call')
-        blockWrapper.empty()
-        blockWrapper.append(generateStars(value))
-        blockWrapper.find('[name="rating"]').on('change', (e) => func(e.target.value))
 
-    }
-    Backend.office.getById(props.code).then(
-        data => {
-
-            if (data.changeable_info) {
-                // modal.find("#ratingField").val(data.changeable_info.rating || 1)
-                modal.find('.ratingBlocks').append(generateStars(data.changeable_info.rating || 1))
-                modal.find("#featuresField").val(data.changeable_info.features || '')
-                modal.find("#featuresField").val(data.changeable_info.features || '')
-                modal.find("#personalCountField").val(data.changeable_info.person_count || 0)
-            }
-            else {
-                modal.find('.ratingBlocks').append(generateStars(0))
-            }
-            modal.find('#modalTitle').text(data.title)
-            modal.find('#codeField').val(props.code)
-        }
-    )
-        .then(
-            () => modal.find('[name="rating"]').on('change', e => {
-                func(e.target.value)
-            })
-        )
-
-}
 
 export const renderModal = (props: ModalPropsType, reRenderHandler: () => void) => {
-    const modal = $(Modal())
+    const modal = $(Modal(props))
-    afterRendering(modal, props)
-    $('body').append(modal)
     registerEvents(modal, reRenderHandler, props)
+    $('body').append(modal)
 }
 
 const addModulesToModal = (props: ModalPropsType) => {
-    $('#userBlock').append(selectedValueUser === 0 ? UserSelectingBlock(props) : UserCreationBlock(props))
+   $('#userBlock').append(selectedValueUser === 0 ? UserSelectingBlock(props): UserCreationBlock(props))
 }
 
 const registerEvents = (modal: JQuery<HTMLElement>, reRenderHandler: () => void, props: ModalPropsType) => {
-    addModulesToModal(props);
-
-    function selectedUserChangeHandler(val) {
-        selectedValueUser = +val
-        const mdNew = $(Modal())
-        afterRendering(mdNew, props)
-        modal.replaceWith(mdNew)
-        registerEvents(mdNew, reRenderHandler, props)
-    }
-
     modal.find('form').on('submit',
         (e) => {
             e.preventDefault()
             const fields = {
-                code: () => modal.find('#codeField'),
+                code: $('#codeField'),
-                contact_person_id: () => modal.find('[name=profileId]'),
+                contact_person_id: $('#profileIdField'),
-                features: () => modal.find('#featuresField'),
+                features: $('#featuresField'),
-                person_count: () => modal.find('#personalCountField'),
+                person_count: $('#personalCountField'),
-                rating: () => modal.find('[name="rating"]:checked'),
+                rating: $('#ratingField'),
             }
             const query: UpdateOfficeRequest = {
-                code: +fields.code().val()!,
+                code: +fields.code.val()!,
-                contact_person_id: +fields.contact_person_id().val()!,
+                contact_person_id: null,
-                features: fields.features().val() ? String(fields.features().val()) : null,
+                features: fields.features.val() ? String(fields.features.val()) : null,
-                person_count: fields.person_count().val() ? +fields.person_count().val()! : null,
+                person_count: fields.person_count.val() ? +fields.person_count.val()! : null,
-                rating: fields.rating().val() ? +fields.rating().val()! : null,
+                rating: fields.rating.val() ? +fields.rating.val()! : null,
             }
-            console.log(query)
 
             Backend.office.update_office(query).then(
                 () => {
@@ -264,8 +164,23 @@ const registerEvents = (modal: JQuery<HTMLElement>, reRenderHandler: () => void,
         modal.remove()
         reRenderHandler()
     })
-    modal.find('[name="userCreationField"]').on('change', ({target: {value}}) => selectedUserChangeHandler(value))
+    modal.find('[type="radio"]').on('change', (e) => {
-
+        selectedValueUser = +e.target.value
-
+        console.log(selectedValueUser)
-
+        const mdNew = $(Modal(props))
+        modal.replaceWith(mdNew)
+        registerEvents(mdNew, reRenderHandler, props)
+    })
+    modal.find('select').on('change', e => {
+    console.log(e.target.value)
+        Backend.profile.getById(e.target.value).then(
+            data => {
+                selectedUser.id = String(data.id)
+                selectedUser.email = data.email || ''
+                selectedUser.phone = data.phone || ''
+                selectedUser.full_name = data.full_name || ''
+            }
+        )
+    })
+    addModulesToModal(props);
 }

yarn.lock

@@ -625,11 +625,6 @@ is-number@^7.0.0:
   resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
-izitoast@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/izitoast/-/izitoast-1.4.0.tgz#1aa4e3408b7159fba743506af66d8be54fd929fb"
-  integrity sha512-Oc1X2wiQtPp39i5VpIjf3GJf5sfCtHKXZ5szx7RareyEeFLUlcEW0FSfBni28+Ul6KNKZRKzhVuWzSP4Xngh0w==
-
 jiti@^1.19.1:
   version "1.20.0"
   resolved "https://registry.npmjs.org/jiti/-/jiti-1.20.0.tgz"