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

package/components/lists/dashboardOrganisationTypes/FSBaseDashboardOrganisationTypesList.vue

@@ -0,0 +1,179 @@
+<template>
+  <FSDataTable
+    defaultMode="iterator"
+    :loading="fetchingDashboardOrganisationTypes"
+    :items="dashboardOrganisationTypes"
+    :itemTo="$props.itemTo"
+    :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.main="{ item }"
+    >
+      <FSRow>
+        <FSIcon
+          v-if="item.id === organisationMainDashboardId"
+        >
+          mdi-account-group-outline
+        </FSIcon>
+        <FSIcon
+          v-if="item.id === userOrganisationMainDashboardId"
+        >
+          mdi-home
+        </FSIcon>
+      </FSRow>
+    </template>
+    <template
+      #item.icon="{ item }"
+    >
+      <FSIcon>
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+    <template
+      #item.organisationTypeLabel="{ item }"
+    >
+      <FSText
+        v-if="item.organisationTypeId"
+        :label="item.organisationTypeLabel"
+      />
+      <FSChip
+        v-else
+        variant="standard"
+        :label="$tr('ui.common.all', 'All')"
+      />
+    </template>
+    <template
+      #item.tags="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :editable="false"
+        :tags="item.tags"
+      />
+    </template>
+    <template
+      #item.tile="{ item, toggleSelect }"
+    >
+      <FSDashboardOrganisationTypeTileUI
+        :bottomColor="item.colors"
+        :to="$props.itemTo && $props.itemTo(item)"
+        :modelValue="isSelected(item.id)"
+        @update:modelValue="toggleSelect(item)"
+        v-bind="item"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, type PropType, watch } from "vue";
+import type { RouteLocation } from "vue-router";
+import _ from "lodash";
+
+import { useAppOrganisationId, useCurrentUserOrganisation, useDashboardOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
+import type { DashboardOrganisationTypeFilters, DashboardOrganisationTypeInfos } from "@dative-gpi/foundation-core-domain/models";
+import { useOrganisation } from "@dative-gpi/foundation-shared-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 FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
+import FSChip from "@dative-gpi/foundation-shared-components/components/FSChip.vue";
+import FSDashboardOrganisationTypeTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTypeTileUI.vue";
+
+import FSDataTable from "../FSDataTable.vue";
+
+export default defineComponent({
+  name: "FSBaseDashboardOrganisationTypesList",
+  components: {
+    FSDataTable,
+    FSTagGroup,
+    FSIcon,
+    FSRow,
+    FSText,
+    FSChip,
+    FSDashboardOrganisationTypeTileUI
+  },
+  props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    dashboardOrganisationTypeFilters: {
+      type: Object as PropType<DashboardOrganisationTypeFilters>,
+      default: undefined,
+      required: false
+    },
+    itemTo: {
+      type: Function as PropType<(item: DashboardOrganisationTypeInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    }
+  },
+  setup(props) {
+    const { getMany: getDashboardOrganisationTypes, fetching: fetchingDashboardOrganisationTypes, entities: dashboardOrganisationTypes } = useDashboardOrganisationTypes();
+    const { fetch: fetchUserOrganisation, entity: userOrganisation } = useCurrentUserOrganisation();
+    const { get: fetchOrganisation, entity: organisation } = useOrganisation();
+    const { organisationId } = useAppOrganisationId();
+
+    const userOrganisationMainDashboardId = computed((): string | null => {
+      if (userOrganisation.value) {
+        return userOrganisation.value.mainDashboardId;
+      }
+      return null;
+    });
+
+    const organisationMainDashboardId = computed((): string | null => {
+      if (organisation.value) {
+        return organisation.value.mainDashboardId;
+      }
+      return null;
+    });
+  
+    const isSelected = (id: string): boolean => {
+      return props.modelValue.includes(id);
+    };
+
+    onMounted(() => {
+      fetchUserOrganisation();
+    });
+
+    watch(organisationId, () => {
+      if (organisationId.value) {
+        fetchOrganisation(organisationId.value);
+      }
+    }, { immediate: true });
+
+    watch(() => props.dashboardOrganisationTypeFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getDashboardOrganisationTypes(props.dashboardOrganisationTypeFilters);
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingDashboardOrganisationTypes,
+      userOrganisationMainDashboardId,
+      organisationMainDashboardId,
+      dashboardOrganisationTypes,
+      isSelected,
+    };
+  }
+});
+</script>

package/components/lists/dashboards/FSBaseDashboardsList.vue

@@ -0,0 +1,235 @@
+<template>
+  <FSDataTable
+    defaultMode="iterator"
+    :items="items"
+    :itemTo="$props.itemTo"
+    :loading="fetchingDashboardOrganisationTypes || fetchingDashboardOrganisations || fetchingDashboardShallows"
+    :tableCode="$props.tableCode"
+    :modelValue="selecteds"
+    @update:modelValue="onSelect"
+    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.main="{ item }"
+    >
+      <FSIcon
+        v-if="item.id === mainOrganisationDashboardId"
+      >
+        mdi-account-group-outline
+      </FSIcon>
+      <FSIcon
+        v-if="item.id === mainUserDashboardId"
+      >
+        mdi-home
+      </FSIcon>
+    </template>
+    <template
+      #item.tags="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :editable="false"
+        :tags="item.tags"
+      />
+    </template>
+    <template
+      #item.tile="{ item, toggleSelect }"
+    >
+      <FSDashboardOrganisationTypeTileUI
+        v-if="item.dashboardType == DashboardType.OrganisationType"
+        :bottomColor="item.colors"
+        :to="$props.itemTo && $props.itemTo(item)"
+        :modelValue="isSelected(item.id)"
+        @update:modelValue="toggleSelect(item)"
+        v-bind="item"
+      />
+      <FSDashboardOrganisationTileUI
+        v-if="item.dashboardType == DashboardType.Organisation"
+        :bottomColor="item.colors"
+        :to="$props.itemTo && $props.itemTo(item)"
+        :modelValue="isSelected(item.id)"
+        @update:modelValue="toggleSelect(item)"
+        v-bind="item"
+      />
+      <FSDashboardShallowTileUI
+        v-if="item.dashboardType == DashboardType.Shallow"
+        :bottomColor="item.colors"
+        :modelValue="isSelected(item.id)"
+        @update:modelValue="toggleSelect(item)"
+        :to="$props.itemTo && $props.itemTo(item)"
+        v-bind="item"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import _ from "lodash";
+import type { RouteLocation } from "vue-router";
+import { computed, defineComponent, onMounted, type PropType, ref, watch } from "vue";
+
+import { useAppOrganisationId, useCurrentUserOrganisation, useDashboardOrganisations, useDashboardOrganisationTypes, useDashboardShallows } from "@dative-gpi/foundation-core-services/composables";
+import type { DashboardOrganisationTypeFilters, DashboardOrganisationFilters, DashboardShallowFilters, DashboardInfos } from "@dative-gpi/foundation-core-domain/models";
+import { useOrganisation } from "@dative-gpi/foundation-shared-services/composables";
+
+import type { DashboardsListItem } from "@/core/foundation-core-components/utils";
+import { DashboardType } from "@dative-gpi/foundation-shared-domain/enums";
+
+import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSDashboardShallowTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardShallowTileUI.vue";
+import FSDashboardOrganisationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTileUI.vue";
+import FSDashboardOrganisationTypeTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTypeTileUI.vue";
+
+import FSDataTable from "../FSDataTable.vue";
+
+export default defineComponent({
+  name: "FSBaseDashboardsList",
+  components: {
+    FSDataTable,
+    FSTagGroup,
+    FSIcon,
+    FSDashboardOrganisationTileUI,
+    FSDashboardOrganisationTypeTileUI,
+    FSDashboardShallowTileUI
+  },
+  props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    dashboardOrganisationTypeFetchFilter: {
+      type: Object as PropType<DashboardOrganisationTypeFilters>,
+      default: undefined,
+      required: false
+    },
+    dashboardOrganisationsFilters: {
+      type: Object as PropType<DashboardOrganisationFilters>,
+      default: undefined,
+      required: false
+    },
+    dashboardShallowsFilters: {
+      type: Object as PropType<DashboardShallowFilters>,
+      default: undefined,
+      required: false
+    },
+    itemTo: {
+      type: Function as PropType<(item: DashboardInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
+    }
+  },
+  emits: ["update", "update:modelValue", "update:type"],
+  setup(props, { emit }) {
+    const { entities: dashboardOrganisationTypes, fetching: fetchingDashboardOrganisationTypes, getMany: getManyDashboardOrganisationTypes } = useDashboardOrganisationTypes();
+    const { entities: dashboardOrganisations, fetching: fetchingDashboardOrganisations, getMany: getManyDashboardOrganisations } = useDashboardOrganisations();
+    const { entities: dashboardShallows, fetching: fetchingDashboardShallows, getMany: getManyDashboardShallows } = useDashboardShallows();
+    const { fetch: fetchUserOrganisation, entity: userOrganisation } = useCurrentUserOrganisation();
+    const { entity: organisation, get: getOrganisation } = useOrganisation();
+    const { organisationId } = useAppOrganisationId();
+
+    const selecteds = ref<string[]>(props.modelValue);
+
+    const items = computed((): DashboardsListItem[] => {
+      return _.sortBy([
+        ...dashboardOrganisationTypes.value.map(g => ({
+          ...g,
+          dashboardType: DashboardType.OrganisationType
+        })) as DashboardsListItem[],
+        ...dashboardOrganisations.value.map(d => ({
+          ...d,
+          dashboardType: DashboardType.Organisation
+        })) as DashboardsListItem[],
+        ...dashboardShallows.value.map(d => ({
+          ...d,
+          dashboardType: DashboardType.Shallow
+        })) as DashboardsListItem[]
+      ], d => d.label);
+    });
+
+    const mainUserDashboardId = computed(() => {
+      return userOrganisation.value?.mainDashboardId;
+    });
+
+    const mainOrganisationDashboardId = computed(() => {
+      return organisation.value?.mainDashboardId;
+    });
+
+    const onSelect = (values: string[]) => {
+      selecteds.value = values;
+      const selectedItems = items.value.filter(i => selecteds.value!.includes(i.id));
+      const newModelValue = selectedItems.map(i => i.id);
+      const newType = selectedItems.map(i => i.dashboardType);
+      emit("update:modelValue", newModelValue);
+      emit("update:type", newType);
+      emit("update", { modelValue: newModelValue, type: newType });
+    };
+
+    const isSelected = (id: string) => {
+      return selecteds.value?.includes(id);
+    };
+
+    onMounted(() => {
+      fetchUserOrganisation();
+    })
+
+    watch(() => organisationId.value, () => {
+      if (organisationId.value) {
+        getOrganisation(organisationId.value);
+      }
+    }, { immediate: true });
+
+    watch(() => props.dashboardOrganisationTypeFetchFilter, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getManyDashboardOrganisationTypes(props.dashboardOrganisationTypeFetchFilter);
+      }
+    }, { immediate: true });
+
+    watch(() => props.dashboardOrganisationsFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getManyDashboardOrganisations(props.dashboardOrganisationsFilters);
+      }
+    }, { immediate: true });
+
+    watch(() => props.dashboardShallowsFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getManyDashboardShallows(props.dashboardShallowsFilters);
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingDashboardOrganisationTypes,
+      fetchingDashboardOrganisations,
+      fetchingDashboardShallows,
+      selecteds,
+      items,
+      mainUserDashboardId,
+      mainOrganisationDashboardId,
+      onSelect,
+      isSelected,
+      DashboardType
+    };
+  }
+});
+</script>

