@gxp-dev/tools 2.0.63 → 2.0.65

package/template/src/DemoPage.vue

@@ -1,187 +1,217 @@
 <template>
 	<div class="plugin-container">
-	  <!-- Example usage of the GxP Datastore -->
-	  <div class="content-wrapper">
-		<h1 gxp-string="welcome_text">Welcome!</h1>
-		
-		<div class="info-section">
-		  <h2>Plugin Information</h2>
-		  <p><strong>Primary Color:</strong> <span gxp-string="primary_color"></span></p>
-		  <p><strong>Project ID:</strong> <span gxp-settings gxp-string="projectId"></span></p>
-		  <p><strong>Environment:</strong> <span gxp-settings gxp-string="environment"></span></p>
-		</div>
-  
-		<div class="assets-section">
-		  <h2>Assets</h2>
-		  <img 
-			v-if="gxpStore.getAsset('main_logo')"
-			:src="gxpStore.getAsset('main_logo')" 
-			alt="Main Logo" 
-			class="logo"
-		  />
-		  <div class="asset-controls">
-			<button @click="addDevAssets" class="action-btn secondary small">
-			  Add Dev Assets
-			</button>
-			<button @click="listAllAssets" class="action-btn secondary small">
-			  List Assets
-			</button>
-			<button @click="updateLogo" class="action-btn secondary small">
-			  Update Logo
-			</button>
-		  </div>
-		  <div v-if="currentAssets" class="asset-preview">
-			<h3>Current Assets:</h3>
-			<div v-for="(url, key) in currentAssets" :key="key" class="asset-item">
-			  <strong>{{ key }}:</strong> 
-			  <a :href="url" target="_blank" class="asset-link">{{ url }}</a>
+		<!-- Example usage of the GxP Datastore -->
+		<div class="content-wrapper">
+			<h1 gxp-string="welcome_text">Welcome!</h1>
+
+			<div class="info-section">
+				<h2>Plugin Information</h2>
+				<p>
+					<strong>Primary Color:</strong>
+					<span gxp-string="primary_color"></span>
+				</p>
+				<p>
+					<strong>Project ID:</strong>
+					<span gxp-settings gxp-string="projectId"></span>
+				</p>
+				<p>
+					<strong>Environment:</strong>
+					<span gxp-settings gxp-string="environment"></span>
+				</p>
 			</div>
