defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev-defuj' of https://github.com/defuj/eis into development

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-03-05 21:04:52 +07:00
commit 20b5b4957a
15 changed files with 358 additions and 6816 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.github/workflows/docker-image-development.yml vendored
View File

@ -21,5 +21,5 @@ jobs:
- uses: actions/checkout@v3
- name: Build the Docker image
run: |
docker build . --file Dockerfile --tag defuj/apkt-eis:v0.0.7-vm
docker push defuj/apkt-eis:v0.0.7-vm
docker build . --file Dockerfile --tag defuj/apkt-eis:v0.0.10-vm
docker push defuj/apkt-eis:v0.0.10-vm

553
.tw-patch/tw-class-list.json
View File

@ -1,553 +0,0 @@
[
"-left-2",
"-mr-1",
"-mr-12",
"-translate-x-full",
"-translate-y-2/4",
"2xl:text-sm",
"absolute",
"animate-spin",
"auto-cols-auto",
"backdrop-blur",
"bg-black",
"bg-gray-100",
"bg-gray-200",
"bg-gray-50",
"bg-gray-500",
"bg-gray-600",
"bg-gray-900",
"bg-indigo-600",
"bg-layout",
"bg-none",
"bg-opacity-100",
"bg-opacity-25",
"bg-opacity-5",
"bg-opacity-60",
"bg-opacity-75",
"bg-opacity-80",
"bg-primary-100",
"bg-primary-400",
"bg-primary-50",
"bg-primary-500",
"bg-red-100",
"bg-red-600",
"bg-secondary-100",
"bg-teal-600",
"bg-vtd-primary-100",
"bg-vtd-primary-500",
"bg-vtd-primary-600",
"bg-white",
"bg-yellow-100",
"bg-yellow-600",
"block",
"blur",
"border",
"border-0",
"border-b",
"border-b-0",
"border-black/[.1]",
"border-gray-300",
"border-gray-600",
"border-none",
"border-primary-500",
"border-r",
"border-solid",
"border-t",
"border-transparent",
"bottom-0",
"col-span-7",
"cursor-default",
"cursor-pointer",
"dark:bg-opacity-50",
"dark:focus:bg-opacity-50",
"dark:focus:border-vtd-primary-500",
"dark:focus:ring-opacity-20",
"dark:focus:ring-opacity-25",
"dark:focus:text-vtd-primary-300",
"dark:hover:text-vtd-primary-300",
"dark:text-opacity-70",
"dark:text-vtd-primary-400",
"delay-300",
"disabled:bg-primary-200",
"disabled:bg-primary-300",
"disabled:bg-primary-400",
"disabled:border-primary-300",
"disabled:cursor-not-allowed",
"disabled:text-primary-300",
"disabled:text-primary-400",
"divide-gray-500",
"divide-opacity-10",
"divide-y",
"duration-100",
"duration-150",
"duration-200",
"duration-300",
"duration-500",
"duration-75",
"ease-in",
"ease-in-out",
"ease-linear",
"ease-out",
"fill-gray-500",
"fill-gray-600",
"fill-green-600",
"fill-primary-300",
"fill-primary-500",
"fill-red-600",
"fill-white",
"filter",
"fixed",
"flex",
"flex-1",
"flex-col",
"flex-grow",
"flex-none",
"flex-row",
"flex-shrink-0",
"flex-wrap",
"focus-visible:outline",
"focus-visible:outline-2",
"focus-visible:outline-indigo-600",
"focus-visible:outline-offset-2",
"focus-visible:ring-2",
"focus-visible:ring-offset-2",
"focus-visible:ring-offset-teal-300",
"focus-visible:ring-opacity-75",
"focus-visible:ring-white",
"focus:bg-vtd-primary-50",
"focus:border-0",
"focus:border-vtd-primary-300",
"focus:outline-0",
"focus:outline-none",
"focus:ring",
"focus:ring-0",
"focus:ring-2",
"focus:ring-indigo-500",
"focus:ring-inset",
"focus:ring-offset-0",
"focus:ring-offset-2",
"focus:ring-opacity-10",
"focus:ring-primary-500",
"focus:ring-vtd-primary-500",
"focus:ring-white",
"focus:text-gray-500",
"focus:text-vtd-primary-600",
"font-bold",
"font-light",
"font-medium",
"font-normal",
"font-semibold",
"gap-1",
"gap-3",
"gap-x-1",
"gap-x-1.5",
"gap-x-2",
"gap-x-6",
"gap-y-0",
"gap-y-0.5",
"gap-y-1",
"grid",
"grid-cols-2",
"grid-cols-7",
"grid-flow-col",
"group-hover:bg-opacity-80",
"group-hover:bg-primary-500",
"group-hover:block",
"group-hover:fill-primary-500",
"group-hover:fill-white",
"group-hover:text-gray-500",
"group-hover:text-primary-500",
"group-hover:text-white",
"grow",
"h-0",
"h-10",
"h-11",
"h-12",
"h-16",
"h-4",
"h-5",
"h-6",
"h-7",
"h-8",
"h-9",
"h-[2.7rem]",
"h-[56px]",
"h-[66px]",
"h-[calc(100%-64px)]",
"h-[calc(90vh-24px)]",
"h-fit",
"h-full",
"h-screen-80",
"hidden",
"hover:bg-gray-50",
"hover:bg-indigo-500",
"hover:bg-indigo-700",
"hover:bg-primary-100",
"hover:bg-primary-200",
"hover:bg-primary-600",
"hover:bg-red-500",
"hover:bg-vtd-primary-700",
"hover:bg-yellow-500",
"hover:border-primary-500",
"hover:text-primary-500",
"hover:text-vtd-primary-700",
"inline-block",
"inline-flex",
"inset-0",
"inset-y-0",
"italic",
"items-center",
"items-start",
"justify-between",
"justify-center",
"justify-end",
"justify-start",
"leading-5",
"leading-6",
"leading-7",
"leading-none",
"leading-relaxed",
"left-0",
"left-4",
"left-auto",
"lg:block",
"lg:border-b-0",
"lg:border-r",
"lg:flex-nowrap",
"lg:grid-cols-3",
"lg:h-10",
"lg:mb-0",
"lg:mr-1",
"lg:mt-12",
"lg:mt-6",
"lg:mx-0",
"lg:px-8",
"lg:text-xs",
"lg:w-10",
"lg:w-80",
"line-clamp-1",
"max-h-0",
"max-h-60",
"max-h-[1000px]",
"max-h-[calc(100vh-140px)]",
"max-w-2xl",
"max-w-7xl",
"max-w-sm",
"max-w-xs",
"mb-2",
"mb-3",
"mb-4",
"mb-6",
"mb-8",
"md:bg-primary-500",
"md:block",
"md:fixed",
"md:flex",
"md:flex-col",
"md:h-16",
"md:hidden",
"md:inset-y-0",
"md:ml-6",
"md:ml-80",
"md:mr-3",
"md:mr-6",
"md:mt-8",
"md:p-20",
"md:pl-4",
"md:pl-80",
"md:px-6",
"md:py-0",
"md:rounded-t-3xl",
"md:text-2xl",
"md:text-3xl",
"md:w-1/2",
"md:w-80",
"md:w-[300px]",
"md:w-[440px]",
"me-1",
"min-h-full",
"min-h-screen",
"ml-1",
"ml-2",
"ml-3",
"ml-4",
"mr-1",
"mr-2",
"mt-0",
"mt-0.5",
"mt-1",
"mt-1.5",
"mt-10",
"mt-2",
"mt-3",
"mt-3.5",
"mt-4",
"mt-5",
"mt-6",
"mx-2",
"mx-3",
"mx-auto",
"my-1",
"my-auto",
"object-contain",
"opacity-0",
"opacity-100",
"opacity-25",
"opacity-30",
"opacity-40",
"opacity-50",
"opacity-75",
"order-last",
"ordinal",
"origin-top-left",
"outline",
"outline-0",
"overflow-auto",
"overflow-hidden",
"overflow-y-auto",
"p-1",
"p-1.5",
"p-2",
"p-4",
"pb-4",
"peer-checked:text-primary-500",
"pl-1",
"pl-10",
"pl-11",
"pl-2",
"pl-3",
"place-items-center",
"placeholder-gray-500",
"placeholder:text-gray-400",
"placeholder:text-sm",
"pointer-events-auto",
"pointer-events-none",
"pr-10",
"pr-12",
"pr-2",
"pr-4",
"pr-5",
"pr-7",
"pt-0",
"pt-0.5",
"pt-2",
"pt-5",
"px-0",
"px-0.5",
"px-1",
"px-1.5",
"px-2",
"px-3",
"px-3.5",
"px-4",
"px-6",
"py-0",
"py-1",
"py-1.5",
"py-14",
"py-2",
"py-2.5",
"py-24",
"py-3",
"py-4",
"py-6",
"relative",
"right-0",
"right-auto",
"ring-0",
"ring-1",
"ring-black",
"ring-gray-300",
"ring-inset",
"ring-opacity-5",
"rotate-180",
"rounded",
"rounded-2xl",
"rounded-b-2xl",
"rounded-full",
"rounded-l-full",
"rounded-lg",
"rounded-md",
"rounded-r-full",
"rounded-t-2xl",
"rounded-xl",
"scale-100",
"scale-95",
"scroll-py-2",
"select-none",
"shadow",
"shadow-2xl",
"shadow-gray-50",
"shadow-lg",
"shadow-md",
"shadow-sm",
"shadow-xl",
"shrink",
"sm:border",
"sm:border-b",
"sm:border-t-0",
"sm:col-start-1",
"sm:col-start-2",
"sm:flex",
"sm:flex-1",
"sm:flex-nowrap",
"sm:flex-row-reverse",
"sm:font-medium",
"sm:gap-3",
"sm:grid",
"sm:grid-cols-2",
"sm:grid-cols-3",
"sm:grid-flow-row-dense",
"sm:h-10",
"sm:hidden",
"sm:items-center",
"sm:items-start",
"sm:justify-between",
"sm:justify-start",
"sm:leading-4",
"sm:max-w-lg",
"sm:max-w-sm",
"sm:mb-0",
"sm:mb-1",
"sm:mb-1.5",
"sm:ml-2",
"sm:ml-3",
"sm:ml-4",
"sm:mr-2",
"sm:mt-0",
"sm:mt-1",
"sm:mt-2",
"sm:mt-2.5",
"sm:mt-4",
"sm:mt-5",
"sm:mt-6",
"sm:mx-0",
"sm:mx-1",
"sm:my-8",
"sm:order-none",
"sm:overflow-visible",
"sm:p-0",
"sm:p-6",
"sm:pb-4",
"sm:pr-6",
"sm:px-14",
"sm:px-2",
"sm:px-3",
"sm:px-4",
"sm:py-32",
"sm:py-4",
"sm:relative",
"sm:rounded-lg",
"sm:scale-100",
"sm:scale-95",
"sm:shadow-sm",
"sm:space-x-10",
"sm:space-x-4",
"sm:space-x-5",
"sm:space-x-reverse",
"sm:space-y-0",
"sm:static",
"sm:text-5xl",
"sm:text-left",
"sm:text-sm",
"sm:translate-y-0",
"sm:w-10",
"sm:w-auto",
"sm:w-full",
"sm:z-auto",
"space-x-1",
"space-x-1.5",
"space-y-1",
"space-y-2",
"space-y-3",
"space-y-4",
"sr-only",
"static",
"sticky",
"stroke-white",
"text-2xl",
"text-3xl",
"text-[8px]",
"text-aside",
"text-base",
"text-blue-400",
"text-center",
"text-dark",
"text-gray-200",
"text-gray-300",
"text-gray-400",
"text-gray-500",
"text-gray-600",
"text-gray-700",
"text-gray-800",
"text-gray-900",
"text-green-400",
"text-green-600",
"text-indigo-600",
"text-left",
"text-lg",
"text-opacity-40",
"text-orange-400",
"text-orange-600",
"text-primary-50",
"text-primary-500",
"text-primary-800",
"text-red-400",
"text-red-600",
"text-slate-600",
"text-slate-900",
"text-sm",
"text-start",
"text-teal-600",
"text-vtd-primary-500",
"text-vtd-primary-600",
"text-white",
"text-xl",
"text-xs",
"text-yellow-700",
"top-0",
"top-1/2",
"top-3",
"top-3.5",
"top-full",
"tracking-tight",
"tracking-wide",
"transform",
"transition",
"transition-all",
"transition-colors",
"transition-opacity",
"transition-transform",
"translate-x-0",
"translate-x-4",
"translate-y-0",
"translate-y-3",
"translate-y-4",
"truncate",
"uppercase",
"visible",
"w-0",
"w-1/2",
"w-10",
"w-12",
"w-14",
"w-16",
"w-4",
"w-5",
"w-56",
"w-6",
"w-8",
"w-80",
"w-9",
"w-[170px]",
"w-[2.7rem]",
"w-[266px]",
"w-auto",
"w-full",
"whitespace-nowrap",
"whitespace-pre-wrap",
"z-10",
"z-20",
"z-40",
"z-50"
]

