vmall/apps/admin/components/MemberLevelForm.vue

<script setup lang="ts">
import { reactive, watch } from "vue";

/**
 * Bilingual create/edit form for one membership level. The draft object is the
 * single editable surface; it reports the whole draft on change so the page owns
 * draft persistence.
 */
interface LevelDraftFields {
  nameEn: string;
  nameZh: string;
  icon: string;
  growthThreshold: number;
  benefitsEn: string;
  benefitsZh: string;
}

const props = withDefaults(
  defineProps<
    LevelDraftFields & {
      title: string;
      /** Namespaces the test hooks so several forms can coexist on one page. */
      scope: string;
      hint?: string;
      error?: string;
      busy?: boolean;
      submitLabel: string;
    }
  >(),
  { hint: "", error: "", busy: false },
);

const emit = defineEmits<{
  (e: "submit"): void;
  (e: "change", value: LevelDraftFields): void;
}>();

// `type="number"` inputs hand back a string through v-model; normalize to the
// contract's integer growth value when reporting the draft.
const draft = reactive({
  nameEn: props.nameEn,
  nameZh: props.nameZh,
  icon: props.icon,
  growthThreshold: String(props.growthThreshold),
  benefitsEn: props.benefitsEn,
  benefitsZh: props.benefitsZh,
});

watch(
  () => [
    props.nameEn,
    props.nameZh,
    props.icon,
    props.growthThreshold,
    props.benefitsEn,
    props.benefitsZh,
  ],
  () => {
    draft.nameEn = props.nameEn;
    draft.nameZh = props.nameZh;
    draft.icon = props.icon;
    draft.growthThreshold = String(props.growthThreshold);
    draft.benefitsEn = props.benefitsEn;
    draft.benefitsZh = props.benefitsZh;
  },
);

watch(
  draft,
  () => {
    emit("change", {
      nameEn: draft.nameEn,
      nameZh: draft.nameZh,
      icon: draft.icon,
      growthThreshold: Number(draft.growthThreshold),
      benefitsEn: draft.benefitsEn,
      benefitsZh: draft.benefitsZh,
    });
  },
  { deep: true },
);
</script>

<template>
  <VPanel :title="props.title">
    <p v-if="props.hint" class="text-muted mb-4 text-sm">{{ props.hint }}</p>
    <div class="grid gap-3 md:grid-cols-3">
      <VField :label="$t('admin.memberLevelNameEn')">
        <VInput
          v-model="draft.nameEn"
          :data-testid="`ml-${props.scope}-name-en`"
          required
          :disabled="props.busy"
        />
      </VField>
      <VField :label="$t('admin.memberLevelNameZh')">
        <VInput
          v-model="draft.nameZh"
          :data-testid="`ml-${props.scope}-name-zh`"
          required
          :disabled="props.busy"
        />
      </VField>
      <VField :label="$t('admin.memberLevelIcon')">
        <VInput
          v-model="draft.icon"
          :data-testid="`ml-${props.scope}-icon`"
          required
          :disabled="props.busy"
        />
      </VField>
      <VField :label="$t('admin.memberLevelGrowth')">
        <VInput
          v-model="draft.growthThreshold"
          :data-testid="`ml-${props.scope}-growth`"
          type="number"
          min="0"
          step="1"
          required
          :disabled="props.busy"
        />
      </VField>
      <VField :label="$t('admin.memberLevelBenefitsEn')">
        <VInput
          v-model="draft.benefitsEn"
          :data-testid="`ml-${props.scope}-benefits-en`"
          required
          :disabled="props.busy"
        />
      </VField>
      <VField :label="$t('admin.memberLevelBenefitsZh')">
        <VInput
          v-model="draft.benefitsZh"
          :data-testid="`ml-${props.scope}-benefits-zh`"
          required
          :disabled="props.busy"
        />
      </VField>
    </div>
    <p v-if="props.error" class="text-danger my-2 text-sm" role="alert">{{ props.error }}</p>
    <VBtn
      variant="primary"
      :data-testid="`ml-${props.scope}-submit`"
      :disabled="props.busy"
      @click="emit('submit')"
    >
      {{ props.busy ? $t("common.loading") : props.submitLabel }}
    </VBtn>
  </VPanel>
</template>