KintoneAppBuilder/frontend/src/components/ShareDomain/ShareDomainDialog.vue

<template>
  <q-dialog :auto-close="false" :model-value="visible" persistent bordered>
    <q-card class="dialog-content" >
      <q-toolbar class="bg-grey-4">
        <q-toolbar-title>「{{domain.name}}」のドメインを共有する</q-toolbar-title>
        <q-btn flat round dense icon="close" @click="close" />
      </q-toolbar>

      <q-card-section class="q-mx-md " >
        <q-select
          class="q-mt-md"
          :disable="loading"
          filled
          dense
          v-model="canSharedUserFilter"
          use-input
          input-debounce="0"
          :options="canSharedUserFilteredOptions"
          clearable
          :placeholder="canSharedUserFilter ? '' : '共有するユーザーを選択'"
          @filter="filterFn"
          :display-value="canSharedUserFilter?`${canSharedUserFilter.fullName} （${canSharedUserFilter.email}）`:''">

          <template v-slot:after>
            <q-btn :disable="!canSharedUserFilter" :loading="addLoading" label="共有する" color="primary" @click="shareTo(canSharedUserFilter as IUserDisplay)" />
          </template>

          <template v-slot:option="scope">
            <q-item v-bind="scope.itemProps">
              <q-item-section avatar>{{scope.opt.id}}</q-item-section>
              <q-item-section>{{scope.opt.fullName}}</q-item-section>
              <q-item-section>{{scope.opt.email}}</q-item-section>
            </q-item>
          </template>
        </q-select>
        <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)" />
          </template>
        </sharing-user-list>
      </q-card-section>

      <q-card-actions align="right" class="text-primary">
        <q-btn flat label="確定" @click="close" />
        <q-btn flat label="キャンセル" @click="close" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { IDomainDisplay } from '../../types/DomainTypes';
import { IUser, IUserDisplay } from '../../types/UserTypes';
import { api } from 'boot/axios';
import SharingUserList from 'components/ShareDomain/SharingUserList.vue';

interface Props {
  modelValue: boolean;
  domain: IDomainDisplay;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void;
  (e: 'close'): void;
}>();

const addLoading = ref(false);
const removingUser = ref<IUserDisplay>();
const loading = ref(true);
const visible = ref(props.modelValue);

const allUsers = ref<IUserDisplay[]>([]);
const sharedUsers = ref<IUserDisplay[]>([]);
const sharedUsersIdSet = new Set<number>();

const canSharedUsers = ref<IUserDisplay[]>([]);
const canSharedUserFilter = ref<IUserDisplay>();
const canSharedUserFilteredOptions = ref<IUserDisplay[]>([]);

const filterFn = (val:string, update: (cb: () => void) => void) => {
  update(() => {
    if (val === '') {
      canSharedUserFilteredOptions.value = canSharedUsers.value;
      return;
    }
    const needle = val.toLowerCase();
    canSharedUserFilteredOptions.value = canSharedUsers.value.filter(v =>
      v.email.toLowerCase().indexOf(needle) > -1 || v.fullNameSearch.toLowerCase().indexOf(needle) > -1);
  })
}

watch(
  () => props.modelValue,
  async (newValue) => {
    visible.value = newValue;
    sharedUsers.value = [];
    canSharedUserFilter.value = undefined
    if (newValue) {
      await loadShared();
    }
  }
);

watch(
  () => visible.value,
  (newValue) => {
    emit('update:modelValue', newValue);
  }
);

const close = () => {
  emit('close');
};

const shareTo = async (user: IUserDisplay) => {
  addLoading.value = true;
  loading.value = true;
  await api.post(`api/domain/${user.id}?domainid=${props.domain.id}`)
  await loadShared();
  canSharedUserFilter.value = undefined;
  loading.value = false;
  addLoading.value = false;
}

const removeShareTo = async (user: IUserDisplay) => {
  removingUser.value = user;
  loading.value = true;
  await api.delete(`api/domain/${props.domain.id}/${user.id}`)
  await loadShared();
  loading.value = false;
  removingUser.value = undefined;
};

const loadShared = async () => {
  loading.value = true;
  sharedUsersIdSet.clear();

  const { data } = await api.get(`/api/domainshareduser/${props.domain.id}`);
  sharedUsers.value = data.data.map((item: IUser) => {
    const val = itemToDisplay(item);
    sharedUsersIdSet.add(val.id);
    return val;
  });

  canSharedUsers.value = allUsers.value.filter((item) => !sharedUsersIdSet.has(item.id));
  canSharedUserFilteredOptions.value = canSharedUsers.value;

  loading.value = false;
}

onMounted(async () => {
  await getUsers();
})

const getUsers = async () => {
  if (Object.keys(allUsers.value).length > 0) {
    return;
  }
  loading.value = true;
  const result = await api.get(`api/v1/users`);
  allUsers.value = result.data.map(itemToDisplay);
  loading.value = false;
}

const itemToDisplay = (item: IUser) => {
  return {
    id: item.id,
    firstName: item.first_name,
    lastName: item.last_name,
    fullNameSearch: (item.last_name + item.first_name).toLowerCase(),
    fullName: item.last_name + ' ' + item.first_name,
    email: item.email,
    isSuperuser: item.is_superuser,
    roles: item.roles,
    isActive: item.is_active,
  } as IUserDisplay
}
</script>

<style lang="scss">
.dialog-content {
  width: 60vw;
  max-height: 80vh;
  .q-select {
    min-width: 0 !important;
  }
}

</style>