Skip to content

Commit

Permalink
FIX
Browse files Browse the repository at this point in the history
  • Loading branch information
@CoCo-27
CoCo-27 committed Sep 19, 2023
1 parent 00f8fd6 commit 46408d0
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 130 deletions.
176 changes: 64 additions & 112 deletions components/Main/ItemComponent.vue
View file
Original file line number Diff line number Diff line change
@@ -1,144 +1,96 @@
<template>
<div
class="w-full desktop:w-1/3 h-[852px] flex flex-col gap-4 p-4 relative bg-[#fafafa]"
class="min-h-[112px] p-4 bg-white rounded-lg shadow flex-col justify-between items-start inline-flex cursor-pointer hover:bg-[#ededed]"
@click="handleClick"
>
<div class="w-6 h-6 left-[16px] top-[16px]">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M4.65 17.05C4.55084 17.05 4.46771 17.0164 4.40063 16.9491C4.33354 16.8819 4.3 16.7986 4.3 16.6991C4.3 16.5997 4.33354 16.5167 4.40063 16.45C4.46771 16.3833 4.55084 16.35 4.65 16.35H19.35C19.4492 16.35 19.5323 16.3836 19.5994 16.4509C19.6665 16.5181 19.7 16.6015 19.7 16.7009C19.7 16.8003 19.6665 16.8833 19.5994 16.95C19.5323 17.0167 19.4492 17.05 19.35 17.05H4.65ZM4.65 12.35C4.55084 12.35 4.46771 12.3164 4.40063 12.2491C4.33354 12.1819 4.3 12.0986 4.3 11.9991C4.3 11.8997 4.33354 11.8167 4.40063 11.75C4.46771 11.6833 4.55084 11.65 4.65 11.65H19.35C19.4492 11.65 19.5323 11.6836 19.5994 11.7509C19.6665 11.8181 19.7 11.9015 19.7 12.0009C19.7 12.1003 19.6665 12.1833 19.5994 12.25C19.5323 12.3167 19.4492 12.35 19.35 12.35H4.65ZM4.65 7.65001C4.55084 7.65001 4.46771 7.61639 4.40063 7.54914C4.33354 7.48189 4.3 7.39855 4.3 7.29914C4.3 7.19972 4.33354 7.11668 4.40063 7.05001C4.46771 6.98335 4.55084 6.95001 4.65 6.95001H19.35C19.4492 6.95001 19.5323 6.98364 19.5994 7.05089C19.6665 7.11814 19.7 7.20147 19.7 7.30089C19.7 7.4003 19.6665 7.48335 19.5994 7.55001C19.5323 7.61668 19.4492 7.65001 19.35 7.65001H4.65Z"
fill="black"
/>
</svg>
</div>
<div
class="w-full left-[16px] top-[56px] justify-between items-center inline-flex"
>
<div class="text-zinc-800 text-2xl font-bold">Laborarbeiten</div>
<div class="self-stretch justify-between items-center gap-2 inline-flex">
<div class="justify-start items-center gap-2 flex">
<div
class="p-1 bg-white rounded-2xl justify-start items-center gap-1 flex"
class="px-2 py-1 bg-opacity-10 rounded-2xl border justify-center items-center flex"
:class="{
'bg-lime-700 border-lime-700 text-lime-700': status === 'open',
'bg-yellow-500 border-yellow-500 text-yellow-500':
status === 'dispatched',
'bg-blue-700 border-blue-700 text-blue-700':
status === 'in_production',
'bg-zinc-800 border-zinc-800 text-zinc-800': status === 'done',
}"
>
<div class="w-6 h-6 relative">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M11.075 16.7C10.9758 16.7 10.8927 16.6664 10.8256 16.5991C10.7585 16.5319 10.725 16.4485 10.725 16.3491C10.725 16.2497 10.7585 16.1667 10.8256 16.1C10.8927 16.0333 10.9758 16 11.075 16H12.9C12.9992 16 13.0823 16.0336 13.1494 16.1009C13.2165 16.1681 13.25 16.2514 13.25 16.3509C13.25 16.4503 13.2165 16.5333 13.1494 16.6C13.0823 16.6667 12.9992 16.7 12.9 16.7H11.075ZM7.4 12.35C7.30084 12.35 7.21771 12.3164 7.15063 12.2491C7.08354 12.1819 7.05 12.0985 7.05 11.9991C7.05 11.8997 7.08354 11.8167 7.15063 11.75C7.21771 11.6833 7.30084 11.65 7.4 11.65H16.575C16.6742 11.65 16.7573 11.6836 16.8244 11.7509C16.8915 11.8181 16.925 11.9014 16.925 12.0009C16.925 12.1003 16.8915 12.1833 16.8244 12.25C16.7573 12.3167 16.6742 12.35 16.575 12.35H7.4ZM4.65 7.99999C4.55084 7.99999 4.46771 7.96636 4.40063 7.89911C4.33354 7.83186 4.3 7.74853 4.3 7.64911C4.3 7.5497 4.33354 7.46665 4.40063 7.39999C4.46771 7.33332 4.55084 7.29999 4.65 7.29999H19.35C19.4492 7.29999 19.5323 7.33361 19.5994 7.40086C19.6665 7.46811 19.7 7.55145 19.7 7.65086C19.7 7.75028 19.6665 7.83332 19.5994 7.89999C19.5323 7.96665 19.4492 7.99999 19.35 7.99999H4.65Z"
fill="black"
/>
</svg>
</div>
<div class="text-[10px] font-normal">{{ status }}</div>
</div>
<div
class="p-1 bg-[#ffffff] rounded-2xl justify-start items-center gap-1 flex cursor-pointer hover:bg-[#ededed]"
@click="gotoCreate"
>
<div class="w-6 h-6 relative">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M11.65 12.35H6.3V11.65H11.65V6.29999H12.35V11.65H17.7V12.35H12.35V17.7H11.65V12.35Z"
fill="black"
/>
</svg>
</div>
<div v-if="item.patient" class="text-zinc-800 text-base font-bold">
{{ firstName }}, {{ lastName }}
</div>
</div>
<div
class="px-2 py-1 bg-red-600 bg-opacity-10 rounded-2xl border border-red-600 justify-center items-center flex"
>
<div class="text-red-600 text-[8px] font-normal">1</div>
</div>
</div>

