From 4f85be9b85db484ff200d0cf4549fa69d5cf2dd9 Mon Sep 17 00:00:00 2001
From: Seth Phat <phattranminh96@gmail.com>
Date: Sun, 17 Sep 2023 15:21:58 +0700
Subject: [PATCH] Translation Group Console UI

---
 .../TranslationGroupController.php            |   7 +-
 .../translationGroup.repository.js            |  27 +++--
 resources/js/console/router.js                |   8 ++
 .../components/UpdateLanguageButton.vue       |   1 -
 .../TranslationGroupsListScreen.vue           |  94 +++++++++++++++
 .../components/CreateNewTranslationGroup.vue  | 102 ++++++++++++++++
 .../DeleteTranslationGroupButton.vue          |  85 +++++++++++++
 .../UpdateTranslationGroupButton.vue          | 113 ++++++++++++++++++
 .../TranslationGroupControllerTest.php        |  11 +-
 9 files changed, 436 insertions(+), 12 deletions(-)
 create mode 100644 resources/js/console/screens/TranslationGroupsList/TranslationGroupsListScreen.vue
 create mode 100644 resources/js/console/screens/TranslationGroupsList/components/CreateNewTranslationGroup.vue
 create mode 100644 resources/js/console/screens/TranslationGroupsList/components/DeleteTranslationGroupButton.vue
 create mode 100644 resources/js/console/screens/TranslationGroupsList/components/UpdateTranslationGroupButton.vue

diff --git a/app/Http/Controllers/TranslationGroupController.php b/app/Http/Controllers/TranslationGroupController.php
index 664d6d6..947e617 100644
--- a/app/Http/Controllers/TranslationGroupController.php
+++ b/app/Http/Controllers/TranslationGroupController.php
@@ -8,6 +8,7 @@
 use App\Http\Resources\TranslationGroupResource;
 use App\Models\TranslationGroup;
 use Illuminate\Http\JsonResponse;
