Skip to content

Commit

Permalink
'image
Browse files Browse the repository at this point in the history
  • Loading branch information
@CoCo-27
CoCo-27 committed Sep 18, 2023
1 parent 2e9f641 commit e6bdb8b
Show file tree
Hide file tree
Showing 8 changed files with 254 additions and 189 deletions.
Binary file added assets/Martin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/patient.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
175 changes: 86 additions & 89 deletions components/Main/CreateComponent.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<template>
<div class="w-full h-[852px] p-4 relative bg-neutral-50">
<form class="w-full h-full flex flex-col gap-4 relative">
<form
class="w-full h-full flex flex-col gap-4 relative"
@submit.prevent="submitForm"
>
<div class="self-stretch justify-between items-center gap-2 inline-flex">
<div
class="pl-2 pr-4 py-2 bg-[#ededed] rounded-[100px] justify-start items-center gap-2 flex cursor-pointer hover:bg-white"
Expand All @@ -24,6 +27,7 @@
</div>
<button
class="px-4 py-2 bg-[#ededed] rounded-[100px] justify-start items-center gap-2 flex cursor-pointer text-black text-base font-normal hover:bg-white"
@click.prevent="submitForm"
type="submit"
>
Speichern
Expand All @@ -48,9 +52,13 @@
<v-autocomplete
class="w-4/6 sm:w-5/6"
:items="this.patientNames"
item-title="name"
item-value="id"
variant="outlined"
hide-details
></v-autocomplete>
v-model="selectedPatientId"
>
</v-autocomplete>
</div>
<div
class="self-stretch px-4 py-2 bg-[#ededed] rounded-[100px] justify-center items-center gap-2 inline-flex"
Expand All @@ -63,8 +71,11 @@
<v-autocomplete
class="w-4/6 sm:w-5/6"
:items="this.dentistNames"
item-title="name"
item-value="id"
variant="outlined"
hide-details
v-model="selectedDentistId"
></v-autocomplete>
</div>
<div
Expand All @@ -78,8 +89,11 @@
<v-autocomplete
class="w-4/6 sm:w-5/6"
:items="this.locationNames"
item-title="name"
item-value="id"
variant="outlined"
hide-details
v-model="selectedLocationId"
></v-autocomplete>
</div>
<div
Expand All @@ -93,8 +107,11 @@
<v-autocomplete
class="w-4/6 sm:w-5/6"
:items="this.serviceNames"
item-title="name"
item-value="id"
variant="outlined"
hide-details
v-model="selectedServiceId"
></v-autocomplete>
</div>
<div
Expand Down Expand Up @@ -182,7 +199,10 @@
/>
</svg>
</div>
<div v-if="uploadedFile" class="text-blue-700 font-bold text-lg">
<div
v-if="uploadedFile"
class="text-blue-700 font-bold text-base sm:text-lg"
>
{{ uploadedFile.name }} uploaded
</div>
<div v-else class="text-black text-sm font-bold">
Expand Down Expand Up @@ -217,6 +237,11 @@ export default {
rd_to_bp: null,
work_details: null,
uploadedFile: null,
selectedPatientId: null,
selectedDentistId: null,
selectedLocationId: null,
selectedServiceId: null,
};
},
Expand Down Expand Up @@ -260,39 +285,51 @@ export default {
// Processing patientResponse
if (patientResponse.ok) {
this.patientData = await patientResponse.json();
this.patientNames = this.patientData.data.map(
(item) => `${item.first_name}, ${item.last_name}`
);
this.patientNames = this.patientData.data.map((item) => {
return {
name: `${item.first_name}, ${item.last_name}`,
id: item.id,
};
});
} else {
console.error('Response Error:', patientResponse);
}
// Processing dentistResponse
if (dentistResponse.ok) {
this.dentistData = await dentistResponse.json();
this.dentistNames = this.dentistData.data.map(
(item) => `${item.first_name}, ${item.last_name}`
);
this.dentistNames = this.dentistData.data.map((item) => {
return {
name: `${item.first_name}, ${item.last_name}`,
id: item.id,
};
});
} else {
console.error('Response Error:', dentistResponse);
}
// Processing locationResponse
if (locationResponse.ok) {
this.locationData = await locationResponse.json();
this.locationNames = this.locationData.data.map(
(item) => `${item.name}`
);
this.locationNames = this.locationData.data.map((item) => {
return {
name: `${item.name}`,
id: item.id,
};
});
} else {
console.error('Response Error:', locationResponse);
}
// Processing patientResponse
if (serviceResponse.ok) {
this.serviceData = await serviceResponse.json();
this.serviceNames = this.serviceData.data.map(
(item) => `${item.first_name}, ${item.last_name}`
);
this.serviceNames = this.serviceData.data.map((item) => {
return {
name: `${item.first_name}, ${item.last_name}`,
id: item.id,
};
});
} else {
console.error('Response Error:', serviceResponse);
}
Expand Down Expand Up @@ -331,83 +368,43 @@ export default {
this.uploadedFile = file;
},
// async submitForm() {
// if (
// !this.patient ||
// !this.dentist ||
// !this.service_provider ||
// !this.location ||
// !this.rd_to_bp ||
// !this.work_details ||
// !this.uploadedFile
// ) {
// alert('Please fill out all fields.');
// return;
// }
// // data to be sent
// const formData = {
// patient: this.patient,
// dentist: this.dentist,
// service_provider: this.service_provider,
// location: this.location,
// rd_to_bp: this.rd_to_bp,
// work_details: this.work_details,
// // assuming you have a field for storing the file id
// file: this.uploadedFile ? this.uploadedFile.id : null,
// };
async submitForm() {
// data to be sent
const formData = {
patient: this.selectedPatientId,
dentist: this.selectedDentistId,
service_provider: this.selectedServiceId,
location: this.selectedLocationId,
rd_to_bp: this.rd_to_bp,
work_details: this.work_details,
// assuming you have a field for storing the file id
files: this.uploadedFile ? this.uploadedFile.id : null,
};
// console.log('formData = ', formData);
// try {
// const runtimeConfig = useRuntimeConfig();
// // const response = await createItems({
// // collection: 'Laboratory Work',
// // data,
// // });
// // console.log('response === ', response);
// // Create a FormData object
// // const formData = new FormData();
// // formData.append('patient', this.patient);
// // formData.append('dentist', this.dentist);
// // formData.append('service_provider', this.service_provider);
// // formData.append('location', this.location);
// // formData.append('rd_to_bp', this.rd_to_bp);
// // formData.append('work_details', this.work_details);
// // // Only append file if it exists
// // if (this.uploadedFile) {
// // formData.append('file', this.uploadedFile);
// // }
// // for (var pair of formData.entries()) {
// // console.log(pair[0] + ', ' + pair[1]);
// // }
// const response = await fetch(
// 'https://app.wunschlachen.de/staging/items/Laboratory_work',
// {
// method: 'POST',
// headers: {
// Authorization: runtimeConfig.public.BEARER_TOKEN,
// },
// body: formData,
// }
// );
try {
const runtimeConfig = useRuntimeConfig();
const response = await fetch(
'https://app.wunschlachen.de/staging/items/Laboratory_work',
{
method: 'POST',
headers: {
Authorization: runtimeConfig.public.BEARER_TOKEN,
},
body: formData,
}
);
// // Use fetch API to make a POST request
// if (!response.ok) {
// throw new Error(`HTTP error! status: ${response.status}`);
// }
// Use fetch API to make a POST request
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// const data = await response.json();
// console.log('response = ', data);
// } catch (error) {
// console.error('An error occurred:', error);
// }
// },
const data = await response.json();
console.log('response = ', data);
} catch (error) {
console.error('An error occurred:', error);
}
},
},
};
</script>
59 changes: 22 additions & 37 deletions components/Main/ItemComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
>
<div class="text-[10px] font-normal">{{ status }}</div>
</div>
<div class="text-zinc-800 text-base font-bold">
<div v-if="item.patient" class="text-zinc-800 text-base font-bold">
{{ firstName }}, {{ lastName }}
</div>
</div>
Expand All @@ -39,16 +39,10 @@
<div class="text-black text-opacity-50 text-xs font-normal">
#{{ number }}
</div>
<div class="justify-start items-center gap-1 flex">
<img
class="w-3.5 h-3.5 rounded-[14px]"
:src="result?.data.profile_image"
/>
<div
v-if="result && result.data"
class="text-black text-xs font-normal"
>
Dr. {{ result?.data.first_name }} {{ result?.data.last_name }}
<div v-if="item.dentist" class="justify-start items-center gap-1 flex">
<img class="w-3.5 h-3.5 rounded-[14px]" :src="this.imageSrc" />
<div class="text-black text-xs font-normal">
Dr. {{ dentist_firstName }} {{ dentist_lastName }}
</div>
</div>
</div>
Expand All @@ -61,7 +55,7 @@ export default {
data() {
return {
result: null,
imageSrc: null,
};
},
Expand All @@ -73,39 +67,30 @@ export default {
number: { type: String },
status: { type: String },
workDescription: { type: String },
dentist: { type: String },
dentist_firstName: { type: String },
dentist_lastName: { type: String },
dentist_image: { type: String },
},
created: async function () {
mounted() {
const runtimeConfig = useRuntimeConfig();
console.log('dentistID = ', this.dentist);
if (this.dentist) {
const dentistInfo = await fetch(
`https://app.wunschlachen.de/staging/items/dentists/${this.dentist}`,
{
method: 'GET',
headers: {
Authorization: runtimeConfig.public.BEARER_TOKEN,
},
}
);
if (dentistInfo.ok) {
this.loading = false;
this.result = await dentistInfo.json();
console.log('result = ', this.result.data);
} else {
this.loading = false;
console.error('Response Error:', dentistInfo);
}
}
fetch(`https://app.wunschlachen.de/staging/assets/${this.dentist_image}`, {
method: 'GET',
headers: {
Authorization: runtimeConfig.public.BEARER_TOKEN,
},
})
.then((response) => response.blob())
.then((data) => {
this.imageSrc = URL.createObjectURL(data);
})
.catch((error) => console.error(error));
},
methods: {
handleClick() {
// Emit a custom event with item data
this.$emit('item-clicked', this.item, this.result.data);
this.$emit('item-clicked', this.item);
},
},
};
Expand Down
Loading

0 comments on commit e6bdb8b

Please sign in to comment.