jws-frontend/src/components/04_product-service/WorkNameManagement.vue

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
// import { useI18n } from 'vue-i18n';
// import { storeToRefs } from 'pinia';

// import useProductServiceStore from 'src/stores/product-service';

import NoData from '../NoData.vue';

const nameList = defineModel<{ id: string; name: string; isEdit: boolean }[]>(
  'nameList',
  { required: true },
);

const cloneList = ref();
const isAdd = ref(false);
const inputName = ref<HTMLInputElement[]>([]);

function isWorkNameEdit() {
  return cloneList.value.some((i: { isEdit: boolean }) => i.isEdit === true);
}

async function assignClone() {
  cloneList.value = await JSON.parse(JSON.stringify(nameList.value));
}

defineExpose({
  isWorkNameEdit,
});

defineEmits<{
  (e: 'delete', id: string): void;
  (e: 'edit', id: string, data: { name: string }): void;
  (e: 'add', data: { name: string; productId: []; order: number }): void;
}>();

onMounted(async () => {
  await assignClone();
});

watch(
  () => nameList.value.length,
  async () => {
    await assignClone();
    if (!isAdd.value) return;
    cloneList.value[cloneList.value.length - 1].isEdit = true;
    setTimeout(() => {
      inputName.value[cloneList.value.length - 1].focus();
      isAdd.value = false;
    }, 150);
  },
);
</script>
<template>
  <div v-if="cloneList" class="full-width column no-wrap full-height">
    <div class="bordered rounded surface-1 flex col column justify-between">
      <q-list v-if="cloneList.length > 0" class="full-width col scroll">
        <q-item
          class="items-center row q-px-lg"
          v-for="(item, index) in cloneList"
          :key="index"
        >
          <q-input
            ref="inputName"
            :for="`input-work-name-${index}`"
            dense
            class="col q-mr-md"
            v-model="item.name"
            placeholder="ชื่องาน"
            :borderless="!item.isEdit"
            :readonly="!item.isEdit"
            :outlined="item.isEdit"
          ></q-input>
          <q-btn
            v-if="!item.isEdit"
            id="btn-edit-work-name"
            icon="mdi-pencil-outline"
            :disable="isWorkNameEdit()"
            dense
            flat
            round
            color="primary"
            @click="item.isEdit = true"
          >
            <q-tooltip>{{ $t('edit') }}</q-tooltip>
          </q-btn>
          <q-btn
            v-else
            id="btn-edit-work-name"
            icon="mdi-check"
            dense
            flat
            round
            color="primary"
            @click="
              () => {
                $emit('edit', item.id, { name: item.name }),
                  (item.isEdit = false);
              }
            "
          >
            <q-tooltip>{{ $t('save') }}</q-tooltip>
          </q-btn>
          <q-btn
            v-if="!item.isEdit"
            id="btn-delete-work-name"
            :disable="isWorkNameEdit()"
            icon="mdi-trash-can-outline"
            dense
            flat
            round
            class="q-ml-md"
            color="negative"
            @click="$emit('delete', item.id)"
          >
            <q-tooltip>{{ $t('delete') }}</q-tooltip>
          </q-btn>
          <q-btn
            v-else
            id="btn-edit-work-name"
            icon="mdi-undo"
            dense
            flat
            round
            class="q-ml-md"
            color="negative"
            @click="assignClone"
          >
            <q-tooltip>{{ $t('cancel') }}</q-tooltip>
          </q-btn>
        </q-item>
      </q-list>
      <div v-else class="flex col justify-center items-center">
        <NoData />
      </div>

      <div class="bordered-t full-width">
        <q-item
          clickable
          :disable="isWorkNameEdit()"
          @click="
            () => {
              $emit('add', { name: '', productId: [], order: 1 }),
                (isAdd = true);
            }
          "
        >
          <span class="q-px-lg flex items-center app-text-muted-2">
            <q-icon name="mdi-plus" class="q-mr-md" />
            {{ $t('addWork') }}
          </span>
        </q-item>
      </div>
    </div>
    <!-- <div
      v-else
      class="bordered rounded surface-1 flex justify-center items-center col"
    >
      <NoData />
    </div> -->
  </div>
</template>