Add shared dialog

frontend/src/pages/TenantDomain.vue

@@ -19,7 +19,10 @@
 
       <template v-slot:body-cell-name="p">
         <q-td class="flex justify-between items-center" :props="p">
-          {{ p.row.name }}
+          <div>
+            {{ p.row.name }}
+            <!-- <q-icon class="q-ml-xs" title="共有中です" name="people" :color="p.row.domainActive ? 'grey-8' : 'grey-4'" /> -->
+          </div>
           <q-badge v-if="!p.row.domainActive" color="grey">未启用</q-badge>
           <q-badge v-if="p.row.id == currentDomainId" color="primary">現在</q-badge>
         </q-td>
@@ -29,6 +32,7 @@
         <q-td :props="p">
           <q-btn-group flat>
             <q-btn flat color="primary" padding="xs" size="1em" icon="edit_note" @click="editRow(p.row)" />
+            <q-btn flat color="primary" :disable="!p.row.domainActive" padding="xs" size="1em" icon="person_add_alt" @click="openShareDg(p.row)" />
             <q-btn flat color="negative" padding="xs" size="1em" icon="delete_outline" @click="removeRow(p.row)" />
           </q-btn-group>
         </q-td>
@@ -121,6 +125,8 @@
       </q-card>
     </q-dialog>
 
+    <share-domain-dialog v-model="shareDg" :domain="shareDomain" @close="closeShareDg()" />
+
   </div>
 </template>
 
@@ -129,6 +135,7 @@ import { ref, onMounted, computed } from 'vue';
 import { api } from 'boot/axios';
 import { useAuthStore } from 'stores/useAuthStore';
 import { useDomainStore } from 'stores/useDomainStore';
+import ShareDomainDialog from 'components/ShareDomain/ShareDomainDialog.vue';
 import { IDomain, IDomainDisplay, IDomainSubmit } from '../types/DomainTypes';
 
 const authStore = useAuthStore();
@@ -150,7 +157,7 @@ const columns = [
   { name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true, classes: inactiveRowClass },
   // { name: 'owner', label: '所有者', field: 'owner', align: 'left', classes: inactiveRowClass },
   { name: 'user', label: 'ログイン名', field: 'user', align: 'left', classes: inactiveRowClass },
-  { name: 'actions', label: '操作', field: 'actions' }
+  { name: 'actions', label: '操作', field: 'actions', classes: inactiveRowClass }
 ];
 
 const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 });
@@ -174,6 +181,8 @@ const domainActive = ref(true);
 const isCreate = ref(true);
 let editId = ref(0);
 let ownerid = ref('');
+const shareDg = ref(false);
+const shareDomain = ref<IDomainDisplay|object>({});
 
 const getDomain = async () => {
   loading.value = true;
@@ -209,7 +218,10 @@ const removeRow = (row: IDomainDisplay) => {
 }
 
 const deleteDomain = () => {
-  api.delete(`api/domain/${editId.value}`).then(() => {
+  api.delete(`api/domain/${editId.value}`).then(({ data }) => {
+    if (!data.data) {
+      // TODO dialog
+    }
     getDomain();
     // authStore.setCurrentDomain();
   })
@@ -266,6 +278,15 @@ const onSubmit = () => {
     })
 }
 
+const openShareDg = (row: IDomainDisplay) => {
+  shareDomain.value = row;
+  shareDg.value = true;
+};
+
+const closeShareDg = () => {
+  shareDg.value = false;
+}
+
 const onReset = () => {
   name.value = '';
   url.value = '';
@@ -283,5 +304,6 @@ const onReset = () => {
 <style lang="scss">
 .q-table td.inactive-row {
   color: #aaa;
+  background-color: #fafafa;
 }
 </style>