Skip to content
Snippets Groups Projects
Commit c4e2019a authored by Jan-Hendrik Willms's avatar Jan-Hendrik Willms
Browse files

refactor more vue apps

parent d2c7c69e
No related branches found
No related tags found
1 merge request!14Draft: Data vue app
......@@ -7,10 +7,28 @@ class Admin_TreeController extends AuthenticatedController
$GLOBALS['perm']->check('root');
Navigation::activateItem('/admin/locations/range_tree');
PageLayout::setTitle(_('Einrichtungshierarchie bearbeiten'));
$this->startId = Request::get('node_id', 'RangeTreeNode_root');
$this->semester = Request::option('semester', Semester::findCurrent()->id);
$this->classname = RangeTreeNode::class;
$this->setupSidebar();
$this->render_vue_app(
Studip\VueApp::create('tree/StudipTree')
->withProps([
'breadcrumb-icon' => 'institute',
'create-url' => $this->createURL(),
'delete-url' => $this->deleteURL(),
'edit-url' => $this->editURL(),
'editable' => true,
'semester' => $this->semester,
'show-structure-as-navigation' => true,
'start-id' => Request::get('node_id', 'RangeTreeNode_root'),
'title' => _('Einrichtungshierarchie bearbeiten'),
'view-type' => 'table',
'visible-children-only' => false,
'with-courses' => true,
])
);
}
public function semtree_action()
......@@ -18,10 +36,30 @@ class Admin_TreeController extends AuthenticatedController
$GLOBALS['perm']->check('root');
Navigation::activateItem('/admin/locations/sem_tree');
PageLayout::setTitle(_('Veranstaltungshierarchie bearbeiten'));
$this->startId = Request::get('node_id', 'StudipStudyArea_root');
$this->semester = Request::option('semester', Semester::findCurrent()->id);
$this->classname = StudipStudyArea::class;
$this->setupSidebar();
$this->render_vue_app(
Studip\VueApp::create('tree/StudipTree')
->withProps([
'breadcrumb-icon' => 'literature',
'create-url' => $this->createURL(),
'delete-url' => $this->deleteURL(),
'edit-url' => $this->editURL(),
'editable' => true,
'semester' => $this->semester,
'show-structure-as-navigation' => true,
'start-id' => Request::get('node_id', 'StudipStudyArea_root'),
'title' => _('Veranstaltungshierarchie bearbeiten'),
'view-type' => 'table',
'visible-children-only' => false,
'with-course-assign' => true,
'with-courses' => true,
])
);
}
/**
......
......@@ -59,6 +59,21 @@ class Search_CoursesController extends AuthenticatedController
$this->setupSidebar();
PageLayout::setTitle($title);
$this->render_vue_app(
Studip\VueApp::create('tree/StudipTree')
->withProps([
'breadcrumb-icon' => $this->breadcrumbIcon,
'sem-class' => $this->semClass,
'semester' => $this->semester,
'start-id' => $this->startId,
'title' => $this->treeTitle,
'view-type' => $this->show_as,
'with-courses' => true,
'with-export' => true,
'with-search' => true,
])
);
}
private function setupSidebar()
......
......@@ -2,10 +2,12 @@
<?= CSRFProtection::tokenTag() ?>
<fieldset>
<legend><?= _('Studienbereichszuordnungen der ausgewählten Veranstaltungen bearbeiten') ?></legend>
<div data-studip-tree>
<studip-tree start-id="StudipStudyArea_root" :with-info="false" :open-levels="1"
:assignable="true"></studip-tree>
</div>
<?= Studip\VueApp::create('tree/StudipTree')->withProps([
'assignable' => true,
'open-levels' => 1,
'start-id' => 'StudipStudyArea_root',
'with-info' => false,
]) ?>
</fieldset>
<fieldset>
<legend><?= _('Diese Veranstaltungen werden zugewiesen') ?></legend>
......
<div data-studip-tree>
<studip-tree start-id="<?= htmlReady($startId) ?>" view-type="table" breadcrumb-icon="institute"
:with-search="false" :visible-children-only="false"
:editable="true" edit-url="<?= $controller->url_for('admin/tree/edit') ?>"
create-url="<?= $controller->url_for('admin/tree/create') ?>"
delete-url="<?= $controller->url_for('admin/tree/delete') ?>"
:with-courses="true" semester="<?= htmlReady($semester) ?>" :show-structure-as-navigation="true"
title="<?= _('Einrichtungshierarchie bearbeiten') ?>"></studip-tree>
</div>
<div data-studip-tree>
<studip-tree start-id="<?= htmlReady($startId) ?>" view-type="table" breadcrumb-icon="literature"
:with-search="false" :visible-children-only="false"
:editable="true" edit-url="<?= $controller->url_for('admin/tree/edit') ?>"
create-url="<?= $controller->url_for('admin/tree/create') ?>"
delete-url="<?= $controller->url_for('admin/tree/delete') ?>"
:show-structure-as-navigation="true" :with-course-assign="true"
:with-courses="true" semester="<?= htmlReady($semester) ?>"
title="<?= _('Veranstaltungshierarchie bearbeiten') ?>"></studip-tree>
</div>
<?php
/**
* @var String $startId
* @var String $show_as
* @var String $treeTitle
* @var String $breadcrumIcon
* @var String $semester
* @var String $semClass
*/
?>
<div data-studip-tree>
<studip-tree start-id="<?= htmlReady($startId) ?>" view-type="<?= htmlReady($show_as) ?>" :visible-children-only="true"
title="<?= htmlReady($treeTitle) ?>" breadcrumb-icon="<?= htmlReady($breadcrumbIcon) ?>"
:with-search="true" :with-export="true" :with-courses="true" semester="<?= htmlReady($semester) ?>"
:sem-class="<?= htmlReady($semClass) ?>" :with-export="true"></studip-tree>
</div>
......@@ -6,27 +6,17 @@ use Stringable;
final class VueApp implements Stringable
{
public static function create(string $base_component, array $props = []): VueApp
public static function create(string $base_component): VueApp
{
return new self($base_component, $props);
return new self($base_component);
}
private array $components = [];
private array $props = [];
private array $stores = [];
private array $storeData = [];
private function __construct(
private string $base_component,
private array $props = []
) {
}
public function withBaseComponent(string $base_component): VueApp
{
$clone = clone $this;
$clone->base_component = $base_component;
return $clone;
private function __construct(private readonly string $base_component) {
}
public function withComponents(string ...$components): VueApp
......@@ -92,17 +82,30 @@ final class VueApp implements Stringable
$template = $GLOBALS['template_factory']->open('vue-app.php');
$template->attributes = [
'data-vue-app' => json_encode([
'components' => [$this->base_component, ...$this->components],
'stores' => $this->stores,
'components' => [
$this->base_component,
...$this->components
],
'stores' => $this->stores,
]),
'is' => $this->base_component,
'is' => basename($this->base_component),
...$this->props,
...$this->getPreparedProps(),
];
$template->storeData = $this->storeData;
return $template;
}
private function getPreparedProps(): array
{
$result = [];
foreach ($this->props as $name => $value) {
$name = ltrim($name, ':');
$result[":{$name}"] = json_encode($value);
}
return $result;
}
public function render(): string
{
return $this->getTemplate()->render();
......
import ResponsiveNavigation from '../../../vue/components/responsive/ResponsiveNavigation.vue';
STUDIP.domReady(() => {
STUDIP.Vue.load().then(({ createApp }) => {
createApp({
el: '#responsive-menu',
components: { ResponsiveNavigation }
});
});
});
import StudipTree from '../../../vue/components/tree/StudipTree.vue'
STUDIP.ready(() => {
document.querySelectorAll('[data-studip-tree]:not(.vueified)').forEach(element => {
element.classList.add('vueified');
STUDIP.Vue.load().then(({ createApp }) => {
createApp({
el: element,
components: { StudipTree }
})
})
});
});
......@@ -17,7 +17,8 @@ STUDIP.ready(() => {
let components = {};
config.components.forEach(component => {
components[component] = () => import(`../../../vue/components/${component}.vue`);
const name = component.split('/').reverse()[0];
components[name] = () => import(`../../../vue/components/${component}.vue`);
});
STUDIP.Vue.load().then(async ({createApp, store}) => {
......@@ -31,6 +32,8 @@ STUDIP.ready(() => {
Object.keys(data).forEach(command => {
store.commit(`${index}/${command}`, data[command]);
});
dataElement.remove();
}
});
......
......@@ -78,8 +78,6 @@ import "./bootstrap/cache-admin.js"
import "./bootstrap/oer.js"
import "./bootstrap/courseware.js"
import "./bootstrap/contentmodules.js"
import "./bootstrap/responsive-navigation.js"
import "./bootstrap/treeview.js"
import "./bootstrap/stock-images.js"
import "./bootstrap/external_pages.js"
......
......@@ -66,14 +66,14 @@ if ($navigation) {
'username' => $user->username,
'perm' => $GLOBALS['perm']->get_perm()
];
?>
<? } else {
} else {
$me = ['username' => 'nobody'];
} ?>
<responsive-navigation :me="<?= htmlReady(json_encode($me)) ?>"
context="<?= htmlReady(Context::get() ? Context::get()->getFullName() : '') ?>"
:navigation="<?= htmlReady(json_encode(ResponsiveHelper::getNavigationObject($_COOKIE['responsive-navigation-hash'] ?? null))) ?>"
></responsive-navigation>
<?= Studip\VueApp::create('responsive/ResponsiveNavigation')->withProps([
'context' => Context::get()?->getFullName() ?? '',
'me' => $me,
'navigation' => ResponsiveHelper::getNavigationObject($_COOKIE['responsive-navigation-hash'] ?? null),
]) ?>
</div>
<div id="site-title">
<?= htmlReady(Config::get()->UNI_NAME_CLEAN) ?>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment