Languages Console UI

shipsaas · Sep 17, 2023 · 62c48bd · 62c48bd
1 parent 09a7631
commit 62c48bd
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 47 deletions.
diff --git a/database/migrations/2023_09_17_071311_create_english_language_record.php b/database/migrations/2023_09_17_071311_create_english_language_record.php
@@ -0,0 +1,23 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        DB::table('languages')
+            ->insertOrIgnore([
+                'code' => 'en',
+                'name' => 'English',
+            ]);
+    }
+
+    public function down(): void
+    {
+        DB::table('languages')
+            ->where('code', 'en')
+            ->delete();
+    }
+};
diff --git a/resources/js/console/repositories/language.repository.js b/resources/js/console/repositories/language.repository.js
@@ -0,0 +1,37 @@
+import { authenticatedInstance } from '../factories/axios';
+import { catchError, getData } from './helper';
+
+const httpClient = authenticatedInstance;
+
+export const languageRepository = {
+  index({
+    limit = 20,
+    page = 1,
+    sortBy = 'created_at',
+    sortDirection = 'asc',
+  }) {
+    return httpClient
+      .get('languages', {
+        params: {
+          limit,
+          page,
+          sort_by: sortBy,
+          sort_direction: sortDirection,
+        },
+      })
+      .then(getData)
+      .catch(catchError);
+  },
+
+  /**
+   *
+   * @param {{name: string, code: string}} data
+   */
+  create(data) {
+    return httpClient.post(`languages`, data).then(getData).catch(catchError);
+  },
+
+  destroy(id) {
+    return httpClient.delete(`languages/${id}`).then(getData).catch(catchError);
+  },
+};
diff --git a/resources/js/console/repositories/translation.repository.js b/resources/js/console/repositories/translation.repository.js
@@ -0,0 +1,42 @@
+import { authenticatedInstance } from '../factories/axios';
+import { catchError, getData } from './helper';
+
+const httpClient = authenticatedInstance;
+
+export const fontRepository = {
+  index({
+    limit = 20,
+    page = 1,
+    sortBy = 'created_at',
+    sortDirection = 'asc',
+  }) {
+    return httpClient
+      .get('fonts', {
+        params: {
+          limit,
+          page,
+          sort_by: sortBy,
+          sort_direction: sortDirection,
+        },
+      })
+      .then(getData)
+      .catch(catchError);
+  },
+
+  /**
+   *
+   * @param {FormData} data
+   */
+  create(data) {
+    return httpClient
+      .post(`fonts`, data, {
+        headers: { 'Content-Type': 'multipart/form-data' },
+      })
+      .then(getData)
+      .catch(catchError);
+  },
+
+  destroy(id) {
+    return httpClient.delete(`fonts/${id}`).then(getData).catch(catchError);
+  },
+};
diff --git a/resources/js/console/repositories/translationGroup.repository.js b/resources/js/console/repositories/translationGroup.repository.js
@@ -0,0 +1,42 @@
+import { authenticatedInstance } from '../factories/axios';
+import { catchError, getData } from './helper';
+
+const httpClient = authenticatedInstance;
+
+export const fontRepository = {
+  index({
+    limit = 20,
+    page = 1,
+    sortBy = 'created_at',
+    sortDirection = 'asc',
+  }) {
+    return httpClient
+      .get('fonts', {
+        params: {
+          limit,
+          page,
+          sort_by: sortBy,
+          sort_direction: sortDirection,
+        },
+      })
+      .then(getData)
+      .catch(catchError);
+  },
+
+  /**
+   *
+   * @param {FormData} data
+   */
+  create(data) {
+    return httpClient
+      .post(`fonts`, data, {
+        headers: { 'Content-Type': 'multipart/form-data' },
+      })
+      .then(getData)
+      .catch(catchError);
+  },
+
+  destroy(id) {
+    return httpClient.delete(`fonts/${id}`).then(getData).catch(catchError);
+  },
+};
diff --git a/resources/js/console/screens/LanguagesList/LanguaguesListScreen.vue b/resources/js/console/screens/LanguagesList/LanguaguesListScreen.vue
@@ -7,22 +7,12 @@
       :records="records"
     >
       <template #action-buttons>
-        <CreateNewLanguage @created="loadRecords(1)" />
+        <CreateNewLanguage @created="loadRecords" />
       </template>
       <template #record-actions="{ record }">
         <DeleteLanguageButton
-          :font="record"
-          @deleted="loadRecords(1)"
-        />
-      </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)"
+          :language="record"
+          @deleted="loadRecords"
         />
       </template>
     </Table>
@@ -33,17 +23,11 @@
 import Card from '../../components/Card/Card.vue';
 import Table from '../../components/Table/Table.vue';
 import { ref } from 'vue';
