add delete hint

This commit is contained in:
xue jiahao
2024-12-03 08:31:00 +08:00
parent 660ffe36c2
commit dcfe0d44fd
6 changed files with 90 additions and 73 deletions

View File

@@ -7,12 +7,6 @@
<slot name="toolbar"></slot>
<q-btn flat round dense icon="close" @click="close" />
</q-toolbar>
<q-card-section>
{{ props.domain.url }}
<!-- <q-input value="props.domain.url" label="共有リンク" readonly outlined dense>
</q-input> -->
</q-card-section>
<q-card-section>
<!-- <q-select
filled

View File

@@ -3,18 +3,12 @@
<q-card class="dialog-content" >
<q-toolbar class="bg-grey-4">
<q-toolbar-title>{{domain.name}}のドメインを共有する</q-toolbar-title>
<q-space></q-space>
<slot name="toolbar"></slot>
<q-btn flat round dense icon="close" @click="close" />
</q-toolbar>
<q-card-section class="q-ma-md" >
{{ props.domain.url }}
<!-- <q-input value="props.domain.url" label="共有リンク" readonly outlined dense>
</q-input> -->
<q-card-section class="q-mx-md " >
<q-select
class="q-mt-md"
:disable="loading"
filled
dense
@@ -23,6 +17,7 @@
input-debounce="0"
:options="canSharedUserFilteredOptions"
clearable
:placeholder="canSharedUserFilter ? '' : '共有するユーザーを選択'"
@filter="filterFn"
:display-value="canSharedUserFilter?`${canSharedUserFilter.fullName} ${canSharedUserFilter.email}`:''">
@@ -38,12 +33,6 @@
</q-item>
</template>
</q-select>
<!-- <sharing-user-list :users="canSharedUsers" :loading="loading" title="Treats" >
<template v-slot:actions="{ row }">
<q-btn flat color="primary" padding="xs" size="1em" icon="add" @click="shareTo(row)" />
</template>
</sharing-user-list> -->
<!-- <q-btn label="共有する" color="primary" @click="shareTo" /> -->
<sharing-user-list class="q-mt-md" style="height: 330px" :users="sharedUsers" :loading="loading" title="現在の共有ユーザー">
<template v-slot:actions="{ row }">
<q-btn flat color="primary" padding="xs" size="1em" :loading="row.id == removingUser?.id" icon="person_off" @click="removeShareTo(row)" />
@@ -108,6 +97,7 @@ watch(
async (newValue) => {
visible.value = newValue;
sharedUsers.value = [];
canSharedUserFilter.value = undefined
if (newValue) {
await loadShared();
}
@@ -192,7 +182,7 @@ const itemToDisplay = (item: IUser) => {
<style lang="scss">
.dialog-content {
width: 60vw;
width: 60vw;
max-height: 80vh;
.q-select {
min-width: 0 !important;

View File

@@ -1,12 +1,15 @@
<template>
<q-table :rows="users" :filter="filter" :columns="columns" row-key="id" :loading="loading" :pagination="pagination">
<template v-slot:top-right>
<q-table :rows="users" :filter="filter" dense :columns="columns" row-key="id" :loading="loading" :pagination="pagination">
<template v-slot:top>
<div class="h6 text-weight-bold">{{props.title}}</div>
<q-space />
<q-input borderless dense filled debounce="300" v-model="filter" placeholder="検索">
<template v-slot:append>
<template v-slot:append>
<q-icon name="search" />
</template>
</template>
</q-input>
</template>
<template v-slot:body-cell-actions="props">
<q-td :props="props">
<slot name="actions" :row="props.row"></slot>
@@ -27,6 +30,7 @@ const props = defineProps({
type: Boolean,
default: false,
},
title: String
});
const columns = [

View File

@@ -1,50 +1,58 @@
<template>
<div class="q-pa-sm">
<q-card class='domain-card'>
<q-card-section>
<div class="row items-center no-wrap">
<div class="col">
<div class="text-h6">{{ item.name }} <q-icon v-if="isNotOwnerFunc(item.id)" name="account_circle" color="teal" class="q-mb-xs"></q-icon> </div>
<div class="text-subtitle2">{{ item.url }}</div>
</div>
<!-- <div v-if="isNotOwnerFunc(item.id)" class="col-auto">
<q-icon name="account_circle" color="teal" size="2em"></q-icon>
</div> -->
<q-card :class="['domain-card', small ? 'small' : '']">
<q-card-section :class="[small ? 'q-py-sm' : '']">
<div class="row items-center no-wrap">
<div class="col">
<div :class="[small ? 'text-subtitle2' : 'text-h6']">{{ item.name }} <q-icon v-if="isNotOwnerFunc(item.id)" name="account_circle" color="teal" class="q-mb-xs"></q-icon> </div>
<div :class="[small ? 'text-caption' : 'text-subtitle2']">{{ item.url }}</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.kintoneuser }}</div>
</div>
<div v-if="isNotOwnerFunc(item.id)" class="col-auto">
<div class="text-grey-7 text-caption text-weight-medium">
所有者
</div>
<div class="smaller-font-size">{{ item.owner }}</div>
<!-- <div v-if="isNotOwnerFunc(item.id)" class="col-auto">
<q-icon name="account_circle" color="teal" size="2em"></q-icon>
</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.kintoneuser }}</div>
</div>
</q-card-section>
<q-separator />
<slot name="actions" :item="item"></slot>
</q-card>
</div>
<div v-if="isNotOwnerFunc(item.id)" class="col-auto">
<div class="text-grey-7 text-caption text-weight-medium">
所有者
</div>
<div class="smaller-font-size">{{ item.owner }}</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 } from 'vue';
import { defineProps, computed } from 'vue';
import { IDomain } from 'src/types/DomainTypes';
import { useAuthStore } from 'stores/useAuthStore';
const props = defineProps<{
item: IDomain;
isNotOwnerFunc: (ownerId: any) => boolean;
small: boolean;
}>();
const authStore = useAuthStore();
const isNotOwnerFunc = computed(() => (ownerId: string) => {
return ownerId == authStore.userId;
});
</script>
<style lang="scss" scoped>
.domain-card.small {
width: 18rem;
}
.domain-card {
width: 22rem;
word-break: break-word;