เพิ่ม icon

src/modules/03_recruiting/views/01_compete/Period.vue

@@ -431,59 +431,81 @@ onMounted(async () => {
         :titleText="''"
       >
         <template #columns="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td>
+          <q-tr :props="props">
+            <q-td auto-width>
               <q-btn
+                icon="mdi-dots-horizontal-circle-outline"
+                color="secondary"
+                flat
+                round
+                dense
                 v-if="
-                  checkPermission($route)?.attrIsUpdate &&
-                  checkPermission($route)?.attrIsGet
+                  checkPermission($route)?.attrIsCreate ||
+                  checkPermission($route)?.attrIsDelete ||
+                  checkPermission($route)?.attrIsGet ||
+                  checkPermission($route)?.attrIsUpdate
                 "
-                dense
-                size="12px"
-                flat
-                round
-                color="primary"
-                @click="clickEditPeriod(props.row.id)"
-                icon="mdi-pencil-outline"
               >
-                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-              </q-btn>
-              <q-btn
-                v-if="checkPermission($route)?.attrIsDelete"
-                dense
-                size="12px"
-                flat
-                round
-                color="red"
-                @click="clickDelete(props.row.id)"
-                icon="mdi-delete"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
-              </q-btn>
+                <q-menu transition-show="jump-down" transition-hide="jump-up">
+                  <q-list dense style="min-width: 100px">
+                    <q-item
+                      v-if="checkPermission($route)?.attrIsGet"
+                      clickable
+                      v-close-popup
+                      @click="clickDetail(props.row.id)"
+                    >
+                      <q-item-section style="min-width: 0px" avatar>
+                        <q-icon color="info" size="xs" name="mdi-eye" />
+                      </q-item-section>
+                      <q-item-section>รายละเอียด</q-item-section>
+                    </q-item>
 
-              <q-btn
-                v-if="checkPermission($route)?.attrIsGet"
-                color="info"
-                flat
-                dense
-                round
-                size="12px"
-                icon="mdi-history"
-                @click="clickHistory(props.row.id)"
-              >
-                <q-tooltip>แสดงประวัติการทำงาน</q-tooltip>
+                    <q-item
+                      v-if="
+                        checkPermission($route)?.attrIsUpdate &&
+                        checkPermission($route)?.attrIsGet
+                      "
+                      clickable
+                      v-close-popup
+                      @click="clickEditPeriod(props.row.id)"
+                    >
+                      <q-item-section style="min-width: 0px" avatar>
+                        <q-icon color="edit" size="xs" name="mdi-pencil" />
+                      </q-item-section>
+                      <q-item-section>แก้ไขข้อมูล</q-item-section>
+                    </q-item>
+
+                    <q-item
+                      v-if="checkPermission($route)?.attrIsDelete"
+                      clickable
+                      v-close-popup
+                      @click="clickDelete(props.row.id)"
+                    >
+                      <q-item-section style="min-width: 0px" avatar>
+                        <q-icon color="red" size="xs" name="mdi-delete" />
+                      </q-item-section>
+                      <q-item-section>ลบข้อมูล</q-item-section>
+                    </q-item>
+                    <q-item
+                      v-if="checkPermission($route)?.attrIsGet"
+                      clickable
+                      v-close-popup
+                      @click="clickHistory(props.row.id)"
+                    >
+                      <q-item-section style="min-width: 0px" avatar>
+                        <q-icon
+                          color="deep-purple"
+                          size="xs"
+                          name="mdi-history"
+                        />
+                      </q-item-section>
+                      <q-item-section>แสดงประวัติการทำงาน</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
               </q-btn>
             </q-td>
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="
-                checkPermission($route)?.attrIsGet
-                  ? clickDetail(props.row.id)
-                  : undefined
-              "
-            >
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
               </div>