Add shared dialog

frontend/src/components/UserDomain/DomainCard.vue

@@ -0,0 +1,56 @@
+<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> -->
+        </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>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <slot name="actions" :item="item"></slot>
+    </q-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import { IDomain } from 'src/types/DomainTypes';
+
+const props = defineProps<{
+  item: IDomain;
+  isNotOwnerFunc: (ownerId: any) => boolean;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.domain-card {
+  width: 22rem;
+  word-break: break-word;
+
+  .smaller-font-size {
+    font-size: 13px;
+  }
+}
+</style>