Use wrap for text menu

src/components/header-toolbar.vue

@@ -2,7 +2,7 @@
   <header class="header-component">
     <dx-toolbar class="header-toolbar" style="background-image: url('images/bg-header.jpg');">
       <dx-item
-        :visible="menuToggleEnabled"
+        :visible="false"
         location="before"
         css-class="menu-button"
       >
@@ -142,7 +142,7 @@ export default {
 }
 
 .header-title .dx-item-content {
-  padding: 0;
+  padding: 0 24px;
   margin: 0;
 }
 

src/components/icons/IconAttach.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg width="12" height="14" viewBox="0 0 12 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="width: 14px; height: 14px; color: orange;">
+    <path d="M1.99984 13.6673C1.63317 13.6673 1.31939 13.5369 1.0585 13.276C0.79717 13.0147 0.666504 12.7007 0.666504 12.334V1.66732C0.666504 1.30065 0.79717 0.986651 1.0585 0.725318C1.31939 0.464429 1.63317 0.333984 1.99984 0.333984H7.99984L11.3332 3.66732V12.334C11.3332 12.7007 11.2027 13.0147 10.9418 13.276C10.6805 13.5369 10.3665 13.6673 9.99984 13.6673H1.99984ZM1.99984 12.334H9.99984V4.33398H7.33317V1.66732H1.99984V12.334ZM5.99984 11.6673C6.74428 11.6673 7.37495 11.4062 7.89184 10.884C8.40828 10.3618 8.6665 9.73398 8.6665 9.00065V6.33398H7.33317V9.00065C7.33317 9.36732 7.20539 9.68132 6.94984 9.94265C6.69428 10.2035 6.37762 10.334 5.99984 10.334C5.63317 10.334 5.31939 10.2035 5.0585 9.94265C4.79717 9.68132 4.6665 9.36732 4.6665 9.00065V5.33398C4.6665 5.23398 4.69984 5.15332 4.7665 5.09198C4.83317 5.0311 4.91095 5.00065 4.99984 5.00065C5.09984 5.00065 5.1805 5.0311 5.24184 5.09198C5.30273 5.15332 5.33317 5.23398 5.33317 5.33398V9.00065H6.6665V5.33398C6.6665 4.86732 6.50539 4.47287 6.18317 4.15065C5.86095 3.82843 5.4665 3.66732 4.99984 3.66732C4.53317 3.66732 4.13873 3.82843 3.8165 4.15065C3.49428 4.47287 3.33317 4.86732 3.33317 5.33398V9.00065C3.33317 9.73398 3.59428 10.3618 4.1165 10.884C4.63873 11.4062 5.2665 11.6673 5.99984 11.6673Z" fill="#DBD203"/>
+  </svg>
+</template>
+  

src/components/icons/IconDocDetail.vue

@@ -0,0 +1,5 @@
+<template>
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M13.3332 11.6673L11.3332 9.66732V11.0007H8.6665V12.334H11.3332V13.6673L13.3332 11.6673ZM7.19984 13.6673H1.99984C1.2665 13.6673 0.666504 13.0673 0.666504 12.334V1.66732C0.666504 0.933984 1.2665 0.333984 1.99984 0.333984H7.33317L11.3332 4.33398V7.73398C11.1332 7.66732 10.8665 7.66732 10.6665 7.66732C10.4665 7.66732 10.1998 7.66732 9.99984 7.73398V5.00065H6.6665V1.66732H1.99984V12.334H6.73317C6.79984 12.8007 6.99984 13.2673 7.19984 13.6673ZM3.33317 7.00065H8.6665V8.20065C8.59984 8.26732 8.53317 8.26732 8.4665 8.33398H3.33317V7.00065ZM3.33317 9.66732H6.6665V11.0007H3.33317V9.66732Z" fill="#0996C2"/>
+    </svg>
+</template>

src/components/side-nav-menu.vue

@@ -1,26 +1,31 @@
 <template>
   <div
-    class="dx-swatch-additional side-navigation-menu"
+    class="side-navigation-menu"
     @click="forwardClick"
   >
     <slot />
-    <div class="menu-container">
-      <dx-tree-view
-        ref="treeViewRef"
-        :items="menus"
-        key-expr="path"
-        selection-mode="single"
-        :focus-state-enabled="false"
-        expand-event="click"
-        @item-click="handleItemClick"
-        width="100%"
-      />
+    <div v-for="item in menus" :key="item.id" class="relative-view">
+      <img :src="item.icon" alt="icon" @click="handleIconClick(item.text)" :class="selectedMenus === item.text ? 'active-icons' : 'icons'">
+
+      <div ref="expandRef" v-if="item.text === selectedMenus" class="absolute-view">
+        <div class="expand-title">
+          <p>{{item.text}}</p>
+        </div>
+
+        <dx-scroll-view ref="scrollViewRef" :class="checkLength(item.items) ? 'expand-menu-height' : 'expand-menu'">
+          <div v-for="it in item.items" :key="it.id" class="wrap">
+            <p :class="route.path === it.path ? 'pointer-active' : 'pointer'" @click="handleItemClick(item.text,it.path)">
+              {{it.text}}
+            </p>
+          </div>
+        </dx-scroll-view>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import DxTreeView from "devextreme-vue/ui/tree-view";
+import DxScrollView from "devextreme-vue/scroll-view";
 import { sizes } from '../utils/media-query';
 import navigation from '../app-navigation';
 import { onMounted, ref, watch } from 'vue';
