add permission role

components/apps/setting/pages/AddPageModal.vue

@@ -2,6 +2,7 @@
 import { computed, ref, watch } from 'vue';
 import { Icon } from '@iconify/vue';
 import api from '@/utils/api';
+import AppRightDialog from '~/components/shared/AppRightDialog.vue';
 import { useSnackbarStore } from '~/store/snackbar';
 import type {ModalMode,ParentPageOption} from '~/types/setting/menu';
 import { useValidation } from '~/composables/useValidation';
@@ -65,7 +66,7 @@ const titleText = computed(() => {
 });
 
 
-const submitLabel = computed(() => (isEditMode.value ? 'Update' : 'Save'));
+const submitLabel = computed(() => (isEditMode.value ? 'Update' : 'Simpan'));
 
 const resetForm = () => {
     entryType.value = 'main';
@@ -259,16 +260,29 @@ const close = () => {
     lastLoadedKey = '';
     resetForm();
 };
+
+const resetCurrent = async () => {
+    if (isDetailMode.value) return;
+    if (isSaving.value || isLoadingDetail.value) return;
+
+    if (isCreateMode.value) {
+        resetForm();
+        return;
+    }
+
+    // For edit mode, restore to the last saved/loaded state
+    lastLoadedKey = '';
+    await fetchPageDetail();
+};
 </script>
 
 <template>
-    <v-dialog v-model="dialog" max-width="600px" persistent>
+    <AppRightDialog v-model="dialog" :max-width="500" persistent>
         <v-card>
             <v-form v-model="valid" ref="formRef" @submit.prevent="save">
-                
             <v-card-title class="d-flex align-center justify-space-between pa-3">
                 <div class="d-flex align-center">
-                    <span class="ml-3 text-h6">{{ titleText }}</span>
+                    <span class="ml-3 text-h5">{{ titleText }}</span>
                 </div>
                 <v-btn
                     icon
@@ -316,7 +330,7 @@ const close = () => {
 
                     <div>
                         <label class="font-weight-medium required">URL</label>
-                        <v-text-field v-model="url" class="mt-2" placeholder="/path/to/page" variant="outlined"
+                        <v-text-field v-model="url" class="mt-2" placeholder="" variant="outlined"
                             density="compact" :readonly="isFormDisabled" :rules="[required]" />
                     </div>
 
@@ -350,10 +364,36 @@ const close = () => {
                 </v-card-text>
                 <v-divider></v-divider>
                 <v-card-actions class="pa-4">
-                    <v-spacer></v-spacer>
-                    <v-btn v-if="!isDetailMode" color="primary" type="submit" variant="flat" :loading="isSaving" :disabled="isSaving">{{ submitLabel }}</v-btn>
+                    <v-row v-if="!isDetailMode" class="w-100" dense>
+                        <v-col cols="6">
+                            <v-btn
+                                prepend-icon="mdi-refresh"
+                                class="w-100"
+                                type="button"
+                                color="default"
+                                variant="outlined"
+                                :disabled="isFormDisabled"
+                                @click="resetCurrent"
+                            >
+                                Reset
+                            </v-btn>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-btn
+                                prepend-icon="mdi-content-save"
+                                class="w-100"
+                                color="primary"
+                                type="submit"
+                                variant="flat"
+                                :loading="isSaving"
+                                :disabled="isFormDisabled"
+                            >
+                                {{ submitLabel }}
+                            </v-btn>
+                        </v-col>
+                    </v-row>
                 </v-card-actions>
             </v-form>
         </v-card>
-    </v-dialog>
+    </AppRightDialog>
 </template>