40
Dockerfile
View File

@ -1,30 +1,20 @@
# FROM node:lts-alpine as build-stage
# WORKDIR /app
# COPY package*.json ./
# RUN npm install
# COPY . .
# RUN npm run build
# FROM nginx:stable-alpine as production-stage
# COPY --from=build-stage /app/dist /usr/share/nginx/html
# COPY --from=build-stage /app/nginx.conf /etc/nginx/nginx.conf
# EXPOSE 32166
# CMD ["nginx", "-g", "daemon off;"]
# syntax=docker/dockerfile:1
# build stage
FROM node:lts-alpine as builder
WORKDIR /apkt
COPY package*.json ./
RUN npm install && npm install npm-run-all -g
COPY . .
RUN npm run build
# production stage
FROM nginx:stable-alpine
COPY --from=builder /apkt/dist /usr/share/nginx/html
COPY --from=builder /apkt/nginx.conf /etc/nginx/nginx.conf
EXPOSE 32166
CMD ["nginx", "-g", "daemon off;"]
# FROM nginx:stable-alpine
# COPY /dist /usr/share/nginx/html
# COPY /nginx.conf /etc/nginx/nginx.conf
# EXPOSE 32166
# CMD ["nginx", "-g", "daemon off;"]
# Use official Node image as base image for building
FROM node:latest AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:latest
COPY --from=builder /app/dist /usr/share/nginx/html
COPY --from=builder /app/nginx.conf /etc/nginx/nginx.conf
EXPOSE 32166
CMD ["nginx", "-g", "daemon off;"]
# CMD ["nginx", "-g", "daemon off;"]

