userdomain ページの最適化

frontend/src/pages/UserDomain.vue

@@ -1,127 +1,21 @@
-<!-- <template>
-  <div class="q-pa-md" style="max-width: 400px">
-
-    <q-form
-      @submit="onSubmit"
-      @reset="onReset"
-      class="q-gutter-md"
-    >
-      <q-input
-        filled
-        v-model="name"
-        label="Your name *"
-        hint="Kintone envirment name"
-        lazy-rules
-        :rules="[ val => val && val.length > 0 || 'Please type something']"
-      />
-
-      <q-input
-        filled type="url"
-        v-model="url"
-        label="Kintone url"
-        hint="Kintone domain address"
-        lazy-rules
-        :rules="[ val => val && val.length > 0,isDomain || 'Please type something']"
-      />
-
-      <q-input
-        filled
-        v-model="username"
-        label="Login user "
-        hint="Kintone user name"
-        lazy-rules
-        :rules="[ val => val && val.length > 0 || 'Please type something']"
-      />
-
-      <q-input v-model="password" filled :type="isPwd ? 'password' : 'text'" hint="Password with toggle" label="User password">
-        <template v-slot:append>
-          <q-icon
-            :name="isPwd ? 'visibility_off' : 'visibility'"
-            class="cursor-pointer"
-            @click="isPwd = !isPwd"
-          />
-        </template>
-      </q-input>
-
-      <q-toggle v-model="accept" label="Active Domain" />
-
-      <div>
-        <q-btn label="Submit" type="submit" color="primary"/>
-        <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
-      </div>
-    </q-form>
-
-  </div>
-</template>
-<script>
-import { useQuasar } from 'quasar'
-import { ref } from 'vue'
-
-export default {
-  setup () {
-    const $q = useQuasar()
-
-    const name = ref(null)
-    const age = ref(null)
-    const accept = ref(false)
-    const isPwd =ref(true)
-
-    return {
-      name,
-      age,
-      accept,
-      isPwd,
-      isDomain(val) {
-       const domainPattern = /^https?\/\/:([a-zA-Z] +\.){1}([a-zA-Z]+)\.([a-zA-Z]+)$/;
-       return (domainPattern.test(val) || '無効なURL')
-    },
-
-      onSubmit () {
-        if (accept.value !== true) {
-          $q.notify({
-            color: 'red-5',
-            textColor: 'white',
-            icon: 'warning',
-            message: 'You need to accept the license and terms first'
-          })
-        }
-        else {
-          $q.notify({
-            color: 'green-4',
-            textColor: 'white',
-            icon: 'cloud_done',
-            message: 'Submitted'
-          })
-        }
-      },
-
-      onReset () {
-        name.value = null
-        age.value = null
-        accept.value = false
-      }
-    }
-  }
-}
-</script> -->
-
-
 <template>
-  <div class="q-pa-md">
-     <q-table grid grid-header title="Domain" selection="single" :rows="rows" :columns="columns"   v-model:selected="selected" row-key="name" :filter="filter" hide-header>
+  <div class="q-pa-lg">
+    <q-table grid grid-header title="Domain" selection="single" :rows="rows" :columns="columns"
+      v-model:selected="selected" row-key="name" :filter="filter" hide-header>
       <template v-slot:top>
-        <div class="q-pa-md q-gutter-sm">
-        <q-btn color="primary" label="追加" @click="newDomain()" dense />
+        <div class="q-gutter-sm">
+          <q-btn class="q-mx-none" color="primary" label="追加" @click="newDomain()" />
         </div>
         <q-space />
-        <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
+        <q-input borderless dense filled debounce="300" v-model="filter" placeholder="Search">
           <template v-slot:append>
             <q-icon name="search" />
           </template>
         </q-input>
       </template>
+
       <template v-slot:item="props">
-        <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
+        <div class="q-pa-sm">
           <q-card>
             <q-card-section>
               <div class="q-table__grid-item-row">
