From 3d2e7d5c10e784b0a4a8988b6ce3b49c48de64ba Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 11 Sep 2024 08:49:54 +0200
Subject: [PATCH] Add skeleton

---
 dev/docker/ocis.web.config.json               |   9 +-
 packages/web-app-activities/l10n/.tx/config   |   9 ++
 .../web-app-activities/l10n/translations.json |   1 +
 packages/web-app-activities/package.json      |  22 ++++
 .../src/LayoutContainer.vue                   |  20 +++
 packages/web-app-activities/src/appid.ts      |   1 +
 .../src/components/ActivityItem.vue           |  85 +++++++++++++
 packages/web-app-activities/src/index.ts      |  67 ++++++++++
 .../src/views/ActivityList.vue                |  86 +++++++++++++
 packages/web-app-activities/src/views/App.vue | 117 ++++++++++++++++++
 pnpm-lock.yaml                                |  43 ++++++-
 11 files changed, 455 insertions(+), 5 deletions(-)
 create mode 100644 packages/web-app-activities/l10n/.tx/config
 create mode 100644 packages/web-app-activities/l10n/translations.json
 create mode 100644 packages/web-app-activities/package.json
 create mode 100644 packages/web-app-activities/src/LayoutContainer.vue
 create mode 100644 packages/web-app-activities/src/appid.ts
 create mode 100644 packages/web-app-activities/src/components/ActivityItem.vue
 create mode 100644 packages/web-app-activities/src/index.ts
 create mode 100644 packages/web-app-activities/src/views/ActivityList.vue
 create mode 100644 packages/web-app-activities/src/views/App.vue

diff --git a/dev/docker/ocis.web.config.json b/dev/docker/ocis.web.config.json
index abcb088fe8d..b6e680d769b 100644
--- a/dev/docker/ocis.web.config.json
+++ b/dev/docker/ocis.web.config.json
@@ -20,14 +20,19 @@
     "ocm",
     "webfinger",
     "epub-reader",
