Merge pull request #37 from sebastian-muthwill/dev-gui

First version of GUI

.gitignore

@@ -1,2 +1,6 @@
 src/*
 __pycache*
+build/*
+.vscode/*
+dist/d/*
+*.code-workspace

README.md

@@ -15,18 +15,31 @@ This application shall solve this problem by providing a way to:
 - integrate the documentation creation process into the ci/cd pipeline aswell as
 - create documentation based on an exported app
 
+## Example
+The example [Meeting Capture Demo-doc.md](example/Meeting Capture Demo-doc.md) is based on the template "Meeting Capture App" provided by Microsoft. The app has not been modified except docstrings have been added within the `OnVisible` propperties of each screen as well as `OnStart`. The source files are also available in the example folder.
+
+![PowerApps_Docstring_demo](https://user-images.githubusercontent.com/10375725/137876032-42aea559-bd16-4c23-a15d-4512dd12f524.gif)
+
 ## Getting started
-1. clone repository `git clone https://github.com/sebastian-muthwill/powerapps-docstring.git` and change into directory `cd powerapps-docstring`
-2. install requirements with `pip install -r requirements.txt`
-3. run with `python3 main.py -s example/src/meetingcapturedemo -o example`
 
-Once the application finished successfully the documentation file is created in the specified folder in markdown format.
+### Windows based GUI
+Download the `pa-docstring.exe` file from `dist` folder or release page and run it to start the GUI. You have to provide:
+- source path (absolute or relative) to the source folder
+- output path where the documentation shall be stored
+- config file is optional if no file is provided, a standard file will be used
 
-### Example
-The example [Meeting Capture Demo-doc.md](example/Meeting Capture Demo-doc.md) is based on the template "Meeting Capture App" provided by Microsoft. The app has not been modified except docstrings have been added within the `OnVisible` propperties of each screen as well as `OnStart`. The source files are also available in the example folder.
+![GUI](https://github.com/sebastian-muthwill/powerapps-docstring/blob/main/docu/media/powerapps-docstring-gui.png?raw=true)
 
-![PowerApps_Docstring_demo](https://user-images.githubusercontent.com/10375725/137876032-42aea559-bd16-4c23-a15d-4512dd12f524.gif)
+### Windows based CLI
+The .exe file can also be used as a CLI. In this case you need to provide at leas the parameter -s and -o (see python CLI)
+``pa-docstring.exe -s example\src\meetingcapturedemo -o example``
+
+### Working with python based CLI or integration into CI  
+1. clone repository `git clone https://github.com/sebastian-muthwill/powerapps-docstring.git` and change into directory `cd powerapps-docstring`
+2. install requirements with `pip install -r requirements.txt`
+3. run with `python3 main.py --source example\src\meetingcapturedemo\ --output example\`
 
+Once the application finished successfully the documentation file is created in the specified folder in markdown format.
 
 ### Known issues / optimizations
 - mermaid graph looks wierd whe to many screens and is not displayed in github since github currently does not support mermaid

docstring_gui/main.kv

@@ -0,0 +1,123 @@
+#:include docstring_gui/screens/result_screen/result_screen.kv
+
+ScreenManager:
+    MainScreen:
+    ResultScreen:
+
+<MainScreen>
+    name: "main-screen"
+
+    source: source
+    output: output
+    config: config
+
+    MDBoxLayout:
+        orientation: "vertical"
+        adaptive_height: False
+        spacing: 20
+
+        MDToolbar:
+            title: "Power Apps - Docstring"
+
+            MDRectangleFlatIconButton:
+                icon: "bug-outline"
+                text: "Issue"
+                theme_text_color: "Custom"
+                text_color: 1, 1, 1, 1
+                line_color: 0, 0, 0, 0
+                icon_color: 1, 1, 1, 1
+                pos_hint: { 'center_y' : .5}
+                halign: "right"
+                padding: [0, 0, 50, 0]
+                on_press: root.open_new_issue()
+
+            MDRectangleFlatIconButton:
+                icon: "github"
+                text: "Documentation"
+                theme_text_color: "Custom"
+                text_color: 1, 1, 1, 1
+                line_color: 0, 0, 0, 0
+                icon_color: 1, 1, 1, 1
+                pos_hint: { 'center_y' : .5}
+                halign: "right"
+                padding: [0, 0, 50, 0]
+                on_press: root.open_github()
+
+
+            MDIconButton:
+                halign: "right"
+                pos_hint: { 'center_y' : .5}
+                icon: "close"
+                theme_text_color: "Custom"
+                text_color: "white"
+                on_press: app.stop()
+
+
+        MDBoxLayout:
+            orientation: "vertical"
+            size_hint: (0.8, 1)
+            pos_hint: { 'left' : .9, 'right': .9}
+            adaptive_height: False
+            spacing: 20
+
+            MDLabel:
+                text: "Create documentation from Power Apps source code"
+                font_style: "H5"
+                halign: "center"
+
+            MDLabel:
+                text: "Provide the path to your source folder of your unpacked Power App as well as the output folder where the documentation is stored. Additionaly the path to a config.yaml can be spcified. If no custom config is provided, standard config.yaml will be used. Please find a detailed description on GitHub."
+                halign: "center"
+
+            MDTextField:
+                id: source
+                hint_text: "Source path"
+                mode: "fill"
+                required: True
+                helper_text: "/path/to/src/app/"
+                helper_text_mode: "on_focus"
+
+            MDTextField:
+                id: output
+                hint_text: "Output path"
+                mode: "fill"
+                required: True
+                helper_text: "./output/"
+                helper_text_mode: "on_focus"
+
+            MDTextField:
+                id: config
+                hint_text: "Config path (optional)"
+                mode: "fill"
+                required: False
+                helper_text: "/path/to/config.yaml"
+                helper_text_mode: "on_focus"
+
+
+            MDBoxLayout:
+                orientation: "vertical"
+
+                MDProgressBar:
+                    orientation: "horizontal"
+                    value: 50
+
+                MDBoxLayout:
+                    orientation: "horizontal"
+                    #size_hint: (0.8, 1)
+                    #pos_hint: { 'right': .9}
+                    adaptive_height: False
+
+                    MDLabel:
+                        text: "Step 1"
+                        halign: "left"
+                        pos_hint: { 'center_y' : .8}
+
+                    MDRaisedButton:
+                        text: "Create"
+                        halign: "right"
+                        background_color : 0, 0, 0, 1
+                        #padding_y: 50
+                        pos_hint: {'center_y' : .8}
+                        on_press:
+                            root.create_documentation()
+

docstring_gui/main.py

@@ -0,0 +1,104 @@
+import os, sys
+import yaml
+import webbrowser
+from kivy.core.window import Window
+from kivy.lang import Builder
+from kivy.properties import ObjectProperty
+from kivy.uix.screenmanager import (FadeTransition, Screen, ScreenManager,
+                                    TransitionBase)
+from kivymd.app import MDApp
+from kivymd.uix.button import MDRectangleFlatButton
+from kivy.resources import resource_add_path, resource_find
+
+# import powerapps classes
+from powerapps_docstring.documentation import Docstring
+
+# import screen classes
+from docstring_gui.screens.result_screen.result_screen import ResultScreen
+
+
+class MainScreen(Screen):
+    source = ObjectProperty(None)
+    output = ObjectProperty(None)
+    config = ObjectProperty(None)
+
+    def create_documentation(self):
+        #docstring = Docstring(pa_src_path, output_path, config)
+        # docstring.create_documentation()
+
+        # Spot check on CanvasManifest.json file. If this exists, it should be
+        # a correct power apps source path
+        if not os.path.isfile(self.source.text + "CanvasManifest.json"):
+            self.source.error = True
+            self.source.helper_text = "Path is not an Power Apps source"
+            if not self.source.text.endswith("\\"):
+                self.source.text = self.source.text + "\\"
+            return
+        else:
+            self.source.error = False
+            self.source.helper_text = "/path/to/src/app/"
+
+        # check if output path is existing
+        if not os.path.isdir(self.output.text) or self.output.text == "":
+            self.output.error = True
+            self.output.helper_text = "Not a directory or not existing"
+            return
+        else:
+            self.output.error = False
+            self.output.helper_text = "./output/"
+
+        # check config file
+        if not os.path.isfile(self.config.text):
+            print(resource_find("config.yaml"))
+            config_file = resource_find("config.yaml")
+        else:
+            config_file = self.config.text
+
+        with open(config_file, "r", encoding='utf8') as file:
+            config_instance = yaml.safe_load(file)
+
+        # create documentation
+        # TODO: add try block and show error page if somethin went wrong
+        docstring = Docstring(self.source.text, self.output.text, config_instance)
+        output_file_path = docstring.create_documentation()
+
+        # navigate to succeed page
+        self.manager.transition.direction = "left"
+        self.manager.current = "result-screen"
+
+        self.manager.get_screen("result-screen").output_file.text = output_file_path
+
+        print("Created")
+
+    def open_github(self):
+        webbrowser.open_new_tab("https://github.com/sebastian-muthwill/powerapps-docstring")
+
+    def open_new_issue(self):
+        webbrowser.open_new_tab("https://github.com/sebastian-muthwill/powerapps-docstring/issues/new")
+
+
+class MainApp(MDApp):
+    def build(self):
+        Window.size = (1080, 720)
+        self.theme_cls.theme_style = "Light"  # "Light"
+        #Builder.load_file("./docstring_gui/main.kv")
+        #self.theme_cls.primary_palette = "Teal"
+
+    def on_start(self):
+        pass
+
+
+# the ScreenManager handles all screens and changes
+# screen change can be called from kv with:
+# on_press:
+#    root.manager.transition.direction = 'left'
+#    root.manager.current = "result-screen"
+sm = ScreenManager()
+sm.add_widget(MainScreen(name="main-screen"))
+sm.add_widget(ResultScreen(name="result-screen"))
+
+# needed for pyinstaller onefile exe
+if hasattr(sys, '_MEIPASS'):
+    resource_add_path(os.path.join(sys._MEIPASS))
+
+MainApp().run()

docstring_gui/screens/config_screen/config_screen.kv

@@ -0,0 +1,26 @@
+<ConfigScreen>
+    name: "config-screen"
+
+    MDBoxLayout:
+        orientation: "vertical"
+        adaptive_height: False
+        spacing: 50
+
+
+        MDToolbar:
+            title: "Configuration "
+
+
+        MDLabel:
+            text: "Create documentation from Power Apps source code."
+            halign: "center"
+            valign: "top"
+
+        MDRaisedButton:
+            text: "create documentation"
+            background_color : 0, 0, 0, 1
+            #padding: 50
+            pos_hint: { 'top' : .9, 'right': .9}
+            on_press: 
+                root.manager.transition.direction = 'right'
+                root.manager.current = "main-screen"

docstring_gui/screens/config_screen/config_screen.py

@@ -0,0 +1,5 @@
+from kivy.uix.screenmanager import Screen
+
+
+class ConfigScreen(Screen):
+    pass

docstring_gui/screens/result_screen/result_screen.kv

@@ -0,0 +1,84 @@
+<ResultScreen>
+    name: "result-screen"
+
+    output_file: output_file
+
+    MDBoxLayout:
+        orientation: "vertical"
+        adaptive_height: False
+        spacing: 50
+
+
+        MDToolbar:
+            title: "Power Apps - Docstring"
+
+            MDIconButton:
+                halign: "right"
+                pos_hint: { 'center_y' : .5}
+                icon: "close"
+                theme_text_color: "Custom"
+                text_color: "white"
+                on_press: app.stop()
+
+        MDBoxLayout:
+            orientation: "vertical"
+            size_hint: (0.8, 1)
+            pos_hint: { 'left' : .9, 'right': .9}
+            adaptive_height: False   
+
+            MDLabel:
+                text: ""
+                halign: "center"
+
+            MDIconButton:
+                pos_hint: { 'center_x' : .5, 'center_y': .5}
+                icon: "check-decagram"
+                theme_text_color: "Custom"
+                text_color: "green"
+                user_font_size: 128
+
+            MDLabel:
+                text: "Documentation created!"
+                halign: "center"
+                pos_hint: { 'top' : .1}
+
+            MDFlatButton:
+                id: output_file
+                text: "placeholder"
+                halign: "center"
+                pos_hint: { 'top' : .1, 'center_x': .5}
+                #on_press: root.open_file(self.text)
+
+            MDBoxLayout:
+                orientation: "vertical"
+
+                MDProgressBar:
+                    orientation: "horizontal"
+                    value: 100
+
+                MDBoxLayout:
+                    orientation: "horizontal"
+                    spacing: 25
+                    adaptive_height: False
+
+                    MDLabel:
+                        text: ""
+                        halign: "left"
+                        pos_hint: { 'center_y' : .5}
+
+                    MDFlatButton:
+                        text: "back"
+                        halign: "right"
+                        background_color : 0, 0, 0, 1
+                        #padding_y: 50
+                        pos_hint: { 'top' : .8}
+                        on_press:
+                            root.manager.transition.direction = 'right'
+                            root.manager.current = "main-screen"
+
+                    MDRaisedButton:
+                        text: "Close"
+                        background_color : 0, 0, 0, 1
+                        #padding: 50
+                        pos_hint: { 'top' : .8}
+                        on_press: app.stop()