jws-frontend/src/pages/08_request-list/FormIssue.vue

<script setup lang="ts">
import { ref } from 'vue';
import { MainButton } from 'components/button';
import SelectInput from 'src/components/shared/SelectInput.vue';

defineProps<{
  readonly?: boolean;
}>();
const templateForm = defineModel<string>();
const templateFormOption = ref<
  { label: string; labelEN: string; value: string }[]
>([]);
</script>

<template>
  <div
    class="surface-1 q-pa-md"
    :class="{
      ['template-container']: $q.screen.gt.sm,
      ['column']: !$q.screen.gt.sm,
    }"
    style="gap: var(--size-2)"
  >
    <SelectInput
      id="quotation-branch"
      style="grid-column: span 2"
      incremental
      v-model="templateForm"
      class="full-width"
      :readonly
      :option="templateFormOption"
      :label="$t('quotation.templateForm')"
      :option-label="$i18n.locale === 'eng' ? 'labelEN' : 'label'"
    />
    <MainButton
      outlined
      icon="mdi-play-box-outline"
      color="207 96% 32%"
      class="full-width"
      style="grid-column: span 1"
    >
      {{ $t('general.view', { msg: $t('general.example') }) }}
    </MainButton>
    <MainButton
      solid
      icon="mdi-pencil-outline"
      color="207 96% 32%"
      class="full-width"
      style="grid-column: span 1"
    >
      {{ $t('general.designForm') }}
    </MainButton>
  </div>
</template>

<style scoped>
.template-container {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}
</style>