feat: add default organization ID to environment and enhance organiza…

…tion select component

.env.example

@@ -77,6 +77,7 @@ VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
 VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
 
 VITE_IDLE_TIMER_MIN=30
+VITE_OSP_DEFAULT_ORG_ID=1
 
 OHDEAR_ENABLED=false
 OHDEAR_URL=""

resources/src/models/Author/components/AuthorSelect.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { QSelect } from 'quasar'
 import type { AuthorResource, AuthorResourceList } from '../Author'
+import { QSelect } from 'quasar'
 import { AuthorService } from '../Author'
 import CreateAuthorDialog from './CreateAuthorDialog.vue'
 
@@ -41,7 +41,7 @@ async function filterAuthors(val: string, update: (arg0: () => Promise<void>) =>
       const needle = val.toLowerCase()
       authorsLoading.value = true
       await AuthorService.list(
-                `limit=10&include=organization&filter[search]=${needle}`,
+        `limit=10&include=organization&filter[search]=${needle}`,
       ).then((response) => {
         authors.value = response
       })

resources/src/models/Organization/components/OrganizationSelect.vue

@@ -18,6 +18,7 @@ const props = defineProps<{
 const emit = defineEmits(['update:modelValue'])
 
 const localeStore = useLocaleStore()
+const { copy } = useClipboard()
 
 const organizationSelect = ref<QSelect | null>(null)
 
@@ -26,6 +27,7 @@ const selectedOrganization = ref<OrganizationResource | null>(null)
 const lastSearchTerm = ref('')
 const organizationsLoading = ref(false)
 const showCreateOrganizationDialog = ref(false)
+const defaultOrganiztionId = Number(import.meta.env.VITE_OSP_DEFAULT_ORG_ID) || 1
 
 watch(selectedOrganization, (organization) => {
   if (organization) {
@@ -38,10 +40,16 @@ onMounted(async () => {
     selectedOrganization.value = await OrganizationService.find(
       props.modelValue,
     )
+    return
   }
   if (props.initialSearchTerm) {
     organizationSelect.value?.filter(props.initialSearchTerm)
   }
+  if (props.modelValue === null) {
+    selectedOrganization.value = await OrganizationService.find(
+      defaultOrganiztionId,
+    )
+  }
 })
 
 async function filterOrganizations(val: string, update: (arg: () => Promise<void>) => void) {
@@ -107,6 +115,7 @@ function optionLabel(item: OrganizationResource) {
     :label="$t('common.organization')"
     :loading="organizationsLoading"
     use-input
+    clearable
     stack-label
     outlined
     :hint="$t('organization-select.hint')"
@@ -150,12 +159,36 @@ function optionLabel(item: OrganizationResource) {
         </q-item>
       </template>
     </template>
+    <template #option="{ itemProps, opt }">
+      <q-item v-bind="itemProps">
+        <q-item-section>
+          <q-item-label>
+            {{ (opt as OrganizationResource).data[`name_${localeStore.locale}`] }}
+          </q-item-label>
+          <q-item-label v-if="opt.data.ror_identifier" caption>
+            {{ (opt as OrganizationResource).data.ror_identifier }}
+            <q-btn
+              icon="mdi-content-copy"
+              size="xs"
+              flat
+              dense
+              @click="copy(opt.data.ror_identifier)"
+            >
+              <q-tooltip>{{ $t('common.copy-to-clipboard') }}</q-tooltip>
+            </q-btn>
+          </q-item-label>
+        </q-item-section>
+        <q-item-section side>
+          <q-item-label>
+            <q-icon name="mdi-earth" class="q-mr-xs" />{{ (opt as OrganizationResource).data.country_code }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </template>
     <CreateOrganizationDialog
       v-if="showCreateOrganizationDialog"
       v-model="showCreateOrganizationDialog"
       @created="createdOrganization"
     />
   </QSelect>
 </template>
-
-<style scoped></style>