finish updated UX to vue 2.6~ and vuetufy 2.0~

paramako · Oct 19, 2019 · 39a71b9 · 39a71b9
1 parent 0769241
commit 39a71b9
Show file tree

Hide file tree

Showing 23 changed files with 283 additions and 310 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "devDependencies": {
+    "@mdi/font": "^4.5.95",
     "axios": "^0.17.1",
     "bootstrap-sass": "^3.3.7",
     "cross-env": "^5.0.1",

diff --git a/public/fonts/vendor/@mdi/materialdesignicons-webfont.eot b/public/fonts/vendor/@mdi/materialdesignicons-webfont.eot
diff --git a/public/fonts/vendor/@mdi/materialdesignicons-webfont.ttf b/public/fonts/vendor/@mdi/materialdesignicons-webfont.ttf
diff --git a/public/fonts/vendor/@mdi/materialdesignicons-webfont.woff b/public/fonts/vendor/@mdi/materialdesignicons-webfont.woff
diff --git a/public/fonts/vendor/@mdi/materialdesignicons-webfont.woff2 b/public/fonts/vendor/@mdi/materialdesignicons-webfont.woff2
diff --git a/resources/js/admin/admin.js b/resources/js/admin/admin.js
@@ -10,9 +10,10 @@ require('../bootstrap');
 window.Vue = require('vue');
 
 // 3rd party
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/dist/vuetify.min.css';
 import Vue from 'vue';
 import Vuetify from 'vuetify';
-import 'vuetify/dist/vuetify.min.css';
 import VueProgressBar from 'vue-progressbar'
 
 // this is the vuetify theming options

diff --git a/resources/js/admin/files/Files.vue b/resources/js/admin/files/Files.vue
@@ -2,13 +2,13 @@
     <div class="page_wrap_vue">
         <v-tabs color="primary" v-model="active">
 
-            <v-tab class="white--text" href="#files" ripple>
+            <v-tab class="white--text" key="files" href="#files" ripple>
                 Files
             </v-tab>
-            <v-tab class="white--text" href="#manage-groups" ripple>
+            <v-tab class="white--text" key="manage-groups" href="#manage-groups" ripple>
                 Manage File Groups
             </v-tab>
-            <v-tab class="white--text" href="#upload" ripple>
+            <v-tab class="white--text" key="upload" href="#upload" ripple>
                 Upload
             </v-tab>
 
@@ -58,7 +58,7 @@
         },
         data() {
             return {
-                active: ''
+                active: 'files'
             }
         },
         watch: {

diff --git a/resources/js/admin/files/components/FileGroupAdd.vue b/resources/js/admin/files/components/FileGroupAdd.vue
@@ -8,10 +8,10 @@
                             <div class="body-2 white--text">File Group Details</div>
                         </v-flex>
                         <v-flex xs12>
-                            <v-text-field box label="Group Name" v-model="name" :rules="nameRules"></v-text-field>
+                            <v-text-field label="Group Name" v-model="name" :rules="nameRules"></v-text-field>
                         </v-flex>
                         <v-flex xs12>
-                            <v-textarea box label="Group Description" v-model="description" :rules="descriptionRules"></v-textarea>
+                            <v-textarea label="Group Description" v-model="description" :rules="descriptionRules"></v-textarea>
                         </v-flex>
                         <v-flex xs12>
                             <v-btn @click="save()" :disabled="!valid" color="primary">Save</v-btn>

diff --git a/resources/js/admin/files/components/FileGroupEdit.vue b/resources/js/admin/files/components/FileGroupEdit.vue
@@ -8,10 +8,10 @@
                             <div class="body-2 white--text">File Group Details</div>
                         </v-flex>
                         <v-flex xs12>
-                            <v-text-field box dark label="Group Name" v-model="name" :rules="nameRules"></v-text-field>
+                            <v-text-field dark label="Group Name" v-model="name" :rules="nameRules"></v-text-field>
                         </v-flex>
                         <v-flex xs12>
-                            <v-textarea box dark label="Group Description" v-model="description" :rules="descriptionRules"></v-textarea>
+                            <v-textarea dark label="Group Description" v-model="description" :rules="descriptionRules"></v-textarea>
                         </v-flex>
                         <v-flex xs12>
                             <v-btn @click="save()" :disabled="!valid" color="primary" dark>Update</v-btn>

diff --git a/resources/js/admin/files/components/FileGroupLists.vue b/resources/js/admin/files/components/FileGroupLists.vue
@@ -3,51 +3,44 @@
 
         <!-- search -->
         <v-card>
-            <v-card-text>
-                <v-layout row wrap>
-                    <v-flex xs12 sm6>
-                        <v-text-field prepend-icon="search" box label="Filter By Name" v-model="filters.name"></v-text-field>
-                    </v-flex>
-                    <v-flex xs12 sm6 class="text-xs-right">
-                        <v-btn @click="showDialog('file_group_add')" dark class="primary lighten-1">
-                            New File Group
-                            <v-icon right>add</v-icon>
-                        </v-btn>
-                    </v-flex>
-                </v-layout>
-            </v-card-text>
+            <div class="d-flex flex-row">
+                <div class="flex-grow-1">
+                    <v-text-field prepend-icon="search" label="Filter By Name" v-model="filters.name"></v-text-field>
+                </div>
+                <div class="flex-grow-1 text-right">
+                    <v-btn @click="showDialog('file_group_add')" dark class="primary lighten-1">
+                        New File Group
+                        <v-icon right>mdi-add</v-icon>
+                    </v-btn>
+                </div>
+            </div>
         </v-card>
         <!-- /search -->
 
         <!-- groups table -->
         <v-data-table
                 v-bind:headers="headers"
-                v-bind:pagination.sync="pagination"
+                :options.sync="pagination"
                 :items="items"
                 :server-items-length="totalItems"
                 class="elevation-1">
-            <template slot="headerCell" slot-scope="props">
-                <span v-if="props.header.value=='file_count'">
-                    <v-icon>dns</v-icon> {{ props.header.text }}
-                </span>
-                <span v-else-if="props.header.value=='created_at'">
-                    <v-icon>date_range</v-icon> {{ props.header.text }}
-                </span>
-                <span v-else>{{ props.header.text }}</span>
-            </template>
-            <template slot="items" slot-scope="props">
-                <td>
-                    <v-btn @click="showDialog('file_group_edit',props.item)" icon small>
-                        <v-icon class="blue--text">edit</v-icon>
-                    </v-btn>
-                    <v-btn @click="trash(props.item)" icon small>
-                        <v-icon class="red--text">delete</v-icon>
-                    </v-btn>
-                </td>
-                <td>{{ props.item.name }}</td>
-                <td>{{ props.item.description }}</td>
-                <td>{{ props.item.file_count }}</td>
-                <td>{{ $appFormatters.formatDate(props.item.created_at) }}</td>
+            <template v-slot:body="{items}">
+                <tbody>
+                <tr v-for="item in items" :key="item.id">
+                    <td>
+                        <v-btn @click="showDialog('file_group_edit',item)" icon small>
+                            <v-icon class="blue--text">edit</v-icon>
+                        </v-btn>
+                        <v-btn @click="trash(props.item)" icon small>
+                            <v-icon class="red--text">delete</v-icon>
+                        </v-btn>
+                    </td>
+                    <td>{{ item.name }}</td>
+                    <td>{{ item.description }}</td>
+                    <td>{{ item.file_count }}</td>
+                    <td>{{ $appFormatters.formatDate(item.created_at) }}</td>
+                </tr>
+                </tbody>
             </template>
         </v-data-table>
 
@@ -61,7 +54,7 @@
                     <v-toolbar-title>Create New File Group</v-toolbar-title>
                     <v-spacer></v-spacer>
                     <v-toolbar-items>
-                        <v-btn flat @click.native="dialogs.add.show = false">Done</v-btn>
+                        <v-btn text @click.native="dialogs.add.show = false">Done</v-btn>
                     </v-toolbar-items>
                 </v-toolbar>
                 <v-card-text>
@@ -80,7 +73,7 @@
                     <v-toolbar-title>Edit File Group</v-toolbar-title>
                     <v-spacer></v-spacer>
                     <v-toolbar-items>
-                        <v-btn flat @click.native="dialogs.edit.show = false">Done</v-btn>
+                        <v-btn text @click.native="dialogs.edit.show = false">Done</v-btn>
                     </v-toolbar-items>
                 </v-toolbar>
                 <v-card-text>

diff --git a/resources/js/admin/files/components/FileLists.vue b/resources/js/admin/files/components/FileLists.vue
@@ -3,61 +3,53 @@
 
         <!-- filers -->
         <v-card>
-            <v-card-text>
-                <v-layout row wrap>
-                    <v-flex xs12>
-                        <v-text-field prepend-icon="search" box label="Filter By Name or Extension" v-model="filters.name"></v-text-field>
-                    </v-flex>
-                    <v-flex xs12>
-                        Show Only:
-                    </v-flex>
-                    <v-flex xs4 md2 v-for="(group,i) in filters.fileGroupsHolder" :key="i">
+            <div class="d-flex flex-column">
+                <div class="flex-grow-1 pa-2">
+                    <v-text-field prepend-icon="search" label="Filter By Name or Extension" v-model="filters.name"></v-text-field>
+                </div>
+                <div class="flex-grow-1 pa-2">
+                    Show Only:
+                </div>
+                <div class="flex-grow-1 pa-2">
+                    <span v-for="(group,i) in filters.fileGroupsHolder" :key="i">
                         <v-checkbox v-bind:label="group.name" v-model="filters.fileGroupId[group.id]"></v-checkbox>
-                    </v-flex>
-                </v-layout>
-            </v-card-text>
+                    </span>
+                </div>
+            </div>
         </v-card>
 
         <!-- groups table -->
         <v-data-table
                 v-bind:headers="headers"
-                v-bind:pagination.sync="pagination"
+                :options.sync="pagination"
                 :items="items"
                 :server-items-length="totalItems"
                 class="elevation-1">
-            <template slot="headerCell" slot-scope="props">
-                <span v-if="props.header.value=='thumb'">
-                    <v-icon>panorama</v-icon> {{ props.header.text }}
-                </span>
-                <span v-else-if="props.header.value=='group'">
-                    <v-icon>folder</v-icon> {{ props.header.text }}
-                </span>
-                <span v-else-if="props.header.value=='created_at'">
-                    <v-icon>date_range</v-icon> {{ props.header.text }}
-                </span>
-                <span v-else>{{ props.header.text }}</span>
-            </template>
-            <template slot="items" slot-scope="props">
-                <td class="wask_td_action">
-                    <v-btn @click="showDialog('file_show',props.item)" icon small>
-                        <v-icon dark class="blue--text">search</v-icon>
-                    </v-btn>
-                    <v-btn @click="trash(props.item)" icon small>
-                        <v-icon class="red--text">delete</v-icon>
-                    </v-btn>
-                </td>
-                <td>
-                    <v-avatar
-                            tile
-                            :size="'50px'"
-                            class="grey lighten-4">
-                        <img :src="getFullUrl(props.item,50,'fit')"/>
-                    </v-avatar>
-                </td>
-                <td>{{ props.item.name }}</td>
-                <td>{{ $appFormatters.formatByteToMB(props.item.size).toString() + ' MB' }}</td>
-                <td>{{ props.item.group.name }}</td>
-                <td>{{ $appFormatters.formatDate(props.item.created_at) }}</td>
+            <template v-slot:body="{items}">
+                <tbody>
+                <tr v-for="item in items" :key="item.id">
+                    <td>
+                        <v-btn @click="showDialog('file_show',item)" icon small>
+                            <v-icon class="blue--text">mdi-magnify</v-icon>
+                        </v-btn>
+                        <v-btn @click="trash(props.item)" icon small>
+                            <v-icon class="red--text">mdi-delete</v-icon>
+                        </v-btn>
+                    </td>
+                    <td>
+                        <v-avatar
+                                tile
+                                :size="'50px'"
+                                class="grey lighten-4">
+                            <img :src="getFullUrl(item,50,'fit')"/>
+                        </v-avatar>
+                    </td>
+                    <td>{{ item.name }}</td>
+                    <td>{{ $appFormatters.formatByteToMB(item.size).toString() + ' MB' }}</td>
+                    <td>{{ item.group.name }}</td>
+                    <td>{{ $appFormatters.formatDate(item.created_at) }}</td>
+                </tr>
+                </tbody>
             </template>
         </v-data-table>
         <!-- /groups table -->
@@ -72,20 +64,20 @@
                     <v-toolbar-title class="white--text">{{dialogs.view.file.name}}</v-toolbar-title>
                     <v-spacer></v-spacer>
                     <v-toolbar-items>
-                        <v-btn dark flat @click.native="downloadFile(dialogs.view.file)">
+                        <v-btn dark text @click.native="downloadFile(dialogs.view.file)">
                             Download
                             <v-icon right dark>file_download</v-icon></v-btn>
                     </v-toolbar-items>
                     <v-toolbar-items>
-                        <v-btn dark flat @click.native="trash(dialogs.view.file)">
+                        <v-btn dark text @click.native="trash(dialogs.view.file)">
                             Delete
                             <v-icon right dark>delete</v-icon></v-btn>
                     </v-toolbar-items>
                 </v-toolbar>
                 <v-card-text>
                     <div class="file_view_popup">
                         <div class="file_view_popup_link">
-                            <v-text-field flat disabled :value="getFullUrl(dialogs.view.file)"></v-text-field>
+                            <v-text-field text disabled :value="getFullUrl(dialogs.view.file)"></v-text-field>
                         </div>
                         <img :src="getFullUrl(dialogs.view.file)"/>
                     </div>

diff --git a/resources/js/admin/users/components/GroupFromAdd.vue b/resources/js/admin/users/components/GroupFromAdd.vue
@@ -14,7 +14,7 @@
                         <div class="body-2 white--text">Group Details</div>
                     </v-flex>
                     <v-flex xs12>
-                        <v-text-field box label="Group Name" v-model="name" :rules="nameRules"></v-text-field>
+                        <v-text-field label="Group Name" v-model="name" :rules="nameRules"></v-text-field>
                     </v-flex>
                     <v-flex xs12 sm4>
                         <v-select
@@ -97,9 +97,9 @@
             self.loadPermissions(()=>{});
 
             self.$store.commit('setBreadcrumbs',[
-                {label:'Users',name:'users.list'},
-                {label:'Groups',name:'users.groups.list'},
-                {label:'Create',name:''},
+                {label:'Users',to:{name:'users.list'}},
+                {label:'Groups',to:{name:'users.groups.list'}},
+                {label:'Create',to:''},
             ]);
         },
         methods: {

diff --git a/resources/js/admin/users/components/GroupFromEdit.vue b/resources/js/admin/users/components/GroupFromEdit.vue
@@ -14,7 +14,7 @@
                         <div class="body-2 white--text">Group Details</div>
                     </v-flex>
                     <v-flex xs12>
-                        <v-text-field box label="Group Name" v-model="name" :rules="nameRules"></v-text-field>
+                        <v-text-field label="Group Name" v-model="name" :rules="nameRules"></v-text-field>
                     </v-flex>
                     <v-flex xs12 sm4>
                         <v-select
@@ -186,10 +186,10 @@
                     self.permissions = Group.permissions;
 
                     self.$store.commit('setBreadcrumbs',[
-                        {label:'Users',name:'users.list'},
-                        {label:'Groups',name:'users.groups.list'},
-                        {label:'Edit',name:''},
+                        {label:'Users',to:{name:'users.list'}},
+                        {label:'Groups',to:{name:'users.groups.list'}},
                         {label:Group.name,name:''},
+                        {label:'Edit',name:''},
                     ]);
 
                     cb();