{"id":22003708,"url":"https://github.com/riascho/drag-drop-project-manager","last_synced_at":"2026-04-09T17:51:50.890Z","repository":{"id":258678645,"uuid":"868567452","full_name":"riascho/drag-drop-project-manager","owner":"riascho","description":"TypeScript App for Project Management via Drag \u0026 Drop","archived":false,"fork":false,"pushed_at":"2024-10-20T14:53:16.000Z","size":135,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-23T06:17:02.437Z","etag":null,"topics":["css","html","javascript","lite-server","typescript","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/riascho.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-06T17:55:41.000Z","updated_at":"2024-10-20T14:53:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"7c21be2c-58ab-4ce0-906f-8963f7673f62","html_url":"https://github.com/riascho/drag-drop-project-manager","commit_stats":null,"previous_names":["riascho/drag-drop-project-manager"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/riascho/drag-drop-project-manager","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riascho%2Fdrag-drop-project-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riascho%2Fdrag-drop-project-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riascho%2Fdrag-drop-project-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riascho%2Fdrag-drop-project-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/riascho","download_url":"https://codeload.github.com/riascho/drag-drop-project-manager/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riascho%2Fdrag-drop-project-manager/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265889029,"owners_count":23844538,"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":["css","html","javascript","lite-server","typescript","webpack"],"created_at":"2024-11-30T00:10:32.246Z","updated_at":"2025-12-30T22:07:08.003Z","avatar_url":"https://github.com/riascho.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Drag \u0026 Drop Project Manager\n\nThis is TypeScript project of an app that let's you manage projects by drag-and-drop. From the course [Boost your JavaScript projects with TypeScript](https://www.udemy.com/course/understanding-typescript/)\n\nThere are 2 additional branches to demonstrate the concept of modularization:\n\n- using [Namespaces](https://github.com/riascho/drag-drop-project-manager/tree/namespaces)\n- using [ES Modules](https://github.com/riascho/drag-drop-project-manager/tree/es-modules)\n\n---\n\n## Step 1: DOM Element Selection \u0026 OOP Rendering\n\n- create class `project-input` with constructors properties that contain DOM elements we want to address\n- import template elements content\n- attach grabbed template content to active div for rendering\n- all of the above happens in the constructor, so that it is executed when the class is instantiated\n\n## Step 2: Interacting with DOM Elements\n\n- add input elements as properties to class to have access to input values from form\n- add event handler functions as class methods for button to get input submission when clicked\n- instead of using the .bind() method to set the 'this' context for the event handler, use a method decorator\n\n## Step 3: Fetching User Input\n\n- get input elements values\n- add appropriate validation functionality to class\n\n## Step 4: Rendering Project Lists\n\n- implement a new class for `project-list` element\n- constructor needs parameter -\u003e will need two different types (`active` | `finished`) that will be instantiated\n- same as with `project-input` we copy the HTML template element\n- make some changes to the copied element (have dynamic title according to `project type`)\n- attach the customized element to the active div\n\n## Step 5: Populating Project List\n\n- get form input data to create a new project object\n- this object will be put in the `project-list` active div\n- using a state management class for this approach\n- implement `Singleton` approach to have one global instance of this state management class (`state manager`)\n- this instance can then be used to dynamically add the form inputs as new projects\n- the `state manager` stores a global array of the projects added as well as an array of functions (`listeners`) to be called globally\n- the `state manager` also has a getter to return all currently saved projects\n- the `project-list` class adds the `renderProjects()` function to that global collection of the `state manager` instance (in the constructor!)\n- the `renderProjects()` function is maintained by the `project-list` class but with help of the `@Autobind` decorator the context can be passed on\n- part of that context is that the projects are loaded in within that scope via calling the project getter function of the `state manager` to get all currently saved projects\n- the `state manager` manages the `addProject()` function, that is triggered by form submission (and after input validation) from the `project-input` class\n- this `addProject()` also invokes all functions in the global `listeners` collection, which will then call the `renderProjects()` function again of the `project-list` class to re-render the updated projects lists\n\n## Step 6: Filtering Project List\n\n- using a union type to define categories for projects\n- the `renderProjects()` function checks for the instance's project type\n- if it matches with the status type of the project from the global project's list (from store manager) then it will add the item to it's container\n\n## Step 7: Centralizing some functionalities using a Base Component Class\n\n- add base component class that centralizes HTML rendering and attaching to active container\n- add base state management class that centralizes event subscription\n- use generic types in base class that can be refined in subclasses\n\n## Step 8: Rendering individual Project Items\n\n- add new class for individual project items that also inherits from base class\n- renders project values as HTML content to the target element in active container\n- make `renderProjects()` of the `ProjectList` class instantiate the `ProjectItem` class for each new project that is added (added dynamics!)\n\n## Step 9: Implement Drag \u0026 Drop\n\n- using interfaces to define the necessary event handlers to be enforced on the respective classes\n- implement drag methods\n- make sure the HTML element is draggable (attribute)\n\n## Step 10: Update Listeners\n\n- in the State Management class implement new function that updatesListeners\n- centralize this functionality so that whenever any other class triggers a change on the HTML elements (e.g. adding a project, or drag-and-dropping it) the listener functions fire and refresh the rendering\n\n# Modularization\n\nModularization in TypeScript can be achieved using either namespaces or ES modules, each offering distinct advantages and use cases.\n\n## [`Namespaces`](https://github.com/riascho/drag-drop-project-manager/tree/namespaces)\n\nNamespaces in TypeScript are a way to organize code within a single global scope. They are useful for grouping related functionalities and avoiding name collisions. Namespaces are declared using the namespace keyword and can contain classes, interfaces, functions, and variables.\n\n- Suitable for organizing code within a single file or project without external dependencies\n- They are less common in modern TypeScript projects.\n- Better suitable for older browsers\n\n```typescript\nnamespace MyNamespace {\n  export class MyClass {\n    // Class implementation\n  }\n\n  export function myFunction() {\n    // Function implementation\n  }\n}\n```\n\n## [ES6 Modules](https://github.com/riascho/drag-drop-project-manager/tree/es-modules)\n\nES modules are the standard for modularization in modern JavaScript and TypeScript. They allow you to split your code into separate files and import/export functionalities as needed. This approach promotes better code organization, reusability, and maintainability.\n\n- Preferred for larger projects and when working with external libraries\n- They align with the ECMAScript standard and are supported by modern JavaScript environments.\n- Older Browsers cannot support ES Modules\n\n```typescript\n// myModule.ts\nexport class MyClass {\n  // Class implementation\n}\n\nexport function myFunction() {\n  // Function implementation\n}\n\n// anotherFile.ts\nimport { MyClass, myFunction } from \"./myModule\";\n\nconst instance = new MyClass();\nmyFunction();\n```\n\n---\n\nChoosing between namespaces and ES modules depends on the project requirements and the development environment. For most modern TypeScript projects, ES modules are the recommended approach.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friascho%2Fdrag-drop-project-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Friascho%2Fdrag-drop-project-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friascho%2Fdrag-drop-project-manager/lists"}