chore: initial import for test contour

2026-05-27 19:36:33 +03:00
commit ffd4cf9031
105 changed files with 10772 additions and 0 deletions
@@ -0,0 +1,196 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+import { apiUrl } from '@/config/api';
+import { CertEditor } from '../Editors/CertEditor'
+
+const isValidImage = (file) => {
+  const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png'];
+  if (allowedTypes.includes(file.type)) return true;
+
+  const ext = file.name.split('.').pop().toLowerCase();
+  return ['jpg', 'jpeg', 'png'].includes(ext);
+};
+
+export function StocksForm({ initStocks, onChange }) {
+  const [ initialStocks, setInitialStocks ] = useState([]);
+  const [ stocks, setStocks ] = useState([]);
+  
+  const startDateInputRef = useRef(null);
+  const endDateInputRef = useRef(null);
+
+  useEffect(() => {
+    // console.log(initStocks)
+    // console.log(initStocks[0]?.startDate)
+    // console.log(typeof initStocks[0]?.startDate)
+    const portfolioWithPictureUrl = initStocks.map((init) => {
+      if ( init.picture ) return ({ ...init, picture: apiUrl(`/uploads/${init.picture}`)})
+      return { ...init }
+    }).map(init => {
+      const dateStart = new Date(init.startDate);
+
+      const year = dateStart.getFullYear();
+      const month = String(dateStart.getMonth() + 1).padStart(2, '0'); // Month is 0-indexed
+      const day = String(dateStart.getDate()).padStart(2, '0');
+      const hours = String(dateStart.getHours()).padStart(2, '0');
+      const minutes = String(dateStart.getMinutes()).padStart(2, '0');
+      const datetimeLocalValue = `${year}-${month}-${day}T${hours}:${minutes}`;
+
+      const dateEnd = new Date(init.endDate);
+
+      const year1 = dateEnd.getFullYear();
+      const month1 = String(dateEnd.getMonth() + 1).padStart(2, '0'); // Month is 0-indexed
+      const day1 = String(dateEnd.getDate()).padStart(2, '0');
+      const hours1 = String(dateEnd.getHours()).padStart(2, '0');
+      const minutes1 = String(dateEnd.getMinutes()).padStart(2, '0');
+      const datetimeLocalValue1 = `${year1}-${month1}-${day1}T${hours1}:${minutes1}`;
+
+      return ({ ...init, startDate: datetimeLocalValue, endDate: datetimeLocalValue1 });
+    })
+    setInitialStocks([...portfolioWithPictureUrl])
+    setStocks([...portfolioWithPictureUrl])
+  }, [initStocks])
+
+    useEffect(() => {
+    if (typeof onChange === 'function') {
+      onChange(stocks);
+    }
+  }, [stocks, onChange]);
+
+  const updateField = (idx, field, value) => {
+    setStocks(prev =>
+      prev.map((cert, i) =>
+        i === idx
+          ? { ...cert, [field]: value }
+          : cert
+      )
+    );
+  };
+
+  const replaceImage = (e, idx) => {
+    const file = e.target.files[0];
+    if (!file) return;
+    if (!isValidImage(file)) {
+      return window.alert('Изображения должны быть только формата JPG, JPEG или PNG');
+    }
+    const url = window.URL.createObjectURL(file);
+    setStocks(prev =>
+      prev.map((cert, i) =>
+        i === idx
+          ? { ...cert, picture: url, _file: file }
+          : cert
+      )
+    );
+    // console.log('==================')
+    // console.log(file)
+  };
+
+  const addCertificate = () => {
+    setStocks(prev => [
+      ...prev,
+      { name: '', description: '', picture: '', type: 'portfolio', active: false }
+    ]);
+  };
+
+  const deleteCertificate = idx => {
+    setStocks(prev => prev.filter((_, i) => i !== idx));
+  };
+
+  return (
+    <>
+      {stocks.map((cert, idx) => (
+        <div className="card mb-3 p-3" key={idx}>
+          <div className="form-group" style={{ pointerEvents: 'none' }}>
+            <label>Название</label>
+            <input
+              className="form-control"
+              value={cert.name}
+              onChange={e => updateField(idx, 'name', e.target.value)}
+              // readOnly={true}
+            />
+          </div>
+
+          <div className="form-group" style={{ pointerEvents: 'none' }}>
+            <label>Анонс</label>
+            <CertEditor
+              content={cert.anons}
+              setContent={newVal => updateField(idx, 'anons', newVal)}
+              readOnly={true}
+            />
+          </div>
+          <div className="form-group" style={{ pointerEvents: 'none' }}>
+            <label>Описание</label>
+            <CertEditor
+              content={cert.content}
+              setContent={newVal => updateField(idx, 'contnet', newVal)}
+              readOnly={true}
+            />
+          </div>
+          <div>
+
+      <div className='d-flex justify-content-between' style={{ gap: '1rem' }}>
+        <div className='form-group d-flex flex-column'>
+
+          <div className="form-group"  style={{ pointerEvents: 'none' }}>
+        <label>Начало акции:</label>
+        <input
+          type="datetime-local"
+          ref={startDateInputRef}
+          className="form-control"
+          value={cert.startDate}
+          onClick={() => {
+            if (startDateInputRef.current?.showPicker) {
+              startDateInputRef.current.showPicker();
+            }
+          }}
+          onChange={e => updateField(idx, 'startDate', e.target.value)}
+        />
+      </div>
+
+      <div className="form-group"  style={{ pointerEvents: 'none' }}>
+        <label>Окончание акции:</label>
+        <input
+          type="datetime-local"
+          ref={endDateInputRef}
+          className="form-control"
+          value={cert.endDate}
+          onClick={() => {
+            if (endDateInputRef.current?.showPicker) {
+              endDateInputRef.current.showPicker();
+            }
+          }}
+          onChange={e => updateField(idx, 'endDate', e.target.value)}
+        />
+      </div>
+      <label>
+        *Время указывается по МСК
+      </label>
+
+        </div>
+
+      <div className="form-group d-flex flex-column align-items-center" style={{ gap: '1rem' }}>
+            {cert.picture && (
+              <img
+                src={cert.picture}
+                alt="Портфолио"
+                style={{ width: '10rem', height: '10rem', objectFit: 'cover', borderRadius: '4px' }}
+                onError={e => e.currentTarget.src = '/placeholder.png'}
+              />
+            )}
+          </div>
+          </div>
+
+          </div>
+
+          <div className='d-flex justify-content-start'>
+            <button
+            className="btn btn-danger"
+            onClick={() => deleteCertificate(idx)}
+          >
+            Удалить
+          </button>
+          </div>
+        </div>
+      ))} 
+    </>
+  );
+}