add the search button
hyh123a
parent
d34adf3dd3
commit
e4f3e0d998
|
|
@ -60,11 +60,11 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
|
||||
// State
|
||||
const [selectedTicketType, setSelectedTicketType] = useState(1);
|
||||
const [selectedTicketTypeName, setSelectedTicketTypeName] = useState('');
|
||||
const [ticketTypes, setTicketTypes] = useState([]);
|
||||
const [ticketList, setTicketList] = useState([]);
|
||||
const [ticketApplicationfields, setTicketApplicationfields] = useState({});
|
||||
const [ticketListAll, setTicketListAll] = useState([]);
|
||||
|
||||
const [applyModalIsShown, setApplyModalIsShown] = useState(false);
|
||||
const [ticketApplicationPayload, setTicketApplicationPayload] = useState({});
|
||||
|
||||
const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
|
||||
|
|
@ -129,6 +129,7 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
if (isResponseOK) {
|
||||
console.log('/ticket/list', json);
|
||||
setTicketList(json);
|
||||
setTicketListAll(json);
|
||||
} else {
|
||||
toast.error(json.description);
|
||||
}
|
||||
|
|
@ -140,16 +141,6 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
|
||||
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
|
||||
|
||||
const nameFormatter = (dataField, { name }) => (
|
||||
<Link to="#">
|
||||
<Media tag={Flex} align="center">
|
||||
<Media body className="ml-2">
|
||||
<h5 className="mb-0 fs--1">{name}</h5>
|
||||
</Media>
|
||||
</Media>
|
||||
</Link>
|
||||
);
|
||||
|
||||
const actionFormatter = (dataField, { id }) => (
|
||||
// Control your row with this id
|
||||
<UncontrolledDropdown>
|
||||
|
|
@ -243,105 +234,35 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
|
||||
let onWorkflowTypeChange = ({ target }) => {
|
||||
setSelectedTicketType(target.value);
|
||||
ticketTypes.map(ticketType => {
|
||||
if (ticketType.id == target.value) {
|
||||
setSelectedTicketTypeName(ticketType.name);
|
||||
console.log("onWorkflowTypeChange", ticketType.name, ticketType.id, target.value)
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
let searchTicket = () => {
|
||||
console.log('You search the ticket!!', selectedTicketType);
|
||||
|
||||
let isResponseOK = false;
|
||||
fetch(APIBaseURL + '/ticket/apply/' + selectedTicketType, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-type': 'application/json'
|
||||
},
|
||||
body: null
|
||||
})
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
if (response.ok) {
|
||||
isResponseOK = true;
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(json => {
|
||||
if (isResponseOK) {
|
||||
console.log('/ticket/apply', json);
|
||||
setTicketApplicationfields(json);
|
||||
} else {
|
||||
toast.error(json.description);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
setApplyModalIsShown(true);
|
||||
console.log('You search the ticket!!', selectedTicketType, selectedTicketTypeName);
|
||||
setTicketList(ticketListAll.filter(item => item.ticket_type === selectedTicketTypeName));
|
||||
};
|
||||
|
||||
// Submit
|
||||
let submitApplication = target => {
|
||||
hiddenModal();
|
||||
console.log('You submit the ticket.');
|
||||
let temp = {
|
||||
transition_id: ticketApplicationfields.transition_id,
|
||||
workflow_id: ticketApplicationfields.workflow_id
|
||||
};
|
||||
setTicketApplicationPayload({ ...ticketApplicationPayload, ...temp });
|
||||
console.log('submit----', ticketApplicationPayload);
|
||||
useEffect(() => {
|
||||
console.log('ticketList', ticketList);
|
||||
}, [ticketList]);
|
||||
|
||||
let isResponseOK = false;
|
||||
fetch(APIBaseURL + '/ticket/apply/' + selectedTicketType, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(ticketApplicationPayload)
|
||||
})
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
if (response.ok) {
|
||||
isResponseOK = true;
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(json => {
|
||||
if (isResponseOK) {
|
||||
console.log('Submit /ticket/apply', json);
|
||||
} else {
|
||||
toast.error(json.description);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
let hiddenModal = () => {
|
||||
setApplyModalIsShown(false);
|
||||
};
|
||||
|
||||
let onFieldChange = (index, { target }) => {
|
||||
let temp = {};
|
||||
// console.log('onFieldChange', e.value);
|
||||
temp[index] = target.value;
|
||||
setTicketApplicationPayload({ ...ticketApplicationPayload, ...temp });
|
||||
};
|
||||
useEffect(() => {
|
||||
console.log('selectedTicketTypeName', selectedTicketTypeName);
|
||||
}, [selectedTicketTypeName]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('selectedTicketType', selectedTicketType);
|
||||
}, [selectedTicketType]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('ticketApplicationfields', ticketApplicationfields);
|
||||
let temp = {
|
||||
transition_id: ticketApplicationfields.transition_id,
|
||||
workflow_id: ticketApplicationfields.workflow_id
|
||||
};
|
||||
setTicketApplicationPayload({ ...ticketApplicationPayload, ...temp });
|
||||
}, [ticketApplicationfields]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('applyModalIsShown', applyModalIsShown);
|
||||
}, [applyModalIsShown]);
|
||||
console.log('ticketTypes', ticketTypes);
|
||||
}, [ticketTypes]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('ticketApplicationPayload', ticketApplicationPayload);
|
||||
|
|
@ -387,37 +308,7 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
</Form>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Modal isOpen={applyModalIsShown}>
|
||||
<ModalHeader>{t('Ticket Application')}</ModalHeader>
|
||||
<ModalBody>
|
||||
{ticketApplicationfields.fields &&
|
||||
ticketApplicationfields.fields.map((field, index) => {
|
||||
if (field.field_type === 'input') {
|
||||
return (
|
||||
<InputGroup key={index}>
|
||||
<InputGroupText>{field.field_name}</InputGroupText>
|
||||
<Input placeholder={field.field_name} onChange={onFieldChange.bind(this, field.field_key)} />
|
||||
</InputGroup>
|
||||
);
|
||||
} else if (field.field_type === 'text_area') {
|
||||
return (
|
||||
<InputGroup key={index}>
|
||||
<InputGroupText>{field.field_name}</InputGroupText>
|
||||
<textarea placeholder={field.field_name} onChange={onFieldChange.bind(this, field.field_key)} />
|
||||
</InputGroup>
|
||||
);
|
||||
} else {
|
||||
return <Input key={index}> Error field</Input>;
|
||||
}
|
||||
})}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button color="primary" onClick={submitApplication}>
|
||||
{ticketApplicationfields.name}
|
||||
</Button>
|
||||
<Button onClick={hiddenModal}>{t('Cancel')}</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
|
||||
<DetailedDataTable data={ticketList} title={t('Ticket List')} columns={columns} pagesize={10} />
|
||||
</Fragment>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue