add the search button
hyh123a
parent
d34adf3dd3
commit
e4f3e0d998
|
|
@ -60,11 +60,11 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
|
||||||
|
|
||||||
// State
|
// State
|
||||||
const [selectedTicketType, setSelectedTicketType] = useState(1);
|
const [selectedTicketType, setSelectedTicketType] = useState(1);
|
||||||
|
const [selectedTicketTypeName, setSelectedTicketTypeName] = useState('');
|
||||||
const [ticketTypes, setTicketTypes] = useState([]);
|
const [ticketTypes, setTicketTypes] = useState([]);
|
||||||
const [ticketList, setTicketList] = useState([]);
|
const [ticketList, setTicketList] = useState([]);
|
||||||
const [ticketApplicationfields, setTicketApplicationfields] = useState({});
|
const [ticketListAll, setTicketListAll] = useState([]);
|
||||||
|
|
||||||
const [applyModalIsShown, setApplyModalIsShown] = useState(false);
|
|
||||||
const [ticketApplicationPayload, setTicketApplicationPayload] = useState({});
|
const [ticketApplicationPayload, setTicketApplicationPayload] = useState({});
|
||||||
|
|
||||||
const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
|
const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
|
||||||
|
|
@ -129,6 +129,7 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
|
||||||
if (isResponseOK) {
|
if (isResponseOK) {
|
||||||
console.log('/ticket/list', json);
|
console.log('/ticket/list', json);
|
||||||
setTicketList(json);
|
setTicketList(json);
|
||||||
|
setTicketListAll(json);
|
||||||
} else {
|
} else {
|
||||||
toast.error(json.description);
|
toast.error(json.description);
|
||||||
}
|
}
|
||||||
|
|
@ -140,16 +141,6 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
|
||||||
|
|
||||||
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
|
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 }) => (
|
const actionFormatter = (dataField, { id }) => (
|
||||||
// Control your row with this id
|
// Control your row with this id
|
||||||
<UncontrolledDropdown>
|
<UncontrolledDropdown>
|
||||||
|
|
@ -243,105 +234,35 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
|
||||||
|
|
||||||
let onWorkflowTypeChange = ({ target }) => {
|
let onWorkflowTypeChange = ({ target }) => {
|
||||||
setSelectedTicketType(target.value);
|
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 = () => {
|
let searchTicket = () => {
|
||||||
console.log('You search the ticket!!', selectedTicketType);
|
console.log('You search the ticket!!', selectedTicketType, selectedTicketTypeName);
|
||||||
|
setTicketList(ticketListAll.filter(item => item.ticket_type === selectedTicketTypeName));
|
||||||
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);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Submit
|
useEffect(() => {
|
||||||
let submitApplication = target => {
|
console.log('ticketList', ticketList);
|
||||||
hiddenModal();
|
}, [ticketList]);
|
||||||
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);
|
|
||||||
|
|
||||||
let isResponseOK = false;
|
useEffect(() => {
|
||||||
fetch(APIBaseURL + '/ticket/apply/' + selectedTicketType, {
|
console.log('selectedTicketTypeName', selectedTicketTypeName);
|
||||||
method: 'POST',
|
}, [selectedTicketTypeName]);
|
||||||
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(() => {
|
useEffect(() => {
|
||||||
console.log('selectedTicketType', selectedTicketType);
|
console.log('selectedTicketType', selectedTicketType);
|
||||||
}, [selectedTicketType]);
|
}, [selectedTicketType]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log('ticketApplicationfields', ticketApplicationfields);
|
console.log('ticketTypes', ticketTypes);
|
||||||
let temp = {
|
}, [ticketTypes]);
|
||||||
transition_id: ticketApplicationfields.transition_id,
|
|
||||||
workflow_id: ticketApplicationfields.workflow_id
|
|
||||||
};
|
|
||||||
setTicketApplicationPayload({ ...ticketApplicationPayload, ...temp });
|
|
||||||
}, [ticketApplicationfields]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
console.log('applyModalIsShown', applyModalIsShown);
|
|
||||||
}, [applyModalIsShown]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log('ticketApplicationPayload', ticketApplicationPayload);
|
console.log('ticketApplicationPayload', ticketApplicationPayload);
|
||||||
|
|
@ -387,37 +308,7 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
|
||||||
</Form>
|
</Form>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</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} />
|
<DetailedDataTable data={ticketList} title={t('Ticket List')} columns={columns} pagesize={10} />
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue