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">
+  <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>
+    <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">
+        <div class="q-gutter-sm">
-        <q-btn color="primary" label="追加" @click="newDomain()" dense />
+          <q-btn class="q-mx-none" color="primary" label="追加" @click="newDomain()" />
-      </div>
+        </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,40 +24,49 @@ 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%;">
-              <q-btn flat @click = "deleteConfirm(props.row)">削除</q-btn>
+                <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>
+      <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">
-          <span class="q-ml-sm">削除してもよろしいですか？</span>
+            <q-icon name="warning" color="warning" size="2em" />
+            <span class="q-ml-sm">削除してもよろしいですか？</span>
+          </div>
         </q-card-section>
 
         <q-card-actions align="right">
           <q-btn flat label="Cancel" color="primary" v-close-popup />
-          <q-btn flat label="OK" color="primary" v-close-popup @click = "deleteDomain()"/>
+          <q-btn flat label="OK" color="primary" v-close-popup @click="deleteDomain()" />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -171,40 +74,36 @@ export default {
 </template>
 
 <script setup lang="ts">
-import { useQuasar } from 'quasar'
+import { ref, onMounted } from 'vue'
-import { ref, onMounted, reactive } 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);
 
 const columns = [
-{ name: 'id'},
+  { name: 'id' },
-  {name: 'name',required: true,label: 'Name',align: 'left',field: 'name',sortable: true},
+  { name: 'name', required: true, label: 'Name', align: 'left', field: 'name', sortable: true },
   { name: 'url', align: 'center', label: 'Domain', field: 'url', sortable: true },
   { name: 'kintoneuser', label: 'User', field: 'kintoneuser', sortable: true },
   { name: 'kintonepwd' },
-  { name: 'active', field: 'active'}
+  { name: 'active', field: 'active' }
 ]
 
 const rows = ref([] as any[]);
 
-const isActive = (id:number) =>{
+const isActive = (id: number) => {
-  if(id == activedomainid.value)
+  if (id == activedomainid.value)
     return "Active";
   else
     return "Inactive";
@@ -216,55 +115,48 @@ const newDomain = () => {
 };
 
 
-const activeDomain = (id:number) => {
+const activeDomain = (id: number) => {
-  api.put(`api/activedomain/`+ id).then(() =>{
+  api.put(`api/activedomain/` + id).then(() => {
-            getDomain();
+    getDomain();
-          })
+  })
 };
 
-const deleteConfirm = (row:object) => {
+const deleteConfirm = (row: object) => {
   confirm.value = true;
   editId.value = row.id;
 };
 
 const deleteDomain = () => {
-  api.delete(`api/domain/`+ editId.value+'/1').then(() =>{
+  console.log(authStore.getCurrentDomain);
-            getDomain();
+
-          })
+  api.delete(`api/domain/${editId.value}/${authStore.userId}`).then(() => {
+    getDomain();
+  })
   editId.value = 0;
 };
 
-const closeDg = (val:string) => {
+const closeDg = (val: string) => {
   if (val == 'OK') {
-    let dodmainids =[];
+    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(); });
   }
 
 };
 const getDomain = async () => {
-   const  resp = await api.get(`api/activedomain`);
+  const resp = await api.get(`api/activedomain`);
-   activedomainid.value = resp.data.id;
+  activedomainid.value = resp.data.id;
-   const domainResult = await api.get(`api/domain`);
+  const domainResult = await api.get(`api/domain`);
-   const domains = domainResult.data as any[];
+  const domains = domainResult.data as any[];
-   rows.value=domains.map((item)=>{
+  rows.value = domains.map((item) => {
-      return { id:item.id,name: item.name, url: item.url, kintoneuser: item.kintoneuser, kintonepwd: item.kintonepwd}
+    return { id: item.id, name: item.name, url: item.url, kintoneuser: item.kintoneuser, kintonepwd: item.kintonepwd }
-    });
+  });
 }
 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>
-
-
-