-import { fontRepository } from '../../repositories/font.repository';
-import Pagination from '../../components/Pagination/Pagination.vue';
 import CreateNewLanguage from './components/CreateNewLanguage.vue';
 import DeleteLanguageButton from './components/DeleteLanguageButton.vue';
+import { languageRepository } from '../../repositories/language.repository';
 
 const columns = [
-  {
-    key: 'uuid',
-    label: 'ID',
-    headerClass: 'w-20',
-  },
   {
     key: 'code',
     label: 'Code',
@@ -64,15 +48,8 @@ const columns = [
 ];
 
 const records = ref([]);
-const page = ref(1);
-const paginationMeta = ref(null);
-
-const loadRecords = async (wantedPage) => {
-  page.value = wantedPage || page.value;
-
-  const data = await fontRepository.index({
-    limit: 20,
-    page: page.value,
+const loadRecords = async () => {
+  const data = await languageRepository.index({
     sortBy: 'name',
   });
 
@@ -81,7 +58,6 @@ const loadRecords = async (wantedPage) => {
   }
 
   records.value = [...data.data];
-  paginationMeta.value = { ...data.meta };
 };
 
 loadRecords();

diff --git a/resources/js/console/screens/LanguagesList/components/CreateNewLanguage.vue b/resources/js/console/screens/LanguagesList/components/CreateNewLanguage.vue
@@ -7,7 +7,7 @@
     <template #default>
       <div class="flex flex-col mt-4 gap-2">
         <Input
-          v-model="formFields.key"
+          v-model="formFields.code"
           label="Language ISO Code (e.g: en, vi, es)"
           :disabled="isLoading"
         />
@@ -46,17 +46,16 @@ import Input from '../../../components/Input/Input.vue';
 import { notify } from '@kyvg/vue3-notification';
 import { useLoading } from '../../../composable/useLoading';
 import { useRouter } from 'vue-router';
-import { fontRepository } from '../../../repositories/font.repository';
+import { languageRepository } from '../../../repositories/language.repository';
 
 const router = useRouter();
 const isOpenModal = ref(false);
 const { isLoading, startLoading, stopLoading } = useLoading();
 const emits = defineEmits(['created']);
 
 const getBlankFields = () => ({
-  key: '',
+  code: '',
   name: '',
-  font: null,
 });
 
 const formFields = ref(getBlankFields());
@@ -73,14 +72,10 @@ const onClickCloseModal = () => {
 const onClickSubmit = async () => {
   startLoading();
 
-  const formData = new FormData();
-
-  Object.entries(formFields.value).forEach(([key, value]) => {
-    formData.append(key, value);
+  const data = await languageRepository.create({
+    ...formFields.value,
   });
 
-  const data = await fontRepository.create(formData);
-
   stopLoading();
 
   if (!data) {
@@ -90,7 +85,7 @@ const onClickSubmit = async () => {
   notify({
     type: 'success',
     title: 'Action OK',
-    text: 'Font has been created.',
+    text: 'Language has been created.',
   });
 
   onClickCloseModal();

diff --git a/resources/js/console/screens/LanguagesList/components/DeleteLanguageButton.vue b/resources/js/console/screens/LanguagesList/components/DeleteLanguageButton.vue
@@ -11,8 +11,8 @@
     title="Delete Confirmation"
   >
     <p class="mt-4 text-sm text-gray-500">
-      Are you sure you want to delete this font? Those templates that are using
-      this font will be fallback to the default font (of Driver).
+      Are you sure you want to delete this Language? You cannot manage and use
+      the translations of this language anymore.
     </p>
     <template #bottom-buttons>
       <div class="flex gap-1">
@@ -41,10 +41,10 @@ import { notify } from '@kyvg/vue3-notification';
 import { useLoading } from '../../../composable/useLoading';
 import Modal from '../../../components/Modal/Modal.vue';
 import { ref } from 'vue';
-import { fontRepository } from '../../../repositories/font.repository';
+import { languageRepository } from '../../../repositories/language.repository';
 
 const props = defineProps({
-  font: {
+  language: {
     type: Object,
     required: true,
   },
@@ -62,7 +62,7 @@ const onClickDelete = () => {
 const onClickConfirmDelete = async () => {
   startLoading();
 
-  const data = await fontRepository.destroy(props.font.uuid);
+  const data = await languageRepository.destroy(props.language.uuid);
 
   stopLoading();
 
@@ -73,7 +73,7 @@ const onClickConfirmDelete = async () => {
   notify({
     type: 'success',
     title: 'Action OK',
-    text: 'Font has been deleted.',
+    text: 'Language has been deleted.',
   });
 
   emits('deleted');