From 08105d0ed2623f198d34cd236fe38162e365bcc3 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Fri, 26 Aug 2022 05:19:18 +0800
Subject: [PATCH] Revert list style for O2M and M2M interfaces (#15267)

* revert list style for list-o2m

* revert list style for list-m2m
---
 app/src/interfaces/list-m2m/index.ts     | 11 ++++++
 app/src/interfaces/list-m2m/list-m2m.vue | 50 +++++++++++++++++-------
 app/src/interfaces/list-o2m/index.ts     | 11 ++++++
 app/src/interfaces/list-o2m/list-o2m.vue | 50 +++++++++++++++++-------
 4 files changed, 92 insertions(+), 30 deletions(-)

diff --git a/app/src/interfaces/list-m2m/index.ts b/app/src/interfaces/list-m2m/index.ts
index 38bf232745..9fa881da77 100644
--- a/app/src/interfaces/list-m2m/index.ts
+++ b/app/src/interfaces/list-m2m/index.ts
@@ -195,6 +195,17 @@ export default defineInterface({
 						label: '$t:enable_search_filter',
 					},
 					width: 'half',
+					hidden: true,
+					conditions: [
+						{
+							rule: {
+								layout: {
+									_eq: 'table',
+								},
+							},
+							hidden: false,
+						},
+					],
 				},
 			},
 			{
diff --git a/app/src/interfaces/list-m2m/list-m2m.vue b/app/src/interfaces/list-m2m/list-m2m.vue
index 704a7d0f48..e87454f617 100644
--- a/app/src/interfaces/list-m2m/list-m2m.vue
+++ b/app/src/interfaces/list-m2m/list-m2m.vue
@@ -4,7 +4,7 @@
 	</v-notice>
 	<div v-else class="many-to-many">
 		<div :class="[`layout-${layout}`, { bordered: layout === LAYOUTS.TABLE }]">
-			<div class="actions" :class="width">
+			<div v-if="layout === LAYOUTS.TABLE" class="actions" :class="width">
 				<div class="spacer" />
 
 				<div v-if="totalItemCount" class="item-count">
@@ -143,20 +143,34 @@
 				</draggable>
 			</v-list>
 
-			<div v-if="totalItemCount > 10" class="actions">
-				<v-pagination
-					v-if="pageCount > 1"
-					v-model="page"
-					:length="pageCount"
-					:total-visible="width.includes('half') ? 3 : 5"
-				/>
+			<div class="actions" :class="layout">
+				<template v-if="layout === LAYOUTS.TABLE">
+					<template v-if="totalItemCount > 10">
+						<v-pagination
+							v-if="pageCount > 1"
+							v-model="page"
+							:length="pageCount"
+							:total-visible="width.includes('half') ? 3 : 5"
+						/>
 
-				<div class="spacer" />
+						<div class="spacer" />
 
-				<div v-if="loading === false" class="per-page">
-					<span>{{ t('per_page') }}</span>
-					<v-select v-model="limit" :items="['10', '20', '30', '50', '100']" inline />
-				</div>
+						<div v-if="loading === false" class="per-page">
+							<span>{{ t('per_page') }}</span>
+							<v-select v-model="limit" :items="['10', '20', '30', '50', '100']" inline />
+						</div>
+					</template>
+				</template>
+				<template v-else>
+					<v-button v-if="enableCreate && createAllowed" :disabled="disabled" @click="createItem">
+						{{ t('create_new') }}
+					</v-button>
+					<v-button v-if="enableSelect && selectAllowed" :disabled="disabled" @click="selectModalActive = true">
+						{{ t('add_existing') }}
+					</v-button>
+					<div class="spacer" />
+					<v-pagination v-if="pageCount > 1" v-model="page" :length="pageCount" :total-visible="5" />
+				</template>
 			</div>
 		</div>
 
@@ -649,13 +663,15 @@ const selectAllowed = computed(() => {
 	gap: var(--v-sheet-padding);
 
 	.v-pagination {
-		margin-top: var(--v-sheet-padding);
-
 		:deep(.v-button) {
 			display: inline-flex;
 		}
 	}
 
+	.table.v-pagination {
+		margin-top: var(--v-sheet-padding);
+	}
+
 	.spacer {
 		flex-grow: 1;
 	}
@@ -684,6 +700,10 @@ const selectAllowed = computed(() => {
 			}
 		}
 	}
+
+	&.list {
+		margin-top: 8px;
+	}
 }
 
 .item-link {
diff --git a/app/src/interfaces/list-o2m/index.ts b/app/src/interfaces/list-o2m/index.ts
index 410ee0012a..976121317d 100644
--- a/app/src/interfaces/list-o2m/index.ts
+++ b/app/src/interfaces/list-o2m/index.ts
@@ -169,6 +169,17 @@ export default defineInterface({
 						label: '$t:enable_search_filter',
 					},
 					width: 'half',
+					hidden: true,
+					conditions: [
+						{
+							rule: {
+								layout: {
+									_eq: 'table',
+								},
+							},
+							hidden: false,
+						},
+					],
 				},
 			},
 			{
diff --git a/app/src/interfaces/list-o2m/list-o2m.vue b/app/src/interfaces/list-o2m/list-o2m.vue
index 8119ee9b48..c7cc1d6f95 100644
--- a/app/src/interfaces/list-o2m/list-o2m.vue
+++ b/app/src/interfaces/list-o2m/list-o2m.vue
@@ -4,7 +4,7 @@
 	</v-notice>
 	<div v-else class="one-to-many">
 		<div :class="{ bordered: layout === LAYOUTS.TABLE }">
-			<div class="actions" :class="width">
+			<div v-if="layout === LAYOUTS.TABLE" class="actions" :class="width">
 				<div class="spacer" />
 
 				<div v-if="totalItemCount" class="item-count">
@@ -142,20 +142,34 @@
 				</draggable>
 			</v-list>
 
-			<div v-if="totalItemCount > 10" class="actions">
-				<v-pagination
-					v-if="pageCount > 1"
-					v-model="page"
-					:length="pageCount"
-					:total-visible="width.includes('half') ? 3 : 5"
-				/>
+			<div class="actions" :class="layout">
+				<template v-if="layout === LAYOUTS.TABLE">
+					<template v-if="totalItemCount > 10">
+						<v-pagination
+							v-if="pageCount > 1"
+							v-model="page"
+							:length="pageCount"
+							:total-visible="width.includes('half') ? 3 : 5"
+						/>
 
-				<div class="spacer" />
+						<div class="spacer" />
 
-				<div v-if="loading === false" class="per-page">
-					<span>{{ t('per_page') }}</span>
-					<v-select v-model="limit" :items="['10', '20', '30', '50', '100']" inline />
-				</div>
+						<div v-if="loading === false" class="per-page">
+							<span>{{ t('per_page') }}</span>
+							<v-select v-model="limit" :items="['10', '20', '30', '50', '100']" inline />
+						</div>
+					</template>
+				</template>
+				<template v-else>
+					<v-button v-if="enableCreate && createAllowed && updateAllowed" :disabled="disabled" @click="createItem">
+						{{ t('create_new') }}
+					</v-button>
+					<v-button v-if="enableSelect && updateAllowed" :disabled="disabled" @click="selectModalActive = true">
+						{{ t('add_existing') }}
+					</v-button>
+					<div class="spacer" />
+					<v-pagination v-if="pageCount > 1" v-model="page" :length="pageCount" :total-visible="5" />
+				</template>
 			</div>
 		</div>
 
@@ -601,13 +615,15 @@ const updateAllowed = computed(() => {
 	gap: var(--v-sheet-padding);
 
 	.v-pagination {
-		margin-top: var(--v-sheet-padding);
-
 		:deep(.v-button) {
 			display: inline-flex;
 		}
 	}
 
+	.table.v-pagination {
+		margin-top: var(--v-sheet-padding);
+	}
+
 	.spacer {
 		flex-grow: 1;
 	}
@@ -636,6 +652,10 @@ const updateAllowed = computed(() => {
 			}
 		}
 	}
+
+	&.list {
+		margin-top: 8px;
+	}
 }
 
 .item-link {