+use Illuminate\Support\Facades\DB;
 
 class TranslationGroupController extends Controller
 {
@@ -46,7 +47,11 @@ public function update(TranslationGroupUpdateRequest $request, TranslationGroup
 
     public function destroy(TranslationGroup $translationGroup): JsonResponse
     {
-        $deleteResult = $translationGroup->delete();
+        $deleteResult = DB::transaction(function () use ($translationGroup) {
+            $translationGroup->translations()->delete();
+
+            return $translationGroup->delete();
+        });
 
         return new JsonResponse([
             'uuid' => $translationGroup->uuid,
diff --git a/resources/js/console/repositories/translationGroup.repository.js b/resources/js/console/repositories/translationGroup.repository.js
index 7018054..5a9422c 100644
--- a/resources/js/console/repositories/translationGroup.repository.js
+++ b/resources/js/console/repositories/translationGroup.repository.js
@@ -3,7 +3,7 @@ import { catchError, getData } from './helper';
 
 const httpClient = authenticatedInstance;
 
-export const fontRepository = {
+export const translationGroupRepository = {
   index({
     limit = 20,
     page = 1,
@@ -11,7 +11,7 @@ export const fontRepository = {
     sortDirection = 'asc',
   }) {
     return httpClient
-      .get('fonts', {
+      .get('translation-groups', {
         params: {
           limit,
           page,
@@ -24,19 +24,30 @@ export const fontRepository = {
   },
 
   /**
-   *
-   * @param {FormData} data
+   * @param {{name: string, description: string, key: string}} data
    */
   create(data) {
     return httpClient
-      .post(`fonts`, data, {
-        headers: { 'Content-Type': 'multipart/form-data' },
-      })
+      .post(`translation-groups`, data)
+      .then(getData)
+      .catch(catchError);
+  },
+
+  /**
+   * @param {String} id
+   * @param {{name: string, description: string}} data
+   */
+  update(id, data) {
+    return httpClient
+      .put(`translation-groups/${id}`, data)
       .then(getData)
       .catch(catchError);
   },
 
   destroy(id) {
-    return httpClient.delete(`fonts/${id}`).then(getData).catch(catchError);
+    return httpClient
+      .delete(`translation-groups/${id}`)
+      .then(getData)
+      .catch(catchError);
   },
 };
diff --git a/resources/js/console/router.js b/resources/js/console/router.js
index 422f82d..d81df90 100644
--- a/resources/js/console/router.js
+++ b/resources/js/console/router.js
@@ -39,6 +39,14 @@ export const router = createRouter({
       component: () =>
         import('./screens/LanguagesList/LanguaguesListScreen.vue'),
     },
+    {
+      path: '/translation-groups',
+      name: 'translation-groups-list',
+      component: () =>
+        import(
+          './screens/TranslationGroupsList/TranslationGroupsListScreen.vue'
+        ),
+    },
     {
       path: '/translations',
       name: 'translations-list',
diff --git a/resources/js/console/screens/LanguagesList/components/UpdateLanguageButton.vue b/resources/js/console/screens/LanguagesList/components/UpdateLanguageButton.vue
index 426e9af..e5987cf 100644
--- a/resources/js/console/screens/LanguagesList/components/UpdateLanguageButton.vue
+++ b/resources/js/console/screens/LanguagesList/components/UpdateLanguageButton.vue
@@ -79,7 +79,6 @@ const onClickCloseModal = () => {
 const onClickSubmit = async () => {
   startLoading();
 
-  console.log(props.language);
   const data = await languageRepository.update(props.language.uuid, {
     ...formFields.value,
   });
diff --git a/resources/js/console/screens/TranslationGroupsList/TranslationGroupsListScreen.vue b/resources/js/console/screens/TranslationGroupsList/TranslationGroupsListScreen.vue
new file mode 100644
index 0000000..f3fa41a
--- /dev/null
+++ b/resources/js/console/screens/TranslationGroupsList/TranslationGroupsListScreen.vue
@@ -0,0 +1,94 @@
+<template>
+  <Card>
+    <Table
+      title="Translation Groups"
+      sub-title="The group of translations"
+      :columns="columns"
+      :records="records"
+    >
+      <template #action-buttons>
+        <CreateNewTranslationGroup @created="loadRecords" />
+      </template>
+      <template #record-actions="{ record }">
+        <div class="flex gap-x-2">
+          <UpdateTranslationGroupButton
+            :translation-group="record"
+            @updated="loadRecords"
+          />
+          <DeleteTranslationGroupButton
+            :translation-group="record"
+            @deleted="loadRecords"
+          />
+        </div>
+      </template>
+      <template #after-table>
+        <Pagination
+          v-if="paginationMeta"
+          :from="paginationMeta.from || 0"
+          :to="paginationMeta.to || 0"
+          :total="paginationMeta.total"
+          @next="loadRecords(page + 1)"
+          @prev="loadRecords(page - 1)"
+        />
+      </template>
+    </Table>
+  </Card>
+</template>
+
+<script setup>
+import Card from '../../components/Card/Card.vue';
+import Table from '../../components/Table/Table.vue';
+import { ref } from 'vue';
+import DeleteTranslationGroupButton from './components/DeleteTranslationGroupButton.vue';
+import UpdateTranslationGroupButton from './components/UpdateTranslationGroupButton.vue';
+import { translationGroupRepository } from '../../repositories/translationGroup.repository';
+import Pagination from '../../components/Pagination/Pagination.vue';
+import CreateNewTranslationGroup from './components/CreateNewTranslationGroup.vue';
+
+const columns = [
+  {
+    key: 'key',
+    label: 'Key',
+    headerClass: 'w-60',
+  },
+  {
+    key: 'name',
+    label: 'Name',
+    headerClass: 'w-60',
+  },
+  {
+    key: 'description',
+    label: 'Description',
+  },
+  {
+    key: 'created_at',
+    label: 'Created At',
+    transform(value) {
+      return new Date(value).toLocaleString();
+    },
+  },
+];
+
+const records = ref([]);
+const page = ref(1);
+const paginationMeta = ref(null);
+
+const loadRecords = async () => {
+  const data = await translationGroupRepository.index({
+    sortBy: 'name',
+  });
+
+  if (!data) {
+    return;
+  }
+
+  if (!data) {
+    return;
+  }
+
+  records.value = [...data.data];
+  paginationMeta.value = { ...data.meta };
+};
+
+loadRecords();
+</script>
diff --git a/resources/js/console/screens/TranslationGroupsList/components/CreateNewTranslationGroup.vue b/resources/js/console/screens/TranslationGroupsList/components/CreateNewTranslationGroup.vue
new file mode 100644
index 0000000..344b6d7
--- /dev/null
+++ b/resources/js/console/screens/TranslationGroupsList/components/CreateNewTranslationGroup.vue
@@ -0,0 +1,102 @@
+<template>
+  <Button @click="onClickCreate">Create New Translation Group</Button>
+  <Modal
+    title="Create New Translation Group"
+    :is-open="isOpenModal"
+  >
+    <template #default>
+      <div class="flex flex-col mt-4 gap-2">
+        <Input
+          v-model="formFields.key"
+          label="Unique Key"
+          :disabled="isLoading"
+        />
+        <Input
+          v-model="formFields.name"
+          label="Name"
+          :disabled="isLoading"
+        />
+        <Input
+          v-model="formFields.description"
+          label="Description (Optional)"
+          :disabled="isLoading"
+        />
+      </div>
+    </template>
+    <template #bottom-buttons>
+      <div class="gap-1 flex">
+        <Button
+          @click="onClickCloseModal"
+          :disabled="isLoading"
+          type="secondary"
+        >
+          Cancel
+        </Button>
+        <Button
+          @click="onClickSubmit"
+          :disabled="isLoading"
+        >
+          Create
+        </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import Button from '../../../components/Button/Button.vue';
+import Modal from '../../../components/Modal/Modal.vue';
+import { ref } from 'vue';
+import Input from '../../../components/Input/Input.vue';
+import { notify } from '@kyvg/vue3-notification';
+import { useLoading } from '../../../composable/useLoading';
+import { useRouter } from 'vue-router';
+import { translationGroupRepository } from '../../../repositories/translationGroup.repository';
+
+const router = useRouter();
+const isOpenModal = ref(false);
+const { isLoading, startLoading, stopLoading } = useLoading();
+const emits = defineEmits(['created']);
+
+const getBlankFields = () => ({
+  key: '',
+  name: '',
+  description: '',
+});
+
+const formFields = ref(getBlankFields());
+
+const onClickCreate = () => {
+  isOpenModal.value = true;
+};
+
+const onClickCloseModal = () => {
+  isOpenModal.value = false;
+  formFields.value = getBlankFields();
+};
+
+const onClickSubmit = async () => {
+  startLoading();
+
+  const data = await translationGroupRepository.create({
+    ...formFields.value,
+  });
+
+  stopLoading();
+
+  if (!data) {
+    return;
+  }
+
+  notify({
+    type: 'success',
+    title: 'Action OK',
+    text: 'Language has been created.',
+  });
+
+  onClickCloseModal();
+  emits('created');
+};
+</script>
+
+<style scoped></style>
diff --git a/resources/js/console/screens/TranslationGroupsList/components/DeleteTranslationGroupButton.vue b/resources/js/console/screens/TranslationGroupsList/components/DeleteTranslationGroupButton.vue
new file mode 100644
index 0000000..4dbad08
--- /dev/null
+++ b/resources/js/console/screens/TranslationGroupsList/components/DeleteTranslationGroupButton.vue
@@ -0,0 +1,85 @@
+<template>
+  <Button
+    type="error"
+    @click="onClickDelete"
+    :disabled="isLoading"
+  >
+    Delete
+  </Button>
+  <Modal
+    :is-open="isOpenModal"
+    title="Delete Confirmation"
+  >
+    <p class="mt-4 text-sm text-gray-500">
+      Are you sure you want to delete this Translation Group? The associated
+      translations will be deleted too.
+    </p>
+    <template #bottom-buttons>
+      <div class="flex gap-1">
+        <Button
+          type="secondary"
+          @click="isOpenModal = false"
+          :disabled="isLoading"
+        >
+          Cancel
+        </Button>
+        <Button
+          type="error"
+          @click="onClickConfirmDelete"
+          :disabled="isLoading"
+        >
+          Delete
+        </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import Button from '../../../components/Button/Button.vue';
+import { notify } from '@kyvg/vue3-notification';
+import { useLoading } from '../../../composable/useLoading';
+import Modal from '../../../components/Modal/Modal.vue';
+import { ref } from 'vue';
+import { translationGroupRepository } from '../../../repositories/translationGroup.repository';
+
+const props = defineProps({
+  translationGroup: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emits = defineEmits(['deleted']);
+
+const { isLoading, startLoading, stopLoading } = useLoading();
+const isOpenModal = ref(false);
+
+const onClickDelete = () => {
+  isOpenModal.value = true;
+};
+
+const onClickConfirmDelete = async () => {
+  startLoading();
+
+  const data = await translationGroupRepository.destroy(
+    props.translationGroup.uuid
+  );
+
+  stopLoading();
+
+  if (!data) {
+    return;
+  }
+
+  notify({
+    type: 'success',
+    title: 'Action OK',
+    text: 'Translation Group has been deleted.',
+  });
+
+  emits('deleted');
+
+  isOpenModal.value = false;
+};
+</script>
diff --git a/resources/js/console/screens/TranslationGroupsList/components/UpdateTranslationGroupButton.vue b/resources/js/console/screens/TranslationGroupsList/components/UpdateTranslationGroupButton.vue
new file mode 100644
index 0000000..61befb4
--- /dev/null
+++ b/resources/js/console/screens/TranslationGroupsList/components/UpdateTranslationGroupButton.vue
@@ -0,0 +1,113 @@
+<template>
+  <Button @click="onClickCreate">Update</Button>
+  <Modal
+    title="Update Language"
+    :is-open="isOpenModal"
+  >
+    <template #default>
+      <div class="flex flex-col mt-4 gap-2">
+        <Input
+          :model-value="translationGroup.key"
+          label="Unique Key"
+          disabled
+        />
+        <Input
+          v-model="formFields.name"
+          label="Name"
+          :disabled="isLoading"
+        />
+        <Input
+          v-model="formFields.description"
+          label="Description (Optional)"
+          :disabled="isLoading"
+        />
+      </div>
+    </template>
+    <template #bottom-buttons>
+      <div class="gap-1 flex">
+        <Button
+          @click="onClickCloseModal"
+          :disabled="isLoading"
+          type="secondary"
+        >
+          Cancel
+        </Button>
+        <Button
+          @click="onClickSubmit"
+          :disabled="isLoading"
+        >
+          Update
+        </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import Button from '../../../components/Button/Button.vue';
+import Modal from '../../../components/Modal/Modal.vue';
+import { ref } from 'vue';
+import Input from '../../../components/Input/Input.vue';
+import { notify } from '@kyvg/vue3-notification';
+import { useLoading } from '../../../composable/useLoading';
+import { useRouter } from 'vue-router';
+import { translationGroupRepository } from '../../../repositories/translationGroup.repository';
+
+const props = defineProps({
+  translationGroup: {
+    type: Object,
+    required: true,
+  },
+});
+const emits = defineEmits(['updated']);
+
+const router = useRouter();
+const isOpenModal = ref(false);
+const { isLoading, startLoading, stopLoading } = useLoading();
+
+const getBlankFields = () => ({
+  name: '',
+  description: '',
+});
+
+const formFields = ref(getBlankFields());
+
+const onClickCreate = () => {
+  isOpenModal.value = true;
+  formFields.value.name = props.translationGroup.name;
+  formFields.value.description = props.translationGroup.description;
+};
+
+const onClickCloseModal = () => {
+  isOpenModal.value = false;
+  formFields.value = getBlankFields();
+};
+
+const onClickSubmit = async () => {
+  startLoading();
+
+  const data = await translationGroupRepository.update(
+    props.translationGroup.uuid,
+    {
+      ...formFields.value,
+    }
+  );
+
+  stopLoading();
+
+  if (!data) {
+    return;
+  }
+
+  notify({
+    type: 'success',
+    title: 'Action OK',
+    text: 'Translation Group has been updated.',
+  });
+
+  onClickCloseModal();
+  emits('updated');
+};
+</script>
+
+<style scoped></style>
diff --git a/tests/Feature/TranslationGroupControllerTest.php b/tests/Feature/TranslationGroupControllerTest.php
index 73544af..720d8e9 100644
--- a/tests/Feature/TranslationGroupControllerTest.php
+++ b/tests/Feature/TranslationGroupControllerTest.php
@@ -2,6 +2,7 @@
 
 namespace Tests\Feature;
 
+use App\Models\Translation;
 use App\Models\TranslationGroup;
 use Tests\TestCase;
 
@@ -83,7 +84,7 @@ public function testStoreReturnsErrorOnDuplicatedTranslationGroupCode()
         $response->assertUnprocessable();
     }
 
-    public function testUpdateUpdatesAGivenLanguage()
+    public function testUpdateUpdatesAGivenTranslationGroup()
     {
         $invoiceGroup = TranslationGroup::factory()->create([
             'key' => 'invoice',
@@ -107,12 +108,15 @@ public function testUpdateUpdatesAGivenLanguage()
         ]);
     }
 
-    public function testDestroyDeletesAGivenLanguage()
+    public function testDestroyDeletesAGivenTranslationGroup()
     {
         $railGroup = TranslationGroup::factory()->create([
             'key' => 'rail',
             'name' => 'Rail Group',
         ]);
+        $translation = Translation::factory()->create([
+            'translation_group_id' => $railGroup->uuid,
+        ]);
 
         $response = $this->json('DELETE', "api/v1/translation-groups/{$railGroup->uuid}");
 
@@ -124,5 +128,8 @@ public function testDestroyDeletesAGivenLanguage()
         $this->assertDatabaseMissing((new TranslationGroup())->getTable(), [
             'key' => 'rail',
         ]);
+        $this->assertDatabaseMissing((new Translation())->getTable(), [
+            'uuid' => $translation->uuid,
+        ]);
     }
 }