Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the UI #45

Merged
merged 4 commits into from
Jun 12, 2024
Merged

Update the UI #45

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ec7a4c3
Add a "Create Service" button to the header.
deniodev Jun 12, 2024
0c88449
Update Create Service Page UI
deniodev Jun 12, 2024
ca90aea
Add the "Others" option to the service categories.
deniodev Jun 12, 2024
6849f0d
Update Update Service Page UI
deniodev Jun 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update Create Service Page UI
  • Loading branch information
@deniodev
deniodev committed Jun 12, 2024
commit 0c8844977233f95ccac83b76f9137931d9f30c61
8 changes: 6 additions & 2 deletions client/src/i18n/translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
"gallery": "Gallery",
"reviews": "Reviews",
"yourmessage": "Enter your message here",
"isApproved": "To obtain approval, update all your profile data and the gallery with photos of recent work.",
"isApproved": "Your service has been created successfully. We will review and approve within 24 hours.",
"pleasewait": "Please wait...",
"book": "Book Now",
"aboutp1": "GetServices is an online platform developed especially for help Mozambicans advertise and find services from different areas. This way, customers can quickly find ideal service providers for your needs, so practical and efficient.",
Expand All @@ -109,6 +109,10 @@
"booking2": " Our platform makes it simple to search for and book services from trusted providers in your area. Just a few clicks and you're on your way to getting the help you need.",
"register": "How to Register a Service?",
"register2": "Showcase Your Services to Potential Customers",
"register3": "Our platform makes it easy for service providers to create a profile and showcase their offerings. Reach a wider audience and connect with more customers than ever before."
"register3": "Our platform makes it easy for service providers to create a profile and showcase their offerings. Reach a wider audience and connect with more customers than ever before.",
"createservice2": "Fill out the form to register your service.",
"uploaderror": "Image upload failed (4 MB max per image).",
"uploaderror2": "You can only upload 1 image for the cover.",
"uploaderror3": "You can only upload 6 images per service."
}
}
12 changes: 8 additions & 4 deletions client/src/i18n/translations/pt.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@
"title1": "Ex: Electricista",
"category": "Categoria",
"selectcategory": "Selecione a Categoria",
"coverimg": "Imagem de Capa",
"galleryimgs": "Imagens da Galeria de Serviço",
"coverimg": "Imagem de Capa ",
"galleryimgs": "Imagens da Galeria de Serviço (max 6)",
"creating": "Criando...",
"signout": "Sair",
"updateservice": "Atualizar Serviço",
Expand All @@ -82,7 +82,7 @@
"gallery": "Galeria",
"reviews": "Avaliações",
"yourmessage": "Digite sua mensagem aqui",
"isApproved": "Para obter aprovação, atualize todos os dados do seu serviço e a galeria com fotografias de trabalhos recentes.",
"isApproved": "O seu serviço foi criado com sucesso. Nós iremos analisar e aprovar dentro de 24 horas.",
"pleasewait": "Aguarde...",
"book": "Agendar",
"aboutp1": "GetServices é uma plataforma online desenvolvida especialmente para ajudar os moçambicanos a anunciar e encontrar serviços de diversas áreas. Dessa forma, os clientes podem encontrar rapidamente os prestadores de serviços ideais para suas necessidades, de maneira prática e eficiente.",
Expand All @@ -109,6 +109,10 @@
"booking2": "Nossa plataforma simplifica a busca e reserva de serviços de fornecedores confiáveis ​​em sua área. Apenas alguns cliques e você estará no caminho certo para obter a ajuda necessária.",
"register": "Como Cadastrar um Serviço?",
"register2": "Mostre seus serviços para potenciais clientes",
"register3": "Nossa plataforma torna mais fácil para os provedores de serviços criarem um perfil e apresentarem suas ofertas. Alcance um público mais amplo e conecte-se com mais clientes do que nunca."
"register3": "Nossa plataforma torna mais fácil para os provedores de serviços criarem um perfil e apresentarem suas ofertas. Alcance um público mais amplo e conecte-se com mais clientes do que nunca.",
"createservice2": "Preencha o formulário para cadastrar o seu serviço.",
"uploaderror": "Falha no upload da imagem (máximo de 4 MB por imagem).",
"uploaderror2": "Você só pode fazer upload de 1 imagem para a capa.",
"uploaderror3": "Você só pode fazer upload de 6 imagens da galeria por serviço."
}
}
162 changes: 79 additions & 83 deletions client/src/pages/CreateService.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,13 +62,11 @@ const CreateService = () => {
);
});