-		  </div>
-		</div>
-  
-		<div class="actions-section">
-		  <button 
-			@click="handleApiCall" 
-			class="action-btn"
-			:style="{ backgroundColor: gxpStore.getSetting('primary_color') }"
-		  >
-			{{ gxpStore.getString('continue_button', 'Continue') }}
-		  </button>
-		  
-		  <button 
-			@click="handleSocketTest" 
-			class="action-btn secondary"
-		  >
-			Test Socket
-		  </button>
-		  
-		  <button 
-			@click="props.router?.visit('/start')" 
-			class="action-btn secondary"
-		  >
-			{{ gxpStore.getString('back_button', 'Back') }}
-		  </button>
-		</div>
-  
-		<div class="permissions-section">
-		  <h2>Permissions</h2>
-		  <ul>
-			<li v-for="permission in ['can_access_camera', 'can_save_data', 'can_share_content']" :key="permission">
-			  {{ permission }}: 
-			  <span :class="gxpStore.hasPermission(permission) ? 'granted' : 'denied'">
-				{{ gxpStore.hasPermission(permission) ? 'Granted' : 'Denied' }}
-			  </span>
-			</li>
-		  </ul>
-		</div>
-  
-		<div class="dependencies-section">
-		  <h2>Available Dependencies</h2>
-		  <div v-if="Array.isArray(gxpStore.dependencyList)">
-			<div v-for="dependency in gxpStore.dependencyList" :key="dependency.identifier" class="dependency-item">
-			  <h3>{{ dependency.identifier }}</h3>
-			  <p><strong>Model:</strong> {{ dependency.model }}</p>
-			  <p><strong>Events:</strong> {{ Object.keys(dependency.events || {}).join(', ') || 'None' }}</p>
-			  <button 
-				@click="testDependencyAPI(dependency.identifier)" 
-				class="action-btn secondary small"
-			  >
-				Test API
-			  </button>
-			  <button 
-				v-if="dependency.events && Object.keys(dependency.events).length > 0"
-				@click="setupDependencyListeners(dependency)" 
-				class="action-btn secondary small"
-			  >
-				Listen for Events
-			  </button>
+
+			<div class="assets-section">
+				<h2>Assets</h2>
+				<img
+					v-if="gxpStore.getAsset('main_logo')"
+					:src="gxpStore.getAsset('main_logo')"
+					alt="Main Logo"
+					class="logo"
+				/>
+				<div class="asset-controls">
+					<button @click="addDevAssets" class="action-btn secondary small">
+						Add Dev Assets
+					</button>
+					<button @click="listAllAssets" class="action-btn secondary small">
+						List Assets
+					</button>
+					<button @click="updateLogo" class="action-btn secondary small">
+						Update Logo
+					</button>
+				</div>
+				<div v-if="currentAssets" class="asset-preview">
+					<h3>Current Assets:</h3>
+					<div
+						v-for="(url, key) in currentAssets"
+						:key="key"
+						class="asset-item"
+					>
+						<strong>{{ key }}:</strong>
+						<a :href="url" target="_blank" class="asset-link">{{ url }}</a>
+					</div>
+				</div>
+			</div>
+
+			<div class="actions-section">
+				<button
+					@click="handleApiCall"
+					class="action-btn"
+					:style="{ backgroundColor: gxpStore.getSetting('primary_color') }"
+				>
+					{{ gxpStore.getString("continue_button", "Continue") }}
+				</button>
+
+				<button @click="handleSocketTest" class="action-btn secondary">
+					Test Socket
+				</button>
+
+				<button
+					@click="props.router?.visit('/start')"
+					class="action-btn secondary"
+				>
+					{{ gxpStore.getString("back_button", "Back") }}
+				</button>
+			</div>
+
+			<div class="permissions-section">
+				<h2>Permissions</h2>
+				<ul>
+					<li
+						v-for="permission in [
+							'can_access_camera',
+							'can_save_data',
+							'can_share_content',
+						]"
+						:key="permission"
+					>
+						{{ permission }}:
+						<span
+							:class="gxpStore.hasPermission(permission) ? 'granted' : 'denied'"
+						>
+							{{ gxpStore.hasPermission(permission) ? "Granted" : "Denied" }}
+						</span>
+					</li>
+				</ul>
+			</div>
+
+			<div class="dependencies-section">
+				<h2>Available Dependencies</h2>
+				<div v-if="Array.isArray(gxpStore.dependencyList)">
+					<div
+						v-for="dependency in gxpStore.dependencyList"
+						:key="dependency.identifier"
+						class="dependency-item"
+					>
+						<h3>{{ dependency.identifier }}</h3>
+						<p><strong>Model:</strong> {{ dependency.model }}</p>
+						<p>
+							<strong>Events:</strong>
+							{{ Object.keys(dependency.events || {}).join(", ") || "None" }}
+						</p>
+						<button
+							@click="testDependencyAPI(dependency.identifier)"
+							class="action-btn secondary small"
+						>
+							Test API
+						</button>
+						<button
+							v-if="
+								dependency.events && Object.keys(dependency.events).length > 0
+							"
+							@click="setupDependencyListeners(dependency)"
+							class="action-btn secondary small"
+						>
+							Listen for Events
+						</button>
+					</div>
+				</div>
+				<div v-else>
+					<ul>
+						<li v-for="(id, key) in gxpStore.dependencyList" :key="key">
+							{{ key }}: {{ id }}
+						</li>
+					</ul>
+				</div>
+			</div>
+
+			<!-- Example of how to use socket listeners -->
+			<div class="socket-section">
+				<h2>Socket Events</h2>
+				<button @click="emitTestEvent" class="action-btn secondary">
+					Emit Test Event
+				</button>
+				<div v-if="socketMessages.length > 0" class="socket-messages">
+					<h3>Received Messages:</h3>
+					<ul>
+						<li v-for="(message, index) in socketMessages" :key="index">
+							{{ message }}
+						</li>
+					</ul>
+				</div>
+			</div>
+
+			<!-- Complete button -->
+			<div class="complete-section">
+				<button
+					@click="props.router?.visit('/final')"
+					class="action-btn complete"
+					:style="{
+						backgroundColor: gxpStore.getSetting('final_background_color'),
+					}"
+				>
+					Complete Experience
+				</button>
 			</div>
