From 4f86a33e180e855d10e1467c5ba0e188dc684ec3 Mon Sep 17 00:00:00 2001
From: Eric Trousset <etrousset@kuzzle.io>
Date: Mon, 29 Apr 2024 12:57:42 +0200
Subject: [PATCH] added missing Sample Widget files

---
 apps/web/src/appDefinition.ts                 |  23 +--
 .../widgets/sample-widget/SampleWidget.vue    | 131 ++++++++++++++++++
 .../sample-widget/SampleWidgetForm.vue        |  53 +++++++
 .../sample-widget/SampleWidgetSettings.ts     |   3 +
 4 files changed, 190 insertions(+), 20 deletions(-)
 create mode 100644 apps/web/src/widgets/sample-widget/SampleWidget.vue
 create mode 100644 apps/web/src/widgets/sample-widget/SampleWidgetForm.vue
 create mode 100644 apps/web/src/widgets/sample-widget/SampleWidgetSettings.ts

diff --git a/apps/web/src/appDefinition.ts b/apps/web/src/appDefinition.ts
index 8eb413e..97de0ec 100644
--- a/apps/web/src/appDefinition.ts
+++ b/apps/web/src/appDefinition.ts
@@ -10,7 +10,6 @@ import {
 import BulkImport from '~/views/bulkImport/BulkImport.vue';
 import SampleWidget from '~/widgets/sample-widget/SampleWidget.vue';
 import SampleWidgetForm from '~/widgets/sample-widget/SampleWidgetForm.vue';
-// import CatalogList from '~/views/catalog/CatalogList.vue';
 
 const admin = IoTPlatformChunks.find((chunk) => chunk.name === 'admin');
 if (admin?.children !== undefined) {
@@ -44,30 +43,14 @@ if (admin?.children !== undefined) {
 
 export const appDefinitions: AppChunk[] = [
   ...IoTPlatformChunks,
-  // {
-  //   name: 'catalog',
-  //   label: 'locales.sidebar.catalog',
-  //   icon: faBookmark,
-  //   vuejsRoute: {
-  //     path: '/catalog',
-  //     component: KRouteWrapper,
-  //     children: [
-  //       {
-  //         path: '',
-  //         name: 'catalog',
-  //         component: CatalogList,
-  //       },
-  //     ],
-  //   },
-  // },
 ];
 
 export const dashboardWidgets: DashboardWidget[] = [
   {
-    name: 'pie',
-    label: 'locales.widget.pie.label',
+    name: 'sample-widget',
+    label: 'My Sample Widget', // TODO : i18n
     component: SampleWidget,
     formComponent:SampleWidgetForm,
-    icon: 'chart-pie',
+    icon: 'face-meh',
   },
 ];
diff --git a/apps/web/src/widgets/sample-widget/SampleWidget.vue b/apps/web/src/widgets/sample-widget/SampleWidget.vue
new file mode 100644
index 0000000..2c108ba
--- /dev/null
+++ b/apps/web/src/widgets/sample-widget/SampleWidget.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="text-left h-100">
+    <div class="sample-widget">
+      <H2> This is a sample widget</H2>
+      <h3>Bucketting field : {{ props.widgetSettings.buckettingField }}</h3>
+
+       <KTable :items="data" :total="data.length"  :headers="headers">
+        <template #cell(name)="data">
+            {{ data.item.key }}
+          </template>
+          <template #cell(description)="data">
+            {{ data.item.count }}
+          </template>
+      </KTable> 
+
+      <b-container fluid>
+        <brow v-for="e in data" :key="e.key">
+        <bcol >
+        {{ e.key }}
+        </bcol>
+        <bcol cols="6">
+        {{ e.count }}
+        </bcol>
+        <div class="w-100"></div>
+        </brow>
+        </b-container>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch, reactive } from 'vue';
+import { useKuzzle, useI18n, AggregateTypes, KTable, KTableHeader } from '@kuzzleio/iot-platform-frontend';
+import type { AssetContent } from 'kuzzle-device-manager-types';
+import { KDocument } from 'kuzzle-sdk';
+import { BFormSelect, BFormSelectOption, BRow, BCol, BFormInput, BButton } from 'bootstrap-vue';
+// import { KTableContext, KTableHeader, AlertRuleContent, SortQuery } from '@/types';
+
+// Types
+import {SampleWidgetSettingsType} from "./SampleWidgetSettings"
+import { forEach } from 'lodash';
+
+// Props
+interface SampleWidgetProps {
+  widgetSettings: SampleWidgetSettingsType;
+  widgetHeight: number;
+  widgetWidth: string;
+  engineIndex: string;
+}
+const props = defineProps<SampleWidgetProps>();
+
+// Computeds
+const headers = computed<KTableHeader[]>(() => [
+  {
+    key: 'name',
+    label: 'Colonne 1', //$i18n.t('locales.notifications.list.notificationName'),
+    sortable: true,
+  },
+  {
+    key: 'description',
+    label: 'Colonne 2', //$i18n.t('locales.notifications.list.notificationDescription'),
+    sortable: false,
+  },
+]);
+
+// Emits
+interface EmitTypes {
+  (name: 'loading'): void;
+  (name: 'loaded'): void;
+}
+const emit = defineEmits<EmitTypes>();
+
+// Composables
+const $i18n = useI18n();
+const $kuzzle = useKuzzle();
+
+// Refs
+const data = ref<Array<{[x:string] : number;}>>([]);
+
+// Constants
+
+// Computeds
+
+// Hooks
+onMounted(async () => {
+  emit('loading');
+console.log("onmounted!!!!!");
+
+  await fetchData();
+
+  // kuzzle search avec props buckettingField
+  // charger les données dans un chartjs
+  // update front
+
+  emit('loaded');
+});
+
+// Functions
+
+async function fetchData(): Promise<void> {
+  if (props.widgetSettings?.buckettingField) {
+    const query = {
+      equals: {
+        model: 'Lampadaire',
+      },
+    };
+
+    const res= await $kuzzle.document.search<AssetContent>(
+      props.engineIndex,
+      'assets',
+      { aggs: {
+        term_agg: {
+          terms : {
+            field: 'metadata.' + props.widgetSettings.buckettingField,
+          }
+        }
+      } },
+    );
+
+    const agg : Array<{[x:string] : number;}> = [] ;
+    for( let bucket of res.aggregations?.term_agg.buckets) {
+     agg.push( { key : bucket.key, count: bucket.doc_count});
+    }
+    data.value= agg;
+  }
+
+  emit('loaded');
+}
+</script>
+
+<style lang="scss"></style>
diff --git a/apps/web/src/widgets/sample-widget/SampleWidgetForm.vue b/apps/web/src/widgets/sample-widget/SampleWidgetForm.vue
new file mode 100644
index 0000000..12f37d6
--- /dev/null
+++ b/apps/web/src/widgets/sample-widget/SampleWidgetForm.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <h1>Widget form</h1>
+    <BRow>
+      <BCol>
+        <BFormGroup
+          :label="$i18n.t('locales.widget.common.asset-model')"
+          label-for="asset-model-field"
+        >
+          <BFormInput
+            id="asset-model-field"
+            v-model="widgetSettings.buckettingField"
+            required
+            @change="emitChange"
+          />
+        </BFormGroup>
+      </BCol>
+    </BRow>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { BFormSelect, BFormSelectOption, BRow, BCol, BFormInput, BButton } from 'bootstrap-vue';
+import { reactive } from 'vue';
+import cloneDeep from 'lodash/cloneDeep';
+// Types
+import { SampleWidgetSettingsType } from './SampleWidgetSettings';
+export interface SampleWidgetFormProps {
+  // The index name where the Dashboard engine is installed
+  engineIndex: string;
+  // The collections of the engine-index
+  collections: string[];
+  // The settings, passed to the widget
+  editedWidgetSettings?: SampleWidgetSettingsType;
+}
+const props = withDefaults(defineProps<SampleWidgetFormProps>(), {
+  editedWidgetSettings: () => ({
+    buckettingField: 'test',
+  }),
+});
+
+// Refs
+const widgetSettings = reactive(cloneDeep(props.editedWidgetSettings));
+
+// Emits
+type EmitTypes = (name: 'change', widgetSettings: SampleWidgetSettingsType) => void;
+const emit = defineEmits<EmitTypes>();
+
+
+function emitChange(): void {
+  emit('change', widgetSettings);
+}
+</script>
diff --git a/apps/web/src/widgets/sample-widget/SampleWidgetSettings.ts b/apps/web/src/widgets/sample-widget/SampleWidgetSettings.ts
new file mode 100644
index 0000000..4acd1e2
--- /dev/null
+++ b/apps/web/src/widgets/sample-widget/SampleWidgetSettings.ts
@@ -0,0 +1,3 @@
+export interface SampleWidgetSettingsType {
+    buckettingField: string;
+  }
\ No newline at end of file