jws-frontend/src/components/04_flow-management/FormFlow.vue

<script lang="ts" setup>
import { ref } from 'vue';
import { QTableProps } from 'quasar';
import { moveItemUp, moveItemDown, deleteItem } from 'src/stores/utils';

import ToggleButton from 'src/components/button/ToggleButton.vue';
import { DeleteButton } from '../button';
import { WorkflowTemplatePayload } from 'src/stores/workflow-template/types';

const flowData = defineModel<WorkflowTemplatePayload>('flowData', {
  required: true,
  default: {
    name: '',
    step: [],
  },
});

const responsiblePersonSearch = ref('');
const columns = [
  {
    name: 'detail',
    align: 'center',
    label: 'general.detail',
    field: 'detail',
  },
  {
    name: 'responsiblePerson',
    align: 'center',
    label: 'flow.responsiblePerson',
    field: 'responsiblePerson',
  },
  {
    name: 'action',
    align: 'right',
    label: '',
    field: 'action',
  },
] satisfies QTableProps['columns'];

defineEmits<{
  (e: 'moveUp'): void;
  (e: 'moveDown'): void;
}>();
</script>

<template>
  <div class="row col-12">
    <section
      class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
    >
      <q-icon
        flat
        size="xs"
        class="q-pa-sm rounded q-mr-xs"
        color="info"
        name="mdi-office-building-outline"
        style="background-color: var(--surface-3)"
      />
      {{ $t(`general.name`, { msg: $t('flow.title') }) }}
      <span class="row items-center q-ml-auto text-weight-regular">
        {{ $t('status.title') }}
        <ToggleButton class="q-ml-md" />
      </span>
    </section>

    <section id="form-flow-template" class="col-12 row">
      <q-input
        outlined
        dense
        class="col"
        id="input-flow-template-name"
        v-model="flowData.name"
        hide-bottom-space
        :label="$t(`general.name`, { msg: $t('flow.step') })"
        :rules="[(val: string) => !!val || $t('form.error.required')]"
      ></q-input>
    </section>

    <section
      class="col-12 q-pb-sm q-pt-lg text-weight-bold text-body1 row items-center"
    >
      <q-icon
        flat
        size="xs"
        class="q-pa-sm rounded q-mr-xs"
        color="info"
        name="mdi-office-building-outline"
        style="background-color: var(--surface-3)"
      />
      {{ $t(`flow.processStep`) }}
    </section>

    <section class="col-12">
      <q-table
        id="form-flow-step"
        flat
        bordered
        hide-pagination
        class="full-width"
        :columns
        :rows="flowData.step"
        :no-data-label="$t('general.noDataTable')"
        :pagination="{
          rowsPerPage: 0,
        }"
      >
        <template #header="{ cols }">
          <q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
            <q-th v-for="v in cols" :key="v">
              {{ v.label && $t(v.label, { msg: $t('flow.step') }) }}
            </q-th>
          </q-tr>
        </template>

        <template #body="props">
          <q-tr>
            <q-td style="width: 60%">
              <section class="row items-center">
                <q-btn
                  :id="`btn-up-${props.rowIndex}`"
                  :for="`btn-up-${props.rowIndex}`"
                  icon="mdi-arrow-up"
                  size="sm"
                  dense
                  flat
                  round
                  :disable="props.rowIndex === 0"
                  style="color: hsl(var(--text-mute-2))"
                  @click.stop="moveItemUp(flowData.step, props.rowIndex)"
                />
                <q-btn
                  :id="`btn-down-${props.rowIndex}`"
                  :for="`btn-down-${props.rowIndex}`"
                  icon="mdi-arrow-down"
                  size="sm"
                  dense
                  flat
                  round
                  class="q-mx-sm"
                  :disable="props.rowIndex === flowData.step.length - 1"
                  style="color: hsl(var(--text-mute-2))"
                  @click.stop="moveItemDown(flowData.step, props.rowIndex)"
                />

                <q-avatar
                  size="md"
                  class="q-mx-lg"
                  style="background-color: var(--surface-tab)"
                >
                  {{ props.rowIndex + 1 }}
                </q-avatar>

                <q-input
                  dense
                  outlined
                  :id="`input-flow-step-name-${props.rowIndex}`"
                  :for="`input-flow-step-name-${props.rowIndex}`"
                  class="col"
                  :placeholder="$t('general.no', { msg: $t('flow.step') })"
                  v-model="props.row.name"
                  hide-bottom-space
                  :rules="[(val: string) => !!val || $t('form.error.required')]"
                />
              </section>
            </q-td>

            <q-td>
              <q-field @click.stop dense outlined>
                <span class="app-text-muted row items-center col">
                  {{ $t('general.no', { msg: $t('flow.responsiblePerson') }) }}
                  <q-icon name="mdi-chevron-down" class="q-ml-auto" />
                </span>
                <q-menu style="width: 18rem" :offset="[0, 4]">
                  <q-list>
                    <q-item>
                      <q-input
                        for="input-search"
                        outlined
                        dense
                        :label="$t('general.search')"
                        class="col responsible-search"
                        :bg-color="$q.dark.isActive ? 'dark' : 'white'"
                        v-model="responsiblePersonSearch"
                        debounce="200"
                      >
                        <template #prepend>
                          <q-icon name="mdi-magnify" />
                        </template>
                      </q-input>
                    </q-item>
                    <span class="text-caption app-text-muted-2 q-px-md">
                      ผู้คน
                    </span>

                    <q-item clickable class="column">
                      <div class="row items-center">
                        <q-checkbox :model-value="false" size="xs"></q-checkbox>
                        <q-avatar class="q-ml-sm" size="md">
                          <q-img :src="`/images/employee-avatar.png`" />
                        </q-avatar>
                        <div class="column q-pl-md">
                          <span>นาย กอไก่ ขอไข่</span>
                          <span class="text-caption app-text-muted">10002</span>
                        </div>
                      </div>
                    </q-item>

                    <span class="text-caption app-text-muted-2 q-px-md">
                      กลุ่ม
                    </span>
                    <q-item clickable class="column">
                      <div class="row items-center">
                        <q-checkbox :model-value="false" size="xs"></q-checkbox>
                        <q-avatar class="q-ml-sm" size="md">
                          <q-img :src="`/images/employee-avatar.png`" />
                        </q-avatar>
                        <div class="column q-pl-md">
                          <span>กลุ่มคาโมมายด์</span>
                        </div>
                      </div>
                    </q-item>
                  </q-list>
                </q-menu>
              </q-field>
            </q-td>

            <q-td style="width: 10%">
              <DeleteButton
                icon-only
                class="q-ml-auto"
                @click="deleteItem(flowData.step, props.rowIndex)"
              />
            </q-td>
          </q-tr>
        </template>
      </q-table>
    </section>
  </div>
</template>

<style scoped>
:deep(.responsible-search .q-field__control) {
  height: 36px;
  font-size: 12px;
}
</style>