package/components/lists/dashboards/FSSimpleDashboardsList.vue

@@ -0,0 +1,62 @@
+<template>
+  <FSSimpleList
+    :items="dashboards"
+    :loading="fetching"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, watch, computed } from "vue";
+
+import type { DashboardOrganisationFilters, DashboardOrganisationTypeFilters } from "@dative-gpi/foundation-core-domain/models";
+import { useDashboardOrganisations, useDashboardOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
+
+import FSSimpleList from "@dative-gpi/foundation-shared-components/components/lists/FSSimpleList.vue";
+
+export default defineComponent({
+  name: "FSSimpleDashboardsList",
+  components: {
+    FSSimpleList,
+  },
+  props: {
+    dashboardOrganisationFilters: {
+      type: Object as PropType<DashboardOrganisationFilters>,
+      required: false,
+      default: () => ({})
+    },
+    dashboardOrganisationTypeFilters: {
+      type: Object as PropType<DashboardOrganisationTypeFilters>,
+      required: false,
+      default: () => ({})
+    }
+  },
+  setup(props){
+    const { entities: dashboardOrganisations, 
+            getMany: getManyDashboardOrganisations, 
+            fetching: fetchingDashboardOrganisations } = useDashboardOrganisations();
+    const { entities: dashboardOrganisationTypes, 
+            getMany: getManyDashboardOrganisationTypes, 
+            fetching: fetchingDashboardOrganisationTypes } = useDashboardOrganisationTypes();
+
+    const fetching = computed(() => fetchingDashboardOrganisations.value 
+      || fetchingDashboardOrganisationTypes.value);
+    
+    const dashboards = computed(() => {
+      return [...dashboardOrganisations.value, ...dashboardOrganisationTypes.value];
+    });
+
+    const fetch = () => {
+      getManyDashboardOrganisations(props.dashboardOrganisationFilters);
+      getManyDashboardOrganisationTypes(props.dashboardOrganisationTypeFilters);
+    }
+
+    watch(() => [props.dashboardOrganisationFilters, props.dashboardOrganisationTypeFilters], fetch, { immediate: true });
+
+    return {
+      dashboards,
+      fetching
+    }
+  }
+});
+</script>

package/components/lists/dataCategories/FSBaseDataCategoriesList.vue

@@ -0,0 +1,155 @@
+<template>
+  <FSCol>
+    <FSRow
+      align="bottom-center"
+      width="50%"
+    >
+      <FSSearchField
+        v-model="search"
+      />
+      <FSButtonCheckbox
+        :label="$tr('ui.common.data-correlated','Correlated only')"
+        :color="ColorEnum.Success"
+        prependIcon="mdi-link"
+        v-model="correlated"
+      />
+    </FSRow>
+    <FSFadeOut
+      maxHeight="150px"
+      maskHeight="0px"
+    >
+      <FSDataTable
+        defaultMode="iterator"
+        :loading="fetchingDataCategories"
+        :items="dataCategories"
+        :modelValue="$props.modelValue"
+        :showSearch="false"
+        :tableCode="$props.tableCode"
+        :search="search"
+        @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.tile="{ item }"
+        >
+          <FSClickable
+            padding="12px"
+            height="60px"
+            width="233px"
+            :color="isSelected(item.id) ? ColorEnum.Primary : ColorEnum.Dark"
+            @click="$emit('update:modelValue', [item.id])"
+            v-bind="$attrs"
+          >
+            <template
+              #default
+            >
+              <FSRow
+                align="center-center"
+                :wrap="false"
+              >
+                <FSSpan
+                  :lineClamp="1"
+                >
+                  {{ item.label }}
+                </FSSpan>
+                <v-spacer/>
+                <FSIcon
+                  :color="item.correlated ? ColorEnum.Primary : ColorEnum.Light"
+                  :icon="item.correlated ? 'mdi-link' : 'mdi-link-off'"
+                  variant="dark"
+                />
+              </FSRow>
+            </template>
+          </FSClickable>
+        </template>
+      </FSDataTable>
+    </FSFadeOut>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, ref, watch } from "vue";
+import _ from "lodash";
+
+import {ColorEnum} from "@dative-gpi/foundation-shared-components/models";
+
+import { useDataCategories } from "@dative-gpi/foundation-core-services/composables";
+import type { DataCategoryFilters } from "@dative-gpi/foundation-core-domain/models";
+
+import FSDataTable from "../FSDataTable.vue";
+import FSCol from "@dative-gpi/foundation-shared-components/components/FSCol.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
+import FSFadeOut from "@dative-gpi/foundation-shared-components/components/FSFadeOut.vue";
+import FSClickable from "@dative-gpi/foundation-shared-components/components/FSClickable.vue";
+import FSSearchField from "@dative-gpi/foundation-shared-components/components/fields/FSSearchField.vue";
+import FSButtonCheckbox from "@dative-gpi/foundation-shared-components/components/buttons/FSButtonCheckbox.vue";
+
+export default defineComponent({
+  name: "FSBaseDataCategoriesList",
+  components: {
+    FSDataTable,
+    FSCol,
+    FSFadeOut,
+    FSClickable,
+    FSRow,
+    FSSpan,
+    FSSearchField,
+    FSButtonCheckbox,
+    FSIcon
+  },
+  props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    dataCategoryFilters: {
+      type: Object as PropType<DataCategoryFilters>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getMany: fetchDataCategories, fetching: fetchingDataCategories, entities: dataCategories } = useDataCategories();
+
+    const search = ref<string | null | undefined >();
+    const correlated = ref<boolean>(false);
+
+    const isSelected = (id: string): boolean => {
+      return props.modelValue.includes(id);
+    };
+
+    watch(() => [props.dataCategoryFilters, search.value, correlated.value] , (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetchDataCategories({...props.dataCategoryFilters, search: search.value, correlated: correlated.value ? true : undefined});
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingDataCategories,
+      dataCategories,
+      ColorEnum,
+      search,
+      correlated,
+      isSelected
+    };
+  }
+});
+</script>