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="false"
+        :visible="menuToggleEnabled"
         location="before"
         css-class="menu-button"
       >
@@ -142,7 +142,7 @@ export default {
 }
 
 .header-title .dx-item-content {
-  padding: 0 24px;
+  padding: 0;
   margin: 0;
 }
 

src/components/icons/IconAttach.vue

@@ -1,6 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-<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,31 +1,26 @@
 <template>
   <div
-    class="side-navigation-menu"
+    class="dx-swatch-additional side-navigation-menu"
     @click="forwardClick"
   >
     <slot />
-    <div v-for="item in menus" :key="item.id" class="relative-view">
+    <div class="menu-container">
-      <img :src="item.icon" alt="icon" @click="handleIconClick(item.text)" :class="selectedMenus === item.text ? 'active-icons' : 'icons'">
+      <dx-tree-view
-
+        ref="treeViewRef"
-      <div ref="expandRef" v-if="item.text === selectedMenus" class="absolute-view">
+        :items="menus"
-        <div class="expand-title">
+        key-expr="path"
-          <p>{{item.text}}</p>
+        selection-mode="single"
-        </div>
+        :focus-state-enabled="false"
-
+        expand-event="click"
-        <dx-scroll-view ref="scrollViewRef" :class="checkLength(item.items) ? 'expand-menu-height' : 'expand-menu'">
+        @item-click="handleItemClick"
-          <div v-for="it in item.items" :key="it.id" class="wrap">
+        width="100%"
-            <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 DxScrollView from "devextreme-vue/scroll-view";
+import DxTreeView from "devextreme-vue/ui/tree-view";
 import { sizes } from '../utils/media-query';
 import navigation from '../app-navigation';
 import { onMounted, ref, watch } from 'vue';
