riwa-ionic/src/views/issue/issuing-apply/base.vue

<script lang='ts' setup>
import type { GenericObject } from "vee-validate";
import type { RwaIssuanceCategoriesData, RwaIssuanceProductBody } from "@/api/types";
import { toTypedSchema } from "@vee-validate/yup";
import { ErrorMessage, Field, Form } from "vee-validate";
import { useI18n } from "vue-i18n";
import * as yup from "yup";

const props = defineProps<{
  initialData: RwaIssuanceProductBody["product"];
  categories: RwaIssuanceCategoriesData | null;
}>();
const emit = defineEmits<{
  (e: "next", values: GenericObject): void;
}>();
const { t } = useI18n();

const schema = toTypedSchema(
  yup.object({
    name: yup.string().required(t("asset.issue.apply.validation.nameRequired")),
    code: yup.string().required(t("asset.issue.apply.validation.codeRequired")),
    categoryId: yup.string().required(t("asset.issue.apply.validation.categoryRequired")),
  }),
);

function handleSubmit(values: GenericObject) {
  emit("next", values);
}
</script>

<template>
  <Form
    :validation-schema="schema" :initial-values="initialData"
    @submit="handleSubmit"
  >
    <div class="space-y-5">
      <div>
        <Field name="name" type="text">
          <template #default="{ field }">
            <ui-input-label
              v-bind="field"
              :label="t('asset.issue.apply.productName')"
              :placeholder="t('asset.issue.apply.enterProductName')"
            />
          </template>
        </Field>
        <ErrorMessage name="name" />
      </div>

      <div>
        <Field name="code" type="text">
          <template #default="{ field }">
            <ui-input-label
              v-bind="field"
              :label="t('asset.issue.apply.productCode')"
              :placeholder="t('asset.issue.apply.enterProductCode')"
            />
          </template>
        </Field>
        <ErrorMessage name="code" />
      </div>

      <div>
        <Field name="categoryId" type="text">
          <template #default="{ field }">
            <ion-select
              class="ui-select"
              interface="action-sheet"
              toggle-icon=""
              v-bind="field"
              :label="t('asset.issue.apply.productType')"
              :placeholder="t('asset.issue.apply.chooseProductType')"
            >
              <ion-select-option v-for="item in categories?.data" :key="item.id" :value="item.id">
                {{ item.name }}
              </ion-select-option>
            </ion-select>
          </template>
        </Field>
        <ErrorMessage name="categoryId" />
      </div>

      <div>
        <Field name="estimatedValue" type="text">
          <template #default="{ field }">
            <ui-input-label
              v-bind="field"
              type="text"
              inputmode="numeric"
              :label="t('asset.issue.apply.productValue')"
              :placeholder="t('asset.issue.apply.enterProductValue')"
            />
          </template>
        </Field>
        <ErrorMessage name="estimatedValue" />
      </div>

      <div>
        <Field name="totalSupplyLimit" type="text">
          <template #default="{ field }">
            <ui-input-label
              v-bind="field"
              inputmode="numeric"
              :label="t('asset.issue.apply.totalSupplyLimit')"
              :placeholder="t('asset.issue.apply.enterTotalSupplyLimit')"
            />
          </template>
        </Field>
        <ErrorMessage name="totalSupplyLimit" />
      </div>

      <div>
        <Field name="description" type="text">
          <template #default="{ field }">
            <ui-textarea-label
              v-bind="field"
              :label="t('asset.issue.apply.description')"
              :placeholder="t('asset.issue.apply.enterDescription')"
              :maxlength="500"
              :auto-grow="true"
            />
          </template>
        </Field>
        <ErrorMessage name="description" />
      </div>

      <div>
        <Field v-slot="{ field }" name="proofDocuments">
          <ui-file-upload
            v-bind="field"
            :label="t('asset.issue.apply.assetProof')"
            :placeholder="t('asset.issue.apply.uploadAssetProof')"
            :max-files="5"
            :max-size="10"
            accept="application/pdf,image/*,.doc,.docx"
          />
        </Field>
        <ErrorMessage name="proofDocuments" />
      </div>

      <ion-button type="submit" expand="block" shape="round" color="success">
        {{ t('asset.issue.apply.next') }}
      </ion-button>
    </div>
  </Form>
</template>

<style lang='css' scoped>
ion-textarea {
  --padding-start: 12px;
  --padding-end: 12px;
  --background: var(--ui-input-background, #fff);
  --color: var(--ui-input-color, #000);
  --border-radius: 8px;
}
</style>