Translation Group Console UI

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,

resources/js/console/repositories/translationGroup.repository.js

@@ -3,15 +3,15 @@ import { catchError, getData } from './helper';
 
 const httpClient = authenticatedInstance;
 
-export const fontRepository = {
+export const translationGroupRepository = {
   index({
     limit = 20,
     page = 1,
     sortBy = 'created_at',
     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);
   },
 };

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',

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,
   });

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>

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>

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>