50 lines
1.7 KiB
Vue
50 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from "vue";
|
|
import { pb } from "../pocketbase";
|
|
|
|
const props = defineProps({
|
|
restaurant: { type: Object },
|
|
});
|
|
|
|
const reviews = ref<Object[]>([]);
|
|
|
|
watch(
|
|
() => props.restaurant,
|
|
async (newval, oldval) => {
|
|
console.log("fetch");
|
|
if (props.restaurant === undefined) {
|
|
reviews.value = [];
|
|
} else {
|
|
reviews.value = await pb
|
|
.collection("reviews")
|
|
.getFullList({ filter: pb.filter("restaurant ~ {:id}", { id: props.restaurant.id }), expand: "user" });
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<template v-for="review in reviews" :key="review.id">
|
|
<div class="card card-compact bg-base-100 shadow-xl">
|
|
<div class="card-body">
|
|
<h2 class="card-title">{{ review.expand.user.username }}</h2>
|
|
<div class="flex flex-row">
|
|
<p class="text-left">{{ review.text }}</p>
|
|
</div>
|
|
|
|
<div class="flex flex-row items-center">
|
|
<div class="flex-1"></div>
|
|
<p class="flex-0 align-bottom flex-grow-0 mx-3">{{ review.rating }}/5</p>
|
|
<div class="rating align-bottom flex-0 flex-grow-0">
|
|
<input type="radio" disabled name="rating-1" class="mask mask-star" :checked="false" />
|
|
<input type="radio" disabled name="rating-1" class="mask mask-star" :checked="false" />
|
|
<input type="radio" disabled name="rating-1" class="mask mask-star" :checked="true" />
|
|
<input type="radio" disabled name="rating-1" class="mask mask-star" :checked="false" />
|
|
<input type="radio" disabled name="rating-1" class="mask mask-star" :checked="false" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|