✨ feat: Add icon auto-fill

Add app icon auto-fill via docker image name. Modify import reminder
IceWhaleTech · Oct 19, 2021 · 645e6ca · 645e6ca
1 parent 096a243
commit 645e6ca
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 48 deletions.
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
@@ -555,4 +555,8 @@ html {
 .add-button{
   color: #0e9aff;
   margin: 0 0.25rem;
+}
+
+.nobrk{
+  word-break: normal;
 }
diff --git a/src/components/Panel.vue b/src/components/Panel.vue
@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-18 19:05:22
+ * @LastEditTime: 2021-10-19 18:46:02
  * @Description: Install Panel of Docker
  * @FilePath: /CasaOS-UI/src/components/Panel.vue
 -->
@@ -416,8 +416,17 @@ export default {
             this.webui = this.initData.port_map + this.initData.index
             this.changeIcon(this.initData.image)
             this.$buefy.dialog.alert({
-              title: 'Attention',
-              message: 'AutoFill only helps you to complete most of the configuration. Some of the configuration information still needs to be confirmed by you.',
+              title: '⚠️ Attention',
+              message: `<div class="nobrk"><h4 class="title is-5">AutoFill only helps you to complete most of the configuration. </h4>
+                        <p class="mb-3">Some configuration information such as:</p>
+                        <ul>
+                        <li>1. the port and path of the Web UI</li>
+                        <li>2. the mount location of the volume or file</li>
+                        <li>3. the port mapping of the Host</li>
+                        <li>4. optional configuration items</li>
+                        </ul>
+                        <p class="mt-3">These include but are not limited to these cases and <b>still need to be confirmed or modified by you.</b></p>
+                        <p class="mt-3">Feel free to suggest improvements to this feature in Discord Server!</p></div>`,
               type: 'is-dark'
             })
           }

diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-18 10:57:22
+ * @LastEditTime: 2021-10-19 13:12:03
  * @Description: 
  * @FilePath: /CasaOS-UI/src/components/SideBar.vue
 -->
@@ -48,7 +48,7 @@ export default {
         suppressScrollX: true,
         wheelPropagation: false
       },
-      widgetsSettings: {}
+      widgetsSettings: []
     }
   },
   computed: {
@@ -89,16 +89,17 @@ export default {
         if (res.status == 200) {
           if (res.data === "") {
             this.saveData(initData);
-            this.widgetsSettings = initData
+            this.widgetsSettings = initData;
+            this.isLoading = false;
           } else {
-            this.diffAndCombineData(initData, res.data.data)
+            this.diffAndCombineData(initData, res.data.data);
           }
         }
       })
     },
     diffAndCombineData(initData, remoteData) {
       let newData = initData.map(item => {
-        let remoteItem = _.find(remoteData, el => el.name == item.name)
+        let remoteItem = _.find(remoteData, el => el.name == item.name);
         if (remoteItem && item.name === remoteItem.name) {
           return {
             name: item.name,
@@ -111,9 +112,9 @@ export default {
           }
         }
       })
-      this.widgetsSettings = newData
+      this.widgetsSettings = newData;
       this.saveData(newData);
-      this.isLoading = false
+      this.isLoading = false;
     },
     /**
      * @description: Get Local widgets datas
@@ -136,7 +137,7 @@ export default {
     saveData(data) {
       this.$api.info.saveWidgetsConfig(data).then(res => {
         if (res.data.success == 200) {
-          this.widgetsSettings = res.data.data
+          this.widgetsSettings = res.data.data;
         }
       })
     },

diff --git a/src/components/fileList/CreatePanel.vue b/src/components/fileList/CreatePanel.vue
@@ -49,33 +49,31 @@ export default {
   },
   methods: {
     create() {
-      let path = "";
+      let path = `${this.initPath}/${this.name}`
       if (this.isDir) {
-        path = `${this.initPath}${this.name}/`
         this.$api.file.mkdir(path).then(res => {
           if (res.data.success == 200) {
-            this.successCallBack();
+            this.successCallBack(path);
           } else {
             this.errorCallBack(res.data.message);
           }
         })
       } else {
-        path = `${this.initPath}${this.name}`
         this.$api.file.create(path).then(res => {
           if (res.data.success == 200) {
-            this.successCallBack();
+            this.successCallBack(path);
           } else {
             this.errorType = "is-danger"
             this.errorCallBack(res.data.message);
           }
         })
       }
     },
-    successCallBack() {
+    successCallBack(path) {
       this.message = ""
       this.errorType = ""
       this.$emit('close');
-      this.$emit("reloadPath")
+      this.$emit("reloadPath",path)
     },
     errorCallBack(message) {
       this.errorType = "is-danger"

diff --git a/src/components/fileList/FilePanel.vue b/src/components/fileList/FilePanel.vue
@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-10-14 14:08:40
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-18 19:15:32
+ * @LastEditTime: 2021-10-19 18:30:26
  * @Description: 
  * @FilePath: /CasaOS-UI/src/components/fileList/FilePanel.vue
 -->
@@ -25,33 +25,34 @@
               <b-icon icon="arrow-up"></b-icon>
             </a>
           </li>
-          <li v-if="showItem"><a @click="getFileList(rootPath)">{{rootPath.slice(1, -1)}}</a></li>
+          <li v-if="showItem"><a @click="getFileList(rootPath)">{{rootName}}</a></li>
           <li v-if="showItem & showDots"><a @click="getParentList()">...</a></li>
           <li class="is-active ">
             <div>{{lastFolder}}</div>
           </li>
         </ul>
       </nav>
       <ul class="filelist">
-        <list-item v-for="item in fileList" :key="item.path" :name="item.name" :IsDir="item.is_dir" :path="item.path" :state="checkActive(item.path)" @active="activeFile" @expand="getFileList"></list-item>
+        <list-item v-for="(item,index) in fileList" :id="item.path" :key="item.path" :name="item.name" :IsDir="item.is_dir" :path="item.path" :state="checkActive(item.path)" @active="activeFile" @expand="getFileList"></list-item>
       </ul>
     </section>
     <!-- Modal-Card Body End -->
     <!-- Modal-Card Footer Start-->
     <footer class="modal-card-foot is-flex is-align-items-center">
       <div class="flex1">
-        <div v-if="rootPath == '/DATA/'">
+        <div v-if="rootPath == '/DATA'">
           <b-tooltip label="Create Folder" type="is-dark">
             <a class="add-button" @click="showCreatePanel(true)">
               <b-icon icon="folder-plus"></b-icon>
             </a>
           </b-tooltip>
-
-          <b-tooltip label="Create File" type="is-dark">
-            <a class="add-button" @click="showCreatePanel(false)">
-              <b-icon icon="file-plus-outline"></b-icon>
-            </a>
-          </b-tooltip>
+          <template v-if="rootPath != path">
+            <b-tooltip label="Create File" type="is-dark">
+              <a class="add-button" @click="showCreatePanel(false)">
+                <b-icon icon="file-plus-outline"></b-icon>
+              </a>
+            </b-tooltip>
+          </template>
         </div>
       </div>
       <div>
@@ -74,7 +75,6 @@ export default {
   },
   data() {
     return {
-      // rootPath: "/DATA/",
       path: this.initPath,
       activePath: this.initPath,
       fileList: [],
@@ -87,37 +87,58 @@ export default {
   computed: {
     // get Last foler name for breadcrumb
     lastFolder() {
-      return _.dropRight(this.path.split("/"), 1).pop()
+      return this.path.split("/").pop()
     },
     // check show breadcrumb item
     showItem() {
       return this.path != this.rootPath
     },
     // check show breadcrumb dots
     showDots() {
-      return this.path.split("/").length > 4
-    }
+      return this.path.split("/").length > 3
+    },
+    // Root Name
+    rootName() {
+      return _.trimStart(this.rootPath, '/');
+    },
   },
   created() {
-    let i = this.path.endsWith("/") ? 2 : 1;
-    this.path = (this.path == this.rootPath) ? this.path : _.dropRight(this.path.split("/"), i).join("/") + "/"
+    // let i = this.path.endsWith("/") ? 2 : 1;
+    this.path = (this.path == this.rootPath) ? this.path : _.dropRight(this.path.split("/"), 1).join("/")
     this.getFileList(this.path);
   },
 
+  mounted() {
+
+
+  },
+
   methods: {
     // get file list from api
     getFileList(path) {
       this.$api.file.dirPath(path).then(res => {
         if (res.data.success == 200) {
           this.path = path
           this.fileList = res.data.data;
+          this.locateFile();
         }
       })
     },
 
+    locateFile() {
+      this.$nextTick(() => {
+        try {
+          document.getElementById(this.activePath).scrollIntoView()
+        } catch (error) {
+          console.log(error);
+        }
+        
+      })
+    },
+
     // get parent list
     getParentList() {
-      let backDir = _.dropRight(this.path.split("/"), 2).join("/") + "/";
+      let backDir = _.dropRight(this.path.split("/"), 1).join("/");
       if (backDir === "/")
         return false
       this.getFileList(backDir);
@@ -145,8 +166,10 @@ export default {
         scroll: "keep",
         animation: "zoom-out",
         events: {
-          'reloadPath': () => {
+          'reloadPath': (path) => {
+
             this.getFileList(this.path);
+            this.activePath = path;
           }
         },
         props: {

diff --git a/src/components/forms/IconInput.vue b/src/components/forms/IconInput.vue
@@ -5,6 +5,8 @@
 
 <script>
 import FilePanel from '../fileList/FilePanel.vue'
+const DATA_PATH = "/DATA"
+const DEV_PATH = "/dev"
 export default {
   name: "iconinput",
   props: {
@@ -24,17 +26,16 @@ export default {
   computed: {
     initPath() {
       if (this.type == "device") {
-        console.log(this.path);
-        return (this.path == "") ? "/dev/" : this.path
+        return (this.path == "") ? DEV_PATH : this.path
       } else {
-        return (this.path == "") ? "/DATA/" : this.path
+        return (this.path == "") ? DATA_PATH : this.path
       }
     },
     rootPath() {
       if (this.type == "device") {
-        return "/dev/"
+        return DEV_PATH
       } else {
-        return "/DATA/"
+        return DATA_PATH
       }
     }
   },

diff --git a/src/components/forms/ImportPanel.vue b/src/components/forms/ImportPanel.vue
@@ -107,27 +107,27 @@ export default {
       const checkArray = [
         {
           keywords: ["config"],
-          value: `/AppData/${appName}${containerPath}/`
+          value: `/AppData/${appName}${containerPath}`
         },
         {
           keywords: ["tvshows", "TV", "tv"],
-          value: `/Media/TV Shows/`
+          value: `/Media/TV Shows`
         },
         {
           keywords: ["movies", "Movie", "movie"],
-          value: `/Media/Movies/`
+          value: `/Media/Movies`
         },
         {
           keywords: ["Music", "music"],
-          value: `/Media/Music/`
+          value: `/Media/Music`
         },
         {
           keywords: ["download"],
-          value: `/Downloads/`
+          value: `/Downloads`
         },
         {
           keywords: ["pictures", "photo"],
-          value: `/Gallery/`
+          value: `/Gallery`
         }
       ]
 

diff --git a/src/store/index.js b/src/store/index.js
@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-14 17:22:29
+ * @LastEditTime: 2021-10-19 17:34:08
  * @Description: 
  * @FilePath: /CasaOS-UI/src/store/index.js
  */