all

src/pages/Repository/Repository.tsx

@@ -15,14 +15,15 @@ import {
 	RepSelectNotification,
 	SearchNotification
 } from './styles'
-import { T_ColumnsState, T_NewRepository, T_RepositoryItem } from './types'
+import { T_ColumnsState, T_RepositoryItem } from './types'
 
 
 type Props = {}
 
 export default function Repository({}: Props) {
+	const [firstLoadingState, setFirstLoadingState] = useState(true)
+	const [loadingState, setLoadingState] = useState(false)
 	const [errorState, setErrorState] = useState(false)
-	const [loadingState, setLoadingState] = useState(true) 
 	const [searchNotification, setSearchNotification] = useState(false)
 	const [totalCount, setTotalCount] = useState(0)
 
@@ -40,16 +41,27 @@ export default function Repository({}: Props) {
 	})
 
 	const getRep = async () => {
-		setSearchNotification(false)
+		if (!firstLoadingState) setLoadingState(true)
+		setErrorState(false)
+		try {
 			const response = await RepositoryService.getRepository(queryParams)
 			if (response.status === 200) {
 				response.data.Data.length === 0
 					? setSearchNotification(true)
 					: (setRepository(response.data.Data),
-				  setTotalCount(response.data.Total))
+					  setTotalCount(response.data.Total),
+					  setSearchNotification(false))
 			}
+		} catch (error) {
+			setErrorState(true)
+		}
+
 		setLoadingState(false)
+		setFirstLoadingState(false)
 	}
+	useEffect(() => {
+		getRep()
+	}, [])
 
 	useEffect(() => {
 		getRep()
@@ -70,10 +82,15 @@ export default function Repository({}: Props) {
 	const [notChecked, setNotChecked] = useState<number[]>([])
 
 	useEffect(() => {
-		notChecked.length === Repository.length &&
+		!errorState ||
-			(setSelectAll(false), setNotChecked([]))
+			loadingState ||
+			(firstLoadingState &&
+				notChecked.length === Repository	.length &&
+				(setSelectAll(false), setNotChecked([])))
 	}, [notChecked])
 
+	const [modal, setModal] = useState(false)
+
 	const groupDelete = async () => {
 		const deletePromises = checkedColumns.map((item) =>
 			RepositoryService.deleteRepository(item)
@@ -101,33 +118,7 @@ export default function Repository({}: Props) {
 	getRep()
 	}
 
-	const [newRep, setNewRep] = useState<T_NewRepository>({
-		Name: '',
-		Description: '',
-		ShortDescription: '',
-		Version: '',
-		Category: '',
-	})
 
-	const [modal, setModal] = useState(false)
-
-	useEffect(() => {
-		console.log(Repository)
-	}, [Repository])
-
-	useEffect(() => {
-		setNewRep({
-			Name: '',
-			Description: '',
-			ShortDescription: '',
-			Version: '',
-			Category: '',
-		})
-	}, [modal])
-
-	useEffect(() => {
-		getRep()
-	}, [])
 
 	return (
 		<>
@@ -215,15 +206,10 @@ export default function Repository({}: Props) {
 							</>
 						</>
 					)}
-					<NewRepModal
+				
-						modal={modal}
-						setModal={setModal}
-						newRep={newRep}
-						setNewRep={setNewRep}
-						getRep={getRep}
-					/>
 				</RepContainer>
 			)}
+			<NewRepModal modal={modal} setModal={setModal} getRep={getRep} />
 		</>
 	)
 }

src/pages/Repository/blocks/EditRepModal.tsx

@@ -1,15 +1,28 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import MainButton from 'src/components/UI/button/MainButton'
 import MainInput from 'src/components/UI/input/MainInput'
 import Modal from 'src/components/UI/modal/Modal'
+import Textarea from 'src/components/UI/input/Textarea'
+import RepositoryService from 'src/services/repositoryServices'
 import styled from 'styled-components'
-import { T_NewRepository } from '../types'
+import { T_NewRepository, T_RepositoryItem } from '../types'
 
+const NewRepErrorMessageContainer = styled.div`
+	position: relative;
+	z-index: 4;
+`
+
+const NewRepErrorMessage = styled.div`
+	display: flex;
+	flex-direction: column;
+	align-items: end;
+	gap: 20px;
+`
 type Props = {
 	modal: boolean
 	setModal: (param: boolean) => void
-	repository: T_NewRepository
+	repository: T_RepositoryItem
-	editRep: (param: T_NewRepository) => void
+	getRep: () => void
 }
 
 const ModalContainer = styled.div`
@@ -23,21 +36,46 @@ const ModalContainer = styled.div`
 		gap: 20px;
 	}
 `
+const NewRepFileBlock = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
 
-export default function EditRepModal({
+	input {
-	modal,
+		display: none;
-	setModal,
+	}
-	repository,
+	p {
-	editRep
+		font-size: 18px;
-}: Props) {
+	}
-	const [editRepData, setEditRepData] = useState(repository)
 
-	//const [errorMessage, setErrorMessage] = useState(false)
+	span {
+		font-weight: 600;
+	}
+`
+export default function EditRepModal({ modal, setModal, repository, getRep }: Props){
+	const [error, setError] = useState({
+		state: false,
+		message: ''
+	})
+
+	const [loading, setLoading] = useState(false)
+
+	const setErrorState = (value: boolean) => {
+		setError({ ...error, state: value })
+	}
+
+	const [editRepData, setEditRepData] = useState<T_NewRepository>({
+		Name: repository.Name,
+		Description: repository.Description,
+		ShortDescription: repository.ShortDescription,
+		Version: repository.Version,
+		Category: repository.Category
+	})
 
 	const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		setEditRepData({ ...editRepData, Name: e.target.value })
 	}
