pertama
This commit is contained in:
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div>
|
||||
<ul class="flex space-x-2 rtl:space-x-reverse">
|
||||
<li>
|
||||
<a href="javascript:;" class="text-primary hover:underline">Core</a>
|
||||
</li>
|
||||
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||
<NuxtLink to="/core/regencies-cities/list" class="text-primary hover:underline">Daftar Kabupaten/Kota</NuxtLink>
|
||||
</li>
|
||||
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||
<span>Tambah Provinsi</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 pt-5">
|
||||
<div class="panel">
|
||||
<div class="mb-5 flex items-center justify-between">
|
||||
<h5 class="text-lg font-semibold dark:text-white-light">Tambah Kabupaten/Kota</h5>
|
||||
<NuxtLink to="/core/regencies-cities/list" class="dark:text-white-light btn btn-dark !py-1">
|
||||
<icon-arrow-backward class="me-1" />
|
||||
Daftar
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<form class="space-y-5" @submit.prevent="submitForm()">
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-4 gap-2">
|
||||
<div :class="{ 'has-error': $validate.form.code.$error, 'has-success': isSubmitted && !$validate.form.code.$error }">
|
||||
<label for="code">Kode Kabupaten/Kota</label>
|
||||
<input id="code" type="text" class="form-input" v-model="form.code" />
|
||||
<template v-if="isSubmitted && $validate.form.code.$error">
|
||||
<p class="text-danger mt-1">Kode kabupaten/kota harus diisi</p>
|
||||
</template>
|
||||
</div>
|
||||
<div :class="{ 'has-error': $validate.form.name.$error, 'has-success': isSubmitted && !$validate.form.name.$error }">
|
||||
<label for="name">Nama Kabupaten/Kota</label>
|
||||
<input id="name" type="text" class="form-input" v-model="form.name" />
|
||||
<template v-if="isSubmitted && $validate.form.name.$error">
|
||||
<p class="text-danger mt-1">Nama kabupaten/kota harus diisi</p>
|
||||
</template>
|
||||
</div>
|
||||
<div :class="{ 'has-error': $validate.form.province.$error, 'has-success': isSubmitted && !$validate.form.province.$error }">
|
||||
<label for="province">Nama Provinsi</label>
|
||||
<multiselect id="province"
|
||||
v-model="form.province"
|
||||
:options="provinces?.results"
|
||||
class="custom-multiselect"
|
||||
:searchable="true"
|
||||
placeholder="Select an option"
|
||||
selected-label=""
|
||||
select-label=""
|
||||
deselect-label=""
|
||||
label="name"
|
||||
track-by="id"
|
||||
></multiselect>
|
||||
<template v-if="isSubmitted && $validate.form.province.$error">
|
||||
<p class="text-danger mt-1">Nama provinsi harus diisi</p>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center ltr:ml-auto mt-8">
|
||||
<button type="submit" class="btn btn-success !py-1"><icon-save class="me-1" /> Simpan</button>
|
||||
<button type="reset" class="btn btn-dark !py-1 ml-1"><icon-restore class="me-1" />Reset</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue'
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required } from '@vuelidate/validators';
|
||||
import Multiselect from '@suadelabs/vue3-multiselect';
|
||||
import '@suadelabs/vue3-multiselect/dist/vue3-multiselect.css';
|
||||
|
||||
useHead({ title: 'Daftar Kabupaten/Kota' });
|
||||
|
||||
// const form = ref({
|
||||
// code: '',
|
||||
// name: '',
|
||||
// });
|
||||
const isSubmitted = ref(false);
|
||||
const rules = {
|
||||
form: {
|
||||
code: { required },
|
||||
name: { required },
|
||||
province: { required },
|
||||
}
|
||||
};
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const { data: form } = await useAsyncData('regencies_cities',
|
||||
() => $fetch(`http://localhost:8000/core/regencies_cities/${route.params.id}`, {}), {}
|
||||
);
|
||||
const $validate = useVuelidate(rules, { form });
|
||||
|
||||
const params = reactive({
|
||||
current_page: 1,
|
||||
pagesize: 10,
|
||||
sort_column: 'id',
|
||||
sort_direction: 'asc',
|
||||
});
|
||||
|
||||
const { data: provinces } = await useAsyncData('provinces',
|
||||
() => $fetch('http://localhost:8000/core/provinces/', {
|
||||
params: {
|
||||
page: params.current_page,
|
||||
page_size: 50
|
||||
}
|
||||
}), {
|
||||
watch: [params]
|
||||
}
|
||||
);
|
||||
|
||||
const submitForm = async () => {
|
||||
isSubmitted.value = true;
|
||||
$validate.value.form.$touch();
|
||||
if ($validate.value.form.$invalid) {
|
||||
return false;
|
||||
}
|
||||
|
||||
await $fetch(`http://localhost:8000/core/regencies_cities/${route.params.id}/`, {
|
||||
method: 'PUT',
|
||||
body: {
|
||||
"code": form.value.code,
|
||||
"name": form.value.name,
|
||||
"province": form.value.province.id
|
||||
}
|
||||
}).then(() => {
|
||||
//redirect
|
||||
router.push({ path: "/core/regencies-cities/list" });
|
||||
})
|
||||
.catch((error) => {
|
||||
|
||||
//assign response error data to state "errors"
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div>
|
||||
<ul class="flex space-x-2 rtl:space-x-reverse">
|
||||
<li>
|
||||
<a href="javascript:;" class="text-primary hover:underline">Core</a>
|
||||
</li>
|
||||
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||
<NuxtLink to="/core/regencies-cities/list" class="text-primary hover:underline">Daftar Kabupaten/Kota</NuxtLink>
|
||||
</li>
|
||||
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||
<span>Tambah Provinsi</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 pt-5">
|
||||
<div class="panel">
|
||||
<div class="mb-5 flex items-center justify-between">
|
||||
<h5 class="text-lg font-semibold dark:text-white-light">Tambah Kabupaten/Kota</h5>
|
||||
<NuxtLink to="/core/regencies-cities/list" class="dark:text-white-light btn btn-dark !py-1">
|
||||
<icon-arrow-backward class="me-1" />
|
||||
Daftar
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<form class="space-y-5" @submit.prevent="submitForm()">
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-4 gap-2">
|
||||
<div :class="{ 'has-error': $validate.form.code.$error, 'has-success': isSubmitted && !$validate.form.code.$error }">
|
||||
<label for="code">Kode Kabupaten/Kota</label>
|
||||
<input id="code" type="text" class="form-input" v-model="form.code" />
|
||||
<template v-if="isSubmitted && $validate.form.code.$error">
|
||||
<p class="text-danger mt-1">Kode kabupaten/kota harus diisi</p>
|
||||
</template>
|
||||
</div>
|
||||
<div :class="{ 'has-error': $validate.form.name.$error, 'has-success': isSubmitted && !$validate.form.name.$error }">
|
||||
<label for="name">Nama Kabupaten/Kota</label>
|
||||
<input id="name" type="text" class="form-input" v-model="form.name" />
|
||||
<template v-if="isSubmitted && $validate.form.name.$error">
|
||||
<p class="text-danger mt-1">Nama kabupaten/kota harus diisi</p>
|
||||
</template>
|
||||
</div>
|
||||
<div :class="{ 'has-error': $validate.form.province.$error, 'has-success': isSubmitted && !$validate.form.province.$error }">
|
||||
<label for="province">Nama Provinsi</label>
|
||||
<multiselect id="province"
|
||||
v-model="form.province"
|
||||
:options="provinces?.results"
|
||||
class="custom-multiselect"
|
||||
:searchable="true"
|
||||
placeholder="Select an option"
|
||||
selected-label=""
|
||||
select-label=""
|
||||
deselect-label=""
|
||||
label="name"
|
||||
track-by="id"
|
||||
></multiselect>
|
||||
<template v-if="isSubmitted && $validate.form.province.$error">
|
||||
<p class="text-danger mt-1">Nama provinsi harus diisi</p>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center ltr:ml-auto mt-8">
|
||||
<button type="submit" class="btn btn-success !py-1"><icon-save class="me-1" /> Simpan</button>
|
||||
<button type="reset" class="btn btn-dark !py-1 ml-1"><icon-restore class="me-1" />Reset</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue'
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required } from '@vuelidate/validators';
|
||||
import Multiselect from '@suadelabs/vue3-multiselect';
|
||||
import '@suadelabs/vue3-multiselect/dist/vue3-multiselect.css';
|
||||
|
||||
useHead({ title: 'Tambah Kabupaten/Kota' });
|
||||
|
||||
const form = ref({
|
||||
code: '',
|
||||
name: '',
|
||||
province: '',
|
||||
});
|
||||
const isSubmitted = ref(false);
|
||||
const rules = {
|
||||
form: {
|
||||
code: { required },
|
||||
name: { required },
|
||||
province: { required },
|
||||
}
|
||||
};
|
||||
const $validate = useVuelidate(rules, { form });
|
||||
const router = useRouter();
|
||||
|
||||
const params = reactive({
|
||||
current_page: 1,
|
||||
pagesize: 10,
|
||||
sort_column: 'id',
|
||||
sort_direction: 'asc',
|
||||
});
|
||||
|
||||
const { data: provinces } = await useAsyncData('provinces',
|
||||
() => $fetch('http://localhost:8000/core/provinces/', {
|
||||
params: {
|
||||
page: params.current_page,
|
||||
page_size: 50
|
||||
}
|
||||
}), {
|
||||
watch: [params]
|
||||
}
|
||||
);
|
||||
|
||||
const submitForm = async () => {
|
||||
isSubmitted.value = true;
|
||||
$validate.value.form.$touch();
|
||||
if ($validate.value.form.$invalid) {
|
||||
return false;
|
||||
}
|
||||
|
||||
await $fetch('http://localhost:8000/core/regencies_cities/', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
"code": form.value.code,
|
||||
"name": form.value.name,
|
||||
"province": form.value.province.id
|
||||
}
|
||||
}).then(() => {
|
||||
//redirect
|
||||
router.push({ path: "/core/regencies-cities/list" });
|
||||
})
|
||||
.catch((error) => {
|
||||
|
||||
//assign response error data to state "errors"
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div>
|
||||
<ul class="flex space-x-2 rtl:space-x-reverse">
|
||||
<li>
|
||||
<a href="javascript:;" class="text-primary hover:underline">Core</a>
|
||||
</li>
|
||||
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||
<span>Daftar Kabupaten/Kota</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 pt-5">
|
||||
<div class="panel">
|
||||
<div class="mb-5 flex items-center justify-between">
|
||||
<h5 class="text-lg font-semibold dark:text-white-light">Daftar Kabupaten/Kota</h5>
|
||||
<NuxtLink to="/core/regencies-cities/add" class="dark:text-white-light btn btn-primary !py-1">
|
||||
<icon-plus class="me-1" />
|
||||
Tambah
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<div class="datatable">
|
||||
<vue3-datatable
|
||||
:rows="regenciesCities?.results"
|
||||
:columns="cols"
|
||||
:totalRows="regenciesCities?.count"
|
||||
:isServerMode=true
|
||||
:pageSize="params.pagesize"
|
||||
@change="changeServer"
|
||||
skin="whitespace-nowrap bh-table-hover"
|
||||
firstArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
|
||||
lastArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> '
|
||||
previousArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
|
||||
nextArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
|
||||
>
|
||||
<template #id="data">
|
||||
<div class="flex gap-1">
|
||||
<button type="button" class="btn btn-success !py-1" @click="viewData(data.value)">
|
||||
<icon-edit class="me-1" />
|
||||
Edit
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger !py-1" @click="deleteData(data.value)">
|
||||
<icon-trash class="me-1" />
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</vue3-datatable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import Vue3Datatable from '@bhplugin/vue3-datatable';
|
||||
useHead({ title: 'Daftar Provinsi' });
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const cols =
|
||||
ref([
|
||||
{ field: 'code', title: 'Kode Kabupaten/Kota' },
|
||||
{ field: 'name', title: 'Nama Kabupaten/Kota' },
|
||||
{ field: 'province.name', title: 'Nama Provinsi' },
|
||||
{ field: 'id', title: 'Aksi' },
|
||||
|
||||
]) || [];
|
||||
|
||||
const params = reactive({
|
||||
current_page: 1,
|
||||
pagesize: 10,
|
||||
sort_column: 'id',
|
||||
sort_direction: 'asc',
|
||||
});
|
||||
|
||||
const { data: regenciesCities } = await useAsyncData('regenciesCities',
|
||||
() => $fetch('http://localhost:8000/core/regencies_cities/', {
|
||||
params: {
|
||||
page: params.current_page,
|
||||
page_size: params.pagesize
|
||||
}
|
||||
}), {
|
||||
watch: [params]
|
||||
}
|
||||
);
|
||||
|
||||
const changeServer = (data: any) => {
|
||||
// console.log(data);
|
||||
params.current_page = data.current_page;
|
||||
params.pagesize = data.pagesize;
|
||||
params.sort_column = data.sort_column;
|
||||
params.sort_direction = data.sort_direction;
|
||||
|
||||
//getUsers();
|
||||
};
|
||||
|
||||
const viewData = (data: any) => {
|
||||
router.push({ path: "/core/regencies-cities/" + data.id });
|
||||
};
|
||||
|
||||
const deleteData = async (data: any) => {
|
||||
|
||||
//delete data with API
|
||||
await $fetch(`http://localhost:8000/core/regencies_cities/${data.id}/`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
//refersh data posts
|
||||
refreshNuxtData('regenciesCities');
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user