Skip to content

Commit

Permalink
cleanup new folder modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@FlynnDerek
FlynnDerek committed Aug 4, 2024
1 parent cd391d1 commit 85aa60c
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 98 deletions.
105 changes: 13 additions & 92 deletions client/src/components/Manager.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,33 +40,6 @@
<DeleteModal :selectedObjects="checkedObjects" @delete="deleteSelections()" />
</div>

<!-- <v-btn
v-b-modal.deleteModal
class="btnDelete float-right"
color="#dc3545"
:disabled="checkedObjects.length == 0"
small
>
<svg
xmlns="http://www.w3.org/2000/svg"
style="margin-right: 10px;"
width="16"
height="16"
fill="currentColor"
class="bi bi-trash"
viewBox="0 0 16 16"
>
<path
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"
/>
<path
fill-rule="evenodd"
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
/>
</svg>
Delete
</v-btn> -->

<v-btn
class="btnMove float-right"
v-b-modal.moveModal
Expand Down Expand Up @@ -118,31 +91,6 @@
View File</v-btn
>

<v-btn
class="btnNewFolder float-right"
color="#007bff"
small
v-b-modal.folderModal
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
style="margin-right: 10px;"
class="bi bi-folder-plus"
viewBox="0 0 16 16"
>
<path
d="M.5 3l.04.87a1.99 1.99 0 0 0-.342 1.311l.637 7A2 2 0 0 0 2.826 14H9v-1H2.826a1 1 0 0 1-.995-.91l-.637-7A1 1 0 0 1 2.19 4h11.62a1 1 0 0 1 .996 1.09L14.54 8h1.005l.256-2.819A2 2 0 0 0 13.81 3H9.828a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 6.172 1H2.5a2 2 0 0 0-2 2zm5.672-1a1 1 0 0 1 .707.293L7.586 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672z"
/>
<path
d="M13.5 10a.5.5 0 0 1 .5.5V12h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V13h-1.5a.5.5 0 0 1 0-1H13v-1.5a.5.5 0 0 1 .5-.5z"
/>
</svg>
New Folder</v-btn
>

<v-btn
class="btnExtract float-right"
small
Expand All @@ -167,6 +115,11 @@
>Extract</v-btn
>


<div data-app class="btnNewFolder float-right">
<NewFolderModal :currentPath="picked" @createNewFolder="newFolder"/>
</div>

<v-btn
small
color="#8fe8c2"
Expand Down Expand Up @@ -509,34 +462,6 @@
</div>
</div>

<!-- New Folder Modal -->
<b-modal
ref="folderModal"
id="folderModal"
hide-footer
title="New Folder"
>
<v-text-field
class="col-md-8 mx-auto"
label="Folder Name"
v-model="folderName"
hide-details="auto"
autofocus
></v-text-field>

<div class="float-right mt-5">
<v-btn small @click="hideFolderModal()">Cancel</v-btn>
<v-btn
small
style="background-color: #8fe8c2; margin-left: 10px;"
@click="newFolder()"
:disabled="folderName.length == 0"
>
Add Folder</v-btn
>
</div>
</b-modal>

