@dative-gpi/foundation-core-components 1.0.36 → 1.0.37-report-v1

package/components/lists/reports/FSBaseReportExecutionsList.vue

@@ -0,0 +1,137 @@
+<template>
+  <FSDataTable
+    defaultMode="table"
+    :loading="fetchingReportExecutions"
+    :headersOptions="headersOptions"
+    :items="reportExecutions"
+    :tableCode="tableCode"
+    :groupBy="groupByExecutionDate"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      #item.state="{ item }"
+    >
+      <FSRow
+        align="center-left"
+        :wrap="false"
+      >
+        <FSIcon
+          :color="getColorByState(item.state)"
+        >
+          {{ getIconByState(item.state) }}
+        </FSIcon>
+        <FSText
+          font="text-overline"
+          :color="getColorByState(item.state)"
+        >
+          {{ getLabelByState(item.state) }} 
+        </FSText>
+      </FSRow>
+    </template> 
+    <template
+      #item.executedAt="{ item }"
+    >
+      <FSSpan
+        font="text-overline"
+      >
+        {{ epochToShortTimeOnlyFormat(item.executedAt) }}
+      </FSSpan>
+    </template>
+    <template
+      #item.users="{ item }"
+    >
+      <FSChipGroupUserOrganisationUI
+        :userOrganisationLabels="item.users"
+        :wrapped="false"
+      />
+    </template>
+  </FSDataTable>
+</template>
+  
+  <script lang="ts">
+import { defineComponent, type PropType, computed, watch } from "vue";
+import _ from "lodash";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { JobHangfireState } from "@dative-gpi/foundation-shared-domain/enums";
+import { getLabelByState, getColorByState, getIconByState } from "@dative-gpi/foundation-shared-components/tools";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+
+import type { ReportExecutionFilters } from "@dative-gpi/foundation-core-domain/models";
+import { useReportExecutions } from "@dative-gpi/foundation-core-services/composables";
+  
+import FSChipGroupUserOrganisationUI from "../../chips/FSChipGroupUserOrganisationUI.vue";
+
+export default defineComponent({
+  name: "FSBaseReportExecutionsList",
+  components: {
+    FSChipGroupUserOrganisationUI
+  },
+  props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    reportExecutionsFilters: {
+      type: Object as PropType<ReportExecutionFilters>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { epochToLongTimeFormat, epochToLongDateFormat, epochToShortTimeOnlyFormat } = useDateFormat();
+    const { getMany: fetchReportExecutions, fetching: fetchingReportExecutions, entities: reportExecutions } = useReportExecutions();
+
+    const groupByExecutionDate = {
+      key: "executedAtGroup",
+      order: "desc"
+    };
+
+    const headersOptions = computed(() => ({
+      state: {
+        fixedFilters: getEnumEntries(JobHangfireState).map(e => ({
+          value: e.value,
+          text: getLabelByState(e.value)
+        })),
+        methodFilter: (value: JobHangfireState, item: JobHangfireState) => value == item
+      }
+    }));
+    
+    watch(() => props.reportExecutionsFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetchReportExecutions(props.reportExecutionsFilters);
+      }
+    }, { immediate: true });
+  
+    return {
+      fetchingReportExecutions,
+      groupByExecutionDate,
+      reportExecutions,
+      headersOptions,
+      getColorByState,
+      getIconByState,
+      getLabelByState,
+      epochToLongTimeFormat,
+      epochToLongDateFormat,
+      epochToShortTimeOnlyFormat
+    };
+  }
+});
+  </script>

package/components/lists/reports/FSBaseReportsList.vue

