autoflow-web-console/src/components/atoms/organisms/ExecutionBaseDialog.vue

<script setup lang="ts">
import { ref, watch, computed, defineProps, defineEmits } from "vue";

const props = defineProps<{
  modelValue: boolean;
  mode: "create" | "edit" | "clone";
  selectedData: any;
  workflowList: string[];
  executionTypes: string[];
}>();

const emit = defineEmits<{
  (e: "update:modelValue", v: boolean): void;
  (e: "save", payload: any): void;
}>();

// 로컬 state
const internalWorkflow = ref(props.selectedData?.workflow || "");
const internalExecType = ref(props.selectedData?.execType || "");
const internalName = ref(props.selectedData?.name || "");
const internalDesc = ref(props.selectedData?.description || "");
const internalExperiment = ref(props.selectedData?.experiment || "");

// 다이얼로그 열릴 때 복사
watch(
  () => props.modelValue,
  (open) => {
    if (open && props.selectedData) {
      internalWorkflow.value = props.selectedData.workflow;
      internalExecType.value = props.selectedData.execType;
      internalName.value = props.selectedData.name;
      internalDesc.value = props.selectedData.description;
      internalExperiment.value = props.selectedData.experiment;
    }
  },
);

// 다이얼로그 타이틀
const dialogTitle = computed(() => {
  if (props.mode === "create") return "Create Execution";
  if (props.mode === "edit") return "Edit Execution";
  return "Clone Execution";
});

function onSave() {
  emit("save", {
    workflow: internalWorkflow.value,
    execType: internalExecType.value,
    name: internalName.value,
    description: internalDesc.value,
    experiment: internalExperiment.value,
  });
  emit("update:modelValue", false);
}
function onClose() {
  emit("update:modelValue", false);
}
</script>

<template>
  <v-card flat>
    <!-- 툴바 -->
    <v-toolbar flat color="primary" dark>
      <v-toolbar-title>{{ dialogTitle }}</v-toolbar-title>
      <v-spacer />
      <v-btn icon @click="onClose"><v-icon>mdi-close</v-icon></v-btn>
    </v-toolbar>
    <v-divider />

    <!-- 본문 -->
    <v-card-text class="white--text pa-6">
      <!-- Workflow Information 헤더 -->
      <v-card-subtitle class="white--text mb-4"
        >Workflow Information</v-card-subtitle
      >

      <v-row dense class="mb-6">
        <v-col cols="6">
          <v-subheader class="font-weight-medium white--text mb-2">
            Select Workflow
          </v-subheader>
          <v-select
            v-model="internalWorkflow"
            :items="workflowList"
            dense
            hide-details
            outlined
            style="background: #1e1e1e; color: #fff"
          />
        </v-col>
        <v-col cols="6">
          <v-subheader class="font-weight-medium white--text mb-2">
            Execution Type
          </v-subheader>
          <v-select
            v-model="internalExecType"
            :items="executionTypes"
            dense
            hide-details
            outlined
            style="background: #1e1e1e; color: #fff"
          />
        </v-col>
      </v-row>

      <!-- Execution Name -->
      <v-row dense class="mb-6">
        <v-col cols="12">
          <v-subheader class="font-weight-medium white--text mb-2">
            Execution Type
          </v-subheader>

          <v-text-field
            v-model="internalName"
            dense
            hide-details
            style="background: #1e1e1e; color: #fff"
          />
        </v-col>
      </v-row>

      <!-- Description -->
      <v-row dense class="mb-6">
        <v-col cols="12">
          <v-subheader class="font-weight-medium white--text mb-2">
            Description
          </v-subheader>

          <v-text-field
            v-model="internalName"
            dense
            hide-details
            style="background: #1e1e1e; color: #fff"
          />
        </v-col>
      </v-row>

      <!-- Experiment -->
      <v-row dense class="mb-6">
        <v-col cols="12">
          <v-subheader class="font-weight-medium white--text mb-2">
            Experiment
          </v-subheader>

          <v-text-field
            v-model="internalName"
            dense
            hide-details
            style="background: #1e1e1e; color: #fff"
          />
        </v-col>
      </v-row>
    </v-card-text>

    <!-- 액션 -->
    <v-card-actions class="justify-end pa-4">
      <v-btn color="success" @click="onSave">Start</v-btn>
      <v-btn text class="white--text" @click="onClose">Close</v-btn>
    </v-card-actions>
  </v-card>
</template>