Add support for creating new advert

frontend-park-mail-ru · Oct 30, 2024 · 4669253 · 4669253
1 parent 6cb3ee9
commit 4669253
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 28 deletions.
diff --git a/components/EditAdvertPage/EditAdvertPage.hbs b/components/EditAdvertPage/EditAdvertPage.hbs
@@ -47,6 +47,8 @@
                         class='ad-page__edit-form__text-area'
                         rows='10'
                         name='{{this.name}}'
+                        required
+                        minlength='{{this.minLen}}'
                     ></textarea>
                 {{else if this.isSelect}}
                     <select
@@ -66,8 +68,12 @@
                         type='{{this.type}}'
                         minlength='{{this.minLen}}'
                         maxlength='{{this.maxLen}}'
-                        value='{{this.defaultValue}}'
+                        min='{{this.min}}'
+                        max='{{this.max}}'
+                        value='{{this.value}}'
+                        required
                         {{!-- required='{{this.required}}' --}}
+                        {{!<!-- TODO: UNCOMMENT UPPER PART -->}}
                     />
                 {{/if}}
             {{/each}}

diff --git a/components/EditAdvertPage/EditAdvertPage.ts b/components/EditAdvertPage/EditAdvertPage.ts
@@ -18,19 +18,19 @@ const SECONDARY_IMG_SELECTED_CLASS_NAME =
 const ADD_IMG_BTN_SELECTOR = '.js-add-img-btn';
 const FILE_INPUT_SELECTOR = '.js-file-input';
 
-interface AdPageAuthorData {
-    uuid: string;
-    name: string;
-    avatar: string;
-    sex: string;
-    age: number;
-    score: number;
-}
+// interface AdPageAuthorData {
+//     uuid: string;
+//     name: string;
+//     avatar: string;
+//     sex: string;
+//     age: number;
+//     score: number;
+// }
 
 interface AdPageData {
     images: string[];
-    author: AdPageAuthorData;
-    country: string;
+    // author: AdPageAuthorData;
+    address: string;
     city: string;
     desc: string;
     roomsCount: number;
@@ -43,6 +43,11 @@ interface InputConfig {
     isTextArea?: boolean;
     isSelect?: boolean;
     options?: string[];
+    value?: string | number;
+    minLen?: number;
+    maxLen?: number;
+    min?: number;
+    max?: number;
 }
 
 // TODO: DELETE THIS USELESS FUNCTION. IT WAS CREATED FOR BRAINLESS BACKENDERS
@@ -72,8 +77,8 @@ class EditAdvertPage {
     #imageURLs: string[];
     #uploadedImages: File[];
 
-    constructor(data: AdPageData) {
-        this.#imageURLs = data.images;
+    constructor(data?: AdPageData) {
+        this.#imageURLs = data ? data.images : [];
 
         this.#currentIndex = 0;
         this.#uploadedImages = [];
@@ -88,22 +93,32 @@ class EditAdvertPage {
                 type: 'text',
                 isSelect: true,
                 options: CITIES,
+                value: data?.city,
             },
             {
                 label: 'Адрес',
                 name: 'address',
                 type: 'text',
+                value: data?.address,
+                minLen: 5,
+                maxLen: 100,
             },
             {
                 label: 'Число комнат',
                 name: 'roomsCount',
                 type: 'number',
+                value: data?.roomsCount,
+                min: 1,
+                max: 20,
             },
             {
                 label: 'Описание',
                 name: 'desc',
                 type: 'textarea',
                 isTextArea: true,
+                value: data?.desc,
+                minLen: 20,
+                maxLen: 1000,
             },
         ];
         this.#templateContainer.innerHTML = template({
@@ -132,10 +147,11 @@ class EditAdvertPage {
 
         this.#addEventListeners();
 
-        this.#showImage(this.#currentIndex);
+        if (data) this.#showImage(this.#currentIndex);
     }
 
     #showImage(index: number) {
+        console.log(this.#imageURLs);
         this.#mainImg.src = this.#backgroundImg.src = this.#imageURLs[index];
 
         this.#carouselImages[this.#currentIndex].classList.remove(
@@ -245,7 +261,10 @@ class EditAdvertPage {
         });
 
         // Log the extracted data
-        ApiClient.createAdvert(formData2Send);
+        const response = await ApiClient.createAdvert(formData2Send);
+        if (response.ok) {
+            // TODO: REDIRECT TO ADVERT LIST PAGE
+        }
     };
 
     public getElement() {

diff --git a/index.ts b/index.ts
@@ -62,27 +62,24 @@ const renderAdvertPage = async (id: number) => {
     page.render(pageContainer);
 };
 
-const renderEditAdvertPage = async (id: number) => {
-    const info = (await ApiClient.getAd(id))['place'];
+const renderEditAdvertPage = async (uuid: string) => {
+    const info = (await ApiClient.getAd(uuid))['place'];
 
     const page = new EditAdvertPage({
         images: info['Images'],
-        author: {
-            uuid: '3',
-            avatar: '',
-            sex: 'М',
-            age: 32,
-            score: 5,
-            name: 'Майкл Джордан',
-        },
-        country: info['location_main'],
-        city: info['location_street'],
+        city: info['location_main'],
+        address: info['location_street'],
         desc: 'Всем привет! Давайте жить ко мне!',
         roomsCount: 3,
     });
     pageContainer.appendChild(page.getElement());
 };
 
+const renderCreateAdvertPage = async () => {
+    const page = new EditAdvertPage();
+    pageContainer.appendChild(page.getElement());
+};
+
 function renderSignInPage() {
     const auth = new AuthPopup();
     auth.render(root);
@@ -103,7 +100,8 @@ const main = async () => {
     root.appendChild(pageContainer);
 
     // renderMainPage();
-    renderEditAdvertPage(1);
+    // renderEditAdvertPage('Y9yjMvB');
+    renderCreateAdvertPage();
 };
 
 main();