Skip to content

Commit

Permalink
settings ui
Browse files Browse the repository at this point in the history
  • Loading branch information
eldertek committed Dec 17, 2024
1 parent ccfc391 commit 77d3017
Show file tree
Hide file tree
Showing 4 changed files with 178 additions and 4 deletions.
2 changes: 1 addition & 1 deletion js/duplicatefinder-main.js

Large diffs are not rendered by default.

29 changes: 27 additions & 2 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,55 @@
<template v-else>
<DuplicateNavigation v-if="acknowledgedDuplicates.length > 0 || unacknowledgedDuplicates.length > 0"
:acknowledged-duplicates="acknowledgedDuplicates" :unacknowledged-duplicates="unacknowledgedDuplicates"
@open-duplicate="openDuplicate" />
@open-duplicate="openDuplicate"
@open-settings="settingsOpen = true" />
<NcAppContent>
<DuplicateDetails ref="duplicateDetails" :duplicate="currentDuplicate" @lastFileDeleted="removeDuplicate(currentDuplicate)"
@duplicateUpdated="updateDuplicate(currentDuplicate)" />
</NcAppContent>

<NcAppSettingsDialog
:open.sync="settingsOpen"
:show-navigation="true"
:name="t('duplicatefinder', 'Duplicate Finder Settings')">
<NcAppSettingsSection
id="origin-folders"
:name="t('duplicatefinder', 'Origin Folders')">
<template #icon>
<Folder :size="20" />
</template>
<OriginFoldersSettings />
</NcAppSettingsSection>
</NcAppSettingsDialog>
</template>
</NcContent>
</template>


<script>
import { NcAppContent, NcContent, NcLoadingSpinner } from '@nextcloud/vue';
import { NcAppContent, NcContent, NcLoadingSpinner, NcButton, NcAppSettingsDialog, NcAppSettingsSection } from '@nextcloud/vue';
import DuplicateNavigation from './components/DuplicateNavigation.vue';
import DuplicateDetails from './components/DuplicateDetails.vue';
import OriginFoldersSettings from './components/OriginFoldersSettings.vue';
import { fetchDuplicates } from '@/tools/api';
import { removeDuplicateFromList } from '@/tools/utils';
import Cog from 'vue-material-design-icons/Cog';
import Folder from 'vue-material-design-icons/Folder';
export default {
name: 'DuplicateFinder',
components: {
NcAppContent,
NcContent,
NcLoadingSpinner,
NcButton,
DuplicateNavigation,
DuplicateDetails,
OriginFoldersSettings,
NcAppSettingsDialog,
NcAppSettingsSection,
Cog,
Folder,
},
data() {
return {
Expand All @@ -38,6 +62,7 @@ export default {
isLoading: false,
page: 1,
limit: 50,
settingsOpen: false,
};
},
methods: {
Expand Down
9 changes: 8 additions & 1 deletion src/components/DuplicateNavigation.vue
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,12 @@
<button @click="loadMoreAcknowledgedDuplicates">{{ t('duplicatefinder', 'Load More') }}</button>
</template>
</NcAppNavigationItem>
<!-- Settings Navigation Item -->
<NcAppNavigationItem :name="t('duplicatefinder', 'Settings')" @click="$emit('open-settings')" :exact="true">
<template #icon>
<Cog :size="20" />
</template>
</NcAppNavigationItem>
</template>
</NcAppNavigation>
</template>
Expand All @@ -50,10 +56,11 @@ import { NcAppNavigation, NcAppNavigationItem } from '@nextcloud/vue';
import DuplicateListItem from './DuplicateListItem.vue';
import CloseCircle from 'vue-material-design-icons/CloseCircle';
import CheckCircle from 'vue-material-design-icons/CheckCircle';
import Cog from 'vue-material-design-icons/Cog';
import { fetchDuplicates } from '@/tools/api';
export default {
components: { DuplicateListItem, NcAppNavigation, NcAppNavigationItem, CheckCircle, CloseCircle },
components: { DuplicateListItem, NcAppNavigation, NcAppNavigationItem, CheckCircle, CloseCircle, Cog },
props: ['acknowledgedDuplicates', 'unacknowledgedDuplicates', 'currentDuplicateId'],
data() {
return {
Expand Down
142 changes: 142 additions & 0 deletions src/components/OriginFoldersSettings.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<template>
<div class="origin-folders-settings">
<div class="description">
{{ t('duplicatefinder', 'Configure folders that should be considered as origin folders. Files in these folders will never be marked as duplicates to be deleted.') }}
</div>

<div class="folders-list">
<div v-for="(folder, index) in originFolders" :key="index" class="folder-item">
<NcButton type="tertiary" @click="removeFolder(index)">
<template #icon>
<Delete :size="20" />
</template>
</NcButton>
<span class="folder-path">{{ folder }}</span>
</div>
</div>

<div class="add-folder">
<NcButton @click="showFolderPicker = true">
<template #icon>
<Plus :size="20" />
</template>
{{ t('duplicatefinder', 'Add Origin Folder') }}
</NcButton>
</div>

<NcModal v-if="showFolderPicker"
@close="showFolderPicker = false"
:title="t('duplicatefinder', 'Select Origin Folder')">
<!-- Here we'll need to implement a folder picker component -->
<div class="folder-picker">
<!-- Placeholder for folder picker -->
<p>{{ t('duplicatefinder', 'Folder picker will be implemented here') }}</p>
</div>
<template #actions>
<NcButton type="primary" @click="addFolder">
{{ t('duplicatefinder', 'Add') }}
</NcButton>
<NcButton type="tertiary" @click="showFolderPicker = false">
{{ t('duplicatefinder', 'Cancel') }}
</NcButton>
</template>
</NcModal>
</div>
</template>

<script>
import { NcButton, NcModal } from '@nextcloud/vue'
import Delete from 'vue-material-design-icons/Delete'
import Plus from 'vue-material-design-icons/Plus'
export default {
name: 'OriginFoldersSettings',
components: {
NcButton,
NcModal,
Delete,
Plus,
},
data() {
return {
originFolders: [],
showFolderPicker: false,
}
},
methods: {
removeFolder(index) {
this.originFolders.splice(index, 1)
this.saveOriginFolders()
},
addFolder() {
// TODO: Implement folder selection logic
this.showFolderPicker = false
this.saveOriginFolders()
},
async saveOriginFolders() {
// TODO: Implement API call to save origin folders
try {
// await saveOriginFolders(this.originFolders)
// Show success message
} catch (error) {
// Show error message
}
},
async loadOriginFolders() {
// TODO: Implement API call to load origin folders
try {
// const folders = await loadOriginFolders()
// this.originFolders = folders
} catch (error) {
// Show error message
}
}
},
mounted() {
this.loadOriginFolders()
}
}
</script>

<style scoped>
.origin-folders-settings {
padding: 20px;
}
.description {
margin-bottom: 20px;
color: var(--color-text-maxcontrast);
}
.folders-list {
margin: 20px 0;
}
.folder-item {
display: flex;
align-items: center;
margin-bottom: 10px;
padding: 5px;
background-color: var(--color-background-hover);
border-radius: var(--border-radius);
}
.folder-path {
margin-left: 10px;
}
.add-folder {
margin-top: 20px;
}
.folder-picker {
min-height: 300px;
border: 2px dashed var(--color-border);
border-radius: var(--border-radius);
margin: 20px 0;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
</style>

0 comments on commit 77d3017

Please sign in to comment.