@@ -36,7 +41,12 @@ export default {
     const router = useRouter();
 
     const menus = ref("");
-    auth.getUser().then((e) => menus.value = e.data.menus);
+    const selectedMenus = ref("")
+
+    auth.getUser().then((e) => {
+      const listMenu = e.data.menus.filter((it) => it.text !== "Home")
+      menus.value = listMenu
+      });
     //console.log(navigation);
     console.log(menus);
 
@@ -48,29 +58,39 @@ export default {
       return {...item, expanded: isLargeScreen} 
     });
 
+    const expandRef = ref(null)
     const treeViewRef = ref(null);
+    const scrollViewRef = ref(null);
 
     function forwardClick (...args) {
       context.emit("click", args);
     }
 
-    function handleItemClick(e) {
-      if (!e.itemData.path || props.compactMode) {
+    function handleItemClick(text, path) {
+      if (!path) {
         return;
       }
-      router.push(e.itemData.path);
+      router.push(path);
+      selectedMenus.value = text
+    }
 
-      const pointerEvent = e.event;
-      pointerEvent.stopPropagation();
+    function handleIconClick(text) {
+      if(text === selectedMenus.value) {
+        selectedMenus.value = ""
+        return
+      }
+      selectedMenus.value = text 
     }
 
     function updateSelection () {
-      if (!treeViewRef.value || !treeViewRef.value.instance) {
-        return;
+      if(route.path === "/home") {
+        selectedMenus.value = "Home"
+        selectedMenus.value = ""
       }
+    }
 
-      treeViewRef.value.instance.selectItem(route.path);
-      treeViewRef.value.instance.expandItem(route.path);
+    function checkLength(it) {
+      return it.length > 4
     }
 
     onMounted(() => { 
@@ -105,11 +125,16 @@ export default {
       forwardClick,
       handleItemClick,
       updateSelection,
-      menus
+      menus,
+      route,
+      selectedMenus,
+      handleIconClick,
+      scrollViewRef,
+      checkLength,
+      expandRef
     };
-  },
-  components: {
-    DxTreeView
+  },components: {
+    DxScrollView
   }
 };
 </script>
@@ -117,95 +142,95 @@ export default {
 <style lang="scss">
 @import "../dx-styles.scss";
 @import "../themes/generated/variables.additional.scss";
+@import "../themes/generated/variables.base.scss";
 
 .side-navigation-menu {
   display: flex;
   flex-direction: column;
   min-height: 100%;
   height: 100%;
-  width: 250px !important;
+  width: $side-bar-width !important;
+  box-shadow: $base-shadow-color 4px 100px 10px 0px !important;
+  padding-top: 25px !important;
+  background-color: white;
+  padding-left: 9px;
+  
+  .relative-view {
+    position: relative;
 
-  .menu-container {
-    min-height: 100%;
-    display: flex;
-    flex: 1;
+    .icons {
+      border-radius: 4px !important;
+      width: $side-bar-icon-size !important;
+      height: $side-bar-icon-size !important;
+      border: 1px solid $base-border-color !important;
+      margin-bottom: 24px;
+      cursor: pointer;
+    }
 
-    .dx-treeview {
-      // ## Long text positioning
-      white-space: nowrap;
-      // ##
+    .active-icons {
+      border-radius: 4px !important;
+      width: $side-bar-icon-size !important;
+      height: $side-bar-icon-size !important;
+      border: 1px solid $datagrid-columnchooser-item-color !important;
+      margin-bottom: 24px;
+      cursor: pointer;
+    }
+    
+    .absolute-view {
+      position: absolute;
+      top: 0;
+      z-index: 1;
+      background: transparent;
+      left: $side-bar-expand-left;
+      width: $side-bar-expand-width;
 
-      // ## Icon width customization
-      .dx-treeview-item {
-        padding-left: 0;
-        padding-right: 0;
+        .pointer {
+          cursor: pointer;
+          width: 100%;
+          background: white;
+          padding: 4px 38px;
+          color: $base-text-color;
+        }
 
-        .dx-icon {
-          width: $side-panel-min-width !important;
+        .pointer-active {
+          cursor: pointer;
+          width: 100%;
+          background: white;
+          padding: 4px 38px;
+          color: $datagrid-columnchooser-item-color;
+        }
+
+        .expand-title {
+          border-radius: 0px 8px 0px 0px !important;
+          background: $datagrid-columnchooser-item-color;
           margin: 0 !important;
-        }
-      }
-      // ##
-
-      // ## Arrow customization
-      .dx-treeview-node {
-        padding: 0 0 !important;
-      }
-
-      .dx-treeview-toggle-item-visibility {
-        right: 10px;
-        left: auto;
-      }
-
-      .dx-rtl .dx-treeview-toggle-item-visibility {
-        left: 10px;
-        right: auto;
-      }
-      // ##
-
-      // ## Item levels customization
-      .dx-treeview-node {
-        &[aria-level="1"] {
-          font-weight: bold;
-          border-bottom: 1px solid $base-border-color;
+          color: white;
+          padding: 1px 22px;
+          font-size: 18px;
+          font-weight: 600;
         }
 
-        &[aria-level="2"] .dx-treeview-item-content {
-          font-weight: normal;
-          padding: 0 $side-panel-min-width;
+        .expand-menu {
+          background: white;
+          margin-top: 0px !important;
+          padding: 8px 0px;
+          border-radius: 0px 0px 8px 0px !important;
+        }
+
+        .expand-menu-height {
+          background: white;
+          margin-top: 0px !important;
+          padding: 8px 0px;
+          border-radius: 0px 0px 8px 0px !important;
+          height: 200px;
+        }
+
+        .no-wrap {
+          white-space: nowrap;
         }
       }
-      // ##
-    }
-
-    // ## Selected & Focuced items customization
-    .dx-treeview {
-      .dx-treeview-node-container {
-        .dx-treeview-node {
-          &.dx-state-selected:not(.dx-state-focused) > .dx-treeview-item {
-            background: transparent;
-          }
-
-          &.dx-state-selected > .dx-treeview-item * {
-            color: $base-accent;
-          }
-
-          &:not(.dx-state-focused) > .dx-treeview-item.dx-state-hover {
-            background-color: lighten($base-bg, 4);
-          }
-        }
-      }
-    }
-
-    .dx-theme-generic .dx-treeview {
-      .dx-treeview-node-container
-        .dx-treeview-node.dx-state-selected.dx-state-focused
-        > .dx-treeview-item
-        * {
-        color: inherit;
-      }
-    }
-    // ##
   }
+
+
 }
 </style>

src/dx-styles.scss

@@ -67,3 +67,8 @@
  }
 
 $side-panel-min-width: 60px;
+$side-bar-width: 76px;
+$side-bar-expand-left: 70px;
+$side-bar-icon-size: 56px;
+$side-bar-expand-width: 239px;
+$base-shadow-color: #3333331A;

src/layouts/side-nav-outer-toolbar.vue

@@ -9,7 +9,6 @@
     <dx-drawer
       class="layout-body"
       position="before"
-      template="menuTemplate"
       v-model:opened="menuOpened"
       :opened-state-mode="drawerOptions.menuMode"
       :reveal-mode="drawerOptions.menuRevealMode"
@@ -18,16 +17,18 @@
       :shading="drawerOptions.shaderEnabled"
       :close-on-outside-click="drawerOptions.closeOnOutsideClick"
     >
-      <dx-scroll-view ref="scrollViewRef" class="with-footer">
-        <slot />
-        <slot name="footer" />
-      </dx-scroll-view>
-      <template #menuTemplate>
-        <side-nav-menu
-          :compact-mode="!menuOpened"
-          @click="handleSideBarClick"
-        />
-      </template>
+      <div class="flex">
+        <div class="sidebar">
+          <side-nav-menu
+            :compact-mode="!menuOpened"
+            @click="handleSideBarClick"
+          />
+        </div>
+        <dx-scroll-view ref="scrollViewRef" class="with-footer">
+          <slot />
+          <slot name="footer" />
+        </dx-scroll-view>
+      </div>
     </dx-drawer>
   </div>
 </template>
@@ -122,6 +123,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import "../dx-styles.scss";
+
 .side-nav-outer-toolbar {
   flex-direction: column;
   display: flex;
@@ -132,4 +135,14 @@ export default {
 .layout-header {
   z-index: 1501;
 }
+
+.flex {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.sidebar {
+  width: $side-bar-width;
+}
 </style>

src/router.js

@@ -18,6 +18,7 @@ import RolesConfig from './views/master-config/roles-config';
 import UsersConfig from './views/master-config/users-config';
 import PermissionsConfig from './views/master-config/permissions-config';
 import User from './views/user-page';
+import DetailPermissionsConfig from './views/master-config/permissions-config/detail-permissions-config';
 
 /* Master Template */
 import RksTemplateKontrak from './views/rks/rks-template-kontrak';
@@ -296,13 +297,22 @@ const router = new createRouter({
       component: UsersConfig
     },
     {
-      path: "/master-config/permissions-config",
+      path: "/master-config/permission-config",
       name: "permissions-config",
       meta: {
         requiresAuth: true,
         layout: defaultLayout
       },
-      component: PermissionsConfig
+      component: PermissionsConfig,
+    },
+    {
+      path: "/master-config/permission-config/:id",
+      name: "detail-permissions-config",
+      meta: {
+        requiresAuth: true,
+        layout: defaultLayout
+      },
+      component: DetailPermissionsConfig,
     },
     {
       path: "/rks-daftar",

src/views/drp/drp-monitoring.vue

@@ -1,13 +1,207 @@
 <template>
   <div>
-    <h2 class="content-block">Drp Monitoring</h2>
+    <h3 class="content-block main-title">Monitoring DRP</h3>
+    <p class="content-block">Monitoring DRP</p>
     <div class="content-block">
       <div class="dx-card responsive-paddings">
-        Put your content here
+        <div id="app-container">
+          <DxDataGrid
+            ref="currDataGrid"
+            :data-source="dataSource"
+            key-expr="id"
+            :allow-column-reordering="true"
+            :column-auto-width="true"
+          >
+            <DxEditing
+              :allow-adding="true"
+              :allow-updating="true"
+              :allow-deleting="true"
+              :use-icons="true"
+              mode="popup"
+            >
+              <DxTexts
+                add-row="Tambah"
+                edit-row="Ubah"
+                delete-row="Hapus"
+                confirm-delete-message="Apakah anda yakin untuk menghapus data ini?"
+                save-row-changes="Simpan"
+                cancel-row-changes="Batal"
+              ></DxTexts>
+              <DxForm label-location="top" :col-count="1">
+                <DxItem dataField="tahun">
+                  <DxRequiredRule message="Tahun harus diisi" />
+                </DxItem>
+              </DxForm>
+              <DxPopup
+                :hide-on-outside-click="true"
+                :show-title="true"
+                :width="400"
+                :height="400"
+                title="Form Approval  DRP "
+              >
+              </DxPopup>
+            </DxEditing>
+            <DxToolbar>
+              <DxItem name="groupPanel" />
+              <DxItem name="searchPanel" location="before" />
+              <DxItem name="exportButton" />
+              <DxItem name="columnChooserButton" />
+            </DxToolbar>
+            <DxPaging :page-size="5" />
+            <DxPager
+              :visible="true"
+              :allowed-page-sizes="[5, 10, 50]"
+              display-mode="compact"
+              :show-page-size-selector="true"
+              :show-info="true"
+              :show-navigation-buttons="true"
+              info-text="Hal {0} dari {1} ({2} data)"
+            />
+            <DxFilterRow :visible="false" />
+            <DxColumn
+              cell-template="row-cell-template"
+              caption="No"
+              :width="45"
+            ></DxColumn>
+            <DxColumn data-field="tahun" caption="Tahun DRP"></DxColumn>
+            <DxColumn
+              data-field="approveStatus"
+              caption="Status Approve"
+              editor-type="dxCheckBox"
+            ></DxColumn>
+            <DxColumn data-field="" caption="Version"></DxColumn>
+            <DxColumn data-field="" caption="VP Pengadaan"></DxColumn>
+            <DxColumn data-field="" caption="Komite Value for Money"></DxColumn>
+            <DxColumn data-field="" caption="Direktur Utama"></DxColumn>
+            <DxColumn type="buttons" caption="Aksi" :fixed="true">
+              <DxButton
+                text="Dokumen"
+                hint="Dokumen Pendukung DRP"
+                :on-click="linkDokumen"
+              >
+                <template #default>
+                  <IconEye />
+                </template>
+              </DxButton>
+              <DxButton
+                text="Detil"
+                hint="Detil/Konten DRP"
+                :on-click="linkDetail">
+                <template #default>
+                  <IconDocChecked />
+                </template>
+              </DxButton>
+            </DxColumn>
+            <template #row-cell-template="{ data }">
+              <DxText>{{ data.rowIndex + 1 }}</DxText>
+            </template>
+            <DxSearchPanel
+              :visible="true"
+              :highlight-case-sensitive="true"
+              :width="300"
+              placeholder="Cari Approval DRP..."
+            />
+          </DxDataGrid>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
-<style lang="scss">
-</style>
+<script>
+import DxDataGrid, {
+  DxEditing,
+  DxItem,
+  DxForm,
+  DxPopup,
+  DxColumn,
+  DxFilterRow,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxToolbar,
+  DxTexts,
+  DxButton,
+} from "devextreme-vue/data-grid";
+import CustomStore from "devextreme/data/custom_store";
+import IconEye from '../../components/icons/IconEye.vue';
+import IconDocChecked from '../../components/icons/IconDocChecked.vue';
+
+const URL = process.env.VUE_APP_ROOT_API + "/drp/approval";
+
+const dataSource = new CustomStore({
+  key: "id",
+
+  load: () => {
+    return fetch(URL+process.env.VUE_APP_PAGE_SIZE)
+      .then((response) => response.json())
+      .then((response) => {
+        console.log("drp:", response.data);
+        return {
+          data: response.data,
+          totalCount: response.pagination.totalRecords,
+        };
+      })
+      .catch(() => {
+        throw new Error("Terdapat kesalahan memuat data");
+      });
+  },
+
+  insert: (values) => {
+    return fetch(URL, {
+      method: "POST",
+      body: JSON.stringify(values),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  },
+
+  update: (key, values) => {
+    return fetch(URL + "/" + encodeURIComponent(key), {
+      method: "PUT",
+      body: JSON.stringify(values),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  },
+
+  remove: (key) => {
+    return fetch(URL + "/" + encodeURIComponent(key), {
+      method: "DELETE",
+    });
+  },
+});
+
+export default {
+  components: {
+    DxDataGrid,
+    DxEditing,
+    DxItem,
+    DxForm,
+    DxPopup,
+    DxColumn,
+    DxFilterRow,
+    DxPager,
+    DxPaging,
+    DxSearchPanel,
+    DxToolbar,
+    DxTexts,
+    DxButton,
+    IconEye,
+    IconDocChecked
+  },
+  methods: {
+    linkDetail(e) {
+      location.href='#/drp/drp-pengadaan?drpid='+e.row.data.id;
+    },
+  },
+  data() {
+    return {
+      //jsonUrl: URL,
+      dataSource,
+    };
+  },
+};
+</script>

src/views/drp/drp-pengadaan.vue

@@ -7,7 +7,36 @@
         <DxItem text="Tahun DRP"></DxItem>
       </DxMenu></p>
     <div class="content-block">
+      
       <div class="dx-card responsive-paddings">
+        <div class="dx-card responsive-paddings" style="border: 0;">
+          <div>
+            <DxBox 
+              :height="30" direction="row"
+              witdh="100%">
+              <DxItem :ratio="2">
+                <div>
+                  <div class="dx-fieldset-header">Informasi Tahun DRP</div>
+                </div>
+              </DxItem>
+            </DxBox>
+            <DxBox direction="row"
+              witdh="100%">
+              <DxItem :ratio="1">
+                <div class="dx-field">
+                  <div class="dx-field-label">Tahun</div>
+                  <div class="dx-field-value-static" :data-source="drpDetail.tahun"></div>
+                </div>
+              </DxItem>
+              <DxItem :ratio="1">
+                <div class="dx-field">
+                  <div class="dx-field-label">Status DRP</div>
+                  <div class="dx-field-value-static">Penyusunan</div>
+                </div>
+              </DxItem>
+            </DxBox>
+          </div>
+        </div>
         <div id="app-container">
           <DxPopup
             v-model:visible="isPopupDokumenPengadaan"
@@ -91,7 +120,7 @@
                     :width="400"
                     :height="400"
                     title="Form DRP Pengadaan"
-                ></DxPopup>
+                  />
             </DxEditing>
             <DxToolbar>
                 <DxItem name="groupPanel" />
@@ -100,7 +129,7 @@
                   <DxTexts add-row="Tambah"></DxTexts>
                 </DxItem>
             </DxToolbar>
-            <DxPaging :page-size="5" />
+            <DxPaging :page-size="10" />
             <DxPager 
             :visible="true"
             :allowed-page-sizes="[5, 10, 50]" 
@@ -200,14 +229,16 @@ import {
   DxLookup,
   DxColumnFixing,
   DxFormat,
-  DxButton
+  DxButton,
 } from "devextreme-vue/data-grid";
 import DxMenu from 'devextreme-vue/menu';
+import { DxBox } from 'devextreme-vue/box';
 import CustomStore from "devextreme/data/custom_store";
 import 'whatwg-fetch';
 import PopUpPengadaanDokumen from './drp-pengadaan-dokumen.vue';
 
 const URL = process.env.VUE_APP_ROOT_API+'/drp/pengadaan/list';
+const URL_drp = process.env.VUE_APP_ROOT_API+'/drp/drp';
 const URL_metodepenyampaian = process.env.VUE_APP_ROOT_API+'/metodepenyampaian';
 const URL_supplypositioningmatrix = process.env.VUE_APP_ROOT_API+'/supplypositioningmatrix';
 const URL_unitinisiator = process.env.VUE_APP_ROOT_API+'/unitinisiator';
@@ -362,6 +393,37 @@ const strategipengadaanOptions = new CustomStore({
     }
   });
 
+const drpinfoDetail = new CustomStore({
+  key: 'id',
+  
+  load:() => {
+    let uri = window.location.href.split('?');
+      let drpid = '';
+      if(uri.length == 2) {
+        let vars = uri[1].split('&');
+        let getVars = {};
+        let tmp = '';
+        vars.forEach(function(v) {
+          tmp = v.split('=');
+          if(tmp.length == 2)
+            getVars[tmp[0]] = tmp[1];
+        });
+        //console.log(getVars['drpid']);
+        drpid = getVars['drpid'];
+      }
+    
+      return fetch(URL_drp+'/'+drpid)
+      .then((response) => response.json())
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  },
+
+  byKey: (key) => {
+      return fetch(URL_drp+'/' + key)
+      .then((response) => response.json())
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  }
+});  
+
 const dataSource = new CustomStore({
   key: 'id',
 
@@ -384,6 +446,7 @@ const dataSource = new CustomStore({
       return fetch(URL+'/'+drpid)
       .then(response => response.json())
       .then(response => {
+        //console.log(response);
         return {
           data: response.data,
           totalCount: response.pagination.totalRecords
@@ -439,7 +502,8 @@ export default {
     DxFormat,
     DxMenu,
     DxButton,
-    PopUpPengadaanDokumen
+    PopUpPengadaanDokumen,
+    DxBox
   },
 
   methods: {
@@ -472,7 +536,8 @@ export default {
           jenispengadaan: jenispengadaanOptions,
           metodepengadaan: metodepengadaanOptions,
           strategipengadaan: strategipengadaanOptions,
-          isPopupDokumenPengadaan: false
+          isPopupDokumenPengadaan: false,
+          drpDetail: drpinfoDetail,
       }
   },
 }

src/views/drp/drp-penyusunan.vue

@@ -12,7 +12,7 @@
       title="Upload Dokumen Pendukung"
     >
       <template #content>
-        <PopUpUploadDokumenPendukung :drpId="selectedDrpId" :drpTahun="selectedDrpTahun" @addDokumenRKAP="addDokumenRKAP" @addDokumenPendukung="addDokumenPendukung" />
+        <PopUpUploadDokumenPendukung v-if="isPopupUploadDokumenPendukung" :drpId="selectedDrpId" :drpTahun="selectedDrpTahun" @addDokumenRKAP="addDokumenRKAP" @addDokumenPendukung="addDokumenPendukung" />
       </template>
       <DxToolbarItem
         widget="dxButton"
@@ -57,12 +57,12 @@
                 </DxItem>
               </DxForm>
               <DxPopup
-                :hide-on-outside-click="true"
-                :show-title="true"
-                :width="400"
-                :height="400"
-                title="Form Penyusunan DRP">
-              </DxPopup>
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="400"
+                    :height="400"
+                    title="Tahun DRP"
+               ></DxPopup>
             </DxEditing>
             <DxToolbar>
               <DxItem name="groupPanel" />
@@ -70,10 +70,8 @@
               <DxItem name="addRowButton" show-text="always" css-class="">
                 <DxTexts add-row="Tambah"></DxTexts>
               </DxItem>
-              <DxItem name="exportButton" />
-              <DxItem name="columnChooserButton" />
             </DxToolbar>
-            <DxPaging :page-size="5" />
+            <DxPaging :page-size="10" />
             <DxPager
               :visible="true"
               :allowed-page-sizes="[5, 10, 50]"
@@ -107,22 +105,31 @@
             <DxColumn type="buttons" caption="Aksi">
               <DxButton
                 text="Dokumen"
-                icon="attach"
                 hint="Dokumen Pendukung DRP"
                 :on-click="linkDokumen"
-              />
+              >
+                <template #default>
+                  <IconAttach />
+                </template>
+              </DxButton>
               <DxButton
-                text="Detil"
-                icon="search"
-                hint="Detil/Konten DRP"
+                text="View"
+                hint="Detail DRP"
+                :on-click="linkDokumen"
+              >
+                <template #default>
+                  <IconEye />
+                </template>
+              </DxButton>
+              <DxButton
+                text="Detail"
+                hint="Detail/Konten DRP"
                 :on-click="linkDetail"
-              />
-              <DxButton
-                text="Kirim"
-                icon="movetofolder"
-                hint="Kirim DRP"
-                :on-click="linkKirim"
-              />
+              >
+                <template #default>
+                  <IconDocDetail />
+                </template>
+              </DxButton>
             </DxColumn>
             <DxColumn type="adaptive" :width="50">
               <DxButton hint="detail" icon="copy" />
@@ -162,8 +169,13 @@ import DxDataGrid, {
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
 import Popup, { DxToolbarItem } from 'devextreme-vue/popup';
+import IconAttach from '../../components/icons/IconAttach.vue';
+import IconEye from '../../components/icons/IconEye.vue';
+import IconDocDetail from '../../components/icons/IconDocDetail.vue';
+
 
 import PopUpUploadDokumenPendukung from './drp-upload-dokumen-pendukung.vue'
+import http from "@/utils/http";
 
 const approveStatus = [
   { name: "Penyusunan", value: 0 },
@@ -175,6 +187,7 @@ const approveStatus = [
 ];
 
 const URL = process.env.VUE_APP_ROOT_API + "/drp";
+const URL_UPLOAD = process.env.VUE_APP_ROOT_API + "/drp/upload/dokumen";
 
 const dataSource = new CustomStore({
   key: "id",
@@ -245,6 +258,9 @@ export default {
     DxToolbarItem,
     Popup,
     PopUpUploadDokumenPendukung,
+    IconAttach,
+    IconEye,
+    IconDocDetail
   },
   methods: {
     linkDokumen(e) {
@@ -272,6 +288,51 @@ export default {
     addDokumenPendukung(payload) {
       this.dataDrpDokumenPendukung.push(payload)
     },
+    save() {
+
+      const dataDrpDokumen = this.dataDrpDokumen.map(item => {
+
+        http.post(URL_UPLOAD, item.formData)
+          .then((res) => res.json())
+          .then((json) => console.log(json))
+
+        return {
+          jenisDokumenId : item.jenisDokumenId,
+          filename : item.filename,
+          keterangan : item.keterangan,
+        }
+      });
+
+      const dataDrpDokumenPendukung = this.dataDrpDokumenPendukung.map(item => {
+
+        http.post(URL_UPLOAD, item.formData)
+          .then((res) => res.json())
+          .then((json) => console.log(json))
+
+        return {
+          jenisDokumenId : item.jenisDokumenId,
+          filename : item.filename,
+          keterangan : item.keterangan,
+        }
+      });
+
+      http.post(URL, {
+        id : this.selectedDrpId,
+        approveStatus : 'Penyusunan',
+        isApprove : false,
+        dataDrpDokumen,
+        dataDrpDokumenPendukung,
+      })
+        .then((res) => res.json())
+        .then((json) => {
+          console.log(json);
+
+          this.isPopupUploadDokumenPendukung = false;
+        })
+        .catch(e => {
+          console.log(e);
+        })
+    }
   },
   data() {
     return {
@@ -286,9 +347,7 @@ export default {
       fileNames: [],
       saveButtonOptions: {
         text: 'Simpan',
-        onClick: function(e) { 
-          console.log(e);
-        }
+        onClick: this.save,
       },
       cancelButtonOptions: {
         text: 'Batalkan',

src/views/master-config/permissions-config.vue

@@ -12,9 +12,9 @@
             :column-auto-width="true">
             <DxRemoteOperations :group-paging="true" />
             <DxEditing
-                :allow-adding="true"
-                :allow-updating="true"
-                :allow-deleting="true"
+                :allow-adding="false"
+                :allow-updating="false"
+                :allow-deleting="false"
                 :use-icons="true"
                 mode="popup">
                 <DxTexts 
@@ -28,7 +28,7 @@
                 <DxForm label-location="top" :col-count="1">
                   <DxItem dataField="role" />
                   <DxItem dataField="keterangan" />
-                  <DxItem dataField="is_active" editor-type="dxCheckBox" />
+                  <DxItem dataField="isActive" editor-type="dxCheckBox" />
                 </DxForm>
                 <DxPopup
                     :hide-on-outside-click="true"
@@ -60,10 +60,13 @@
             <DxColumn data-field="id" caption="No" :width="45"></DxColumn>
             <DxColumn data-field="role" caption="Role"></DxColumn>
             <DxColumn data-field="keterangan" caption="Keterangan"></DxColumn>
-            <DxColumn data-field="is_active" caption="Status"></DxColumn>
+            <DxColumn data-field="isActive" caption="Status"></DxColumn>
             <DxColumn type="buttons" caption="Aksi">
-              <DxButton name="edit"/>
-              <DxButton name="delete"/>
+              <DxButton 
+                text="Detail"
+                icon="rename"
+                :on-click="handleDetail"
+            />
             </DxColumn>
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300"  placeholder="Cari Manajemen Permission..."/>
             <!--<DxExport
@@ -90,11 +93,13 @@ import DxDataGrid, {
   DxPaging,
   DxSearchPanel,
   DxToolbar,
-  DxTexts
+  DxTexts,
+  DxButton,
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
+import { useRouter } from 'vue-router';
 
-const URL = process.env.VUE_APP_ROOT_API+'/permission';
+const URL = process.env.VUE_APP_ROOT_API+'/roles';
 
 const customDataSource = new CustomStore({
   key: 'id',
@@ -102,6 +107,9 @@ const customDataSource = new CustomStore({
   load: () => {
       return fetch(URL+process.env.VUE_APP_PAGE_SIZE)
       .then((response) => response.json())
+      .then(response => {
+        return response.data;
+      })
       .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
   },
 
@@ -145,15 +153,22 @@ export default {
     DxPaging,
     DxSearchPanel,
     DxToolbar,
-    DxTexts
+    DxTexts,
+    DxButton
   },
     
   data() {
       return {
           //jsonUrl: URL,
           customDataSource,
+          router: useRouter()
       }
   },
+  methods: {
+    handleDetail() {
+      this.router.push({ name: 'detail-permissions-config', params: { id: '123'}})
+    }
+  }
 }
 </script>
 

src/views/master-config/permissions-config/detail-permissions-config.vue

@@ -0,0 +1,249 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Manajemen Permission</h3>
+    <p class="content-block">Manajemen User</p>
+    <div class="content-block">
+      <div class="dx-card responsive-paddings">
+        <div id="app-container">
+          <div class="header-detail">
+            <h4>Informasi Nama Role</h4>
+            <span>Nama Role A</span>
+          </div>
+          <DxDataGrid
+            ref="detail-data-grid"
+            :data-source="dataSource"
+            key-expr="id"
+            :allow-column-reordering="true"
+            :column-auto-width="true"
+          >
+            <DxToolbar>
+              <DxItem name="addRowButton" show-text="always" css-class="">
+                <DxTexts add-row="Tambah"></DxTexts>
+              </DxItem>
+            </DxToolbar>
+            <DxPaging :page-size="5" />
+            <DxPager
+              :visible="true"
+              :allowed-page-sizes="[5, 10, 50]"
+              display-mode="compact"
+              :show-page-size-selector="true"
+              :show-info="true"
+              :show-navigation-buttons="true"
+              info-text="Hal {0} dari {1} ({2} data)"
+            />
+            <DxColumn data-field="menu" caption="Menu"> </DxColumn>
+            <DxColumn data-field="sub-menu" caption="Sub Menu"> </DxColumn>
+            <DxColumn type="buttons" caption="Access">
+              <DxButton text="Detail" :on-click="handleDetail">
+                <label class="switch">
+                  <input type="checkbox" />
+                  <span class="slider round"></span> </label
+              ></DxButton>
+            </DxColumn>
+            <DxColumn type="buttons" caption="Create">
+              <DxButton text="Detail" :on-click="handleDetail">
+                <label class="switch">
+                  <input type="checkbox" />
+                  <span class="slider round"></span> </label
+              ></DxButton>
+            </DxColumn>
+            <DxColumn type="buttons" caption="Read">
+              <DxButton text="Detail" :on-click="handleDetail">
+                <label class="switch">
+                  <input type="checkbox" />
+                  <span class="slider round"></span> </label
+              ></DxButton>
+            </DxColumn>
+            <DxColumn type="buttons" caption="Update">
+              <DxButton text="Detail" :on-click="handleDetail">
+                <label class="switch">
+                  <input type="checkbox" />
+                  <span class="slider round"></span> </label
+              ></DxButton>
+            </DxColumn>
+            <DxColumn type="buttons" caption="Delete">
+              <DxButton text="Detail" :on-click="handleDetail">
+                <label class="switch">
+                  <input type="checkbox" />
+                  <span class="slider round"></span> </label
+              ></DxButton>
+            </DxColumn>
+            <DxSearchPanel
+              :visible="true"
+              :highlight-case-sensitive="true"
+              :width="300"
+              placeholder="Cari Manajemen User..."
+            />
+          </DxDataGrid>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CustomStore from "devextreme/data/custom_store";
+import notify from "devextreme/ui/notify";
+import {
+  DxDataGrid,
+  DxPaging,
+  DxPager,
+  DxSearchPanel,
+  DxColumn,
+  DxButton,
+} from "devextreme-vue/data-grid";
+
+export default {
+  components: {
+    DxDataGrid,
+    DxPaging,
+    DxPager,
+    DxSearchPanel,
+    DxColumn,
+    DxButton,
+  },
+  setup() {
+    const URL = process.env.VUE_APP_ROOT_API + "/permission";
+
+    const dataSource = new CustomStore({
+      key: "id",
+
+      load: async () => {
+        await fetch(URL)
+          .then((response) => response.json())
+          .then((response) => response.data)
+          .catch((err) => {
+            if (err.code) {
+              notify(
+                {
+                  message: err.title,
+                  position: {
+                    my: "center top",
+                    at: "center top",
+                  },
+                },
+                "error",
+                3000
+              );
+            } else {
+              notify(
+                {
+                  message: "Data Berhasil Dibuat",
+                  position: {
+                    my: "center top",
+                    at: "center top",
+                  },
+                },
+                "success",
+                3000
+              );
+            }
+          });
+        return [
+          {
+            id: 1,
+            menu: "Manajemen A",
+            "sub-menu": "Sub Manajemen A",
+          },
+          {
+            id: 2,
+            menu: "Manajemen B",
+            "sub-menu": "Sub Manajemen B",
+          },
+        ];
+      },
+    });
+
+    return {
+      dataSource,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.float-rigth {
+  float: right;
+}
+
+.header-detail h4::before {
+  content: "";
+  width: 4px;
+  height: 24px;
+  background-color: #0996c2;
+  display: inline-block;
+  margin-right: 6px;
+  font-size: 18px;
+  color: #333333;
+  font-weight: 500;
+}
+
+.header-detail span {
+  color: #333333;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 24px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #c4c4c4;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+input:checked + .slider {
+  background-color: #21cd3c;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #21cd3c;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(16px);
+  -ms-transform: translateX(16px);
+  transform: translateX(16px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+</style>

src/views/master-config/roles-config.vue

@@ -89,35 +89,68 @@ import DxDataGrid, {
   DxSearchPanel,
   DxToolbar,
   DxTexts,
-  DxRequiredRule
+  DxRequiredRule,
+  DxButton,
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
+import { ref } from "vue"
+import notify from 'devextreme/ui/notify';
 
 const URL = process.env.VUE_APP_ROOT_API+'/roles';
+const data = ref([])
 
 const dataSource = new CustomStore({
   key: 'id',
 
-  load: () => {
-      return fetch(URL+process.env.VUE_APP_PAGE_SIZE)
+  load: async () => {
+      return await fetch(URL+process.env.VUE_APP_PAGE_SIZE)
       .then((response) => response.json())
+      .then((response) => {
+        data.value = response.data;
+        return response.data;
+      })
       .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
   },
 
   insert: (values) => {
-        return fetch(URL, {
+        fetch(URL, {
             method: "POST",
             body: JSON.stringify(values),
             headers: {
                 'Content-Type': 'application/json'
             }
+        }).then((resp) => {
+          return resp.json()
+        }).then(resp => {
+          if (resp.code) {
+            notify({
+              message: resp.title,
+              position: {
+                my: 'center top',
+                at: 'center top',
+              },
+            }, 'error', 3000);
+          } else {
+            notify({
+              message: 'Data Berhasil Dibuat',
+              position: {
+                my: 'center top',
+                at: 'center top',
+              },
+            }, 'success', 3000);
+          }
         });
     },
 
   update: (key, values) => {
+    const findData = data.value.find(item => item.id === key)
+    const payload = {
+      ...findData,
+      ...values
+    }
       return fetch(URL + "/" + encodeURIComponent(key), {
           method: "PUT",
-          body: JSON.stringify(values),
+          body: JSON.stringify(payload),
           headers: {
               'Content-Type': 'application/json'
           }
@@ -146,6 +179,7 @@ export default {
     DxToolbar,
     DxTexts,
     DxRequiredRule,
+    DxButton,
   },
   
   data() {

src/views/master-config/users-config.vue

@@ -129,6 +129,9 @@ import {
   DxEmailRule
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
+import { ref } from "vue"
+import notify from 'devextreme/ui/notify';
+import auth from '../../auth.js'
 
 const URL = process.env.VUE_APP_ROOT_API+'/users';
 const URL_instansi = process.env.VUE_APP_ROOT_API+'/instansi';
@@ -136,6 +139,8 @@ const URL_bidang = process.env.VUE_APP_ROOT_API+'/bidang';
 const URL_jabatan = process.env.VUE_APP_ROOT_API+'/jabatan';
 const URL_role = process.env.VUE_APP_ROOT_API+'/roles';
 
+const data = ref([])
+
 const instansiOptions = new CustomStore({
   key: 'id',
   
@@ -211,26 +216,58 @@ const dataSource = new CustomStore({
 
   load: () => {
       return fetch(URL)
-      .then((response) => response.json())
+      .then((response) => {
+        return response.json()
+      })
+      .then((response) => {
+        data.value = response.data
+        return response.data
+      })
       .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
   },
 
-  insert: (values) => {
-        values.password = process.env.VUE_APP_DEFAULT_PASS;
-        //console.log(values);
-        return fetch(URL, {
+  insert: async (values) => {
+        await fetch(URL, {
             method: "POST",
-            body: JSON.stringify(values),
+            body: JSON.stringify({
+              ...values,
+              password : auth.encrypt(process.env.VUE_APP_DEFAULT_PASS)
+            }),
             headers: {
                 'Content-Type': 'application/json'
             }
-        });
+        }).then(res => {
+          return res.json()
+        }).then(res => {
+          if (res.code) {
+            notify({
+              message: res.title,
+              position: {
+                my: 'center top',
+                at: 'center top',
+              },
+            }, 'error', 3000);
+          } else {
+            notify({
+              message: 'Data Berhasil Dibuat',
+              position: {
+                my: 'center top',
+                at: 'center top',
+              },
+            }, 'success', 3000);
+          }
+        })
     },
 
   update: (key, values) => {
+    const findData = data.value.find(item => item.id === key)
+    const payload = {
+      ...findData,
+      ...values
+    }
       return fetch(URL + "/" + encodeURIComponent(key), {
           method: "PUT",
-          body: JSON.stringify(values),
+          body: JSON.stringify(payload),
           headers: {
               'Content-Type': 'application/json'
           }