From 5a40a622793ab61470c50ffa8ec924f3640430c2 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 19 Mar 2024 13:58:40 +0700
Subject: [PATCH] Add vue3-star-ratings package

---
 package-lock.json                                  | 11 ++++++++++-
 package.json                                       |  3 ++-
 .../Gangguan/Rekap/RGangguan_RatingPerPosko.vue    | 14 ++++++++++++++
 .../Gangguan/Rekap/RGangguan_RatingPerRegu.vue     | 14 ++++++++++++++
 4 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5059f49..f91d63d 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,7 +38,8 @@
         "uuid": "^9.0.1",
         "vue": "^3.3.4",
         "vue-router": "^4.2.2",
-        "vue-tailwind-datepicker": "^1.6.1"
+        "vue-tailwind-datepicker": "^1.6.1",
+        "vue3-star-ratings": "^3.0.5"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.5.1",
@@ -9534,6 +9535,14 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/vue3-star-ratings": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/vue3-star-ratings/-/vue3-star-ratings-3.0.5.tgz",
+      "integrity": "sha512-V5k/T/7JoEq1VxhtJr1bVdDT181PqbSYMqhyj4myuMFBYXZ2f7bzAcmwFGEkoMmcIg3IVEhroBPUVtPQ4anQDQ==",
+      "dependencies": {
+        "vue": "^3.3.4"
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
diff --git a/package.json b/package.json
index 829cba1..1904f9d 100755
--- a/package.json
+++ b/package.json
@@ -44,7 +44,8 @@
     "uuid": "^9.0.1",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2",
-    "vue-tailwind-datepicker": "^1.6.1"
+    "vue-tailwind-datepicker": "^1.6.1",
+    "vue3-star-ratings": "^3.0.5"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.5.1",
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index 3f199d7..8d63ebe 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -439,6 +439,19 @@
               {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
             </p>
           </template>
+
+          <template #formatRating="{ data }">
+            <p class="cursor-pointer">
+              <vue3starRatings
+                v-model="data.text"
+                :starSize="20"
+                starColor="#CCCC00"
+                inactiveColor="#D1D5DB"
+                :numberOfStars="5"
+                :disableClick="true"
+              />
+            </p>
+          </template>
         </DxDataGrid>
       </div>
     </div>
@@ -600,6 +613,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
+import vue3starRatings from 'vue3-star-ratings'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index 9114ee5..9f2ac7b 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -431,6 +431,19 @@
               {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
             </p>
           </template>
+
+          <template #formatRating="{ data }">
+            <p class="cursor-pointer">
+              <vue3starRatings
+                v-model="data.text"
+                :starSize="20"
+                starColor="#CCCC00"
+                inactiveColor="#D1D5DB"
+                :numberOfStars="5"
+                :disableClick="true"
+              />
+            </p>
+          </template>
         </DxDataGrid>
       </div>
     </div>
@@ -590,6 +603,7 @@ import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import vue3starRatings from 'vue3-star-ratings'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { apolloClient } from '@/utils/api/api.graphql'