update UI - แสดงรายชื่อผู้สอบผ่านในรอบของการสอบคัดเลือก/แข่งขันที่ได้จากระบบ

ปรับในส่วนของการแสดงผลข้อมูลให้ครบตาม design
ปรับให้เป็นหน้าฟอร์มกรณีอยู่ในโหมดแก้ไข
ปรับการแสดงสถานะและ Action ให้ถกต้อง

src/modules/05_placement/components/pass/DialogFooter.vue

@@ -0,0 +1,61 @@
+<template>
+  <q-card-actions class="text-primary">
+    <q-space />
+    <q-btn v-if="!editvisible" flat round :disabled="editvisible" :color="editvisible ? 'grey-7' : 'primary'"
+      @click="edit" icon="mdi-pencil-outline">
+      <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+    </q-btn>
+    <div v-else>
+
+      <q-btn flat round :disabled="!editvisible" :color="!editvisible ? 'grey-7' : 'public'" @click="checkSave"
+        icon="mdi-content-save-outline">
+        <q-tooltip>บันทึก</q-tooltip>
+      </q-btn>
+    </div>
+  </q-card-actions>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+
+const props = defineProps({
+  editvisible: Boolean,
+  modalEdit: Boolean,
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  edit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const emit = defineEmits([
+  "update:editvisible",
+  "update:next",
+  "update:previous",
+]);
+
+const updateEdit = (value: Boolean) => {
+  emit("update:editvisible", value);
+};
+const cancel = async () => {
+  props.cancel();
+};
+const edit = async () => {
+  updateEdit(!props.editvisible);
+  props.edit();
+};
+const checkSave = () => {
+  props.validate();
+  props.save();
+
+};
+</script>