-    "app-store"
+    "app-store",
+    "activities"
   ],
   "external_apps": [
     {
       "id": "preview",
       "path": "web-app-preview",
       "config": {
-        "mimeTypes": ["image/tiff", "image/bmp", "image/x-ms-bmp"]
+        "mimeTypes": [
+          "image/tiff",
+          "image/bmp",
+          "image/x-ms-bmp"
+        ]
       }
     },
     {
diff --git a/packages/web-app-activities/l10n/.tx/config b/packages/web-app-activities/l10n/.tx/config
new file mode 100644
index 00000000000..e786cede485
--- /dev/null
+++ b/packages/web-app-activities/l10n/.tx/config
@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[o:owncloud-org:p:owncloud-web:r:app-activities]
+file_filter = locale/<lang>/app.po
+minimum_perc = 0
+source_file = template.pot
+source_lang = en
+type = PO
diff --git a/packages/web-app-activities/l10n/translations.json b/packages/web-app-activities/l10n/translations.json
new file mode 100644
index 00000000000..0967ef424bc
--- /dev/null
+++ b/packages/web-app-activities/l10n/translations.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/web-app-activities/package.json b/packages/web-app-activities/package.json
new file mode 100644
index 00000000000..62825345c41
--- /dev/null
+++ b/packages/web-app-activities/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "web-app-activities",
+  "version": "0.0.0",
+  "private": true,
+  "description": "ownCloud activities app",
+  "license": "AGPL-3.0",
+  "devDependencies": {
+    "web-test-helpers": "workspace:*"
+  },
+  "peerDependencies": {
+    "@ownclouders/web-client": "workspace:*",
+    "@ownclouders/web-pkg": "workspace:*",
+    "design-system": "workspace:@ownclouders/design-system@*",
+    "fuse.js": "7.0.0",
+    "lodash-es": "4.17.21",
+    "mark.js": "^8.11.1",
+    "pinia": "2.2.2",
+    "vue-concurrency": "5.0.1",
+    "vue-router": "4.2.5",
+    "zod": "3.23.8"
+  }
+}
diff --git a/packages/web-app-activities/src/LayoutContainer.vue b/packages/web-app-activities/src/LayoutContainer.vue
new file mode 100644
index 00000000000..be0d6a77012
--- /dev/null
+++ b/packages/web-app-activities/src/LayoutContainer.vue
@@ -0,0 +1,20 @@
+<template>
+  <main id="activities">
+    <router-view />
+  </main>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'LayoutContainer'
+})
+</script>
+
+<style lang="scss">
+#activities {
+  overflow: auto;
+  padding: var(--oc-space-medium) !important;
+}
+</style>
diff --git a/packages/web-app-activities/src/appid.ts b/packages/web-app-activities/src/appid.ts
new file mode 100644
index 00000000000..f6dd373072f
--- /dev/null
+++ b/packages/web-app-activities/src/appid.ts
@@ -0,0 +1 @@
+export const APPID = 'activities'
diff --git a/packages/web-app-activities/src/components/ActivityItem.vue b/packages/web-app-activities/src/components/ActivityItem.vue
new file mode 100644
index 00000000000..3c25c6871ce
--- /dev/null
+++ b/packages/web-app-activities/src/components/ActivityItem.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="oc-flex oc-flex-middle activity-item">
+    <div class="oc-flex oc-flex-middle">
+      <oc-avatar :width="36" :user-name="activity.template.variables.user.displayName" />
+      <span class="oc-ml-s" v-text="activity.template.variables.user.displayName" />
+    </div>
+    <div>activity unknown</div>
+    <div class="oc-text-truncate">
+      <resource-list-item v-if="resource" :resource="resource" :is-resource-clickable="false" />
+      <div v-if="resourceDeleted" class="oc-text-muted oc-flex oc-flex-middle oc-p-xs">
+        <oc-icon name="delete-bin" />
+        <span class="oc-ml-s" v-text="activity.template.variables.resource.name" />
+      </div>
+    </div>
+    <div><span v-text="modifiedDateTime"></span></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, PropType, ref, unref } from 'vue'
+import { Activity } from '@ownclouders/web-client/src/graph/generated'
+import { DateTime } from 'luxon'
+import { formatDateFromDateTime, ResourceListItem, useClientService } from '@ownclouders/web-pkg'
+import { useGettext } from 'vue3-gettext'
+import { Resource } from '@ownclouders/web-client'
+
+export default defineComponent({
+  name: 'ActivityList',
+  components: { ResourceListItem },
+  props: {
+    activity: {
+      type: Object as PropType<Activity>,
+      required: true
+    }
+  },
+  setup(props) {
+    const clientService = useClientService()
+    const { current: currentLanguage } = useGettext()
+    const resource = ref<Resource>()
+    const resourceDeleted = ref(false)
+
+    const modifiedDateTime = computed(() => {
+      const dateTime = DateTime.fromISO(props.activity.times.recordedTime)
+      return formatDateFromDateTime(dateTime, currentLanguage)
+    })
+
+    onMounted(async () => {
+      try {
+        resource.value = await clientService.webdav.getFileInfo(
+          unref(props.activity.template.variables.space.id),
+          { fileId: props.activity.template.variables.resource.id }
+        )
+      } catch (e) {
+        resourceDeleted.value = true
+      }
+    })
+
+    return {
+      modifiedDateTime,
+      resource,
+      resourceDeleted
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.activity-item {
+  .oc-resource-name {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+    overflow: hidden;
+  }
+}
+
+.activity-item > * {
+  flex: 1;
+  text-align: left;
+}
+
+.activity-item > *:last-child {
+  text-align: right !important;
+}
+</style>
diff --git a/packages/web-app-activities/src/index.ts b/packages/web-app-activities/src/index.ts
new file mode 100644
index 00000000000..98b9cd7df8b
--- /dev/null
+++ b/packages/web-app-activities/src/index.ts
@@ -0,0 +1,67 @@
+import translations from '../l10n/translations.json'
+import { useGettext } from 'vue3-gettext'
+import { computed } from 'vue'
+import { AppMenuItemExtension, defineWebApplication, Extension } from '@ownclouders/web-pkg'
+import { urlJoin } from '@ownclouders/web-client'
+import { RouteRecordRaw } from 'vue-router'
+import { APPID } from './appid'
+
+export default defineWebApplication({
+  setup() {
+    const { $gettext } = useGettext()
+
+    const appInfo = {
+      name: $gettext('Activities'),
+      id: APPID,
+      icon: 'pulse',
+      color: '#ff6961'
+    }
+
+    const routes: RouteRecordRaw[] = [
+      {
+        path: '/',
+        name: 'root',
+        component: () => import('./LayoutContainer.vue'),
+        redirect: urlJoin(appInfo.id, 'list'),
+        meta: {
+          authContext: 'user'
+        },
+        children: [
+          {
+            path: 'list',
+            name: 'list',
+            component: () => import('./views/App.vue'),
+            meta: {
+              authContext: 'user',
+              title: $gettext('Activities')
+            }
+          }
+        ]
+      }
+    ]
+
+    const menuItemExtension: AppMenuItemExtension = {
+      id: `app.${appInfo.id}.menuItem`,
+      type: 'appMenuItem',
+      label: () => appInfo.name,
+      color: appInfo.color,
+      icon: appInfo.icon,
+      priority: 30,
+      path: urlJoin(appInfo.id)
+    }
+    const extensions = computed(() => {
+      const result: Extension[] = []
+
+      result.push(menuItemExtension)
+
+      return result
+    })
+
+    return {
+      appInfo,
+      routes,
+      translations,
+      extensions
+    }
+  }
+})
diff --git a/packages/web-app-activities/src/views/ActivityList.vue b/packages/web-app-activities/src/views/ActivityList.vue
new file mode 100644
index 00000000000..e7c04ee887a
--- /dev/null
+++ b/packages/web-app-activities/src/views/ActivityList.vue
@@ -0,0 +1,86 @@
+<template>
+  <ul class="oc-list activity-list">
+    <li v-for="(activities, date) in activitiesDateCategorized" :key="date" class="oc-mb-l">
+      <span class="oc-text-bold oc-text-muted activity-list-date" v-text="getListDate(date)" />
+      <ul class="oc-ml-s oc-mt-s timeline">
+        <li v-for="activityItem in activities" :key="activityItem">
+          <ActivityItem :activity="activityItem" />
+        </li>
+      </ul>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue'
+import { Activity } from '@ownclouders/web-client/graph/generated'
+import { DateTime } from 'luxon'
+import ActivityItem from '../components/ActivityItem.vue'
+import { formatDateFromDateTime } from '@ownclouders/web-pkg'
+import { useGettext } from 'vue3-gettext'
+
+export default defineComponent({
+  name: 'ActivityList',
+  components: { ActivityItem },
+  props: {
+    activities: {
+      type: Array as PropType<Activity[]>,
+      required: true
+    }
+  },
+  setup(props) {
+    const { current: currentLanguage } = useGettext()
+
+    const activitiesDateCategorized = computed(() => {
+      return props.activities.reduce((acc, activity) => {
+        const date = DateTime.fromISO(activity.times.recordedTime).toISODate()
+
+        if (!acc[date]) {
+          acc[date] = []
+        }
+        acc[date].push(activity)
+
+        // TODO: Remove mock data
+        const date2 = DateTime.fromISO(activity.times.recordedTime).minus({ day: 1 }).toISODate()
+        if (!acc[date2]) {
+          acc[date2] = []
+        }
+        acc[date2].push(activity)
+
+        const date3 = DateTime.fromISO(activity.times.recordedTime).minus({ day: 2 }).toISODate()
+        if (!acc[date3]) {
+          acc[date3] = []
+        }
+        acc[date3].push(activity)
+
+        return acc
+      }, {})
+    })
+
+    const getListDate = (dateISO: string) => {
+      const dateTime = DateTime.fromISO(dateISO)
+
+      if (
+        dateTime.hasSame(DateTime.now(), 'day') ||
+        dateTime.hasSame(DateTime.now().minus({ day: 1 }), 'day')
+      ) {
+        return dateTime.toRelativeCalendar({ locale: currentLanguage })
+      }
+
+      return formatDateFromDateTime(dateTime, currentLanguage, DateTime.DATE_MED_WITH_WEEKDAY)
+    }
+
+    return { activitiesDateCategorized, getListDate }
+  }
+})
+</script>
+
+<style lang="scss">
+.activity-list {
+  max-width: 1000px;
+
+  &-date {
+    text-transform: capitalize;
+  }
+}
+</style>
diff --git a/packages/web-app-activities/src/views/App.vue b/packages/web-app-activities/src/views/App.vue
new file mode 100644
index 00000000000..b58377a4b9d
--- /dev/null
+++ b/packages/web-app-activities/src/views/App.vue
@@ -0,0 +1,117 @@
+<template>
+  <h2 v-text="$gettext('Activities')"></h2>
+  <div class="oc-width-1-1 oc-mb-m">
+    <item-filter
+      ref="mediaTypeFilter"
+      :allow-multiple="false"
+      :filter-label="$gettext('Location')"
+      :filterable-attributes="['name']"
+      :option-filter-label="$gettext('Filter location')"
+      :show-option-filter="true"
+      :items="filterableSpaces"
+      :close-on-click="true"
+      class="files-search-filter-file-type oc-mr-s"
+      display-name-attribute="name"
+      filter-name="location"
+    >
+      <template #image="{ item }">
+        <oc-icon :name="getLocationFilterIcon(item)" />
+      </template>
+      <template #item="{ item }">
+        <div v-text="item.name" />
+      </template>
+    </item-filter>
+  </div>
+  <app-loading-spinner v-if="isLoading" />
+  <template v-else>
+    <no-content-message v-if="!activities.length" icon="pulse">
+      <template #message>
+        <span v-text="$gettext('No activities found')" />
+      </template>
+    </no-content-message>
+    <ActivityList v-else :activities="activities" />
+  </template>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, ref, unref, watch } from 'vue'
+import {
+  AppLoadingSpinner,
+  ItemFilter,
+  NoContentMessage,
+  useClientService,
+  useRouteQuery,
+  useSpacesStore
+} from '@ownclouders/web-pkg'
+import { storeToRefs } from 'pinia'
+import {
+  call,
+  isPersonalSpaceResource,
+  isProjectSpaceResource,
+  SpaceResource
+} from '@ownclouders/web-client'
+import { useTask } from 'vue-concurrency'
+import { Activity } from '@ownclouders/web-client/graph/generated'
+import ActivityList from './ActivityList.vue'
+
+export default defineComponent({
+  name: 'App',
+  components: { ActivityList, NoContentMessage, ItemFilter, AppLoadingSpinner },
+  setup() {
+    const spacesStore = useSpacesStore()
+    const { spaces } = storeToRefs(spacesStore)
+    const clientService = useClientService()
+    const activities = ref<Activity[]>([])
+
+    const locationQuery = useRouteQuery('q_location')
+
+    const filterableSpaces = computed(() => {
+      return [...unref(spaces)]
+        .filter(
+          (space) =>
+            !space.disabled && (isProjectSpaceResource(space) || isPersonalSpaceResource(space))
+        )
+        .sort((a, b) => {
+          if (isPersonalSpaceResource(a) === isPersonalSpaceResource(b)) {
+            return a.name.localeCompare(b.name)
+          }
+          return isPersonalSpaceResource(a) ? -1 : 1
+        })
+    })
+
+    const loadActivitiesTask = useTask(function* (signal) {
+      const filters = []
+
+      if (unref(locationQuery)) {
+        filters.push(`itemid:${unref(locationQuery)}`)
+      }
+
+      activities.value = yield* call(
+        clientService.graphAuthenticated.activities.listActivities(filters.join(' AND '), {
+          signal
+        })
+      )
+    })
+
+    const isLoading = computed(() => loadActivitiesTask.isRunning || !loadActivitiesTask.last)
+
+    const getLocationFilterIcon = (space: SpaceResource) => {
+      if (isPersonalSpaceResource(space)) {
+        return 'folder'
+      }
+
+      return 'layout-grid'
+    }
+
+    onMounted(() => {
+      loadActivitiesTask.perform()
+    })
+
+    watch(locationQuery, () => {
+      loadActivitiesTask.perform()
+    })
+
+    return { activities, filterableSpaces, getLocationFilterIcon, isLoading }
+  }
+})
+</script>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 86157f5ca1f..a498c9b5ef7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -510,6 +510,43 @@ importers:
 
   packages/tsconfig: {}
 
+  packages/web-app-activities:
+    dependencies:
+      '@ownclouders/web-client':
+        specifier: workspace:*
+        version: link:../web-client
+      '@ownclouders/web-pkg':
+        specifier: workspace:*
+        version: link:../web-pkg
+      design-system:
+        specifier: workspace:@ownclouders/design-system@*
+        version: link:../design-system
+      fuse.js:
+        specifier: 7.0.0
+        version: 7.0.0
+      lodash-es:
+        specifier: 4.17.21
+        version: 4.17.21
+      mark.js:
+        specifier: ^8.11.1
+        version: 8.11.1
+      pinia:
+        specifier: 2.2.2
+        version: 2.2.2(typescript@5.6.2)(vue@3.5.6(typescript@5.6.2))
+      vue-concurrency:
+        specifier: 5.0.1
+        version: 5.0.1(vue@3.5.6(typescript@5.6.2))
+      vue-router:
+        specifier: 4.2.5
+        version: 4.2.5(vue@3.5.6(typescript@5.6.2))
+      zod:
+        specifier: 3.23.8
+        version: 3.23.8
+    devDependencies:
+      web-test-helpers:
+        specifier: workspace:*
+        version: link:../web-test-helpers
+
   packages/web-app-admin-settings:
     dependencies:
       '@ownclouders/web-client':
@@ -4872,7 +4909,7 @@ packages:
     resolution: {integrity: sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==}
     engines: {node: '>= 4.0'}
     os: [darwin]
-    deprecated: Upgrade to fsevents v2 to mitigate potential security issues
+    deprecated: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
 
   fsevents@2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
@@ -10253,7 +10290,7 @@ snapshots:
       '@cucumber/ci-environment': 9.1.0
       '@cucumber/cucumber-expressions': 16.1.1
       '@cucumber/gherkin': 26.0.3
-      '@cucumber/gherkin-streams': 5.0.1(@cucumber/gherkin@26.0.3)(@cucumber/message-streams@4.0.1(@cucumber/messages@21.0.1))(@cucumber/messages@21.0.1)
+      '@cucumber/gherkin-streams': 5.0.1(@cucumber/gherkin@26.0.3)(@cucumber/message-streams@4.0.1(@cucumber/messages@26.0.0))(@cucumber/messages@21.0.1)
       '@cucumber/gherkin-utils': 8.0.2
       '@cucumber/html-formatter': 20.2.1(@cucumber/messages@21.0.1)
       '@cucumber/message-streams': 4.0.1(@cucumber/messages@21.0.1)
@@ -10291,7 +10328,7 @@ snapshots:
       yaml: 2.5.1
       yup: 0.32.11
 
-  '@cucumber/gherkin-streams@5.0.1(@cucumber/gherkin@26.0.3)(@cucumber/message-streams@4.0.1(@cucumber/messages@21.0.1))(@cucumber/messages@21.0.1)':
+  '@cucumber/gherkin-streams@5.0.1(@cucumber/gherkin@26.0.3)(@cucumber/message-streams@4.0.1(@cucumber/messages@26.0.0))(@cucumber/messages@21.0.1)':
     dependencies:
       '@cucumber/gherkin': 26.0.3
       '@cucumber/message-streams': 4.0.1(@cucumber/messages@21.0.1)