ตรวจสอบค่า null ของ Category

This commit is contained in:
Net 2024-02-16 16:21:19 +07:00
parent 19d68a92a7
commit 7a16873d66

View file

@ -46,6 +46,11 @@ function getOnlineStatus(option: "icon" | "status", userId: string) {
if (option === "status") return isOnline ? "ออนไลน์" : "ออฟไลน์"; if (option === "status") return isOnline ? "ออนไลน์" : "ออฟไลน์";
} }
function validateCategory(category: String | undefined) {
if (!!category) return category;
return "ระบุไม่ได้";
}
onMounted(async () => { onMounted(async () => {
if (store.currentIssue) { if (store.currentIssue) {
await store.fetchIssue(); await store.fetchIssue();
@ -109,19 +114,22 @@ const onLoad = (async (_: any, done: any) => {
<img :src="iconAvatar" /> <img :src="iconAvatar" />
</q-avatar> </q-avatar>
<q-item-section v-if="store.currentIssue" class="q-pl-sm"> <q-item-section v-if="store.currentIssue" class="q-pl-sm">
<q-item-label <q-item-label>
>{{ store.currentTitle }} <span class="tite-on-message-long">
<q-badge color="blue"> <q-badge color="blue" outline>
{{ store.currentCategory }} {{ validateCategory(store.currentCategory) }}
</q-badge></q-item-label </q-badge>
>
{{ store.currentTitle }}
</span>
</q-item-label>
<span> <span>
<q-icon <q-icon
name="mdi-circle" name="mdi-circle"
size="10px" size="10px"
:color="getOnlineStatus('icon', store.createdByUser)" :color="getOnlineStatus('icon', store.createdByUserId)"
/> />
{{ getOnlineStatus("status", store.createdByUser) }} {{ getOnlineStatus("status", store.createdByUserId) }}
</span> </span>
</q-item-section> </q-item-section>
@ -154,8 +162,8 @@ const onLoad = (async (_: any, done: any) => {
store.currentIssue = item.id; store.currentIssue = item.id;
store.currentTitle = item.title; store.currentTitle = item.title;
store.correntStatusIssue = item.status; store.correntStatusIssue = item.status;
store.currentCategory = item.category.name; store.currentCategory = item.category?.name;
store.createdByUser = item.createdByUserId; store.createdByUserId = item.createdByUserId;
store.issue store.issue
? (store.issue.result = store.issue.result.map((v) => { ? (store.issue.result = store.issue.result.map((v) => {
if (v.id === item.id) { if (v.id === item.id) {
@ -178,13 +186,14 @@ const onLoad = (async (_: any, done: any) => {
</q-avatar> </q-avatar>
</div> </div>
<div class="col column q-ml-md"> <div class="col column q-ml-md">
<span> <span> {{ item.createdByUserName }} </span>
<q-badge color="blue"> <span class="col column">
{{ item.category.name }} <p class="tite-long text-weight-bold line-ellipsis">
</q-badge> <q-badge color="blue" outline>{{
</span> validateCategory(item.category?.name)
<span class="text-longcol text-weight-bold line-ellipsis"> }}</q-badge>
{{ item.title }} {{ item.title }}
</p>
</span> </span>
<span <span
@ -260,7 +269,6 @@ const onLoad = (async (_: any, done: any) => {
:stamp="moment(item.createdAt).fromNow()" :stamp="moment(item.createdAt).fromNow()"
/> />
</q-item-label> </q-item-label>
{{ console.log(item.fromUserId === store.userId) }}
<q-item-label <q-item-label
v-if="item.fromUserId === store.userId" v-if="item.fromUserId === store.userId"
class="flex" class="flex"
@ -354,8 +362,16 @@ const onLoad = (async (_: any, done: any) => {
</template> </template>
<style scoped> <style scoped>
.text-long { .tite-long {
width: 100px; width: 150px;
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.tite-on-message-long {
width: 250px;
display: inline-block; display: inline-block;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;