Add vue3-star-ratings package

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",

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",

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'
 

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'