@@ -130,35 +24,44 @@ export default {
               </div>
               <div class="q-table__grid-item-row">
                 <div class="q-table__grid-item-title">URL</div>
-                <div class="q-table__grid-item-value">{{ props.row.url }}</div>
+                <div class="q-table__grid-item-value" style="width: 22rem;">{{ props.row.url }}</div>
               </div>
               <div class="q-table__grid-item-row">
                 <div class="q-table__grid-item-title">Account</div>
                 <div class="q-table__grid-item-value">{{ props.row.kintoneuser }}</div>
               </div>
-              <div class="q-table__grid-item-row">
-                <div class="q-table__grid-item-value">{{isActive(props.row.id) }}</div>
-              </div>
             </q-card-section>
             <q-separator />
             <q-card-actions align="right">
-              <q-btn flat @click = "activeDomain(props.row.id)">有効</q-btn>
+              <div style="width: 98%;">
+                <div class="row items-center justify-between">
+                  <div class="q-table__grid-item-value"
+                    :class="isActive(props.row.id) === 'Active' ? 'text-positive' : 'text-negative'">{{
+                      isActive(props.row.id) }}</div>
+                  <div class="col-auto">
+                    <q-btn v-if="isActive(props.row.id) !== 'Active'" flat
+                      @click="activeDomain(props.row.id)">有効</q-btn>
                     <q-btn flat @click="deleteConfirm(props.row)">削除</q-btn>
+                  </div>
+                </div>
+              </div>
             </q-card-actions>
           </q-card>
         </div>
       </template>
     </q-table>
 
-    <show-dialog v-model:visible="show" name="ドメイン" @close="closeDg" width="350px">
+    <show-dialog v-model:visible="show" name="ドメイン" @close="closeDg">
       <domain-select ref="domainDg" name="ドメイン" type="multiple"></domain-select>
     </show-dialog>
 
     <q-dialog v-model="confirm" persistent>
       <q-card>
         <q-card-section class="row items-center">
-          <q-avatar icon="confirm" color="primary" text-color="white" />
+          <div class="q-ma-sm q-mt-md">
+            <q-icon name="warning" color="warning" size="2em" />
             <span class="q-ml-sm">削除してもよろしいですか？</span>
+          </div>
         </q-card-section>
 
         <q-card-actions align="right">
@@ -171,23 +74,19 @@ export default {
 </template>
 
 <script setup lang="ts">
-import { useQuasar } from 'quasar'
-import { ref, onMounted, reactive } from 'vue'
+import { ref, onMounted } from 'vue'
 import ShowDialog from 'components/ShowDialog.vue';
 import DomainSelect from 'components/DomainSelect.vue';
 import { useAuthStore } from 'stores/useAuthStore';
 
 const authStore = useAuthStore();
 import { api } from 'boot/axios';
-import { domain } from 'process';
-
-const $q = useQuasar()
-
 const domainDg = ref();
 const selected = ref([])
 
 const show = ref(false);
 const confirm = ref(false)
+const filter = ref()
 
 let editId = ref(0);
 let activedomainid = ref(0);
@@ -228,7 +127,9 @@ const deleteConfirm = (row:object) => {
 };
 
 const deleteDomain = () => {
-  api.delete(`api/domain/`+ editId.value+'/1').then(() =>{
+  console.log(authStore.getCurrentDomain);
+
+  api.delete(`api/domain/${editId.value}/${authStore.userId}`).then(() => {
     getDomain();
   })
   editId.value = 0;
@@ -238,11 +139,10 @@ const closeDg = (val:string) => {
   if (val == 'OK') {
     let dodmainids = [];
     let domains = JSON.parse(JSON.stringify(domainDg.value.selected));
-    for(var key in domains)
-    {
+    for (var key in domains) {
       dodmainids.push(domains[key].id);
     }
-    api.post(`api/domain`, dodmainids).then(() =>{getDomain();});
+    api.post(`api/domain/${authStore.userId}`, dodmainids).then(() => { getDomain(); });
   }
 
 };
@@ -259,12 +159,4 @@ onMounted(async () => {
   await getDomain();
 })
 
-const isDomain = (val) =>{
-      //  const domainPattern = /^https\/\/:([a-zA-Z] +\.){1}([a-zA-Z]+)\.([a-zA-Z]+)$/;
-      //  return (domainPattern.test(val) || '無効なURL')
-      return true;
-    };
 </script>
-
-
-