@@ -0,0 +1,140 @@
+<template>
+  <FSDataTable
+    defaultMode="table"
+    :loading="fetchingReports"
+    :items="reports"
+    :showSelect="$props.editable"
+    :tableCode="tableCode"
+    :itemTo="routerLink"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      #item.icon="{ item }"
+    >
+      <FSIcon >
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+    <template
+      #item.lastExecution="{ item }"
+    >
+      <FSSpan
+        font="text-overline"
+      >
+        {{ epochToLongTimeFormat(item.lastExecution) }}
+      </FSSpan>
+    </template>
+    <template
+      #item.nextExecution="{ item }"
+    >
+      <FSSpan
+        font="text-overline"
+      >
+        {{ epochToLongTimeFormat(item.nextExecution) }}
+      </FSSpan>
+    </template>
+    <template
+      #item.createdAt="{ item }"
+    >
+      <FSSpan
+        font="text-overline"
+      >
+        {{ epochToLongTimeFormat(item.createdAt) }}
+      </FSSpan>
+    </template>
+    <template
+      #item.users="{ item }"
+    >
+      <FSChipGroupUserOrganisation
+        :userOrganisationIds="item.users"
+        :wrapped="false"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import _ from "lodash";
+import type { RouteLocation } from "vue-router";
+import { defineComponent, type PropType, watch } from "vue";
+
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+
+import { useRouteOrganisation, useReports } from "@dative-gpi/foundation-core-services/composables";
+import type { ReportFilters, ReportInfos } from "@dative-gpi/foundation-core-domain/models";
+
+import FSChipGroupUserOrganisation from "../../chips/FSChipGroupUserOrganisation.vue";
+
+
+export default defineComponent({
+  name: "FSBaseReportsList",
+  components: {
+    FSChipGroupUserOrganisation
+  },
+  props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    reportsFilters: {
+      type: Object as PropType<ReportFilters>,
+      required: false,
+      default: null
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    itemTo: {
+      type: Function as PropType<(item: ReportInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { $r } = useRouteOrganisation();
+    const { epochToLongTimeFormat } = useDateFormat();
+    const { getMany: fetchReports, fetching: fetchingReports, entities: reports } = useReports();
+    
+    const routerLink = (item: ReportInfos ) => {
+      return $r({ name: "report", params: { entityId: item.id } });
+    }; 
+
+    watch(() => props.reportsFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetchReports(props.reportsFilters);
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingReports,
+      reports,
+      routerLink,
+      epochToLongTimeFormat
+    };
+  }
+});
+</script>

package/components/lists/roleOrganisationTypes/FSBaseRoleOrganisationTypesList.vue

@@ -0,0 +1,128 @@
+<template>
+  <FSDataTable
+    :items="roleOrganisationTypes"
+    :itemTo="$props.itemTo"
+    :loading="fetchingRoleOrganisations"
+    :showSelect="$props.editable"
+    :tableCode="$props.tableCode"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      #item.icon="{ item }"
+    >
+      <FSIcon>
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+    <template
+      #item.userType="{ item }"
+    >
+      <FSRow
+        align="center-left"
+      >
+        <FSIcon>
+          {{ userTypeIcon(item.userType) }}
+        </FSIcon>
+        <FSText>
+          {{ userTypeLabel(item.userType) }}
+        </FSText>
+      </FSRow>
+    </template>
+    <template
+      #item.tags="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :editable="false"
+        :tags="item.tags"
+      />
+    </template>
+  </FSDataTable>
+</template>
+  
+<script lang="ts">
+import type { PropType} from "vue";
+import { defineComponent, watch } from "vue";
+import type { RouteLocation } from "vue-router";
+import _ from "lodash";
+
+import type { RoleOrganisationTypeFilters, RoleOrganisationTypeInfos } from "@dative-gpi/foundation-core-domain/models";
+import { userTypeIcon, userTypeLabel } from "@dative-gpi/foundation-core-components/utils";
+import { useRoleOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
+
+import FSDataTable from "../FSDataTable.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
+  
+export default defineComponent({
+  name: "FSBaseRoleOrganisationTypesList",
+  components: {
+    FSRow,
+    FSIcon,
+    FSText,
+    FSTagGroup,
+    FSDataTable,
+  },
+  props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    roleOrganisationTypesFilters: {
+      type: Object as PropType<RoleOrganisationTypeFilters | null>,
+      required: false,
+      default: null
+    },
+    itemTo: {
+      type: Function as PropType<(item: RoleOrganisationTypeInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getMany: getManyRoleOrganisationTypes, entities: roleOrganisationTypes, fetching: fetchingRoleOrganisations } = useRoleOrganisationTypes();
+
+    const isSelected = (id: string): boolean => {
+      return props.modelValue.includes(id);
+    };
+
+    watch(() => props.roleOrganisationTypesFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getManyRoleOrganisationTypes(props.roleOrganisationTypesFilters ?? undefined);
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingRoleOrganisations,
+      roleOrganisationTypes,
+      userTypeLabel,
+      userTypeIcon,
+      isSelected
+    };
+  }
+});
+</script>

package/components/lists/roleOrganisations/FSBaseRoleOrganisationsList.vue

@@ -0,0 +1,128 @@
+<template>
+  <FSDataTable
+    :loading="fetchingRoleOrganisations"
+    :showSelect="$props.editable"
+    :tableCode="$props.tableCode"
+    :items="roleOrganisations"
+    :itemTo="$props.itemTo"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      #item.icon="{ item }"
+    >
+      <FSIcon>
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+    <template
+      #item.userType="{ item }"
+    >
+      <FSRow
+        align="center-left"
+      >
+        <FSIcon>
+          {{ userTypeIcon(item.userType) }}
+        </FSIcon>
+        <FSText>
+          {{ userTypeLabel(item.userType) }}
+        </FSText>
+      </FSRow>
+    </template>
+    <template
+      #item.tags="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :editable="false"
+        :tags="item.tags"
+      />
+    </template>
+  </FSDataTable>
+</template>
+  
+<script lang="ts">
+import { defineComponent, type PropType, watch } from "vue";
+import { type RouteLocation } from "vue-router";
+import _ from "lodash";
+
+import { type RoleOrganisationFilters, type RoleOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
+import { userTypeIcon, userTypeLabel } from "@dative-gpi/foundation-core-components/utils";
+import { useRoleOrganisations } from "@dative-gpi/foundation-core-services/composables";
+
+import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+
+import FSDataTable from "../FSDataTable.vue";
+
+export default defineComponent({
+  name: "FSBaseRoleOrganisationsList",
+  components: {
+    FSDataTable,
+    FSTagGroup,
+    FSIcon,
+    FSText,
+    FSRow
+  },
+  props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    roleOrganisationsFilters: {
+      type: Object as PropType<RoleOrganisationFilters | null>,
+      required: false,
+      default: null
+    },
+    itemTo: {
+      type: Function as PropType<(item: RoleOrganisationInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getMany: getManyRoleOrganisations, entities: roleOrganisations, fetching: fetchingRoleOrganisations } = useRoleOrganisations();
+
+    const isSelected = (id: string): boolean => {
+      return props.modelValue.includes(id);
+    };
+
+    watch(() => props.roleOrganisationsFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getManyRoleOrganisations(props.roleOrganisationsFilters ?? undefined);
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingRoleOrganisations,
+      roleOrganisations,
+      userTypeLabel,
+      userTypeIcon,
+      isSelected
+    };
+  }
+});
+</script>

package/components/lists/scenarioOrganisationTypes/FSBaseScenarioOrganisationTypesList.vue

@@ -0,0 +1,157 @@
+<template>
+  <FSDataTable
+    :items="scenarioOrganisationTypes"
+    :itemTo="$props.itemTo"
+    :loading="fetchingScenarioOrganisationTypes"
+    :showSelect="$props.editable"
+    :tableCode="$props.tableCode"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+
+    <template
+      #item.icon="{ item }"
+    >
+      <FSIcon>
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+    
+    <template
+      #item.criticity="{ item }"
+    >
+      <FSRow
+        align="center-left"
+      >
+        <FSIcon
+          :color="AlertTools.criticityColor(item.criticity)"
+        >
+          {{ AlertTools.criticityIcon(item.criticity) }}
+        </FSIcon>
+        <FSSpan>
+          {{ AlertTools.criticityLabel(item.criticity) }}
+        </FSSpan>
+      </FSRow>
+    </template>
+
+    <template
+      #item.imageId="{ item }"
+    >
+      <FSImage
+        v-if="item.imageId"
+        height="32px"
+        width="32px"
+        :imageId="item.imageId"
+        :thumbnail="true"
+      />
+    </template>
+
+    <template
+      #item.tags="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :editable="false"
+        :tags="item.tags"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, watch } from "vue";
+import type { RouteLocation } from "vue-router";
+import _ from "lodash";
+
+import { Criticity } from "@dative-gpi/foundation-shared-domain/enums";
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { AlertTools } from "@dative-gpi/foundation-shared-components/tools";
+
+import type { ScenarioOrganisationTypeFilters, ScenarioOrganisationTypeInfos } from "@dative-gpi/foundation-core-domain/models";
+import { useScenarioOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
+
+import FSDataTable from "../FSDataTable.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
+import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+
+export default defineComponent({
+  name: "FSBaseScenarioOrganisationTypesList",
+  components: {
+    FSDataTable,
+    FSTagGroup,
+    FSImage,
+    FSIcon,
+    FSRow,
+  },
+  props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    scenarioOrganisationTypeFilters: {
+      type: Object as PropType<ScenarioOrganisationTypeFilters>,
+      required: false,
+      default: null
+    },
+    itemTo: {
+      type: Function as PropType<(item: ScenarioOrganisationTypeInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { entities: scenarioOrganisationTypes, fetching: fetchingScenarioOrganisationTypes, getMany: getManyScenarioOrganisationTypes } = useScenarioOrganisationTypes();
+
+    const headersOptions = computed(() => ({
+      criticity: {
+        fixedFilters: getEnumEntries(Criticity).map(e => ({
+          value: e.value,
+          text: AlertTools.criticityLabel(e.value)
+        })),
+        methodFilter: (value: Criticity, item: Criticity) => value == item
+      }
+    }));
+
+    const isSelected = (id: string): boolean => {
+      return props.modelValue.includes(id);
+    };
+
+    watch(() => props.scenarioOrganisationTypeFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getManyScenarioOrganisationTypes(props.scenarioOrganisationTypeFilters);
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingScenarioOrganisationTypes,
+      scenarioOrganisationTypes,
+      headersOptions,
+      AlertTools,
+      isSelected
+    };
+  }
+});
+</script>