enh: modify styling, lint

Signed-off-by: Cleopatra Enjeck M <patrathewhiz@gmail.com>
nextcloud · Mar 11, 2024 · f6a5666 · f6a5666
1 parent b9ca229
commit f6a5666
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 62 deletions.
diff --git a/src/modules/modals/CreateContext.vue b/src/modules/modals/CreateContext.vue
@@ -1,20 +1,19 @@
 <template>
-	<!-- TODO fix alignment and styling -->
 	<NcModal v-if="showModal" size="normal" @close="actionCancel">
 		<div class="modal__content">
 			<div class="row">
 				<div class="col-4">
-					<h2>{{ t('tables', 'Create a context') }}</h2>
+					<h2>{{ t('tables', 'Create an Application') }}</h2>
 				</div>
 			</div>
 			<div class="row space-T">
-				<div class="col-4">
+				<div class="col-4 mandatory">
 					{{ t('tables', 'Title') }}
 				</div>
-				<div class="row" style="display: inline-flex;">
+				<div class="col-4" style="display: inline-flex;">
 					<!-- TODO replace with Context's icon picker -->
 					<NcEmojiPicker :close-on-select="true" @select="setIcon">
-						<NcButton type="tertiary" :aria-label="t('tables', 'Select icon for the context')"
+						<NcButton type="tertiary" :aria-label="t('tables', 'Select icon for the Application')"
 							:title="t('tables', 'Select icon')" @click.prevent>
 							{{ icon }}
 						</NcButton>
@@ -23,24 +22,23 @@
 						:placeholder="t('tables', 'Title of the new context')" @input="titleChangedManually">
 				</div>
 			</div>
-			<div class="row space-T">
-				<div class="col-4 mandatory">
+			<div class="col-4 row space-T">
+				<div class="col-4">
 					{{ t('tables', 'Description') }}
 				</div>
-				<input v-model="description" type="text" :placeholder="t('tables', 'Description of the new context')">
+				<input v-model="description" type="text"
+					:placeholder="t('tables', 'Description of the new Application')">
 			</div>
-			<div class="row space-T">
-				<div class="row">
-					<div>
-						{{ t('tables', 'Resources') }}
-					</div>
+			<div class="col-4 row space-T">
+				<div class="col-4">
+					{{ t('tables', 'Resources') }}
 				</div>
 				<NcContextResource :resources.sync="resources" />
 			</div>
 			<div class="row space-R">
 				<div class="fix-col-4 end">
-					<NcButton type="primary" :aria-label="t('tables', 'Create context')" @click="submit">
-						{{ t('tables', 'Create context') }}
+					<NcButton type="primary" :aria-label="t('tables', 'Create Application')" @click="submit">
+						{{ t('tables', 'Create Application') }}
 					</NcButton>
 				</div>
 			</div>

diff --git a/src/modules/modals/EditContext.vue b/src/modules/modals/EditContext.vue
@@ -1,42 +1,42 @@
 <template>
-	<!-- TODO fix alignment and styling -->
 	<NcModal v-if="showModal" size="normal" @close="actionCancel">
 		<div class="modal__content" data-cy="editContextModal">
 			<div class="row">
 				<div class="col-4">
-					<h2>{{ t('tables', 'Edit context') }}</h2>
+					<h2>{{ t('tables', 'Edit Application') }}</h2>
 				</div>
 			</div>
-			<div class="row">
-				<div class="row">
+			<div class="row space-T">
+				<div class="col-4 mandatory">
 					{{ t('tables', 'Title') }}
 				</div>
-				<div class="col-4">
+				<div class="col-4" style="display: inline-flex;">
+					<!-- TODO replace with Context's icon picker -->
 					<NcEmojiPicker :close-on-select="true" @select="emoji => icon = emoji">
-						<NcButton type="tertiary" :aria-label="t('tables', 'Select icon for context')"
+						<NcButton type="tertiary" :aria-label="t('tables', 'Select icon for Application')"
 							:title="t('tables', 'Select icon')" @click.prevent>
 							{{ icon ? icon : '...' }}
 						</NcButton>
 					</NcEmojiPicker>
 					<input v-model="title" :class="{ missing: errorTitle }" type="text"
