{"id":23819839,"url":"https://github.com/kth/kurs-pm-data-admin-web","last_synced_at":"2025-09-07T02:30:55.513Z","repository":{"id":41052167,"uuid":"222703551","full_name":"KTH/kurs-pm-data-admin-web","owner":"KTH","description":"Web app for administration of course memos","archived":false,"fork":false,"pushed_at":"2024-09-17T07:46:57.000Z","size":13844,"stargazers_count":5,"open_issues_count":14,"forks_count":1,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-09-18T09:16:15.365Z","etag":null,"topics":["course","course-memos","kurs-pm","kursinfo","react","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KTH.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-19T13:32:49.000Z","updated_at":"2024-09-03T12:35:41.000Z","dependencies_parsed_at":"2023-10-13T07:13:07.882Z","dependency_job_id":"6f534913-627f-42e6-ab74-a17303f081f4","html_url":"https://github.com/KTH/kurs-pm-data-admin-web","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"KTH/node-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KTH%2Fkurs-pm-data-admin-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KTH%2Fkurs-pm-data-admin-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KTH%2Fkurs-pm-data-admin-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KTH%2Fkurs-pm-data-admin-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KTH","download_url":"https://codeload.github.com/KTH/kurs-pm-data-admin-web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232163090,"owners_count":18481581,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["course","course-memos","kurs-pm","kursinfo","react","reactjs"],"created_at":"2025-01-02T07:16:03.791Z","updated_at":"2025-09-07T02:30:55.499Z","avatar_url":"https://github.com/KTH.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Welcome to kurs-pm-data-admin-web 👋\n\n## Course Information – Administration of course memos\n\nThe new administraion site makes it possible to create and manage course memos.\n\n![Version](https://img.shields.io/badge/version-4.0.0-blue.svg?cacheSeconds=2592000)\n![TinyMce version (locally)](\u003chttps://img.shields.io/badge/TinyMce-5.10.3%20(2022--02--09)-brightgreen\u003e)\n![Prerequisite](https://img.shields.io/badge/node-18-blue.svg)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](#)\n\n## Introduction\n\nThe course information project (KIP) is an initiative at KTH that was launched in 2018 to improve the quality and availability of information about KTH:s courses. The background to the project is, among other things, that it was difficult for the student to find information about the courses and even more difficult to compare information about several courses. The reason for the problems is scattered course information in several places and that there is no uniformity or assigned places for the course information. The project takes measures to consolidate course information into two locations and to present the information in a manner that is uniform for KTH. The student should find the right information about the course, depending on their needs. The result of the project is a public course site where the correct course information is collected and presented uniformly. Also, a tool is developed for teachers to enter and publish course information. Eventually, this will lead to the student making better decisions based on their needs, and it will also reduce the burden on teachers and administration regarding questions and support for the student.\n\n`Kurs-pm-data-admin-web` is a microservice to save course memos data by sending it to `kurs-pm-data-api`. It uses `React`, `MobX`, and is based on [https://github.com/KTH/node-web](https://github.com/KTH/node-web).\n\n### 🏠 [Homepage](https://github.com/KTH/kurs-pm-data-admin-web)\n\n## Overview\n\nCourse memos servise can be used by teachers, course coordinators and examiners to create a more detailed overview of a course. To simplify work, default values and course syllabus information are provided in memo. User can create a new course memo, save it as a draft and publish it as well as user can edit already published course memos to keep students updated with last changes in course memo.\n\n## API\n\nApplication is fetching/saving data from/to: \n- [https://github.com/KTH/kurs-pm-data-api](https://github.com/KTH/kurs-pm-data-api)\n- [https://github.com/KTH/studadm-om-kursen-packages] (https://github.com/KTH/studadm-om-kursen-packages)\n\n### Related projects\n\n- [https://github.com/KTH/kurs-pm-data-api](https://github.com/KTH/kurs-pm-data-api)\n- [https://github.com/KTH/kurs-pm-web](https://github.com/KTH/kurs-pm-web)\n- [https://github.com/KTH/node-web](https://github.com/KTH/node-api)\n- [https://github.com/KTH/studadm-om-kursen-packages](https://github.com/KTH/studadm-om-kursen-packages)\n\n## Prerequisites\n\n- Node.js 18\n\nBecause OICD library is compatible only with node 12.0.0 or \u003e 14.2.0\n\n### Secrets for Development\n\nSecrets during local development are stored in a gitignored `.env` file (`env.in` can be used as template for your `.env` file). More details about environment variable setup and secrets can be found in [confluence](https://confluence.sys.kth.se/confluence/x/OYKBDQ).\n\n### Install\n\nFirst time you might need to use options `--ignore-scripts` because of npm resolutions:\n\n```sh\nnpm install\n\n```\n\nYou might need to install as well:\n\n```sh\nnpm install cross-env\nnpm install concurrently\n```\n\n### Usage\n\nStart the service on [http://localhost:3000/kursinfoadmin/kurs-pm-data/:courseCode](http://localhost:3000/kursinfoadmin/kurs-pm-data/:courseCode).\n\n```sh\nnpm run start-dev\n```\n\nChoose to Create a new memo http://localhost:3000/kursinfoadmin/kurs-pm-data/BB2290/\n\nChoose to edit published memo http://localhost:3000/kursinfoadmin/kurs-pm-data/published/BB2290/\n\nEditor to fill in course memo http://localhost:3000/kursinfoadmin/kurs-pm-data/BB2290/BB229020191-1\n\nPreview course memo http://localhost:3000/kursinfoadmin/kurs-pm-data/BB2290/BB229020191-1/preview\n\n`BB229020191-1` är memoEndPoint which is used as a bookmark for a course memo even if its data changed, draft is created, published, edited an so on.\n\n### Debug in Visual Studio Code\n\nIt's possible to use debugging options available in Visual Studio Code\nAdd a file `launch.json` to `.vscode` directory :\n\n- _Microsoft_\n\n```json\n{\n  \"version\": \"0.2.0\",\n  \"configurations\": [\n    {\n      \"type\": \"node\",\n      \"request\": \"launch\",\n      \"name\": \"Debug kurs-pm-data-admin-web\",\n      \"program\": \"${workspaceFolder}\\\\app.js\",\n      \"envFile\": \"${workspaceFolder}\\\\.env\",\n      \"env\": {\n        \"NODE_ENV\": \"development\"\n      }\n    }\n  ]\n}\n```\n\n- _Mac, Unix and so on_\n\n```json\n{\n  \"version\": \"0.2.0\",\n  \"configurations\": [\n    {\n      \"type\": \"node\",\n      \"request\": \"launch\",\n      \"name\": \"Debug kurs-pm-data-admin-web\",\n      \"program\": \"${workspaceFolder}/app.js\",\n      \"envFile\": \"${workspaceFolder}/.env\",\n      \"env\": {\n        \"NODE_ENV\": \"development\"\n      }\n    }\n  ]\n}\n```\n\n## In production\n\nSecrets and docker-compose are located in cellus-registry.\n\nUsed:\n\n```sh\nnpm run start\n```\n\n## Run tests\n\n```sh\nnpm run test\n```\n\n## Run Cypress tests\n\nRun concurrently\n\n```sh\nnpm run start-dev\nnpm run cypress:open\n```\n\n## Use 🐳\n\nCopy `docker-compose.yml.in` to `docker-compose.yml` and make necessary changes, if any.\n\n```sh\ndocker-compose up\n```\n\n### Monitor and dashboards\n\nStatus:\n\nTo monitor status: http://localhost:3000/kursinfoadmin/kurs-pm-data/\\_monitor\n\nTo see branch information: http://localhost:3000/kursinfoadmin/kurs-pm-data/\\_about\n\nTo see more detailed behaviour in project used application insights: f.e., `kursinfo-web-stage-application-insights-kthse`\n\n## Deploy in Stage\n\nThe deployment process is described in [Build, release, deploy](https://confluence.sys.kth.se/confluence/x/aY3_Ag). Technical details, such as configuration, is described in [How to deploy your 🐳 application using Cellus-Registy](https://gita.sys.kth.se/Infosys/cellus-registry/blob/master/HOW-TO-DEPLOY.md) and [🔧 How To Configure Your Application For The Pipeline](https://gita.sys.kth.se/Infosys/cellus-registry/blob/master/HOW-TO-CONFIGURE.md).\n\n### Edit secrets.env\n\n```sh\nansible-vault edit secrets.env\n```\n\nPassword find in gsv-key vault. More information you can find in confluence.\n\n### Configure secrets.env\n\n```\nKURS_PM_DATA_API_URI=http://localhost:3001/api/kurs-pm-data\nKURS_PM_DATA_API_KEY=[generated in kurs-pm-data-admin-api key for admin page]\nKURSINFO_API_URI=https://api-r.referens.sys.kth.se/api/kursinfo\nKURSINFO_API_KEY=[generated in kursinfo-api key for public pages, just for image displaying and selling text]\nREDIS_URI=[redis connection string, azure]\nOIDC_APPLICATION_ID=\u003cFROM ADFS\u003e\nOIDC_CLIENT_SECRET=\u003cFROM ADFS\u003e\nOIDC_TOKEN_SECRET=\u003cRandom string\u003e\nSESSION_SECRET=[generate session secret]\nSESSION_KEY=kurs-pm-data-admin-web.pid\nAPPLICATIONINSIGHTS_CONNECTION_STRING=[Azure, Application insights, connection string, can be found in Overview]\n/* Connection Properties of UG Rest Api to fetch names of course staff */\nUG_REST_AUTH_API_TOKEN_URI=https://\u003cLOGIN_HOST\u003e/adfs/oauth2/token\nUG_REST_AUTH_CLIENT_ID=\u003cFROM AZURE KEYVAULT\u003e\nUG_REST_AUTH_CLIENT_SECRET=\u003cFROM AZURE KEYVAULT\u003e\nUG_REST_API_URI=https://\u003cUG_URL\u003e\nUG_REST_API_SUBSCRIPTION_KEY=\u003cFROM AZURE INTEGRAL OR KEYVAULT\u003e\n```\n\n## Editor TinyMce\n\n![TinyMce version (locally)](\u003chttps://img.shields.io/badge/TinyMce-5.10.3%20(2022--02--09)-brightgreen\u003e)\n![@tinymce/tinymce-react](https://img.shields.io/badge/%40tinymce%2Ftinymce--react-%22%5E3.13.0%22-yellowgreen)\n\n### Dependencies\n\n\u003e IMPORTANT! If @tinymce/tinymce-react is updated then a self-hosted version of TinyMce might need an update as well\n\n- \"@tinymce/tinymce-react\": \"^3.13.0\",\n- TinyMce version: 5.10.3\n\n### How to update a local TinyMce (self-hosted)\n\nIn _`tinymce`_ catalog located tinymce api\n\n- it makes the load of editors faster and more robust\n\n1. Download TinyMCE Dev Package (.zip). Read about it https://www.tiny.cloud/docs/general-configuration-guide/advanced-install/#self-hostedinstall\n2. Unzip TinyMCE Dev Package and go to `js/tinymce`\n3. Copy all folders into tinymce folder, **EXCEPT** `langs` folder. _`langs`_ includes **customized Swedish translations/texts.**\n\n### Edited English and Swedish translations for editor's buttons\n\nTranslations for swedish translations located in `tinymce \u003e langs \u003e sv_SE.js`\nIt was customized:\n\n- `'Header 4': 'Rubrik 4'` was changed to `Heading: 'Rubrik'`\n- `Paragraph: 'Avsnitt'` was changed to `'Body text': 'Brödtext'`\n\nTo make this changes viable, in the configuration of block_formats was changed to:\n`block_formats: 'Body text=p;Heading=h4',`\nand define `language` if it is Swedish it will be: `sv_SE`\n\n### KTH and local Style in editor\n\nIn `js \u003e app \u003e util \u003e editorInitConf.js` defined `content_css: '/kursinfoadmin/kurs-pm-data/static/app.css'`\nIt uses local parsed app.css (from local node-web.scss).\n\n### Configuration and used plugins\n\nConfiguration is in `js \u003e app \u003e util \u003e editorInitConf.js`\n\n```\nconst table = {\n  table_default_attributes: {\n    border: '0',\n  },\n  table_default_styles: {},\n  content_css: '/kursinfoadmin/kurs-pm-data/static/app.css',\n}\n\nconst editorConf = language =\u003e ({\n  menubar: false,\n  toolbar_mode: 'wrap',\n  toolbar_sticky: true,\n  plugins: [\n    'advlist autolink autoresize lists link charmap preview anchor',\n    'searchreplace visualblocks code fullscreen',\n    'table paste code help wordcount',\n  ],\n  ...table,\n  language,\n  toolbar1: `code | undo redo | formatselect | bold italic underline subscript superscript charmap |\n        searchreplace | link | fullscreen `,\n  toolbar2: `bullist numlist outdent indent | table | removeformat | help`,\n  block_formats: 'Body text=p;Heading=h4',\n  tinymceScriptSrc: '/kursinfoadmin/kurs-pm-data/static/tinymce/tinymce.min.js',\n})\n```\n\n- `toolbar_sticky: true` is to make editor meny to be on top of editor if it's longer then screan.\n- `toolbar_mode: 'wrap'`. Wrap toolbar into two rows.\n- `toolbar1` and `toolbar2` defines which buttons to display on 1st and 2nd rows.\n- `content_css` is needed mostly to style tables and fonts\n- `block_formats` user can create only Paragraphs and headers-h4 inside editor.\n- `table_default_styles` is to cancel default styles of tables\n- `table_default_attributes` is to make border invisible via `border: '0'`\n- `language` is needed only for Swedish translations: sv_SE. Otherwise it is 'null'.\n- `tinymceScriptSrc` path to a local TinyMce js file\n\n### Set up your development environment on Windows\n\nTo be able to run desktop Linux apps(Ansible Vault or other) on Windows 10 and be able to use Bash commands or tools with and/or plan to deploy to a Linux server or use Docker containers from VSCode we need Linux distribution (ie. Ubuntu) running on the Windows Subsystem for Linux (WSL). Latest version of Windows allows us to do that by installing WLS 2.\nHere is everything you need to do to get there.\n\n- Install Windows Subsystem for Linux (WSL), including a Linux distribution (like Ubuntu) and make sure it is running in WSL 2 mode.(https://docs.microsoft.com/en-us/windows/wsl/install)\n- Install the Microsoft Terminal app to start exploring your newly-installed Ubuntu.(https://www.microsoft.com/sv-se/p/windows-terminal/9n0dx20hk701?activetab=pivot:overviewtab)\n- Change in VSCode in Terminal settings your default shell to wsl.\n\nNow you are able to use Bash commands or tools.\n\n## Author\n\n👤 **KTH**\n\n- Website: https://kth.github.io/\n- Github: [@KTH](https://github.com/KTH)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkth%2Fkurs-pm-data-admin-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkth%2Fkurs-pm-data-admin-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkth%2Fkurs-pm-data-admin-web/lists"}