Formatting, folder settings and remove system added.

This commit is contained in:
Kasen IO 2020-04-09 01:48:13 -04:00
parent d86033dfbf
commit 32c06299bb
2 changed files with 341 additions and 213 deletions

View file

@ -185,10 +185,24 @@
max-width="344"
outlined
>
<v-icon class="folder-icon" color="teal">mdi-folder-settings</v-icon>
{{item.name}}
</v-list-item>
</template>
<v-btn block medium color="primary"
@click="
editFolderDialog.show = true;
editFolderDialog.uuid = item.uuid;
editFolderDialog.data.name = item.name;
"
>
Edit Folder
</v-btn>
<v-btn block medium color="red"
@click="removeFolderDialog.show = true; removeFolderDialog.uuid = item.uuid;"
>
Delete Folder
</v-btn>
<v-col
cols="12"
sm="6"
@ -288,10 +302,8 @@
<v-icon>mdi-minus</v-icon>
</v-list-item-action>
</v-list-item>
</v-list>
</v-menu>
</v-list-item>
</v-item-group>
</draggable>
@ -341,6 +353,42 @@
</v-card>
</v-dialog>
<v-dialog
v-model="removeFolderDialog.show"
max-width="290"
>
<v-card>
<v-card-title class="headline">Remove Folder</v-card-title>
<v-card-text>
Are you sure you want to delete this folder <b>and</b> all items within from your inventory?
</v-card-text>
<v-card-actions>
<v-btn
color="blue"
class="px-3"
@click="removeFolderDialog.show = false"
>
No
</v-btn>
<v-spacer></v-spacer>
<v-btn
color="red"
class="px-3"
@click="removeFolderDialog.show = false; removeFolder(removeFolderDialog.uuid);"
>
Yes
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog
v-model="editDialog.show"
max-width="380"
@ -406,6 +454,55 @@
</v-card>
</v-dialog>
<v-dialog
v-model="editFolderDialog.show"
max-width="380"
>
<v-card>
<v-card-title class="headline">Edit Folder</v-card-title>
<v-form
ref="editFolderForm"
v-model="editFolderDialog.valid"
:lazy-validation="false"
>
<v-text-field
class="px-2"
label="Name"
v-model="editFolderDialog.data.name"
:rules="[v => !!v || 'Name is required.']"
required
></v-text-field>
<v-card-actions>
<v-btn
color="red"
class="px-3"
@click="editFolderDialog.show = false"
>
Cancel
</v-btn>
<v-spacer></v-spacer>
<v-btn
color="blue"
class="px-3"
:disabled="!editFolderDialog.valid"
@click="editFolderDialog.show = false; editFolder(editFolderDialog.uuid);"
>
Done
</v-btn>
</v-card-actions>
</v-form>
</v-card>
</v-dialog>
<v-dialog
v-model="createFolderDialog.show"
max-width="380"
@ -814,6 +911,10 @@ export default {
show: false,
uuid: null,
},
removeFolderDialog: {
show: false,
uuid: null,
},
createFolderDialog: {
show: false,
valid: false,
@ -839,6 +940,14 @@ export default {
"url": null,
},
},
editFolderDialog: {
show: false,
valid: false,
uuid: null, //
data: {
"name": null,
},
},
receiveDialog: {
show: false,
valid: false,
@ -982,6 +1091,13 @@ export default {
createFolder: function(name) {
this.pushFolderToItems(name);
},
editFolder: function(uuid) {
for (var i = 0; i < this.items.length; i++) {
if (this.items[i].uuid == uuid) {
this.items[i].name = this.editFolderDialog.data.name;
}
}
},
addItem: function(name, url) {
var extensionRegex = /\.[0-9a-z]+$/i; // to detect the file type based on extension in the URL.
var detectedFileType = url.match(extensionRegex);
@ -1005,6 +1121,13 @@ export default {
}
}
},
removeFolder: function(uuid) {
for (var i = 0; i < this.items.length; i++) {
if (this.items[i].uuid == uuid) {
this.items.splice(i, 1);
}
}
},
editItem: function(uuid) {
for (var i = 0; i < this.items.length; i++) {
if (this.items[i].uuid == uuid) {

View file

@ -2,6 +2,7 @@
.draggable-card {
background-color: rgba(39,39,39, 1.0);
margin: 5px 0px;
}
.draggable-card .handle {
@ -24,6 +25,10 @@
width: 40px !important;
}
.top-level-folder .folder-icon {
margin-right: 10px;
}
/* Second Level */
.v-list-group .column-item {