-						:placeholder="t('tables', 'Title of the context')">
+						:placeholder="t('tables', 'Title of the Application')">
 				</div>
 			</div>
-			<div class="row">
-				<div class="col-4 mandatory">
+			<div class="col-4 row space-T">
+				<div class="col-4">
 					{{ t('tables', 'Description') }}
 				</div>
-				<input v-model="description" type="text" :placeholder="t('tables', 'Description of the context')">
+				<input v-model="description" type="text" :placeholder="t('tables', 'Description of the Application')">
 			</div>
-			<div class="row">
-				<div>
+			<div class="col-4 row space-T">
+				<div class="col-4">
 					{{ t('tables', 'Resources') }}
 				</div>
 				<NcContextResource :resources.sync="resources" />
 			</div>
 
-			<div class="row">
-				<div class="right-additional-button">
+			<div class="row space-R">
+				<div class="fix-col-4 end">
 					<NcButton type="primary" @click="submit">
 						{{ t('tables', 'Save') }}
 					</NcButton>
@@ -70,14 +70,18 @@ export default {
 			type: Object,
 			default: null,
 		},
+		contextResources: {
+			type: Array,
+			default: () => [],
+		},
 	},
 	data() {
 		return {
 			title: this.context?.name,
 			icon: this.context?.iconName,
 			description: this.context?.description,
 			errorTitle: false,
-			resources: this.context?.resources ? [...this.context.resources] : [],
+			resources: [...this.contextResources],
 			contextId: this.context?.id,
 		}
 	},
@@ -97,7 +101,7 @@ export default {
 				this.title = this.context.name
 				this.icon = this.context.iconName
 				this.description = this.context.description
-				this.resources = [...this.context.resources]
+				this.resources = [...this.contextResources]
 				this.contextId = this.context.id
 			}
 		},
@@ -107,7 +111,7 @@ export default {
 			this.reset()
 			this.$emit('close')
 		},