const handleCoverImageSubmit = () => {
if (files.length === 1) {
const handleCoverImageSubmit = (file) => {
if (file) {
setCoverUploading(true);
setImageUploadError(false);

const file = files[0];

storeImage(file)
.then((url) => {
setFormData({
Expand All @@ -79,16 +77,16 @@ const CreateService = () => {
setCoverUploading(false);
})
.catch(() => {
setImageUploadError('Image upload failed (4 mb max per image)');
setImageUploadError(`${t('uploaderror')}`);
setCoverUploading(false);
});
} else {
setImageUploadError('You can only upload 1 image for the cover.');
setImageUploadError(`${t('uploaderror2')}`);
setCoverUploading(false);
}
};

const handleImageSubmit = () => {
const handleImageSubmit = (files) => {
if (files.length > 0 && files.length + formData.imageUrls.length < 7) {
setUploading(true);
setImageUploadError(false);
Expand All @@ -107,15 +105,27 @@ const CreateService = () => {
setUploading(false);
})
.catch(() => {
setImageUploadError('Image upload failed (2 mb max per image)');
setImageUploadError(`${t('uploaderror')}`);
setUploading(false);
});
} else {
setImageUploadError('You can only upload 6 images per service');
setImageUploadError(`${t('uploaderror3')}`);
setUploading(false);
}
};

const handleCoverImageChange = (e) => {
const file = e.target.files[0];
setFiles([file]);
handleCoverImageSubmit(file);
};

const handleGalleryImagesChange = (e) => {
const selectedFiles = Array.from(e.target.files);
setFiles(selectedFiles);
handleImageSubmit(selectedFiles);
};

const handleRemoveImage = (index) => {
setFormData({
...formData,
Expand Down Expand Up @@ -184,13 +194,16 @@ const CreateService = () => {
};

return (
<main className="p-3 max-w-4xl mx-auto">
<h1 className="text-3xl font-semibold text-center p-2">
{t('createservice')}
</h1>
<form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-4">
<div className="flex flex-col gap-4 flex-1">
<div className="grid w-full max-w-sm items-center gap-1.5">
<section>
<div className="p-3 max-w-screen-xl mx-auto">
<h1 className="scroll-m-20 text-4xl font-bold tracking-tight lg:text-5xl">
{t('createservice')}
</h1>
<p className="leading-7 [&:not(:first-child)]:mt-6">
{t('createservice2')}
</p>
<form onSubmit={handleSubmit} className="space-y-4 mt-8">
<div className="max-w-screen-xl items-center gap-1.5">
<Label htmlFor="name" className="ml-1">
{t('name')}
</Label>
Expand All @@ -205,7 +218,20 @@ const CreateService = () => {
value={formData.name}
/>
</div>
<div className="grid w-full max-w-sm items-center gap-1.5">
<div className="max-w-screen-xl items-center gap-1.5">
<Label htmlFor="title" className="ml-1">
{t('title')}
</Label>
<Input
type="title"
placeholder={t('title1')}
id="title"
required
onChange={handleChange}
value={formData.title}
/>
</div>
<div className="max-w-screen-xl items-center gap-1.5">
<Label htmlFor="select" className="ml-1">
{t('city')}
</Label>
Expand Down Expand Up @@ -235,7 +261,29 @@ const CreateService = () => {
<option value="Matola">Matola</option>
</select>
</div>
<div className="grid w-full max-w-sm items-center gap-1.5">
<div className="max-w-screen-xl items-center gap-1.5">
<Label htmlFor="category" className="ml-1">
{t('category')}
</Label>
<select
id="category"
name="category"
onChange={handleChange}
value={formData.category}
className="dark:bg-[#0c0a09] cursor-pointer appearance-none flex h-9 w-full rounded-md border border-input px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
>
<option value="All">{t('selectcategory')}</option>
<option value="Assistência Técnica">
{t('technicalassistance')}
</option>
<option value="Aulas">{t('classes')}</option>
<option value="Design e Tecnologia">{t('tech')}</option>
<option value="Eventos">{t('events')}</option>
<option value="Reformas">{t('reforms')}</option>
<option value="Serviços Domésticos">{t('homeservices')}</option>
</select>
</div>
<div className="max-w-screen-xl items-center gap-1.5">
<Label htmlFor="phone" className="ml-1">
{t('phone')}
</Label>
Expand All @@ -249,7 +297,7 @@ const CreateService = () => {
/>
</div>

<div className="grid w-full max-w-sm items-center gap-1.5">
<div className="max-w-screen-xl items-center gap-1.5">
<Label htmlFor="description" className="ml-1">
{t('description')}
</Label>
Expand All @@ -263,68 +311,23 @@ const CreateService = () => {
value={formData.description}
/>
</div>
</div>
<div className="flex flex-col flex-1 gap-4">
<div className="grid w-full max-w-sm items-center gap-1.5">
<Label htmlFor="title" className="ml-1">
{t('title')}
</Label>
<Input
type="title"
placeholder={t('title1')}
id="title"
required
onChange={handleChange}
value={formData.title}
/>
</div>

<div className="grid w-full max-w-sm items-center gap-1.5">
<Label htmlFor="category" className="ml-1">
{t('category')}
</Label>
<select
id="category"
name="category"
onChange={handleChange}
value={formData.category}
className="dark:bg-[#0c0a09] cursor-pointer appearance-none flex h-9 w-full rounded-md border border-input px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
>
<option value="All">{t('selectcategory')}</option>
<option value="Assistência Técnica">
{t('technicalassistance')}
</option>
<option value="Aulas">{t('classes')}</option>
<option value="Design e Tecnologia">{t('tech')}</option>
<option value="Eventos">{t('events')}</option>
<option value="Reformas">{t('reforms')}</option>
<option value="Serviços Domésticos">{t('homeservices')}</option>
</select>
</div>

<div className="grid w-full max-w-sm items-center gap-1.5">
<div className="max-w-screen-xl items-center gap-1.5">
<Label htmlFor="cover" className="ml-1">
{t('coverimg')}
</Label>
<div className="flex gap-2">
<div className="flex gap-2 mb-2">
<Input
onChange={(e) => setFiles(e.target.files)}
onChange={handleCoverImageChange}
id="cover"
type="file"
accept="image/*"
/>
<Button
type="button"
disabled={coverUploading}
onClick={handleCoverImageSubmit}
>
{coverUploading ? 'Uploading...' : 'Upload'}
</Button>
</div>
{coverUploading && <Progress value={progress} />}
</div>

<div className="grid w-full max-w-sm items-center gap-1.5">
<div className="max-w-screen-xl items-center gap-1.5">
<p className="text-red-700 text-sm">
{imageUploadError && imageUploadError}
</p>
Expand All @@ -346,30 +349,23 @@ const CreateService = () => {
)}
</div>

<div className="grid w-full max-w-sm items-center gap-1.5">
<div className="max-w-screen-xl items-center gap-1.5">
<Label htmlFor="images" className="ml-1">
{t('galleryimgs')}
</Label>
<div className="flex gap-2">
<div className="flex gap-2 mb-2">
<Input
onChange={(e) => setFiles(e.target.files)}
onChange={handleGalleryImagesChange}
type="file"
id="images"
accept="image/*"
multiple
/>
<Button
type="button"
disabled={uploading}
onClick={handleImageSubmit}
>
{uploading ? 'Uploading...' : 'Upload'}
</Button>
</div>
{uploading && <Progress value={progress} />}
</div>

<div className="grid w-full max-w-sm items-center gap-1.5">
<div className="max-w-screen-xl items-center gap-1.5">
<p className="text-red-700 text-sm">
{imageUploadError && imageUploadError}
</p>
Expand All @@ -394,14 +390,14 @@ const CreateService = () => {
</div>
))}

<Button disabled={loading || uploading} className="mt-7">
<Button disabled={loading || uploading} className="mt-7 ">
{loading ? `${t('creating')}` : `${t('createservice')}`}
</Button>
{error && <p className="text-red-700 text-sm">{error}</p>}
</div>
</div>
</form>
</main>
</form>
</div>
</section>
);
};

Expand Down