-		  </div>
-		  <div v-else>
-			<ul>
-			  <li v-for="(id, key) in gxpStore.dependencyList" :key="key">
-				{{ key }}: {{ id }}
-			  </li>
-			</ul>
-		  </div>
-		</div>
-  
-		<!-- Example of how to use socket listeners -->
-		<div class="socket-section">
-		  <h2>Socket Events</h2>
-		  <button @click="emitTestEvent" class="action-btn secondary">
-			Emit Test Event
-		  </button>
-		  <div v-if="socketMessages.length > 0" class="socket-messages">
-			<h3>Received Messages:</h3>
-			<ul>
-			  <li v-for="(message, index) in socketMessages" :key="index">
-				{{ message }}
-			  </li>
-			</ul>
-		  </div>
-		</div>
-  
-		<!-- Complete button -->
-		<div class="complete-section">
-		  <button 
-			@click="props.router?.visit('/final')" 
-			class="action-btn complete"
-			:style="{ backgroundColor: gxpStore.getSetting('final_background_color') }"
-		  >
-			Complete Experience
-		  </button>
 		</div>
-	  </div>
 	</div>
-  </template>
-  
-  <style scoped>
-  .plugin-container {
+</template>
+
+<style scoped>
+.plugin-container {
 	padding: 20px;
 	max-width: 800px;
 	margin: 0 auto;
 	font-family: Arial, sans-serif;
-  }
-  
-  .content-wrapper {
+}
+
+.content-wrapper {
 	background: white;
 	border-radius: 8px;
 	padding: 30px;
 	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  }
-  
-  h1 {
+}
+
+h1 {
 	color: v-bind('gxpStore.getSetting("primary_color")');
 	text-align: center;
 	margin-bottom: 30px;
-  }
-  
-  h2 {
+}
+
+h2 {
 	color: #333;
 	border-bottom: 2px solid #eee;
 	padding-bottom: 10px;
 	margin: 20px 0 15px 0;
-  }
-  
-  .info-section,
-  .assets-section,
-  .actions-section,
-  .permissions-section,
-  .dependencies-section,
-  .socket-section,
-  .complete-section {
+}
+
+.info-section,
+.assets-section,
+.actions-section,
+.permissions-section,
+.dependencies-section,
+.socket-section,
+.complete-section {
 	margin: 20px 0;
-  }
-  
-  .logo {
+}
+
+.logo {
 	max-width: 200px;
 	height: auto;
 	display: block;
 	margin: 10px 0;
-  }
-  
-  .action-btn {
+}
+
+.action-btn {
 	background-color: #007bff;
 	color: white;
 	border: none;
@@ -191,269 +221,292 @@
 	cursor: pointer;
 	font-size: 16px;
 	transition: background-color 0.3s;
-  }
-  
-  .action-btn:hover {
+}
+
+.action-btn:hover {
 	opacity: 0.9;
-  }
-  
-  .action-btn.secondary {
+}
+
+.action-btn.secondary {
 	background-color: #6c757d;
-  }
-  
-  .action-btn.complete {
+}
+
+.action-btn.complete {
 	background-color: #28a745;
 	font-size: 18px;
 	padding: 15px 30px;
 	display: block;
 	margin: 20px auto 0;
-  }
-  
-  .granted {
+}
+
+.granted {
 	color: #28a745;
 	font-weight: bold;
-  }
-  
-  .denied {
+}
+
+.denied {
 	color: #dc3545;
 	font-weight: bold;
-  }
-  
-  .socket-messages {
+}
+
+.socket-messages {
 	background: #f8f9fa;
 	padding: 15px;
 	border-radius: 4px;
 	margin-top: 10px;
-  }
-  
-  .dependency-item {
+}
+
+.dependency-item {
 	background: #f8f9fa;
 	padding: 15px;
 	margin: 10px 0;
 	border-radius: 4px;
 	border-left: 4px solid #007bff;
-  }
-  
-  .dependency-item h3 {
+}
+
+.dependency-item h3 {
 	margin: 0 0 10px 0;
 	color: #007bff;
-  }
-  
-  .action-btn.small {
+}
+
+.action-btn.small {
 	padding: 8px 16px;
 	font-size: 14px;
 	margin: 2px;
-  }
-  
-  ul {
+}
+
+ul {
 	list-style-type: none;
 	padding: 0;
-  }
-  
-  li {
+}
+
+li {
 	padding: 5px 0;
 	border-bottom: 1px solid #eee;
-  }
-  
-  li:last-child {
+}
+
+li:last-child {
 	border-bottom: none;
-  }
-  
-  .asset-controls {
+}
+
+.asset-controls {
 	margin: 15px 0;
-  }
-  
-  .asset-preview {
+}
+
+.asset-preview {
 	background: #f8f9fa;
 	padding: 15px;
 	border-radius: 4px;
 	margin-top: 15px;
-  }
-  
-  .asset-preview h3 {
+}
+
+.asset-preview h3 {
 	margin: 0 0 10px 0;
 	color: #333;
-  }
-  
-  .asset-item {
+}
+
+.asset-item {
 	margin: 8px 0;
 	padding: 8px;
 	background: white;
 	border-radius: 4px;
 	border-left: 3px solid #007bff;
-  }
-  
-  .asset-link {
+}
+
+.asset-link {
 	color: #007bff;
 	text-decoration: none;
 	word-break: break-all;
-  }
-  
-  .asset-link:hover {
+}
+
+.asset-link:hover {
 	text-decoration: underline;
-  }
-  </style>
-  
-  <script setup>
-  defineOptions({
+}
+</style>
+
+<script setup>
+defineOptions({
 	inheritAttrs: false,
-  });
-  
-  import { ref, onMounted, onUnmounted } from 'vue';
-  
-  // Initialize the GxP store
-  import { useGxpStore } from "@/stores/gxpPortalConfigStore";
-  
-  const gxpStore = useGxpStore();
-  
-  // Define props (router will be passed from platform)
-  const props = defineProps({
+})
+
+import { ref, onMounted, onUnmounted } from "vue"
+
+// Initialize the GxP store
+import { useGxpStore } from "@/stores/gxpPortalConfigStore"
+
+const gxpStore = useGxpStore()
+
+// Define props (router will be passed from platform)
+const props = defineProps({
 	router: {
-	  type: Object,
-	  required: false,
-	  default: () => ({
-		visit: (url, options) => console.log('Router not available:', url, options)
-	  }),
+		type: Object,
+		required: false,
+		default: () => ({
+			visit: (url, options) =>
+				console.log("Router not available:", url, options),
+		}),
 	},
-  });
-  
-  // Router is now available as props.router for navigation
-  
-  // Local state
-  const socketMessages = ref([]);
-  const socketUnsubscribers = ref([]);
-  const currentAssets = ref(null);
-  
-  // Example API call using the store
-  async function handleApiCall() {
+})
+
+// Router is now available as props.router for navigation
+
+// Local state
+const socketMessages = ref([])
+const socketUnsubscribers = ref([])
+const currentAssets = ref(null)
+
+// Example API call using the store
+async function handleApiCall() {
 	try {
-	  console.log('Making API call...');
-	  // Example API call - this would work with your actual API
-	  // const result = await gxpStore.apiGet('/some-endpoint');
-	  // console.log('API Result:', result);
-	  
-	  // For demo purposes, simulate API call
-	  setTimeout(() => {
-		console.log('Simulated API call completed');
-	  }, 1000);
-	  
+		console.log("Making API call...")
+		// Example API call - this would work with your actual API
+		// const result = await gxpStore.apiGet('/some-endpoint');
+		// console.log('API Result:', result);
+
+		// For demo purposes, simulate API call
+		setTimeout(() => {
+			console.log("Simulated API call completed")
+		}, 1000)
 	} catch (error) {
-	  console.error('API call failed:', error);
+		console.error("API call failed:", error)
 	}
-  }
-  
-  // Example dependency API call using new methods
-  async function testDependencyAPI(identifier) {
+}
+
+// Example dependency API call using new methods
+async function testDependencyAPI(identifier) {
 	try {
-	  console.log(`Testing API for dependency: ${identifier}`);
-	  
-	  // Example of the new getList method
-	  // const result = await gxpStore.getList(identifier, { page: 1, limit: 10 });
-	  // console.log(`API Result for ${identifier}:`, result);
-	  
-	  // For demo purposes, simulate API call
-	  socketMessages.value.unshift(`API call simulated for ${identifier}`);
-	  
+		console.log(`Testing API for dependency: ${identifier}`)
+
+		// Example of the new getList method
+		// const result = await gxpStore.getList(identifier, { page: 1, limit: 10 });
+		// console.log(`API Result for ${identifier}:`, result);
+
+		// For demo purposes, simulate API call
+		socketMessages.value.unshift(`API call simulated for ${identifier}`)
 	} catch (error) {
-	  console.error(`API call failed for ${identifier}:`, error);
-	  socketMessages.value.unshift(`API call failed for ${identifier}: ${error.message}`);
+		console.error(`API call failed for ${identifier}:`, error)
+		socketMessages.value.unshift(
+			`API call failed for ${identifier}: ${error.message}`,
+		)
 	}
-  }
-  
-  // Set up socket listeners for a specific dependency
-  function setupDependencyListeners(dependency) {
-	console.log(`Setting up listeners for ${dependency.identifier}`);
-	
+}
+
+// Set up socket listeners for a specific dependency
+function setupDependencyListeners(dependency) {
+	console.log(`Setting up listeners for ${dependency.identifier}`)
+
 	// Set up listeners for each event type
-	Object.keys(dependency.events || {}).forEach(eventType => {
-	  const eventName = dependency.events[eventType];
-	  
-	  if (gxpStore.sockets[dependency.identifier] && gxpStore.sockets[dependency.identifier][eventType]) {
-		const unsubscribe = gxpStore.sockets[dependency.identifier][eventType].listen((data) => {
-		  console.log(`Received ${eventType} event for ${dependency.identifier}:`, data);
-		  socketMessages.value.unshift(
-			`${dependency.identifier}.${eventType}: ${data.message || JSON.stringify(data).substring(0, 50)}...`
-		  );
-		});
-		
-		socketUnsubscribers.value.push(unsubscribe);
-	  }
-	});
-	
-	socketMessages.value.unshift(`Listening for events on ${dependency.identifier}`);
-  }
-  
-  // Example socket functionality
-  function handleSocketTest() {
+	Object.keys(dependency.events || {}).forEach((eventType) => {
+		const eventName = dependency.events[eventType]
+
+		if (
+			gxpStore.sockets[dependency.identifier] &&
+			gxpStore.sockets[dependency.identifier][eventType]
+		) {
+			const unsubscribe = gxpStore.sockets[dependency.identifier][
+				eventType
+			].listen((data) => {
+				console.log(
+					`Received ${eventType} event for ${dependency.identifier}:`,
+					data,
+				)
+				socketMessages.value.unshift(
+					`${dependency.identifier}.${eventType}: ${data.message || JSON.stringify(data).substring(0, 50)}...`,
+				)
+			})
+
+			socketUnsubscribers.value.push(unsubscribe)
+		}
+	})
+
+	socketMessages.value.unshift(
+		`Listening for events on ${dependency.identifier}`,
+	)
+}
+
+// Example socket functionality
+function handleSocketTest() {
 	// Emit a test event
-	gxpStore.emitSocket('primary', 'test-event', { message: 'Hello from plugin!' });
-	console.log('Emitted test event via socket');
-  }
-  
-  function emitTestEvent() {
-	const timestamp = new Date().toLocaleTimeString();
-	gxpStore.emitSocket('primary', 'plugin-message', { 
-	  message: `Test message at ${timestamp}`,
-	  timestamp: Date.now() 
-	});
-	
-	socketMessages.value.unshift(`Sent: Test message at ${timestamp}`);
-  }
-  
-  // Asset management methods
-  function addDevAssets() {
+	gxpStore.emitSocket("primary", "test-event", {
+		message: "Hello from plugin!",
+	})
+	console.log("Emitted test event via socket")
+}
+
+function emitTestEvent() {
+	const timestamp = new Date().toLocaleTimeString()
+	gxpStore.emitSocket("primary", "plugin-message", {
+		message: `Test message at ${timestamp}`,
+		timestamp: Date.now(),
+	})
+
+	socketMessages.value.unshift(`Sent: Test message at ${timestamp}`)
+}
+
+// Asset management methods
+function addDevAssets() {
 	// Add some development assets using the convenience method
-	gxpStore.addDevAsset('main_logo', 'logo-placeholder.png');
-	gxpStore.addDevAsset('background_image', 'background-placeholder.jpg');
-	gxpStore.addDevAsset('product_image', 'product-placeholder.jpg');
-	gxpStore.addDevAsset('avatar_placeholder', 'avatar-placeholder.png');
-	
-	console.log('Added development assets');
-	listAllAssets();
-  }
-  
-  function listAllAssets() {
-	currentAssets.value = gxpStore.listAssets();
-	console.log('Listed all assets');
-  }
-  
-  function updateLogo() {
+	gxpStore.addDevAsset("main_logo", "logo-placeholder.png")
+	gxpStore.addDevAsset("background_image", "background-placeholder.jpg")
+	gxpStore.addDevAsset("product_image", "product-placeholder.jpg")
+	gxpStore.addDevAsset("avatar_placeholder", "avatar-placeholder.png")
+
+	console.log("Added development assets")
+	listAllAssets()
+}
+
+function listAllAssets() {
+	currentAssets.value = gxpStore.listAssets()
+	console.log("Listed all assets")
+}
+
+function updateLogo() {
 	// Example of updating a specific asset
-	const appPort = window.location.port || 3000;
-	const appProtocol = window.location.protocol || 'http';
-	const newLogoUrl = `${appProtocol}://localhost:${appPort}/dev-assets/images/logo-placeholder.png`;
-	gxpStore.updateAsset('main_logo', newLogoUrl);
-	console.log('Updated logo asset');
-	listAllAssets();
-  }
-  
-  // Set up socket listeners when component mounts
-  onMounted(() => {
+	const appPort = window.location.port || 3000
+	const appProtocol = window.location.protocol || "http"
+	const newLogoUrl = `${appProtocol}://localhost:${appPort}/dev-assets/images/logo-placeholder.png`
+	gxpStore.updateAsset("main_logo", newLogoUrl)
+	console.log("Updated logo asset")
+	listAllAssets()
+}
+
+// Set up socket listeners when component mounts
+onMounted(() => {
 	// Listen for test events
-	const unsubscribe1 = gxpStore.useSocketListener('primary', 'test-response', (data) => {
-	  console.log('Received test response:', data);
-	  socketMessages.value.unshift(`Received: ${JSON.stringify(data)}`);
-	});
-	
+	const unsubscribe1 = gxpStore.useSocketListener(
+		"primary",
+		"test-response",
+		(data) => {
+			console.log("Received test response:", data)
+			socketMessages.value.unshift(`Received: ${JSON.stringify(data)}`)
+		},
+	)
+
 	// Listen for any incoming messages
-	const unsubscribe2 = gxpStore.useSocketListener('primary', 'incoming-message', (data) => {
-	  console.log('Received incoming message:', data);
-	  socketMessages.value.unshift(`Incoming: ${data.message || JSON.stringify(data)}`);
-	});
-	
+	const unsubscribe2 = gxpStore.useSocketListener(
+		"primary",
+		"incoming-message",
+		(data) => {
+			console.log("Received incoming message:", data)
+			socketMessages.value.unshift(
+				`Incoming: ${data.message || JSON.stringify(data)}`,
+			)
+		},
+	)
+
 	// Store unsubscribers for cleanup
-	socketUnsubscribers.value = [unsubscribe1, unsubscribe2];
-	
-	console.log('Plugin component mounted with GxP Datastore');
-	console.log('Available store methods:', Object.keys(gxpStore));
-  });
-  
-  // Clean up socket listeners when component unmounts
-  onUnmounted(() => {
-	socketUnsubscribers.value.forEach(unsubscribe => {
-	  if (typeof unsubscribe === 'function') {
-		unsubscribe();
-	  }
-	});
-  });
-  </script> 
+	socketUnsubscribers.value = [unsubscribe1, unsubscribe2]
+
+	console.log("Plugin component mounted with GxP Datastore")
+	console.log("Available store methods:", Object.keys(gxpStore))
+})
+
+// Clean up socket listeners when component unmounts
+onUnmounted(() => {
+	socketUnsubscribers.value.forEach((unsubscribe) => {
+		if (typeof unsubscribe === "function") {
+			unsubscribe()
+		}
+	})
+})
+</script>