-		// TODO show edited changes if we're currently viewing on active context
+		// TODO show edited changes if we're currently viewing the active context
 		async submit() {
 			if (this.title === '') {
 				showError(t('tables', 'Cannot update context. Title is missing.'))
@@ -138,19 +142,9 @@ export default {
 			this.title = ''
 			this.errorTitle = false
 			this.icon = ''
-			this.resources = []
+			this.resources = [...this.contextResources]
 			this.description = ''
 		},
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-.right-additional-button {
-	display: inline-flex;
-}
-
-.right-additional-button>button {
-	margin-left: calc(var(--default-grid-baseline) * 3);
-}
-</style>
diff --git a/src/modules/modals/Modals.vue b/src/modules/modals/Modals.vue
@@ -37,8 +37,8 @@
 			@close="importToElement = null" />
 
 		<EditTable :table-id="editTable" :show-modal="editTable !== null" @close="editTable = null" />
-		<EditContext :context="editContext" :show-modal="editContext !== null" @close="editContext = null" />
 		<TransferTable :table="tableToTransfer" :show-modal="tableToTransfer !== null" @close="tableToTransfer = null" />
+		<EditContext :context="editContext?.context" :context-resources="editContext?.resources" :show-modal="editContext !== null" @close="editContext = null" />
 	</div>
 </template>
 
@@ -137,7 +137,7 @@ export default {
 
 		// context
 		subscribe('tables:context:create', () => { this.showModalCreateContext = true })
-		subscribe('tables:context:edit', context => { this.editContext = context })
+		subscribe('tables:context:edit', contextInfo => { this.editContext = contextInfo })
 
 	},
 	unmounted() {
@@ -164,7 +164,7 @@ export default {
 		unsubscribe('tables:table:edit', tableId => { this.editTable = tableId })
 		unsubscribe('tables:table:transfer', table => { this.tableToTransfer = table })
 		unsubscribe('tables:context:create', () => { this.showModalCreateContext = true })
-		unsubscribe('tables:context:edit', context => { this.editContext = context })
+		unsubscribe('tables:context:edit', contextInfo => { this.editContext = contextInfo })
 	},
 }
 </script>
diff --git a/src/modules/navigation/partials/NavigationContextItem.vue b/src/modules/navigation/partials/NavigationContextItem.vue
@@ -55,11 +55,10 @@ export default {
 	methods: {
 		emit,
 		async editContext() {
-			// TODO make more elegant
+			const resources = []
 			if (this.context) {
 				// Format resources for selection dropdown
 				const nodes = Object.values(this.context.nodes)
-				const resources = []
 				for (const node of nodes) {
 					if (parseInt(node.node_type) === NODE_TYPE_TABLE || parseInt(node.node_type) === NODE_TYPE_VIEW) {
 						const element = parseInt(node.node_type) === NODE_TYPE_TABLE ? this.tables.find(t => t.id === node.id) : this.views.find(v => v.id === node.id)
@@ -77,11 +76,8 @@ export default {
 
 					}
 				}
-				if (resources) {
-					this.context.resources = [...resources]
-				}
 			}
-			emit('tables:context:edit', this.context)
+			emit('tables:context:edit', { context: this.context, resources })
 		},
 	},
 

diff --git a/src/pages/Context.vue b/src/pages/Context.vue
@@ -1,4 +1,3 @@
-<!-- TODO test that Tables and Views events work properly -->
 <template>
 	<div class="row">
 		<div v-if="loading" class="icon-loading" />

diff --git a/src/shared/components/ncContextResource/ResourceForm.vue b/src/shared/components/ncContextResource/ResourceForm.vue
@@ -1,6 +1,8 @@
 <template>
 	<div class="row space-B">
-		<h3>{{ t('tables', 'Select a table or view') }}</h3>
+		<div class="resource-label">
+			{{ t('tables', 'Select a table or view') }}
+		</div>
 		<NcSelect style="width: 100%;" :loading="loading" :options="options" :clear-on-select="true"
 			:hide-selected="true" :placeholder="t('tables', 'Select a table or view')" :searchable="true"
 			:get-option-key="(option) => option.key" label="title"
@@ -83,9 +85,8 @@ export default {
 
 		async getSuggestions(searchTerm) {
 			this.loading = true
-			// Check search word and if item already in the resource list before showing as suggestion
 			let filteredTables = this.tables.filter((table) => table.title.toLowerCase().includes(searchTerm.toLowerCase())
-			&& !this.resources.find(t => t.nodeType === NODE_TYPE_TABLE && parseInt(t.id) === parseInt(table.id)))
+				&& !this.resources.find(t => t.nodeType === NODE_TYPE_TABLE && parseInt(t.id) === parseInt(table.id)))
 			filteredTables = filteredTables.map(table => {
 				return {
 					title: table.title,
@@ -96,7 +97,7 @@ export default {
 				}
 			})
 			let filteredViews = this.views.filter((view) => view.title.toLowerCase().includes(searchTerm.toLowerCase())
-			&& !this.resources.find(v => v.nodeType === NODE_TYPE_VIEW && parseInt(v.id) === parseInt(view.id)))
+				&& !this.resources.find(v => v.nodeType === NODE_TYPE_VIEW && parseInt(v.id) === parseInt(view.id)))
 			filteredViews = filteredViews.map(view => {
 				return {
 					title: view.title,
@@ -123,4 +124,8 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.resource-label {
+	font-style: italic;
+}
+</style>
diff --git a/src/shared/components/ncContextResource/ResourceList.vue b/src/shared/components/ncContextResource/ResourceList.vue
@@ -1,8 +1,10 @@
 <template>
 	<div>
-		<h3>{{ t('tables', 'Resources') }}</h3>
+		<div class="resource-label">
+			{{ t('tables', 'Selected Resources') }}
+		</div>
 		<div v-if="loading" class="icon-loading" />
-		<ul v-if="getResources && getResources.length > 0" class="resourceList">
+		<ul v-if="getResources && getResources.length > 0" class="resource-list">
 			<div v-for="resource in getResources" :key="resource.key" class="row">
 				<div class="fix-col-2">
 					<div style="display:flex; align-items: center;">
@@ -18,7 +20,7 @@
 			</div>
 		</ul>
 		<div v-else>
-			{{ t('tables', 'No resources') }}
+			{{ t('tables', 'No selected resources') }}
 		</div>
 	</div>
 </template>
@@ -68,9 +70,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.resourceList li {
+.resource-list li {
     display: flex;
     justify-content: space-between;
     line-height: 44px;
 }
+
+.resource-label {
+	font-style: italic;
+}
 </style>