<!-- Move items modal -->
<b-modal
ref="moveModal"
Expand Down Expand Up @@ -659,7 +584,8 @@
<script>
/* eslint-disable */
import vue2Dropzone from "vue2-dropzone";
import DeleteModal from "./modals/DeleteModal.vue"
import DeleteModal from "./views/DeleteModal.vue"
import NewFolderModal from "./views/NewFolderModal.vue"
import "vue2-dropzone/dist/vue2Dropzone.min.css";
import $ from "jquery";
Expand All @@ -674,6 +600,7 @@ var _fileHelper = new FileHelper();
export default {
components: {
DeleteModal,
NewFolderModal,
vueDropzone: vue2Dropzone,
},
data() {
Expand Down Expand Up @@ -707,24 +634,19 @@ export default {
},
methods: {
hideFolderModal() {
this.$refs["folderModal"].hide();
this.folderName = "";
},
hideMoveModal() {
this.$refs["moveModal"].hide();
$("#fileTable input:checkbox").prop("checked", false);
this.checkedObjects = [];
this.moveDestination = "No Folder Selected";
},
async newFolder() {
await _actionService.newFolder(this.picked, this.folderName);
async newFolder(params) {
await _actionService.newFolder(params.currentPath, params.folderName);
await this.getFolders();
await this.updateTable(this.picked)
this.hideFolderModal();
await this.updateTable(params.currentPath);
},
async updateTable(path) {
this.files = await _explorerService.getContentsFromSelected(path);
},
Expand Down Expand Up @@ -901,8 +823,7 @@ export default {
.btnExtract {
color: white !important;
margin-top: 10px;
margin-right: 5px;
margin: 10px 0 0 5px;
}
.btnMove {
Expand Down
6 changes: 0 additions & 6 deletions client/src/components/modals/DeleteModal.vue → client/src/components/views/DeleteModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,6 @@
<script>
export default {
props: ["selectedObjects"],
created: function() {
console.log("data from parent component:");
console.log(this.selectedObjects);
},
data() {
return {
dialog: false,
Expand All @@ -84,9 +80,7 @@ export default {
methods: {
_delete() {
this.$emit('delete');
this.dialog = false;
}
}
};
</script>
Expand Down
100 changes: 100 additions & 0 deletions client/src/components/views/NewFolderModal.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<template>
<div>
<v-dialog v-model='dialog' width="600" transition="dialog-top-transition">
<template v-slot:activator="{ on, attrs }">
<v-btn
class="newFolderBtn"
color="#007bff"
small
v-bind="attrs"
v-on="on"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
style="margin-right: 10px;"
class="bi bi-folder-plus"
viewBox="0 0 16 16"
>
<path
d="M.5 3l.04.87a1.99 1.99 0 0 0-.342 1.311l.637 7A2 2 0 0 0 2.826 14H9v-1H2.826a1 1 0 0 1-.995-.91l-.637-7A1 1 0 0 1 2.19 4h11.62a1 1 0 0 1 .996 1.09L14.54 8h1.005l.256-2.819A2 2 0 0 0 13.81 3H9.828a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 6.172 1H2.5a2 2 0 0 0-2 2zm5.672-1a1 1 0 0 1 .707.293L7.586 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672z"
/>
<path
d="M13.5 10a.5.5 0 0 1 .5.5V12h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V13h-1.5a.5.5 0 0 1 0-1H13v-1.5a.5.5 0 0 1 .5-.5z"
/>
</svg>
New Folder
</v-btn>
</template>

<v-card>
<v-card-title class="text-h5 grey lighten-2">
New Folder
</v-card-title>

<v-text-field
class="col-md-8 mx-auto"
label="Folder Name"
v-model="folderName"
hide-details="auto"
autofocus
></v-text-field>

<v-divider></v-divider>

<v-card-actions>
<v-spacer></v-spacer>
<v-btn
class="newFolderBtn"
color="#007bff"
@click="createNewFolder(), (dialog = false)"
:disabled="folderName == '' || folderName == null"
>
Create
</v-btn>
<v-btn class="cancelBtn" @click="cancel(), (dialog = false)">
Cancel
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>

<script>
export default {
props: ['currentPath'],
data() {
return {
dialog: false,
folderName: '',
};
},
methods: {
createNewFolder() {
const params = {
folderName: this.folderName,
currentPath: this.currentPath,
};
this.$emit('createNewFolder', params);
this.folderName = '';
},
cancel() {
this.folderName = '';
}
},
};
</script>

<style>
.newFolderBtn {
color: white !important;
}
.cancelBtn {
margin-left: 8px;
}
</style>

0 comments on commit 85aa60c

Please sign in to comment.