Trying to make JQuery Component reactivity

src/block.ts

@@ -1,48 +1,20 @@
-import {BlockPropsType, QueryBlockType} from "./types.ts";
-import $ from "jquery";
+import {BlocksDataValueType, QueryBlockType} from "./types.ts";
+// import $ from "jquery";
 
+import {Component} from "./library/Component.ts";
 
-const Block = (props: BlockPropsType) => {
-    const query: QueryBlockType = {
-        aex_only: props.aex_only === '1' ? 'Да' : 'Нет',
-        mst_pr_aex: props.mst_pr_aex === '1' ? 'Да' : 'Нет',
-        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}` || ''
-        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">
+class Block extends Component {
+    component(props: BlocksDataValueType): string {
+        return `
+<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>
+                             <h2 class="text-lg">${this.props!.title}</h2>
+                             <span class="text-base opacity-50">${this.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>
+                             <span class="text-sm sm:text-base font-bold block">${this.props!.code}</span>
+                             <span class="text-sm sm:text-base opacity-50">КЛАДР: ${this.props!.kladr_code}</span>
                          </div>
                      </div>
 
@@ -61,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">${query.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_l_gm}</span>, м</p>
+                             <p>Ширина: <span class="text-primary font-bold">${this.props!.max_w_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>
                         
@@ -103,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>${query.contact_profile && query.contact_profile.phone}</p>
-<p>${query.contact_profile && query.contact_profile.email}</p>` : `<span>Данные не установлены</span>`}
+ <p>${this.props!.contact_profile && this.props!.contact_profile.fullName}</p>
+ <p>${this.props!.contact_profile && this.props!.contact_profile.phone}</p>
+ <p>${this.props!.contact_profile && this.props!.contact_profile.email}</p>` : `<span>Данные не установлены</span>`}
                                 
 
                             
@@ -125,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>
@@ -133,17 +105,151 @@ const Block = (props: BlockPropsType) => {
 
 
                  </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
+// const Block = (props: BlockPropsType) => {
+//     const query: QueryBlockType = {
+//         aex_only: props.aex_only === '1' ? 'Да' : 'Нет',
+//         mst_pr_aex: props.mst_pr_aex === '1' ? 'Да' : 'Нет',
+//         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}` || ''
+//         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)
+    }
+
+}