-	const handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+	const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
 		setEditRepData({ ...editRepData, Description: e.target.value })
 	}
 	const handleShortDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -50,13 +88,70 @@ export default function EditRepModal({
 		setEditRepData({ ...editRepData, Category: e.target.value })
 	}
 
+	const [formValid, setFormValid] = useState(false)
+
 	useEffect(() => {
-		setEditRepData({ ...editRepData,})
+		setFormValid(
-	}, [])
+			editRepData.Name !== '' &&
+			editRepData.Description !== '' &&
+			editRepData.ShortDescription !== '' &&
+			editRepData.Version !== '' &&
+			editRepData.Category !== ''
+		)
+	}, [editRepData])
+	const fileInputRef = useRef<HTMLInputElement>(null);
+	const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  
+	const handleFileChange = () => {
+		const file = fileInputRef.current?.files?.[0]
+		if (file) {
+			setSelectedFile(file)
+		}
+	}
+
+	const handleFileClick = () => {
+		fileInputRef.current?.click()
+	}
+	const updateRep = async () => {
+		setLoading(true)
+			try {
+				if (
+					!(
+						editRepData.Category === repository.Category &&
+						editRepData.Description === repository.Description &&
+						editRepData.Name === repository.Name &&
+						editRepData.ShortDescription === repository.ShortDescription &&
+						editRepData.Version === repository.Version
+					)
+				) {
+					const response = await RepositoryService.editRepository(repository.Id, editRepData)
+					if (response.status === 406) {
+						setError({ state: true, message: response.data })
+			  setLoading(false)
+						return
+					}
+				}
+		
+				if (repository.Url !== selectedFile && selectedFile instanceof File) {
+					const response = await RepositoryService.addFile(selectedFile, repository.Id)
+					if (response.status === 406) {
+						setError({ state: true, message: response.data })
+			  setLoading(false)
+						return
+					}
+				}
+		  setLoading(false)
+				setModal(false)
+				getRep()
+			} catch (error) {}
+		}
 	
 	return (
+		<>
 		<Modal modal={modal} setModal={setModal}>
 			<ModalContainer>
+	
+			<h2>Изменение пакета в репозитории</h2>
 				<MainInput
 					placeholder='Название'
 					value={editRepData.Name}
@@ -72,7 +167,7 @@ export default function EditRepModal({
 					value={editRepData.Description}
 					onChange={handleShortDescriptionChange}
 				/>
-				<MainInput
+				<Textarea
 					placeholder='Полное описание'
 					value={editRepData.Description}
 					onChange={handleDescriptionChange}
@@ -82,19 +177,50 @@ export default function EditRepModal({
 					value={editRepData.Category}
 					onChange={handleCategoryChange}
 				/>
+				<div>
+						<NewRepFileBlock>
+							<input
+								ref={fileInputRef}
+								type='file'
+								accept='.deb'
+								onChange={handleFileChange}
+							/>
+							{selectedFile ? (
+								<p>
+									<span>Выбранный файл: </span>
+									{selectedFile.name}
+								</p>
+							) : (
+								<p>
+									<span>Файл не выбран</span>
+								</p>
+							)}
+							<MainButton onClick={handleFileClick}>Выбрать файл</MainButton>
+						</NewRepFileBlock>
+					</div>
 				<div className='buttonBlock'>
 					<MainButton
 						color='secondary'
-						fullWidth={true}
+						fullWidth
 						onClick={() => setModal(false)}
 					>
 						Отмена
 					</MainButton>
-					<MainButton fullWidth={true} onClick={() => editRep(editRepData)}>
+					<MainButton fullWidth onClick={updateRep} disabled={!formValid}>
 						Сохранить
 					</MainButton>
 				</div>
 			</ModalContainer>
 		</Modal>
+		<NewRepErrorMessageContainer>
+				<Modal modal={error.state} setModal={setErrorState}>
+					<NewRepErrorMessage>
+						<h3>{error.message}</h3>
+						<MainButton onClick={() => setErrorState(false)}>Ok</MainButton>
+					</NewRepErrorMessage>
+				</Modal>
+			</NewRepErrorMessageContainer>
+
+		</>
 	)
 }

src/pages/Repository/blocks/NewRepModal.tsx

@@ -1,13 +1,39 @@
-import { useEffect, useRef, ChangeEvent, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import MainButton from 'src/components/UI/button/MainButton'
 import MainInput from 'src/components/UI/input/MainInput'
 import Modal from 'src/components/UI/modal/Modal'
+import Textarea from 'src/components/UI/input/Textarea'
 import RepositoryService from 'src/services/repositoryServices'
 import styled from 'styled-components'
 import { T_NewRepository } from '../types'
 
+const NewRepErrorMessageContainer = styled.div`
+	position: relative;
+	z-index: 4;
+`
 
+const NewRepErrorMessage = styled.div`
+	display: flex;
+	flex-direction: column;
+	align-items: end;
+	gap: 20px;
+`
+const NewAppFileBlock = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
 
+	input {
+		display: none;
+	}
+	p {
+		font-size: 18px;
+	}
+
+	span {
+		font-weight: 600;
+	}
+`
 
 const ModalContainer = styled.div`
 	display: flex;
@@ -21,66 +47,52 @@ const ModalContainer = styled.div`
 	}
 `
 
-const ErrorMessageContainer = styled.div`
-	display: flex;
-	flex-direction: column;
-	align-items: end;
-	gap: 20px;
-`
-
-const Test = styled.div`
-	z-index: 3;
-`
-
 type Props = {
 	modal: boolean
 	setModal: (param: boolean) => void
-	newRep: T_NewRepository
-	setNewRep: (param: T_NewRepository) => void
 	getRep: () => void
 }
 
-export default function NewRepModal({
+export default function NewRepModal({ modal, setModal, getRep }: Props) {
-	modal,
+	const [newRep, setNewRep] = useState<T_NewRepository>({
-	setModal,
+		Name: '',
-	newRep,
+		Description: '',
-	setNewRep,
+		ShortDescription: '',
-	getRep
+		Version: '',
-}: Props) {
+		Category: ''
-	const [errorMessage, setErrorMessage] = useState(false)
+	})
+	const [selectedFile, setSelectedFile] = useState<File | null>(null)
 
+	useEffect(() => {
+		setNewRep({
+			Name: '',
+			Description: '',
+			ShortDescription: '',
+			Version: '',
+			Category: ''
+		})
+		setSelectedFile(null)
+	}, [modal])
 
-	const CreateRep = async () => {
+	const [formValid, setFormValid] = useState(false)
-		const response = await RepositoryService.createRepository(newRep)
-		if (response.status === 406) {
-			setNewRep({ ...newRep})
-			setErrorMessage(true)
-		} else {
-			setModal(false)
-			getRep()
-		}
-	}
-	const fileInputRef = useRef<HTMLInputElement>(null);
-	const [selectedFile, setSelectedFile] = useState<File | null>(null);
 
-	const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+	useEffect(() => {
-	  const files = event.target.files;
+		setFormValid(
-	  if (files && files.length > 0) {
+			newRep.Name !== '' &&
-		const file = files[0];
+			newRep.Description !== '' &&
-		setSelectedFile(file);
+			newRep.ShortDescription !== '' &&
-	  }
+			newRep.Version !== '' &&
-	};
+			newRep.Category !== ''
+		)
+	}, [newRep])
+
+	const [errorState, setErrorState] = useState(false)
 
-	const handleButtonClick = () => {
-	  if (fileInputRef.current) {
-		fileInputRef.current.click();
-	  }
-	};
   
 	const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		setNewRep({ ...newRep, Name: e.target.value })
 	}
-	const handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+	const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
 		setNewRep({ ...newRep, Description: e.target.value })
 	}
 	const handleShortDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -92,10 +104,40 @@ export default function NewRepModal({
 	const handleCategoryChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		setNewRep({ ...newRep, Category: e.target.value })
 	}
+	const fileInputRef = useRef<HTMLInputElement>(null)
+
+	const handleFileChange = () => {
+		const file = fileInputRef.current?.files?.[0]
+		if (file) {
+			setSelectedFile(file)
+		}
+	}
+
+	const handleFileClick = () => {
+		fileInputRef.current?.click()
+	}
+
+	const repCreate = async () => {
+		try {
+			const response = await RepositoryService.createRep(newRep)
+			if (response.status === 200) {
+				
+				selectedFile !== null &&
+					(await RepositoryService.addFile(selectedFile, response.data.Id))
+			} else if (response.status === 406) {
+				setErrorState(true)
+			}
+			setModal(false)
+			getRep()
+		} catch (error) {
+			console.log(error)
+		}
+	}
 	return (
 		<>
 			<Modal modal={modal} setModal={setModal}>
 				<ModalContainer>
+					<h2>Внесение пакета в репозиторий</h2>
 				<MainInput
 					placeholder='Название'
 					value={newRep.Name}
@@ -111,7 +153,7 @@ export default function NewRepModal({
 					value={newRep.ShortDescription}
 					onChange={handleShortDescriptionChange}
 				/>
-				<MainInput
+				<Textarea
 					placeholder='Полное описание'
 					value={newRep.Description}
 					onChange={handleDescriptionChange}
@@ -122,48 +164,48 @@ export default function NewRepModal({
 					onChange={handleCategoryChange}
 				/>
 					<div>
-			<div className='fileBlock'>
+						<NewAppFileBlock>
-				<span>
-					Имя файла:
-				</span>
 							<input
-					type="file"
 								ref={fileInputRef}
+								type='file'
+								accept='.deb'
 								onChange={handleFileChange}
-					style={{ display: 'none' }}
 							/>
-				<input
+							{selectedFile ? (
-					type="text"
+								<p>
-					value={selectedFile ? selectedFile.name : ''}
+									<span>Выбранный файл: </span>
-					readOnly
+									{selectedFile.name}
-					style={{border: 'none'}}
+								</p>
-				/>
+							) : (
-				      <MainButton onClick={handleButtonClick}>Выбрать файл</MainButton>
+								<p>
-
+									<span>Файл не выбран</span>
-				</div>
+								</p>
+							)}
+							<MainButton onClick={handleFileClick}>Выбрать файл</MainButton>
+						</NewAppFileBlock>
 					</div>
 					<div className='buttonBlock'>
 						<MainButton
 							color='secondary'
-							fullWidth={true}
+							fullWidth
 							onClick={() => setModal(false)}
 						>
 							Отмена
 						</MainButton>
-						<MainButton fullWidth={true} onClick={CreateRep}>
+						<MainButton fullWidth onClick={repCreate} disabled={!formValid}>
 							Создать
 						</MainButton>
 					</div>
 				</ModalContainer>
 			</Modal>
-			<Test>
+			<NewRepErrorMessageContainer>
-				<Modal modal={errorMessage} setModal={setErrorMessage}>
+				<Modal modal={errorState} setModal={setErrorState}>
-					<ErrorMessageContainer>
+					<NewRepErrorMessage>
-						<h3>Пакет уже существует</h3>
+						<h3>Имя и версия уже существует</h3>
-						<MainButton onClick={() => setErrorMessage(false)}>Ok</MainButton>
+						<MainButton onClick={() => setErrorState(false)}>Ok</MainButton>
-					</ErrorMessageContainer>
+					</NewRepErrorMessage>
 				</Modal>
-			</Test>
+			</NewRepErrorMessageContainer>
 		</>
 	)
 }

src/pages/Repository/blocks/RepTableItem.tsx

@@ -7,14 +7,13 @@ import Checkbox from 'src/components/UI/input/Checkbox'
 import Modal from 'src/components/UI/modal/Modal'
 import RepositoryService from 'src/services/repositoryServices'
 import styled from 'styled-components'
-import { T_ColumnsState, T_NewRepository, T_RepositoryItem } from '../types'
+import { T_ColumnsState, T_RepositoryItem } from '../types'
 import EditRepModal from './EditRepModal'
 
 type Props = {
 	repository: T_RepositoryItem
 	selectAll: boolean
 	notChecked: number[]
-
 	checkedColumns: number[]
 	setNotChecked: (param: any) => void
 	setCheckedColumns: (param: any) => void
@@ -102,17 +101,7 @@ export default function ({
 			getRep()
 		}
 	}
-	const editRep = async (rep: T_NewRepository) => {
+	
-		setContextMenuState(false)
-		const response = await RepositoryService.editRepository(
-			repository.Id,
-			rep
-		)
-		if (response.status === 200) {
-			getRep()
-		}
-    setEditModalState(false)
-	}
 
 	return (
 		<>
@@ -194,10 +183,21 @@ export default function ({
 									<img src='/src/images/trash.svg' alt='' />
 									<p>Очистить зависимости</p>
 								</Item>
+								{repository.Url !== '' && (
+							<Link
+								to={`${HOST_NAME}/${repository.Url}`}
+								onClick={() => setContextMenuState(false)}
+							>
 								<Item onClick={dowRep}>
-									<img src='/src/images/download_2.svg' alt='' />
+									<img
-									<p>Скачать пакет</p>
+										src='/src/images/download.svg'
+										alt=''
+										style={{ width: '20px' }}
+									/>
+									<p>Скачать</p>
 								</Item>
+							</Link>
+						)}
 						<Item onClick={() => (setEditModalState(true), setContextMenuState(false))}>
 							<img src='/src/images/edit.svg' alt='' />
 							<p>Редактировать</p>
@@ -222,12 +222,12 @@ export default function ({
 						<div className='button-container'>
 							<MainButton
 								color={'secondary'}
-								fullWidth={true}
+								fullWidth
 								onClick={() => setDeleteNotificationState(false)}
 							>
 								Отмена
 							</MainButton>
-							<MainButton fullWidth={true} onClick={() => deleteRep()}>
+							<MainButton fullWidth onClick={() => deleteRep()}>
 								Удалить
 							</MainButton>
 						</div>
@@ -237,7 +237,7 @@ export default function ({
 					modal={editModalState}
 					setModal={setEditModalState}
 					repository={repository}
-					editRep={editRep}
+					getRep={getRep}
 				/>
 			</tr>
 		</>

src/pages/Repository/types.ts

@@ -8,12 +8,16 @@ export type T_NewRepository = {
 
 export interface T_RepositoryItem {
 	Id: number;
-	Name: string
+	Name: string;
-	Description: string
+	Description: string;
-	ShortDescription: string
+	ShortDescription: string;
-	Version: string
+	Version: string;
-	Category: string
+	DependenciesReceived: boolean;
-	UpdatedDate: string
+	Arch: "amd64" | "x86" | string;
+	Category: string;
+	CreatedDate: string;
+	UpdatedDate: string;
+	Url: string|null;
 	Enabled: boolean;
 }
 

src/services/repositoryServices.ts

@@ -1,7 +1,6 @@
 import axios, { AxiosResponse } from 'axios'
 import { API_HOST_NAME } from 'src/constants/host'
 import { T_NewRepository } from 'src/pages/Repository/types'
-
 import { I_QueryParams } from './type'
 
 export default class RepositoryService {
@@ -9,7 +8,7 @@ export default class RepositoryService {
 		queryParams: I_QueryParams
 	): Promise<AxiosResponse> {
 		const { page, count, search, order } = queryParams
-		const url = `${API_HOST_NAME}/repository/packages`
+		const url = `${API_HOST_NAME}/repository/packages?full=true`
 		const params = new URLSearchParams()
 
 		if (page !== undefined) params.append('page', String(page))
@@ -26,7 +25,7 @@ export default class RepositoryService {
 		}
 	}
 
-	static async createRepository(
+	static async createRep(
 		newRep: T_NewRepository
 	): Promise<AxiosResponse> {
 		try {