alicorn-dev/KintoneAppBuilder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add delete hint

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/Domain/ShareDomainDialog.vue
View File

@@ -7,12 +7,6 @@
<slot name="toolbar"></slot> <slot name="toolbar"></slot>
<q-btn flat round dense icon="close" @click="close" /> <q-btn flat round dense icon="close" @click="close" />
</q-toolbar> </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-card-section>
<!-- <q-select <!-- <q-select
filled filled

20
frontend/src/components/ShareDomain/ShareDomainDialog.vue
View File

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

12
frontend/src/components/ShareDomain/SharingUserList.vue
View File

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

72
frontend/src/components/UserDomain/DomainCard.vue
View File

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

29
frontend/src/pages/TenantDomain.vue
View File

@@ -113,14 +113,23 @@
<q-dialog v-model="confirm" persistent> <q-dialog v-model="confirm" persistent>
<q-card> <q-card>
<q-card-section class="row items-center"> <q-card-section v-if="deleteLoadingState == -1" class="row items-center">
<q-spinner color="primary" size="2em"/>
<span class="q-ml-sm">共有ユーザーのチェック</span>
</q-card-section>
<q-card-section v-else-if="deleteLoadingState == 0" class="row items-center">
<q-icon name="warning" color="warning" size="2em" /> <q-icon name="warning" color="warning" size="2em" />
<span class="q-ml-sm">削除してもよろしいですか？</span> <span class="q-ml-sm">削除してもよろしいですか？</span>
</q-card-section> </q-card-section>
<q-card-section v-else class="row items-center">
<q-icon name="error" color="negative" size="2em" />
<span class="q-ml-sm">共有ユーザーが存在し、キャンセルする必要がある</span>
</q-card-section>
<q-card-actions align="right"> <q-card-actions align="right">
<q-btn flat label="Cancel" color="primary" v-close-popup /> <q-btn flat label="Cancel" color="primary" v-close-popup />
<q-btn flat label="OK" color="primary" v-close-popup @click="deleteDomain()" /> <q-btn v-if="deleteLoadingState > 0" label="処理に行く" color="primary" v-close-popup @click="openShareDg(editId)" />
<q-btn flat v-else label="OK" :disabled="deleteLoadingState" color="primary" v-close-popup @click="deleteDomain()" />
</q-card-actions> </q-card-actions>
</q-card> </q-card>
</q-dialog> </q-dialog>
@@ -163,6 +172,8 @@ const columns = [
const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 }); const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 });
const loading = ref(false); const loading = ref(false);
const addEditLoading = ref(false); const addEditLoading = ref(false);
const deleteLoadingState = ref<number>(-1); // -1: loading, 0: allow, > 0: user count
const filter = ref(''); const filter = ref('');
const rows = ref<IDomainDisplay[]>([]); const rows = ref<IDomainDisplay[]>([]);
const show = ref(false); const show = ref(false);
@@ -212,9 +223,13 @@ const addRow = () => {
show.value = true; show.value = true;
} }
const removeRow = (row: IDomainDisplay) => { const removeRow = async (row: IDomainDisplay) => {
confirm.value = true; confirm.value = true;
deleteLoadingState.value = -1;
editId.value = row.id; editId.value = row.id;
const { data } = await api.get(`/api/domainshareduser/${row.id}`);
deleteLoadingState.value = data.data.length;
} }
const deleteDomain = () => { const deleteDomain = () => {
@@ -226,6 +241,7 @@ const deleteDomain = () => {
// authStore.setCurrentDomain(); // authStore.setCurrentDomain();
}) })
editId.value = 0; // set in removeRow() editId.value = 0; // set in removeRow()
deleteLoadingState.value = -1;
}; };
const editRow = (row) => { const editRow = (row) => {
@@ -278,8 +294,11 @@ const onSubmit = () => {
}) })
} }
const openShareDg = (row: IDomainDisplay) => { const openShareDg = (row: IDomainDisplay|number) => {
shareDomain.value = row; if (typeof row === 'number') {
row = rows.value.find(item => item.id === row) as IDomainDisplay;
}
shareDomain.value = row ;
shareDg.value = true; shareDg.value = true;
}; };

24
frontend/src/pages/UserDomain.vue
View File

@@ -28,17 +28,19 @@
</template> </template>
<template v-slot:item="props"> <template v-slot:item="props">
<domain-card :item="props.row" :isNotOwnerFunc="isNotOwner"> <div class="q-pa-sm">
<template v-slot:actions> <domain-card :item="props.row">
<q-card-actions align="right"> <template v-slot:actions>
<q-chip v-if="isActive(props.row.id)" outline color="teal" text-color="white" icon="done"> <q-card-actions align="right">
既定 <q-chip v-if="isActive(props.row.id)" outline color="teal" text-color="white" icon="done">
</q-chip> 既定
<q-btn flat v-else :loading="activeDomainLoadingId === props.row.id" :disable="deleteDomainLoadingId === props.row.id" @click="activeDomain(props.row)">既定にする</q-btn> </q-chip>
<q-btn flat :disable="isNotOwner(props.row.id) || activeDomainLoadingId === props.row.id" :text-color="isNotOwner(props.row.id)?'grey':''" :loading="deleteDomainLoadingId === props.row.id" @click="clickDeleteConfirm(props.row)">削除</q-btn> <q-btn flat v-else :loading="activeDomainLoadingId === props.row.id" :disable="deleteDomainLoadingId === props.row.id" @click="activeDomain(props.row)">既定にする</q-btn>
</q-card-actions> <q-btn flat :disable="isNotOwner(props.row.id) || activeDomainLoadingId === props.row.id" :text-color="isNotOwner(props.row.id)?'grey':''" :loading="deleteDomainLoadingId === props.row.id" @click="clickDeleteConfirm(props.row)">削除</q-btn>
</template> </q-card-actions>
</domain-card> </template>
</domain-card>
</div>
</template> </template>
</q-table> </q-table>