Skip to content

Commit

Permalink
Languages Console UI
Browse files Browse the repository at this point in the history
  • Loading branch information
sethsandaru committed Sep 17, 2023
1 parent 62c48bd commit 58daaaa
Show file tree
Hide file tree
Showing 6 changed files with 130 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ public function up(): void
{
DB::table('languages')
->insertOrIgnore([
'uuid' => Str::orderedUuid()->toString(),
'code' => 'en',
'name' => 'English',
]);
Expand Down
4 changes: 2 additions & 2 deletions resources/js/console/components/Input/Input.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
v-if="type !== 'file'"
v-bind="$attrs"
:type="type"
class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200"
:placeholder="placeholder"
:value="modelValue"
@input="onInput"
Expand All @@ -18,7 +18,7 @@
v-else
v-bind="$attrs"
:type="type"
class="px-4 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
class="px-4 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200"
:placeholder="placeholder"
@change="onInput"
/>
Expand Down
12 changes: 11 additions & 1 deletion resources/js/console/repositories/language.repository.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,23 @@ export const languageRepository = {
},

/**
*
* @param {{name: string, code: string}} data
*/
create(data) {
return httpClient.post(`languages`, data).then(getData).catch(catchError);
},

/**
* @param {String} id
* @param {{name: String}} data
*/
update(id, data) {
return httpClient
.put(`languages/${id}`, data)
.then(getData)
.catch(catchError);
},

destroy(id) {
return httpClient.delete(`languages/${id}`).then(getData).catch(catchError);
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,16 @@
<CreateNewLanguage @created="loadRecords" />
</template>
<template #record-actions="{ record }">
<DeleteLanguageButton
:language="record"
@deleted="loadRecords"
/>
<div class="flex gap-x-2">
<UpdateLanguageButton
:language="record"
@updated="loadRecords"
/>
<DeleteLanguageButton
:language="record"
@deleted="loadRecords"
/>
</div>
</template>
</Table>
</Card>
Expand All @@ -26,6 +32,7 @@ import { ref } from 'vue';
import CreateNewLanguage from './components/CreateNewLanguage.vue';
import DeleteLanguageButton from './components/DeleteLanguageButton.vue';
import { languageRepository } from '../../repositories/language.repository';
import UpdateLanguageButton from './components/UpdateLanguageButton.vue';
const columns = [
{
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<Button @click="onClickCreate">Create New Language</Button>
<Modal
title="Create New Font"
title="Create New Language"
:is-open="isOpenModal"
>
<template #default>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<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="language.code"
label="Language ISO Code"
disabled
/>
<Input
v-model="formFields.name"
label="Name"
: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 { languageRepository } from '../../../repositories/language.repository';
const props = defineProps({
language: {
type: Object,
required: true,
},
});
const emits = defineEmits(['updated']);
const router = useRouter();
const isOpenModal = ref(false);
const { isLoading, startLoading, stopLoading } = useLoading();
const getBlankFields = () => ({
name: '',
});
const formFields = ref(getBlankFields());
const onClickCreate = () => {
isOpenModal.value = true;
formFields.value.name = props.language.name;
};
const onClickCloseModal = () => {
isOpenModal.value = false;
formFields.value = getBlankFields();
};
const onClickSubmit = async () => {
startLoading();
console.log(props.language);
const data = await languageRepository.update(props.language.uuid, {
...formFields.value,
});
stopLoading();
if (!data) {
return;
}
notify({
type: 'success',
title: 'Action OK',
text: 'Language has been updated.',
});
onClickCloseModal();
emits('updated');
};
</script>

<style scoped></style>

0 comments on commit 58daaaa

Please sign in to comment.