2
deployment.yaml
View File

@ -14,7 +14,7 @@ spec:
spec:
containers:
- name: apkt-eis
image: defuj/apkt-eis:v0.0.7-vm
image: defuj/apkt-eis:v0.0.10-vm
ports:
- containerPort: 80
---

1088
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

17
package.json
View File

@ -20,11 +20,10 @@
"@headlessui/tailwindcss": "^0.2.0",
"@headlessui/vue": "^1.7.19",
"@heroicons/vue": "^2.0.18",
"@lottiefiles/lottie-player": "^2.0.2",
"@lottiefiles/lottie-player": "^2.0.4",
"@phosphor-icons/vue": "^2.1.6",
"@popperjs/core": "^2.11.8",
"@types/qs": "^6.9.9",
"@types/uuid": "^9.0.2",
"@types/qs": "^6.9.12",
"@types/uuid": "^9.0.8",
"@types/vue-select": "^3.16.8",
"@vue/apollo-components": "^4.0.0",
"@vue/apollo-composable": "^4.0.1",
@ -34,19 +33,16 @@
"devextreme": "23.1.5",
"devextreme-vue": "23.1.5",
"dotenv": "^16.3.1",
"encrypt-storage": "^2.12.16",
"encrypt-storage": "^2.12.22",
"exceljs": "^4.4.0",
"file-saver": "^2.0.5",
"graphql": "^16.8.1",
"graphql-tag": "^2.12.6",
"jspdf": "^2.5.1",
"jspdf-autotable": "^3.8.2",
"nvm": "^0.0.4",
"pinia": "^2.1.3",
"qs": "^6.11.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"uuid": "^9.0.0",
"uuid": "^9.0.1",
"vue": "^3.3.4",
"vue-router": "^4.2.2",
"vue-tailwind-datepicker": "^1.6.1"
@ -71,7 +67,6 @@
"eslint": "^8.39.0",
"eslint-plugin-vue": "^9.11.0",
"jsdom": "^22.1.0",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.24",
"prettier": "^3.0.3",
"tailwindcss": "^3.3.2",
@ -81,4 +76,4 @@
"vitest": "^0.34.6",
"vue-tsc": "^1.6.5"
}
}
}

