Merge pull request #191 from DeimosPr4/69-us-37-eliminar-comunicado-de-administrador-de-comunidad
69 us 37 eliminar comunicado de administrador de comunidad
This commit is contained in:
GitHub
commit
aacb019a58
|
|
@ -489,6 +489,11 @@ export class AppController {
|
|||
return this.appService.findPost(paramPost);
|
||||
}
|
||||
|
||||
@Delete('post/deletePost/:id')
|
||||
deletePost(@Param('id') id: string) {
|
||||
return this.appService.deletePost(id);
|
||||
}
|
||||
|
||||
// #==== API Comment
|
||||
|
||||
@Post('post/createComment')
|
||||
|
|
|
|||
|
|
@ -618,6 +618,15 @@ export class AppService {
|
|||
.pipe(map((message: string) => ({ message })));
|
||||
}
|
||||
|
||||
//DELETE
|
||||
deletePost(paramPostId: string) {
|
||||
const pattern = { cmd: 'removePost' };
|
||||
const payload = { id: paramPostId };
|
||||
return this.clientPostApp
|
||||
.send<string>(pattern, payload)
|
||||
.pipe(map((message: string) => ({ message })));
|
||||
}
|
||||
|
||||
// ====================== COMMNENT POSTS ===============================
|
||||
|
||||
//Comment parameter from API
|
||||
|
|
|
|||
|
|
@ -11,155 +11,205 @@ import { Toolbar } from 'primereact/toolbar';
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faHome, faUserAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faCommentAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faAt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faEllipsis } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faHomeAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import classNames from 'classnames';
|
||||
|
||||
const RegistroComunicado = () => {
|
||||
|
||||
let emptyComunicado = {
|
||||
_id: null,
|
||||
post: '',
|
||||
user_id: '',
|
||||
community_id: ''
|
||||
let emptyComunicado = {
|
||||
_id: null,
|
||||
post: '',
|
||||
user_id: '',
|
||||
community_id: ''
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
listaComunis();
|
||||
}, [])
|
||||
|
||||
const [comunicado, setComunicado] = useState(emptyComunicado);
|
||||
const [comunicados, setComunicados] = useState([]);
|
||||
const [comunicadoId, setComunicadoId] = useState(null);
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const toast = useRef(null);
|
||||
const dt = useRef(null);
|
||||
const [cookies, setCookie] = useCookies();
|
||||
const [globalFilter, setGlobalFilter] = useState(null);
|
||||
|
||||
async function listaComunis() {
|
||||
let comunicadosResponse = await fetch('http://localhost:4000/post/allPosts', { method: 'GET' });
|
||||
const comunicadosJson = await comunicadosResponse.json();
|
||||
const comunicadosCommunity = comunicadosJson.message.filter((comunicado) => {
|
||||
return comunicado.community_id === cookies.community_id;
|
||||
})
|
||||
setComunicados(comunicadosCommunity);
|
||||
console.log(comunicadosCommunity);
|
||||
}
|
||||
|
||||
const saveComunicado = () => {
|
||||
var data = {
|
||||
post: document.getElementById('txt_comunicado').value,
|
||||
user_id: cookies.id,
|
||||
community_id: cookies.community_id
|
||||
};
|
||||
|
||||
useEffect(()=>{
|
||||
listaComunis();
|
||||
},[])
|
||||
fetch('http://localhost:4000/post/createPost', {
|
||||
cache: 'no-cache',
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then((response) => {
|
||||
if (response.status != 201)
|
||||
console.log('Ocurrió un error con el servicio: ' + response.status);
|
||||
else
|
||||
return response.json();
|
||||
}).then((_response) => {
|
||||
|
||||
}).catch(
|
||||
err => console.log('Ocurrió un error con el fetch', err)
|
||||
);
|
||||
}
|
||||
|
||||
const [comunicado, setComunicado] = useState(emptyComunicado);
|
||||
const [comunicados,setComuicados]=useState([]);
|
||||
const [comunicadoId, setComunicadoId] = useState(null);
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const toast = useRef(null);
|
||||
const dt = useRef(null);
|
||||
const [cookies, setCookie] = useCookies();
|
||||
const [globalFilter, setGlobalFilter] = useState(null);
|
||||
|
||||
async function listaComunis() {
|
||||
let comunicadosA=await fetch('http://localhost:4000/post/allPosts', {method:'GET'});
|
||||
let comunicadosRes= await comunicadosA.json();
|
||||
setComuicados(comunicadosRes.message);
|
||||
console.log(comunicadosRes.message);
|
||||
}
|
||||
|
||||
|
||||
const saveComunicado = () => {
|
||||
var data = {
|
||||
post: document.getElementById('txt_comunicado').value,
|
||||
user_id: cookies.id,
|
||||
community_id: cookies.community_id
|
||||
};
|
||||
|
||||
fetch('http://localhost:4000/post/createPost', {
|
||||
cache: 'no-cache',
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(
|
||||
function (response) {
|
||||
if (response.status != 201)
|
||||
console.log('Ocurrió un error con el servicio: ' + response.status);
|
||||
else
|
||||
return response.json();
|
||||
}
|
||||
)
|
||||
.then(
|
||||
function (response) {
|
||||
|
||||
}
|
||||
)
|
||||
.catch(
|
||||
err => console.log('Ocurrió un error con el fetch', err)
|
||||
);
|
||||
}
|
||||
|
||||
const header = (
|
||||
<React.Fragment>
|
||||
|
||||
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h5 className="m-0">Comunicados de la comunidad</h5>
|
||||
<span className="block mt-2 md:mt-0 p-input-icon-left">
|
||||
<i className="pi pi-search" />
|
||||
<InputText type="search" onInput={(e) => setGlobalFilter(e.target.value)} placeholder="Buscar..." />
|
||||
</span>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
const header = (
|
||||
<React.Fragment>
|
||||
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h5 className="m-0">Comunicados de la comunidad</h5>
|
||||
<span className="block mt-2 md:mt-0 p-input-icon-left">
|
||||
<i className="pi pi-search" />
|
||||
<InputText type="search" onInput={(e) => setGlobalFilter(e.target.value)} placeholder="Buscar..." />
|
||||
</span>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
const headerPost = (
|
||||
<>
|
||||
<p>
|
||||
{' '}
|
||||
<FontAwesomeIcon icon={faCommentAlt} style={{ color: "#D7A86E" }} />{' '}
|
||||
Descripción comunicado</p>
|
||||
<p>
|
||||
{' '}
|
||||
<FontAwesomeIcon icon={faCommentAlt} style={{ color: "#D7A86E" }} />{' '}
|
||||
Descripción comunicado</p>
|
||||
</>
|
||||
)
|
||||
|
||||
const leftToolbarTemplate = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="my-2">
|
||||
<Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button label="Exportar" icon="pi pi-upload" className="p-button-help" />
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Toast ref={toast} />
|
||||
<div className="card">
|
||||
<Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
|
||||
<DataTable ref={dt} value={comunicados} dataKey="_id" paginator rows={5}
|
||||
scrollable scrollHeight="400px" scrollDirection="both" header={header}
|
||||
rowsPerPageOptions={[5, 10, 25]} className="datatable-responsive mt-3"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} administradores de comunidades de viviendas"
|
||||
globalFilter={globalFilter} emptyMessage="No hay administradores de comunidades registrados.">
|
||||
<Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
|
||||
<Column field="post" sortable header={headerPost} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
|
||||
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Registro de un comunicado para la comunidad</h5>
|
||||
<div className="p-fluid formgrid grid">
|
||||
<div className="field col-12 md:col-12">
|
||||
<label htmlFor="name">Contenido del comunicado</label>
|
||||
<div className="p-0 col-12 md:col-12">
|
||||
<div className="p-inputgroup">
|
||||
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
|
||||
<i className="pi pi-pencil"></i>
|
||||
</span>
|
||||
<InputTextarea id="txt_comunicado" rows="4"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button label="Registrar" onClick={saveComunicado} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<React.Fragment>
|
||||
<div className="my-2">
|
||||
<Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" />
|
||||
</div>
|
||||
);
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button label="Exportar" icon="pi pi-upload" className="p-button-help" />
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
const actions = (rowData) => {
|
||||
return (
|
||||
<div className="actions">
|
||||
<Button
|
||||
icon='pi pi-trash'
|
||||
className='p-button-rounded p-button-danger mt-2 mx-2'
|
||||
onClick={() => confirmDelete(rowData)}
|
||||
title='Eliminar Inquilino'
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const confirmDelete = (post) => {
|
||||
setComunicado(post);
|
||||
setShowDeleteDialog(true);
|
||||
}
|
||||
|
||||
const deleteDialogFooter = (
|
||||
<>
|
||||
<Button label="Cancelar" icon="pi pi-times" className="p-button-secondary" onClick={() => setShowDeleteDialog(false)} />
|
||||
<Button label="Eliminar" icon="pi pi-check" className="p-button-danger" onClick={() => deleteComunicado()} />
|
||||
</>
|
||||
);
|
||||
|
||||
const deleteComunicado = () => {
|
||||
fetch(`http://localhost:4000/post/deletePost/${comunicado._id}`, {
|
||||
cache: 'no-cache',
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
}).then((response) => {
|
||||
if (response.status != 200)
|
||||
console.log('Ocurrió un error con el servicio: ' + response.status);
|
||||
else
|
||||
return response.json();
|
||||
}).then((_response) => {
|
||||
setShowDeleteDialog(false);
|
||||
listaComunis();
|
||||
setComunicado(emptyComunicado);
|
||||
}).catch(err => console.log('Ocurrió un error con el fetch', err));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Toast ref={toast} />
|
||||
<div className="card">
|
||||
<Dialog
|
||||
header="Eliminar comunicado"
|
||||
visible={showDeleteDialog}
|
||||
style={{ width: '450px' }}
|
||||
modal={true} onHide={() => setShowDeleteDialog(false)}
|
||||
footer={deleteDialogFooter}
|
||||
>
|
||||
<div className="flex align-items-center justify-content-center">
|
||||
<i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
|
||||
{comunicado && <span>¿Estás seguro que desea eliminar el aviso "<b>{comunicado.post}</b>"?</span>}
|
||||
</div>
|
||||
</Dialog>
|
||||
<Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
|
||||
<DataTable ref={dt} value={comunicados} dataKey="_id" paginator rows={5}
|
||||
scrollable scrollHeight="400px" scrollDirection="both" header={header}
|
||||
rowsPerPageOptions={[5, 10, 25]} className="datatable-responsive mt-3"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} administradores de comunidades de viviendas"
|
||||
globalFilter={globalFilter} emptyMessage="No hay administradores de comunidades registrados.">
|
||||
<Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
|
||||
<Column field="post" sortable header={headerPost} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
|
||||
<Column
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
flexBasis: '80px',
|
||||
minWidth: '80px'
|
||||
}}
|
||||
body={actions} />
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Registro de un comunicado para la comunidad</h5>
|
||||
<div className="p-fluid formgrid grid">
|
||||
<div className="field col-12 md:col-12">
|
||||
<label htmlFor="name">Contenido del comunicado</label>
|
||||
<div className="p-0 col-12 md:col-12">
|
||||
<div className="p-inputgroup">
|
||||
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
|
||||
<i className="pi pi-pencil"></i>
|
||||
</span>
|
||||
<InputTextarea id="txt_comunicado" rows="4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button label="Registrar" onClick={saveComunicado} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(RegistroComunicado);
|
||||
|
|
|
|||
Loading…
Reference in New Issue