Merge refactor/i18n into develop

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { onMounted, ref, watch } from 'vue';
+import { DeleteButton, EditButton, SaveButton, UndoButton } from '../button';
 // import { useI18n } from 'vue-i18n';
 // import { storeToRefs } from 'pinia';
 
@@ -72,63 +73,37 @@ watch(
             :readonly="!item.isEdit"
             :outlined="item.isEdit"
           ></q-input>
-          <q-btn
+          <EditButton
             v-if="!item.isEdit"
+            icon-only
             id="btn-edit-work-name"
-            icon="mdi-pencil-outline"
-            :disable="isWorkNameEdit()"
-            dense
-            flat
-            round
-            color="primary"
+            :disabled="isWorkNameEdit()"
             @click="item.isEdit = true"
-          >
-            <q-tooltip>{{ $t('edit') }}</q-tooltip>
-          </q-btn>
-          <q-btn
+          />
+          <SaveButton
             v-else
-            id="btn-edit-work-name"
-            icon="mdi-check"
-            dense
-            flat
-            round
-            color="primary"
+            icon-only
+            id="btn-save-work-name"
             @click="
               () => {
                 $emit('edit', item.id, { name: item.name }),
                   (item.isEdit = false);
               }
             "
-          >
-            <q-tooltip>{{ $t('save') }}</q-tooltip>
-          </q-btn>
-          <q-btn
+          />
+          <DeleteButton
             v-if="!item.isEdit"
+            icon-only
             id="btn-delete-work-name"
-            :disable="isWorkNameEdit()"
-            icon="mdi-trash-can-outline"
-            dense
-            flat
-            round
-            class="q-ml-md"
-            color="negative"
+            :disabled="isWorkNameEdit()"
             @click="$emit('delete', item.id)"
-          >
-            <q-tooltip>{{ $t('delete') }}</q-tooltip>
-          </q-btn>
-          <q-btn
+          />
+          <UndoButton
             v-else
-            id="btn-edit-work-name"
-            icon="mdi-undo"
-            dense
-            flat
-            round
-            class="q-ml-md"
-            color="negative"
+            icon-only
+            id="btn-undo-work-name"
             @click="assignClone"
-          >
-            <q-tooltip>{{ $t('cancel') }}</q-tooltip>
-          </q-btn>
+          />
         </q-item>
       </q-list>
       <div v-else class="flex col justify-center items-center">
@@ -148,7 +123,7 @@ watch(
         >
           <span class="q-px-lg flex items-center app-text-muted-2">
             <q-icon name="mdi-plus" class="q-mr-md" />
-            {{ $t('addWork') }}
+            {{ $t('productService.service.addWork') }}
           </span>
         </q-item>
       </div>