@@ -41,12 +36,7 @@ export default {
     const router = useRouter();
 
     const menus = ref("");
-    const selectedMenus = ref("")
+    auth.getUser().then((e) => menus.value = e.data.menus);
-
-    auth.getUser().then((e) => {
-      const listMenu = e.data.menus.filter((it) => it.text !== "Home")
-      menus.value = listMenu
-      });
     //console.log(navigation);
     console.log(menus);
 
@@ -58,39 +48,29 @@ 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(text, path) {
+    function handleItemClick(e) {
-      if (!path) {
+      if (!e.itemData.path || props.compactMode) {
         return;
       }
-      router.push(path);
+      router.push(e.itemData.path);
-      selectedMenus.value = text
-    }
 
-    function handleIconClick(text) {
+      const pointerEvent = e.event;
-      if(text === selectedMenus.value) {
+      pointerEvent.stopPropagation();
-        selectedMenus.value = ""
-        return
-      }
-      selectedMenus.value = text 
     }
 
     function updateSelection () {
-      if(route.path === "/home") {
+      if (!treeViewRef.value || !treeViewRef.value.instance) {
-        selectedMenus.value = "Home"
+        return;
-        selectedMenus.value = ""
-      }
       }
 
-    function checkLength(it) {
+      treeViewRef.value.instance.selectItem(route.path);
-      return it.length > 4
+      treeViewRef.value.instance.expandItem(route.path);
     }
 
     onMounted(() => { 
@@ -125,16 +105,11 @@ export default {
       forwardClick,
       handleItemClick,
       updateSelection,
-      menus,
+      menus
-      route,
-      selectedMenus,
-      handleIconClick,
-      scrollViewRef,
-      checkLength,
-      expandRef
     };
-  },components: {
+  },
-    DxScrollView
+  components: {
+    DxTreeView
   }
 };
 </script>
@@ -142,95 +117,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: $side-bar-width !important;
+  width: 250px !important;
-  box-shadow: $base-shadow-color 4px 100px 10px 0px !important;
-  padding-top: 25px !important;
-  background-color: white;
-  padding-left: 9px;
 
-  .relative-view {
+  .menu-container {
-    position: relative;
+    min-height: 100%;
+    display: flex;
+    flex: 1;
 
-    .icons {
+    .dx-treeview {
-      border-radius: 4px !important;
+      // ## Long text positioning
-      width: $side-bar-icon-size !important;
-      height: $side-bar-icon-size !important;
-      border: 1px solid $base-border-color !important;
-      margin-bottom: 24px;
-      cursor: pointer;
-    }
-
-    .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;
-
-        .pointer {
-          cursor: pointer;
-          width: 100%;
-          background: white;
-          padding: 4px 38px;
-          color: $base-text-color;
-        }
-
-        .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;
-          color: white;
-          padding: 1px 22px;
-          font-size: 18px;
-          font-weight: 600;
-        }
-
-        .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;
+      // ##
+
+      // ## Icon width customization
+      .dx-treeview-item {
+        padding-left: 0;
+        padding-right: 0;
+
+        .dx-icon {
+          width: $side-panel-min-width !important;
+          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;
+        }
+
+        &[aria-level="2"] .dx-treeview-item-content {
+          font-weight: normal;
+          padding: 0 $side-panel-min-width;
+        }
+      }
+      // ##
+    }
+
+    // ## 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,8 +67,3 @@
  }
 
 $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,6 +9,7 @@
     <dx-drawer
       class="layout-body"
       position="before"
+      template="menuTemplate"
       v-model:opened="menuOpened"
       :opened-state-mode="drawerOptions.menuMode"
       :reveal-mode="drawerOptions.menuRevealMode"
@@ -17,18 +18,16 @@
       :shading="drawerOptions.shaderEnabled"
       :close-on-outside-click="drawerOptions.closeOnOutsideClick"
     >
-      <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>
+      <template #menuTemplate>
+        <side-nav-menu
+          :compact-mode="!menuOpened"
+          @click="handleSideBarClick"
+        />
+      </template>
     </dx-drawer>
   </div>
 </template>
@@ -123,8 +122,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../dx-styles.scss";
-
 .side-nav-outer-toolbar {
   flex-direction: column;
   display: flex;
@@ -135,14 +132,4 @@ export default {
 .layout-header {
   z-index: 1501;
 }
-
-.flex {
-  display: flex;
-  height: 100%;
-  width: 100%;
-}
-
-.sidebar {
-  width: $side-bar-width;
-}
 </style>

src/router.js

@@ -18,7 +18,6 @@ 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';
@@ -297,22 +296,13 @@ const router = new createRouter({
       component: UsersConfig
     },
     {
-      path: "/master-config/permission-config",
+      path: "/master-config/permissions-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,207 +1,13 @@
 <template>
   <div>
-    <h3 class="content-block main-title">Monitoring DRP</h3>
+    <h2 class="content-block">Drp Monitoring</h2>
-    <p class="content-block">Monitoring DRP</p>
     <div class="content-block">
       <div class="dx-card responsive-paddings">
-        <div id="app-container">
+        Put your content here
-          <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>
 
-<script>
+<style lang="scss">
-import DxDataGrid, {
+</style>
-  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,36 +7,7 @@
         <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"
@@ -120,7 +91,7 @@
                     :width="400"
                     :height="400"
                     title="Form DRP Pengadaan"
-                  />
+                ></DxPopup>
             </DxEditing>
             <DxToolbar>
                 <DxItem name="groupPanel" />
@@ -129,7 +100,7 @@
                   <DxTexts add-row="Tambah"></DxTexts>
                 </DxItem>
             </DxToolbar>
-            <DxPaging :page-size="10" />
+            <DxPaging :page-size="5" />
             <DxPager 
             :visible="true"
             :allowed-page-sizes="[5, 10, 50]" 
@@ -229,16 +200,14 @@ 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';
@@ -393,37 +362,6 @@ 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',
 
@@ -446,7 +384,6 @@ 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
@@ -502,8 +439,7 @@ export default {
     DxFormat,
     DxMenu,
     DxButton,
-    PopUpPengadaanDokumen,
+    PopUpPengadaanDokumen
-    DxBox
   },
 
   methods: {
@@ -536,8 +472,7 @@ 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 v-if="isPopupUploadDokumenPendukung" :drpId="selectedDrpId" :drpTahun="selectedDrpTahun" @addDokumenRKAP="addDokumenRKAP" @addDokumenPendukung="addDokumenPendukung" />
+        <PopUpUploadDokumenPendukung :drpId="selectedDrpId" :drpTahun="selectedDrpTahun" @addDokumenRKAP="addDokumenRKAP" @addDokumenPendukung="addDokumenPendukung" />
       </template>
       <DxToolbarItem
         widget="dxButton"
@@ -61,8 +61,8 @@
                 :show-title="true"
                 :width="400"
                 :height="400"
-                    title="Tahun DRP"
+                title="Form Penyusunan DRP">
-               ></DxPopup>
+              </DxPopup>
             </DxEditing>
             <DxToolbar>
               <DxItem name="groupPanel" />
@@ -70,8 +70,10 @@
               <DxItem name="addRowButton" show-text="always" css-class="">
                 <DxTexts add-row="Tambah"></DxTexts>
               </DxItem>
+              <DxItem name="exportButton" />
+              <DxItem name="columnChooserButton" />
             </DxToolbar>
-            <DxPaging :page-size="10" />
+            <DxPaging :page-size="5" />
             <DxPager
               :visible="true"
               :allowed-page-sizes="[5, 10, 50]"
@@ -105,31 +107,22 @@
             <DxColumn type="buttons" caption="Aksi">
               <DxButton
                 text="Dokumen"
+                icon="attach"
                 hint="Dokumen Pendukung DRP"
                 :on-click="linkDokumen"
-              >
+              />
-                <template #default>
-                  <IconAttach />
-                </template>
-              </DxButton>
               <DxButton
-                text="View"
+                text="Detil"
-                hint="Detail DRP"
+                icon="search"
-                :on-click="linkDokumen"
+                hint="Detil/Konten DRP"
-              >
-                <template #default>
-                  <IconEye />
-                </template>
-              </DxButton>
-              <DxButton
-                text="Detail"
-                hint="Detail/Konten DRP"
                 :on-click="linkDetail"
-              >
+              />
-                <template #default>
+              <DxButton
-                  <IconDocDetail />
+                text="Kirim"
-                </template>
+                icon="movetofolder"
-              </DxButton>
+                hint="Kirim DRP"
+                :on-click="linkKirim"
+              />
             </DxColumn>
             <DxColumn type="adaptive" :width="50">
               <DxButton hint="detail" icon="copy" />
@@ -169,13 +162,8 @@ 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 },
@@ -187,7 +175,6 @@ 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",
@@ -258,9 +245,6 @@ export default {
     DxToolbarItem,
     Popup,
     PopUpUploadDokumenPendukung,
-    IconAttach,
-    IconEye,
-    IconDocDetail
   },
   methods: {
     linkDokumen(e) {
@@ -288,51 +272,6 @@ 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 {
@@ -347,7 +286,9 @@ export default {
       fileNames: [],
       saveButtonOptions: {
         text: 'Simpan',
-        onClick: this.save,
+        onClick: function(e) { 
+          console.log(e);
+        }
       },
       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="false"
+                :allow-adding="true"
-                :allow-updating="false"
+                :allow-updating="true"
-                :allow-deleting="false"
+                :allow-deleting="true"
                 :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="isActive" editor-type="dxCheckBox" />
+                  <DxItem dataField="is_active" editor-type="dxCheckBox" />
                 </DxForm>
                 <DxPopup
                     :hide-on-outside-click="true"
@@ -60,13 +60,10 @@
             <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="isActive" caption="Status"></DxColumn>
+            <DxColumn data-field="is_active" caption="Status"></DxColumn>
             <DxColumn type="buttons" caption="Aksi">
-              <DxButton 
+              <DxButton name="edit"/>
-                text="Detail"
+              <DxButton name="delete"/>
-                icon="rename"
-                :on-click="handleDetail"
-            />
             </DxColumn>
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300"  placeholder="Cari Manajemen Permission..."/>
             <!--<DxExport
@@ -93,13 +90,11 @@ 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+'/roles';
+const URL = process.env.VUE_APP_ROOT_API+'/permission';
 
 const customDataSource = new CustomStore({
   key: 'id',
@@ -107,9 +102,6 @@ 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'); });
   },
 
@@ -153,22 +145,15 @@ 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

@@ -1,249 +0,0 @@
-<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,68 +89,35 @@ 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: async () => {
+  load: () => {
-      return await fetch(URL+process.env.VUE_APP_PAGE_SIZE)
+      return 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) => {
-        fetch(URL, {
+        return 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(payload),
+          body: JSON.stringify(values),
           headers: {
               'Content-Type': 'application/json'
           }
@@ -179,7 +146,6 @@ export default {
     DxToolbar,
     DxTexts,
     DxRequiredRule,
-    DxButton,
   },
   
   data() {

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

@@ -129,9 +129,6 @@ 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';
@@ -139,8 +136,6 @@ 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',
   
@@ -216,58 +211,26 @@ const dataSource = new CustomStore({
 
   load: () => {
       return fetch(URL)
-      .then((response) => {
+      .then((response) => response.json())
-        return response.json()
-      })
-      .then((response) => {
-        data.value = response.data
-        return response.data
-      })
       .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
   },
 
-  insert: async (values) => {
+  insert: (values) => {
-        await fetch(URL, {
+        values.password = process.env.VUE_APP_DEFAULT_PASS;
+        //console.log(values);
+        return fetch(URL, {
             method: "POST",
-            body: JSON.stringify({
+            body: JSON.stringify(values),
-              ...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(payload),
+          body: JSON.stringify(values),
           headers: {
               'Content-Type': 'application/json'
           }