1
src/components/Buttons/ButtonPrimary.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import * as LottiePlayer from "@lottiefiles/lottie-player";
defineProps({
type: {
type: String as () => "button" | "submit" | "reset",

4250
src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
View File

File diff suppressed because it is too large Load Diff

171
src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
View File

@ -1,153 +1,48 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1
@update:filters="
(value) => {
filters = value
}
"
/>
<Type1 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn
:width="170"
alignment="center"
data-field="uid"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
<DxColumn
:width="100"
alignment="center"
data-field="januari"
data-type="number"
caption="Januari"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="februari"
data-type="number"
caption="Februari"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="maret"
data-type="number"
caption="Maret"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="april"
data-type="number"
caption="April"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="mei"
data-type="number"
caption="Mei"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="juni"
data-type="number"
caption="Juni"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="juli"
data-type="number"
caption="Juli"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="agustus"
data-type="number"
caption="Agustus"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="september"
data-type="number"
caption="September"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="oktober"
data-type="number"
caption="Oktober"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="november"
data-type="number"
caption="November"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="desember"
data-type="number"
caption="Desember"
css-class="custom-table-column"
/>
<DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
</div>

267
src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
View File

@ -1,132 +1,57 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1
@update:filters="
(value) => {
filters = value
}
"
/>
<Type1 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn
:width="50"
alignment="center"
caption="NO"
css-class="custom-table-column"
rowspan="4"
colspan="2"
>
<DxColumn
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="a"
css-class="custom-table-column"
/>
<DxColumn :width="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
<DxColumn :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="a"
css-class="custom-table-column" />
</DxColumn>
<DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="regu"
caption="b"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="regu" caption="b" css-class="custom-table-column" />
</DxColumn>
<DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="kode_regu"
caption="c"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_laporan"
caption="d=(e+g)"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="total_laporan" caption="d=(e+g)"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
caption="e"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
caption="f=(e/d)*100"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_belum_selesai"
caption="g"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="total_belum_selesai" caption="g"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="persen_belum_selesai"
caption="h=(g/d)*100"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="persen_belum_selesai" caption="h=(g/d)*100"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -136,43 +61,23 @@
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_laporan_mobile_nonmarking"
caption="i"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_nonmarking" caption="i"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="persen_laporan_mobile_nonmarking"
caption="j=(i/d)*100"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_nonmarking"
caption="j=(i/d)*100" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_response_mobile_nonmarking"
caption="k"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_nonmarking" caption="k"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_recovery_mobile_nonmarking"
caption="l"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_nonmarking" caption="l"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -180,43 +85,23 @@
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_laporan_mobile_marking"
caption="m"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_marking" caption="m"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="persen_laporan_mobile_marking"
caption="n=(m/d)*100"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_marking"
caption="n=(m/d)*100" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_response_mobile_marking"
caption="o"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_marking" caption="o"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_recovery_mobile_marking"
caption="p"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_marking" caption="p"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -226,43 +111,23 @@
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_laporan_nonmobile_nonmarking"
caption="q"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_nonmarking" caption="q"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="persen_laporan_nonmobile_nonmarking"
caption="r=(q/d)*100"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_nonmarking"
caption="r=(q/d)*100" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_response_nonmobile_nonmarking"
caption="s"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_nonmarking"
caption="s" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_recovery_nonmobile_nonmarking"
caption="t"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_nonmarking"
caption="t" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -270,43 +135,23 @@
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_laporan_nonmobile_marking"
caption="u"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_marking" caption="u"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="persen_laporan_nonmobile_marking"
caption="v=(u/d)*100"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_marking"
caption="v=(u/d)*100" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_response_nonmobile_marking"
caption="w"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_marking" caption="w"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_recovery_nonmobile_marking"
caption="x"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_marking" caption="x"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>

171
src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
View File

@ -1,153 +1,48 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type18
@update:filters="
(value) => {
filters = value
}
"
/>
<Type18 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn
:width="170"
alignment="center"
data-field="uid"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
<DxColumn
:width="100"
alignment="center"
data-field="januari"
data-type="number"
caption="Januari"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="februari"
data-type="number"
caption="Februari"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="maret"
data-type="number"
caption="Maret"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="april"
data-type="number"
caption="April"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="mei"
data-type="number"
caption="Mei"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="juni"
data-type="number"
caption="Juni"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="juli"
data-type="number"
caption="Juli"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="agustus"
data-type="number"
caption="Agustus"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="september"
data-type="number"
caption="September"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="oktober"
data-type="number"
caption="Oktober"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="november"
data-type="number"
caption="November"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="desember"
data-type="number"
caption="Desember"
css-class="custom-table-column"
/>
<DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
</div>

209
src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
View File

@ -1,195 +1,66 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1
@update:filters="
(value) => {
filters = value
}
"
/>
<Type1 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO"
data-type="number"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Kode Unit"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" data-type="number" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="1"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="2"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="3"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="4"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="5"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="Index"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="1"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="2"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="3"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="4"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="5"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Index"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
</div>

209
src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
View File

@ -1,195 +1,66 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1
@update:filters="
(value) => {
filters = value
}
"
/>
<Type1 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO"
data-type="number"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Kode"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Nama Regu"
css-class="custom-table-column"
/>
<DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" data-type="number" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="1"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="2"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="3"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="4"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="5"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="Index"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="1"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="2"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="3"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="4"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="5"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Index"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
</div>

174
src/components/SelectMulti.vue
View File

@ -1,20 +1,21 @@
<script setup lang="ts">
import { type PropType } from 'vue'
import Multiselect from '@vueform/multiselect'
import { ref } from 'vue';
import { TagsInput } from '@flavorly/vanilla-components';
// import Multiselect from '@vueform/multiselect';
interface Tags {
id: number
value: string,
label: string
}
defineProps({
const props = defineProps({
placeholder: {
type: String,
default: ''
},
tags: {
type: Array as PropType<Tags[]>,
type: Array as () => Tags[],
required: true
},
useLabel: {
@ -26,90 +27,93 @@ defineProps({
default: ''
}
})
const allowed = ref(props.tags.map((tag) => tag.label))
const tags = ref<string[]>([])
const updateTags = (value: string[]) => {
tags.value = value
}
</script>
<template>
<div class="flex flex-col">
<Multiselect
mode="tags"
:placeholder="placeholder"
:close-on-select="false"
:searchable="true"
:create-option="true"
:options="tags"
:classes="{
container:
'relative py-[5px] mx-auto w-full flex items-center justify-end cursor-pointer rounded-lg bg-gray-200 text-left text-base leading-snug outline-none',
containerDisabled: 'cursor-default bg-gray-50',
containerOpen: 'rounded-b-none',
containerOpenTop: 'rounded-t-none',
containerActive: '',
wrapper:
'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none',
singleLabel:
'flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 pr-16 box-border rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
singleLabelText: 'overflow-ellipsis overflow-hidden block whitespace-nowrap max-w-full',
multipleLabel:
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
search:
'w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5 rtl:pl-0 rtl:pr-3.5',
tags: 'flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2',
tag: 'bg-primary-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1',
tagDisabled: 'pr-2 opacity-50 rtl:pl-2',
tagWrapper: 'whitespace-nowrap overflow-hidden overflow-ellipsis',
tagWrapperBreak: 'whitespace-normal break-all',
tagRemove:
'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group',
tagRemoveIcon:
'bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
tagsSearchWrapper: 'inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full',
tagsSearch:
' bg-gray-200 absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full',
tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
placeholder:
'flex items-center text-sm h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
caret:
'bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5',
caretOpen: 'rotate-180 pointer-events-auto',
clear:
'pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5',
clearIcon:
'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block',
spinner:
'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin flex-shrink-0 flex-grow-0 rtl:mr-0 rtl:ml-3.5',
infinite: 'flex items-center justify-center w-full',
infiniteSpinner:
'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin flex-shrink-0 flex-grow-0 m-3.5',
dropdown:
'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b',
dropdownTop: '-translate-y-full top-px bottom-auto rounded-b-none rounded-t',
dropdownHidden: 'hidden',
options: 'flex flex-col p-0 m-0 list-none',
optionsTop: '',
group: 'p-0 m-0',
groupLabel:
'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
groupLabelPointable: 'cursor-pointer',
groupLabelPointed: 'bg-gray-300 text-gray-700',
groupLabelSelected: 'bg-green-600 text-white',
groupLabelDisabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',
groupLabelSelectedPointed: 'bg-green-600 text-white opacity-90',
groupLabelSelectedDisabled: 'text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed',
groupOptions: 'p-0 m-0',
option:
'flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3',
optionPointed: 'text-gray-800 bg-gray-100',
optionSelected: 'text-white bg-green-500',
optionDisabled: 'text-gray-300 cursor-not-allowed',
optionSelectedPointed: 'text-white bg-green-500 opacity-90',
optionSelectedDisabled: 'text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed',
noOptions: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
noResults: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
fakeInput:
'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent',
assist: 'absolute -m-px w-px h-px overflow-hidden',
spacer: 'box-content'
}"
/>
<TagsInput v-model="tags" :placeholder="tags.length == 0 ? placeholder : props.label" :allowed-options="allowed"
valueAttribute="id" textAttribute="label" :enabled="false" @update:modelValue="updateTags" />
<!-- <Multiselect mode="tags" :placeholder="placeholder" :close-on-select="false" :searchable="true"
:create-option="true" :options="props.tags" :classes="{
container:
'relative py-[5px] mx-auto w-full flex items-center justify-end cursor-pointer rounded-lg bg-gray-200 text-left text-base leading-snug outline-none',
containerDisabled: 'cursor-default bg-gray-50',
containerOpen: 'rounded-b-none',
containerOpenTop: 'rounded-t-none',
containerActive: '',
wrapper:
'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none',
singleLabel:
'flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 pr-16 box-border rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
singleLabelText: 'overflow-ellipsis overflow-hidden block whitespace-nowrap max-w-full',
multipleLabel:
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
search:
'w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5 rtl:pl-0 rtl:pr-3.5',
tags: 'flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2',
tag: 'bg-primary-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1',
tagDisabled: 'pr-2 opacity-50 rtl:pl-2',
tagWrapper: 'whitespace-nowrap overflow-hidden overflow-ellipsis',
tagWrapperBreak: 'whitespace-normal break-all',
tagRemove:
'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group',
tagRemoveIcon:
'bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
tagsSearchWrapper: 'inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full',
tagsSearch:
' bg-gray-200 absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full',
tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
placeholder:
'flex items-center text-sm h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
caret:
'bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5',
caretOpen: 'rotate-180 pointer-events-auto',
clear:
'pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5',
clearIcon:
'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block',
spinner:
'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin flex-shrink-0 flex-grow-0 rtl:mr-0 rtl:ml-3.5',
infinite: 'flex items-center justify-center w-full',
infiniteSpinner:
'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin flex-shrink-0 flex-grow-0 m-3.5',
dropdown:
'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b',
dropdownTop: '-translate-y-full top-px bottom-auto rounded-b-none rounded-t',
dropdownHidden: 'hidden',
options: 'flex flex-col p-0 m-0 list-none',
optionsTop: '',
group: 'p-0 m-0',
groupLabel:
'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
groupLabelPointable: 'cursor-pointer',
groupLabelPointed: 'bg-gray-300 text-gray-700',
groupLabelSelected: 'bg-green-600 text-white',
groupLabelDisabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',
groupLabelSelectedPointed: 'bg-green-600 text-white opacity-90',
groupLabelSelectedDisabled: 'text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed',
groupOptions: 'p-0 m-0',
option:
'flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3',
optionPointed: 'text-gray-800 bg-gray-100',
optionSelected: 'text-white bg-green-500',
optionDisabled: 'text-gray-300 cursor-not-allowed',
optionSelectedPointed: 'text-white bg-green-500 opacity-90',
optionSelectedDisabled: 'text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed',
noOptions: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
noResults: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
fakeInput:
'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent',
assist: 'absolute -m-px w-px h-px overflow-hidden',
spacer: 'box-content'
}" /> -->
</div>
</template>

18
src/main.ts
View File

@ -1,5 +1,4 @@
// import 'devextreme/dist/css/dx.material.blue.light.compact.css'
import '@lottiefiles/lottie-player'
import '@/assets/css/main.css'
import { createPinia } from 'pinia'
import App from './App.vue'
@ -25,6 +24,23 @@ app.use(
searchInput: 'rich-select-search-input',
selectedHighlightedOption: 'rich-select-selected-highlighted-option'
}
},
TagsInput: {
fixedClasses: {
input: 'appearance-none py-0 ring-0 border-0 outline-none focus:ring-0 focus:outline-none focus:shadow-none shadow-none w-full bg-transparent text-gray-800 text-base',
inputWrapper: 'inline-flex flex-grow bg-transparent',
tagsWrapper: 'flex flex-wrap overflow-hidden -my-2 py-1 px-1 w-full text-xs',
tagDeleteButtonIcon: 'w-3 h-3',
tagLabel: 'px-3 text-xs',
},
classes: {
input: 'min-h-[32px]',
inputWrapper: '',
tagsWrapper: '',
tagDeleteButtonIcon: '',
tagLabel: '',
trigger: 'bg-gray-200 rounded-lg mb-2 mt-2',
},
}
})
)