<div class="flex flex-col gap-4 overflow-y-auto">
<ItemComponent
v-for="item in result?.data || []"
:key="item.id"
:doctor="doctor"
:firstName="item.patient?.first_name"
:lastName="item.patient?.last_name"
:number="item.patient?.patient_number"
:status="item.status"
:workDescription="item.work_description"
:dentist_firstName="item.dentist?.first_name"
:dentist_lastName="item.dentist?.last_name"
:dentist_image="item.dentist?.profile_image?.id"
:item="item"
@item-clicked="handleItemClick"
/>
<div
class="self-stretch text-black text-sm font-normal overflow-hidden whitespace-nowrap text-overflow-ellipsis"
>
{{ workDescription }}
</div>
<div
class="self-stretch justify-between items-center gap-4 inline-flex overflow-hidden whitespace-nowrap text-overflow-ellipsis"
>
<div class="text-black text-opacity-50 text-xs font-normal">
#{{ number }}
</div>
<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>
</div>
</template>

<script>
import doctorImage from 'assets/doctor.png';
import ItemComponent from './ItemComponent.vue';
export default {
name: 'ListComponent',
components: {
ItemComponent,
},
name: 'ItemComponent',
data() {
return {
doctor: doctorImage,
result: null,
loading: false,
imageSrc: null,
};
},
props: {
isMobileView: Boolean,
item: { type: Object },
doctor: { type: String },
firstName: { type: String },
lastName: { type: String },
number: { type: String },
status: { type: String },
workDescription: { type: String },
dentist_firstName: { type: String },
dentist_lastName: { type: String },
dentist_image: { type: String },
},
created: async function () {
this.loading = true;
mounted() {
const runtimeConfig = useRuntimeConfig();
const response = await fetch(
'https://app.wunschlachen.de/staging/items/Laboratory_work?fields=*%2Cpatient.first_name%2Cpatient.last_name%2Cpatient.patient_number%2Cdentist.first_name%2Cdentist.last_name%2Cdentist.profile_image.id%2Cfiles.directus_files_id&=',
{
method: 'GET',
headers: {
Authorization: runtimeConfig.public.BEARER_TOKEN,
},
}
);
if (response.ok) {
this.loading = false;
this.result = await response.json();
console.log('result = ', this.result.data);
// Auto select the first item
if (this.result.data.length > 0 && this.isMobileView === false) {
this.handleItemClick(this.result.data[0]);
}
} else {
this.loading = false;
console.error('Response Error:', response);
}
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: {
gotoCreate() {
this.$emit('changeComponent', 'CreateComponent');
},
handleItemClick(item) {
// emit event to parent component (App.vue)
this.$emit('change-selected-item', item);
handleClick() {
// Emit a custom event with item data
this.$emit('item-clicked', this.item);
},
},
};
Expand Down
39 changes: 23 additions & 16 deletions components/Main/MessageComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
</div>
<div></div>
</div>
<div class="self-stretch text-black text-xs font-normal">
<div class="self-stretch text-black text-xs font-normal break-all">
{{ selectedItem.work_description }}
</div>
<div class="self-stretch justify-between items-center gap-4 inline-flex">
Expand Down Expand Up @@ -105,7 +105,7 @@
{{ timeAgo(info.data.date_created) }}
</div>
</div>
<div class="text-sm text-black">
<div class="text-sm text-black break-all">
{{ info.data.message }}
</div>
</div>
Expand Down Expand Up @@ -241,20 +241,27 @@ export default {
async fetchImage(newVal) {
const runtimeConfig = useRuntimeConfig();
fetch(
`https://app.wunschlachen.de/staging/assets/${newVal?.dentist?.profile_image.id}`,
{
method: 'GET',
headers: {
Authorization: runtimeConfig.public.BEARER_TOKEN,
},
}
)
.then((response) => response.blob())
.then((data) => {
this.imageSrc = URL.createObjectURL(data);
})
.catch((error) => console.error(error));
// Check if profile_image.id exists before making the fetch request
if (newVal?.dentist?.profile_image?.id) {
fetch(
`https://app.wunschlachen.de/staging/assets/${newVal?.dentist?.profile_image?.id}`,
{
method: 'GET',
headers: {
Authorization: runtimeConfig.public.BEARER_TOKEN,
},
}
)
.then((response) => response.blob())
.then((data) => {
this.imageSrc = URL.createObjectURL(data);
})
.catch((error) => console.error(error));
} else {
// Optionally, handle the case when profile_image.id is null
this.imageSrc = ''; // default or fallback image
}
},
async fetchMessages(newVal) {
Expand Down
4 changes: 2 additions & 2 deletions components/Main/RainerComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ export default {
mounted() {
const runtimeConfig = useRuntimeConfig();
fetch(
`https://app.wunschlachen.de/staging/assets/${this.selectedItem?.dentist?.profile_image.id}`,
`https://app.wunschlachen.de/staging/assets/${this.selectedItem?.dentist?.profile_image?.id}`,
{
method: 'GET',
headers: {
Expand All @@ -250,7 +250,7 @@ export default {
if (newVal) {
const runtimeConfig = useRuntimeConfig();
fetch(
`https://app.wunschlachen.de/staging/assets/${newVal?.dentist?.profile_image.id}`,
`https://app.wunschlachen.de/staging/assets/${newVal?.dentist?.profile_image?.id}`,
{
method: 'GET',
headers: {
Expand Down

1 comment on commit 46408d0

@vercel
Copy link

@vercel vercel bot commented on 46408d0 Sep 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

laboratoryapp – ./

laboratoryapp-git-main-cocokingdom27-gmailcom.vercel.app
laboratoryapp-cocokingdom27-gmailcom.vercel.app
laboratoryapp.vercel.app

Please sign in to comment.