draft first dashboard

Author: Grotax

Makefile

@@ -172,8 +172,7 @@ appstore:
 
 	# on macOS there is no option "--parents" for the "cp" command
 	mkdir -p $(appstore_sign_dir)/$(app_name)/js/build $(appstore_sign_dir)/$(app_name)/js/admin
-	cp js/build/app.min.js $(appstore_sign_dir)/$(app_name)/js/build
-	cp js/build/news-admin-settings.js* $(appstore_sign_dir)/$(app_name)/js/build
+	cp js/build/* $(appstore_sign_dir)/$(app_name)/js/build
 
 	# export the key and cert to a file
 	@if [ ! -f $(cert_dir)/$(app_name).key ] || [ ! -f $(cert_dir)/$(app_name).crt ]; then \

css/dashboard.css

@@ -0,0 +1,12 @@
+.icon-newsdashboard {
+	background-image: url('../img/app-dark.svg');
+	filter: var(--background-invert-if-dark);
+}
+
+.widget-list li {
+	list-style-type: disc;
+}
+
+#app-dashboard .panels .panel--header h2 {
+	display: flex;
+}

lib/AppInfo/Application.php

@@ -24,6 +24,7 @@
 use OCA\News\Search\FeedSearchProvider;
 use OCA\News\Search\FolderSearchProvider;
 use OCA\News\Search\ItemSearchProvider;
+use OCA\News\Dashboard\ItemWidget;
 
 use OCP\AppFramework\Bootstrap\IBootContext;
 use OCP\AppFramework\Bootstrap\IBootstrap;
@@ -85,6 +86,7 @@ public function register(IRegistrationContext $context): void
         $context->registerSearchProvider(FeedSearchProvider::class);
         $context->registerSearchProvider(ItemSearchProvider::class);
 
+        $context->registerDashboardWidget(ItemWidget::class);
 
         $context->registerEventListener(BeforeUserDeletedEvent::class, UserDeleteHook::class);
 

lib/Dashboard/ItemWidget.php

@@ -0,0 +1,83 @@
+<?php
+
+namespace OCA\News\Dashboard;
+
+use OCA\News\Service\ItemServiceV2;
+use OCP\AppFramework\Services\IInitialState;
+use OCP\Dashboard\IAPIWidget;
+use OCP\IL10N;
+use OCP\IURLGenerator;
+use OCP\Dashboard\Model\WidgetItem;
+
+use Psr\Log\LoggerInterface;
+
+use OCA\News\AppInfo\Application;
+use OCA\News\Db\ListType;
+use OCP\Util;
+
+class ItemWidget implements IAPIWidget {
+
+	
+	private $l10n;
+	private $itemService;
+	private $initialStateService;
+	private $userId;
+    private $urlGenerator;
+	private $logger;
+
+	public function __construct(IL10N $l10n,
+                                IURLGenerator $urlGenerator,
+								ItemServiceV2 $itemService,
+								IInitialState $initialStateService,
+								LoggerInterface $loggerInterface,
+								?string $userId) {
+		$this->l10n = $l10n;
+		$this->itemService = $itemService;
+		$this->initialStateService = $initialStateService;
+		$this->userId = $userId;
+        $this->urlGenerator = $urlGenerator;
+		$this->logger = $loggerInterface;
+	}
+
+	public function getId(): string {
+		return 'news-widget';
+	}
+
+	public function getTitle(): string {
+		$this->logger->debug("Requested title");
+		return $this->l10n->t('News widget');
+	}
+
+	public function getOrder(): int {
+		$this->logger->debug("Requested order");
+		return 20;
+	}
+
+	public function getIconClass(): string {
+		return 'icon-newsdashboard'; // TODO
+		$this->logger->debug("Requested icon");
+	}
+
+	public function getUrl(): ?string {
+		return $this->urlGenerator->linkToRoute('news.page.index');
+		$this->logger->debug("Requested url");
+	}
+
+	public function load(): void {
+		$this->logger->debug("Requested load with user: " . $this->userId);
+		if ($this->userId !== null) {
+			$items = $this->getItems($this->userId);
+			$this->initialStateService->provideInitialState('dashboard-widget-items', $items);
+		}
+
+		Util::addScript(Application::NAME, 'build/' . Application::NAME . '-dashboard-items');
+		Util::addStyle(Application::NAME, 'dashboard');
+	}
+
+	public function getItems(string $userId, ?string $since = null, int $limit = 7): array {
+		$offset = (int) ($since ?? 0);
+		$items = $this->itemService->findAllWithFilters($userId, ListType::ALL_ITEMS ,$limit, $offset, false);
+
+		return $items;
+	}
+} 

src/components/ItemDashboard.vue

@@ -0,0 +1,39 @@
+<template>
+	<NcDashboardWidget :items="items">
+
+	</NcDashboardWidget>
+</template>
+
+<script>
+import NcDashboardWidget from '@nextcloud/vue/dist/Components/NcDashboardWidget.js'
+import { loadState } from '@nextcloud/initial-state'
+
+const newsItems = loadState('news', 'dashboard-widget-items')
+
+console.log(newsItems)
+
+export default {
+	name: 'MyDashboardWidget',
+	components: {
+		NcDashboardWidget,
+	},
+	props: [],
+	data() {
+		return {
+			newsItems: newsItems
+		}
+	},
+
+	computed: {
+		items() {
+			return this.newsItems.map((g) => {
+				return {
+					id: g.id,
+					mainText: g.title,
+					subText: g.intro,
+				}
+			})
+		}
+	}
+}
+</script>

src/dashboard-items.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import MyDashboardWidget from './components/ItemDashboard.vue'
+
+document.addEventListener('DOMContentLoaded', () => {
+    console.log("I'm alive")
+    OCA.Dashboard.register('news-widget', (el) => {
+        console.log("Dashboard registered")
+        const View = Vue.extend(MyDashboardWidget)
+        new View().$mount(el)
+    })
+})

src/vueBootstrap.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import { translate, translatePlural } from '@nextcloud/l10n'
+
+Vue.prototype.t = translate
+Vue.prototype.n = translatePlural
+Vue.prototype.OC = window.OC
+Vue.prototype.OCA = window.OCA

webpack.config.js

@@ -6,6 +6,7 @@ const webpackConfig = require('@nextcloud/webpack-vue-config')
 
 webpackConfig.entry = {
 	'admin-settings': path.join(__dirname, 'src', 'main-admin.js'),
+	'dashboard-items': path.join(__dirname, 'src', 'dashboard-items.js'),
 }
 webpackConfig.output.path = path.resolve('./js/build/')
 webpackConfig.output.publicPath = path.join('/apps/', process.env.npm_package_name, '/js/build/')