Add shared dialog

frontend/src/components/ShareDomain/ShareDomainDialog.vue

@@ -0,0 +1,202 @@
+<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-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-select
+          :disable="loading"
+          filled
+          dense
+          v-model="canSharedUserFilter"
+          use-input
+          input-debounce="0"
+          :options="canSharedUserFilteredOptions"
+          clearable
+          @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 :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)" />
+          </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 = [];
+    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>