Merge pull request #627 from Koppeks/koppeks/templates_folder_contextmenu

Templates folder feature

src/gui/src/globals.js

@@ -231,6 +231,8 @@ window.is_auto_arrange_enabled = true;
 window.desktop_item_positions = {};
 window.reset_item_positions = true; // The variable decides if the item positions should be reset when the user enabled auto arrange
 
+window.file_templates = []
+
 // default language
 window.locale = 'en';
 

src/gui/src/helpers.js

@@ -432,7 +432,7 @@ window.refresh_user_data = async (auth_token)=>{
     }
 }
 
-window.update_auth_data = (auth_token, user)=>{
+window.update_auth_data = async (auth_token, user)=>{
     window.auth_token = auth_token;
     localStorage.setItem('auth_token', auth_token);
 
@@ -493,6 +493,9 @@ window.update_auth_data = (auth_token, user)=>{
         $('.user-options-login-btn, .user-options-create-account-btn').hide();
         $('.user-options-menu-btn').show();
     }
+
+    // Search and store user templates
+    window.file_templates = await window.available_templates()
 }
 
 window.mutate_user_preferences = function(user_preferences_delta) {
@@ -837,6 +840,57 @@ window.create_file = async(options)=>{
     }
 }
 
+window.available_templates = async () => {
+    const baseRoute = `/${window.user.username}`
+    const keywords = ["template", "templates", i18n('template')]
+    //make sure all its lowercase
+    const lowerCaseKeywords = keywords.map(keywords => keywords.toLowerCase())
+
+    //create file
+    try{
+        // search the folder name i18n("template"), "template" or "templates"
+        const files = await puter.fs.readdir(baseRoute)
+
+        const hasTemplateFolder = files.find(file => lowerCaseKeywords.includes(file.name.toLowerCase()))
+        console.log(hasTemplateFolder)
+
+        if(!hasTemplateFolder){
+            return []
+        }
+
+        const hasTemplateFiles = await puter.fs.readdir(baseRoute + "/" + hasTemplateFolder.name)
+        console.log(hasTemplateFiles)
+
+        if(hasTemplateFiles.length == 0) {
+            return []
+        }
+
+        let result = []
+
+        hasTemplateFiles.forEach(element => {
+            console.log(element)
+            const elementInformation = element.name.split(".")
+            const name = elementInformation[0]
+            let extension = elementInformation[1]
+            console.log(extension)
+            if(extension == "txt") extension = "text"
+            const itemStructure = {
+                html: `${extension.toUpperCase()} ${name}`,
+                extension:extension,
+                name: element.name
+            }
+            console.log(extension)
+            result.push(itemStructure)
+        });
+        
+        // return result
+        return result
+        
+    } catch (err) {
+        console.log(err)
+    }
+}
+
 window.create_shortcut = async(filename, is_dir, basedir, appendto_element, shortcut_to, shortcut_to_path)=>{
     let dirname = basedir;
     const extname = path.extname(filename);

src/gui/src/helpers/new_context_menu_item.js

@@ -27,52 +27,80 @@
  */
 
 const new_context_menu_item = function(dirname, append_to_element){
-    return {
-        html: i18n('new'),
-        items: [
-            // New Folder
-            {
-                html: i18n('new_folder'),
-                icon: `<img src="${html_encode(window.icons['folder.svg'])}" class="ctx-item-icon">`,
-                onClick: function(){
-                    window.create_folder(dirname, append_to_element);
-                }
-            },
-            // divider
-            '-',
-            // Text Document
-            {
-                html: i18n('text_document'),
-                icon: `<img src="${html_encode(window.icons['file-text.svg'])}" class="ctx-item-icon">`,
-                onClick: async function(){
-                    window.create_file({dirname: dirname, append_to_element: append_to_element, name: 'New File.txt'});
-                }
-            },
-            // HTML Document
-            {
-                html: i18n('html_document'),
-                icon: `<img src="${html_encode(window.icons['file-html.svg'])}" class="ctx-item-icon">`,
-                onClick: async function(){
-                    window.create_file({dirname: dirname, append_to_element: append_to_element, name: 'New File.html'});
-                }
+    
+    const baseItems = [
+        // New Folder
+        {
+            html: i18n('new_folder'),
+            icon: `<img src="${html_encode(window.icons['folder.svg'])}" class="ctx-item-icon">`,
+            onClick: function() {
+                window.create_folder(dirname, append_to_element);
             },
-            // JPG Image
-            {
-                html: i18n('jpeg_image'),
-                icon: `<img src="${html_encode(window.icons['file-image.svg'])}" class="ctx-item-icon">`,
-                onClick: async function(){
-                    var canvas = document.createElement("canvas");
+        },
+        // divider
+        '-',
+        // Text Document
+        {
+            html: i18n('text_document'),
+            icon: `<img src="${html_encode(window.icons['file-text.svg'])}" class="ctx-item-icon">`,
+            onClick: async function() {
+                window.create_file({dirname: dirname, append_to_element: append_to_element, name: 'New File.txt'});
+            }
+        },
+        // HTML Document
+        {
+            html: i18n('html_document'),
+            icon: `<img src="${html_encode(window.icons['file-html.svg'])}" class="ctx-item-icon">`,
+            onClick: async function() {
+                window.create_file({dirname: dirname, append_to_element: append_to_element, name: 'New File.html'});
+            }
+        },
+        // JPG Image
+        {
+            html: i18n('jpeg_image'),
+            icon: `<img src="${html_encode(window.icons['file-image.svg'])}" class="ctx-item-icon">`,
+            onClick: async function() {
+                var canvas = document.createElement("canvas");
 
-                    canvas.width = 800;
-                    canvas.height = 600;
-                    
-                    canvas.toBlob((blob) =>{
-                        window.create_file({dirname: dirname, append_to_element: append_to_element, name: 'New Image.jpg', content: blob});
-                    });
+                canvas.width = 800;
+                canvas.height = 600;
+
+                canvas.toBlob((blob) => {
+                    window.create_file({dirname: dirname, append_to_element: append_to_element, name: 'New Image.jpg', content: blob});
+                });
+            }
+        },
+    ];
+
+    //Show file_templates on the lower part of "New"
+    if (window.file_templates.length > 0) {
+        // divider
+        baseItems.push('-');
+
+        // User templates
+        baseItems.push({
+            html: "User templates",
+            icon: `<img src="${html_encode(window.icons['file-template.svg'])}" class="ctx-item-icon">`,
+            items: window.file_templates.map(template => ({
+                html: template.html,
+                icon: `<img src="${html_encode(window.icons[`file-${template.extension}.svg`])}" class="ctx-item-icon">`,
+                onClick: function() {
+                    window.create_file({dirname: dirname, append_to_element: append_to_element, name: template.name});
                 }
-            },
-        ]
+            }))
+        });
+    } else {
+        // baseItems.push({
+        //     html: "No templates found",
+        //     icon: `<img src="${html_encode(window.icons['file-template.svg'])}" class="ctx-item-icon">`,
+        // });
     }
+
+    //Conditional rendering for the templates
+    return {
+        html: i18n('new'),
+        items: baseItems
+    };
 }
 
 export default new_context_menu_item;

src/gui/src/icons/file-template.svg

@@ -0,0 +1,11 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.2" d="M10 5C8.892 5 8 5.892 8 7V43C8 44.108 8.892 45 10 45H38C39.108 45 40 44.108 40 43V17L28 5H10Z" fill="black"/>
+<path d="M10 4C8.892 4 8 4.892 8 6V42C8 43.108 8.892 44 10 44H38C39.108 44 40 43.108 40 42V16L30 14L28 4H10Z" fill="#E4E4E4"/>
+<path opacity="0.2" d="M40 17L28 5V15C28 16.108 28.892 17 30 17H40Z" fill="black"/>
+<path d="M40 16L28 4V14C28 15.108 28.892 16 30 16H40Z" fill="#FAFAFA"/>
+<path opacity="0.2" d="M10 4C8.892 4 8 4.892 8 6V7C8 5.892 8.892 5 10 5H28V4H10Z" fill="white"/>
+<path opacity="0.2" d="M23.5294 42.4706L14 36.827V24.3529L14.4706 23.8178L24 18L33.5294 23.8235L34 24.3529V36.7094L24.4706 42.4706L24 42.7647L23.5294 42.4706Z" fill="black"/>
+<path d="M14 24.3529L23.5294 30.2353V41.7647L14 36.1176V24.3529Z" fill="#2664EB"/>
+<path d="M34 24.3529L24.4706 30.2353V41.7647L34 36.1176V24.3529Z" fill="#2664EB"/>
+<path d="M24 18L14.4706 23.8235L24 29.6471L33.5294 23.8235L24 18Z" fill="#2664EB"/>
+</svg>