75 lines
2.4 KiB
Vue
75 lines
2.4 KiB
Vue
<template>
|
|
<q-card :class="['domain-card', item.id == activeId ? 'default': '']">
|
|
<q-card-section>
|
|
<div class="row no-wrap">
|
|
<div class="col">
|
|
<div class="text-h6 ellipsis">{{ item.name }}</div>
|
|
<div class="text-subtitle2">{{ item.url }}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<!-- <q-badge color="secondary" text-color="white" align="middle" class="q-mb-xs" label="他人の所有" /> -->
|
|
<q-chip v-if="!isOwnerFunc(item.owner.id)" square color="secondary" text-color="white" icon="people" label="他人の所有" size="sm" />
|
|
<q-chip v-else square color="purple" text-color="white" icon="people" label="自分" size="sm" />
|
|
<div class="text-right">
|
|
<!-- icon="add_moderator" -->
|
|
<!-- <q-chip square color="primary" text-color="white" label="管理者" size="sm" /> -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<div class="row items-center no-wrap">
|
|
<div class="col">
|
|
<div class="text-grey-7 text-caption text-weight-medium">
|
|
アカウント
|
|
</div>
|
|
<div class="smaller-font-size">{{ item.user }}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="text-grey-7 text-caption text-weight-medium">
|
|
所有者
|
|
</div>
|
|
<div class="smaller-font-size">{{ !isOwnerFunc(item.owner.id) ? item.owner.fullName : '自分' }}</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator v-if="$slots.actions" />
|
|
<slot name="actions" :item="item"></slot>
|
|
</q-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineProps, computed } from 'vue';
|
|
import { IDomainOwnerDisplay } from 'src/types/DomainTypes';
|
|
import { useAuthStore } from 'stores/useAuthStore';
|
|
|
|
const props = defineProps<{
|
|
item: IDomainOwnerDisplay;
|
|
activeId: number;
|
|
}>();
|
|
|
|
const authStore = useAuthStore();
|
|
const isOwnerFunc = computed(() => (ownerId: string) => {
|
|
return ownerId == authStore.userId;
|
|
});
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.domain-card.default {
|
|
box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2),
|
|
0 10px 14px 1px rgba(0, 0, 0, 0.14),
|
|
0 4px 18px 3px rgba(0, 0, 0, 0.12),
|
|
inset 0 0 0px 2px #1976D2;
|
|
}
|
|
.domain-card {
|
|
width: 22rem;
|
|
word-break: break-word;
|
|
|
|
.smaller-font-size {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
</style>
|