Initial commit
This commit is contained in:
dahoud
135
app/(main)/profile/create/page.tsx
Normal file
135
app/(main)/profile/create/page.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
'use client';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { FileUpload } from 'primereact/fileupload';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { Demo } from '@/types';
|
||||
|
||||
function ProfileCreate() {
|
||||
const [countries, setCountries] = useState<Demo.Country[]>([]);
|
||||
const [selectedCountry, setSelectedCountry] = useState<Demo.Country | {}>(null);
|
||||
useEffect(() => {
|
||||
setCountries([
|
||||
{ name: 'Australia', code: 'AU' },
|
||||
{ name: 'Brazil', code: 'BR' },
|
||||
{ name: 'China', code: 'CN' },
|
||||
{ name: 'Egypt', code: 'EG' },
|
||||
{ name: 'France', code: 'FR' },
|
||||
{ name: 'Germany', code: 'DE' },
|
||||
{ name: 'India', code: 'IN' },
|
||||
{ name: 'Japan', code: 'JP' },
|
||||
{ name: 'Spain', code: 'ES' },
|
||||
{ name: 'United States', code: 'US' }
|
||||
]);
|
||||
}, []);
|
||||
|
||||
const itemTemplate = (option: Demo.Country) => {
|
||||
return (
|
||||
<div className="flex align-items-center">
|
||||
<img
|
||||
src={`/demo/images/flag/flag_placeholder.png`}
|
||||
onError={(e) => ((e.target as HTMLImageElement).src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')}
|
||||
className={'mr-2 flag flag-' + option.code.toLowerCase()}
|
||||
style={{ width: '18px' }}
|
||||
alt={option.name}
|
||||
/>
|
||||
<div>{option.name}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<span className="text-900 text-xl font-bold mb-4 block">Create User</span>
|
||||
<div className="grid">
|
||||
<div className="col-12 lg:col-2">
|
||||
<div className="text-900 font-medium text-xl mb-3">Profile</div>
|
||||
<p className="m-0 p-0 text-600 line-height-3 mr-3">Odio euismod lacinia at quis risus sed vulputate odio.</p>
|
||||
</div>
|
||||
<div className="col-12 lg:col-10">
|
||||
<div className="grid formgrid p-fluid">
|
||||
<div className="field mb-4 col-12">
|
||||
<label htmlFor="nickname" className="font-medium text-900">
|
||||
Nickname
|
||||
</label>
|
||||
<InputText id="nickname" type="text" />
|
||||
</div>
|
||||
<div className="field mb-4 col-12">
|
||||
<label htmlFor="avatar" className="font-medium text-900">
|
||||
Avatar
|
||||
</label>
|
||||
<FileUpload
|
||||
mode="basic"
|
||||
name="avatar"
|
||||
url="./upload.php"
|
||||
accept="image/*"
|
||||
maxFileSize={1000000}
|
||||
chooseOptions={{
|
||||
label: 'Upload Image',
|
||||
className: 'p-button-outlined p-button-plain'
|
||||
}}
|
||||
></FileUpload>
|
||||
</div>
|
||||
<div className="field mb-4 col-12">
|
||||
<label htmlFor="bio" className="font-medium text-900">
|
||||
Bio
|
||||
</label>
|
||||
<InputTextarea id="bio" rows={5} autoResize></InputTextarea>
|
||||
</div>
|
||||
<div className="field mb-4 col-12 md:col-6">
|
||||
<label htmlFor="email" className="font-medium text-900">
|
||||
Email
|
||||
</label>
|
||||
<InputText id="email" type="text" />
|
||||
</div>
|
||||
<div className="field mb-4 col-12 md:col-6">
|
||||
<label htmlFor="country" className="font-medium text-900">
|
||||
Country
|
||||
</label>
|
||||
<Dropdown
|
||||
inputId="country"
|
||||
options={countries}
|
||||
itemTemplate={itemTemplate}
|
||||
onChange={(e) => setSelectedCountry(e.value)}
|
||||
value={selectedCountry}
|
||||
optionLabel="name"
|
||||
filter
|
||||
filterBy="name"
|
||||
showClear
|
||||
placeholder="Select a Country"
|
||||
/>
|
||||
</div>
|
||||
<div className="field mb-4 col-12 md:col-6">
|
||||
<label htmlFor="city" className="font-medium text-900">
|
||||
City
|
||||
</label>
|
||||
<InputText id="city" type="text" />
|
||||
</div>
|
||||
<div className="field mb-4 col-12 md:col-6">
|
||||
<label htmlFor="state" className="font-medium text-900">
|
||||
State
|
||||
</label>
|
||||
<InputText id="state" type="text" />
|
||||
</div>
|
||||
<div className="field mb-4 col-12">
|
||||
<label htmlFor="website" className="font-medium text-900">
|
||||
Website
|
||||
</label>
|
||||
<div className="p-inputgroup">
|
||||
<span className="p-inputgroup-addon">www</span>
|
||||
<InputText id="website" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<Button label="Create User" className="w-auto mt-3"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProfileCreate;
|
||||
149
app/(main)/profile/list/page.tsx
Normal file
149
app/(main)/profile/list/page.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
'use client';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { FilterMatchMode, FilterOperator } from 'primereact/api';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Column } from 'primereact/column';
|
||||
import { DataTable, DataTableFilterMeta } from 'primereact/datatable';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { ProgressBar } from 'primereact/progressbar';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { CustomerService } from '../../../../demo/service/CustomerService';
|
||||
import type { Demo } from '@/types';
|
||||
|
||||
function List() {
|
||||
const [customers, setCustomers] = useState<Demo.Customer[]>([]);
|
||||
const [filters, setFilters] = useState<DataTableFilterMeta>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [globalFilterValue, setGlobalFilterValue] = useState('');
|
||||
const router = useRouter();
|
||||
const dt = useRef(null);
|
||||
|
||||
const getCustomers = (data: Demo.Customer[]) => {
|
||||
return [...(data || [])].map((d) => {
|
||||
d.date = new Date(d.date);
|
||||
return d;
|
||||
});
|
||||
};
|
||||
|
||||
const formatDate = (value: Date) => {
|
||||
return value.toLocaleDateString('en-US', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
const clearFilter = () => {
|
||||
initFilters();
|
||||
};
|
||||
|
||||
const initFilters = () => {
|
||||
setFilters({
|
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
||||
name: {
|
||||
operator: FilterOperator.AND,
|
||||
constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
|
||||
},
|
||||
'country.name': {
|
||||
operator: FilterOperator.AND,
|
||||
constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
|
||||
},
|
||||
representative: { value: null, matchMode: FilterMatchMode.IN },
|
||||
date: {
|
||||
operator: FilterOperator.AND,
|
||||
constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }]
|
||||
},
|
||||
activity: { value: null, matchMode: FilterMatchMode.BETWEEN }
|
||||
});
|
||||
setGlobalFilterValue('');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
CustomerService.getCustomersLarge().then((data) => {
|
||||
setCustomers(getCustomers(data));
|
||||
setLoading(false);
|
||||
});
|
||||
initFilters();
|
||||
}, []);
|
||||
|
||||
const onGlobalFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { value } = e.target;
|
||||
let _filters = { ...filters };
|
||||
(_filters['global'] as any).value = value;
|
||||
setFilters(_filters);
|
||||
setGlobalFilterValue(value);
|
||||
};
|
||||
|
||||
const renderHeader = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2 align-items-center justify-content-between">
|
||||
<span className="p-input-icon-left w-full sm:w-20rem flex-order-1 sm:flex-order-0">
|
||||
<i className="pi pi-search"></i>
|
||||
<InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Global Search" className="w-full" />
|
||||
</span>
|
||||
<Button type="button" icon="pi pi-user-plus" label="Add New" className="w-full sm:w-auto flex-order-0 sm:flex-order-1" outlined onClick={() => router.push('/profile/create')} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const nameBodyTemplate = (customer: Demo.Customer) => {
|
||||
return (
|
||||
<>
|
||||
<span className="p-column-title">Name</span>
|
||||
{customer.name}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const countryBodyTemplate = (customer: Demo.Customer) => {
|
||||
return (
|
||||
<>
|
||||
<img alt={customer.country.name} src={`/demo/images/flag/flag_placeholder.png`} className={'w-2rem mr-2 flag flag-' + customer.country.code} />
|
||||
<span className="image-text">{customer.country.name}</span>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const createdByBodyTemplate = (customer: Demo.Customer) => {
|
||||
return (
|
||||
<div className="inline-flex align-items-center">
|
||||
<img alt={customer.representative.name} src={`/demo/images/avatar/${customer.representative.image}`} className="w-2rem mr-2" />
|
||||
<span>{customer.representative.name}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const dateBodyTemplate = (customer: Demo.Customer) => {
|
||||
return formatDate(customer.date);
|
||||
};
|
||||
|
||||
const activityBodyTemplate = (customer: Demo.Customer) => {
|
||||
return <ProgressBar value={customer.activity} showValue={false} style={{ height: '.5rem' }} />;
|
||||
};
|
||||
|
||||
const header = renderHeader();
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<DataTable
|
||||
ref={dt}
|
||||
value={customers}
|
||||
header={header}
|
||||
paginator
|
||||
rows={10}
|
||||
responsiveLayout="scroll"
|
||||
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
|
||||
rowsPerPageOptions={[10, 25, 50]}
|
||||
filters={filters}
|
||||
loading={loading}
|
||||
>
|
||||
<Column field="name" header="Name" sortable body={nameBodyTemplate} headerClassName="white-space-nowrap" style={{ width: '25%' }}></Column>
|
||||
<Column field="country.name" header="Country" sortable body={countryBodyTemplate} headerClassName="white-space-nowrap" style={{ width: '25%' }}></Column>
|
||||
<Column field="date" header="Join Date" sortable body={dateBodyTemplate} headerClassName="white-space-nowrap" style={{ width: '25%' }}></Column>
|
||||
<Column field="representative.name" header="Created By" body={createdByBodyTemplate} headerClassName="white-space-nowrap" style={{ width: '25%' }} sortable></Column>
|
||||
<Column field="activity" header="Activity" body={activityBodyTemplate} headerClassName="white-space-nowrap" style={{ width: '25%' }} sortable></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default List;
|
||||
Reference in New Issue
Block a user