hrms-mgt/src/modules/05_placement/components/PersonalList/DialogFooter.vue

<script setup lang="ts">
/** รับค่ามาจากหน้าหลัก */
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",
]);

/**
 * ฟังชั่น update
 * @param value true/false
 */
function updateEdit(value: Boolean) {
  emit("update:editvisible", value);
}

/** update edit */
async function edit() {
  updateEdit(!props.editvisible);
  props.edit();
}

/** save */
function checkSave() {
  props.validate();
  props.save();
}
</script>
<template>
  <q-card-actions class="text-primary">
    <q-space />
    <q-btn
      v-if="!editvisible"
      outline
      :disabled="editvisible"
      :color="editvisible ? 'grey-7' : 'primary'"
      @click="edit"
    >
    </q-btn>

    <div v-else>
      <q-btn
        unelevated
        label="บันทึก"
        :disabled="!editvisible"
        :color="!editvisible ? 'grey-7' : 'public'"
        @click="checkSave"
      >
      </q-btn>
    </div>
  </q-card-actions>
</template>